:root {
  color-scheme: light;
  --canvas: #f5f5f2;
  --surface: #ffffff;
  --surface-muted: #f0f1ed;
  --surface-subtle: #fafaf8;
  --panel-chats: #f1f4f1;
  --panel-chat: #fbfcfa;
  --panel-info: #eaf0ec;
  --panel-chrome: #ffffff;
  --panel-divider: #d9e0da;
  --ink: #202321;
  --ink-soft: #606762;
  --ink-faint: #929a94;
  --line: #e7e9e4;
  --line-strong: #d9ddd7;
  --mint: #2d7a62;
  --mint-dark: #195a48;
  --mint-pale: #e2f0e9;
  --coral: #c75e5a;
  --coral-pale: #fff0ef;
  --amber: #a16e2c;
  --amber-pale: #fff5df;
  --blue: #5079a9;
  --shadow-soft: 0 12px 36px rgba(26, 34, 30, .06);
  --shadow-modal: 0 24px 80px rgba(26, 34, 30, .18);
  --rail-width: 72px;
  --sidebar-width: 322px;
  --info-width: 292px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --font-body: Inter, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --client-font-size: .875rem;
  --client-font-weight: 400;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-body); font-size: var(--client-font-size); font-weight: var(--client-font-weight); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.session-restore { display: flex; justify-content: center; padding: 8px 0 22px; }
.session-restore[hidden] { display: none; }
.session-restore__spinner { width: 42px; height: 42px; border: 4px solid var(--mint-pale); border-top-color: var(--mint); border-radius: 50%; animation: session-restore-spin .85s linear infinite, session-restore-pulse .85s ease-in-out infinite alternate; }
@keyframes session-restore-spin { to { transform: rotate(360deg); } }
@keyframes session-restore-pulse { from { opacity: .35; } to { opacity: 1; } }
.auth-gate { position: fixed; z-index: 100; display: grid; width: 100%; height: 100dvh; padding: 24px; place-items: start center; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas); }
/* Centred, but safely. Centring with `place-items: center` puts a card taller
   than the window half above the top edge, where it cannot be scrolled to; the
   browser then pulls the page down to whatever was focused, and the whole sign-in
   jumps. Auto margins centre the card while there is room and collapse to
   nothing once there is not, which leaves the top reachable and the scroll
   inside this element rather than on the page. */
