/* PaperOffice Stealth — local assets only. Layout follows the existing UI states. */
:root {
    color-scheme: dark;
    --navy: #0b1520;
    --slate: #142330;
    --text: #eef2f5;
    --muted: #a1b0bf;
    --accent: #b4d7ef;
    --accent-deep: #a2c9e4;
    --steel: #b8cbd9;
    --green: #91dfbd;
    --red: #ffacac;
    --amber: #f0cf93;
    --line: rgba(208, 225, 240, .12);
    --glass: #111e2a;
    --raised: #1c3041;
    --highlight: none;
    --glow: none;
    --backdrop: var(--navy);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --column: 560px;
    --nav-height: 76px;
    --composer-height: 60px;
    --toast-height: 80px;
    --toast-gap: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
body { background: var(--navy); color: var(--text); font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.call-failure-details { font-size: 13px; }
.call-failure-details dt { color: var(--muted); margin-top: 12px; }
.call-failure-details dd { margin: 4px 0 0; overflow-wrap: anywhere; user-select: text; font-family: monospace; }
#dlg_call_error > button { width: 100%; margin-top: 8px; }
.sprite { display: none !important; }
svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
img.logo { display: block; width: 48px; height: auto; aspect-ratio: 1; object-fit: contain; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { min-width: 44px; min-height: 44px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .16s, border-color .16s; }
button:disabled, input:disabled, select:disabled { opacity: .45; cursor: default; }
button:active:not(:disabled) { background-color: rgba(124, 196, 255, .12); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, textarea, select { min-width: 0; width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 26, 40, .64); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[readonly], input[type="url"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
textarea { resize: vertical; }
select { cursor: pointer; }
option { background: var(--slate); color: var(--text); }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; flex: none; accent-color: var(--accent); }
a, .link { color: var(--accent); }
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(28px, 8vw, 34px); line-height: 1.18; font-weight: 550; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: 23px; line-height: 1.3; font-weight: 550; letter-spacing: -.025em; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
strong { font-weight: 600; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.error, .danger-text { color: var(--red); }
.warning { color: var(--amber); }
.error, .warning { line-height: 1.55; }
.primary, .send-btn { background: var(--accent); border-color: transparent; color: #102538; font-weight: 600; }
.secondary { background: var(--raised); }
.ghost, .link { background: transparent; box-shadow: none; border-color: transparent; }
.link { padding: 8px; font-size: 14px; }
button.small { padding: 8px 11px; }
button.danger { color: var(--red); border-color: rgba(255, 172, 172, .22); background: #2b2029; }
.icon-btn, .send-btn { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--steel); }
.icon-btn { background: transparent; box-shadow: none; border-color: transparent; }
.icon-btn.round { border-radius: 50%; background: transparent; border-color: transparent; color: var(--text); }
.send-btn { color: #102538; }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row input, .row select { flex: 1; min-width: 0; }
.row > button { flex-shrink: 0; }

/* The calculator is deliberately free of branding and security decoration. */
.calc { height: 100%; height: 100dvh; display: flex; flex-direction: column; gap: 24px; padding: calc(24px + var(--safe-top)) max(22px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(22px, var(--safe-left)); background: var(--navy); }
.calc-display { flex: 1; min-height: 100px; display: flex; flex-direction: column; justify-content: flex-end; text-align: right; padding: 12px 5px; overflow: hidden; }
.calc-expr { min-height: 30px; font-size: 20px; color: var(--muted); overflow-wrap: anywhere; }
.calc-out { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: clamp(38px, 10vw, 62px); line-height: 1.2; letter-spacing: -.035em; font-weight: 400; font-variant-numeric: tabular-nums; scrollbar-width: thin; }
.calc-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(44px, 1fr)); gap: 12px; flex: 0 1 auto; }
.calc-key { aspect-ratio: 1; min-height: 44px; border-radius: 50%; padding: 0; font-size: 28px; background: #203347; border-color: rgba(217,237,255,.055); }
.calc-key.fn { background: #30465a; color: #e0eaf3; }
.calc-key.op { background: #263f57; color: #a7d8ff; font-size: 32px; }
.calc-key.eq { background: var(--accent); color: #11283b; }
.calc-key.wide { grid-column: span 2; aspect-ratio: auto; border-radius: 60px; text-align: left; padding-left: 32px; }

/* Shared brand and app shell. */
.brand-head, .brand-mini { display: flex; align-items: center; gap: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-small { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.brand-big { font-size: 22px; font-weight: 500; letter-spacing: -.035em; margin-top: 5px; }
.brand-head { margin: 0 0 32px; gap: 12px; }
.brand-head .brand-big { font-size: clamp(23px, 7vw, 30px); }
.brand-head .brand-small { font-size: 11px; }
.brand-head img.logo { width: 44px; }
.brand-mini img.logo { width: 36px; }
.app { height: 100%; height: 100dvh; display: flex; flex-direction: column; padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); background: var(--backdrop); overflow: hidden; }
.app-head { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 20px 22px 4px; }
.brand-mini { grid-column: 1; }
.app-menu { grid-column: 2; grid-row: 1; position: relative; z-index: 40; }
.app-menu > summary { list-style: none; cursor: pointer; color: var(--muted); }
.app-menu > summary::-webkit-details-marker { display: none; }
.app-menu > summary svg { fill: currentColor; stroke: none; }
.app-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-menu-items { position: absolute; top: calc(100% + 6px); right: 0; width: min(280px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px)); padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--navy); box-shadow: 0 12px 32px #0005; }
.app-menu-items button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; background: transparent; text-align: left; }
.app-menu-items button:hover { background: var(--glass); }
.app-menu-items svg { width: 20px; height: 20px; flex: none; }
.panes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 20px; scrollbar-width: thin; scrollbar-color: #3b5369 transparent; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 2px; }
.section-head h2 { min-width: 0; }
.list { display: flex; flex-direction: column; gap: 4px; }
.list > .row { width: 100%; text-align: left; padding: 14px 10px; min-height: 80px; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; background: transparent; gap: 13px; }
.list > .row.active, .list > .ai-row { background: var(--glass); border-color: var(--line); border-radius: 16px; }
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; flex: none; font-size: 20px; font-weight: 500; color: #c1d7e7; background: #223448; border: 1px solid var(--line); }
.avatar[data-hue="1"] { background: #20383e; }
.avatar[data-hue="2"] { background: #2a3145; }
.avatar[data-hue="3"] { background: #243b49; }
.avatar[data-hue="4"] { background: #303644; }
.avatar[data-hue="5"] { background: #253b39; }
.avatar.group { color: #bad5eb; }
.avatar.ai { color: var(--accent); background: #1b3041; border-color: var(--line); border-radius: 14px; }
.avatar svg { width: 27px; height: 27px; }
.online .avatar::after, .avatar.online::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border: 2px solid #172b3e; border-radius: 50%; background: #83c9ae; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-title, .row-sub { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title { font-size: 15px; font-weight: 550; }
.row-sub { color: var(--muted); font-size: 13px; }
.unread .row-title { font-weight: 600; }
.missed .row-sub { color: var(--red); }
.row-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; flex: none; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.row-meta svg { width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #94d2ff; color: #12283b; font-size: 11px; font-weight: 600; }
/* Quiet membership mark, without decorative motion. */
.badge-diamond { display: inline-flex; align-items: center; gap: .35em; flex: none; vertical-align: middle; margin-left: 6px; padding: .25em .65em; border: 1px solid #62768a; border-radius: 999px; background: #263749; color: #deebf6; font-size: max(10px, .72em); font-weight: 550; line-height: 1.35; letter-spacing: .025em; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.badge-diamond > * { position: relative; z-index: 1; }
.badge-diamond svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; }

.sender:has(.badge-diamond), #me_name:has(.badge-diamond) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
@keyframes diamond-sheen {
    0%, 72% { transform: translateX(-110%); }
    92%, 100% { transform: translateX(110%); }
}
.row.static { cursor: default; }
.row-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.compact .row { flex-wrap: wrap; padding: 10px; gap: 9px; min-height: 64px; }
.compact .row-tools { flex-basis: 100%; }
.compact .row > button { max-width: 100%; white-space: normal; }
.compact .avatar { width: 38px; height: 38px; border-radius: 12px; }
.empty { padding: 40px 20px; text-align: center; font-size: 14px; line-height: 1.7; }
.bottom-nav { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 4px 10px calc(6px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--navy); }
.bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 56px; padding: 6px 2px; border-color: transparent; background: transparent; font-size: 11px; color: var(--muted); border-radius: 12px; }
.bottom-nav button svg { width: 22px; height: 22px; }
.bottom-nav button.active { background: var(--glass); border-color: transparent; color: var(--accent); }
.bottom-nav button.active svg { color: var(--accent); }
.bottom-nav button:not(.active):is(:hover, :focus, :active) { background: transparent; border-color: transparent; box-shadow: none; }
.bottom-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.bottom-nav .badge { position: absolute; top: 3px; right: 5px; }

/* AI is a main pane; the bottom navigation remains available. */
#ai_view { display: flex; flex: 1; min-height: 0; min-width: 0; flex-direction: column; overflow: hidden; background: var(--navy); }
body.in-ai .panes, body.in-ai .ghost-link { display: none; }
#pane_more > .section-head { justify-content: flex-start; gap: 8px; }

/* Conversations own their viewport. */
#conversation { position: fixed; inset: 0; z-index: 30; height: 100%; height: 100dvh; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--backdrop); padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
body.in-conversation .app-head, body.in-conversation .panes, body.in-conversation .bottom-nav, body.in-conversation #banner { visibility: hidden; }
.conv-head { flex: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 12px 10px; border-bottom: 1px solid var(--line); background: var(--navy); }
.conv-head > .icon-btn { width: 44px; height: 44px; }
.conv-peer { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; text-align: left; padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.conv-peer .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 17px; }
.conv-names { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.conv-names strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.conv-status { display: block; min-width: 0; max-width: 100%; color: #a4c7bc; font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-status.verified { color: var(--green); }
#ai_view .conv-head { margin-bottom: 8px; }
#ai_view .conv-status { color: var(--muted); font-size: 11px; white-space: normal; }
#ai_frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: var(--navy); }
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 22px 16px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: #3b5369 transparent; }
.messages > * { flex-shrink: 0; }
.day { align-self: center; max-width: 80%; margin: 3px 0 8px; padding: 4px 13px; color: var(--muted); font-size: 11px; }

.msg { display: flex; flex-direction: column; align-self: flex-start; max-width: 88%; min-width: 0; }
.msg.mine { align-self: flex-end; }
.bubble { padding: 12px 14px 8px; min-width: 0; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: #182735; overflow-wrap: anywhere; }
.bubble .text { white-space: pre-wrap; }
.mine .bubble { background: #203a4c; border-color: #2d485b; border-radius: 18px 18px 5px 18px; }
.sender { padding: 0 10px 5px; font-size: 12px; font-weight: 500; color: var(--steel); }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: 11px; line-height: 1.4; color: #aec5d9; font-variant-numeric: tabular-nums; }
.msg-meta svg { width: 15px; height: 15px; color: #94d7ff; }
.msg > time { margin: 4px 10px 0; font-size: 11px; color: var(--muted); }
.undecryptable { font-style: italic; color: #b0c0d0; font-size: 14px; }
.undecryptable svg { vertical-align: middle; margin-right: 7px; width: 18px; height: 18px; }
.pending { opacity: .6; }
.failed { cursor: pointer; }
.failed .bubble { border-color: rgba(255, 153, 153, .45); }
.failed .msg-meta { color: var(--red); }
.shield-warning { border-style: dashed; }
.system { align-self: center; max-width: 92%; text-align: center; color: var(--muted); font-size: 12px; padding: 4px 10px; }
.bubble.file, .bubble.voice { padding: 9px 10px 7px; }
.file-card, .voice-card { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-card { padding: 7px; border-radius: 13px; background: rgba(11, 30, 46, .28); }
.file-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; flex: none; border-radius: 12px; background: var(--raised); color: #c6e4fb; }
.file-icon svg { width: 27px; height: 27px; }
.file-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-text strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.file-text .small { font-size: 11px; color: #b6cde0; }
.file-card .icon-btn { margin-left: auto; width: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: #d4edff; }
.voice-card { width: 265px; max-width: 100%; padding: 3px 0; }
.voice-card .play { border-radius: 50%; background: #29485c; border-color: transparent; color: #d3e8f6; }
.play svg { fill: currentColor; stroke-width: 1; width: 20px; height: 20px; }
.wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 38px; min-width: 0; flex: 1; }
.wave i { display: block; width: 2px; min-width: 1px; height: calc(clamp(0, var(--h, .5), 1) * 100%); border-radius: 2px; background: #91d4ff; }
.voice-card > .small { flex: none; font-size: 12px; }
.bubble.media { padding: 6px; }
img.photo { display: block; width: auto; max-width: 100%; max-height: 320px; height: auto; object-fit: cover; border-radius: 14px; background: #1b3043; cursor: zoom-in; }
img.photo.broken { min-width: 100px; min-height: 80px; border: 1px dashed var(--muted); }
.media .msg-meta { padding: 0 5px 2px; }
.composer, .recording { flex: none; display: flex; align-items: flex-end; gap: 4px; margin: 0 12px 12px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.composer textarea { flex: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 140px; padding: 10px 5px; border-color: transparent; background: transparent; resize: none; line-height: 1.4; font-size: 16px; }
.composer textarea:focus { outline-offset: -2px; border-radius: 8px; }
.composer #attach { border: 0; border-radius: 12px; background: transparent; color: var(--muted); }
body.has-text .send-btn { box-shadow: var(--glow); }
.recording { align-items: center; flex-wrap: wrap; padding: 10px; gap: 8px; }
#rec_time { margin-right: auto; font-variant-numeric: tabular-nums; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #f08e96; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .35; } }
.identity-warning { display: flex; align-items: center; gap: 9px; flex: none; margin: 10px 12px 0; padding: 10px; border-radius: 14px; border: 1px solid rgba(223,180,111,.25); background: #342f29; color: var(--amber); font-size: 12px; }
.identity-warning > span { flex: 1; min-width: 0; }
.identity-warning.danger { color: #ffc0c0; border-color: rgba(245,145,145,.3); background: #38262f; }

/* Calls: video tiles stretch in the remaining space; controls never overlay them. */
.call-overlay { position: fixed; inset: 0; z-index: 50; height: 100%; height: 100dvh; display: flex; flex-direction: column; gap: 14px; padding: calc(30px + var(--safe-top)) max(16px, var(--safe-right)) calc(22px + var(--safe-bottom)) max(16px, var(--safe-left)); overflow-y: auto; background: var(--backdrop); }
.call-head { flex: none; padding: 10px 6px; }
.call-title { display: flex; flex-direction: column; gap: 10px; }
.call-title > strong { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
.e2e-line { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.e2e-line svg { width: 17px; height: 17px; }
.e2e-line.on { color: var(--green); }
.call-timer { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; font-size: 20px; font-variant-numeric: tabular-nums; }
.call-timer::before, .call-timer::after { content: ""; width: 40px; height: 1px; background: #4b6c86; }
.call-videos { position: relative; flex: 1; min-height: 140px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 7px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--glass); }
#remote_video, .remote-extra { display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: contain; border-radius: 16px; background: #102132; }
.call-videos[data-count="2"], .call-videos[data-count="3"], .call-videos[data-count="4"], .call-videos[data-count="5"], .call-videos[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); padding: 6px; }
.call-videos[data-count="3"] > #remote_video { grid-column: 1 / -1; }
#local_video { position: absolute; z-index: 2; right: 10px; top: 10px; width: 27%; height: auto; max-height: 32%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 13px; border: 1px solid rgba(190,225,250,.45); background: #20364a; box-shadow: 0 4px 16px rgba(6,18,30,.3); }
.call-status { text-align: center; color: var(--muted); font-size: 14px; flex: none; }
.call-overlay > .warning { text-align: center; }
.call-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; flex: none; margin-top: 6px; }
.call-btn { display: flex; flex: 0 0 clamp(66px, 20vw, 88px); width: clamp(66px, 20vw, 88px); aspect-ratio: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 8px 4px; border-radius: 18px; background: var(--glass); font-size: 11px; line-height: 1.3; }
.call-btn svg { width: 25px; height: 25px; }
.call-btn.on, #call_enable_audio { color: #b8e7ff; border-color: rgba(146,211,255,.6); background: var(--raised); box-shadow: var(--glow); }
.call-btn.off { color: var(--muted); border-style: dashed; background: #142434; }
.call-btn.off svg { opacity: .55; }
.call-btn.accept { color: #e2faef; border-color: #3b705d; background: #285440; }
.call-btn.hangup { color: #fff0f0; border-color: #9b545b; background: #7c3540; }
.call-overlay[data-state="incoming"] .call-btn.accept { box-shadow: 0 0 22px rgba(118,201,162,.15); }
.call-overlay:is([data-state="incoming"], [data-state="outgoing"], [data-state="connecting"], [data-state="resume"]) .call-videos { border-color: var(--line); background: var(--glass); }
.call-overlay[data-state="connecting"] .call-status { color: var(--accent); }
#call_output_row { flex: none; padding: 0 4px; }
#call_output_row label { flex: none; color: var(--muted); }

/* Settings, setup, recovery, and payment. */
.settings { display: flex; flex-direction: column; gap: 16px; }
.settings .section-head { margin-bottom: 0; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.card.install-box { gap: 10px; border-color: var(--line); background: var(--glass); overflow-wrap: anywhere; }
.install-box h3 { color: #d5edff; font-size: 16px; font-weight: 600; }
.install-box .small { color: #b8cedf; line-height: 1.65; }
.install-box > .primary { width: 100%; margin-top: 3px; }
.pseudonym { font-size: 23px; color: #cae5fa; overflow-wrap: anywhere; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row > span { min-width: 0; }
.switch-row strong, .switch-row .small { display: block; }
.switch-row strong { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.switch-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 1px solid #51677b; border-radius: 20px; background: #263b4d; cursor: pointer; transition: background .16s; }
.switch-row input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c5d4e0; box-shadow: 0 1px 3px rgba(10,25,40,.25); transition: transform .16s; }
.switch-row input:checked { background: #75b9ec; border-color: #92cdF8; }
.switch-row input:checked::before { transform: translateX(18px); background: #f0f7fc; }
.select-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 0; font-size: 14px; min-width: 0; width: 100%; }
.select-row select { flex: 1 1 170px; }
.danger-zone { border-color: rgba(245,145,145,.22); }
.setup, .plan-view { height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--backdrop); padding: calc(28px + var(--safe-top)) max(24px, var(--safe-right)) calc(32px + var(--safe-bottom)) max(24px, var(--safe-left)); }
.step { display: flex; flex-direction: column; gap: 20px; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.7; }
.facts { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 0; color: #bdcddd; font-size: 14px; }
.facts li { position: relative; padding-left: 29px; }
.facts li::before { content: "✓"; position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid rgba(124,196,255,.25); border-radius: 50%; color: var(--accent); font-size: 11px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; color: #c1d2e0; cursor: pointer; }
.word-grid { list-style: none; counter-reset: words; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; }
.word-grid li { counter-increment: words; border: 1px solid var(--line); border-radius: 12px; padding: 10px 7px; background: var(--glass); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.word-grid li::before { content: counter(words) ". "; color: var(--muted); font-size: 10px; }
.quiz { display: grid; gap: 14px; }
.quiz label { color: var(--muted); font-size: 13px; }
.quiz input { display: block; margin-top: 6px; font-size: 16px; }
.pin-dots { display: flex; justify-content: center; gap: 15px; padding: 10px; }
.pin-dots span { width: 12px; height: 12px; border: 1px solid #6a89a2; border-radius: 50%; background: #1d3346; }
.pin-dots span.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(124,196,255,.22); }
.pin-pad { width: min(290px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
.pin-pad button { aspect-ratio: 1; border-radius: 50%; padding: 0; font-size: 25px; background: var(--raised); }
.spinner { width: 36px; height: 36px; margin: 40px auto 0; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.step[data-step="working"] { text-align: center; }
.lang-row { display: flex; justify-content: center; }
.lang-row select { width: auto; min-width: 140px; }
.plan-view > h1, .plan-view > .lead { margin-bottom: 18px; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 18px; border-radius: 18px; }
.offer strong { font-size: 14px; font-weight: 500; }
.offer .price { font-size: 24px; }
.offer.selected { border-color: rgba(154,215,255,.64); background: var(--raised); box-shadow: var(--glow); }
/* JS-rendered plans retain a full-width, thumb-friendly layout. */
#plan_offers { grid-template-columns: minmax(0, 1fr); gap: 14px; }
#plan_offers .period-switch {
    display: flex; gap: 4px; min-width: 0; padding: 5px; margin-bottom: 4px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--glass); box-shadow: var(--highlight);
}
#plan_offers .period-switch button {
    flex: 1; min-width: 0; padding: 10px 8px; border-radius: 999px;
    border-color: transparent; background: transparent; box-shadow: none; color: var(--steel); font-size: 14px;
}
#plan_offers .period-switch button.active { background: var(--raised); border-color: rgba(171, 218, 250, .38); color: var(--text); box-shadow: var(--glow); }
#plan_offers .period-switch button:focus-visible { outline-offset: -3px; }
#plan_offers .tier-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-width: 0; padding: 22px; overflow: hidden; text-align: left; border-radius: 18px; border-color: var(--line); background: var(--glass); }
#plan_offers .tier-card > * { position: relative; z-index: 1; max-width: 100%; }
#plan_offers .tier-head { display: flex; align-items: center; min-height: 27px; margin-bottom: 9px; }
#plan_offers .tier-name { color: #d1e2ef; font-size: 15px; font-weight: 600; }
#plan_offers .tier-head .badge-diamond { margin-left: 0; font-size: 12px; }
#plan_offers .tier-price { color: #eff8ff; font-size: clamp(30px, 8vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#plan_offers .tier-unit { color: #afc6d9; font-size: 12px; }
#plan_offers .tier-note { margin-top: 10px; color: #b7cbdc; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#plan_offers .tier-card[data-tier="diamond"] { border-color: #4a596b; background: #182533; }

#plan_offers .tier-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#plan_offers .tier-card[data-tier="diamond"].selected { border-color: #d2edff; }
.pay-methods { display: flex; flex-direction: column; gap: 10px; }
.plan-trial-offer { display:grid; gap:10px; margin:20px 0 24px; padding:20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,#b4d7ef12,#a7ddd308); }
.plan-trial-offer h2 { font-size:20px; margin:0; }
.plan-trial-offer p { margin:0; }
.plan-trial-offer button { width:100%; }
.trial-feedback { position:fixed; inset:0; width:100%; max-width:var(--column); height:100%; height:100dvh; max-height:100dvh; margin:auto; padding:calc(28px + var(--safe-top)) max(24px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(24px,var(--safe-left)); border:0; color:var(--text); background:radial-gradient(ellipse at 50% 28%,#1e3542 0%,#0b1923 65%); overflow-y:auto; overscroll-behavior:contain; }
.trial-feedback[open] { display:flex; flex-direction:column; gap:24px; }
.trial-feedback::backdrop { background:#07121c; }
.trial-feedback-brand { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:.19em; }
.trial-feedback-brand span { color:var(--accent); }
.trial-feedback-body { margin-block:auto; padding-block:12px; text-align:center; }
.trial-feedback h1 { font-size:clamp(26px,7vw,34px); line-height:1.2; margin:24px 0 16px; outline:none; }
.trial-feedback p { line-height:1.65; overflow-wrap:anywhere; }
.trial-feedback-orbit { position:relative; display:grid; place-items:center; width:116px; height:116px; margin:0 auto; border:1px solid #cbdfea20; border-radius:50%; color:#eed1a2; background:radial-gradient(circle,#eed1a215,transparent 70%); }
.trial-feedback-orbit::before { content:""; position:absolute; inset:-10px; border:1px solid transparent; border-top-color:#eed1a280; border-right-color:#eed1a230; border-radius:50%; animation:trial-feedback-orbit 8s linear infinite; }
.trial-feedback-orbit svg { width:48px; height:48px; }
.trial-feedback-actions { display:grid; gap:12px; flex-shrink:0; }
.trial-feedback-actions button { width:100%; white-space:normal; }
.trial-feedback-actions p { margin:0; text-align:center; }
@keyframes trial-feedback-orbit { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .trial-feedback-orbit::before { animation:none; } }
.code-form { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 14px; font-size: 14px; }
.code-form input { font-size: 14px; }
.plan-view > .error, .plan-view > .warning, .plan-view > .muted { margin: 14px 0; }
#plan_lock { width: 100%; margin-top: 8px; }

/* Modal sheets use the top layer; hiding their backdrop is essential to the veil. */
dialog.sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: var(--column); max-height: calc(100dvh - var(--safe-top) - 24px); padding: 28px max(22px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(22px, var(--safe-left)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: #142330; color: var(--text); box-shadow: 0 -12px 60px rgba(0,0,0,.25); overflow-y: auto; overscroll-behavior: contain; }
dialog.sheet::before { content: ""; position: absolute; width: 32px; height: 3px; border-radius: 3px; background: #61798d; top: 10px; left: calc(50% - 16px); }
dialog::backdrop { background: rgba(6,17,29,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.sheet > * + *, .sheet form > * + *, .safety > * + *, #group_invite_box > * + * { margin-top: 16px; }
.sheet > .secondary, .safety > button { width: 100%; }
.sheet .row { flex-wrap: wrap; }
.sheet .row > button { flex: 1 1 auto; }
.safety { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(9,24,38,.25); }
.safety-number { font: 16px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; color: #c2e2fa; overflow-wrap: anywhere; }
.banner { flex: none; margin: 0 16px 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: #21374b; font-size: 13px; }
.banner.warn { color: var(--amber); background: #332e27; border-color: rgba(234,193,122,.25); }
.banner.danger { color: var(--red); background: #38262f; border-color: rgba(245,145,145,.25); }
#toast { position: fixed; bottom: calc(var(--nav-height) + 10px + var(--toast-gap) + var(--safe-bottom)); left: 50%; transform: translateX(-50%); z-index: 70; width: max-content; max-width: min(90%, 500px); max-height: var(--toast-height); overflow-y: auto; padding: 12px 17px; border: 1px solid rgba(165,205,235,.3); border-radius: 16px; background: #263e53; color: var(--text); box-shadow: 0 8px 30px rgba(5,17,28,.35); font-size: 13px; text-align: center; }
body.in-conversation #toast { bottom: calc(var(--composer-height) + 12px + var(--toast-gap) + var(--safe-bottom)); }
body:has(#toast:not([hidden])) .panes,
body.in-conversation:has(#toast:not([hidden])) .messages { margin-bottom: calc(var(--toast-height) + 2 * var(--toast-gap)); }
/* Follow the live composer height, including multiline input and recording. */
@supports (anchor-name: --composer) {
    .composer, .recording { anchor-name: --composer; }
    body.in-conversation #toast { position-anchor: --composer; bottom: calc(anchor(top) + var(--toast-gap)); }
}
@supports not (anchor-name: --composer) {
    body.in-conversation { --composer-height: 156px; }
    body.in-conversation:has(#toast:not([hidden])) .messages { margin-bottom: calc(var(--toast-height) + 2 * var(--toast-gap) + 96px); }
}

@media (hover: hover) {
    button:hover:not(:disabled) { background-color: rgba(124,196,255,.09); border-color: rgba(160,209,247,.35); }
    .list > button.row:hover { border-color: rgba(145,204,249,.45); }
    .primary:hover:not(:disabled), .send-btn:hover:not(:disabled) { filter: brightness(1.06); }
    .bottom-nav button:not(.active):hover { color: var(--steel); }
}
@media (min-width: 900px) {
    body { background: #080f17; }
    .app, .calc, .setup, .plan-view { max-width: var(--column); margin-inline: auto; border-inline: 1px solid var(--line); box-shadow: 0 0 80px rgba(5,15,25,.25); }
    #conversation, .call-overlay { left: 50%; right: auto; width: var(--column); transform: translateX(-50%); border-inline: 1px solid var(--line); }
    .calc { padding-inline: 36px; }
    .calc-keys { height: min(60dvh, 540px); max-height: 540px; }
    .calc-key { aspect-ratio: auto; }
    .setup, .plan-view { padding-inline: 38px; }
    .app-head { padding: 26px 26px 4px; }
    .panes { padding-inline: 22px; }
    .bottom-nav { padding-inline: 18px; }
    .row-title { font-size: 16px; }
    .row-sub { font-size: 14px; }
    .conv-head { padding: 16px; gap: 9px; }
    .conv-status { font-size: 11px; }
    .messages { padding-inline: 22px; }
    .composer, .recording { margin-inline: 14px; }
    dialog.sheet { inset: 0; margin: auto; width: min(500px, calc(100% - 48px)); max-height: 86dvh; border: 1px solid rgba(181,213,240,.2); border-radius: 24px; padding: 28px; }
    dialog.sheet::before { display: none; }
}
@media (max-width: 374px) {
    .app-head { padding-inline: 18px; }
    .list > .row { gap: 9px; padding: 10px; }
    .conv-head { gap: 2px; padding-inline: 6px; }
    .conv-peer { gap: 6px; }
    .conv-head > .icon-btn { width: 44px; }
    .conv-peer .avatar { width: 34px; height: 36px; border-radius: 12px; }
    .conv-names strong { font-size: 14px; }
    .composer { margin-inline: 8px; }
    .messages { padding-inline: 12px; }
    .calc-keys { gap: 10px; }
}
@media (max-height: 650px) {
    .app-head { padding-top: 12px; padding-bottom: 0; gap: 4px; }
    .calc { gap: 10px; padding-top: calc(12px + var(--safe-top)); padding-bottom: calc(12px + var(--safe-bottom)); }
    .calc-keys { flex: 1; min-height: 0; max-height: 380px; gap: 8px; }
    .calc-key { aspect-ratio: auto; }
    .calc-display { flex: 0 0 auto; min-height: 74px; padding: 0 5px; }
    .calc-out { font-size: 36px; }
    .call-overlay { gap: 8px; padding-top: calc(12px + var(--safe-top)); padding-bottom: calc(12px + var(--safe-bottom)); }
    .call-head { padding-block: 0; }
    .call-timer { margin-top: 10px; }
    .call-btn { flex-basis: 66px; width: 66px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* These rules must win over every normal layer, hidden attribute, and dialog. */
body.veiled #view_calc { display: flex !important; visibility: visible !important; position: fixed; inset: 0; z-index: 2147483647; width: 100%; max-width: none; height: 100dvh; margin: 0; border: 0; transform: none; box-shadow: none; }
body.veiled #view_calc .calc-display, body.veiled #view_calc .calc-keys { width: 100%; max-width: 488px; margin-inline: auto; }
body.veiled :is(#view_app, #view_plan, #view_setup, .call-overlay, dialog, #toast),
body.veiled :is(#view_app, #view_plan, #view_setup, .call-overlay, dialog, #toast) * { visibility: hidden !important; }
body.veiled dialog::backdrop { visibility: hidden !important; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.booting { background: var(--navy); }
body.booting > *, body.booting > * *, body.booting.veiled #view_calc, body.booting dialog::backdrop { visibility: hidden !important; }

/* Android app: settings actions and the image viewer (a WebView cannot open blob images in a new tab). */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#native_update_state:empty { display: none; }
#native_update_state { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--navy); line-height: 1.6; }
#native_update_state[data-state="current"] { color: var(--green); }
#native_update_state[data-state="error"] { color: var(--red); border-color: rgba(255, 172, 172, .25); }
.lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 10, 20, .94); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }

/* Empty states give a direct next step; AI stays separate from encrypted conversations. */
.home-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 22px; margin: 4px 0 26px; border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.home-empty > svg { width: 30px; height: 30px; margin-bottom: 8px; color: var(--steel); }
.home-empty h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.home-empty p { max-width: 32ch; font-size: 14px; color: var(--muted); }
.home-empty button { margin-top: 8px; }
.settings .card > h3 { color: var(--steel); font-size: 12px; letter-spacing: .035em; }
.settings .card > .row { flex-wrap: wrap; }
.settings .row-actions > button { flex: 1 1 180px; }
.org-dialog { width: min(calc(100vw - 24px), 560px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px); padding: 0 22px 22px; color: var(--text); background: #142330; border: 1px solid var(--line); border-radius: 20px; overscroll-behavior: contain; }
.org-dialog::backdrop { background: rgba(3,10,17,.78); }
.org-head { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; background: #142330; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.org-head h2 { font-size: 20px; overflow-wrap: anywhere; }
.org-head button { flex: none; font-size: 24px; }
#organization_content > p { margin: 14px 0; line-height: 1.65; overflow-wrap: anywhere; }
#organization_content > button { margin: 6px 8px 6px 0; max-width: 100%; }
.org-create { width: 100%; }
#organization_content > .org-create { margin-inline: 0; }
.org-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.org-actions > button { flex: 1 1 160px; }
.org-join { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.org-join > button { width: 100%; font-size: 13px; color: var(--muted); }
.org-name { font-size: 20px; letter-spacing: -.02em; }
.org-field { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; color: var(--muted); font-size: 14px; }
.org-code { display: block; text-align: center; font-size: clamp(32px, 10vw, 44px); letter-spacing: .22em; font-variant-numeric: tabular-nums; padding: 22px 12px; margin: 20px 0; border-radius: 14px; background: var(--navy); color: var(--accent); }
.org-consent { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.org-consent input { flex: none; width: 22px; height: 22px; margin-top: 4px; }
.org-map { width: 100%; height: auto; border-radius: 14px; }
.org-member { margin: 16px 0; padding: 16px; }
.org-member-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.org-role { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; }
.org-device { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding-top: 12px; }
.org-device > button { align-self: flex-start; }
.org-member-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.org-member-actions button { flex: 1 1 160px; font-size: 13px; }
#organization_content details { border-top: 1px solid var(--line); margin-top: 20px; }
#organization_content summary { min-height: 48px; padding: 14px 0; cursor: pointer; color: var(--steel); font-size: 14px; }
#organization_content details p { margin: 10px 0; color: var(--muted); }
@media (max-width: 374px) {
    .brand-mini { gap: 10px; }
    .brand-mini .brand-big { font-size: 20px; }
    .org-dialog { padding-inline: 16px; }
    .org-head h2 { font-size: 18px; }
}

/* One quiet header for AI; the conversation owns the space below it. */
.ai-toolbar { display: none; }
body.in-ai .brand-mini { display: none; }
body.in-ai .app-head { padding: 8px 12px; gap: 2px; }
body.in-ai .ai-toolbar { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-toolbar strong { flex: 1; font-size: 18px; font-weight: 550; letter-spacing: -.02em; }

.pair-body { display: flex; flex-direction: column; gap: 14px; }
.pair-code { text-align: center; font-size: 28px; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.pair-fingerprint { width: 100%; min-height: 112px; resize: none; font: 16px/1.8 monospace; word-spacing: .25em; }

/* Authenticated entrance: real checks, a deliberate presentation, then a completed shield. */
.security-entrance {
    width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0;
    padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    border: 0; border-radius: 0; color: #e4eff3;
    background: radial-gradient(ellipse at 50% 43%, #10232e 0, #0b1924 36%, #08131e 72%);
    overflow: auto; overscroll-behavior: contain;
}
.security-entrance[open] { display: flex; flex-direction: column; align-items: center; }
.security-entrance::backdrop { background: #08131e; }
.security-shell { width: min(100%, 420px); min-width: 0; margin-block: auto; display: flex; flex-direction: column; align-items: center; flex: none; text-align: center; }
.security-halo { position: relative; width: clamp(112px, 32vw, 144px); aspect-ratio: 1; display: grid; place-items: center; flex: none; margin-bottom: 34px; }
.security-aura { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, #95d6e31c, #88c9d80a 44%, transparent 72%); pointer-events: none; }
.security-traces { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.security-traces circle { cx: 80px; cy: 80px; r: 68px; fill: none; vector-effect: non-scaling-stroke; transform-origin: 80px 80px; }
.security-track { stroke: #a5cfdb; stroke-width: .7; opacity: .12; }
.security-arc { stroke: #c2e4e9; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 74 354; opacity: .72; }
.security-traces .security-arc-secondary { r: 56px; stroke: #8bb5c6; stroke-width: .85; stroke-linecap: round; stroke-dasharray: 42 310; opacity: .43; transform: rotate(150deg); }
.security-mark { position: relative; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 14px #68c6d61a); }
.security-verdict { position: absolute; width: 70%; height: 70%; display: none; fill: none; filter: drop-shadow(0 0 18px #9ee8ca30); }
.security-verdict path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.security-shield { stroke: #a8dfca; stroke-width: 1.8; }
.security-shield-check { stroke: #d1f4e6; stroke-width: 2.4; }
.security-entrance[data-phase=complete] .security-verdict { display: block; }
.security-entrance[data-phase=complete] .security-mark { visibility: hidden; }
.security-entrance[data-phase=complete] .security-arc, .security-entrance[data-phase=complete] .security-arc-secondary { animation-play-state: paused; stroke: #a8dfca; opacity: .22; }
.security-entrance[data-phase=complete] .security-aura { animation: none; background: radial-gradient(circle, #9ce8c92a, #87d4ba0b 45%, transparent 74%); }
.security-entrance[data-phase=complete] h1 { color: #d3f0e3; }
@keyframes ghost-verdict-reveal { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes ghost-verdict-stroke { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .security-entrance[data-phase=complete] .security-verdict { animation: ghost-verdict-reveal .26s ease-out both; }
    .security-entrance[data-phase=complete] .security-shield { animation: ghost-verdict-stroke .45s ease-out both; }
    .security-entrance[data-phase=complete] .security-shield-check { animation: ghost-verdict-stroke .25s .26s ease-out both; }
}

.security-eyebrow { margin: 0 0 14px; padding-left: .28em; font-size: .625rem; line-height: 1.6; letter-spacing: .28em; color: #8faab9; }
.security-entrance h1 { max-width: 23ch; min-height: 2.7em; margin: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.25rem, 5.7vw, 1.5625rem); font-weight: 500; line-height: 1.35; letter-spacing: -.025em; text-align: center; overflow-wrap: anywhere; }
.security-caption { max-width: 340px; margin-top: 16px; color: #a4b7c5; font-size: .8125rem; line-height: 1.65; text-align: center; }
.security-caption:empty, .security-actions:empty, .security-checks { display: none; }
.security-actions { width: min(100%, 320px); display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.security-actions button { width: 100%; min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
.security-entrance[data-phase=opening] .security-arc { opacity: .9; }
.security-entrance[data-phase=failed] .security-aura, .security-entrance[data-failed=true] .security-aura { background: radial-gradient(circle, #da9f9f12, transparent 72%); }
.security-entrance[data-phase=failed] .security-arc, .security-entrance[data-failed=true] .security-arc { stroke: #d9aaaa; opacity: .65; }
@keyframes ghost-entry-orbit { to { transform: rotate(360deg); } }
@keyframes ghost-entry-counter-orbit { from { transform: rotate(150deg); } to { transform: rotate(-210deg); } }
@keyframes ghost-entry-light { 50% { opacity: .58; } }
@media (prefers-reduced-motion: no-preference) {
    .security-arc { animation: ghost-entry-orbit 8s linear infinite; }
    .security-arc-secondary { animation: ghost-entry-counter-orbit 13s linear infinite; }
    .security-aura { animation: ghost-entry-light 5s ease-in-out infinite; }
}
.security-entrance[data-phase=failed] .security-halo *, .security-entrance[data-phase=update] .security-halo *, .security-entrance[data-failed=true] .security-halo *, body.veiled .security-halo * { animation-play-state: paused; }
@media (max-height: 540px) {
    .security-entrance { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .security-halo { width: 100px; margin-bottom: 22px; }
    .security-mark { width: 38px; height: 38px; }
    .security-eyebrow { margin-bottom: 10px; }
    .security-caption { margin-top: 12px; }
    .security-actions { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .security-entrance *, .security-entrance *::before, .security-entrance *::after { animation: none !important; transition: none !important; }
}


.group-invitation{margin:12px;padding:16px;border:1px solid var(--line);border-radius:18px}.group-invitation .row{gap:10px;margin-top:12px}

/* Motion is decorative; completed call stages are set from the actual encrypted room. */
.call-presence { position: relative; align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; gap: 24px; padding: 26px 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 44%, #21414b66, transparent 68%); }
.call-presence::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25; background: linear-gradient(transparent 49.8%, #b4d7ef18 50%, transparent 50.2%), linear-gradient(90deg, transparent 49.8%, #b4d7ef18 50%, transparent 50.2%); }
.call-orbit { position: relative; display: grid; place-items: center; width: clamp(100px, 32vw, 154px); aspect-ratio: 1; flex: none; color: var(--accent); }
.call-orbit i { position: absolute; inset: 0; border: 1px solid #b4d7ef24; border-top-color: #c9e6efb3; border-radius: 50%; animation: call-orbit-turn 6s linear infinite; }
.call-orbit i:nth-child(2) { inset: 12px; border-top-color: transparent; border-right-color: #8ebcc887; animation-duration: 10s; animation-direction: reverse; }
.call-orbit i:nth-child(3) { inset: -12px; border-style: dashed; border-color: #b4d7ef20; animation-duration: 30s; }
.call-orbit-core { width: 48%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #172d38; border: 1px solid #b4d7ef30; box-shadow: 0 0 36px #8bcbd916; animation: call-orbit-breathe 3.6s ease-in-out infinite; }
.call-orbit-core svg { width: 30px; height: 30px; stroke-width: 1.3; }
.call-presence-brand { color: #9bb4bf; letter-spacing: .42em; font-size: 10px; padding-left: .42em; }
.call-progress { position: relative; display: flex; justify-content: center; width: min(100%, 330px); list-style: none; padding: 0; margin: 0; font-size: 10px; color: #8ea3af; }
.call-progress li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.call-progress li::before { content: ''; width: 6px; height: 6px; border: 1px solid #718a97; border-radius: 50%; background: #142632; transition: background-color .25s, box-shadow .25s; }
.call-progress li[data-state=ok] { color: #b5d9cd; }
.call-progress li[data-state=ok]::before { background: #9ad7c0; border-color: #9ad7c0; box-shadow: 0 0 10px #9ad7c033; }
.call-presence[data-ready=true] .call-orbit { color: #b4e3d0; }
.call-presence[data-ready=true] .call-orbit i { animation: none; border-color: #9ad7c02b; }
.call-presence[data-ready=true] .call-orbit-core { animation-duration: 7s; border-color: #9ad7c04a; }
.call-overlay[data-state=incoming] .call-orbit-core { animation-duration: 2s; }
.call-overlay:not([data-state=active]) .call-videos { border-color: transparent; background: transparent; }
.call-overlay[data-state=idle] .call-presence *, .call-presence[hidden] *, body.veiled .call-presence * { animation-play-state: paused !important; }
@keyframes call-orbit-turn { to { transform: rotate(360deg); } }
@keyframes call-orbit-breathe { 50% { transform: scale(1.045); box-shadow: 0 0 46px #8bcbd92b; } }
@keyframes ghost-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ghost-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ghost-menu-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    .pane:not([hidden]), dialog[open]:not(.security-entrance) { animation: ghost-reveal .22s ease-out both; }
    .call-overlay:not([hidden]) { animation: ghost-fade-in .22s ease-out both; }
    .app-menu[open] > :not(summary) { animation: ghost-menu-reveal .18s ease-out both; }
    .bottom-nav button svg { transition: transform .2s ease-out, color .2s; }
    .bottom-nav button[aria-current=page] svg { transform: translateY(-2px); }
    button { transition: background-color .16s, border-color .16s, transform .16s; }
    button:active:not(:disabled) { transform: scale(.97); }
}
@media (max-height: 650px) {
    .call-presence { gap: 18px; padding-block: 20px; }
    .call-orbit { width: 88px; }
    .call-orbit-core svg { width: 24px; height: 24px; }
    .call-progress { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .call-orbit i, .call-orbit-core { animation: none !important; }
}
@media (max-height: 480px) {
    .call-presence { flex-direction: row; gap: 26px; padding: 20px 24px; }
    .call-presence-brand { display: none; }
    .call-orbit { width: 78px; }
    .call-progress { max-width: 260px; }
}
.trial-notice { flex: none; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 0; border-top: 1px solid var(--line); background: var(--navy); color: var(--muted); font-size: 12px; }
#trial_limits { line-height: 1.7; margin: 8px 0; }

/* One communication hub; filters preserve the same contact/group identity. */
.message-actions { display: flex; gap: 2px; }
#messages_search { border-radius: 24px; padding-inline: 17px; background: #15232e; }
.message-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 16px 0 12px; }
.message-filters button { min-width: 0; padding: 8px 4px; border-radius: 24px; font-size: 12px; background: transparent; }
.message-filters button[aria-pressed=true] { background: #b4d7ef; border-color: #b4d7ef; color: #132936; }
.calls-status { padding: 12px 4px; }
.call-entry { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 4px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.call-entry > .row { flex: 1; min-width: 0; text-align: left; padding: 6px; min-height: 80px; border-color: transparent; background: transparent; }
.call-return { flex: 0 0 44px; color: #badbd0; border: 1px solid #badbd022; border-radius: 50%; }
.call-entry .row-meta { max-width: 56px; }

/* Continuous motion remains decorative; link color comes only from observed call state. */
.call-overlay { --call-signal: #a9bed0; }
.call-overlay[data-link=verified] { --call-signal: #9ad7c0; }
.call-link-motion { display: flex; align-items: center; gap: 7px; height: 12px; margin-top: 12px; color: var(--call-signal); }
.call-link-motion i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.call-videos::before { content: ''; position: absolute; z-index: 4; pointer-events: none; bottom: 0; left: 0; width: 20%; height: 2px; background: linear-gradient(90deg,transparent,var(--call-signal),transparent); }
.call-videos::after { content: ''; position: absolute; z-index: 3; pointer-events: none; inset: 0; border: 1px solid var(--call-signal); border-radius: inherit; opacity: .3; }
.call-presence[data-ready=true] .call-orbit i { border-color: #9ad7c02b; border-top-color: #9ad7c0a3; }
.app-head { position: relative; }
.app-head::after { content: ''; pointer-events: none; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,#b4d7ef48,transparent); background-size: 200% 100%; }
@keyframes ghost-signal-flow { to { transform: translateX(400%); } }
@keyframes ghost-link-pulse { 50% { opacity: 1; transform: scale(1.3); } }
@keyframes ghost-frame-pulse { 50% { opacity: .62; } }
@keyframes ghost-header-flow { to { background-position: 200% 0; } }
@keyframes ghost-unread-glow { 50% { box-shadow: 0 0 0 3px #b4d7ef14; } }
@media (prefers-reduced-motion: no-preference) {
    .call-overlay:not([hidden]) .call-link-motion i { animation: ghost-link-pulse 2.4s ease-in-out infinite; }
    .call-overlay:not([hidden]) .call-link-motion i:nth-child(2) { animation-delay: .3s; }
    .call-overlay:not([hidden]) .call-link-motion i:nth-child(3) { animation-delay: .6s; }
    .call-overlay:not([hidden]) .call-videos::before { animation: ghost-signal-flow 8s linear infinite; }
    .call-overlay:not([hidden]) .call-videos::after { animation: ghost-frame-pulse 5s ease-in-out infinite; }
    .call-presence[data-ready=true] .call-orbit i { animation: call-orbit-turn 18s linear infinite; }
    .call-presence[data-ready=true] .call-orbit i:nth-child(2) { animation-duration: 28s; animation-direction: reverse; }
    .call-presence[data-ready=true] .call-orbit i:nth-child(3) { animation-duration: 45s; }
    .call-overlay[data-speaking=true] .call-orbit-core { animation-duration: 1.8s; }
    #view_app:not([hidden]) .app-head::after { animation: ghost-header-flow 14s linear infinite; }
    #pane_chats:not([hidden]) .unread .avatar { animation: ghost-unread-glow 4s ease-in-out infinite; }
    .message-filters button { transition: background-color .2s, color .2s, transform .2s; }
    .conversation:not([hidden]) { animation: ghost-reveal .2s ease-out both; }
}
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after,
body.veiled *, body.veiled *::before, body.veiled *::after { animation-play-state: paused !important; }
@media (max-height:480px) {
    .call-overlay { gap: 8px; padding-top: calc(12px + var(--safe-top)); padding-bottom: calc(10px + var(--safe-bottom)); }
    .call-head { padding-block: 0; }
    .call-title { gap: 4px; }
    .call-title > strong { font-size: 21px; }
    .call-timer { margin-top: 5px; font-size: 15px; }
    .call-link-motion { margin-top: 6px; height: 7px; }
}

/* The call surface owns motion while it covers the main application. */
body.call-visible #view_app *, body.call-visible #view_app *::before, body.call-visible #view_app *::after,
body.in-conversation .app-head::after { animation-play-state: paused !important; }

/* Ghost Protocol: quiet instrument-panel depth, without adding security claims. */
#view_app { background: radial-gradient(ellipse at 100% 0,#17334455,transparent 54%),var(--navy); }
.panes { position: relative; isolation: isolate; }
.panes::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto; height: min(100%,380px); opacity: .5; background: radial-gradient(ellipse at 85% 8%,#7bb9c51a,transparent 65%),repeating-linear-gradient(90deg,transparent 0 79px,#b4d7ef04 79px 80px); }
.app-head { background: linear-gradient(115deg,#13273570,transparent 75%); }
.app-head::after { background-image: linear-gradient(90deg,transparent 15%,#9fd4df88 50%,transparent 85%); }
.brand-mini .brand-small { letter-spacing: .17em; }
.app-menu-items, dialog.sheet, .org-dialog { background: linear-gradient(145deg,#192d3a,#101d28 75%); border-color: #b4d7ef30; box-shadow: 0 22px 65px #0006,inset 0 1px #d7edf710; }
.org-head { background: #172936; }
.settings .card, .org-member { box-shadow: inset 0 1px #c2e1ee0b; }
.bottom-nav { background: linear-gradient(180deg,#0d1b27,var(--navy)); }
.bottom-nav button.active { background: #b4d7ef08; box-shadow: none; }
.bottom-nav button.active::after { content: ''; position: absolute; pointer-events: none; bottom: 3px; left: calc(50% - 12px); width: 24px; height: 1px; background: #b4d7ef; box-shadow: 0 0 8px #a8d8e766; opacity: .5; }
.conv-head { position: relative; background: linear-gradient(110deg,#142735,var(--navy) 80%); }
.conv-head::after { content: ''; position: absolute; pointer-events: none; bottom: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg,transparent,#a9d6e45c,transparent); background-size: 200% 100%; }
.composer { box-shadow: 0 -8px 30px #00000012; }
.composer:focus-within { border-top-color: #afd8ea55; }
.org-code { position: relative; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; background: radial-gradient(ellipse at 50% 0,#23435380,transparent 85%),#0d1b26; box-shadow: inset 0 1px #b4d7ef24,inset 0 -1px #b4d7ef15; }
.org-code::after { content: ''; pointer-events: none; position: absolute; inset: auto 16px 0; height: 1px; background: linear-gradient(90deg,transparent,#b4d7ef88,transparent); background-size: 200% 100%; }
.org-code { overflow: hidden; }
.org-code.expired { color: var(--muted); }
.org-code.expired::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 25%,#b4d7ef22 50%,transparent 75%); }
.org-pair-clock { margin: -4px 0 22px; color: var(--accent); }
.org-pair-clock [role=timer] { margin: 0 0 12px; color: inherit; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; }
.org-pair-track { height: 8px; position: relative; overflow: hidden; border-radius: 8px; background: #b4d7ef12; box-shadow: inset 0 0 0 1px #b4d7ef18; }
.org-pair-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg,#50889c,#b4e3ec); box-shadow: 0 0 12px #b4e3ec66; border-radius: inherit; transition: transform var(--pair-tick,250ms) linear; }
.org-pair-track::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),#0d1b2680 calc(10% - 2px),#0d1b2680 10%); }
.org-pair-clock[data-state=urgent] { color: #dec496; }
.org-pair-clock[data-state=urgent] .org-pair-fill { background: linear-gradient(90deg,#9e8054,#ecd3a6); }
.org-pair-clock[data-state=expired] { color: var(--muted); }
@media(prefers-reduced-motion:no-preference) {
    .org-pair-track::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,transparent,#e3f6ff55,transparent); animation: ghost-pair-scan 2.8s ease-in-out infinite; pointer-events: none; }
    .org-pair-clock[data-state=expired] .org-pair-track::before { animation-duration: 1.2s; }
    .org-code.expired::before { animation: ghost-pair-scan 1.2s ease-in-out infinite; }
}
@keyframes ghost-pair-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media(prefers-reduced-motion:reduce) { .org-pair-fill { transition: none; } }
.call-presence::before { opacity: .4; background: linear-gradient(transparent 49.8%,#b4d7ef18 50%,transparent 50.2%),linear-gradient(90deg,transparent 49.8%,#b4d7ef18 50%,transparent 50.2%),repeating-linear-gradient(0deg,transparent 0 39px,#b4d7ef05 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#b4d7ef05 39px 40px); }
.call-presence::after { content: ''; position: absolute; pointer-events: none; width: min(200px,52vw); aspect-ratio: 1; left: 50%; top: 44%; border: 1px solid var(--call-signal); border-radius: 50%; transform: translate(-50%,-50%); opacity: .08; }
.call-videos::after { background: linear-gradient(var(--call-signal),var(--call-signal)) 10px 10px/14px 1px no-repeat,linear-gradient(var(--call-signal),var(--call-signal)) 10px 10px/1px 14px no-repeat,linear-gradient(var(--call-signal),var(--call-signal)) calc(100% - 10px) calc(100% - 10px)/14px 1px no-repeat,linear-gradient(var(--call-signal),var(--call-signal)) calc(100% - 10px) calc(100% - 10px)/1px 14px no-repeat; }
.call-link-motion { gap: 6px; }
.call-link-motion i { width: 13px; height: 2px; border-radius: 2px; }
.call-orbit-core { background: radial-gradient(circle at 35% 25%,#244b55,#142c37 75%); box-shadow: 0 0 40px #8bcbd91c,inset 0 1px #c0e9ef15; }
@keyframes ghost-panel-breathe { 50% { opacity: .85; } }
@keyframes ghost-nav-beacon { 50% { opacity: .9; transform: scaleX(1.35); } }
@keyframes ghost-orbit-wave { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 20% { opacity: .13; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }
@media (prefers-reduced-motion: no-preference) {
    .panes::before { animation: ghost-panel-breathe 12s ease-in-out infinite; }
    .bottom-nav button.active::after { animation: ghost-nav-beacon 5s ease-in-out infinite; }
    .conv-head::after, .org-code::after { animation: ghost-header-flow 9s linear infinite; }
    .call-overlay:not([hidden]) .call-presence::after { animation: ghost-orbit-wave 7s ease-out infinite; }
    .composer { transition: border-color .25s,box-shadow .25s; }
}
/* Covered surfaces do not keep decorative loops running. */
body.in-conversation .panes::before,
body.in-conversation .bottom-nav *::after { animation-play-state: paused !important; }

/* Waiting is a quiet availability search, never a verified security signal. */
.call-overlay[data-state=waiting] { --call-signal: #9aaec8; }
.call-overlay[data-state=waiting] .call-orbit-core { opacity: .65; }
.call-overlay[data-state=waiting] .call-status { max-width: 32ch; margin-inline: auto; }
.call-overlay[data-state=waiting] .call-orbit i { animation-duration: 18s; }
.call-overlay[data-state=waiting] .call-presence::after { animation-duration: 10s; }

/* A custom profile name must remain readable on narrow settings screens. */
#me_name, #me_name:has(.badge-diamond) { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
#me_name .badge-diamond { display: flex; width: fit-content; margin: 8px 0 0; font-size: 12px; }

/* More distinct orbital motion follows the existing call state and signal color. */
.call-orbit i::after { content: ''; position: absolute; top: -2px; left: calc(50% - 1.5px); width: 3px; height: 3px; background: var(--call-signal); border-radius: 50%; box-shadow: 0 0 9px var(--call-signal); opacity: .6; }
.call-orbit i:nth-child(3)::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .call-overlay:not([hidden]):not([data-state=waiting]) .call-presence .call-orbit i { animation: call-orbit-turn 4.5s linear infinite; }
    .call-overlay:not([hidden]):not([data-state=waiting]) .call-presence .call-orbit i:nth-child(2) { animation-duration: 7s; animation-direction: reverse; }
    .call-overlay:not([hidden]):not([data-state=waiting]) .call-presence .call-orbit i:nth-child(3) { animation-duration: 18s; }
    .call-overlay:not([hidden]) .call-presence::after { animation-duration: 5s; }
    .call-overlay[data-state=waiting] .call-presence::after { animation-duration: 10s; }
}

/* IME visibility comes from Android; browsers use visual viewport measurements. */
html.keyboard-open, html.keyboard-open body { height: var(--keyboard-viewport, 100%); }
html.keyboard-open .bottom-nav { display: none; }

/* Datacenter reachability follows a correlated heartbeat, not the E2EE state. */
.ghost-link { --signal: #92a6b7; grid-column: 1 / -1; width: 100%; min-width: 0; padding: 9px 0 12px; min-height: 44px; }
.ghost-link-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 10px; color: var(--signal); }
.ghost-link-label > :first-child { letter-spacing: .18em; white-space: nowrap; }
#ghost_link_status { text-align: right; line-height: 1.4; }
.ghost-link-track { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg,transparent 4px,#91b1c126 4px,#91b1c126 6px,transparent 6px); }
.ghost-link-track::before { content: ''; position: absolute; top: 4px; height: 2px; width: 100%; background: repeating-linear-gradient(90deg,var(--signal) 0 5px,transparent 5px 14px); opacity: .5; }
.ghost-link-track i { position: absolute; left: -25%; top: 4px; height: 2px; width: 25%; border-radius: 50%; background: linear-gradient(90deg,transparent,var(--signal),transparent); box-shadow: 0 0 7px var(--signal); }
.ghost-link[data-state=online] { --signal: #a5dfd1; }
.ghost-link[data-state=online] .ghost-link-track::before { background: linear-gradient(90deg,transparent,#a5dfd155,transparent); }
.ghost-link[data-state=reconnecting] { --signal: #e4bd83; }
.ghost-link[data-state=offline] { --signal: #a0a8b6; }
.ghost-link[data-state=offline] .ghost-link-track i { display: none; }
.row-tier { display: flex; align-items: center; min-width: 0; }
.row-tier .badge-diamond { margin-left: 0; }
@keyframes ghost-link-flow { from { transform: translateX(0); } to { transform: translateX(500%); } }
@media (prefers-reduced-motion: no-preference) {
    .ghost-link:not([data-state=offline]) .ghost-link-track i { animation: ghost-link-flow 3.2s linear infinite; }
    .ghost-link .ghost-link-track i:nth-child(2) { animation-delay: -1.1s; opacity: .5; }
    .ghost-link .ghost-link-track i:nth-child(3) { animation-delay: -2.2s; opacity: .3; }
    .ghost-link:is([data-state=checking],[data-state=reconnecting]) .ghost-link-track i { animation-duration: 1.8s; animation-direction: alternate; }
}
/* A separate search state: broken amber rings and a readable central explanation. */
.call-waiting { position: relative; text-align: center; width: 100%; max-width: 33ch; z-index: 1; }
.call-waiting strong { display: block; font-size: clamp(24px,7vw,32px); line-height: 1.18; letter-spacing: -.025em; color: #f3d5a5; text-wrap: balance; }
.call-waiting p { margin: 16px 0 10px; color: #e4d6c0; font-size: 16px; line-height: 1.5; text-wrap: balance; }
.call-waiting > span { display: block; color: #a8b4bf; font-size: 13px; line-height: 1.5; text-wrap: balance; }
.call-overlay[data-state=waiting] { --call-signal: #e2b674; }
.call-overlay[data-state=waiting] .call-presence { gap: 28px; background: radial-gradient(ellipse at 50% 36%,#a16e2520,transparent 70%); }
.call-overlay[data-state=waiting] :is(.call-progress,.call-presence-brand,.call-status,.e2e-line,.call-link-motion) { display: none; }
.call-overlay[data-state=waiting] .call-orbit { width: clamp(100px,30vw,140px); color: var(--call-signal); }
.call-overlay[data-state=waiting] .call-orbit-core { opacity: 1; background: radial-gradient(circle at 35% 25%,#61452c,#252a30 75%); box-shadow: 0 0 40px #dda85a24,inset 0 1px #f2d3a136; }
.call-overlay[data-state=waiting] .call-orbit i { border: 2px dashed #e4b67260; border-top-color: #f2cf96; border-bottom-color: transparent; }
.call-overlay[data-state=waiting] .call-orbit i:nth-child(2) { border-color: transparent #e8bd7d99 transparent #e8bd7d22; }
.call-overlay[data-state=waiting] .call-presence::before { opacity: .2; }
.call-overlay[data-state=waiting] .call-presence::after { border-color: #e4b67230; }
.call-overlay:is([data-wait-reason=network],[data-wait-reason=checking]) { --call-signal: #aabaca; }
.call-overlay:is([data-wait-reason=network],[data-wait-reason=checking]) .call-waiting strong { color: #d1deea; }
@keyframes ghost-wait-search { 0% { transform: rotate(-30deg); opacity: .35; } 55% { opacity: 1; } 100% { transform: rotate(330deg); opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
    .call-overlay[data-state=waiting] .call-presence .call-orbit i { animation: ghost-wait-search 5s ease-in-out infinite; }
    .call-overlay[data-state=waiting] .call-presence .call-orbit i:nth-child(2) { animation-duration: 8s; animation-direction: reverse; }
    .call-overlay[data-state=waiting] .call-presence .call-orbit i:nth-child(3) { animation-duration: 14s; }
}
@media (max-height: 650px) {
    .call-overlay[data-state=waiting] .call-presence { gap: 18px; padding-block: 16px; }
    .call-overlay[data-state=waiting] .call-orbit { width: 76px; }
    .call-waiting p { margin: 10px 0 6px; font-size: 14px; }
    .call-waiting > span { font-size: 12px; }
}
@media (max-height: 430px) {
    .call-overlay[data-state=waiting] .call-presence { flex-direction: row; gap: 24px; }
    .call-waiting strong { font-size: 22px; }
}
body.in-conversation .ghost-link * { animation-play-state: paused !important; }

.call-stamp { font-variant-numeric: tabular-nums; }
.call-entry > .call-stamp { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 0 6px; color: var(--accent); font-size: 13px; }
.call-entry > .call-stamp .call-day { font-weight: 600; }
.call-entry > .call-stamp .call-hour { color: var(--text); font-weight: 500; }
.row-meta .call-stamp { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.row-meta .call-hour { color: var(--text); font-weight: 550; font-size: 12px; }
.org-team-lead { font-size: 16px; line-height: 1.5; margin: 8px 0 20px; color: var(--text); }
.org-benefits { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 18px; }
.org-benefits li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid #b4d7ef40; }
.org-benefits strong { font-size: 14px; font-weight: 550; }
.org-benefits span { font-size: 13px; color: var(--muted); line-height: 1.5; }
@media(prefers-reduced-motion:no-preference) {
    .ghost-link[data-checking=true] .ghost-link-track i { animation-duration: 1.1s; animation-direction: alternate; }
}

.missed-notice{display:block;width:100%;margin:0 0 16px;padding:18px 20px;border:1px solid #b2775b;border-radius:18px;background:linear-gradient(110deg,#392c29,#192c37);color:#ffd1b7;text-align:left;font-size:17px;font-weight:650;line-height:1.4}.web-fingerprint{font:600 18px/1.8 monospace;overflow-wrap:anywhere;padding:16px;border:1px solid #38505d;border-radius:16px}.web-device-row{padding:14px 0;border-top:1px solid #31434f}

.call-protocol-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:34rem;padding:0 16px;z-index:1}.call-protocol-copy strong{font-size:clamp(21px,5vw,30px);line-height:1.2;letter-spacing:-.025em;color:#d9ecf6}.call-protocol-copy span{font-size:14px;line-height:1.5;color:#adc5d2}.call-overlay[data-state=incoming]{--call-signal:#a7e4d5}.call-overlay[data-state=outgoing]{--call-signal:#b4d7ef}.call-overlay[data-state=incoming] .call-orbit::before,.call-overlay[data-state=outgoing] .call-orbit::before{content:'';position:absolute;inset:-25%;border:1px solid var(--call-signal);border-radius:50%;opacity:.25}.call-overlay[data-link=verified] .call-protocol-copy strong{color:#b0e5cf}
@media(prefers-reduced-motion:no-preference){.call-overlay[data-state=incoming] .call-orbit::before{animation:ghost-incoming-wave 2.8s ease-out infinite}.call-overlay[data-state=outgoing] .call-orbit::before{animation:ghost-outgoing-lock 4s ease-in-out infinite}.call-overlay[data-state=incoming] .call-orbit-core{animation:call-orbit-breathe 1.6s ease-in-out infinite}.call-overlay[data-state=outgoing] .call-orbit i:first-child{animation-duration:2.8s!important}.call-overlay[data-state=incoming] .call-link-motion i{animation-duration:1.4s}}
@keyframes ghost-incoming-wave{0%{transform:scale(.65);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes ghost-outgoing-lock{0%,100%{transform:scale(1);opacity:.14;border-radius:50%}50%{transform:scale(1.25) rotate(90deg);opacity:.38;border-radius:36%}}
@media(max-height:720px){.call-protocol-copy strong{font-size:19px}.call-protocol-copy span{font-size:12px}.call-protocol-copy{gap:6px}}

/* One cinematic voice preset; activity reflects local recording/playback. */
.ghost-voice-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:26px}
.ghost-voice-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.ghost-voice-head h2{margin:0;font-size:23px;letter-spacing:-.03em}.ghost-voice-head button{font-size:28px}
.ghost-voice-intro{text-align:center;font-size:19px;color:var(--text);margin:16px 0}.ghost-voice-preview{display:grid;gap:10px;margin:20px 0}.ghost-voice-preview button{width:100%;min-height:48px}.ghost-voice-preview p{min-height:42px;font-size:14px;line-height:1.5;color:var(--muted)}
.ghost-voice-orb{position:relative;display:grid;place-items:center;width:130px;height:130px;margin:20px auto;color:#b1dbef;border-radius:50%;background:radial-gradient(circle,#24475970,transparent 70%)}.ghost-voice-orb span{font-size:11px;letter-spacing:.3em}.ghost-voice-orb i{position:absolute;inset:8px;border:1px solid #b4d7ef33;border-top-color:#b4d7ef;border-radius:50%}.ghost-voice-orb i:nth-child(2){inset:19px;transform:rotate(120deg);border-color:#93d5c033;border-bottom-color:#93d5c0}
.ghost-voice-badge{margin:0;text-align:center;font-size:13px;color:#b1e2d6;letter-spacing:.04em}.ghost-voice-badge::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;background:currentColor;border-radius:50%}
@media(prefers-reduced-motion:no-preference){.ghost-voice-dialog[data-preview=recording] .ghost-voice-orb i,.ghost-voice-dialog[data-preview=playing] .ghost-voice-orb i{animation:call-orbit-turn 3s linear infinite}.ghost-voice-dialog[data-preview=recording] .ghost-voice-orb i:nth-child(2),.ghost-voice-dialog[data-preview=playing] .ghost-voice-orb i:nth-child(2){animation-direction:reverse;animation-duration:5s}}
@media(max-height:700px){.ghost-voice-orb{width:88px;height:88px;margin:10px auto}.ghost-voice-dialog{padding:18px}.ghost-voice-dialog p{margin-block:10px}}
.call-actions:has(#call_voice:not([hidden])) .call-btn{flex-basis:clamp(54px,16vw,76px);width:clamp(54px,16vw,76px)}

/* Outgoing call choices: two independent, persistent switches. */
.call-options{max-width:440px;padding:24px;}
.call-options header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.call-options h2{font-size:1.3rem;margin:0;}
#call_options_peer{font-size:1.15rem;overflow-wrap:anywhere;}
.call-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;}
.call-option strong{display:block;font-size:1.1rem;margin-bottom:6px;}
.call-option small{display:block;line-height:1.5;opacity:.75;}
.call-option input{appearance:none;-webkit-appearance:none;flex:0 0 52px;width:52px;height:30px;min-height:30px;border:1px solid #637682;border-radius:20px;background:#263844;position:relative;padding:0;margin:0;transition:background .2s;cursor:pointer;}
.call-option input:before{content:'';position:absolute;width:22px;height:22px;top:3px;left:3px;border-radius:50%;background:#c4d5dd;transition:transform .2s;}
.call-option input:checked{background:#a6d6ce;border-color:#a6d6ce;}
.call-option input:checked:before{background:#122d32;transform:translateX(22px);}
.call-option input:focus-visible{outline:2px solid #b7daf0;outline-offset:4px;}
.call-options>button{width:100%;margin:6px 0;}
.call-options .small{line-height:1.5;}
@media(prefers-reduced-motion:reduce){.call-option input,.call-option input:before{transition:none;}}

#auto_update_progress { width: 100%; height: 6px; margin: 16px 0 24px; accent-color: var(--accent, #b4d7ec); }

/* Incoming choices always share the full row; the voice choice is made in one tap. */
.call-overlay[data-state="incoming"] .call-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px;}
.call-overlay[data-state="incoming"] .call-actions .call-btn{width:100%;min-width:0;min-height:80px;aspect-ratio:auto;padding:12px 6px;font-size:12px;}
.call-btn.accept-ghost{color:#d2edff;background:#203d52;border-color:#658ca5;}

.voice-message-dialog{max-width:420px;}
.voice-message-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0;}
.voice-message-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:140px;padding:16px 10px;}
.voice-message-choices svg{width:26px;height:26px;}
.voice-message-choices span{font-size:12px;line-height:1.4;opacity:.8;}
#voice_message_cancel{width:100%;}
.record-meta{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;font-size:12px;}
.record-meta #rec_time{font-size:11px;color:var(--muted);}
.voice-card:has(.voice-message-label){flex-wrap:wrap;}
.voice-message-label{flex-basis:100%;font-size:11px;color:var(--accent);}

/* Settings support appears only when an authorized diagnostic action is available. */
.diagnostics-card:not(:has(button:not([hidden]))){display:none;}

.partner-mode form,.partner-mode #partner_mode_fields{display:grid;gap:16px}.partner-mode .org-field{display:grid;gap:8px}.partner-mode>p{margin:12px 0 20px}.partner-mode input:not([type=checkbox]){width:100%}.partner-mode .primary{width:100%}
.partner-mode .org-field{margin:0}.partner-mode .org-head button{font-size:14px;min-height:44px}.partner-mode .org-head{margin-bottom:12px}.partner-mode .org-consent{margin:0}.partner-mode #partner_mode_error:empty{display:none}

/* Hardware-backed device status, deliberately separate from network status and plan. */
.device-trust-badge{display:inline-flex;align-items:center;gap:.6rem;margin:.35rem 0;padding:.55rem .85rem;border:1px solid var(--line,#31404c);border-radius:999px;font-weight:600}
.device-trust-badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#a8b7c3}
.device-trust-card[data-level="secure"] .device-trust-badge::before,.device-trust-card[data-level="premium"] .device-trust-badge::before,.device-trust-card[data-level="standard"] .device-trust-badge::before{background:#a9dfc6;box-shadow:0 0 14px #a9dfc638}
.device-trust-card[data-level="unsupported"] .device-trust-badge::before{background:#edb684}
.device-trust-card summary{cursor:pointer;padding:.65rem 0}
.device-trust-card ul{padding-left:1.1rem;line-height:1.65}
.device-trust-card button{margin-top:.7rem;width:100%}

/* Location names lead; map mechanics and licence details stay out of the main reading flow. */
.org-place{margin:12px 0}.org-place-name{margin:0;font-size:21px;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere}.org-place-area{margin:4px 0 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.org-map-frame{position:relative;line-height:0;margin:10px 0}.org-map-frame .org-map{display:block}.org-map-info{position:absolute;right:5px;bottom:5px;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;background:#142330ed;border:1px solid #b4d7ef55;color:#eaf4fa;font:600 16px/1 serif}
.org-map-attribution{position:absolute;bottom:8px;left:8px;max-width:calc(100% - 58px);padding:5px 8px;border-radius:5px;background:#142330f5;font-size:11px;line-height:1.3;color:#eaf4fa}.org-map-attribution a{color:inherit;text-decoration:underline}.org-location-details{font-size:12px;color:var(--muted)}#organization_content .org-location-details{margin:8px 0;border:0}#organization_content .org-location-details summary{padding:8px 0;min-height:44px;font-size:12px}.org-map-controls{display:flex;gap:8px;margin:8px 0}.org-map-controls button{width:44px;padding:6px}
.org-pair-success{padding:12px 14px;margin:12px 0;border:1px solid #9bd8c455;border-radius:12px;background:#9bd8c412;color:var(--mint,#9bd8c4);font-weight:600}

.org-team-row-text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.org-team-row-text strong{overflow-wrap:anywhere}
.org-team-empty{display:flex;flex-direction:column;gap:14px;padding:22px 0}
.org-add-team{font-size:30px;font-weight:300}
.org-pair-success-inline{color:var(--mint,#9bd8c4);font-size:.85rem}

/* Local emoji tray: native glyphs, compact categories, no external assets. */
.emoji-picker{flex:none;display:flex;flex-direction:column;height:280px;max-height:42dvh;margin:0 12px 12px;padding:8px;border:1px solid var(--line);border-radius:20px;background:var(--navy);overflow:hidden}
.emoji-head{display:flex;align-items:center;justify-content:space-between;padding-left:8px;flex:none;font-size:14px;color:var(--muted)}
.emoji-head .icon-btn{width:36px;height:36px;font-size:25px}
.emoji-tabs{display:flex;gap:2px;flex:none;border-bottom:1px solid var(--line);padding-bottom:6px}
.emoji-category{flex:1;min-width:0;min-height:40px;padding:4px;border:0;background:transparent;font-size:21px;border-radius:10px}
.emoji-category[aria-pressed=true]{background:var(--glass);box-shadow:inset 0 -2px var(--accent)}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));grid-auto-rows:44px;gap:3px;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:8px 0;align-content:start}
.emoji-choice{padding:0;border:0;border-radius:10px;background:transparent;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:27px;line-height:1;min-width:0;min-height:44px}
.emoji-choice:hover,.emoji-choice:focus-visible{background:var(--glass)}
.emoji-choice:active{background:var(--line);transform:scale(.94)}
.emoji-picker p{padding:0 8px}
.composer #send{display:none}
body.has-text .composer #send{display:inline-flex}
body.has-text .composer #voice{display:none}
#web_send #web_emoji{align-self:flex-end}
.web-conversation .emoji-picker{margin:10px 0 0}
@media(prefers-reduced-motion:no-preference){.emoji-picker:not([hidden]){animation:emoji-reveal .16s ease-out}.emoji-choice{transition:transform .1s,background .1s}@keyframes emoji-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}

.emoji-modes{display:flex;gap:5px;margin:0 0 6px;flex:none}
.emoji-modes button{flex:1;min-height:32px;padding:5px;border:0;border-radius:10px;background:transparent;font-size:13px}
.emoji-modes button[aria-pressed=true]{background:var(--raised);color:var(--accent)}
.emoji-grid.sticker-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));grid-auto-rows:78px}
.sticker-choice{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;min-width:0}
.sticker-choice .ghost-sticker{width:72px;height:72px;object-fit:contain}
.bubble.sticker-bubble,.web-message.sticker-bubble{background:transparent;padding:6px;box-shadow:none}
.sticker-bubble .ghost-sticker{display:block;width:160px;height:160px;object-fit:contain}
.sticker-bubble .msg-meta{justify-content:center}

/* Animated collection: eight compact categories, explicit favorites, public pack download. */
.emoji-picker{height:350px;max-height:46dvh}
.emoji-grid.sticker-grid{grid-auto-rows:100px;grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.sticker-cell{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;border-radius:12px}
.sticker-cell:hover{background:var(--glass)}
.sticker-cell .sticker-choice{width:100%;height:70px;flex:none}
.sticker-choice .ghost-sticker{width:68px;height:68px}
.sticker-favorite{border:0;background:transparent;color:var(--muted);font-size:20px;min-height:30px;height:30px;width:100%;padding:0;line-height:1}
.sticker-favorite[aria-pressed=true]{color:var(--accent)}
.sticker-download{display:flex;align-items:center;gap:8px;flex:none;font-size:12px;color:var(--muted);padding:5px 8px}
.sticker-download span{flex:1;min-width:0}
.sticker-download progress{width:70px;height:5px;accent-color:var(--accent)}
.sticker-download button{font-size:12px;padding:6px;min-height:32px}
.emoji-picker .small{margin:4px 0;font-size:12px}

.chat-actions>button{display:block;width:100%;margin-top:10px;min-height:48px}
.archived-chats{width:100%;margin:8px 0 12px;text-align:left}
#chat_list .row{-webkit-touch-callout:none;user-select:none;touch-action:pan-y}
#group_member_select{width:100%}
#group_connect_contact{margin-bottom:14px}

/* Security center: evidence-driven architecture display, no simulated measurements. */
.security-center{max-width:640px;margin:0 auto;width:100%;padding-bottom:24px}
.security-center .section-head{justify-content:flex-start;gap:12px}
.security-center .section-head h2{font-size:clamp(20px,5.7vw,28px);margin:0}
.security-network{--signal:#9ddbcf;position:relative;overflow:hidden;padding:22px 18px;border:1px solid #49667466;border-radius:26px;background:radial-gradient(ellipse at 50% 42%,#1a414f80,transparent 65%),#0b1923;isolation:isolate}
.security-network::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#9ddbcf06 1px,transparent 1px),linear-gradient(90deg,#9ddbcf06 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.security-network-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.security-network .security-eyebrow{font-size:10px;letter-spacing:.22em;color:#b3c7d2}
.security-live-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal)}
.security-network-status{font-size:clamp(21px,6vw,30px);font-weight:650;line-height:1.25;letter-spacing:-.025em;margin:12px 0 26px;color:var(--signal)}
.security-flow-node{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #8fbdce26;background:#10232ecc;border-radius:16px}
.security-flow-node h3{margin:0;font-size:16px;line-height:1.35}
.security-flow-node p{font-size:12px;color:#a6bdc9;margin:4px 0 0;line-height:1.5}
.security-node-icon{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;color:var(--signal)}
.security-node-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4}
.security-flow-lane{height:42px;width:2px;background:#45616c55;position:relative;overflow:hidden;margin:0 auto}
.security-flow-lane i{position:absolute;top:-15px;left:0;width:2px;height:15px;background:linear-gradient(transparent,var(--signal));opacity:0}
.security-datacenter{position:relative;text-align:center;border:1px solid #8bc8db44;border-radius:22px;padding:14px 16px 18px;background:linear-gradient(150deg,#19323f99,#0e1f2aaa)}
.security-core{width:88px;height:88px;position:relative;display:grid;place-items:center;margin:0 auto 12px;color:var(--signal)}
.security-core i{position:absolute;inset:0;border:1px solid #9ddbcf25;border-left-color:var(--signal);border-radius:50%}
.security-core i:nth-child(2){inset:9px;border-left-color:transparent;border-right-color:var(--signal)}
.security-core svg{width:42px;height:42px;stroke:currentColor;stroke-width:1;fill:#9ddbcf09}
.security-datacenter h3{font-size:22px;letter-spacing:-.02em;margin:6px 0 16px}
.security-ai-node{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border-top:1px solid #91b5c126;padding-top:14px}
.security-ai-node strong{font-size:18px}.security-ai-node span{font-size:12px;color:#adc2cc;text-align:right;max-width:55%}
.security-retention{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:10px;text-align:left;font-size:11px;line-height:1.4;color:#a9d9cf}
.security-retention strong{font-weight:500}.security-retention span{border:1px solid #a9d9cf44;padding:3px 8px;border-radius:20px}
.security-flow-caption{font-size:11px;line-height:1.6;color:#98aebc;margin:16px 2px 0}
.security-facts{margin-top:18px}.security-facts .card{padding:16px;margin:10px 0;background:#11232c66}
.security-facts summary{cursor:pointer;font-size:14px;font-weight:600;min-height:44px;padding-block:10px;line-height:1.6}
.security-facts p{font-size:13px;line-height:1.65;color:#aec2cd;margin:12px 0 0}
.security-center>button{display:block;width:100%;margin-top:10px;min-height:48px}
.security-network[data-state=checking]{--signal:#dfc18d}
.security-network[data-state=offline]{--signal:#b2a9a9}
.security-network[data-state=offline] .security-core{opacity:.5}
.security-network[data-state=offline] .security-flow-lane{background:repeating-linear-gradient(transparent 0 5px,#927c7c77 5px 9px)}
.security-network[data-state=offline] .security-live-dot{box-shadow:none}
@media(prefers-reduced-motion:no-preference){
 .security-center[data-active=true] .security-network:not([data-state=offline]) .security-core i{animation:security-center-orbit 10s linear infinite}
 .security-center[data-active=true] .security-network:not([data-state=offline]) .security-core i:nth-child(2){animation-direction:reverse;animation-duration:16s}
 .security-center[data-active=true] .security-network[data-state=online] .security-flow-lane:not(.security-flow-out) i{animation:security-center-flow 2.4s linear infinite}
 .security-center[data-active=true] .security-network[data-state=online] .security-flow-lane:not(.security-flow-out) i:nth-child(2){animation-delay:-.8s}
 .security-center[data-active=true] .security-network[data-state=online] .security-flow-lane:not(.security-flow-out) i:nth-child(3){animation-delay:-1.6s}
 .security-center[data-active=true] .security-network[data-state=checking] .security-live-dot{animation:security-center-pulse 1.8s ease-in-out infinite}
 .security-center[data-active=true] .security-network{animation:security-center-reveal .45s ease-out}
 @keyframes security-center-orbit{to{transform:rotate(360deg)}}
 @keyframes security-center-flow{0%{transform:translateY(0);opacity:0}20%,80%{opacity:1}100%{transform:translateY(65px);opacity:0}}
 @keyframes security-center-pulse{50%{opacity:.3}}
 @keyframes security-center-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
.motion-paused .security-center *,.call-visible .security-center *{animation-play-state:paused!important}

.security-device .security-local-encryption{display:flex;align-items:flex-start;gap:6px;color:#a9d9cf;font-weight:600;line-height:1.5;margin:7px 0 4px}
.security-local-encryption svg{width:14px;height:16px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:1.6}
.security-device>div{min-width:0}

/* Trust center: local protection, private inference, contact protection. */
.security-network .security-eyebrow{margin:0}
.security-device{gap:12px;padding:16px 12px;align-items:center}
.security-device-copy{flex:1;min-width:0}
.security-device-orbit{position:relative;width:68px;height:84px;flex:0 0 68px;display:grid;place-items:center;color:#a9d9cf}
.security-device-orbit i{position:absolute;inset:5px 0;border:1px solid #a9d9cf25;border-radius:50%;border-top-color:#a9d9cf}
.security-device-orbit i:nth-child(2){inset:0 7px;border-top-color:transparent;border-bottom-color:#91c9e5}
.security-device-orbit span{position:absolute;inset:17px 9px;border-radius:50%;background:radial-gradient(#8fdfcc24,transparent 70%)}
.security-device-orbit svg{width:34px;height:42px;fill:#9ddbcf08;stroke:currentColor;stroke-width:1.2;z-index:1}
.security-device[data-protection=app] .security-device-orbit{color:#b4d7ef}
.security-device[data-protection=app] .security-device-orbit i{border-top-color:#b4d7ef}
.security-hardware{display:block;font-size:12px;font-weight:500;line-height:1.6;color:#cae4eb}
.security-small-badge{display:inline-block;border:1px solid #a9d9cf33;color:#a9d9cf;font-size:10px;border-radius:20px;padding:3px 8px;margin-top:8px}
.security-datacenter .security-core{width:72px;height:72px;margin-bottom:10px}
.security-ai-node{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.security-ai-node strong{font-size:20px}.security-ai-node span{max-width:none;text-align:center;font-size:12px;letter-spacing:.025em}
.security-trust-grid{display:grid;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px;text-align:center}
.security-trust-card{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 4px;background:linear-gradient(155deg,#1f414d88,#0b1b2544);border:1px solid #a9d9cf30;border-radius:12px}
.security-trust-card svg{height:23px;width:23px;fill:#a9d9cf0d;stroke:#a9d9cf;stroke-width:1.4;flex-shrink:0}
.security-trust-card strong{font-size:11px;font-weight:500;line-height:1.45;color:#d0e6e6;overflow-wrap:anywhere;hyphens:auto}
.security-contacts{padding:16px;border:1px solid #8fbdce26;border-radius:18px;background:#10232e99}
.security-contacts-heading{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.security-contacts-heading h3{font-size:17px;margin:0}
.security-contact-orbit{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px}
.security-contact-orbit i{position:absolute;inset:0;border:1px solid #a9d9cf25;border-left-color:#a9d9cf;border-radius:50%}
.security-contact-orbit svg{width:24px;height:24px;stroke:#a9d9cf;fill:#a9d9cf0b;stroke-width:1.3}
.security-contact-factors{display:grid;gap:10px}
.security-contact-factors span{display:flex;align-items:center;gap:9px;font-size:12px;color:#c9e0e5;line-height:1.5}
.security-contact-factors svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:#a9d9cf;stroke-width:1.5}
@media(prefers-reduced-motion:no-preference){
 .security-center[data-active=true] .security-device-orbit i{animation:security-center-orbit 9s linear infinite}
 .security-center[data-active=true] .security-device-orbit i:nth-child(2){animation-direction:reverse;animation-duration:14s}
 .security-center[data-active=true] .security-device-orbit span{animation:security-center-glow 4s ease-in-out infinite}
 .security-center[data-active=true] .security-contact-orbit i{animation:security-center-orbit 15s linear infinite}
 .security-center[data-active=true] .security-trust-card svg{animation:security-center-glow 5s ease-in-out infinite}
 .security-center[data-active=true] .security-trust-card:nth-child(2) svg{animation-delay:-1.7s}
 .security-center[data-active=true] .security-trust-card:nth-child(3) svg{animation-delay:-3.4s}
 @keyframes security-center-glow{50%{opacity:.6;transform:scale(.94)}}
}

/* Browser approval: keep comparison, optional history and PIN readable on small phones. */
#web_devices_dialog .pair-body { gap: 12px; }
#web_devices_dialog .pair-body > p { margin-block: 0; }
#web_devices_dialog .org-consent { margin: 0; padding: 12px; font-size: 14px; }
#web_devices_dialog .org-field { margin: 0; }
#web_devices_dialog .org-head button { font-size: 14px; min-height: 44px; }
#web_devices_dialog .web-fingerprint { font-size: 16px; }

.self-chat-shortcut { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; margin:12px 0; padding:12px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(110deg,#b4d7ef0d,#a7ddd305); color:var(--text); text-align:start; font-size:14px; }
.self-chat-shortcut > span:first-child { font-size:22px; color:var(--accent); }

.self-chat-error:empty { display:none; }
#fail_detail { overflow-wrap:anywhere; }

/* Team dashboard: shared location overview, with explicit freshness states. */
#organization_team>.product-guide{margin:0 0 22px}.team-overview{margin:20px 0 10px;min-width:0}.team-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.team-stats>div{padding:12px 6px;text-align:center;background:#0b152066;border:1px solid var(--line);border-radius:14px;min-width:0}.team-stats strong{display:block;font-size:26px;font-weight:500;color:var(--accent)}.team-stats span{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere;color:var(--muted)}.team-map-frame{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0b1520;isolation:isolate}.team-map-frame canvas{display:block;width:100%;height:auto}.team-map-markers{position:absolute;inset:0}.team-map-marker{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;padding:4px;border-radius:50%;background:#b4d7ef;color:#082433;border:3px solid #fff;box-shadow:0 2px 16px #0008;font-size:13px;font-weight:650}.team-map-marker[data-state=stale]{background:#f0cf93;color:#302412}.team-map-marker[data-state=mock]{background:#ffacac;color:#391717}.team-map-credit{position:absolute;bottom:0;left:0;max-width:100%;background:#10202de8;padding:3px 7px;font-size:10px;color:#dce9ed}.team-map-controls{display:flex;gap:8px;margin:10px 0}.team-map-controls button{min-width:44px;min-height:44px;padding:8px}.team-map-controls button:last-child{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}.team-map-legend{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0}.team-map-selection{display:flex;flex-wrap:wrap;gap:8px}.team-map-selection button{flex:1 1 160px;white-space:normal;overflow-wrap:anywhere}.team-device-online{font-size:13px;color:var(--muted)}.team-device-online[data-online=true]{color:#a7ddcd}.team-device-seen{font-variant-numeric:tabular-nums;color:var(--text)}.org-device>button{max-width:100%;white-space:normal;overflow-wrap:anywhere}.org-member h3{overflow-wrap:anywhere;min-width:0}.org-device{margin-top:12px}.org-role{max-width:100%;overflow-wrap:anywhere}
@media(prefers-reduced-motion:no-preference){.team-device-online[data-online=true]::before{content:'●';display:inline-block;margin-right:7px;animation:team-online-glow 3s ease-in-out infinite}@keyframes team-online-glow{50%{opacity:.45}}}
.team-dashboard-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:18px 0 10px}.team-dashboard-actions>button{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:13px}.team-dashboard-actions>button:first-child{grid-column:1/-1}
.team-map-marker{--marker-color:#b4d7ef}.team-map-marker[data-state=stale]{--marker-color:#f0cf93}.team-map-marker[data-state=mock]{--marker-color:#ffacac}.team-map-marker:is(:hover,:active):not(:disabled){background-color:var(--marker-color);border-color:#fff}.team-map-marker:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}

/* One compact toolbar per screen; everyday lists lead with their content. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.app-head { grid-template-columns: minmax(0,1fr) auto 44px; gap: 0 2px; padding: 8px 12px 0; background: var(--navy); }
.app-head::after { display: none; }
.app-screen-heading { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 44px; }
#app_screen_title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; text-wrap: nowrap; }
.app-header-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; }
.app-header-actions .message-actions, .team-actions { display: flex; gap: 0; }
.app-menu { grid-column: 3; }
.app-head .icon-btn { color: var(--text); }
.app-head .ghost-link { position: relative; min-height: 2px; height: auto; padding: 0; margin: 7px 0 0; }
.app-head .ghost-link-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.app-head .ghost-link-track { position: absolute; inset: auto 0 0; height: 2px; border-radius: 0; background: var(--line); opacity: .65; }
.app-head .ghost-link-track::before, .app-head .ghost-link-track i { top: 0; }
.app-head .ghost-link:is([data-state=offline],[data-state=reconnecting]) .ghost-link-label { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; display: block; padding: 2px 0 9px; margin: 0; font-size: .75rem; line-height: 1.45; }
.app-head #ghost_link_status { text-align: left; }
body.in-ai .app-screen-heading, body.in-ai .app-header-actions { display: none; }
body.in-ai .app-head { grid-template-columns: minmax(0,1fr) 44px; }
body.in-ai .app-menu { grid-column: 2; }
.panes { padding: 12px 12px 20px; }
#messages_search { min-height: 44px; padding: 9px 14px; border: 0; border-radius: 15px; font-size: .875rem; background: #15232e; }
.messages-search { display: flex; align-items: center; min-width: 0; border-radius: 18px; background: #15232e; box-shadow: inset 0 0 0 1px #b4d7ef09; }
.messages-search:focus-within { box-shadow: inset 0 0 0 1px #b4d7ef66; }
.messages-search #messages_search { flex: 1; width: 0; min-width: 0; background: transparent; outline: none; }
.messages-ai-open { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 10px; margin-inline-end: 3px; border: 0; border-radius: 50%; color: var(--accent); background: transparent; }
.messages-ai-open svg { width: 23px; height: 23px; }
.messages-ai-ask { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 5px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--accent); text-align: start; font-size: .875rem; }
.messages-ai-ask span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.messages-ai-ask svg { width: 21px; height: 21px; flex-shrink: 0; }
.messages-ai-ask:hover, .messages-ai-ask:focus-visible { background: #b4d7ef0b; }
.ai-view { position: relative; }
.messages-ai-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--navy); color: var(--muted); text-align: center; }
.messages-ai-loading svg { width: 42px; height: 42px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .messages-ai-open:active svg { animation: messages-ai-open .35s ease-out; } .messages-ai-loading svg { animation: messages-ai-breathe 1.6s ease-in-out infinite alternate; } }
@keyframes messages-ai-open { from { transform: scale(.8) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
@keyframes messages-ai-breathe { from { opacity: .45; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
.message-filters { display: flex; gap: 6px; margin: 8px 0 4px; padding: 0 0 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.message-filters button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 13px; font-size: .8125rem; line-height: 1.3; white-space: nowrap; border-color: transparent; background: #14232f; }
.message-filters button[aria-pressed=true] { background: #28404e; border-color: transparent; color: #d6ebe9; }
.message-filters button[aria-pressed=true]:active { background: #345263; }
.archived-chats { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; text-align: left; font-size: .875rem; }
.archived-chats svg { width: 22px; height: 22px; color: var(--muted); }
#archived_chats_label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
#archived_chats_count { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.archived-chats[data-active=true] { color: var(--accent); }
.self-chat-shortcut { min-height: 48px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; font-size: .875rem; }
#pane_chats .list > .row { padding: 13px 2px; gap: 12px; }
#pane_chats .row-text { gap: 3px; }
.org-team-list > .org-team-row { padding: 16px 2px; min-height: 80px; }
.org-team-row-text { gap: 3px; }
.org-team-row-text strong { font-size: 1rem; line-height: 1.4; }
.org-team-empty { align-items: center; text-align: center; gap: 12px; max-width: 400px; margin: 0 auto; padding: 38px 8px 20px; }
.org-team-empty h2 { font-size: 1.25rem; line-height: 1.3; }
.org-team-empty > p { font-size: .875rem; line-height: 1.55; }
.org-team-empty .org-create { margin-top: 8px; }
.org-team-empty-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 22px; color: #b6d7df; background: #1a2e3b; }
.org-team-empty-mark svg { width: 30px; height: 30px; }
@media (min-width: 600px) { .app-head { padding-inline: 22px; } .panes { padding-inline: 22px; } }