@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #E9EEF0;
  --panel: #F6F8F9;
  --raised: #FFFFFF;
  --ink: #1B2A33;
  --muted: #566771;
  --line: #CAD5DA;
  --accent: #B5173F;
  --accent-ink: #FFFFFF;
  --online: #1F8A5B;
  --danger: #B3261E;
  --radius: .6rem;
  --font: 'Bricolage', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131E24;
    --panel: #1A2830;
    --raised: #23353E;
    --ink: #E7EFF2;
    --muted: #9DB0BA;
    --line: #314651;
    --accent: #FF6B8F;
    --accent-ink: #2B0A14;
    --online: #47CB90;
    --danger: #FF8F86;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 450 1rem/1.45 var(--font); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.07rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: 1.44rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 650; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; line-height: 1.2; padding: .5rem .85rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.hangup { background: var(--danger); border-color: var(--danger); color: var(--accent-ink); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--ink); border-color: var(--line); }
.btn.icon-only { padding: .45rem; }
.back { display: none; }
.icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon.flip { transform: rotate(135deg); }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
input, select { font: inherit; font-weight: 450; padding: .55rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--raised); color: var(--ink); min-width: 0; }
input::placeholder { color: var(--muted); }
.row { display: flex; gap: .5rem; align-items: center; }
.row input { flex: 1; }
.code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .06em; overflow-wrap: anywhere; }

/* Log in and sign up */
.auth { min-height: 100%; display: grid; place-items: center; padding: 1.5rem; }
.auth-box { width: min(26rem, 100%); display: grid; gap: 1.1rem; }
.lede { color: var(--muted); }
.tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); }
.tabs button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: .5rem 0; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }
.auth form { display: none; gap: .8rem; }
.auth[data-tab='login'] #login, .auth[data-tab='register'] #register, .auth[data-tab='link'] #link { display: grid; }
#link input[name='code'] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .06em; }
.form-msg { min-height: 1.45rem; color: var(--danger); font-weight: 600; }

