/* CampOffice messages: the text inbox and message previews (Filament's compiled CSS doesn't cover these). */

/* Inbox */
.cos-inbox { display: grid; gap: 1rem; grid-template-columns: minmax(14rem, 20rem) 1fr; align-items: start; }
@media (max-width: 768px) { .cos-inbox { grid-template-columns: 1fr; } }
.cos-inbox-empty { border: 1px dashed rgb(209 213 219); border-radius: .75rem; padding: 1.5rem; color: rgb(75 85 99); line-height: 1.5; display: grid; gap: .5rem; }
.cos-inbox-threads { display: grid; gap: .25rem; max-height: 70vh; overflow-y: auto; }
.cos-thread { display: grid; gap: .15rem; text-align: left; width: 100%; border: 1px solid transparent; border-radius: .6rem; padding: .55rem .7rem; background: transparent; cursor: pointer; }
.cos-thread:hover { background: rgb(249 250 251); }
.cos-thread:focus-visible { outline: 2px solid rgb(2 132 199); outline-offset: 1px; }
.cos-thread--active { background: rgb(240 249 255); border-color: rgb(186 230 253); }
.cos-thread-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cos-thread-name { font-weight: 600; font-size: .9rem; }
.cos-thread-unread { min-width: 1.4rem; text-align: center; border-radius: 999px; background: rgb(220 38 38); color: #fff; font-size: .75rem; font-weight: 700; padding: 0 .4rem; }
.cos-thread-preview { font-size: .85rem; color: rgb(75 85 99); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-thread-at { font-size: .75rem; color: rgb(107 114 128); }
.cos-inbox-conversation { border: 1px solid rgb(229 231 235); border-radius: .75rem; background: #fff; padding: 1rem; display: grid; gap: 1rem; }
.cos-conversation-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cos-link { color: rgb(2 132 199); font-size: .875rem; text-decoration: underline; }
.cos-messages { display: grid; gap: .6rem; max-height: 55vh; overflow-y: auto; }
.cos-message { display: grid; gap: .2rem; justify-items: start; }
.cos-message--out { justify-items: end; }
.cos-bubble { max-width: 36rem; border-radius: .9rem; padding: .5rem .8rem; font-size: .9rem; line-height: 1.45; background: rgb(243 244 246); overflow-wrap: anywhere; }
.cos-message--out .cos-bubble { background: rgb(2 132 199); color: #fff; }
.cos-message-meta { font-size: .75rem; color: rgb(107 114 128); }
.cos-flag { color: rgb(185 28 28); font-weight: 600; }
.cos-flag--ok { color: rgb(21 128 61); }
.cos-reply { display: grid; gap: .5rem; border-top: 1px solid rgb(229 231 235); padding-top: .75rem; }
.cos-reply-label { font-size: .875rem; font-weight: 600; }
.cos-reply-text { width: 100%; border: 1px solid rgb(209 213 219); border-radius: .5rem; padding: .5rem .6rem; font-size: .9rem; background: transparent; }
.cos-muted { color: rgb(107 114 128); font-size: .875rem; }
.dark .cos-thread:hover { background: rgb(255 255 255 / .05); }
.dark .cos-thread--active { background: rgb(14 165 233 / .12); border-color: rgb(14 165 233 / .3); }
.dark .cos-inbox-conversation { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
.dark .cos-bubble { background: rgb(255 255 255 / .07); }
.dark .cos-thread-preview, .dark .cos-inbox-empty { color: rgb(209 213 219); }
.dark .cos-reply-text { border-color: rgb(255 255 255 / .15); }

/* Message preview (form and view page) */
.cos-preview { display: grid; gap: 1rem; }
.cos-preview-note { color: rgb(107 114 128); font-size: .875rem; }
.cos-preview-block { display: grid; gap: .35rem; }
.cos-preview-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: rgb(107 114 128); }
.cos-preview-meta { font-size: .85rem; color: rgb(75 85 99); }
.cos-preview-email { border: 1px solid rgb(229 231 235); border-radius: .5rem; overflow: hidden; max-width: 40rem; background: #fff; color: #1c1917; }
.cos-preview-email-head { color: #fff; padding: .6rem 1rem; font-weight: 700; }
.cos-preview-email-body { padding: .9rem 1rem; font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.cos-preview-email-body ul { list-style: disc; padding-left: 1.25rem; }
.cos-preview-email-body ol { list-style: decimal; padding-left: 1.25rem; }
.cos-preview-email-body a { color: rgb(2 132 199); text-decoration: underline; }
.cos-preview-email-body p + p { margin-top: .75rem; }
.cos-preview-email-body h1, .cos-preview-email-body h2, .cos-preview-email-body h3 { font-weight: 700; margin: .5rem 0; }
.cos-preview-sms { max-width: 26rem; border-radius: .9rem; padding: .5rem .8rem; background: rgb(243 244 246); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.cos-preview-file { display: inline-block; border: 1px solid rgb(209 213 219); border-radius: .4rem; padding: 0 .4rem; margin-right: .25rem; font-size: .8rem; }
.dark .cos-preview-sms { background: rgb(255 255 255 / .07); }

/* "Record" in the browser (AudioRecorder): big enough buttons to press on a phone. */
.co-recorder { display: grid; gap: .5rem; }
.co-recorder__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.co-recorder__button { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: .5rem; border: 1px solid rgb(209 213 219); background: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; }
.co-recorder__button:focus-visible { outline: 2px solid rgb(2 132 199); outline-offset: 2px; }
.co-recorder__button--record { border-color: rgb(220 38 38 / .5); }
.co-recorder__button--stop { background: rgb(220 38 38); border-color: rgb(220 38 38); color: #fff; }
.co-recorder__button--use { background: rgb(22 163 74); border-color: rgb(22 163 74); color: #fff; }
.co-recorder__dot { width: .7rem; height: .7rem; border-radius: 999px; background: rgb(220 38 38); display: inline-block; }
.co-recorder__dot--live { animation: co-recorder-blink 1s steps(2, start) infinite; }
@keyframes co-recorder-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .co-recorder__dot--live { animation: none; } }
.co-recorder__time { font-variant-numeric: tabular-nums; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.co-recorder__note { font-size: .875rem; color: rgb(75 85 99); }
.co-recorder__note--ok { color: rgb(21 128 61); }
.co-recorder__note--error { color: rgb(185 28 28); }
.co-recorder__audio { width: 100%; max-width: 28rem; }
.dark .co-recorder__button { background: rgb(17 24 39); border-color: rgb(255 255 255 / .15); color: rgb(229 231 235); }
.dark .co-recorder__button--stop { background: rgb(220 38 38); color: #fff; }
.dark .co-recorder__button--use { background: rgb(22 163 74); color: #fff; }
.dark .co-recorder__note { color: rgb(156 163 175); }
.dark .cos-preview-meta { color: rgb(209 213 219); }

/* Own email address: status and the records to add */
.cos-domain { display: grid; gap: .6rem; line-height: 1.5; font-size: .9rem; }
.cos-domain-status { padding: .6rem .8rem; border-radius: .6rem; background: rgb(255 251 235); border: 1px solid rgb(253 230 138); }
.cos-domain-status--ok { background: rgb(240 253 244); border-color: rgb(187 247 208); }
.cos-domain-lead { font-weight: 600; }
.cos-dns-wrap { overflow-x: auto; max-width: 100%; }
.cos-dns { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cos-dns th { text-align: left; font-weight: 600; color: rgb(75 85 99); padding: .4rem .6rem; border-bottom: 1px solid rgb(229 231 235); white-space: nowrap; }
.cos-dns td { padding: .45rem .6rem; border-bottom: 1px solid rgb(243 244 246); vertical-align: top; }
.cos-dns code { font-size: .8rem; user-select: all; }
.cos-dns-value { overflow-wrap: anywhere; word-break: break-all; }
.dark .cos-domain-status { background: rgb(120 53 15 / .2); border-color: rgb(253 230 138 / .25); }
.dark .cos-domain-status--ok { background: rgb(20 83 45 / .25); border-color: rgb(187 247 208 / .25); }
.dark .cos-dns th { color: rgb(209 213 219); border-color: rgb(255 255 255 / .1); }
.dark .cos-dns td { border-color: rgb(255 255 255 / .06); }

/* Camp phone number: numbers to choose from, and the texting registration tracker */
.cos-phone { display: grid; gap: .75rem; line-height: 1.5; font-size: .9rem; }
.cos-numbers { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cos-number { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .6rem .8rem; border: 1px solid rgb(229 231 235); border-radius: .6rem; }
.cos-number-digits { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cos-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cos-step { display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid rgb(209 213 219); color: rgb(75 85 99); font-size: .85rem; }
.cos-step--done { background: rgb(240 253 244); border-color: rgb(134 239 172); color: rgb(21 128 61); font-weight: 600; }
.cos-step--now { background: rgb(240 249 255); border-color: rgb(125 211 252); color: rgb(3 105 161); font-weight: 600; }
.cos-step--problem { background: rgb(254 242 242); border-color: rgb(252 165 165); color: rgb(185 28 28); font-weight: 600; }
.cos-reason { padding: .6rem .8rem; border-radius: .6rem; background: rgb(254 242 242); border: 1px solid rgb(254 202 202); }
.dark .cos-number { border-color: rgb(255 255 255 / .1); }
.dark .cos-step { border-color: rgb(255 255 255 / .15); color: rgb(209 213 219); }
.dark .cos-step--done { background: rgb(20 83 45 / .3); color: rgb(134 239 172); }
.dark .cos-step--now { background: rgb(12 74 110 / .3); color: rgb(125 211 252); }
.dark .cos-step--problem, .dark .cos-reason { background: rgb(127 29 29 / .3); color: rgb(252 165 165); border-color: rgb(252 165 165 / .3); }