:root {
  color-scheme: dark;
  --bg: #111713;
  --card: #1a231d;
  --edge: #354239;
  --text: #f0f6ef;
  --muted: #b7c8ba;
  --accent: #c8ff76;
  font: 16px/1.5 system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-underline-offset: 4px; }
.wrap { width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }
.bar { border-bottom: 1px solid var(--edge); }
.topline, .sectionhead, .record, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topline { min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.25rem; color: var(--text); text-decoration: none; font-weight: 760; }
.brand b { color: var(--accent); }
.tag, .pill { display: inline-block; border-radius: 30px; border: 1px solid var(--edge); padding: .2rem .65rem; font-size: .8rem; color: var(--accent); }
.hero { padding: clamp(2rem, 6vw, 4rem) 0 1.5rem; }
h1, h2, p { margin: 0 0 .65rem; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.3rem, 7vw, 4.4rem); line-height: 1.03; letter-spacing: -.06em; }
h2 { font-size: clamp(1.25rem, 3vw, 1.65rem); letter-spacing: -.025em; }
p, small { color: var(--muted); }
.eyebrow { font-size: .72rem; color: var(--accent); letter-spacing: .16em; font-weight: 740; }
.card, .notice { background: var(--card); border: 1px solid var(--edge); border-radius: 1.1rem; padding: clamp(1rem, 3vw, 1.65rem); margin-bottom: 1rem; min-width: 0; }
.notice { border-color: var(--accent); }
.notice p { margin-top: .65rem; }
.grid, .setup { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields { display: grid; gap: .65rem; justify-items: start; }
.fields label { width: 100%; }
.tenants, .inline { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; }
.tenants a { padding: .35rem .6rem; background: var(--bg); border-radius: .5rem; overflow-wrap: anywhere; }
label { color: var(--muted); font-size: .85rem; }
input, select, textarea, button { font: inherit; min-height: 42px; border-radius: .6rem; padding: .45rem .7rem; border: 1px solid var(--edge); }
input, select, textarea { display: block; margin-top: .25rem; color: var(--text); background: var(--bg); width: 100%; min-width: 0; }
button { background: var(--accent); color: #16271d; font-weight: 720; cursor: pointer; }
button.secondary { color: var(--text); background: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.record, .entry { border-top: 1px solid var(--edge); padding: .85rem 0 .2rem; margin-top: .55rem; overflow-wrap: anywhere; }
.entry p { white-space: pre-wrap; margin: .45rem 0; }
code { overflow-wrap: anywhere; }
.qr { display: block; max-width: 100%; height: auto; border-radius: .5rem; margin-block: .65rem; }
.footer { padding-block: 1rem 2rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 650px) { .grid, .setup { grid-template-columns: minmax(0, 1fr); } .grid { gap: 0; } }
.code-form { margin-top: 1rem; }
.link-code { color: var(--accent); font-size: 1.35rem; letter-spacing: .1em; }

.compose { margin-top: .75rem; }
.compose summary { color: var(--accent); cursor: pointer; font-weight: 720; padding-block: .45rem; }
.compose form { margin-top: .65rem; }
.tenants a[aria-current="page"] { background: var(--accent); color: var(--bg); font-weight: 720; }
.login { max-width: 28rem; padding-block: clamp(2rem, 10vh, 6rem); }
.login-password { display: flex; flex-wrap: wrap; gap: .5rem; }
.login h1 { margin-top: 1.25rem; font-size: 2rem; }

.inbox-page { min-height: 100dvh; }
.inbox-top { min-height: 60px; padding: .65rem clamp(.8rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--edge); }
.inbox { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); max-width: 1450px; margin-inline: auto; height: calc(100dvh - 61px); }
.inbox-sidebar, .inbox-chat { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.inbox-sidebar { background: var(--card); border-right: 1px solid var(--edge); }
.inbox-sidebar-head, .chat-heading { padding: 1rem; border-bottom: 1px solid var(--edge); }
.inbox-sidebar h1 { font-size: 2rem; }
.inbox-new { margin-top: .65rem; }
.inbox-new summary { color: var(--accent); cursor: pointer; }
.thread-list, .chat-history { flex: 1; overflow: auto; }
.thread { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--edge); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.thread[hidden] { display: none; }
.thread[aria-current], .thread:hover { background: #263a2c; }
.thread small { display: block; }
.thread-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: #2a4232; color: var(--accent); font-size: .65rem; }
.chat-heading { display: flex; align-items: center; gap: .8rem; background: var(--card); }
.chat-heading h2 { margin: 0; }
.chat-heading .pill { margin-left: auto; }
.chat-back { display: none; }
.chat-welcome { margin: auto; text-align: center; padding: 1rem; }
.chat-history { padding: clamp(.7rem, 3vw, 2rem); background: radial-gradient(#233027 1px, transparent 1px) 0 0 / 22px 22px, var(--bg); }
.bubble { width: fit-content; max-width: min(84%, 44rem); border-radius: .9rem; padding: .6rem .85rem; margin-bottom: .6rem; overflow-wrap: anywhere; background: #26312a; }
.bubble p { color: var(--text); white-space: pre-wrap; margin-bottom: .25rem; }
.bubble small { display: block; text-align: right; font-size: .72rem; }
.bubble-out { margin-left: auto; background: #294733; border-bottom-right-radius: .2rem; }
.bubble-in { border-bottom-left-radius: .2rem; }
.chat-compose { display: flex; align-items: end; gap: .5rem; padding: .65rem; background: var(--card); border-top: 1px solid var(--edge); }
.chat-compose textarea { margin: 0; resize: vertical; max-height: 8rem; }
.chat-older { display: block; text-align: center; margin-bottom: 1rem; }
.inbox-empty { padding: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 650px) {
  .inbox { display: flex; }
  .inbox-sidebar, .inbox-chat { width: 100%; }
  .inbox:not(.inbox-selected) .inbox-chat, .inbox-selected .inbox-sidebar { display: none; }
  .chat-back { display: block; flex-shrink: 0; }
}

.dashboard-hero { padding-block: clamp(1.4rem, 4vw, 2.5rem) 1rem; }
.dashboard-hero h1 { font-size: clamp(2rem, 6vw, 3.35rem); }
.dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.channel-card { background: linear-gradient(120deg, #21362a, var(--card) 70%); }
.primary-link { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: fit-content; margin-top: .65rem; padding: .65rem 1rem; border-radius: .7rem; color: var(--bg); background: var(--accent); font-weight: 750; text-decoration: none; }
.dashboard-details summary { color: var(--text); font-weight: 720; cursor: pointer; }
.dashboard-details[open] summary { margin-bottom: 1rem; }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.composer-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem; }
.composer-option summary { color: var(--accent); cursor: pointer; padding: .25rem; font-size: .9rem; }
.composer-option input { width: auto; max-width: 100%; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, minmax(32px, 1fr)); gap: .25rem; padding: .35rem 0; }
.emoji-grid button { min-height: 32px; padding: .18rem .3rem; }
@media (max-width: 650px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .primary-link { width: 100%; }
}
.transfer-instructions { white-space: pre-wrap; }

.chat-pending { padding: .55rem .75rem; background: var(--card); border-top: 1px solid var(--edge); }
.chat-pending summary { cursor: pointer; font-weight: 720; color: var(--accent); }
.chat-pending ul { padding: 0; margin: .25rem 0 0; max-height: min(24dvh, 12rem); overflow: auto; }
.chat-pending li { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .4rem 0; }
.chat-pending li p { margin: 0; white-space: pre-wrap; }
.bubble .group-author { color: var(--accent); text-align: left; margin-bottom: .2rem; }

.console-nav { display: flex; gap: .35rem; flex-wrap: wrap; padding-block: .6rem; border-bottom: 1px solid var(--edge); }
.console-nav a { padding: .45rem .65rem; border-radius: .45rem; color: var(--text); text-decoration: none; }
.console-nav a[aria-current], .console-nav a:hover { background: var(--card); color: var(--accent); }
.overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.metric span { display: block; color: var(--muted); font-size: .87rem; }
.metric strong { display: block; font-size: clamp(1.7rem,4vw,2.45rem); margin-top: .15rem; }
.overview-channel p { margin-block: .25rem 0; }
.tenant-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.tenant-actions .primary-link { margin-top: 0; width: auto; }
.pill.connection-disconnected { color: #ffd28a; }
.pill.connection-unlinked { color: var(--muted); }
@media (max-width: 650px) { .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .metric { margin-bottom: .35rem; } .overview-metrics { margin-bottom: .65rem; } }

.thread-copy { flex: 1; min-width: 0; }
.thread-copy strong, .thread-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-copy small { margin-top: .16rem; }
.thread-time { align-self: flex-start; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.chat-heading > div { min-width: 0; }
.chat-heading h2 { overflow-wrap: anywhere; }
.composer-option summary { border: 1px solid var(--edge); border-radius: .65rem; padding: .4rem .65rem; list-style: none; }
.composer-option summary::-webkit-details-marker { display: none; }
.composer-option[open] summary { background: #263a2c; }
.composer-tools { position: relative; }
.emoji-grid { position: absolute; z-index: 2; left: 0; bottom: calc(100% + .45rem); width: min(100%, 23rem); max-height: min(34dvh, 15rem); overflow-y: auto; padding: .55rem; border: 1px solid var(--edge); border-radius: .8rem; background: var(--card); }
.emoji-grid button { min-height: 36px; }
@media (max-width: 650px) {
  .chat-heading { padding: .7rem; gap: .6rem; }
  .chat-heading h2 { font-size: 1.05rem; }
  .chat-heading .pill { flex-shrink: 0; }
  .chat-compose textarea { resize: none; }
}

.key-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.key-actions input { flex: 1 1 14rem; min-width: 0; margin: 0; font-family: monospace; }

.composer-option[data-schedule-picker][open] { flex: 1 1 100%; }
.schedule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
.schedule-fields input { display: block; width: 100%; margin: .25rem 0 0; }
.schedule-fields button { grid-column: 1 / -1; justify-self: start; }

.console-nav a { display: inline-flex; align-items: center; gap: .4rem; }
.console-nav a span { font-size: 1.2rem; line-height: 1; }
.console-section-title { margin: 1.25rem 0 .65rem; font-size: 1.15rem; }
.subscription-summary { padding-block: .6rem; }
@media (max-width: 650px) {
  .console-page { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .console-page .topline { min-height: 58px; }
  .console-nav { position: fixed; z-index: 5; inset: auto 0 0; width: 100%; flex-wrap: nowrap; justify-content: space-around; padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--card); border: 0; border-top: 1px solid var(--edge); }
  .console-nav a { flex: 1 1 0; flex-direction: column; padding: .5rem .1rem; gap: .25rem; font-size: .75rem; text-align: center; }
  .console-nav a[aria-current] { background: #263a2c; }
}

.channel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .9rem; }
.channel-toolbar .primary-link { margin: 0; width: auto; }
.channel-tabs { display: flex; gap: .35rem; margin-bottom: 1rem; border-bottom: 1px solid var(--edge); }
.channel-tabs a { padding: .65rem .75rem; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.channel-tabs a[aria-current] { border-color: var(--accent); color: var(--accent); }
.metric-scope { margin: 0 0 .75rem; color: var(--muted); font-size: .875rem; }

.activity-report { margin-bottom: 1rem; }
.activity-range { display: inline-flex; gap: .15rem; padding: .2rem; background: var(--bg); border: 1px solid var(--edge); border-radius: .65rem; }
.activity-range a { padding: .35rem .65rem; border-radius: .45rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.activity-range a[aria-current] { color: var(--accent); background: #263a2c; }
.activity-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .7rem; margin: 1rem 0; }
.activity-kpis > div { padding: .65rem .8rem; border-left: 2px solid var(--edge); background: var(--bg); border-radius: .4rem; }
.activity-kpis span { display: block; color: var(--muted); font-size: .8rem; }
.activity-kpis strong { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.activity-legend { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .82rem; }
.activity-legend span:first-child { color: var(--accent); }
.activity-legend span:nth-child(2) { color: #8ccfd0; }
.activity-chart { height: 8rem; display: flex; gap: clamp(1px, .5vw, 6px); background: repeating-linear-gradient(to top, var(--edge) 0 1px, transparent 1px 25%); }
.activity-day { flex: 1; min-width: 0; }
.activity-bars { display: block; width: 100%; height: 100%; }
.activity-bars rect { fill: var(--accent); }
.activity-bars rect + rect { fill: #8ccfd0; }
.activity-table { margin-top: .8rem; }
.activity-table table { width: 100%; margin-top: .5rem; text-align: left; }
.activity-table summary { cursor: pointer; color: var(--accent); }

.inbox-actions { position: relative; }
.inbox-actions summary { cursor: pointer; color: var(--accent); }
.inbox-actions nav { position: absolute; right: 0; top: calc(100% + .55rem); z-index: 4; display: grid; gap: .65rem; width: max-content; padding: .75rem; border: 1px solid var(--edge); border-radius: .65rem; background: var(--card); }
.activity-channel small { display: block; }

.compose-attachment { position: relative; align-self: start; border: 1px solid var(--edge); border-radius: .65rem; padding: .4rem .65rem; color: var(--accent); font-size: .9rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.compose-attachment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.compose-attachment:focus-within { outline: 2px solid var(--accent); }
.compose-attachment span:not(:empty)::before { content: " · "; }
.chat-photo { display: block; max-width: min(100%, 20rem); max-height: 19rem; object-fit: contain; border-radius: .5rem; }
.bubble audio { display: block; width: min(15rem, 100%); }
.chat-download { display: block; font-size: .8rem; margin-block: .2rem; }

.chat-file-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem .7rem; margin: .2rem 0; }
.chat-file-meta strong { font-size: .82rem; }
.voice-button { align-self: start; padding: .4rem .65rem; min-height: 0; font-size: .9rem; }
.voice-preview { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: .55rem; }
.voice-preview[hidden] { display: none; }
.voice-preview audio { width: min(16rem, 100%); height: 2.5rem; }
.voice-status { flex: 1 0 100%; margin: 0; font-size: .82rem; }

.thread-section { margin: 0; padding: .6rem 1rem; background: var(--bg); color: var(--muted); font-size: .78rem; font-weight: 650; }
.thread-avatar { position: relative; overflow: hidden; }
.thread-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.thread-avatar img.avatar-loaded { opacity: 1; }
.chat-avatar { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }

.bubble-reactions, .reaction-choices { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.bubble-reactions span { background: var(--bg); padding: .08rem .32rem; border-radius: 1rem; }
.bubble-reaction-menu summary { cursor: pointer; color: var(--accent); font-size: .72rem; margin-top: .3rem; }
.reaction-choices button { padding: .25rem .4rem; min-height: 2rem; font-size: .8rem; }
.reaction-custom { display: flex; gap: .25rem; align-items: center; margin-top: .25rem; }
.reaction-custom input { min-width: 0; max-width: 8rem; margin: 0; }
.reaction-custom button { padding: .25rem .4rem; min-height: 2rem; font-size: .8rem; }

.inbox-top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem .65rem; }
.sound-toggle { min-height: 2rem; padding: .3rem .55rem; font-size: .78rem; white-space: nowrap; }
.sound-toggle[aria-pressed="true"] { color: var(--accent); }

.interactive-picker[open] { flex: 1 1 100%; }
.interactive-fields { display: grid; gap: .5rem; margin-top: .5rem; }
.interactive-fields textarea { margin: .25rem 0 0; }

.interactive-fields label[hidden], .interactive-feedback:empty { display: none; }
.interactive-feedback { margin: 0; }

.button-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .35rem .55rem; border: 1px solid var(--edge); border-radius: .55rem; padding: .55rem; }
.button-editor[hidden] { display: none; }
.button-editor input { min-width: 0; }
.button-template-save { display: flex; flex-wrap: wrap; align-items: end; gap: .45rem; }
.sent-options { display: grid; gap: .25rem; margin-block: .45rem; }
.sent-options span { display: block; border: 1px solid var(--edge); border-radius: .45rem; padding: .25rem .5rem; color: var(--accent); text-align: center; }
.selection-label { color: var(--accent); font-size: .72rem; }
.channel-tabs { flex-wrap: wrap; }
.selection-quote { margin: 0 0 .35rem; padding: .3rem .55rem; border-left: 2px solid var(--accent); background: var(--bg); font-size: .8rem; }

.template-card { margin-top: .7rem; border: 1px solid var(--edge); border-radius: .7rem; padding: .65rem .8rem; }
.template-card summary { cursor: pointer; }
.template-card summary span { margin-left: .5rem; color: var(--muted); font-size: .78rem; }
.template-preview { margin-block: .7rem; padding: .6rem .75rem; border-radius: .65rem; background: var(--bg); overflow-wrap: anywhere; }
.template-preview p { white-space: pre-wrap; }
.compose-icon { vertical-align: -.2em; }
.attachment-preview { flex: 1 0 100%; display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border: 1px solid var(--edge); border-radius: .6rem; }
.attachment-preview[hidden], .attachment-preview img[hidden] { display: none; }
.attachment-preview img { object-fit: cover; border-radius: .35rem; }
.attachment-preview > div { flex: 1; min-width: 0; }
.attachment-preview strong, .attachment-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { min-height: 2rem; padding: .2rem .55rem; }


.connection-notice {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border: 1px solid #b7791f;
  border-inline-start-width: 4px;
  border-radius: .5rem;
}
.connection-notice p { margin: .35rem 0 0; }

.chat-assignment { padding: .45rem .85rem; border-bottom: 1px solid var(--edge); }
.chat-assignment form { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-top: .65rem; }
.chat-assignment ul { max-height: 10rem; overflow: auto; }

.register-plans { width: 100%; display: grid; gap: .65rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.register-plans legend { padding: 0; margin-bottom: .5rem; font-weight: 700; }
.register-plan { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid var(--edge); border-radius: .75rem; padding: .8rem; cursor: pointer; }
.register-plan:has(input:checked) { border-color: var(--accent); }
.register-plan input { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: .2rem 0 0; accent-color: var(--accent); }
.register-plan > span { display: grid; gap: .2rem; overflow-wrap: anywhere; }

.channel-status-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.channel-status-heading .eyebrow { margin-top: 0; }
.channel-status-heading h2 { margin-bottom: 0; }
.channel-link-options { display: grid; gap: .85rem; max-width: 38rem; }
.channel-link-options > p { margin-bottom: 0; }
.channel-link-alternative { border-top: 1px solid var(--edge); padding-top: .8rem; }
.channel-link-alternative summary { color: var(--accent); cursor: pointer; }
.channel-link-alternative form { margin-top: .65rem; }

.admin-intro { margin-block: 0 1rem; }
.admin-metrics { margin-block: 1rem; }
.admin-metrics a { text-decoration: none; color: var(--text); margin: 0; }
.admin-metrics a:hover, .admin-metrics a:focus-visible { border-color: var(--accent); }
@media (max-width: 650px) {
  .admin-nav { position: static; flex-wrap: wrap; justify-content: flex-start; }
  .admin-nav a { flex: 0 0 auto; padding-inline: .6rem; }
}