/* App layout */
.shell { display: grid; grid-template-columns: minmax(17rem, 21rem) 1fr; height: 100dvh; }
.side { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.me { display: flex; align-items: center; gap: .65rem; padding: .85rem .9rem; border-bottom: 1px solid var(--line); }
.me strong { flex: 1; overflow-wrap: anywhere; }
.side-scroll { flex: 1; overflow-y: auto; padding: 1rem .75rem; display: grid; gap: 1.5rem; align-content: start; }
.block { display: grid; gap: .5rem; }
.block > h2 { font-size: .95rem; font-weight: 650; letter-spacing: 0; color: var(--muted); padding: 0 .5rem; }
.block > p, .block > form { padding: 0 .5rem; }
summary { cursor: pointer; font-weight: 600; padding: .35rem .5rem; border-radius: var(--radius); }
summary:hover { background: var(--raised); }
details[open] > summary { margin-bottom: .5rem; }
details > form { padding: 0 .5rem; }
.main { overflow-y: auto; min-height: 0; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.main > * { max-width: 46rem; }
.main > .stage { max-width: 60rem; }

/* Rows */
.item { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: var(--radius); }
.item > .grow { flex: 1; min-width: 0; display: grid; }
.item > .grow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pick { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pick:hover { background: var(--raised); }
.pick[aria-current='true'] { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); }
.main .item { border-radius: 0; border-bottom: 1px solid var(--line); padding: .6rem .25rem; }

/* Avatars */
.avatar { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-weight: 700; font-size: 1rem; color: #fff; background: hsl(var(--h, 200) 42% 36%); }
.avatar.s { width: 1.75rem; height: 1.75rem; font-size: .85rem; }
.avatar.l { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
.avatar.xl { width: 6rem; height: 6rem; font-size: 2.4rem; }
.avatar.square { border-radius: .6rem; }
.dot { position: absolute; right: -.1rem; bottom: -.1rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--muted); border: 2px solid var(--panel); }
.dot[data-online='true'] { background: var(--online); }

/* Main area: welcome, servers */
.empty { display: grid; gap: .5rem; padding-top: 12vh; }
.head { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.section { display: grid; gap: .5rem; margin-top: 1.75rem; }
.section > ul { margin-top: .25rem; }

/* Calls */
.stage { display: grid; gap: 2rem; }
.tiles { display: flex; flex-wrap: wrap; gap: 1.75rem 2.25rem; }
.tile { display: grid; justify-items: center; gap: .5rem; width: 8.5rem; text-align: center; }
.tile .avatar { transition: box-shadow .12s; }
.tile.speaking .avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--accent); }
.tile.ringing .avatar { animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); } }
.check { display: grid; gap: .4rem; border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1rem; }
.controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.dock { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); background: var(--raised); }
.dock > .grow { flex: 1; min-width: 0; display: grid; font-size: .9rem; }
.incoming { position: fixed; z-index: 20; top: max(1rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .9rem; max-width: calc(100vw - 2rem); padding: .8rem 1rem; background: var(--raised); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.toast { position: fixed; z-index: 30; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--bg); }
.toast[data-kind='error'] { background: var(--danger); color: var(--accent-ink); }

/* Confirm dialog */
dialog { max-width: min(24rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--raised); color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog p { margin-bottom: 1rem; }
dialog .row { justify-content: flex-end; }

/* Phones: one pane at a time */
@media (max-width: 52rem) {
  .shell { grid-template-columns: 1fr; }
  .shell[data-pane='side'] .main { display: none; }
  .shell[data-pane='main'] .side { display: none; }
  .back { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .tile .avatar { transition: none; }
  .tile.ringing .avatar { animation: none; box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--accent); }
}
.section > .btn { justify-self: start; }
.form-msg[data-kind='ok'] { color: var(--online); }
.chat { display: grid; gap: 1rem; }
.hash { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: var(--raised); border: 1px solid var(--line); font-weight: 700; }
.notice { display: grid; gap: .5rem; border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1rem; }
.log { display: grid; gap: .5rem; align-content: start; overflow-y: auto; min-height: 12rem; max-height: calc(100dvh - 20rem); padding: .25rem 0; }
.msg { display: grid; gap: .15rem; justify-self: start; max-width: 85%; padding: .5rem .75rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.out { justify-self: end; background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
.msg.note { justify-self: center; background: transparent; border-style: dashed; color: var(--muted); font-size: .875rem; }
.msg .who { font-weight: 650; font-size: .85rem; }
.msg .meta { font-size: .75rem; color: var(--muted); }
.composer { display: flex; gap: .5rem; align-items: flex-end; }
.composer textarea { flex: 1; font: inherit; padding: .55rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--raised); color: var(--ink); resize: none; field-sizing: content; min-height: 2.6rem; max-height: 8rem; }
.badge { min-width: 1.4rem; padding: 0 .4rem; border-radius: 1rem; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; text-align: center; }
.chip { display: flex; align-items: center; gap: .5rem; }
.chip img { max-height: 5rem; max-width: 8rem; border-radius: .5rem; border: 1px solid var(--line); }
.pic { width: min(100%, 22rem); display: grid; place-items: center; background: var(--raised); border-radius: .6rem; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pic-msg { max-width: min(85%, 23rem); }
dialog.viewer { max-width: 96vw; max-height: 96vh; padding: .5rem; }
dialog.viewer img { display: block; max-width: 92vw; max-height: 80vh; margin: 0 auto .5rem; }
.volume-pop { position: fixed; z-index: 40; width: 16rem; padding: .85rem; display: grid; gap: .6rem; background: var(--raised); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.volume-pop input[type='range'] { width: 100%; padding: 0; accent-color: var(--accent); }
.tile .vol { font-size: .8rem; padding: .25rem .5rem; }
.noise-pop { position: fixed; z-index: 40; width: 20rem; max-width: calc(100vw - 1rem); padding: .85rem; display: grid; gap: .75rem; background: var(--raised); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.choice { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: start; font-weight: 450; }
.choice input { margin-top: .2rem; }
.choice span { display: grid; }

/* Always dark, whatever the system setting is. */
:root {
  color-scheme: dark;
  --bg: #131E24;
  --panel: #1A2830;
  --raised: #23353E;
  --ink: #E7EFF2;
  --muted: #9DB0BA;
  --line: #314651;
  --accent: #FF6B8F;
  --accent-ink: #2B0A14;
  --online: #47CB90;
  --danger: #FF8F86;
}
.tile.has-video { width: 16rem; }
.vid { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden; background: #000; }
.vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid.mirror video { transform: scaleX(-1); }
.vid.wide { aspect-ratio: auto; }
.vid.wide video { max-height: 70vh; object-fit: contain; }
.tile.speaking .vid { box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--accent); }
.spotlight { margin: 0; display: grid; gap: .4rem; }
.share-note { color: var(--muted); }
.vid:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; display: grid; place-items: center; background: #000; }
.vid:fullscreen video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.vid:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; display: grid; place-items: center; background: #000; }
.vid:-webkit-full-screen video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.sound { display: inline-flex; align-items: center; gap: .4rem; font-weight: 450; }
.sound input { width: 7rem; padding: 0; accent-color: var(--accent); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
dialog.settings { width: min(34rem, calc(100vw - 2rem)); max-height: 90vh; overflow-y: auto; }
dialog.settings[open] { display: grid; gap: 1.25rem; }
.column { display: grid; gap: .6rem; }
.row.end { justify-content: flex-end; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 450; }
label.check input { padding: 0; }

/* ---- layout fixes ---- */
/* Chat: messages stretch, the message box sits at the bottom of the window. */
.main:has(> .chat) { overflow: hidden; padding-bottom: 1rem; }
.main > .chat { display: flex; flex-direction: column; width: 100%; max-width: 64rem; margin-inline: auto; height: calc(100dvh - 2.5rem); min-height: 0; }
.chat > .log { flex: 1; min-height: 0; max-height: none; }
.chat > .composer { flex: none; }
.msg:not(.pic-msg) { max-width: min(85%, 38rem); }

/* Sidebar: one column exactly as wide as the sidebar, so nothing pushes it sideways. */
.side-scroll { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.block { min-width: 0; }

/* Settings: wider, two columns when there is room. */
dialog.settings { width: min(46rem, calc(100vw - 2rem)); max-width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
dialog.settings[open] { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; align-content: start; }
@media (min-width: 40rem) {
  dialog.settings[open] { grid-template-columns: 1fr 1fr; }
  dialog.settings > h2, dialog.settings > .row.end { grid-column: 1 / -1; }
}
dialog.settings .column .row { justify-content: flex-start; flex-wrap: wrap; }
dialog.settings p { margin-bottom: 0; }
.column > .btn { justify-self: start; }
.column > .btn.primary { justify-self: stretch; }
.tick { display: flex; align-items: center; gap: .6rem; font-weight: 450; }
input[type='checkbox'] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; padding: 0; }

/* Settings gear: a fixed spot in the bottom-left of the sidebar, above the call bar, so it never moves. */
.side { position: relative; }
.settings-fab { position: absolute; left: .9rem; bottom: 4.75rem; z-index: 2; padding: .6rem; background: var(--raised); border-color: var(--line); color: var(--ink); }
.settings-fab:hover { border-color: var(--muted); }
.side-scroll { padding-bottom: 7.5rem; }

/* Settings: a page that fills the main area. The sidebar stays. */
.shell > .side { grid-column: 1; grid-row: 1; }
.shell > .main { grid-column: 2; grid-row: 1; }
.shell > .settings-page { grid-column: 2; grid-row: 1; z-index: 5; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.settings-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem .7rem 1.5rem; border-bottom: 1px solid var(--line); }
.settings-top h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: 0; }
.settings-body { display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; min-height: 0; }
.settings-nav { display: flex; flex-direction: column; gap: .25rem; padding: 1rem .75rem; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
.settings-content { overflow-y: auto; min-height: 0; padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.settings-page .panel { display: grid; gap: 2rem; align-content: start; max-width: 40rem; margin-inline: auto; }
.settings-page .panel > * + * { border-top: 1px solid var(--line); padding-top: 2rem; }
.settings-page .column { display: grid; gap: .9rem; align-content: start; }
.settings-page .column .row { justify-content: flex-start; flex-wrap: wrap; }
.settings-page .column .row > span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.settings-page .column > .btn { justify-self: start; }
.settings-page p { margin-bottom: 0; }
@media (max-width: 52rem) {
  .shell > .settings-page, .shell > .main { grid-column: 1; }
  .settings-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: .5rem .75rem; }
  .settings-nav .item { width: auto; white-space: nowrap; }
}

/* Chat: fills the whole main area, so the scroll bar sits at the window's edge. Your messages are blue, theirs grey. */
:root { --mine: #1D6392; --mine-ink: #FFFFFF; --chat-gap: clamp(1rem, 3vw, 2.5rem); }
@media (prefers-color-scheme: dark) { :root { --mine: #2A74A0; --mine-ink: #FFFFFF; } }
.main:has(> .chat) { padding: 0 0 1rem; }
.main > .chat { max-width: none; width: 100%; margin-inline: 0; height: calc(100dvh - 1rem); padding-top: 1rem; }
.main > .chat > :not(.log) { margin-inline: var(--chat-gap); }
.main > .chat > .log { flex: 1 1 auto; min-height: 0; max-height: none; padding-inline: var(--chat-gap); }
.chat .msg { max-width: min(85%, 40rem); }
.chat .msg.out { background: var(--mine); border-color: var(--mine); color: var(--mine-ink); }
.chat .msg.out .meta { color: rgb(255 255 255 / .9); }
.chat .msg.out .btn.quiet { color: var(--mine-ink); }

/* Chat inside a call: fills what is left under the buttons */
.main:has(> .stage) { padding: 0 0 1rem; }
.main > .stage { display: flex; flex-direction: column; max-width: none; width: 100%; margin-inline: 0; min-height: calc(100dvh - 1rem); padding-top: 1rem; box-sizing: border-box; overflow-y: auto; }
.main > .stage > :not(.call-chat) { margin-inline: var(--chat-gap, 1.5rem); flex: 0 0 auto; }
.main > .stage > .call-chat { flex: 1 1 18rem; min-height: 18rem; max-width: none; width: 100%; margin: 1rem 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.call-chat > :not(.log) { margin-inline: var(--chat-gap, 1.5rem); }
.call-chat > .log { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding-inline: var(--chat-gap, 1.5rem); }

/* Call chat: more room under the message box */
.main > .stage > .call-chat { padding-bottom: .5rem; }
.call-chat > .composer { margin-top: .5rem; }

/* Bottom of the sidebar: the call bar and the settings gear share one row */
.side > .foot { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); background: var(--raised); }
.foot > .dock { flex: 1; min-width: 0; padding: 0; border: 0; background: none; }
.foot > .dock[hidden] { display: none; }
.foot > .settings-fab { position: static; inset: auto; margin: 0 0 0 auto; flex: none; box-shadow: none; }

/* Media: a page that fills the main area, with its categories along the top */
.shell > .media-page { grid-column: 2; grid-row: 1; z-index: 5; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.media-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .7rem 1rem .7rem 1.5rem; border-bottom: 1px solid var(--line); }
.media-top h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-top > :last-child { justify-self: end; }
.media-tabs { display: flex; gap: .25rem; }
.media-tabs .item { width: auto; padding: .45rem 1.1rem; }
.media-content { overflow-y: auto; min-height: 0; padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.media-month { margin: 1.5rem 0 .6rem; font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.media-month:first-child { margin-top: .5rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem; }
.thumb { aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--raised); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover, .thumb:focus-visible { border-color: var(--accent); }
.media-empty { text-align: center; margin: 3rem auto; max-width: 28rem; }
.link-list { list-style: none; margin: .5rem auto 0; padding: 0; display: grid; gap: .5rem; max-width: 48rem; }
.link-list li { display: grid; gap: .15rem; padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.link-list a { overflow-wrap: anywhere; color: var(--accent); }
.lightbox { max-width: min(94vw, 60rem); padding: 1rem; }
.lightbox-pic { display: grid; place-items: center; }
.lightbox-pic img { max-width: 100%; max-height: 70vh; border-radius: var(--radius); }
.msg a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.controls > .push-right { margin-left: auto; }
@media (max-width: 52rem) {
  .shell > .media-page, .shell > .main { grid-column: 1; }
  .media-top { grid-template-columns: 1fr auto; }
  .media-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* Server info: the small "i" box at the top right of a server page */
.main { position: relative; }
.info-btn { position: absolute; top: 1.5rem; right: clamp(1rem, 3vw, 2rem); z-index: 2; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); font: italic 700 1.05rem/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
.info-btn:hover, .info-btn:focus-visible { border-color: var(--accent); }
.server-info { min-width: min(22rem, 92vw); }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.5rem; margin: 1rem 0 1.25rem; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; font-weight: 600; }

/* Pictures in chat: the picture has a fixed size, and the bubble can never be wider than the picture */
.msg .pic { width: min(22rem, 70vw); }
.msg.pic-msg, .chat .msg.pic-msg { max-width: calc(min(22rem, 70vw) + 1.75rem); }


/* ---- Sidebar redesign: Friends is the one people list, soft dividers, header menu ---- */
.side-scroll .block:has(#servers) { border-top: 1px solid var(--line); padding-top: 1rem; }
.chat > .head { border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: .75rem; }
.item small.on { color: var(--online); }
.srv-badge { min-width: 1.25rem; padding: 0 .4rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + .35rem); min-width: 11rem; z-index: 30; padding: .25rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.menu[hidden] { display: none; }
.menu-item { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: calc(var(--radius) - 2px); padding: .55rem .7rem; cursor: pointer; }
.menu-item:hover { background: var(--panel); }
.menu-item.danger { color: var(--danger); }

.head-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.head-actions .icon-big { width: 1.5rem; height: 1.5rem; }
.head-actions .icon-more { stroke-width: 3.2; stroke-linecap: round; }
.head-actions .btn { color: var(--ink); padding: .45rem; }

/* ---- Sidebar redesign 3: full-width dividers, buttons closer to the corner ---- */
.side-scroll .block:has(#servers) { margin-inline: -.75rem; padding-inline: .75rem; }
.chat > .head { margin-inline: -2.5rem; padding-inline: 2.5rem; }
.head-actions { margin-right: -1.5rem; }

/* ---- Sidebar redesign 4: header line edge to edge, buttons in the corner ---- */
.chat > .head { margin-inline: 0; padding-inline: 0; border-bottom: 0; position: relative; }
.chat > .head::after { content: ''; position: absolute; left: -2.5rem; right: -2.5rem; bottom: 0; height: 1px; background: var(--line); pointer-events: none; }
.head-actions { margin-right: 0; position: relative; right: -2.5rem; }

/* ---- Sidebar redesign 5: line levels match, small gap at the corner ---- */
.me { padding-top: calc(.85rem + 8px); padding-bottom: calc(.85rem + 3px); }
.head-actions { right: -1.5rem; }


/* ---- Storage tab ---- */
.storage { display: grid; gap: 1.1rem; align-content: start; }
.st-cats { display: grid; }
.st-cat { display: grid; gap: .5rem; width: 100%; padding: .8rem .25rem; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.st-cat:hover { background: var(--raised); }
.st-line { display: flex; align-items: center; gap: .65rem; }
.st-line .grow { flex: 1; }
.st-dot { width: .7rem; height: .7rem; border-radius: .2rem; }
.st-pct { min-width: 3rem; text-align: right; }
.st-track { height: .5rem; border-radius: 999px; background: var(--raised); overflow: hidden; }
.st-fill { height: 100%; border-radius: 999px; }
.st-foot { display: flex; align-items: center; gap: .75rem; }
.st-head { display: flex; align-items: center; gap: .75rem; }
.st-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-bar .grow { flex: 1; }
.st-sort { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.st-sort .pick { width: auto; padding: .4rem .8rem; border-radius: 0; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
.st-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius); background: var(--raised); cursor: pointer; }
.st-tile.on { border-color: var(--accent); }
.st-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-chk { position: absolute; top: .4rem; left: .4rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; color: transparent; background: rgba(0, 0, 0, .5); }
.st-tile.on .st-chk { color: var(--accent-ink); background: var(--accent); }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: .4rem .5rem; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.st-cap small { color: #e6eef0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-box { max-width: 26rem; padding: 1.4rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.confirm-box::backdrop { background: rgba(0, 0, 0, .55); }
.confirm-box .tick { margin: 1rem 0; align-items: flex-start; }
.confirm-row { justify-content: flex-end; }

/* ---- Storage: bigger tick box in the confirm pop-up ---- */
.confirm-box .tick { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); cursor: pointer; line-height: 1.4; }
.confirm-box .tick input { flex: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; accent-color: var(--accent); cursor: pointer; }
.confirm-box h3 { font-size: 1.15rem; margin-bottom: .35rem; }


/* ---- Storage: one tile per chat in Messages ---- */
.st-tile.chat { display: grid; place-items: center; align-content: center; gap: .45rem; padding: .7rem .6rem 2.8rem; text-align: center; }
.st-name { max-width: 100%; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ico .hash { font-size: 1.8rem; font-weight: 700; color: var(--muted); }


/* ---- Storage: the button row never moves when you select something ---- */
.st-bar .btn, .st-sort .pick { white-space: nowrap; }
@media (min-width: 701px) { .st-bar { flex-wrap: nowrap; } }


/* ---- Server page: channels on the left, members on the right ---- */
.srv-head { position: relative; padding-bottom: .75rem; margin-bottom: 1rem; }
.srv-head::after { content: ''; position: absolute; left: -2.5rem; right: -2.5rem; bottom: 0; height: 1px; background: var(--line); pointer-events: none; }
.srv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 2rem; align-items: start; }
.srv-left { display: grid; gap: 1.5rem; align-content: start; }
.srv-sec h3, .srv-members h3 { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.srv-sec ul, .srv-members ul { display: grid; gap: .15rem; }
.srv-chan { display: flex; align-items: center; border-radius: var(--radius); }
.srv-chan:hover { background: var(--raised); }
.srv-chan[aria-current='true'] { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); }
.srv-chan-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.srv-chan-main .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-chan-main .icon { flex: none; color: var(--muted); }
.srv-count { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.srv-chan .menu-wrap, .srv-mem .menu-wrap { opacity: 0; margin-right: .25rem; }
.srv-chan:hover .menu-wrap, .srv-chan:focus-within .menu-wrap, .srv-mem:hover .menu-wrap, .srv-mem:focus-within .menu-wrap { opacity: 1; }
.srv-members { min-height: 14rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.srv-mem { display: flex; align-items: center; gap: .65rem; padding: .4rem .35rem; border-radius: var(--radius); }
.srv-mem:hover { background: var(--raised); }
.srv-mem .grow { min-width: 0; display: grid; }
.srv-tag { margin-left: .45rem; padding: 0 .4rem; font-size: .65rem; font-weight: 700; border-radius: 999px; background: var(--raised); color: var(--muted); }
.srv-more { margin-top: .25rem; }
@media (max-width: 900px) { .srv-cols { grid-template-columns: 1fr; } .srv-members { padding-left: 0; border-left: 0; } }

/* ---- Server page: full width, aligned headings ---- */
.srv { width: 100%; max-width: none !important; }
.srv-cols { align-items: stretch; min-height: calc(100vh - 8rem); }
.srv-members { align-self: stretch; }
.srv-sec h3 { padding-left: .75rem; }
.srv-members h3 { padding-left: .35rem; }
.srv-head .head-actions { margin-left: auto; }

/* ---- Server page: no scrollbar, buttons on one line, divider touches the header ---- */
.srv-cols { min-height: calc(100vh - 13rem); }
.srv-head { margin-bottom: 0; }
.srv-left, .srv-members { padding-top: 1rem; }
.srv-head .head-actions { align-self: center; align-items: center; margin-left: auto; }
.srv-head .head-actions > * { margin: 0 !important; align-self: center; }

/* ---- Server page: fills the full height, so the divider reaches the bottom ---- */
.srv { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.srv-cols { flex: 1 1 auto; min-height: 0; }
.srv-members { align-self: stretch; }

/* ---- Server page: divider to the bottom edge, header buttons on one line ---- */
.srv-members { position: relative; border-left: 0; }
.srv-members::before { content: ''; position: absolute; left: 0; top: 0; bottom: -3rem; width: 1px; background: var(--line); pointer-events: none; }
.srv-head .head-actions { display: flex; align-items: center; gap: .35rem; height: 2.5rem; }
.srv-head .head-actions > * { height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; position: static !important; inset: auto !important; transform: none !important; }

/* ---- Server page: "..." in the corner, "i" next to it, both a bit higher ---- */
.srv-head .head-actions { flex-direction: row-reverse; top: -.4rem; }

/* ---- Server page: bigger headings that follow the window size, visible Owner tag ---- */
.srv-sec h3, .srv-members h3 { font-size: clamp(.85rem, .78rem + .3vw, 1.1rem); }
.srv-chan-main, .srv-mem { font-size: clamp(1rem, .94rem + .25vw, 1.2rem); }
.srv-count { font-size: clamp(.85rem, .8rem + .2vw, 1rem); }
.srv-mem small { font-size: clamp(.8rem, .76rem + .15vw, .95rem); }
.srv-tag { font-size: clamp(.68rem, .64rem + .15vw, .8rem); }
.srv-tag.owner { color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, transparent); }
.srv-tag.admin { color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---- Server page: channel column sits close to the sidebar divider ---- */
.srv-left { margin-left: -1.75rem; }

/* ---- Add a device: QR code beside the code ---- */
dialog.settings.add-device { width: min(960px, 94vw); max-width: none; }
.add-device .add-cols { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 2rem; align-items: start; margin-top: 1rem; }
.add-device .qr-box { background: #fff; border-radius: 16px; padding: 14px; aspect-ratio: 1; display: grid; place-items: center; color: #333; font-size: .9rem; text-align: center; }
.add-device .qr-box:empty { visibility: hidden; }
.add-device .qr-box canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.add-device .code-row { display: flex; align-items: center; gap: .75rem; background: var(--raised); border-radius: 12px; padding: .5rem .75rem .5rem 1.1rem; }
.add-device .link-code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(1.2rem, .9rem + 1vw, 2rem); letter-spacing: .06em; white-space: nowrap; user-select: all; }
.add-device .add-steps { padding-left: 1.3rem; display: grid; gap: .5rem; margin: 1rem 0 0; }
.add-device .add-warn { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }
@media (max-width: 640px) { .add-device .add-cols { grid-template-columns: 1fr; } .add-device .qr-box { max-width: 280px; width: 100%; margin: 0 auto; } }

/* ---- Add a device: stack the parts in one column ---- */
dialog.settings.add-device[open] { display: block; }
.add-device .code-row { background: var(--bg); }