:root {
  color-scheme: light;
  --background: #f5f6f7;
  --surface: #ffffff;
  --surface-subtle: #eef1f4;
  --border: #d8dde3;
  --border-strong: #aeb7c2;
  --text: #17212b;
  --text-muted: #566573;
  --primary: #1769b0;
  --primary-hover: #125990;
  --primary-soft: #e8f1fb;
  --primary-text: #1769b0;
  --on-primary: #ffffff;
  --danger: #b52b35;
  --success: #26724f;
  --warning: #805600;
  --shadow-overlay: 0 14px 38px rgb(22 33 43 / 18%);
  --left: 18.5rem;
  --right: 16.5rem;
  --top: 3.75rem;
  --radius: .5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #11161a;
  --surface: #182026;
  --surface-subtle: #202930;
  --border: #34414a;
  --border-strong: #54636d;
  --text: #f1f4f6;
  --text-muted: #aab5bd;
  --primary: #74b3f2;
  --primary-hover: #91c4f5;
  --primary-soft: #1c3d58;
  --primary-text: #b9dbff;
  --on-primary: #10283c;
  --danger: #ff8f93;
  --success: #78cfa5;
  --warning: #e2b966;
  --shadow-overlay: 0 14px 38px rgb(0 0 0 / 44%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --background: #11161a;
    --surface: #182026;
    --surface-subtle: #202930;
    --border: #34414a;
    --border-strong: #54636d;
    --text: #f1f4f6;
    --text-muted: #aab5bd;
    --primary: #74b3f2;
    --primary-hover: #91c4f5;
    --primary-soft: #1c3d58;
    --primary-text: #b9dbff;
    --on-primary: #10283c;
    --danger: #ff8f93;
    --success: #78cfa5;
    --warning: #e2b966;
    --shadow-overlay: 0 14px 38px rgb(0 0 0 / 44%);
  }
}

html * { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--background); color: var(--text); }
button, input, textarea, select { color: inherit; font: inherit; line-height: 1.25; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: var(--primary-text); }
h1, h2, h3 { line-height: 1.25; }
p { max-width: 72ch; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem 1rem; background: var(--surface); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.login-screen { min-height: 100%; display: grid; place-items: center; padding: 1.5rem; background: var(--background); }
.startup-indicator { display: grid; justify-items: center; gap: .75rem; color: var(--text-muted); font-weight: 700; }
.login-card { width: min(100%, 25rem); display: grid; gap: 1.15rem; padding: 2.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.login-card h1 { margin: .25rem 0 0; font-size: 1.75rem; letter-spacing: -.02em; }
.login-card p { margin: 0; color: var(--text-muted); }
.login-card label { display: grid; gap: .4rem; color: var(--text-muted); font-size: .875rem; font-weight: 650; }
.login-card input { width: 100%; min-height: 2.75rem; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-subtle); }
.matrix-login, .matrix-providers { display: grid; gap: .75rem; }
.login-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .8125rem; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.matrix-provider { width: 100%; min-height: 2.75rem; }
.form-error { min-height: 1.2rem; color: var(--danger) !important; }
.brand-mark { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: var(--radius); color: var(--on-primary); background: var(--primary); font-weight: 800; }

.app { height: 100%; display: grid; grid-template: var(--top) minmax(0, 1fr) / var(--left) minmax(24rem,1fr) var(--right); }
.topbar { z-index: 20; grid-column: 1 / -1; display: grid; grid-template-columns: var(--left) minmax(12rem,1fr) minmax(14rem,28rem) auto; align-items: center; gap: .75rem; padding: 0 1rem 0 .75rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; border: 0; background: transparent; font-size: 1rem; font-weight: 760; text-align: left; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: .25rem; }
.icon-button, .avatar-button, .section-heading button, .compose-tools button, .send-tools button:not(.primary), .message-action { min-width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--radius); background: transparent; }
.icon-button:hover, .avatar-button:hover, .section-heading button:hover, .compose-tools button:hover, .send-tools button:hover, .message-action:hover { background: var(--surface-subtle); }
.avatar-button span, .avatar { display: grid; place-items: center; border-radius: 50%; color: var(--on-primary); background: var(--primary); font-size: .8125rem; font-weight: 750; }
.avatar-button span { width: 2rem; height: 2rem; }
.connection-state, .presence { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }
.connection-state[data-state="online"] { display: none; }
.connection-state:not([data-state="online"]) { position: fixed; z-index: 25; top: var(--top); left: 0; right: 0; justify-content: center; min-height: 2rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.connection-state::before, .presence::before { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--success); content: ""; }
.connection-state[data-state="offline"]::before { background: var(--danger); }
.presence.offline::before { background: var(--border-strong); }
.connection-state[data-state="recovering"]::before, .presence.idle::before { background: var(--warning); }
.search input, .sidebar-filter input { width: 100%; border: 1px solid transparent; border-radius: var(--radius); background: var(--surface-subtle); }
.search input { padding: .58rem .9rem; }
.search input:focus, .sidebar-filter input:focus { border-color: var(--primary); background: var(--surface); }

