:root {
  color-scheme: light dark;
  --font: "Slack-Lato", Lato, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: var(--font);
  --brand: #356859;
  --brand-deep: #285247;
  --brand-container: #dcece6;
  --on-brand: #fff;
  --aubergine: #22211e;
  --aubergine-deep: #171613;
  --aubergine-hover: #d9d5ca;
  --sidebar: #f3f1ea;
  --sidebar-hover: #ebe8df;
  --sidebar-active: #e4e1d7;
  --ink: #22211e;
  --muted: #6c6961;
  --faint: #918d83;
  --line: #e4e1d7;
  --line-strong: #ccc7bb;
  --surface: #fbfaf9;
  --surface-raised: #fff;
  --surface-soft: #f2f0e9;
  --surface-hover: #f5f3ed;
  --state-hover: #f1efe9;
  --state-pressed: #e7e3da;
  --state-selected: #e9e5db;
  --focus-ring: #57534b;
  --focus-halo: rgb(87 83 75 / .18);
  --scrim: rgb(24 23 20 / .48);
  --link: #34312c;
  --success: #22211e;
  --danger: #a33b38;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--surface); color: var(--ink); font-family: var(--font); overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
button:disabled { cursor: default; opacity: .4; }
button:active:not(:disabled) { background-color: var(--state-pressed); }
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; min-height: 48px; display: flex; align-items: center; transform: translateY(-160%); padding: 10px 14px; border-radius: 5px; color: #fff; background: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }

.login-view { min-height: 100%; display: grid; place-items: center; overflow-y: auto; padding: 32px 24px; background: linear-gradient(180deg, #f2f7f5 0, var(--surface) 44%); }
.card { background: transparent; box-shadow: none; }
.login-card { width: min(400px, 100%); display: grid; gap: 16px; padding: 28px; border: 1px solid rgb(53 104 89 / .12); border-radius: 24px; background: var(--surface-raised); box-shadow: 0 20px 60px rgb(53 104 89 / .10); }
.login-card .brand-mark { justify-self: center; }
.login-card h1 { margin: 6px 0 -6px; text-align: center; font-size: 28px; line-height: 1.2; letter-spacing: -.45px; }
.login-card > p { margin: 0 0 4px; color: var(--muted); text-align: center; font-size: 15px; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: var(--on-brand); background: var(--brand); font-size: 27px; font-weight: 750; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
label { display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
.dialog-card label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.dialog-card input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; accent-color: var(--brand); }
.history-load { display: block; min-height: 48px; margin: 8px auto; padding: 8px 18px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface-soft); }
#actionDialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
#actionHistory { padding-left: 20px; overflow-wrap: anywhere; }
input, textarea, select { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 10px 12px; outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo); }
textarea { resize: none; }
textarea::-webkit-scrollbar { width: 0; height: 0; }
button.primary { min-height: 48px; border-radius: 12px; color: var(--on-brand); background: var(--brand); font-weight: 700; }
button.primary:hover { background: var(--brand-deep); }
button.primary:active:not(:disabled) { background: var(--brand-deep); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 54px; }
.password-field button { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); background: transparent; }
.password-field button:active:not(:disabled) { color: var(--brand); background: var(--brand-container); }
.password-field svg { width: 21px; height: 21px; }
.login-advanced { color: var(--muted); }
.login-advanced summary { width: fit-content; min-height: 48px; display: flex; align-items: center; padding: 0 4px; color: var(--brand); cursor: pointer; font-size: 13px; font-weight: 700; }
.login-advanced[open] { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-soft); }
.login-advanced p { margin: 0; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.45; }
.error { min-height: 18px; color: var(--danger); font-size: 13px; white-space: pre-wrap; }

.app-shell { height: var(--app-height, 100dvh); display: grid; grid-template: 40px minmax(0, 1fr) / 64px 260px minmax(0, 1fr); overflow: hidden; background: var(--sidebar); }