.auth-gate > .auth-card { margin-block: auto; }
.auth-card { width: min(440px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-modal); }
.auth-card__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 31px; font: 800 16px var(--font-display); }.auth-card__brand span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 9px; background: var(--mint); }.auth-card h1 { margin: 0 0 8px; font-size: 26px; }.auth-copy { margin-bottom: 22px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }.auth-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.auth-form input { height: 42px; padding: 0 12px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-subtle); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }.auth-submit { width: 100%; margin: 5px 0 0; }.auth-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; padding: 12px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; border: 1px solid #cce5d9; border-radius: 7px; background: #f2fbf6; }.auth-notice svg { width: 17px; height: 17px; color: var(--mint); }.auth-status { min-height: 18px; margin-top: 14px; color: var(--ink-soft); font-size: 11px; }.auth-status.is-error { color: var(--coral); }.auth-link { display: block; margin: 12px auto 0; padding: 3px; color: var(--mint-dark); font-size: 11px; border: 0; background: transparent; }.auth-link:hover { text-decoration: underline; }.recovery-codes { margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }.recovery-codes strong { font-size: 12px; }.recovery-codes p { margin: 3px 0 10px; color: var(--ink-soft); font-size: 10px; }.recovery-codes code { display: block; color: var(--ink); font-size: 11px; line-height: 1.7; white-space: pre-wrap; user-select: all; }.recovery-codes .primary-button { width: 100%; margin: 12px 0 0; }
.app-shell { display: none; grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr) var(--info-width); width: 100%; height: 100dvh; overflow: hidden; background: var(--panel-chat); }.app-shell.is-authenticated { display: grid; }
.app-shell.info-collapsed { grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr); }
.app-shell.info-collapsed .info-panel { display: none; }
.side-rail { display: flex; flex-direction: column; align-items: center; padding: 20px 0 18px; background: #202a27; color: #b5c5be; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: 39px; color: #effaf5; background: var(--mint); border-radius: 10px; box-shadow: 0 5px 12px rgba(31, 115, 87, .3); }
.brand-mark__shape { font: 800 19px/1 var(--font-display); transform: translateY(-1px); }
.rail-nav, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rail-bottom { margin-top: auto; }
.rail-button { position: relative; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: #91a39b; border: 0; border-radius: 9px; background: transparent; transition: .15s ease; }
.rail-button:hover { color: #effaf5; background: rgba(255, 255, 255, .08); }
.rail-button.is-active { color: #fff; background: rgba(77, 164, 130, .22); }
.rail-button svg { width: 19px; height: 19px; }
.rail-badge { position: absolute; top: 2px; right: 1px; display: grid; min-width: 15px; height: 15px; padding: 0 4px; place-items: center; color: #24312c; font-size: 9px; font-weight: 700; background: #a9dbc6; border-radius: 99px; }
.profile-orb { position: relative; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: #e8f1ed; font-size: 11px; font-weight: 700; border: 1px solid rgba(202, 231, 220, .25); border-radius: 50%; background: #3d514b; }
.online-dot { position: absolute; right: -1px; bottom: 1px; width: 9px; height: 9px; border: 2px solid #202a27; border-radius: 50%; background: #77c6a6; }

/* Same reason as .conversation: without min-height:0 a long chat list stretches
   the column past the window instead of scrolling inside it. */
.chat-sidebar { display: flex; min-width: 0; min-height: 0; height: 100%; overflow: hidden; flex-direction: column; border-right: 1px solid var(--panel-divider); background: var(--panel-chats); }
.chat-sidebar__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 20px 20px; }
.eyebrow { margin: 0 0 5px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin-bottom: 0; font-size: 21px; letter-spacing: 0; }
h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; color: var(--ink-soft); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; transition: .15s ease; }
.icon-button:hover { color: var(--ink); border-color: var(--line); background: var(--surface-muted); }
.icon-button--filled { color: #fff; background: var(--mint); box-shadow: 0 4px 10px rgba(45, 122, 98, .16); }
.icon-button--filled:hover { color: #fff; border-color: var(--mint-dark); background: var(--mint-dark); }
.icon-button--small { width: 26px; height: 26px; }
.icon-button--small svg { width: 15px; height: 15px; }
.search-box { display: flex; height: 38px; align-items: center; gap: 9px; margin: 0 16px 13px; padding: 0 10px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.search-box svg { width: 16px; height: 16px; }
.search-box input { min-width: 0; flex: 1; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 12px; }
.search-box input::placeholder { color: var(--ink-faint); }
kbd { padding: 2px 5px; color: var(--ink-faint); font: 10px/1.2 var(--font-body); border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-muted); }
.chat-filters { display: flex; gap: 7px; padding: 0 16px 15px; }
.filter-chip { padding: 5px 8px; color: var(--ink-soft); font-size: 11px; border: 0; border-radius: 5px; background: transparent; }
.filter-chip span { margin-left: 4px; color: var(--ink-faint); }
.filter-chip:hover { background: var(--surface-muted); }
.filter-chip.is-active { color: var(--mint-dark); font-weight: 700; background: var(--mint-pale); }
.filter-chip.is-active span { color: var(--mint); }
.chat-list { min-height: 0; flex: 1; overflow: auto; padding: 0 9px; scrollbar-width: thin; }
.list-label { margin: 8px 11px 7px; color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat-item { display: flex; width: 100%; min-height: 65px; align-items: center; gap: 11px; padding: 9px 10px; text-align: left; border: 0; border-radius: 7px; background: transparent; transition: .15s ease; }
.chat-item:hover { background: var(--surface-muted); }
.chat-item.is-selected { background: var(--mint-pale); }
.avatar { display: inline-grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; overflow: hidden; color: #fff; font: 700 15px/1 var(--font-display); border-radius: 11px; }
.avatar svg { width: 18px; height: 18px; stroke-width: 1.7; }
.avatar--announcement { color: #276f59; background: #cfeadf; }
.avatar--lounge { color: #7b6134; background: #f4e6bd; }
.avatar--maria { background: #c5aaa4; }
.avatar--team { color: #586c9b; background: #dce4fa; }
.avatar--support { color: #5c6b75; background: #e0e7e9; }
.avatar--ai { color: #665d9a; background: #e9e3fa; }
.avatar--saved { color: #8a6a2f; background: #f6e7c8; }
.avatar--admin { color: #fff; background: #5a8272; }
.avatar--header { width: 35px; height: 35px; border-radius: 10px; }
.avatar--message { width: 29px; height: 29px; align-self: flex-end; border-radius: 9px; font-size: 11px; }
.avatar--large { width: 58px; height: 58px; border-radius: 16px; }
.avatar--large svg { width: 25px; height: 25px; }
.chat-item__copy { min-width: 0; flex: 1; }
.chat-item__line { display: flex; min-width: 0; justify-content: space-between; gap: 8px; }
.chat-item__line strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-item__line time { flex: 0 0 auto; color: var(--ink-faint); font-size: 10px; }
.chat-item__preview { display: block; overflow: hidden; margin-top: 4px; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-item__preview b { color: var(--ink); font-weight: 600; }
.chat-item.is-selected .chat-item__preview { color: var(--mint-dark); }
.chat-item__meta { display: flex; align-items: center; }
.lock-mini { color: var(--mint); }
.lock-mini svg { width: 12px; height: 12px; stroke-width: 2; }
.sent-check { color: var(--mint); }
.sent-check svg { width: 14px; height: 14px; }
.unread-count { display: grid; min-width: 19px; height: 19px; padding: 0 5px; place-items: center; color: #fff; font-size: 10px; font-weight: 700; border-radius: 5px; background: var(--mint); }
.ai-pill { padding: 3px 5px; color: #675a9e; font-size: 9px; font-weight: 700; border: 1px solid #d5cdf1; border-radius: 4px; background: #f1edff; }
.status-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.status-dot--muted { background: var(--ink-faint); }
.chat-sidebar__footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 16px; color: var(--ink-faint); font-size: 10px; border-top: 1px solid var(--line); }
.sync-status { display: flex; align-items: center; gap: 6px; }
.sync-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-pale); }
.protocol-version { color: #b5bbb5; }

/* min-height and overflow are what keep the composer on screen. A grid item
   defaults to min-height:auto, so this column grew with the conversation
   instead of scrolling it: past a screenful the composer was pushed below the
   window and the message list could not be scrolled at all. */
.conversation { position: relative; display: flex; min-width: 0; min-height: 0; height: 100%; overflow: hidden; flex-direction: column; background: var(--panel-chat); }
.conversation-header { display: flex; height: 72px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--panel-divider); background: var(--panel-chrome); }
.conversation-identity { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 0; text-align: left; border: 0; background: transparent; }
.conversation-identity__copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.conversation-identity__copy strong { overflow: hidden; font: 700 14px var(--font-display); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.conversation-identity__copy span { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-identity__copy .peer-presence { color: var(--mint-dark); }
.chat-item__presence { display: block; overflow: hidden; margin-top: 2px; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tiny-lock svg { width: 11px; height: 11px; color: var(--mint); stroke-width: 2; }
.conversation-actions { display: flex; gap: 4px; }
.mobile-back { display: none; }
.security-strip { display: flex; height: 32px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 24px; color: var(--mint-dark); font-size: 10px; border-bottom: 1px solid #e3eee8; background: #f5fbf8; }
.security-strip > svg { width: 14px; height: 14px; }
.security-strip button { margin-left: 4px; padding: 0; color: var(--mint); font-size: 10px; font-weight: 700; border: 0; background: transparent; }
.security-strip button:hover { text-decoration: underline; }
.security-strip__protocol { margin-left: auto; color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.message-viewport { min-height: 0; flex: 1; overflow: auto; background: var(--panel-chat); scrollbar-width: thin; }
.message-flow { max-width: 760px; margin: 0 auto; padding: 24px 32px 26px; }
.date-divider { display: flex; align-items: center; gap: 12px; margin: 3px 0 22px; color: var(--ink-faint); font-size: 10px; font-weight: 600; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.date-divider--spaced { margin-top: 29px; }
.system-message { display: flex; max-width: 470px; align-items: flex-start; gap: 8px; margin: 0 auto 26px; padding: 9px 12px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-subtle); }
  .system-message__icon { display: grid; flex: 0 0 auto; width: 15px; height: 15px; place-items: center; color: var(--blue); }
  .system-message__icon svg { width: 14px; height: 14px; }
  /* The wait while a model answers. The label is swapped by a timer, so it is
     left-anchored and fixed-width enough that the flow does not jump as the
     words change. */
  .ai-thinking { align-items: center; }
  .ai-thinking__label { display: inline-flex; align-items: baseline; }
  .ai-thinking__dots { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.message-row { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; }
.message-row--outgoing { justify-content: flex-end; }
.message-row--outgoing .avatar { order: 2; background: var(--mint); }
.message-row--outgoing .message-group { display: flex; align-items: flex-end; flex-direction: column; }
.message-row--outgoing .message-author-line { justify-content: flex-end; }
.message-group { max-width: min(640px, calc(100% - 40px)); }
.message-author-line { display: flex; align-items: baseline; gap: 7px; margin: 0 0 5px 2px; }
.message-author-line strong { color: var(--mint-dark); font-size: 11px; font-weight: 700; }
.message-author-line time { color: var(--ink-faint); font-size: 10px; }
.message-bubble { position: relative; padding: 11px 13px 8px; border-radius: 4px 11px 11px 11px; }
.message-bubble--incoming { color: #303633; border: 1px solid var(--line); background: var(--surface-subtle); box-shadow: 0 2px 5px rgba(34, 42, 37, .025); }
.message-bubble--outgoing { color: var(--ink); border: 1px solid #cce3d9; border-radius: 11px 4px 11px 11px; background: var(--mint-pale); }
.message-bubble p { margin: 0; font-size: var(--client-font-size); line-height: 1.55; }
.call-record { min-width: 220px; border-left: 3px solid var(--mint); }
.call-record--missed { border-left-color: var(--coral); }
.call-record p { font-weight: 700; }
.call-record__details { color: var(--ink-soft); font-size: 11px; font-weight: 500; }
.message-footer { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 6px; color: var(--ink-faint); font-size: 9px; }
.delivery-status { min-width: 13px; color: var(--ink-faint); font-size: 11px; font-weight: 800; letter-spacing: -3px; text-align: right; }
.delivery-status--sent, .delivery-status--read { color: var(--mint); }
.delivery-status--failed { color: var(--coral); letter-spacing: 0; }
#chatMenu { width: 244px; }
.context-menu__toggle { display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--ink-soft); font-size: 11px; }
.context-menu__toggle input { accent-color: var(--mint); }
.verified-icon { display: inline-flex; color: var(--mint); }
.verified-icon svg { width: 13px; height: 13px; stroke-width: 2; }
.attachment-card { display: flex; width: 100%; min-width: 250px; align-items: center; gap: 10px; padding: 4px 0 3px; color: inherit; text-align: left; border: 0; background: transparent; }
button.attachment-card { border-radius: 6px; }
button.attachment-card:hover { background: var(--mint-pale); }
.attachment-card__action { color: var(--mint) !important; }
.file-icon { display: grid; width: 34px; height: 38px; place-items: center; color: var(--coral); border-radius: 5px; background: var(--coral-pale); }
.file-icon svg { width: 18px; height: 18px; }
.attachment-card__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.attachment-card__copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-card__copy small { color: var(--ink-faint); font-size: 10px; }
.attachment-download { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: var(--mint); border: 0; border-radius: 5px; background: var(--mint-pale); }
.attachment-download:hover { color: #fff; background: var(--mint); }
.attachment-download svg { width: 15px; height: 15px; }
.message-reactions { display: flex; align-items: center; gap: 4px; margin: 5px 0 0 3px; }
.message-reactions button { display: inline-flex; align-items: center; gap: 3px; height: 25px; padding: 0 7px; color: var(--ink-soft); font-size: 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.message-reactions button:hover, .message-reactions button.is-active { color: var(--mint-dark); border-color: #b6dacb; background: var(--mint-pale); }
.message-reactions .add-reaction { width: 25px; justify-content: center; padding: 0; color: var(--ink-faint); border-color: transparent; background: transparent; }
.message-reactions .add-reaction svg { width: 15px; height: 15px; }
.composer-wrap { flex: 0 0 auto; padding: 11px 24px 13px; border-top: 1px solid var(--panel-divider); background: var(--panel-chrome); }
.composer { display: flex; min-height: 46px; align-items: flex-end; gap: 5px; padding: 5px 6px 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-subtle); transition: .15s ease; }
.composer:focus-within { border-color: #99c9b6; box-shadow: 0 0 0 3px rgba(153, 201, 182, .14); }
.composer textarea { max-height: 120px; min-height: 31px; flex: 1; resize: none; padding: 7px 4px; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: var(--client-font-size); line-height: 1.35; }
.composer textarea::placeholder { color: var(--ink-faint); }
.composer-button, .send-button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; }
.composer-button { color: var(--ink-soft); }
.composer-button:hover { color: var(--mint-dark); background: var(--mint-pale); }
.composer-button svg { width: 18px; height: 18px; }
  .send-button { color: #fff; background: var(--mint); box-shadow: 0 3px 8px rgba(45, 122, 98, .22); }
  .send-button:hover { background: var(--mint-dark); }
  .send-button svg { width: 17px; height: 17px; stroke-width: 2.2; }
  /* --- recording controls ---------------------------------------------
     The right-hand side carries two controls: a fixed camera that always takes
     a photograph, and the capture button, which shows a microphone or a circle
     and swaps between the two on a short press. One control that sometimes took
     a picture and sometimes recorded a circle was the ambiguity that made
     neither clear. */
  .composer-button--photo { color: var(--ink-soft); }
  /* Only one of send and capture is ever shown: capture while the field is
     empty, send the moment there is something to send. Both are in the markup
     so neither flickers in on first paint. */
  .send-button--capture { display: none; }
  .composer.is-empty .send-button--capture { display: grid; }
  .composer.is-empty .send-button[type="submit"] { display: none; }
  .composer:not(.is-empty) .send-button--capture { display: none; }
  /* While recording, the rest of the bar steps back and the button comes
     forward. A press that appears to do nothing is how people conclude the
     button is broken, so the growth is the acknowledgement. */
  .composer.is-recording .composer-button,
  .composer.is-recording textarea { opacity: .3; transition: opacity .12s ease; }
  .send-button--capture.is-recording { width: 60px; height: 60px; transition: width .12s ease, height .12s ease; }
  .capture-icon--circle { width: 17px; height: 17px; }
  /* --- the recording strip ------------------------------------------- */
  .recording-bar { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--ink-soft); font-size: 12px; }
  .recording-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #d9534f; animation: recording-pulse 1.1s ease-in-out infinite; }
  .recording-label { flex: 1; }
  .recording-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
  .recording-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
  .recording-action:hover { color: var(--mint-dark); border-color: var(--mint); }
  .recording-action--send { border-color: var(--mint); color: var(--mint-dark); }
  .recording-action svg { width: 14px; height: 14px; }
  @keyframes recording-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .recording-dot { animation: none; } }
  /* --- the emoji strip ----------------------------------------------- */
  .emoji-strip { display: flex; flex-wrap: wrap; gap: 1px; padding: 6px 2px 2px; }
  .emoji-strip button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
  .emoji-strip button:hover { background: var(--mint-pale); }
  /* --- the round-message camera --------------------------------------
     Fixed over everything, because a circle is the only thing on screen while
     it is being recorded. The frame is a circle for the same reason the message
     will be. */
  .circle-layer { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgba(9, 12, 14, .93); }
  .circle-layer__frame { position: relative; display: grid; width: min(62vmin, 300px); aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 50%; /* Brighter than the dim layer on purpose: an empty bright circle reads
       as a broken recording, a dim one with a highlight reads as a camera still
       opening. */ background: rgba(255, 255, 255, .26); }
  .circle-layer__preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .circle-layer__hint { position: absolute; bottom: 14%; left: 0; width: 100%; padding: 0 12%; color: rgba(255, 255, 255, .88); font-size: 12px; text-align: center; }
  .circle-layer__actions { display: flex; gap: 28px; }
  .circle-layer__action { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .78); font-size: 11px; cursor: pointer; }
  .circle-layer__action svg { width: 20px; height: 20px; }
  .circle-layer__action:hover { color: #fff; }
  /* --- the media viewer ----------------------------------------------
     Everything plays here rather than in an external application: a voice
     message that hands off to a system player cannot be listened to on a
     machine that has nothing registered for audio. */
.media-viewer { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: rgba(6, 8, 9, .96); }
.media-viewer__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; }
.media-viewer__name { flex: 1; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* Where this picture sits among the conversation's. A photograph is rarely the
   only photograph, and "3 / 12" is what makes the arrow keys legible. */
.media-viewer__position { color: rgba(255, 255, 255, .58); font-size: 11px; font-variant-numeric: tabular-nums; }
.media-viewer__tools { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.media-viewer__bar .icon-button { color: #fff; }
.media-viewer__stage { display: grid; min-height: 0; flex: 1; place-items: center; padding: 10px; }
.media-viewer__image, .media-viewer__video { max-width: 100%; max-height: 100%; }
/* A zoomed picture is dragged rather than dismissed, so the backdrop stops being
   a way out and the cursor stops pretending the picture can be closed by clicking
   it. */
.media-viewer__image { transform-origin: center center; will-change: transform; }
.media-viewer--zoomed .media-viewer__stage { cursor: grab; place-items: center; overflow: hidden; }
.media-viewer--zoomed .media-viewer__stage:active { cursor: grabbing; }
.media-viewer__nav { position: absolute; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .10); cursor: pointer; transform: translateY(-50%); }
.media-viewer__nav:hover { background: rgba(255, 255, 255, .2); }
.media-viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.media-viewer__nav svg { width: 20px; height: 20px; }
.media-viewer__nav--previous { left: 14px; }
.media-viewer__nav--next { right: 14px; }

  /* Clipped back to a circle: it is a circle because of how it was recorded,
     and showing it in a rectangle undoes that. */
  .media-viewer__video--circle { width: min(70vmin, 460px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
  .media-viewer__audio { display: grid; width: min(520px, 90%); place-items: center; }
  .media-viewer__audio audio { width: 100%; }
  /* An attachment card states its kind in words as well as by icon. A voice
     message and a photo that both say "attachment of unknown type" give the
     reader nothing to go on. */
  .attachment-card--voice .file-icon { color: var(--mint-dark); background: var(--mint-pale); }
  .attachment-card--circle .file-icon { color: var(--mint-dark); background: var(--mint-pale); }
  .attachment-card--kind { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; }
  .attachment-card__kind { color: var(--ink-faint); }
  /* A photograph drawn in the message, not listed as a file. Fixed height so a
     long conversation keeps its shape while images load, and a quiet placeholder
     so an image still arriving does not look like a broken card. */
  .inline-image { display: block; width: 100%; height: 220px; margin: 4px 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); cursor: pointer; }
  .inline-image__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .inline-image__placeholder { display: block; width: 100%; height: 100%; }
  .inline-image--failed { position: relative; }
  .inline-image--failed::after { content: "Изображение недоступно"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-faint); font-size: 12px; }
  /* --- reactions --------------------------------------------------------
     Grouped by emoji with a count, because the same reaction from three people
     is one thing that happened rather than three identical characters. The
     account's own is tinted, which is the only way a person can tell a reaction
     they can take back from one they cannot. */
  .reaction-row-wrap { display: flex; justify-content: flex-end; padding: 2px 4px 0; }
  .message-row:not(.message-row--outgoing) .reaction-row-wrap { justify-content: flex-start; }
  .reaction-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .reaction-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); color: var(--ink-soft); font-size: 12px; line-height: 1.5; cursor: pointer; }
  .reaction-chip:hover { border-color: var(--mint); color: var(--mint-dark); }
  .reaction-chip--mine { border-color: var(--mint); background: rgba(45, 122, 98, .12); color: var(--mint-dark); font-weight: 600; }
  .reaction-chip:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 2px; }
.composer-hint { display: flex; justify-content: space-between; padding: 7px 3px 0; color: var(--ink-faint); font-size: 9px; }
.composer-hint kbd { padding: 1px 3px; font-size: 9px; }
.reply-preview, .attachment-preview { display: flex; min-height: 39px; align-items: center; gap: 8px; margin-bottom: 7px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-subtle); }
.reply-preview__bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--mint); }
.reply-preview__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.reply-preview__copy small { color: var(--mint); font-size: 9px; font-weight: 700; }
.reply-preview__copy strong { overflow: hidden; color: var(--ink-soft); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview { color: var(--ink-soft); font-size: 11px; }
.attachment-preview__icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--mint); border-radius: 4px; background: var(--mint-pale); }
.attachment-preview__icon svg { width: 14px; height: 14px; }

.info-panel { min-width: 0; padding: 25px 18px; overflow: auto; border-left: 1px solid var(--panel-divider); background: var(--panel-info); }
.info-panel__header { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 24px; }
.channel-card { display: flex; align-items: center; flex-direction: column; padding-bottom: 24px; text-align: center; border-bottom: 1px solid var(--line); }
.channel-card h3 { margin: 10px 0 1px; font-size: 15px; }
.channel-card p { margin: 0 0 8px; color: var(--ink-faint); font-size: 11px; }
.verified-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; color: var(--mint-dark); font-size: 9px; font-weight: 700; border-radius: 5px; background: var(--mint-pale); }
.verified-label svg { width: 13px; height: 13px; }
.info-section { padding: 19px 1px; border-bottom: 1px solid var(--line); }
.info-section--last { border-bottom: 0; }
.info-section__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.info-section__heading > svg { width: 14px; height: 14px; color: var(--ink-faint); }
.info-section__heading button { padding: 0; color: var(--mint); font-size: 10px; font-weight: 700; border: 0; background: transparent; }
.info-list { display: flex; flex-direction: column; gap: 12px; }
.info-list__item { display: flex; align-items: center; gap: 8px; }
.info-list__item > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.info-list__item strong { font-size: 11px; font-weight: 600; }
.info-list__item small { overflow: hidden; color: var(--ink-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.info-list__icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; }
.crypto-banner { display: flex; align-items: center; gap: 9px; padding: 9px 16px; color: #7a3f38; font-size: 11px; background: #f8e7e4; border-bottom: 1px solid #e8cec9; }
.crypto-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.crypto-banner span { flex: 1; }
.crypto-banner button { padding: 4px 10px; color: #7a3f38; font-size: 10px; font-weight: 600; background: #fff; border: 1px solid #e0bdb7; border-radius: 6px; cursor: pointer; }
.crypto-banner button:disabled { opacity: .5; cursor: default; }
.member-remove { padding: 3px 8px; color: var(--danger, #a4423a); font-size: 10px; background: transparent; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; }
.member-remove:hover:not(:disabled) { background: #f6e5e3; }
.member-remove:disabled { opacity: .5; cursor: default; }
.member-add { width: 100%; margin-top: 10px; padding: 8px; color: var(--mint-dark); font-size: 11px; font-weight: 600; background: var(--mint-pale); border: 0; border-radius: 7px; cursor: pointer; }
.member-add:disabled { opacity: .5; cursor: default; }
.info-list__icon svg { width: 14px; height: 14px; }
.info-list__icon--green { color: var(--mint); background: var(--mint-pale); }
.info-list__icon--amber { color: var(--amber); background: var(--amber-pale); }
.chevron { width: 14px; height: 14px; color: var(--ink-faint); }
.member-stack { display: flex; align-items: center; padding-left: 6px; }
.member-stack .avatar { width: 29px; height: 29px; margin-left: -6px; border: 2px solid var(--surface-subtle); border-radius: 50%; font-size: 9px; }
.avatar--member-one { color: #6a4a43; background: #e4c4bb; }.avatar--member-two { color: #3e6570; background: #c9e5e7; }.avatar--member-three { color: #6e5733; background: #eedfb7; }.avatar--member-four { color: #4e5b83; background: #d5dcf4; }
.member-more { display: grid; width: 29px; height: 29px; margin-left: -5px; place-items: center; color: var(--ink-soft); font-size: 9px; border: 2px solid var(--surface-subtle); border-radius: 50%; background: var(--surface-muted); }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.media-placeholder { display: grid; height: 64px; place-items: center; color: var(--ink-soft); border-radius: 5px; }.media-placeholder svg { width: 19px; height: 19px; }.media-placeholder--one { background: #f2e1dc; color: #a36c61; }.media-placeholder--two { background: #e1e8f2; color: #6380a0; }.media-placeholder--three { background: #e3efe7; color: var(--mint); }
.danger-link { display: inline-flex; align-items: center; gap: 7px; margin: 15px 0 0 1px; padding: 5px 0; color: var(--coral); font-size: 11px; border: 0; background: transparent; }.danger-link:hover { text-decoration: underline; }.danger-link svg { width: 15px; height: 15px; }

.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; color: #fff; font-size: 11px; border-radius: 6px; background: #26332e; box-shadow: var(--shadow-modal); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast svg { width: 15px; height: 15px; color: #9bddc2; }
.call-start-button { color: var(--mint-dark); background: var(--mint-pale); }
.call-dialog { position: fixed; inset: auto 24px 24px auto; width: min(430px, calc(100% - 32px)); margin: 0; padding: 14px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-modal); }
.call-dialog::backdrop { background: rgba(20, 29, 25, .12); }
.call-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.call-dialog__icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--mint-dark); border-radius: 50%; background: var(--mint-pale); }
.call-dialog__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.call-dialog__copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.call-dialog__copy span { color: var(--ink-soft); font-size: 11px; }
.call-audio-output { display: flex; grid-column: 1 / -1; min-width: 0; flex-direction: column; gap: 5px; }
.call-audio-output label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.call-audio-output select { min-width: 0; height: 34px; padding: 0 9px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-subtle); font: 11px var(--font-body); }
.call-audio-output__status { min-height: 14px; color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.call-audio-output__status:empty { display: none; }
.call-dialog__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.call-action { min-height: 34px; padding: 0 12px; color: var(--ink); font-size: 11px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-muted); }
.call-action--answer { color: #fff; border-color: var(--mint); background: var(--mint); }
.call-action--danger { color: #fff; border-color: var(--coral); background: var(--coral); }
.call-dialog.is-ringing .call-dialog__icon { animation: call-ring 1.1s ease-in-out infinite; }
@keyframes call-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } }
.modal { width: min(410px, calc(100% - 32px)); padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-modal); }.modal::backdrop { background: rgba(20, 29, 25, .38); backdrop-filter: blur(2px); }.modal__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 22px 15px; }.modal__header h2 { margin: 0; }.modal-copy { margin: 15px 22px 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }.security-status { display: flex; align-items: center; gap: 9px; margin: 0 22px; padding: 11px; border: 1px solid #cce5d9; border-radius: 7px; background: #f2fbf6; }.security-status__icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--mint); border-radius: 6px; background: var(--mint-pale); }.security-status__icon svg { width: 17px; height: 17px; }.security-status > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }.security-status strong { color: var(--mint-dark); font-size: 11px; }.security-status small { color: var(--ink-soft); font-size: 9px; }.status-pill { padding: 3px 5px; color: var(--mint-dark); font-size: 9px; font-weight: 700; border-radius: 4px; background: #cce8d9; }.safety-code { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 22px 20px; color: var(--ink); font: 700 17px var(--font-display); letter-spacing: .12em; }.safety-code i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }.primary-button { width: calc(100% - 44px); height: 39px; margin: 0 22px 22px; color: #fff; font-size: 12px; font-weight: 700; border: 0; border-radius: 6px; background: var(--mint); }.primary-button:hover { background: var(--mint-dark); }
.modal--settings { width: min(540px, calc(100% - 32px)); max-height: min(760px, calc(100dvh - 32px)); overflow: auto; }
.settings-form { display: grid; gap: 14px; padding: 0 22px 22px; }
.settings-form fieldset { display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.settings-form legend { padding: 0 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.settings-form label { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; }
.settings-form select, .settings-form input[type="number"] { min-width: 0; height: 36px; padding: 0 9px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-subtle); }
.settings-form input[type="range"] { width: 100%; accent-color: var(--mint); }
.settings-form .settings-check { display: flex; }
.settings-status { min-height: 15px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.settings-actions .auth-link, .settings-actions .primary-button { width: auto; margin: 0; }
.call-sound-button { margin: 0; text-align: left; }
.modal--compact { width: min(460px, calc(100% - 32px)); }.modal--compact .modal__header { padding-bottom: 10px; }.action-row { display: flex; width: calc(100% - 32px); min-height: 58px; align-items: center; gap: 10px; margin: 0 16px 4px; padding: 7px; text-align: left; border: 0; border-radius: 7px; background: transparent; }.action-row:hover { background: var(--surface-muted); }.action-row__icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--mint); border-radius: 7px; background: var(--mint-pale); }.action-row__icon--ai { color: #675d9a; background: #ece7fa; }.action-row > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }.action-row strong { font-size: 12px; }.action-row small { overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.context-menu { position: fixed; z-index: 30; display: none; width: 194px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-modal); }.context-menu.is-visible { display: block; }.context-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px; color: var(--ink-soft); font-size: 11px; text-align: left; border: 0; border-radius: 4px; background: transparent; }.context-menu button:hover { color: var(--ink); background: var(--surface-muted); }.context-menu button svg { width: 14px; height: 14px; }  .context-menu__danger { color: var(--coral) !important; }
  /* The reaction row sits above the menu's own items. The generic .context-menu
     button rule would otherwise lay these out as full-width rows, which at eight
     of them is a menu that is taller than the message it acts on. */
  .context-menu__reactions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px 3px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .context-menu__reactions[hidden] { display: none; }
  .context-menu__reactions .context-menu__reaction { display: grid; width: auto; padding: 4px; place-items: center; font-size: 17px; border-radius: 5px; }
  .context-menu__reactions .context-menu__reaction:hover { background: var(--mint-pale); }
.new-chat-form { display: flex; flex-direction: column; gap: 13px; padding: 4px 22px 20px; }.new-chat-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.new-chat-form input { height: 39px; padding: 0 11px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: var(--surface-subtle); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }.member-picker-list { max-height: 190px; margin-top: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }.member-picker-empty { padding: 16px; color: var(--ink-faint); font-size: 11px; text-align: center; }.member-picker-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }.member-picker-item:last-child { border-bottom: 0; }.member-picker-item.is-selected { color: var(--mint-dark); background: var(--mint-pale); }.member-picker-item span { display: flex; min-width: 0; flex: 1; flex-direction: column; }.member-picker-item strong { font-size: 11px; }.member-picker-item small { color: var(--ink-faint); font-size: 9px; }.new-chat-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }.new-chat-form__actions .auth-link { margin: 0; }.new-chat-form__actions .primary-button { width: auto; min-width: 110px; margin: 0; padding: 0 18px; }
.modal--devices { width: min(560px, calc(100% - 32px)); }.device-list { max-height: min(430px, 60vh); margin: 0 22px 18px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }.device-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 13px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }.device-row:last-child { border-bottom: 0; }.device-row__copy { min-width: 0; }.device-row__title { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }.device-row__title strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.device-row__meta { display: block; color: var(--ink-faint); font-size: 9px; }.device-row__fingerprint { display: block; margin-top: 7px; color: var(--ink-soft); font: 10px/1.5 ui-monospace, "Cascadia Mono", monospace; overflow-wrap: anywhere; }.device-row__actions { display: flex; align-items: center; gap: 6px; }.device-action { height: 30px; padding: 0 9px; color: var(--mint-dark); font-size: 10px; font-weight: 700; border: 1px solid #b6dacb; border-radius: 5px; background: var(--mint-pale); }.device-action--danger { color: var(--coral); border-color: #e9c6c3; background: var(--coral-pale); }.device-state { padding: 3px 6px; font-size: 9px; font-weight: 700; border-radius: 4px; }.device-state--trusted { color: var(--mint-dark); background: var(--mint-pale); }.device-state--pending { color: var(--amber); background: var(--amber-pale); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.management-modal { position: fixed; width: min(760px, calc(100% - 24px)); height: min(720px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; flex-direction: column; }
.management-modal[open] { display: flex; }
.management-modal__header { flex: 0 0 auto; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.management-tabs { display: flex; flex: 0 0 auto; gap: 5px; padding: 10px 22px 0; }
.management-tab { padding: 8px 11px; color: var(--ink-soft); font-size: 11px; font-weight: 700; border: 0; border-radius: 6px; background: transparent; }
.management-tab:hover { background: var(--surface-muted); }
.management-tab.is-active { color: var(--mint-dark); background: var(--mint-pale); }
.management-tab__badge { display: inline-flex; min-width: 16px; height: 16px; align-items: center; justify-content: center; margin-left: 5px; padding: 0 4px; color: #fff; font-size: 9px; border-radius: 8px; background: var(--mint-dark); }
.management-search { display: flex; height: 39px; flex: 0 0 auto; align-items: center; gap: 8px; margin: 10px 22px 12px; padding: 0 11px; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-subtle); }
.management-search svg { width: 16px; height: 16px; }
.management-search input { min-width: 0; flex: 1; color: var(--ink); border: 0; outline: 0; background: transparent; font: 12px var(--font-body); }
.management-modal__scroll { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 0 22px 20px; }
.management-intro { margin: 2px 0 13px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.management-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.management-summary span { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 10px; color: var(--ink-soft); font-size: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }
.management-summary strong { color: var(--ink); font-size: 18px; }
.management-policy { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }
.management-policy > span { display: flex; flex-direction: column; gap: 3px; }
.management-policy strong { font-size: 11px; }
.management-policy small { color: var(--ink-faint); font-size: 9px; }
.management-policy input, .management-account-policy input { accent-color: var(--mint); }
.management-account-policy { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 9px; }
.management-account-policy input:disabled + span { color: var(--ink-faint); }
.management-list { overflow: visible; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); }
.management-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border-bottom: 1px solid var(--line); }
.management-row:last-child { border-bottom: 0; }
.management-row__identity { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.management-row__identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.management-row__identity small { color: var(--ink-faint); font-size: 10px; line-height: 1.4; }
/* Free text from an applicant, so it is allowed to wrap and to be long rather
   than truncated into something the owner cannot judge. */
.management-row__reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.management-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.management-row__actions button { margin: 0; }
.management-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 13px; }
.management-pagination span { min-width: 92px; color: var(--ink-soft); font-size: 10px; text-align: center; }
.management-invite-form { padding: 2px 0 16px; }
.management-invite-form .primary-button { width: 100%; margin: 5px 0 0; }
.issued-invitation { margin: 0 0 16px; }
.issued-invitation code, #accountDeleteUsernameLabel { overflow-wrap: anywhere; }
#accountDeleteUsernameLabel { text-transform: none; }
.management-modal button:disabled, .account-delete-dialog button:disabled { opacity: .5; cursor: default; }
.management-mobile-entry { display: none; }
.management-notice { flex: 0 0 auto; margin: 0; padding: 10px 22px; color: var(--ink-soft); font-size: 11px; border-top: 1px solid var(--line); }
.management-notice:empty { display: none; }
@media (max-width: 700px) { .management-mobile-entry { display: inline-grid; margin-left: auto; margin-right: 6px; } }
.account-delete-dialog { max-height: calc(100dvh - 24px); overflow: hidden; flex-direction: column; }
.account-delete-dialog[open] { display: flex; }
.account-delete-dialog > .modal__header { flex: 0 0 auto; }
.account-delete-dialog__body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 22px 22px; }
.account-delete-dialog .new-chat-form__actions { flex-wrap: wrap; }
.account-delete-dialog__body > p { margin: 0 0 17px; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.account-delete-dialog .new-chat-form { padding: 0; }
.account-delete-dialog .account-delete-submit { color: #fff; background: var(--coral); }
.account-delete-dialog .account-delete-submit:hover { filter: brightness(.9); }
@media (max-width: 600px) { .management-modal { width: calc(100% - 12px); max-height: calc(100dvh - 12px); }.management-modal__header, .management-tabs { padding-left: 15px; padding-right: 15px; }.management-search { margin-left: 15px; margin-right: 15px; }.management-modal__scroll { padding-left: 15px; padding-right: 15px; }.management-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.management-row { grid-template-columns: 1fr; }.management-row__actions { justify-content: flex-start; } }

.enrollment-panel { text-align: center; }.enrollment-panel h2 { margin: 5px 22px 7px; font: 700 20px var(--font-display); }.enrollment-panel > p:not(.eyebrow) { margin: 0 25px 15px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }.enrollment-panel img { display: block; width: 240px; height: 240px; margin: 0 auto 13px; border: 8px solid #fff; background: #fff; image-rendering: pixelated; }.enrollment-panel > code { display: inline-block; padding: 8px 12px; color: var(--ink); font: 700 18px ui-monospace, "Cascadia Mono", monospace; letter-spacing: .12em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }.enrollment-steps { margin: 0 25px 14px; padding-left: 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; text-align: left; }.enrollment-code-label { margin: 0 25px 6px !important; }.enrollment-qr-details { margin: 14px 22px 0; text-align: center; }.enrollment-qr-details summary { color: var(--ink-soft); font-size: 12px; cursor: pointer; }.enrollment-qr-details[open] summary { margin-bottom: 12px; }.enrollment-actions { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; }.enrollment-actions .auth-link { margin: 0; }.enrollment-approval-form { margin: 0 22px 22px; }.enrollment-approval-form textarea { min-height: 82px; resize: vertical; font: 10px/1.4 ui-monospace, "Cascadia Mono", monospace; }.enrollment-preview { margin: 4px 0 12px; padding: 10px; color: var(--mint-dark); font: 11px/1.5 ui-monospace, "Cascadia Mono", monospace; border: 1px solid #b6dacb; border-radius: 6px; background: var(--mint-pale); overflow-wrap: anywhere; }.enrollment-approval-form .primary-button { width: auto; margin: 0; }

body.is-dark { color-scheme: dark; --canvas: #151b19; --surface: #1b221f; --surface-muted: #29322e; --surface-subtle: #242d29; --panel-chats: #1a231f; --panel-chat: #202824; --panel-info: #171f1c; --panel-chrome: #1c2420; --panel-divider: #344039; --ink: #eef4f0; --ink-soft: #aab8b1; --ink-faint: #718078; --line: #2f3a34; --line-strong: #3d4b43; --mint: #76c6a6; --mint-dark: #9be0c1; --mint-pale: #244237; --coral: #ee9993; --coral-pale: #472b2a; --amber: #e4b76e; --amber-pale: #493b25; --blue: #8db4e4; --shadow-soft: 0 12px 36px rgba(0, 0, 0, .2); }.is-dark .side-rail { background: #101613; }.is-dark .conversation { background: var(--panel-chat); }.is-dark .message-viewport { background: var(--panel-chat); }.is-dark .security-strip { color: var(--mint-dark); border-color: var(--line); background: #1d342b; }.is-dark .system-message { background: var(--surface-muted); }.is-dark .message-bubble--incoming { background: var(--surface-subtle); }.is-dark .modal { color: var(--ink); }.is-dark .security-status { background: #1c332a; }

@media (max-width: 1180px) { :root { --sidebar-width: 294px; --info-width: 260px; } .info-panel { padding-left: 15px; padding-right: 15px; } .message-flow { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 980px) { .app-shell { grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr); }.info-panel { display: none; } }
@media (max-width: 700px) { .app-shell { display: block; position: relative; }.side-rail { display: none; }.chat-sidebar { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; }.conversation { position: absolute; inset: 0; z-index: 1; }.app-shell.is-chat-open .chat-sidebar { display: none; }.app-shell.is-chat-open .conversation { display: flex; }.conversation-header { height: 62px; padding: 0 12px; }.mobile-back { display: grid; width: 34px; height: 34px; margin-right: 2px; place-items: center; padding: 0; color: var(--ink-soft); border: 0; border-radius: 6px; background: transparent; }.conversation-identity { flex: 1; }.conversation-actions [data-action="toggle-info"], .conversation-actions [data-action="more-chat"] { display: none; }.security-strip { padding: 0 15px; }.message-flow { padding: 18px 14px 20px; }.composer-wrap { padding: 9px 12px 11px; }.composer-hint { display: none; }.info-panel { display: none; }.chat-sidebar__header { padding-top: 22px; }.chat-sidebar__footer { padding-bottom: 13px; } }
@media (max-width: 700px) { .call-dialog { inset: auto 10px 10px; width: calc(100% - 20px); }.call-dialog__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.call-action { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Message search.
   Results are dimmed rather than hidden so the surrounding conversation stays
   readable: a match usually only makes sense with the lines around it. */
.message-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line, #e5e8e2);
  background: var(--surface, #fff);
}

.message-search input {
  flex: 1;
  border: 1px solid var(--line, #e5e8e2);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  background: transparent;
  color: inherit;
}

.message-search span {
  font-size: 12px;
  color: var(--ink-soft, #69716c);
  white-space: nowrap;
}

.message-bubble.is-search-hit {
  outline: 2px solid var(--mint, #2d7a62);
  outline-offset: 1px;
}

.message-row.is-search-dimmed {
  opacity: 0.35;
}
/* Model picker in the AI chat. */
.ai-workspace-nav { flex: 0 0 auto; min-height: 0; max-height: 45dvh; overflow: auto; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-chrome); }
.ai-workspace-nav > summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 700; }
.ai-workspace-nav__body { padding-top: 10px; }
.ai-model-picker {
  display: block;
  padding: 0 4px;
}

.ai-model-picker select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e8e2);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.ai-model-picker select:disabled { opacity: .6; }

/* Why the model list is or is not there. Kept quiet but always present: an
   empty space would read as "everything is fine" when it is not. */
.ai-model-status {
  margin: 8px 4px 0;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.5;
}

#aiModelRetry { margin: 6px 0 0 4px; }

/* The archive warning. Amber rather than red: this is a limitation to
   understand before relying on it, not a failure that has happened. */
.ai-archive-warning {
  margin: 10px 0 0;
  padding: 9px 10px;
  color: var(--amber, #8a6320);
  font-size: 10px;
  line-height: 1.55;
  border: 1px solid var(--amber, #e0b877);
  border-radius: 8px;
  background: var(--amber-pale, #fdf3e2);
}

/* Conversation navigation. Scrolls on its own so a long list cannot push the
   composer or the message viewport around. */
.ai-chat-list {
  display: flex;
  max-height: min(320px, 40vh);
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line, #e5e8e2);
  border-radius: 8px;
  background: var(--surface-subtle, #f7f9f6);
}

.ai-chat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line, #e5e8e2);
}

.ai-chat-row:last-child { border-bottom: 0; }
.ai-chat-row.is-active { background: var(--mint-pale, #e6f4ed); }

.ai-chat-row__open {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  color: inherit;
  text-align: left;
  border: 0;
  background: transparent;
}

.ai-chat-row__open strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-row__open small {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-row__open:disabled { cursor: default; opacity: .65; }

.ai-chat-row__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.ai-chat-row__actions .device-action {
  height: 25px;
  padding: 0 7px;
  font-size: 9px;
}

.ai-chat-row__actions .device-action:disabled { opacity: .5; }

/* The in-chat notice about the model reading this and the archive being
   device-local. Deliberately louder than an ordinary system message. */
.system-message--warning {
  color: var(--amber, #8a6320);
  line-height: 1.55;
  border: 1px solid var(--amber, #e0b877);
  background: var(--amber-pale, #fdf3e2);
}

.management-chat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.management-subtitle { margin: 0 0 6px; font-size: 13px; }
.management-chat__search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.management-chat__search input { height: 34px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; background: var(--surface-subtle); font-size: 12px; }
.management-chat__search input:focus-visible { border-color: var(--mint); }
.management-chat__search .device-action { height: 34px; padding: 0 14px; }
.management-chat .member-picker-list { margin-top: 10px; }
.management-chat__member { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.management-chat__member:last-child { border-bottom: 0; }
.management-chat__member input { accent-color: var(--mint); }
.management-chat__member span { display: flex; min-width: 0; flex-direction: column; }
.management-chat__member strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.management-chat__member small { color: var(--ink-faint); font-size: 9px; }
.management-chat__title { display: flex; margin-top: 10px; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.management-chat__title input { height: 34px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; background: var(--surface-subtle); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.management-chat__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.management-chat__actions .auth-link { margin: 0; }
.management-chat__actions .primary-button { width: auto; min-width: 130px; margin: 0; padding: 0 18px; }
.management-chat__actions .primary-button:disabled { opacity: .5; cursor: not-allowed; }
.management-chat .management-notice { margin: 10px 0 0; padding: 0; border-top: 0; }

.management-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.management-row__select { display: flex; align-items: center; }
.management-row__select input { width: 16px; height: 16px; accent-color: var(--mint); }
.management-row__rule { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--ink-faint); font-size: 9px; }
.management-row__rule input { width: 14px; height: 14px; accent-color: var(--mint); }
.management-bulk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }
.management-bulk__count { color: var(--ink-soft); font-size: 10px; }
.management-bulk__actions { display: flex; align-items: center; gap: 7px; }
.management-bulk__actions .auth-link { margin: 0; }
.management-bulk__actions .primary-button { width: auto; min-width: 118px; margin: 0; padding: 0 16px; }
.management-bulk__actions .primary-button:disabled, .management-bulk__actions .device-action:disabled { opacity: .5; cursor: not-allowed; }
.management-chat-title { margin-top: 13px; }
.management-chat-title__input { flex: 0 1 260px; height: 34px; padding: 0 10px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; outline: 0; background: var(--surface); font-size: 12px; }
#adminChatNotice { margin: 10px 0 0; padding: 0; border-top: 0; }
.member-picker-search { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.member-picker-search .settings-check { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.member-picker-search .settings-check input { accent-color: var(--mint); }

/* A round message drawn in the conversation. Square, because the shape is a
   circle drawn over it rather than a picture that happens to be round. */
.inline-circle { position: relative; display: block; width: 132px; height: 132px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--surface-subtle); cursor: pointer; }
.inline-circle__placeholder { position: absolute; inset: 0; display: block; }
.inline-circle canvas { display: block; width: 100%; height: 100%; }
.inline-circle--ready { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.inline-circle--failed { background: var(--surface-subtle); box-shadow: inset 0 0 0 2px var(--line-strong); }
.inline-circle:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* --- voice messages ------------------------------------------------------
   Played in the message. It arrived as a file row with a paperclip, which is
   what a document is; a voice message is the one attachment a conversation is
   mostly made of and the one meant to be heard in place. Wide enough for the
   wave to say something and narrow enough to still read as a message. */
.inline-voice { display: flex; width: min(288px, 100%); align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 14px; background: rgba(45, 122, 98, .10); --voice-played: var(--mint-dark); --voice-rest: rgba(32, 48, 41, .30); --voice-ink: rgba(32, 48, 41, .70); }
.inline-voice__play { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 50%; background: var(--mint); cursor: pointer; }
.inline-voice__play:hover { background: var(--mint-dark); }
.inline-voice__play svg { width: 15px; height: 15px; }
.inline-voice__play:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 2px; }
.inline-voice__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.inline-voice__wave { display: block; width: 100%; height: 30px; cursor: pointer; }
/* Both bubble colours are light, so the wave is drawn in the bubble's own dark
   tones. The colours live here rather than in the canvas code because this is
   where the design is. */
.inline-voice__times { display: flex; justify-content: space-between; color: var(--voice-ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.inline-voice--failed .inline-voice__play { background: var(--coral); cursor: not-allowed; }
.inline-voice--failed .inline-voice__wave { opacity: .35; cursor: not-allowed; }
/* Playing is shown by the button, not by animating the wave: a bar that moves on
   its own is noise, and the eye already has the progress fill for that. */
.inline-voice--playing .inline-voice__play { background: var(--mint-dark); }

/* The viewer draws a circle as one, larger, and lets it fill what it can. */
.media-viewer__video--circle { width: min(70vmin, 520px); height: min(70vmin, 520px); object-fit: contain; border-radius: 50%; background: #000; }