.left-sidebar, .right-sidebar { min-height: 0; overflow: auto; background: var(--surface); scrollbar-width: thin; }
.left-sidebar { border-right: 1px solid var(--border); padding: .85rem .65rem 2rem; }
.right-sidebar { border-left: 1px solid var(--border); padding: 1rem .75rem; }
.nav-section { margin-bottom: 1.25rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; padding: .25rem .45rem; }
.section-heading h2 { margin: 0; color: var(--text-muted); font-size: .8125rem; letter-spacing: .01em; }
.sidebar-filter { display: block; margin: 0 .28rem .8rem; }
.sidebar-filter span { position: absolute; overflow: hidden; width: 1px; height: 1px; }
.sidebar-filter input { min-height: 2.5rem; padding: .55rem .7rem; font-size: .875rem; }
.heading-actions { display: flex; gap: .2rem; }
.nav-export-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.nav-export-row > .nav-item { min-width: 0; }
.nav-export { min-width: 2rem; padding: .3rem; color: var(--text-muted); }
.nav-item { display: flex; width: 100%; align-items: center; gap: .6rem; min-height: 2.5rem; padding: .45rem .6rem; border: 0; border-radius: var(--radius); background: transparent; font-size: .9375rem; text-align: left; }
.nav-item:hover { background: var(--surface-subtle); }
.nav-item[aria-current="page"] { color: var(--primary-text); background: var(--primary-soft); font-weight: 700; }
.nav-item .label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count { min-width: 1.5rem; padding: .1rem .4rem; border-radius: 1rem; color: var(--on-primary); background: var(--primary); font-size: .75rem; text-align: center; }
.nav-item .state { color: var(--text-muted); font-size: .8125rem; }
.channel-dot { width: .58rem; height: .58rem; flex: none; border-radius: 50%; background: var(--channel, var(--primary)); }
.topic-list { margin: .1rem 0 .5rem 1rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.topic-list .nav-item { min-height: 2.25rem; font-size: .875rem; }
.folder-title { margin: .8rem .5rem .25rem; color: var(--text-muted); font-size: .8125rem; font-weight: 700; }

.main-view { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; background: var(--background); }
.view-header { grid-row: 1; min-height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.view-header h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.01em; }
.view-header p { margin: .2rem 0 0; color: var(--text-muted); font-size: .875rem; line-height: 1.4; }
.view-tools { grid-row: 2; display: flex; gap: .5rem; padding: .5rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; }
.view-tools:empty { display: none; }
.chip, .secondary, .danger { min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.chip[aria-pressed="true"] { color: var(--primary-text); border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.primary { min-height: 2.5rem; padding: .55rem 1rem; border: 0; border-radius: var(--radius); color: var(--on-primary); background: var(--primary); font-weight: 700; }
.primary:hover { background: var(--primary-hover); }
.danger { color: var(--danger); }
.transcript { position: relative; grid-row: 3; min-width: 0; min-height: 0; }
.content { width: 100%; height: 100%; min-height: 0; overflow: auto; padding: 1.25rem clamp(.75rem,2.6vw,2rem) 1.75rem; scroll-behavior: smooth; scrollbar-width: thin; }
.empty-state { max-width: 32rem; margin: 15vh auto; text-align: center; color: var(--text-muted); }
.empty-state strong { display: block; margin-bottom: .5rem; color: var(--text); font-size: 1.125rem; }
.loading { display: grid; place-items: center; min-height: 10rem; color: var(--text-muted); }
.load-more { display: block; margin: .2rem auto 1rem; }
.jump-latest { position: absolute; z-index: 6; right: clamp(.75rem,2.6vw,2rem); bottom: .75rem; min-height: 2.25rem; padding: .4rem .75rem; border-radius: 2rem; box-shadow: var(--shadow-overlay); font-size: .875rem; transition: opacity 120ms ease, transform 120ms ease; }
.date-divider, .unread-divider { display: flex; align-items: center; gap: .75rem; max-width: 72rem; margin: 1rem auto .5rem; color: var(--text-muted); font-size: .8125rem; font-weight: 700; }
.date-divider { position: sticky; z-index: 4; top: .5rem; width: max-content; padding: .22rem .65rem; border: 1px solid var(--border); border-radius: 2rem; background: var(--surface); box-shadow: 0 1px 3px rgb(22 33 43 / 10%); }
.unread-divider::before, .unread-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.unread-divider { color: var(--primary-text); }
.unread-divider::before, .unread-divider::after { background: var(--primary); }

.recipient-bar { position: sticky; z-index: 2; top: -.01rem; display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .4rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--primary-text); font-size: .875rem; font-weight: 700; }
.message { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; column-gap: .75rem; max-width: 72rem; margin: 0 auto; padding: .65rem .75rem; border: 1px solid transparent; border-radius: var(--radius); touch-action: pan-y; transition: border-color 120ms ease, background-color 120ms ease, opacity 120ms ease, transform 120ms ease; }
.message.arriving { animation: message-arrive 140ms ease-out; }
@keyframes message-arrive { from { opacity: 0; transform: translateY(.25rem); } }
.message:hover { border-color: var(--border); background: var(--surface); }
.message.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.message.grouped { padding-top: .2rem; padding-bottom: .35rem; }
.message.grouped > .avatar, .message.grouped > .message-head { visibility: hidden; height: 0; }
.message.grouped > .message-body { grid-row: 1; }
.message.pending { border-color: var(--border); background: var(--surface); }
.message .avatar { grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; }
.avatar[data-avatar-color="0"], .avatar-button span[data-avatar-color="0"] { background: #1769b0; }
.avatar[data-avatar-color="1"], .avatar-button span[data-avatar-color="1"] { background: #26724f; }
.avatar[data-avatar-color="2"], .avatar-button span[data-avatar-color="2"] { background: #8a4b08; }
.avatar[data-avatar-color="3"], .avatar-button span[data-avatar-color="3"] { background: #6b55a3; }
.avatar[data-avatar-color="4"], .avatar-button span[data-avatar-color="4"] { background: #8c3c65; }
.avatar[data-avatar-color="5"], .avatar-button span[data-avatar-color="5"] { background: #236a7e; }
.avatar[data-avatar-color="6"], .avatar-button span[data-avatar-color="6"] { background: #596719; }
.avatar[data-avatar-color="7"], .avatar-button span[data-avatar-color="7"] { background: #9a3838; }
.message-head { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.sender { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.timestamp { color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }
.edited { color: var(--text-muted); font-size: .8125rem; }
.message-body { grid-column: 2; min-width: 0; max-width: 72ch; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.5; text-align: left; }
.message-body p { margin: .2rem 0 .55rem; }
.message-body h1, .message-body h2, .message-body h3, .message-body h4, .message-body h5, .message-body h6 { margin: .65rem 0 .35rem; line-height: 1.25; }
.message-body h1 { font-size: 1.4rem; } .message-body h2 { font-size: 1.3rem; } .message-body h3 { font-size: 1.2rem; }
.message-body ul, .message-body ol { margin: .3rem 0 .6rem; padding-left: 1.5rem; }
.message-body .task-item { list-style: none; } .message-body .task-item > input { margin: 0 .45rem 0 -1.4rem; }
.message-body blockquote { margin: .4rem 0; padding-left: .75rem; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.message-body pre { overflow: auto; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); }
.message-body code { padding: .08rem .3rem; border-radius: .25rem; background: var(--surface-subtle); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875em; }
.message-body pre code { padding: 0; background: transparent; }
.message-body table { max-width: 100%; border-collapse: collapse; }
.message-body th, .message-body td { padding: .35rem .5rem; border: 1px solid var(--border); text-align: left; }
.message-body [data-align="center"] { text-align: center; } .message-body [data-align="right"] { text-align: right; }
.message-body .footnote-definition, .message-body .org-metadata { display: flex; gap: .35rem; margin: .3rem 0; color: var(--text-muted); font-size: .875rem; }
.message-body .source-fallback { white-space: pre-wrap; }
.message-body .math-inline { display: inline-block; max-width: 100%; vertical-align: middle; }
.message-body .math-display { display: block; max-width: 100%; margin: .45rem 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.message-body math { overflow-wrap: normal; }
.spoiler { display: inline; padding: 0 .2rem; border: 0; border-radius: .2rem; color: transparent; background: var(--text); line-height: inherit; }
.spoiler[aria-expanded="true"] { color: var(--text); background: var(--surface-subtle); }
.mention { padding: .05rem .25rem; border-radius: .25rem; color: var(--primary-text); background: var(--primary-soft); font-weight: 700; }
.message-actions { display: flex; grid-column: 3; grid-row: 1 / span 2; align-self: start; visibility: hidden; opacity: 0; }
.message:hover .message-actions, .message.selected .message-actions, .message:focus-within .message-actions { visibility: visible; opacity: 1; }
.message-action { min-width: 2rem; height: 2rem; font-size: .8125rem; }
.pending-actions { align-items: center; gap: .2rem; opacity: 1; }
.delivery-state { color: var(--text-muted); font-size: .8125rem; transition: color 120ms ease; }
.delivery-state.failed { color: var(--danger); font-weight: 700; }
.reactions, .attachments { grid-column: 2; margin-top: .22rem; }
.reactions { display: flex; flex-wrap: wrap; gap: .3rem; }
.attachments { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),22rem)); gap: .5rem; max-width: 46rem; }
.reaction { padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-subtle); font-size: .8125rem; }
.reaction.mine { border-color: var(--primary); background: var(--primary-soft); }
.reaction-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(2.75rem,1fr)); gap: .35rem; width: min(20rem,80vw); max-height: min(24rem,70vh); overflow: auto; }
.reaction-option { min-width: 2.75rem; min-height: 2.75rem; padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); font-size: 1.25rem; }
.reaction-option:hover { border-color: var(--primary); background: var(--primary-soft); }
.attachment { min-width: 0; overflow: hidden; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.attachment-stage { display: grid; width: 100%; min-height: 7rem; place-items: center; gap: .25rem; padding: .75rem; border: 0; background: var(--surface-subtle); color: var(--text-muted); }
button.attachment-stage:hover { color: var(--primary-text); background: var(--primary-soft); }
.attachment-file .attachment-stage, .attachment-text .attachment-stage, .attachment-audio .attachment-stage { min-height: 4rem; }
.attachment figcaption { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .65rem; }
.attachment-details { display: grid; min-width: 0; flex: 1; }
.attachment-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-details small { max-height: 3em; overflow: hidden; color: var(--text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.attachment-download { min-height: 2rem; padding: .25rem .45rem; border: 0; border-radius: var(--radius); color: var(--primary-text); background: transparent; }
.attachment-media { display: block; width: 100%; max-height: 24rem; background: var(--surface-subtle); object-fit: contain; }
.attachment-media.audio { min-height: 4rem; padding: .5rem; }
.pending-file { display: grid; gap: .1rem; padding: .65rem; }

:root[data-compact="true"] .message { padding-block: .3rem; }
:root[data-compact="true"] .message-body { line-height: 1.4; }

.conversation-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .25rem 1rem; max-width: 58rem; margin: .6rem auto; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.conversation-card:hover { border-color: var(--primary); }
.conversation-card button { border: 0; background: transparent; text-align: left; }
.conversation-card strong { display: block; }
.conversation-card small { color: var(--text-muted); font-size: .8125rem; }
.conversation-card .unread { align-self: center; min-width: 1.6rem; padding: .15rem .45rem; border-radius: 1rem; color: var(--on-primary); background: var(--primary); text-align: center; }

.composer { grid-row: 4; display: grid; gap: .5rem; margin: .75rem clamp(.75rem,2.6vw,2rem) 1rem; padding: .75rem; border: 1px solid var(--border-strong); border-radius: .625rem; background: var(--surface); }
.compose-destination { color: var(--text-muted); font-size: .8125rem; font-weight: 650; }
.composer textarea { width: 100%; min-height: 3.25rem; max-height: 35vh; resize: none; padding: .5rem; border: 0; background: transparent; font-size: 1rem; line-height: 1.5; overflow-y: auto; }
.composer textarea:focus { outline: 0; }
.composer footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.compose-tools, .send-tools { display: flex; flex-wrap: wrap; gap: .25rem; }
.compose-format { display: flex; align-items: center; gap: .35rem; margin-right: .25rem; color: var(--text-muted); font-size: .8rem; }
.compose-format select { width: auto; min-height: 2.5rem; padding: .25rem 1.8rem .25rem .5rem; }
.compose-files { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: .4rem; max-height: 12rem; overflow: auto; }
.compose-file { position: relative; display: grid; grid-template-columns: 4rem minmax(0,1fr) auto; align-items: start; gap: .5rem; min-width: 0; padding: .5rem; border-radius: var(--radius); background: var(--surface-subtle); font-size: .8125rem; }
.compose-file-preview, .compose-file-icon { width: 4rem; height: 4rem; border-radius: .25rem; background: var(--surface); object-fit: cover; }
.compose-file-icon { display: grid; place-items: center; color: var(--text-muted); font-weight: 700; }
.compose-file-audio { grid-column: 1 / -1; width: 100%; height: 2.5rem; }
.compose-file-details { display: grid; gap: .15rem; min-width: 0; }
.compose-file-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-file-details small { color: var(--text-muted); }
.compose-file-details label { display: grid; gap: .15rem; color: var(--text-muted); }
.compose-file-details input { min-width: 0; width: 100%; padding: .35rem .45rem; border: 1px solid var(--border); border-radius: .25rem; background: var(--surface); }
.compose-file-remove { width: 2rem; height: 2rem; border: 0; border-radius: var(--radius); background: transparent; }

.person { display: grid; grid-template-columns: 2.25rem minmax(0,1fr) auto; align-items: center; gap: .6rem; width: 100%; min-height: 3rem; padding: .5rem; border: 0; border-radius: var(--radius); background: transparent; text-align: left; }
.person:hover { background: var(--surface-subtle); }
.person .avatar { width: 2rem; height: 2rem; }
.person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-status { display: block; overflow: hidden; color: var(--text-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }

.scrim { position: fixed; z-index: 40; inset: 0; background: rgb(10 18 24 / 50%); }
.drop-overlay { position: fixed; z-index: 70; inset: 1rem; display: grid; place-items: center; border: 2px dashed var(--primary); border-radius: .75rem; color: var(--primary-text); background: color-mix(in srgb,var(--surface) 92%,transparent); font-size: 1.125rem; font-weight: 750; pointer-events: none; }
.dialog { position: fixed; z-index: 50; top: 50%; left: 50%; width: min(calc(100% - 2rem), 36rem); max-height: min(85vh,48rem); overflow: auto; transform: translate(-50%,-50%); margin: 0; padding: 1.25rem; color: var(--text); border: 1px solid var(--border); border-radius: .625rem; background: var(--surface); box-shadow: var(--shadow-overlay); }
.dialog[open] { animation: dialog-enter 140ms ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translate(-50%,calc(-50% + .5rem)); } }
.dialog::backdrop { background: rgb(10 18 24 / 50%); }
.dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dialog h2 { margin: 0; font-size: 1.25rem; }
.dialog form, .settings { display: grid; gap: 1rem; }
.dialog label, .settings label { display: grid; gap: .4rem; color: var(--text-muted); font-size: .875rem; font-weight: 650; }
.dialog input, .dialog textarea, .dialog select, .settings input, .settings textarea, .settings select { width: 100%; min-height: 2.5rem; padding: .65rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-subtle); }
.check-list { display: grid; gap: .15rem; min-width: 0; margin: 0; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.check-list legend { padding: 0 .25rem; color: var(--text-muted); font-size: .875rem; font-weight: 650; }
.dialog .check-option, .settings .check-option { display: grid; grid-template-columns: 1.125rem minmax(0,1fr); align-items: center; gap: .6rem; min-height: 2.5rem; padding: .4rem .5rem; color: var(--text); cursor: pointer; }
.dialog .check-option input, .settings .check-option input { width: 1.125rem; height: 1.125rem; min-height: 1.125rem; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--primary); }
.dialog footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.dialog.media-dialog { width: min(calc(100% - 2rem),70rem); }
.document-preview { width: 100%; height: min(70vh,48rem); border: 1px solid var(--border); background: white; }
.preview-pane { position: fixed; z-index: 35; right: 1rem; bottom: 7rem; width: min(35rem,calc(100% - 2rem)); max-height: 50vh; overflow: auto; padding: 1.25rem; border: 1px solid var(--border); border-radius: .625rem; background: var(--surface); box-shadow: var(--shadow-overlay); }
.toasts { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(24rem,calc(100% - 2rem)); }
.toast { padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-overlay); }
.toast.error { border-color: var(--danger); }
.settings { max-width: 48rem; margin: 0 auto; }
.settings-form, .security-form { display: grid; gap: 1rem; }
.security-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.success-text { color: var(--success); }
.settings section { padding: 1.25rem; border: 1px solid var(--border); border-radius: .625rem; background: var(--surface); }
.settings h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.settings h3 { margin: 0 0 .75rem; font-size: 1rem; }
.settings p { line-height: 1.5; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.admin-row:last-child { border: 0; }

.mobile-only { display: none; }
body.hide-right .app { grid-template-columns: var(--left) minmax(24rem,1fr); }
body.hide-right .right-sidebar { display: none; }

@media (max-width: 72rem) {
  .app { grid-template-columns: var(--left) minmax(22rem,1fr); }
  .topbar { grid-template-columns: var(--left) minmax(10rem,1fr) minmax(12rem,22rem) auto; }
  .right-sidebar { display: none; position: fixed; z-index: 30; top: var(--top); right: 0; bottom: 0; width: var(--right); box-shadow: var(--shadow-overlay); }
  body.show-right .right-sidebar { display: block; }
}

@media (max-width: 48rem) {
  :root { --top: 3.5rem; }
  .app { display: grid; grid-template: var(--top) minmax(0,1fr) / minmax(0,1fr); }
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; padding: 0 .45rem; }
  .topbar .brand { display: none; }
  .context-title { font-size: .9375rem; }
  .search { display: none; position: fixed; z-index: 60; top: .4rem; left: .4rem; right: .4rem; }
  body.show-search .search { display: block; }
  .left-sidebar { display: none; position: fixed; z-index: 30; top: var(--top); left: 0; bottom: 0; width: min(88vw,var(--left)); box-shadow: var(--shadow-overlay); }
  body.show-left .left-sidebar { display: block; }
  .main-view { grid-column: 1; }
  .mobile-only { display: inline-grid; }
  .desktop-only { display: none; }
  .view-header { min-height: 3.5rem; padding: .65rem .75rem; }
  .content { padding: .75rem .4rem 1rem; }
  .jump-latest { right: .5rem; bottom: .5rem; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 0; }
  .jump-latest::after { content: "↓"; font-size: 1rem; }
  .jump-latest:not([data-unseen="0"]) { width: auto; padding: 0 .75rem; }
  .jump-latest:not([data-unseen="0"])::after { content: attr(data-unseen) " ↓"; }
  .message { grid-template-columns: 2rem minmax(0,1fr) auto; padding: .55rem .4rem; }
  .message .avatar { width: 1.9rem; height: 1.9rem; }
  .message-actions { visibility: visible; opacity: 1; }
  .message-action:not(:last-child) { display: none; }
  .message.pending .message-action { display: inline-grid; }
  .composer { gap: .25rem; margin: .35rem; padding: .375rem; border-radius: var(--radius); }
  .composer textarea { min-height: 2.75rem; padding: .25rem; }
  .compose-files { grid-template-columns: 1fr; max-height: 8rem; }
  .icon-button, .avatar-button, .section-heading button, .message-action, .composer .primary, .compose-tools button, .send-tools button:not(.primary) { min-width: 2.75rem; min-height: 2.75rem; height: 2.75rem; }
  .composer footer, .compose-tools, .send-tools { flex-wrap: nowrap; }
  .compose-tools { min-width: 0; overflow-x: auto; }
  .preview-pane { bottom: 6rem; }
  .dialog { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 85dvh; transform: none; border-width: 1px 0 0; border-radius: .75rem .75rem 0 0; }
  .dialog[open] { animation-name: sheet-enter; }
  @keyframes sheet-enter { from { opacity: 0; transform: translateY(1rem); } }
}

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