.topbar { grid-area: 1 / 1 / 2 / -1; z-index: 10; display: grid; grid-template-columns: 170px minmax(240px, 640px) 170px; justify-content: center; align-items: center; gap: 12px; padding: 0 12px; color: #fff; background: var(--aubergine); }
.window-controls { position: absolute; left: 13px; display: flex; gap: 8px; }
.window-controls i { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.history-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; color: rgb(255 255 255 / .8); }
.history-controls svg { width: 20px; height: 20px; }
.global-search { position: relative; display: flex; align-items: center; gap: 0; color: #fff; font-weight: 400; }
.global-search svg { position: absolute; left: 12px; z-index: 1; width: 16px; height: 16px; pointer-events: none; }
.global-search input { height: 28px; min-height: 28px; padding: 4px 36px; border: 1px solid rgb(255 255 255 / .18); border-radius: 6px; color: #fff; background: rgb(255 255 255 / .18); box-shadow: none; font-size: 13px; text-align: center; }
.global-search input::placeholder { color: rgb(255 255 255 / .88); }
.global-search input:focus { border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .25); box-shadow: none; text-align: left; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-actions span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; }
.topbar-actions svg { width: 19px; height: 19px; }
.topbar-actions .top-create { border: 1px solid rgb(255 255 255 / .55); }

.primary-nav { grid-area: 2 / 1 / 3 / 2; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 5px 10px; color: #fff; background: var(--aubergine); }
.workspace-tile { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 9px; color: var(--aubergine); background: #fff; font-size: 20px; font-weight: 800; }
.primary-nav-item { position: relative; width: 54px; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px; border-radius: 7px; color: rgb(255 255 255 / .82); background: transparent; }
.primary-nav-item:hover { color: #fff; background: rgb(255 255 255 / .1); }
.primary-nav-item.active { color: var(--ink); background: var(--state-selected); box-shadow: inset 2px 0 0 var(--ink); }
.primary-nav-item svg { width: 21px; height: 21px; }
.primary-nav-item span { font-size: 10px; font-weight: 700; line-height: 1.1; }
.primary-nav-item b { position: absolute; top: 2px; right: 4px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--aubergine); border-radius: 999px; color: var(--aubergine); background: #fff; font-size: 9px; }
.primary-nav-spacer { flex: 1; }
.nav-compose { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .17); }
.nav-compose:hover { background: rgb(255 255 255 / .25); }
.nav-compose svg { width: 20px; height: 20px; }
.nav-avatar { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #49234b; background: #f7c5d8; font-size: 12px; font-weight: 800; }
.nav-avatar i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--aubergine); border-radius: 50%; background: #2bac76; }

.sidebar { grid-area: 2 / 2 / 3 / 3; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; color: var(--ink); background: var(--sidebar); border-radius: 8px 0 0 0; }
.sidebar-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 16px; border-bottom: 1px solid rgb(74 21 75 / .12); }
.sidebar-brand { min-width: 0; display: flex; align-items: center; gap: 8px; }
.sidebar-brand-copy { min-width: 0; display: grid; gap: 0; }
.sidebar-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 900; letter-spacing: -.2px; }
.sidebar-brand small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.icon-button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; padding: 0; border-radius: 7px; color: inherit; background: transparent; }
.icon-button:hover { background: rgb(29 28 29 / .08); }
.icon-button svg { width: 20px; height: 20px; }
.mobile-search, .sidebar-shortcuts { display: none; }
.sidebar-pages { display: grid; gap: 1px; padding: 8px 8px 6px; }
.sidebar-pages button { min-height: 29px; display: flex; align-items: center; gap: 10px; padding: 3px 9px; border-radius: 5px; color: #4a374b; background: transparent; text-align: left; font-size: 14px; }
.sidebar-pages button:hover { background: var(--sidebar-hover); }
.sidebar-pages svg { width: 18px; height: 18px; opacity: .72; }
.channels-heading { min-height: 38px; display: flex; align-items: center; padding: 7px 16px 3px; color: #4a374b; font-size: 14px; font-weight: 750; }
.room-list { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1px 8px 10px; scrollbar-width: thin; scrollbar-color: rgb(74 21 75 / .25) transparent; }
.room-item { width: 100%; min-height: 29px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 1px 0; padding: 3px 8px; border-radius: 5px; color: #4a374b; text-align: left; background: transparent; }
.room-item:hover { background: var(--sidebar-hover); }
.room-item.active { color: var(--ink); background: var(--state-selected); box-shadow: inset 2px 0 0 var(--ink); }
.room-avatar { width: 18px; height: 18px; display: grid; place-items: center; color: inherit; background: transparent; font-size: 0; font-weight: 500; }
.room-avatar::after { content: "#"; font-size: 17px; font-weight: 400; }
.room-copy { min-width: 0; display: block; }
.room-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.room-copy small { display: none; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.35; }
.unread { min-width: 19px; height: 17px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--aubergine); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.room-item.active .unread { color: var(--sidebar-active); background: #fff; }
.sidebar-footer { display: flex; gap: 4px; padding: 6px 8px 8px; border-top: 1px solid rgb(74 21 75 / .1); }
.sidebar-footer button { flex: 1; min-height: 30px; padding: 3px 8px; border-radius: 5px; color: #624f63; background: transparent; font-size: 11px; }
.sidebar-footer button:hover { background: var(--sidebar-hover); }

.chat { position: relative; grid-area: 2 / 3 / 3 / 4; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; background: #fff; }
.chat-header { z-index: 2; border-bottom: 1px solid var(--line); background: #fff; }
.channel-row { min-height: 49px; display: flex; align-items: center; gap: 8px; padding: 5px 12px 4px 16px; }
.chat-avatar { display: none; }
.chat-heading { min-width: 0; flex: 1; display: grid; gap: 0; }
.chat-heading strong { min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 900; letter-spacing: -.35px; }
.chat-heading strong > svg { width: 15px; height: 15px; margin-left: 1px; }
.channel-prefix { margin-right: 1px; font-weight: 500; }
.chat-heading small { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.connection-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #9b9a9b; }
.chat-heading small.connected .connection-dot { background: #2bac76; }
.chat-heading small.reconnecting .connection-dot { background: #e8912d; }
.channel-actions { display: flex; align-items: center; gap: 4px; }
.channel-actions button { min-width: 36px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: #454245; background: #fff; }
.channel-actions button:hover { background: var(--surface-hover); }
.channel-actions svg { width: 18px; height: 18px; }
.channel-actions span { font-size: 12px; font-weight: 700; }
.channel-tabs { height: 34px; display: flex; align-items: end; gap: 4px; padding: 0 13px; }
.channel-tabs button { position: relative; min-height: 32px; padding: 4px 8px 8px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; }
.channel-tabs button:hover { color: var(--ink); }
.channel-tabs button.active { color: var(--ink); background: transparent; }
.channel-tabs button.active::after { content: ""; position: absolute; right: 7px; bottom: 0; left: 7px; height: 3px; border-radius: 3px 3px 0 0; background: var(--aubergine); }

.timeline { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 8px 0 4px; scroll-behavior: smooth; background: #fff; }
.timeline:focus { outline: 0; }
.empty-state { min-height: 100%; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; color: var(--muted); }
.empty-channel-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 12px; color: #fff; background: var(--aubergine); font-size: 30px; font-weight: 700; }
.empty-state h2 { margin: 0; color: var(--ink); font-size: 22px; }
.empty-state p { max-width: 430px; margin: 7px 0 0; font-size: 14px; line-height: 1.5; }
.day-separator { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; margin: 14px 0 11px; color: var(--ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.day-separator::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--line); }
.day-separator span { position: relative; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.message { position: relative; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px 20px; }
.message:hover { background: var(--surface-hover); }
.message.compact { padding-top: 2px; padding-bottom: 2px; }
.message.compact .message-avatar { visibility: hidden; }
.message.compact .message-meta { display: none; }
.message.compact::before { content: attr(data-short-time); position: absolute; left: 20px; top: 4px; width: 40px; color: var(--muted); opacity: 0; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.message.compact:hover::before { opacity: 1; }
.message-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #fff; background: #725375; font-size: 11px; font-weight: 800; letter-spacing: -.3px; }
.message-main { min-width: 0; max-width: 100%; }
.message-meta { min-height: 20px; display: flex; align-items: baseline; gap: 7px; }
.message-sender { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; line-height: 1.25; }
.message-sender:hover { text-decoration: underline; }
.message-time { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.message-body { color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-body a { color: var(--link); text-decoration: none; }
.message-body a:hover { text-decoration: underline; }
.message-body .edited-label { margin-left: 5px; color: var(--muted); font-size: 11px; }
.message.redacted .message-body { color: var(--muted); font-style: italic; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction-pill, .thread-summary { min-height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #d6d6d6; border-radius: 999px; color: var(--ink); background: #fff; font-size: 12px; }
.reaction-pill:hover, .thread-summary:hover { border-color: #8f8f8f; background: #f7f7f7; }
.reaction-pill.mine { border-color: var(--ink); color: var(--ink); background: var(--state-selected); box-shadow: inset 0 0 0 1px rgb(34 33 30 / .08); }
.thread-summary { margin-top: 5px; border-color: transparent; border-radius: 4px; color: var(--link); font-weight: 700; }
.thread-summary svg { width: 16px; height: 16px; }
.agent-run { max-width: 560px; margin-top: 6px; border-left: 2px solid #8f5897; color: var(--muted); font-size: 11px; }
.agent-run summary { display: flex; align-items: center; gap: 7px; padding: 2px 0 2px 8px; cursor: pointer; list-style: none; }
.agent-run summary::-webkit-details-marker { display: none; }
.agent-run summary span { color: #5b285f; font-weight: 800; }
.agent-run summary small { color: var(--muted); }
.agent-run > div { display: grid; gap: 2px; padding: 3px 8px 5px; }
.agent-run p { margin: 0; color: var(--ink); line-height: 1.4; }
.agent-run > div small { color: var(--muted); }
.message-actions { position: absolute; top: -14px; right: 18px; display: none; align-items: center; padding: 2px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
.message:hover .message-actions { display: flex; }
.message-actions button { width: 31px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 4px; color: var(--muted); background: transparent; }
.message-actions button:hover { color: var(--ink); background: #f1f1f1; }
.message-actions svg { width: 17px; height: 17px; }
.attachment { max-width: min(520px, 100%); margin-top: 7px; display: inline-flex; align-items: center; gap: 9px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .03); }
.attachment button { min-height: 34px; overflow: hidden; border-radius: 4px; color: var(--link); background: #f8f8f8; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.attachment img { max-width: min(440px, 64vw); max-height: 420px; display: block; border-radius: 6px; }
.attachment audio { max-width: min(440px, 64vw); }
.attachment video { max-width: min(440px, 64vw); max-height: 420px; display: block; border-radius: 6px; }
.attachment.inline-media { width: min(440px, 100%); display: block; padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.attachment.inline-media audio, .attachment.inline-media video { width: 100%; max-width: 100%; }
.attachment.inline-media video { max-height: min(460px, 62dvh); border-radius: 12px; background: #111; }
.inline-media-status { min-height: 48px; display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; }
.attachment.inline-media .inline-media-status + button { min-width: 72px; min-height: 48px; margin-left: 8px; border-radius: 10px; }
.room-avatar.direct-avatar { font-size: 12px; }
.room-avatar.direct-avatar::after { content: none; }

.composer { min-width: 0; display: grid; grid-template-rows: 33px auto 36px; margin: 8px 20px 18px; border: 1px solid #868686; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .03); }
.composer:focus-within { border-color: #616061; box-shadow: 0 0 0 1px #616061; }
.composer-format { display: flex; align-items: center; gap: 1px; padding: 4px 7px 0; color: var(--muted); }
.composer-format button, .composer-actions button { width: 30px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 4px; color: inherit; background: transparent; }
.composer-format button:hover, .composer-actions button:hover { color: var(--ink); background: #f1f1f1; }
.composer-format button > svg, .composer-actions button > svg { width: 18px; height: 18px; }
.composer-format button { font-size: 14px; }
.composer-format i { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.composer textarea { min-height: 38px; max-height: 150px; padding: 7px 12px; border: 0; border-radius: 0; background: transparent; color: var(--ink); line-height: 1.4; }
.composer textarea:focus { box-shadow: none; }
.composer textarea::placeholder { color: var(--muted); }
.typing-state { min-height: 18px; padding: 0 25px 2px; color: var(--muted); font-size: 11px; }
.typing-state:empty { display: none; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 5px; }
.composer-actions { display: flex; align-items: center; gap: 1px; color: var(--muted); }
.composer-actions .attach-button { border-radius: 50%; color: #454245; background: #f2f2f2; }
.composer-actions .attach-button:hover { background: #e8e8e8; }
.mobile-format-trigger { display: none !important; }
.mobile-more-action { display: none !important; }
.composer-actions button span { font-size: 14px; font-weight: 700; }
.send-button { width: 34px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 4px; color: #fff; background: var(--success); }
.send-button:not(:disabled):hover { background: #006b4f; }
.send-button:disabled { color: #9e9e9e; background: transparent; opacity: 1; }
.send-button svg { width: 18px; height: 18px; fill: currentColor; stroke: none; transform: translateX(1px); }

.thread-panel { position: absolute; inset: 0 0 0 auto; z-index: 8; width: min(390px, 48%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-left: 1px solid var(--line); background: #fff; box-shadow: -5px 0 16px rgb(0 0 0 / .08); }
.thread-panel[hidden] { display: none; }
.thread-panel > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--line); }
.thread-panel > header div { min-width: 0; display: grid; }
.thread-panel > header strong { font-size: 18px; }
.thread-panel > header small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.thread-panel > header button, .dialog-close { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 25px; }
.thread-panel > header button:hover, .dialog-close:hover { color: var(--ink); background: var(--state-hover); }
.thread-timeline { min-height: 0; overflow-y: auto; padding: 8px 0; }
.thread-timeline .message { grid-template-columns: 36px minmax(0, 1fr); padding: 7px 14px; }
.thread-timeline .message-avatar { width: 34px; height: 34px; }
.thread-timeline .message-actions { display: none !important; }
.thread-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 10px 12px; border-top: 1px solid var(--line); }
.thread-composer textarea { min-height: 44px; max-height: 120px; }
.thread-composer button { min-width: 64px; border-radius: 5px; color: #fff; background: var(--success); font-weight: 700; }

.collection-view { grid-area: 2 / 3 / 3 / 4; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: #fff; }
.collection-view[hidden] { display: none; }
.collection-header { min-height: 83px; display: flex; align-items: center; gap: 8px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.collection-header h1 { margin: 0; font-size: 22px; letter-spacing: -.4px; }
.collection-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.collection-view.room-subview .collection-header > .mobile-only { display: grid; }
.collection-content { min-height: 0; overflow-y: auto; padding: 18px clamp(18px, 4vw, 52px) 34px; }
.collection-empty { min-height: 60%; display: grid; place-content: center; justify-items: center; padding: 24px; color: var(--muted); text-align: center; }
.collection-empty svg { width: 42px; height: 42px; margin-bottom: 12px; color: #7a617b; }
.collection-empty h2 { margin: 0; color: var(--ink); font-size: 20px; }
.collection-empty p { max-width: 420px; margin: 7px 0 0; line-height: 1.5; }
.collection-list { max-width: 920px; display: grid; gap: 1px; margin: 0 auto; }
.collection-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 10px; border-bottom: 1px solid #ededed; color: var(--ink); background: #fff; text-align: left; }
.collection-item:hover { background: #f8f8f8; }
.collection-item-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #725375; font-size: 11px; font-weight: 800; }
.collection-item-main { min-width: 0; display: grid; gap: 3px; }
.collection-item-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.collection-item-title strong { font-size: 15px; }
.collection-item-title small, .collection-item-meta { color: var(--muted); font-size: 11px; }
.collection-item-body { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.collection-item-end { color: var(--muted); font-size: 12px; }
.settings-heading { max-width: 920px; margin: 20px auto 6px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .04em; }
.settings-heading:first-child { margin-top: 0; }
.settings-list { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.settings-list .collection-item { min-height: 64px; padding: 10px 12px; border-bottom-color: var(--line); background: transparent; }
.settings-list .collection-item:last-child { border-bottom: 0; }
.setting-icon { display: grid; place-items: center; border-radius: 10px !important; color: var(--brand) !important; background: var(--brand-container) !important; }
.setting-icon svg { width: 20px; height: 20px; }
.setting-arrow { align-self: center; color: var(--muted); font-size: 22px; }
.danger-setting .collection-item-title strong, .danger-setting .setting-icon { color: var(--danger) !important; }
.danger-setting .setting-icon { background: #fbefed !important; }
.collection-toolbar { max-width: 920px; display: flex; align-items: center; gap: 8px; margin: 0 auto 12px; }
.collection-toolbar input { flex: 1; min-height: 40px; }
.collection-toolbar button { min-height: 40px; padding: 6px 13px; border-radius: 5px; color: #fff; background: var(--aubergine); font-weight: 700; }
.knowledge-toolbar { max-width: 920px; display: grid; grid-template-columns: minmax(220px, 1fr) 180px 48px; gap: 8px; margin: 0 auto 12px; }
.knowledge-toolbar input, .knowledge-toolbar select { min-height: 48px; background: #fff; }
.knowledge-refresh { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: transparent; }
.knowledge-refresh:hover { background: var(--surface-hover); }
.knowledge-refresh svg { width: 18px; height: 18px; }
.knowledge-results { max-width: 920px; margin: 0 auto; }
.knowledge-summary-line { min-height: 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 8px; color: var(--muted); font-size: 12px; }
.knowledge-summary-line strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.knowledge-list { border-top: 1px solid var(--line); }
.knowledge-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 24px; align-items: start; gap: 11px; padding: 15px 6px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.knowledge-item:hover { background: var(--surface-hover); }
.knowledge-source-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #f1efe8; font-size: 10px; font-weight: 800; }
.knowledge-item-main { min-width: 0; display: grid; gap: 5px; }
.knowledge-item-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; color: var(--muted); }
.knowledge-item-meta b { color: var(--ink); font-size: 11px; }
.knowledge-item-meta small { font-size: 10px; }
.knowledge-item-title { overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-item-summary { overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.knowledge-tags { min-height: 20px; display: flex; flex-wrap: wrap; gap: 5px; }
.knowledge-tags i { padding: 3px 8px; border: 0; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-style: normal; font-size: 11px; line-height: 1.45; }
.knowledge-tags i.ai { color: #12633c; border-color: #b7d9c6; background: #effaf3; }
.knowledge-tags i.review { color: #80540d; border-color: #e4cea6; background: #fff9ec; }
.knowledge-item-arrow { padding-top: 10px; color: var(--muted); font-size: 22px; line-height: 1; }
.knowledge-dialog-card { width: min(700px, calc(100vw - 28px)); max-height: min(800px, calc(100dvh - 28px)); overflow-y: auto; }
.knowledge-dialog-summary { margin: -4px 0 0; color: var(--ink); font-size: 16px; line-height: 1.65; }
.knowledge-key-points { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.knowledge-key-points h3 { margin: 0 0 8px; font-size: 14px; }
.knowledge-key-points ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.knowledge-source-link, .knowledge-evidence-button { width: fit-content; min-height: 48px; display: inline-flex; align-items: center; justify-self: start; padding: 7px 0; color: var(--ink); background: transparent; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; font-weight: 700; }
.knowledge-evidence { max-height: 280px; margin: 0; overflow: auto; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--ink); white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.55; }
.knowledge-classification-form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr); gap: 12px; padding-top: 15px; border-top: 1px solid var(--line); }
.knowledge-classification-form .error, .knowledge-classification-form .dialog-actions { grid-column: 1 / -1; }
.knowledge-classification-form .dialog-actions button { min-height: 48px; }
.knowledge-organize { border-top: 1px solid var(--line); }
.knowledge-organize > summary { min-height: 48px; display: flex; align-items: center; color: var(--brand); cursor: pointer; font-size: 14px; font-weight: 700; }
.knowledge-organize[open] > summary { margin-bottom: 12px; }
.canvas-form { max-width: 820px; display: grid; gap: 12px; margin: 0 auto; }
.canvas-form textarea { min-height: min(58vh, 580px); padding: 18px; line-height: 1.55; }
.canvas-form footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.canvas-form button { min-width: 100px; min-height: 42px; border-radius: 5px; color: #fff; background: var(--success); font-weight: 700; }

dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(1.5px); }
.dialog-card { width: min(500px, calc(100vw - 28px)); display: grid; gap: 17px; padding: 24px 28px; border: 1px solid rgb(34 33 30 / .08); border-radius: 16px; background: var(--surface-raised); box-shadow: 0 20px 56px rgb(24 23 20 / .18); }
.dialog-card h2 { margin: 0; font-size: 22px; letter-spacing: -.3px; }
.dialog-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-title-row h2 { margin: 0; }
.dialog-title-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-actions button { min-width: 86px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--state-hover); font-weight: 700; }
.dialog-actions .primary { color: var(--on-brand); background: var(--brand); }
.compact-dialog-card { width: min(420px, calc(100vw - 28px)); }
.dialog-supporting-copy { margin: -4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.inline-empty { display: grid; gap: 5px; padding: 14px; border-radius: 12px; background: var(--brand-container); color: var(--ink); }
.inline-empty span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.inline-empty button { width: fit-content; min-height: 44px; margin-top: 4px; padding: 0 14px; border-radius: 10px; color: var(--on-brand); background: var(--brand); font-weight: 700; }
.share-file-list { display: grid; gap: 5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #f8f8f8; }
.share-file-list span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.agent-share-dialog { background: rgb(20 20 20 / .3); }
.agent-share-card { width: min(360px, calc(100vw - 32px)); align-items: center; justify-items: center; gap: 9px; padding: 28px 24px 20px; text-align: center; }
.agent-share-card h2, .agent-share-card p { margin: 0; }
.agent-share-card > strong { color: var(--ink); font-size: 15px; }
.agent-share-card > p { color: var(--muted); font-size: 13px; }
.agent-share-card > button { width: 100%; min-height: 48px; margin-top: 8px; }
.agent-share-symbol { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 15px; color: #fff; background: var(--ink); }
.agent-share-symbol svg { width: 28px; height: 28px; fill: currentColor; stroke: none; animation: agent-share-pulse 1.25s ease-in-out infinite; }
@keyframes agent-share-pulse { 50% { opacity: .52; transform: scale(.92); } }
.member-dialog-card { width: min(520px, calc(100vw - 28px)); max-height: min(700px, calc(100dvh - 28px)); grid-template-rows: auto minmax(80px, 1fr) auto auto; }
.member-list { min-height: 80px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.member-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 2px; color: var(--ink); background: transparent; text-align: left; }
.member-row + .member-row { border-top: 1px solid #ededed; }
.member-row:hover { background: var(--state-hover); }
.member-row:active:not(:disabled) { background: var(--state-pressed); }
.member-copy { min-width: 0; display: grid; }
.member-copy strong, .member-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-copy small { color: var(--muted); font-size: 11px; }
.member-state { color: var(--muted); font-size: 11px; }
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.invite-form button { min-width: 80px; }
.message-dialog-card { width: min(500px, calc(100vw - 28px)); }
.message-edit-area { display: grid; gap: 12px; }
.channel-members-entry { display: none; }
.message-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.message-dialog-actions button { min-height: 44px; border: 0; border-radius: 8px; color: var(--ink); background: var(--state-hover); font-weight: 700; }
.message-dialog-actions button:hover { background: var(--state-pressed); }
.danger-button { color: var(--danger) !important; border-color: transparent !important; background: #fbefed !important; }
.danger-button:hover { background: #f7e2df !important; }
.emoji-dialog-card { width: min(390px, calc(100vw - 28px)); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.emoji-grid button { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; background: #f7f7f7; font-size: 24px; }
.emoji-grid button:hover { background: #ece5ee; }
.record-dialog-card { width: min(420px, calc(100vw - 28px)); }
.record-status { min-height: 96px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 20px; border-radius: 8px; background: #f7f3f8; }
.record-status i { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: record-pulse 1.2s ease-in-out infinite; }
.record-status strong { font-variant-numeric: tabular-nums; }
.record-status span { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.record-dialog-card[data-phase="requesting"] .record-status i,
.record-dialog-card[data-phase="review"] .record-status i,
.record-dialog-card[data-phase="failed"] .record-status i,
.record-dialog-card[data-phase="oversize"] .record-status i { background: var(--muted); animation: none; }
.record-dialog-card[data-phase="stopping"] .record-status i,
.record-dialog-card[data-phase="sending"] .record-status i,
.record-dialog-card[data-phase="committing"] .record-status i { background: #b46b12; }
.record-dialog-card video { width: 100%; max-height: 320px; border-radius: 8px; background: #111; }
.record-dialog-card audio { width: 100%; }
.record-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.record-actions button { min-height: 48px; border-radius: 10px; font-weight: 750; }
.record-actions button:first-child { color: var(--ink); background: var(--surface-soft); }
.record-actions button.primary:disabled { color: var(--muted); background: var(--surface-soft); }
@keyframes record-pulse { 50% { opacity: .35; } }
.toast { position: fixed; left: 50%; bottom: 78px; z-index: 30; max-width: min(440px, calc(100vw - 24px)); transform: translate(-50%, 12px); padding: 10px 15px; border-radius: 6px; color: #fff; background: rgb(29 28 29 / .94); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; text-align: center; font-size: 13px; box-shadow: 0 3px 12px rgb(0 0 0 / .2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-only { display: none; }

@media (hover: hover) {
  button { transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
}

@media (max-width: 760px), (max-height: 500px) and (max-width: 960px) {
  .app-shell { position: relative; display: block; background: #fff; }
  .topbar { display: none; }
  .primary-nav { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; height: calc(58px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; gap: 0; padding: 3px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--line); color: var(--muted); background: #fff; }
  .workspace-tile, .primary-nav-spacer, .nav-compose, .nav-avatar { display: none; }
  .primary-nav-item { width: auto; min-height: 52px; gap: 1px; padding: 4px 2px; border-radius: 0; color: var(--muted); }
  .primary-nav-item:hover, .primary-nav-item.active { color: var(--aubergine); background: transparent; }
  .primary-nav-item svg { width: 21px; height: 21px; }
  .primary-nav-item span { font-size: 10px; }
  .primary-nav-item b { top: 1px; right: calc(50% - 21px); border-color: #fff; color: #fff; background: var(--danger); }

  .sidebar, .chat { position: absolute; inset: 0; min-height: 0; }
  .sidebar { z-index: 2; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; padding-bottom: calc(66px + env(safe-area-inset-bottom)); overflow: hidden; border-radius: 0; background: var(--surface); }
  .sidebar-header { min-height: calc(57px + env(safe-area-inset-top)); padding: max(10px, env(safe-area-inset-top)) 14px 8px; border: 0; color: #fff; background: linear-gradient(135deg, #611f69, #4a154b); }
  .sidebar-brand strong { font-size: 20px; }
  .sidebar-brand small { color: rgb(255 255 255 / .72); font-size: 11px; }
  .sidebar-header .icon-button { width: 44px; height: 44px; color: #fff; }
  .sidebar-header .icon-button:hover { background: rgb(255 255 255 / .12); }
  .mobile-search { position: relative; display: flex; align-items: center; gap: 0; margin: 0; padding: 1px 13px 10px; color: #fff; background: linear-gradient(135deg, #611f69, #4a154b); font-weight: 400; }
  .mobile-search svg { position: absolute; left: 26px; z-index: 1; width: 18px; height: 18px; pointer-events: none; }
  .mobile-search input { min-height: 40px; padding: 8px 40px; border: 0; border-radius: 8px; color: #fff; background: rgb(255 255 255 / .17); box-shadow: none; font-size: 14px; }
  .mobile-search input::placeholder { color: rgb(255 255 255 / .82); }
  .mobile-search input:focus { background: rgb(255 255 255 / .23); box-shadow: 0 0 0 2px rgb(255 255 255 / .28); }
  .sidebar-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
  .sidebar-shortcuts button { min-width: 0; min-height: 72px; display: grid; justify-items: start; align-content: start; gap: 1px; padding: 9px 8px; border: 1px solid #ececec; border-radius: 9px; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04); text-align: left; }
  .sidebar-shortcuts svg { width: 18px; height: 18px; margin-bottom: 5px; }
  .sidebar-shortcuts span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
  .sidebar-shortcuts small { color: var(--muted); font-size: 9px; }
  .sidebar-pages { display: none; }
  .channels-heading { min-height: 44px; padding: 4px 18px 0; color: var(--ink); font-size: 14px; }
  .room-list { padding: 0 8px 8px; background: #fff; }
  .room-item { min-height: 44px; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 5px; padding: 5px 10px; border-radius: 6px; color: var(--ink); }
  .room-item:hover { background: #f5f5f5; }
  .room-item.active { color: var(--ink); background: #f2eaf3; }
  .room-avatar { width: 26px; height: 26px; }
  .room-avatar::after { font-size: 20px; color: var(--muted); }
  .room-copy strong { font-size: 15px; font-weight: 650; }
  .room-item.active .unread { color: #fff; background: var(--aubergine); }
  .sidebar-footer { display: none; }

  .chat { z-index: 3; grid-template-rows: auto minmax(0, 1fr) auto auto; transform: translateX(100%); transition: transform .2s cubic-bezier(.2,.75,.25,1); background: #fff; }
  .app-shell.room-open .chat { transform: translateX(0); }
  .app-shell.room-open .primary-nav { visibility: hidden; pointer-events: none; }
  .mobile-only { display: grid; }
  .chat-header { padding-top: env(safe-area-inset-top); }
  .channel-row { min-height: 61px; gap: 3px; padding: 6px 7px 5px 2px; }
  .chat-header .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .chat-heading strong { font-size: 16px; letter-spacing: -.15px; }
  .chat-heading strong > svg { width: 14px; height: 14px; }
  .chat-heading small { font-size: 11px; }
  .connection-separator, .connection-dot, #connectionState { display: none; }
  .channel-actions { gap: 8px; }
  .channel-actions button { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; }
  .channel-actions button:nth-child(2) { display: none; }
  .channel-actions svg { width: 21px; height: 21px; }
  .channel-tabs { display: none; }
  .timeline { padding: 4px 0 2px; }
  .day-separator { margin: 12px 0 9px; }
  .message { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 7px 12px; }
  .message.compact { padding-top: 2px; padding-bottom: 2px; }
  .message.compact::before { left: 12px; width: 38px; }
  .message-avatar { width: 36px; height: 36px; }
  .message-sender { font-size: 15px; }
  .message-time { font-size: 11px; }
  .message-body { font-size: 15px; line-height: 1.42; }
  .message-actions { display: none !important; }
  .attachment img { max-width: min(420px, 76vw); }
  .typing-state { padding: 0 15px 2px; }

  .composer { grid-template-rows: auto auto; margin: 0; padding: 3px 5px max(5px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .composer:focus-within { border-color: var(--line); box-shadow: none; }
  .composer-format { display: none; }
  .composer.show-format { grid-template-rows: auto auto auto; }
  .composer.show-format .composer-format { display: flex; overflow-x: auto; padding: 3px 7px 0; scrollbar-width: none; }
  .composer textarea { min-height: 39px; max-height: 112px; padding: 8px 10px 3px; font-size: 15px; }
  .composer-bottom { min-height: 48px; padding: 0 2px 2px; }
  .composer-actions { gap: 0; }
  .composer-format button, .composer-actions button { width: 44px; height: 44px; }
  .mobile-format-trigger { display: grid !important; }
  .mobile-more-action { display: grid !important; }
  .desktop-composer-action { display: none !important; }
  .composer-actions .attach-button { width: 44px; height: 44px; }
  .send-button { width: 44px; height: 44px; border-radius: 50%; }
  .send-button:disabled { background: transparent; }
  .send-button:not(:disabled) { background: var(--success); }
  .send-button svg { width: 20px; height: 20px; }
  .thread-panel { inset: 0; width: 100%; border-left: 0; box-shadow: none; }
  .thread-panel > header { padding-top: max(8px, env(safe-area-inset-top)); }
  .thread-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .collection-view { position: absolute; inset: 0; z-index: 4; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .collection-header { min-height: calc(62px + env(safe-area-inset-top)); padding: max(8px, env(safe-area-inset-top)) 10px 8px 2px; }
  .collection-header h1 { font-size: 19px; }
  .collection-content { padding: 10px 10px 24px; }
  .collection-item { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 11px 8px; }
  .collection-item-body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .collection-toolbar { position: sticky; top: 0; z-index: 2; padding: 2px 0 8px; background: #fff; }
  .knowledge-toolbar { position: sticky; top: 0; z-index: 2; grid-template-columns: minmax(0, 1fr) 48px; padding: 2px 0 9px; background: var(--surface); }
  .knowledge-toolbar input { grid-column: 1 / -1; }
  .knowledge-toolbar select { min-width: 0; }
  .knowledge-summary-line { align-items: flex-start; flex-direction: column; gap: 2px; padding: 1px 3px 9px; }
  .knowledge-item { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; padding: 13px 2px; }
  .knowledge-source-mark { width: 32px; height: 32px; }
  .knowledge-item-title { font-size: 16px; }
  .knowledge-item-arrow { font-size: 21px; }
  .knowledge-classification-form { grid-template-columns: 1fr; }
  .knowledge-classification-form .error, .knowledge-classification-form .dialog-actions { grid-column: 1; }
  .knowledge-dialog-card { max-height: calc(var(--app-height, 100dvh) - 24px); }
  .canvas-form textarea { min-height: 55dvh; }
  .dialog-card { max-height: calc(100dvh - 28px); overflow-y: auto; padding: 22px 20px; }
  .message-dialog-actions { grid-template-columns: 1fr; }
  .invite-form { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .sidebar-shortcuts { gap: 5px; padding-right: 7px; padding-left: 7px; }
  .sidebar-shortcuts button { padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Calm productivity system: warm neutral surfaces with one clear action color. */
.topbar { grid-template-columns: 150px minmax(240px, 360px) 90px; justify-content: end; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); }
.window-controls i { background: var(--line-strong); }
.history-controls { color: var(--muted); }
.global-search { color: var(--muted); }
.global-search input { color: var(--ink); background: #fff; border-color: var(--line); text-align: left; }
.global-search input::placeholder { color: var(--muted); }
.global-search input:focus { color: var(--ink); background: #fff; border-color: var(--line-strong); box-shadow: none; text-align: left; }
.topbar-actions .top-create { border: 0; }

.primary-nav { color: var(--muted); background: #ece9e0; border-right: 1px solid var(--line); }
.workspace-tile { color: var(--surface); background: var(--ink); font-family: var(--font-serif); font-weight: 600; }
.primary-nav-item { color: var(--muted); }
.primary-nav-item:hover { color: var(--ink); background: rgb(34 33 30 / .05); }
.primary-nav-item.active { color: var(--brand); background: var(--brand-container); }
.primary-nav-item b { color: var(--surface); background: var(--ink); border-color: #ece9e0; }
.nav-compose { color: var(--ink); background: #ddd9ce; }
.nav-compose:hover { background: #d1ccc0; }
.nav-avatar { border: 0; color: var(--ink); background: #e9e6dd; }
.nav-avatar i { border-color: #ece9e0; background: #68735d; }

.sidebar { grid-template-rows: auto auto auto minmax(0, 1fr); border-radius: 0; border-right: 1px solid var(--line); }
.sidebar-header { border-color: var(--line); }
.sidebar-brand strong, .chat-heading strong, .thread-panel > header strong, .collection-header h1 { font-family: var(--font); font-weight: 700; }
.sidebar-brand strong { font-size: 17px; }
.sidebar-pages button, .channels-heading, .room-item { color: #514e47; }
.room-item.active { color: var(--ink); background: var(--sidebar-active); }
.room-item.active .unread { color: var(--surface); background: var(--ink); }
.unread { background: var(--ink); }
.sidebar-footer { display: none; }

.chat, .chat-header, .timeline, .collection-view, .collection-item { background: var(--surface); }
.chat-header { position: relative; top: 0; z-index: 6; }
.chat-heading strong { font-size: 16px; letter-spacing: -.1px; }
.channel-actions button { border: 0; background: transparent; }
.channel-actions button:hover { background: var(--surface-hover); }
.channel-tabs button.active::after { height: 2px; background: var(--ink); }
.timeline { padding-top: 6px; }
.day-separator { margin: 16px 0 12px; color: var(--muted); font-size: 11px; font-weight: 500; }
.day-separator span { padding: 0 10px; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.message { padding-top: 8px; padding-bottom: 8px; }
.message-avatar, .collection-item-avatar { border-radius: 8px; color: var(--ink) !important; background: #e9e6dd !important; font-weight: 700; }
.message-meta { gap: 6px; }
.message-sender { font-weight: 700; }
.message-body { font-family: var(--font); font-size: 15px; line-height: 1.55; }
.message-body a { color: var(--link); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.thread-summary { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.reaction-pill.mine { border-color: var(--ink); color: var(--ink); background: #efede6; }
.agent-run { border-color: var(--ink); }
.agent-run summary span { color: var(--ink); }
.empty-channel-icon { color: var(--ink); background: #e9e6dd; font-family: var(--font-serif); }

.composer { grid-template-rows: auto 36px; margin: 8px 20px 16px; border-color: var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: none; }
.composer:focus-within { border-color: var(--ink); box-shadow: none; }
.composer-format { display: none; }
.composer.show-format { grid-template-rows: 33px auto 36px; }
.composer.show-format .composer-format { display: flex; }
.composer textarea { font-family: var(--font); line-height: 1.5; }
.composer-format button:hover, .composer-actions button:hover { background: #eeece5; }
.mobile-format-trigger { display: grid !important; }
.composer-actions .attach-button { color: var(--ink); background: #eeece5; }
.composer-actions .attach-button:hover { background: #e4e1d8; }
.send-button { color: var(--ink); background: transparent; }
.send-button:not(:disabled):hover { color: #000; background: #eeece5; }
.send-button:disabled { color: var(--line-strong); }

.thread-panel { background: var(--surface); box-shadow: -4px 0 12px rgb(34 33 30 / .05); }
.thread-root-message { margin: 8px 12px 2px; width: calc(100% - 24px); padding: 10px 10px 10px 12px !important; border-left: 2px solid var(--ink); background: #f4f1ea; }
.thread-root-message:hover { background: #f4f1ea; }
.thread-empty-hint { margin: 18px 20px; color: var(--muted); font-family: var(--font); font-size: 14px; line-height: 1.55; }
.thread-composer { background: var(--surface); }
.thread-composer textarea { border-color: var(--line-strong); border-radius: 10px; font-family: var(--font); }
.thread-composer button { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 8px; color: var(--ink); background: transparent; }
.thread-composer button:hover { background: #eeece5; }
.thread-composer button svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }

.collection-item:hover { background: var(--surface-hover); }
.collection-item-body { font-family: var(--font); line-height: 1.5; }
.collection-empty h2, .dialog-card h2 { font-family: var(--font); font-weight: 700; }
.collection-empty svg { color: var(--ink); }
.collection-toolbar button, .canvas-form button, button.primary { color: var(--on-brand); background: var(--brand); }
.dialog-actions .primary { border-color: var(--brand); }
.record-status { background: #f0eee7; }
.account-dialog-card { width: min(360px, calc(100vw - 28px)); }
.account-dialog-actions { display: grid; gap: 8px; }
.account-dialog-actions button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); font-weight: 700; }
.encryption-state { width: fit-content; max-width: 190px; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 7px 2px 5px; border: 1px solid #bdd8cb; border-radius: 999px; color: #176b4a; background: #f1faf6; font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1.4; }
.encryption-state svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.encryption-state[data-state="initializing"] { color: #8a5a14; border-color: #ead6ae; background: #fff9ec; }
.encryption-state[data-state="error"], .encryption-state[data-state="missing"] { color: var(--danger); border-color: #ecc6c4; background: #fff4f3; }
.security-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #f7f5ef; }
.security-card > div { display: flex; align-items: center; gap: 10px; }
.security-card svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: #176b4a; stroke-width: 1.7; }
.security-card span { min-width: 0; display: grid; gap: 2px; }
.security-card small { color: var(--muted); font-size: 12px; }
.security-card code { width: fit-content; max-width: 100%; padding: 3px 6px; overflow: hidden; border-radius: 4px; color: var(--muted); background: #ece9e0; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.security-card p { margin: 0; color: var(--muted); font-family: var(--font); font-size: 12px; line-height: 1.55; }
.message.undecryptable .message-body { padding: 8px 10px; border-left: 2px solid var(--danger); color: var(--danger); background: #fff6f5; font-style: italic; }

@media (pointer: coarse) {
  input:focus, textarea:focus, select:focus { box-shadow: none; }
}

@media (pointer: coarse) and (min-width: 761px) {
  .app-shell { grid-template-rows: 56px minmax(0, 1fr); }
  button, input, textarea, select, summary { min-height: 48px; }
  .global-search input { height: 48px; min-height: 48px; }
  .nav-compose, .nav-avatar, .icon-button { width: 48px; min-width: 48px; height: 48px; }
  .sidebar-pages { gap: 8px; }
  .sidebar-pages button, .room-item, .sidebar-footer button { min-height: 48px; }
  .channels-heading { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  .channel-actions { gap: 8px; }
  .channel-actions button { min-width: 48px; height: 48px; }
  .channel-tabs { height: 48px; }
  .channel-tabs button { min-height: 48px; padding-bottom: 8px; }
  .composer { grid-template-rows: 48px auto 54px; }
  .composer-format, .composer-actions { gap: 8px; }
  .composer-format button, .composer-actions button, .send-button { width: 48px; min-width: 48px; height: 48px; }
  .thread-panel > header button, .dialog-close { width: 48px; min-width: 48px; height: 48px; }
  .message-main { padding-right: 52px; }
  .message-actions { top: 2px; right: 12px; display: flex; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .message-actions button { display: none; }
  .message-actions button:last-child { width: 48px; height: 48px; display: grid; }
  .message-reactions, .emoji-grid { gap: 8px; }
  .reaction-pill, .thread-summary, .attachment button, .agent-run summary,
  .dialog-actions button, .message-dialog-actions button, .account-dialog-actions button,
  .canvas-form button, .member-row { min-height: 48px; }
}

@media (max-width: 760px), (max-height: 500px) and (max-width: 960px) {
  html, body { position: fixed; inset: 0; height: var(--app-height, 100dvh); overflow: hidden; background: var(--surface); }
  .app-shell { position: fixed; inset: 0; width: 100%; height: var(--app-height, 100dvh); display: block; overflow: hidden; background: var(--surface); }
  button, input, textarea, select, summary { min-height: 48px; }
  .primary-nav { background: var(--surface); }
  .primary-nav-item:hover, .primary-nav-item.active { color: var(--ink); }
  .sidebar, .chat { inset: 0; height: 100%; }
  .sidebar { grid-template-rows: auto auto auto minmax(0, 1fr) auto; background: var(--surface); }
  .sidebar-header { color: var(--ink); background: var(--sidebar); border-bottom: 0; }
  .sidebar-brand strong { font-size: 19px; }
  .sidebar-brand small { color: var(--muted); }
  .icon-button, .sidebar-header .icon-button, .chat-header .icon-button { width: 48px; min-width: 48px; height: 48px; flex: 0 0 48px; }
  .sidebar-header .icon-button { color: var(--ink); }
  .sidebar-header .icon-button:hover { background: rgb(34 33 30 / .05); }
  .mobile-search { color: var(--muted); background: var(--sidebar); }
  .mobile-search input { min-height: 48px; color: var(--ink); background: var(--surface-raised); border: 1px solid transparent; }
  .mobile-search input::placeholder { color: var(--muted); }
  .mobile-search input:focus { background: var(--surface-raised); border-color: var(--brand); box-shadow: 0 0 0 3px rgb(53 104 89 / .12); }
  .sidebar-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 6px 10px 10px; border: 0; background: var(--surface); }
  .sidebar-shortcuts button { min-width: 0; min-height: 52px; display: grid; grid-template: auto auto / 18px minmax(0, auto); align-content: center; justify-content: center; column-gap: 4px; row-gap: 1px; padding: 5px 4px; border: 0; border-radius: 13px; background: var(--surface-soft); box-shadow: none; text-align: center; }
  .sidebar-shortcuts svg { width: 18px; height: 18px; margin: 0; color: var(--muted); }
  .sidebar-shortcuts span { font-size: 12px; font-weight: 750; }
  .sidebar-shortcuts small { grid-column: 1 / -1; max-width: 100%; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
  .sidebar-shortcuts button:hover { background: var(--surface-hover); }
  .room-list { background: var(--surface); }
  .channels-heading { min-height: 48px; }
  .room-item { min-height: 64px; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-radius: 12px; }
  .room-avatar { width: 36px; height: 36px; border-radius: 11px; background: var(--surface-soft); }
  .room-avatar::after { font-size: 18px; }
  .room-copy { display: grid; gap: 3px; }
  .room-copy small { display: block; }
  .room-item:hover { background: var(--surface-hover); }
  .room-item.active { background: var(--sidebar-active); }
  .chat { grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--surface); }
  .chat-header { position: relative; top: 0; z-index: 7; padding-top: env(safe-area-inset-top); background: var(--surface); }
  .chat-header .icon-button { flex-basis: 48px; }
  .chat-heading { overflow: hidden; }
  .chat-heading strong { max-width: 100%; font-size: 16px; }
  .encryption-state { max-width: 32px; padding: 2px 6px; }
  .encryption-state span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #roomTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .channel-actions button { width: 48px; min-width: 48px; height: 48px; background: transparent; }
  .message { padding-top: 8px; padding-bottom: 8px; }
  .message-avatar { width: 32px; height: 32px; }
  .message { grid-template-columns: 34px minmax(0, 1fr); }
  .message-main { padding-right: 46px; }
  .message.compact::before { width: 34px; }
  .room-copy strong, .message-sender, .message-body { font-size: 16px; }
  .message-body { line-height: 1.55; }
  .message-actions { top: 3px; right: 6px; display: flex !important; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .message-actions button { display: none; }
  .message-actions button:last-child { width: 48px; height: 48px; display: grid; border-radius: 50%; color: var(--muted); }
  .message-actions button:last-child:active:not(:disabled) { color: var(--brand); background: var(--brand-container); }
  .thread-timeline .message-actions { display: flex !important; }
  .thread-timeline .message-actions button { display: none; }
  .thread-timeline .message-actions button:last-child { display: grid; }

  .composer { grid-template: auto / 48px minmax(0, 1fr) 48px; align-items: end; gap: 8px; margin: 0; padding: 6px 5px max(6px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); }
  .composer:focus-within { border-color: var(--line); }
  .composer.show-format { grid-template: auto / 48px minmax(0, 1fr) 48px; }
  .composer-format, .composer.show-format .composer-format { display: none; }
  .composer textarea { grid-column: 2; grid-row: 1; min-height: 48px; max-height: 112px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-raised); font-size: 16px; line-height: 1.45; }
  .composer textarea:focus { border-color: var(--ink); }
  .composer-bottom { display: contents; }
  .composer-actions { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; }
  .composer-actions > button { display: none !important; }
  .composer-actions #attachButton { width: 48px; height: 48px; display: grid !important; color: var(--ink); background: transparent; }
  .send-button { grid-column: 3; grid-row: 1; align-self: end; justify-self: center; width: 48px; height: 48px; border-radius: 8px; color: var(--ink); background: transparent !important; }
  .send-button:disabled { color: var(--line-strong); }
  .thread-panel { inset: 0; width: 100%; height: 100%; background: var(--surface); }
  .thread-panel > header { position: relative; z-index: 2; padding-top: max(8px, env(safe-area-inset-top)); background: var(--surface); }
  .thread-timeline { padding-top: 4px; }
  .thread-root-message { margin: 8px 10px 2px; width: calc(100% - 20px); }
  .thread-composer { grid-template-columns: minmax(0, 1fr) 48px; align-items: end; padding: 6px 7px max(6px, env(safe-area-inset-bottom)); background: var(--surface); }
  .thread-composer textarea { min-height: 48px; padding: 10px 12px; }
  .thread-composer button { width: 48px; min-width: 48px; }
  .thread-panel > header button, .dialog-close { width: 48px; min-width: 48px; height: 48px; flex: 0 0 48px; }
  .message-reactions { gap: 8px; }
  .reaction-pill, .thread-summary, .attachment button, .agent-run summary { min-height: 48px; }
  .emoji-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .dialog-actions button, .message-dialog-actions button, .account-dialog-actions button, .canvas-form button, .member-row { min-height: 48px; }
  .collection-view, .collection-toolbar { background: var(--surface); }
  .collection-item-avatar { width: 32px; height: 32px; }
  .dialog-card { max-height: calc(var(--app-height, 100dvh) - 28px); background: var(--surface); }
  dialog { max-width: calc(100vw - 24px); overflow: visible; }
  .dialog-card { width: calc(100vw - 32px); overflow-x: hidden; }
}

/* Refined interaction layer: small visual controls inside stable touch targets. */
@media (hover: hover) {
  button:hover:not(:disabled) { background-color: var(--state-hover); }
  button.primary:hover:not(:disabled) { background-color: var(--brand-deep); }
}

@media (pointer: coarse) {
  button:focus:not(:focus-visible) { outline: 0; }
}

@media (max-width: 760px), (max-height: 500px) and (max-width: 960px) {
  .collection-view {
    inset: 0 0 calc(66px + env(safe-area-inset-bottom)) 0;
    padding-bottom: 0;
  }
  .collection-content { scroll-padding-bottom: 24px; }
  .collection-header { padding-right: 16px; padding-left: 16px; }
  .collection-header > #collectionBackButton { display: none; }
  .collection-view.room-subview .collection-header { padding-left: 2px; }
  .collection-view.room-subview .collection-header > #collectionBackButton { display: grid; }

  .chat {
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s cubic-bezier(.2,.75,.25,1), visibility 0s linear .2s;
  }
  .app-shell.room-open .chat {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .app-shell.room-open .sidebar,
  .app-shell.collection-open .sidebar { visibility: hidden; pointer-events: none; }

  .primary-nav { height: calc(66px + env(safe-area-inset-bottom)); padding: 3px 6px env(safe-area-inset-bottom); background: var(--surface-raised); }
  .primary-nav-item { isolation: isolate; min-height: 60px; border-radius: 16px; }
  .primary-nav-item::before { content: ""; position: absolute; top: 5px; left: 50%; z-index: -1; width: 52px; height: 30px; transform: translateX(-50%); border-radius: 999px; background: transparent; transition: background-color .15s ease; }
  .primary-nav-item.active { color: var(--brand); background: transparent; box-shadow: none; }
  .primary-nav-item.active::before { background: var(--brand-container); }
  .primary-nav-item span { font-size: 11px; font-weight: 650; }
  .primary-nav-item.active span { color: var(--brand); font-weight: 750; }
  .primary-nav-item:active:not(:disabled) { background: var(--state-hover); }

  .channel-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 4px; padding: 6px 6px 5px 2px; }
  .channel-row > #backButton { grid-column: 1; }
  .channel-row > .chat-heading { grid-column: 2; }
  .channel-row > .channel-actions { display: contents; }
  .channel-actions #recordAudioButton,
  .channel-actions #membersButton { display: none; }
  .channel-actions #channelMenuButton { grid-column: 3; border-radius: 50%; }
  .channel-actions #channelMenuButton:active:not(:disabled),
  .chat-header .icon-button:active:not(:disabled) { background: var(--state-pressed); }

  .sidebar-shortcuts button { border-radius: 12px; }
  .sidebar-shortcuts button:active:not(:disabled) { background: var(--state-pressed); }
  .room-item.active { background: var(--brand-container); box-shadow: none; }

  .composer { gap: 6px; padding-right: 6px; padding-left: 6px; }
  .composer textarea { border-color: transparent; border-radius: 16px; background: var(--surface-soft); }
  .composer textarea:focus { border-color: var(--brand); background: var(--surface-raised); box-shadow: 0 0 0 3px rgb(53 104 89 / .12); }
  .composer-actions #attachButton,
  .send-button { border-radius: 50%; }
  .composer-actions #attachButton:active:not(:disabled),
  .send-button:active:not(:disabled) { background: var(--state-pressed) !important; }
  .send-button:not(:disabled) { color: var(--on-brand); background: var(--brand) !important; }
  .send-button:not(:disabled):active { background: var(--brand-deep) !important; }

  dialog[open] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height, 100dvh);
    max-width: none;
    max-height: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    overflow: hidden;
  }
  dialog .dialog-card {
    width: 100%;
    max-width: none;
    max-height: calc(var(--app-height, 100dvh) - 12px);
    margin: 0;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid rgb(34 33 30 / .08);
    border-radius: 18px 18px 0 0;
    background: var(--surface-raised);
    box-shadow: 0 -12px 40px rgb(24 23 20 / .16);
    animation: sheet-in .18s cubic-bezier(.2,.75,.25,1);
  }
  .dialog-title-row { align-items: center; }
  .dialog-title-row h2 { font-size: 21px; }
  .dialog-close { color: var(--muted); background: transparent; }
  .dialog-close:active:not(:disabled) { color: var(--ink); background: var(--state-pressed); }

  .channel-members-entry {
    min-height: 54px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    text-align: left;
  }
  .channel-members-entry svg { width: 22px; height: 22px; }
  .channel-members-entry span { min-width: 0; display: grid; gap: 2px; }
  .channel-members-entry strong { font-size: 15px; }
  .channel-members-entry small { color: var(--muted); font-size: 12px; }
  .channel-members-entry b { color: var(--muted); font-family: var(--font-serif); font-size: 24px; font-weight: 400; }
  .channel-members-entry:active:not(:disabled) { background: var(--state-pressed); }

  .message-dialog-actions,
  .account-dialog-actions { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .message-dialog-actions button,
  .account-dialog-actions button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0;
    color: var(--ink);
    background: transparent !important;
    text-align: left;
    font-weight: 650;
  }
  .message-dialog-actions button:last-child,
  .account-dialog-actions button:last-child { border-bottom: 0 !important; }
  .message-dialog-actions button:active:not(:disabled),
  .account-dialog-actions button:active:not(:disabled) { background: var(--state-pressed) !important; }
  .message-dialog-actions .danger-button,
  .account-dialog-actions .danger-button { color: var(--danger) !important; }

  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dialog-actions button { min-width: 0; min-height: 48px; border-radius: 10px; }
  .dialog-actions .primary { color: var(--on-brand); background: var(--brand); }
  #recordDialog[open] { align-items: stretch; }
  #recordDialog .record-dialog-card { height: 100%; max-height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow: hidden; border-radius: 0; }
  #recordDialog .dialog-title-row { min-height: 48px; }
  #recordDialog .record-status { min-height: 72px; padding: 14px 16px; }
  #recordDialog video { min-height: 0; max-height: min(54dvh, 520px); object-fit: contain; }
  #recordDialog audio { align-self: center; }
  #recordDialog .record-actions { position: relative; z-index: 2; background: var(--surface-raised); }
  #recordDialog .record-actions button { min-height: 52px; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"],
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"],
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] { position: relative; display: block; padding: 0; color: #fff; background: #000; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .dialog-title-row,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .dialog-title-row,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .dialog-title-row { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px; z-index: 4; min-height: 48px; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .dialog-title-row h2,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .dialog-title-row h2,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .dialog-title-row h2 { display: none; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .dialog-close,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .dialog-close,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .dialog-close { color: #fff; background: rgb(0 0 0 / .34); backdrop-filter: blur(8px); }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] #recordPreview,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] #recordPreview,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] #recordPreview { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .record-status,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .record-status { position: absolute; left: 50%; bottom: max(126px, calc(env(safe-area-inset-bottom) + 112px)); z-index: 4; width: max-content; min-height: 44px; transform: translateX(-50%); grid-template-columns: auto auto; padding: 8px 14px; border-radius: 999px; color: #fff; background: rgb(0 0 0 / .42); backdrop-filter: blur(8px); }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .record-status span,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .record-status span { display: none; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .record-status { position: absolute; top: 50%; left: 50%; z-index: 4; width: min(280px, calc(100% - 40px)); min-height: 56px; transform: translate(-50%, -50%); padding: 12px 16px; color: #fff; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .record-status strong { display: none; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .record-status span { color: #fff; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="requesting"] .record-actions { display: none; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] .record-actions,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] .record-actions { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; justify-content: center; padding: 12px 16px max(24px, calc(env(safe-area-inset-bottom) + 16px)); background: linear-gradient(transparent, rgb(0 0 0 / .72)); }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] #discardRecordButton,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] #discardRecordButton { display: none; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] #finishRecordButton,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] #finishRecordButton { width: 76px; min-width: 76px; height: 76px; min-height: 76px; padding: 0; border: 5px solid rgb(255 255 255 / .88); border-radius: 50%; color: transparent; background: rgb(255 255 255 / .16); box-shadow: 0 0 0 2px rgb(0 0 0 / .22); font-size: 0; opacity: 1; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="recording"] #finishRecordButton::after,
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] #finishRecordButton::after { content: ""; width: 27px; height: 27px; display: block; margin: auto; border-radius: 7px; background: #e5484d; }
  #recordDialog .record-dialog-card[data-kind="video"][data-phase="stopping"] #finishRecordButton::after { border: 3px solid rgb(255 255 255 / .78); border-top-color: transparent; border-radius: 50%; background: transparent; animation: record-spin .8s linear infinite; }
  .emoji-grid button { border-radius: 10px; background: var(--state-hover); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); border-radius: 10px; }

  .knowledge-toolbar { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; padding: 4px 0 10px; }
  .knowledge-toolbar input { grid-column: 1 / -1; border-color: transparent; border-radius: 14px; background: var(--surface-soft); }
  .knowledge-toolbar select { min-width: 0; border-color: transparent; border-radius: 12px; background: var(--surface-soft); }
  .knowledge-refresh { border: 0; border-radius: 12px; background: var(--surface-soft); }
  .knowledge-summary-line { flex-direction: row; align-items: center; padding: 2px 4px 8px; }
  .knowledge-item { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 10px; padding: 14px 4px; }
  .knowledge-source-mark { width: 36px; height: 36px; border: 0; border-radius: 11px; background: var(--brand-container); color: var(--brand); }
  .knowledge-item-meta small { font-size: 11px; }
  .knowledge-item-title { font-size: 16px; }

  #knowledgeDialog[open] { align-items: stretch; }
  #knowledgeDialog .knowledge-dialog-card { height: 100%; max-height: 100%; padding-top: max(16px, env(safe-area-inset-top)); border-radius: 0; box-shadow: none; }
  #knowledgeDialog .dialog-title-row { position: sticky; top: 0; z-index: 2; margin: -8px -4px 0; padding: 8px 4px; background: var(--surface-raised); }
  .knowledge-dialog-summary { font-size: 16px; line-height: 1.7; }
  .knowledge-key-points { padding: 16px 0; }

  .settings-heading { margin: 20px 4px 7px; }
  .settings-heading:first-child { margin-top: 2px; }
  .settings-list { border: 0; border-radius: 16px; background: var(--surface-raised); }
  .settings-list .collection-item { min-height: 68px; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; padding: 10px 12px; }
  .setting-icon { width: 40px !important; height: 40px !important; }
}

@keyframes sheet-in {
  from { transform: translateY(18px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes record-spin { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark) {
  :root {
    --aubergine: #e5e8e6;
    --aubergine-deep: #f4f6f5;
    --brand: #8fc9b6;
    --brand-deep: #a7dac9;
    --brand-container: #24483d;
    --on-brand: #10251f;
    --sidebar: #1b1f1d;
    --sidebar-hover: #252a27;
    --sidebar-active: #293b35;
    --ink: #edf0ee;
    --muted: #b3bbb6;
    --faint: #8f9892;
    --line: #343a36;
    --line-strong: #505852;
    --surface: #171a19;
    --surface-raised: #202422;
    --surface-soft: #282d2a;
    --surface-hover: #252a27;
    --state-hover: #282e2b;
    --state-pressed: #35403b;
    --state-selected: #29473d;
    --focus-ring: #8fc9b6;
    --focus-halo: rgb(143 201 182 / .20);
    --scrim: rgb(0 0 0 / .68);
    --link: #a9d8c8;
    --success: #8fc9b6;
    --danger: #ffb4ab;
  }
  .login-view { background: linear-gradient(180deg, #1b2521 0, var(--surface) 44%); }
  .login-card { border-color: rgb(143 201 182 / .14); box-shadow: 0 20px 60px rgb(0 0 0 / .24); }
  .topbar, .sidebar, .chat, .chat-header, .timeline, .collection-view, .collection-item,
  .global-search input, .global-search input:focus, .message-actions, .attachment:not(.inline-media),
  .composer, .thread-panel, .thread-composer, .dialog-card { background: var(--surface-raised); }
  .primary-nav { background: var(--surface-raised); border-color: var(--line); }
  .workspace-tile { color: #10251f; background: var(--brand); }
  .nav-avatar, .message-avatar, .collection-item-avatar { color: var(--ink) !important; background: var(--surface-soft) !important; }
  .nav-avatar i { border-color: var(--surface-raised); }
  .room-item.active, .reaction-pill.mine { background: var(--brand-container); }
  .sidebar-pages button, .channels-heading, .room-item { color: var(--ink); }
  .room-item:not(.active) { background: transparent; }
  .reaction-pill, .thread-summary, .attachment button, .emoji-grid button { border-color: var(--line); color: var(--ink); background: var(--surface-soft); }
  .thread-root-message, .record-status, .security-card, .knowledge-evidence { background: var(--surface-soft); }
  .message.undecryptable .message-body, .danger-button, .danger-setting .setting-icon { background: #492521 !important; }
  .encryption-state { color: #9cd5bd; border-color: #356a56; background: #1f3d33; }
  .encryption-state[data-state="initializing"] { color: #f2cf91; border-color: #705a31; background: #3a301f; }
  .encryption-state[data-state="error"], .encryption-state[data-state="missing"] { color: #ffb4ab; border-color: #7c403b; background: #442522; }
  .knowledge-tags i.ai { color: #9cd5bd; border-color: transparent; background: #1f3d33; }
  .knowledge-tags i.review { color: #f2cf91; border-color: transparent; background: #3a301f; }
  .toast { background: rgb(236 240 237 / .96); color: #171a19; }
}

/* ZCode-aligned product shell: content-first, monochrome and one navigation tree. */
:root {
  --brand: #18181b;
  --brand-deep: #27272a;
  --brand-container: #e9e9ed;
  --on-brand: #fafafa;
  --aubergine: #18181b;
  --aubergine-deep: #09090b;
  --sidebar: #f7f7f8;
  --sidebar-hover: #f1f1f3;
  --sidebar-active: #e9e9ed;
  --ink: #18181b;
  --muted: #52525b;
  --faint: #71717a;
  --line: #dedee3;
  --line-strong: #c6c6ce;
  --surface: #f7f7f8;
  --surface-raised: #fff;
  --surface-soft: #f1f1f3;
  --surface-hover: #e9e9ed;
  --state-hover: #f1f1f3;
  --state-pressed: #e4e4e7;
  --state-selected: #e9e9ed;
  --focus-ring: #18181b;
  --focus-halo: rgb(24 24 27 / .18);
  --scrim: rgb(9 9 11 / .58);
  --link: #4338ca;
  --success: #16803a;
  --danger: #dc2626;
}

.sidebar-pages, .sidebar-shortcuts { display: none !important; }
.collection-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-left: auto; padding: 0 15px; border-radius: 10px; color: var(--on-brand); background: var(--brand); font-size: 14px; font-weight: 700; white-space: nowrap; }
.collection-action svg { width: 20px; height: 20px; }
.collection-action:active:not(:disabled) { opacity: .78; background: var(--brand); }
.room-item-end { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.room-item-end .unread { color: var(--on-brand); background: var(--brand); }

.agent-session-groups, .news-list, .knowledge-project-list { width: min(100%, 920px); margin: 0 auto; }
.agent-session-group { margin-bottom: 18px; }
.agent-session-group-head { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.agent-session-group-head > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.agent-session-group-copy { min-width: 0; display: grid; gap: 2px; }
.agent-session-group-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.agent-session-group-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.agent-session-list { padding-left: 32px; }
.agent-session-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.agent-session-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.agent-session-row > i.running { background: var(--success); }
.agent-session-row > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.agent-session-row > span, .agent-session-row > time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.agent-session-add { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 4px; color: var(--muted); background: transparent; font-size: 13px; }
.agent-session-add svg { width: 20px; height: 20px; }
.agent-session-empty { margin: 0; padding: 14px 4px; color: var(--muted); font-size: 13px; }

.news-item { width: 100%; min-height: 92px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: start; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.news-source { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-raised); font-size: 11px; font-weight: 800; }
.news-main { min-width: 0; display: grid; gap: 5px; }
.news-meta { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.news-main strong { overflow: hidden; font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-main > span:last-child { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.news-arrow { align-self: center; color: var(--faint); font-size: 24px; }

.knowledge-library-intro { width: min(100%, 920px); display: grid; gap: 4px; margin: 0 auto 10px; padding: 0 4px; }
.knowledge-library-intro strong { font-size: 16px; }
.knowledge-library-intro span { color: var(--muted); font-size: 12px; }
.knowledge-project { width: 100%; min-height: 74px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.knowledge-project > svg { width: 24px; height: 24px; justify-self: center; }
.knowledge-project > span { min-width: 0; display: grid; gap: 3px; }
.knowledge-project strong, .knowledge-project small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-project strong { font-size: 16px; }
.knowledge-project small { color: var(--muted); font-size: 12px; }
.knowledge-project > b { min-width: 24px; color: var(--muted); text-align: right; font-size: 12px; }
.knowledge-project > i { color: var(--faint); font-size: 24px; font-style: normal; }

.account-profile-card { width: min(100%, 920px); min-height: 90px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; margin: 0 auto 26px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--ink); background: var(--surface-raised); text-align: left; }
.account-profile-card > span:first-child { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--on-brand); background: var(--brand); font-size: 20px; font-weight: 800; }
.account-profile-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.account-profile-card > span:nth-child(2) strong, .account-profile-card > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-card > span:nth-child(2) strong { font-size: 17px; }
.account-profile-card > span:nth-child(2) small { color: var(--muted); font-size: 12px; }
.account-profile-card > i { display: flex; align-items: center; gap: 5px; color: var(--success); font-style: normal; }
.account-profile-card > i svg { width: 18px; height: 18px; }
.account-profile-card > i b { font-size: 11px; }
.account-profile-card > em { color: var(--faint); font-size: 24px; font-style: normal; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand: #fafafa;
    --brand-deep: #e4e4e7;
    --brand-container: #202025;
    --on-brand: #18181b;
    --aubergine: #09090b;
    --aubergine-deep: #09090b;
    --sidebar: #09090b;
    --sidebar-hover: #131316;
    --sidebar-active: #18181b;
    --ink: #fafafa;
    --muted: #a1a1aa;
    --faint: #71717a;
    --line: #27272a;
    --line-strong: #34343a;
    --surface: #09090b;
    --surface-raised: #0f0f12;
    --surface-soft: #131316;
    --surface-hover: #1a1a1f;
    --state-hover: #18181b;
    --state-pressed: #27272a;
    --state-selected: #202025;
    --focus-ring: #fafafa;
    --focus-halo: rgb(250 250 250 / .15);
    --scrim: rgb(0 0 0 / .72);
    --link: #a5b4fc;
    --success: #4ade80;
    --danger: #ef4444;
  }
  .login-view { background: var(--surface); }
  .login-card, .topbar, .sidebar, .chat, .chat-header, .timeline, .collection-view, .collection-item,
  .global-search input, .global-search input:focus, .message-actions, .attachment:not(.inline-media),
  .composer, .thread-panel, .thread-composer, .dialog-card { background: var(--surface); }
  .account-profile-card, .news-source, .settings-list, .security-card { background: var(--surface-raised); }
  .setting-icon { color: var(--ink) !important; background: var(--surface-soft) !important; }
  .danger-setting .setting-icon { color: var(--danger) !important; background: #450a0a !important; }
}

@media (max-width: 760px), (max-height: 500px) and (max-width: 960px) {
  html, body, .app-shell { background: var(--surface); }
  .app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sidebar { grid-template-rows: auto auto auto minmax(0, 1fr); padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: var(--surface); }
  .sidebar-header { min-height: calc(108px + env(safe-area-inset-top)); align-items: flex-end; padding: max(18px, env(safe-area-inset-top)) 16px 14px; color: var(--ink); background: var(--surface); }
  .sidebar-brand strong { font-size: 30px; font-weight: 750; letter-spacing: -.7px; }
  .sidebar-brand small { margin-top: 4px; color: var(--muted); font-size: 12px; }
  .sidebar-header .icon-button { width: auto; min-width: 112px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--on-brand); background: var(--brand); }
  .sidebar-header .icon-button::after { content: "新会话"; margin-left: 4px; font-size: 14px; font-weight: 700; }
  .sidebar-header .icon-button svg { width: 20px; height: 20px; }
  .mobile-search { padding: 0 16px 10px; color: var(--muted); background: var(--surface); }
  .mobile-search svg { left: 29px; }
  .mobile-search input { min-height: 52px; padding-left: 42px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-soft); font-size: 16px; }
  .channels-heading { min-height: 38px; padding: 5px 16px; color: var(--muted); font-size: 12px; }
  .room-list { padding: 0 16px 24px; background: var(--surface); }
  .room-item { min-height: 68px; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; margin: 0; padding: 8px 4px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
  .room-item:hover, .room-item.active { background: var(--surface-soft); box-shadow: none; }
  .room-item .room-avatar { width: 9px; height: 9px; border-radius: 50%; background: var(--faint) !important; }
  .room-item .room-avatar::after { content: none; }
  .room-item .room-avatar.has-unread { background: var(--success) !important; }
  .room-copy { min-width: 0; display: grid; gap: 3px; }
  .room-copy strong { color: var(--ink); font-size: 16px; font-weight: 700; }
  .room-copy small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .room-item-end { align-self: center; font-size: 12px; }
  .room-item-end .unread { height: 20px; min-width: 20px; }

  .primary-nav { height: calc(72px + env(safe-area-inset-bottom)); padding: 5px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--surface); }
  .primary-nav-item { min-height: 62px; gap: 3px; border-radius: 0; color: var(--faint); }
  .primary-nav-item::before { content: none; }
  .primary-nav-item:hover, .primary-nav-item.active { color: var(--ink); background: transparent; }
  .primary-nav-item svg { width: 25px; height: 25px; stroke-width: 1.7; }
  .primary-nav-item span, .primary-nav-item.active span { color: inherit; font-size: 12px; font-weight: 600; }
  .app-shell.room-open { padding-bottom: 0; }
  .app-shell.room-open .primary-nav { display: none; }
  .app-shell.room-open .chat { z-index: 8; }

  .collection-view { inset: 0 0 calc(72px + env(safe-area-inset-bottom)); background: var(--surface); }
  .collection-header { min-height: calc(108px + env(safe-area-inset-top)); align-items: flex-end; padding: max(18px, env(safe-area-inset-top)) 16px 14px; border: 0; background: var(--surface); }
  .collection-header > div { min-width: 0; }
  .collection-header h1 { font-size: 30px; font-weight: 750; letter-spacing: -.7px; }
  .collection-header p { overflow: hidden; margin-top: 5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .collection-action { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border-radius: 10px; }
  .collection-content { padding: 0 16px 30px; }
  .collection-empty { min-height: 64vh; }
  .collection-empty svg { color: var(--muted); }
  .collection-list { width: 100%; }
  .collection-item { min-height: 68px; padding: 10px 4px; border-color: var(--line); background: transparent; }

  .chat-header { background: var(--surface); }
  .channel-row { min-height: calc(74px + env(safe-area-inset-top)); padding: max(12px, env(safe-area-inset-top)) 10px 8px; }
  .chat-header .icon-button, .channel-actions #channelMenuButton { width: 48px; min-width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); }
  .chat-heading { text-align: center; }
  .chat-heading strong { justify-content: center; font-size: 17px; }
  .chat-heading small { justify-content: center; color: var(--muted); }
  .channel-prefix { display: none; }
  .encryption-state { margin: 3px auto 0; border-color: var(--line-strong); color: var(--success); background: var(--surface-soft); }
  .channel-tabs { height: 42px; border-color: var(--line); }
  .channel-tabs button { min-height: 42px; color: var(--muted); }
  .channel-tabs button.active { color: var(--ink); }
  .channel-tabs button.active::after { background: var(--ink); }
  .timeline { padding: 8px 16px 14px; background: var(--surface); }
  .message { grid-template-columns: 34px minmax(0, 1fr); padding: 9px 0; }
  .message-avatar { color: var(--ink) !important; background: var(--surface-soft) !important; }
  .message-body { color: var(--ink); font-size: 16px; line-height: 1.6; }
  .message-time { color: var(--muted); }
  .composer { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-color: transparent; background: var(--surface); }
  .composer textarea { min-height: 52px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 26px; color: var(--ink); background: var(--surface); }
  .composer textarea:focus { border-color: var(--ink); background: var(--surface); box-shadow: none; }
  .composer-actions #attachButton { color: var(--ink); }
  .send-button:not(:disabled) { color: var(--on-brand); background: var(--brand) !important; }

  .agent-session-list { padding-left: 30px; }
  .agent-session-row { grid-template-columns: 10px minmax(0, 1fr) auto; min-height: 62px; }
  .agent-session-row > span { display: none; }
  .account-profile-card { grid-template-columns: 52px minmax(0, 1fr) 18px; }
  .account-profile-card > i { display: none; }
  .settings-heading { margin-right: 0; margin-left: 0; }
  .settings-list { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
  .settings-list .collection-item { min-height: 68px; }
  .setting-icon { border-radius: 10px !important; }
  .knowledge-toolbar input, .knowledge-toolbar select, .knowledge-refresh { color: var(--ink); background: var(--surface-soft); }
  .knowledge-source-mark { color: var(--ink); background: var(--surface-soft); }
  dialog .dialog-card { border-color: var(--line); background: var(--surface-raised); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Vimatee follows ZCode Pocket's dark product surface by default. */
:root {
  color-scheme: dark;
  --brand: #fafafa;
  --brand-deep: #e4e4e7;
  --brand-container: #202025;
  --on-brand: #18181b;
  --aubergine: #09090b;
  --aubergine-deep: #09090b;
  --sidebar: #09090b;
  --sidebar-hover: #131316;
  --sidebar-active: #18181b;
  --ink: #fafafa;
  --muted: #a1a1aa;
  --faint: #71717a;
  --line: #27272a;
  --line-strong: #34343a;
  --surface: #09090b;
  --surface-raised: #0f0f12;
  --surface-soft: #131316;
  --surface-hover: #1a1a1f;
  --state-hover: #18181b;
  --state-pressed: #27272a;
  --state-selected: #202025;
  --focus-ring: #fafafa;
  --focus-halo: rgb(250 250 250 / .15);
  --scrim: rgb(0 0 0 / .72);
  --link: #a5b4fc;
  --success: #4ade80;
  --danger: #ef4444;
}
:root .outbox-item { padding: 16px; border-bottom: 1px solid var(--border, #39404b); }
:root .outbox-item strong { overflow-wrap: anywhere; }
:root .outbox-item button { min-height: 44px; margin-right: 8px; padding: 8px 16px; }

.record-toolbar{display:flex;gap:12px;flex-wrap:wrap;padding:16px}.record-toolbar>*{flex:1;min-width:140px;min-height:48px}.record-toolbar button{border-radius:12px;background:var(--brand);color:var(--on-brand)}.record-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}.record-dialog details{overflow-wrap:anywhere}.record-dialog textarea{min-height:120px}