/* ConferenceRooms web chat. Our own design tokens; skins override the custom properties. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 8px;
  --size: 15px;
  --accent: #14b8a6;
  --accent-ink: #04201d;
}
[data-theme="midnight"] {
  --bg: #323232; --panel: #323232; --panel2: #232323; --line: #434343; --text: #d9d9d9; --muted: #b0b0b0;
  --self: #7dd3fc; --notice: #c4b5fd; --action: #e0b078; --join: #4ade80; --quit: #f87171; --kick: #fb923c; --mode: #94a3b8;
  --mention-bg: rgba(250, 172, 28, 0.15); --mention-bar: #faac1c; --divider: #f37571; --link: #58aef3; --error: #f37571; --input: #232323;
}
[data-theme="daylight"] {
  --bg: #ffffff; --panel: #ffffff; --panel2: #f3f5f8; --line: #d9dfe8; --text: #1b2430; --muted: #5b687b;
  --brand: #1c4570; --brand-red: #b91f3b;
  --self: #1c4570; --notice: #6b3fa0; --action: #8a5524; --join: #2f7d4f; --quit: #b91f3b; --kick: #c2410c; --mode: #64748b;
  --mention-bg: #fdecef; --mention-bar: #b91f3b; --divider: #b91f3b; --link: #1c4570; --error: #b91f3b; --input: #ffffff;
}
[data-theme="midnight"] { --brand: #6aa6e0; --brand-red: #e0526b; }
[data-accent="brand"] { --accent: var(--brand); --accent-ink: #ffffff; }
[data-accent="crimson"] { --accent: var(--brand-red); --accent-ink: #ffffff; }
[data-accent="teal"] { --accent: #14b8a6; --accent-ink: #04201d; }
[data-accent="violet"] { --accent: #8b5cf6; --accent-ink: #ffffff; }
[data-accent="amber"] { --accent: #f59e0b; --accent-ink: #231600; }
[data-accent="rose"] { --accent: #f43f5e; --accent-ink: #ffffff; }
[data-accent="sky"] { --accent: #38bdf8; --accent-ink: #04202e; }
[data-accent="lime"] { --accent: #84cc16; --accent-ink: #1a2605; }
[data-accent="orange"] { --accent: #f97316; --accent-ink: #231000; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--size)/1.45 var(--font); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); }
.app-loading { padding: 2rem; color: var(--muted); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- layout ---------- */
.app { height: 100%; display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; background: var(--bg); }
.pane { background: var(--panel); min-height: 0; display: flex; flex-direction: column; }
.rooms { border-right: 1px solid var(--line); }
.members { border-left: 1px solid var(--line); }
.center { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.pane-title { padding: 10px 12px; font-weight: 600; font-size: .85em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.rooms ul, .members ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.net { padding: 8px 12px 4px; font-weight: 600; }
.room { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; border-left: 3px solid transparent; }
.room:hover { background: var(--panel2); }
.room.active { background: var(--panel2); border-left-color: var(--accent); font-weight: 600; }
.room .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-width: 1.5em; text-align: center; padding: 0 .45em; font-size: .75em; font-weight: 700; }
.badge.mention { background: var(--mention-bar); color: #1b1300; }
.room .x { opacity: 0; border: 0; background: none; cursor: pointer; color: var(--muted); }
.room:hover .x { opacity: 1; }

.topbar { border-bottom: 2px solid var(--brand-red); background: var(--panel); padding: 8px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; }
.topbar .title { font-weight: 700; }
.topbar .meta { color: var(--muted); font-size: .85em; }
.topbar .topic { grid-column: 1 / -1; color: var(--muted); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.topbar .topic.open { white-space: normal; }
.iconbtn { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }
.iconbtn:hover { border-color: var(--text); }
.nickbtn { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.topicrow { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; min-width: 0; }
.topicrow .topic { flex: 1; min-width: 0; }
.only-mobile { display: none; }

[hidden] { display: none !important; }
.banner.off { padding: 0; border: 0; height: 0; overflow: hidden; }
.log { overflow-y: auto; padding: 8px 0; min-height: 0; overscroll-behavior: contain; }
.line { padding: 1px 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; border-left: 3px solid transparent; word-break: break-word; }
.line .ts { color: var(--muted); font-size: .8em; font-variant-numeric: tabular-nums; min-width: 4.2em; }
.line .body { min-width: 0; white-space: pre-wrap; }
.line .xlate { color: var(--muted); }
.line .who { font-weight: 600; cursor: pointer; }
.line.own .who { color: var(--self); }
.line.mention { background: var(--mention-bg); border-left-color: var(--mention-bar); }
.line.action .body { color: var(--action); }
.line.notice .body { color: var(--notice); }
.line.join .body { color: var(--join); }
.line.part .body, .line.quit .body { color: var(--quit); }
.line.kick .body { color: var(--kick); }
.line.mode .body, .line.topic .body, .line.info .body, .line.nick .body, .line.status .body { color: var(--mode); }
.line.error .body { color: var(--error); }
.line.pending { opacity: .6; }
.divider { margin: 6px 12px; display: flex; align-items: center; gap: 10px; color: var(--divider); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }
.jump { position: sticky; bottom: 8px; margin: 0 auto; display: block; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 4px 14px; cursor: pointer; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ircb { font-weight: 700; }
.irci { font-style: italic; }
.ircu { text-decoration: underline; }
.ircs { text-decoration: line-through; }
.ircm { font-family: var(--mono); }

.composer { border-top: 1px solid var(--line); background: var(--panel); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: end; position: relative; }
.composer .rin { width: 100%; resize: none; overflow-y: hidden; max-height: 8em; min-height: 2.4em; background: var(--input); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.composer .rin:focus { border-color: var(--text); outline: none; }
.send { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); padding: 8px 14px; font-weight: 700; cursor: pointer; }
.fmt { position: absolute; bottom: 100%; left: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 320px; }
.hint { grid-column: 1 / -1; color: var(--muted); font-size: .8em; min-height: 1.2em; }
.hint.err { color: var(--error); }

.members li { display: flex; align-items: center; gap: 8px; padding: 3px 12px; cursor: pointer; }
.members li:hover, .members li.sel { background: var(--panel2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--join); flex: none; }
.dot.away { background: var(--muted); }
.pfx { color: var(--accent); font-weight: 700; width: 1em; text-align: center; }
.actions { border-top: 1px solid var(--line); padding: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.actions .who { grid-column: 1 / -1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions button { border: 1px solid var(--line); background: var(--panel2); border-radius: 6px; padding: 4px 2px; cursor: pointer; font-size: .8em; }
.actions button:hover { border-color: var(--text); }
.search { margin: 0 10px 6px; background: var(--input); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px; }

/* ---------- dialogs ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 50; padding: 12px; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; width: min(460px, 100%); max-height: 90vh; overflow: auto; }
.dialog h2 { margin: 0 0 8px; font-size: 1.15em; }
.dialog label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: .85em; }
.dialog input[type=text], .dialog input[type=password], .dialog select { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); padding: 8px 16px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: var(--text); }
.banner { background: var(--panel2); border-bottom: 1px solid var(--line); padding: 6px 12px; color: var(--muted); font-size: .9em; }
.banner.bad { color: var(--error); }

/* ---------- lobby ---------- */
#lobby, .notfound { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.lobby-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lobby-head h1 { margin: 0; font-size: 1.5em; }
.lobby-head input, .lobby-head select { background: var(--input); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--accent); }
.card h3 { margin: 0; }
.card .chan { color: var(--muted); font-size: .85em; }
.card .topic { color: var(--muted); font-size: .9em; flex: 1; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.feat { font-size: .7em; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: middle; }

/* ---------- mobile ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .app { grid-template-columns: 1fr; }
  .rooms, .members { position: fixed; top: 0; bottom: 0; width: min(82vw, 320px); z-index: 40; transition: transform .18s ease; box-shadow: 0 0 24px rgba(0,0,0,.5); }
  .rooms { left: 0; transform: translateX(-105%); }
  .members { right: 0; transform: translateX(105%); }
  .rooms.open, .members.open { transform: none; }
  .only-mobile { display: inline-block; }
  .iconbtn, .send, .room, .members li, .actions button { min-height: 44px; }
  .line { grid-template-columns: 1fr; gap: 0; }
  .line .ts { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
[data-density="compact"] .line { padding-top: 0; padding-bottom: 0; }
[data-density="cozy"] .line { padding-top: 3px; padding-bottom: 3px; }

/* ---------- brand ---------- */
.logo-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.logo-head img { height: 34px; width: auto; display: block; margin-right: 8px; }
.logo-head span { font-weight: 700; color: var(--brand); letter-spacing: .01em; }
[data-theme="midnight"] .logo-head span { color: var(--text); }
.lobby-head h1 { display: flex; align-items: center; gap: 12px; color: var(--brand); }
[data-theme="midnight"] .lobby-head h1 { color: var(--text); }
.lobby-head h1 img { height: 48px; width: auto; }
.card { border-top-color: var(--brand-red); }
.room.active { border-left-color: var(--brand-red); }
.imgprev { white-space: normal; }
.imgbtn { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 6px; padding: 0 8px; font-size: .8em; cursor: pointer; }
.imgbtn:hover { border-color: var(--text); }
.imgthumb { display: block; max-width: min(360px, 100%); max-height: 260px; border-radius: 8px; margin-top: 4px; border: 1px solid var(--line); background: var(--panel2); }
.whois-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 1.5em; font-weight: 700; flex: none; }
.whois-nick { font-size: 1.2em; font-weight: 700; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: .72em; border-radius: 999px; padding: 1px 8px; background: var(--panel2); border: 1px solid var(--line); }
.tag.red { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.tag.muted { color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .92em; }
.kv .k { color: var(--muted); }
.kv .v { word-break: break-word; }

/* ---------- phones: no zoom on focus, no page scroll, keyboard-aware layout ---------- */
body.chat-body { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }
.app { height: var(--vvh, 100dvh); max-height: 100dvh; }
button, .room, .members li, summary, a.btn, .swatch { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.log { -webkit-overflow-scrolling: touch; overflow-x: hidden; }
.scrim { display: none; }
.overlay { height: var(--vvh, 100dvh); top: var(--vvt, 0); bottom: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dialog input[type=text], .dialog input[type=password], .dialog select, .search, .lobby-head input, .lobby-head select, .composer .rin { font-size: 16px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  input, textarea, select { font-size: 16px !important; }
  .scrim.on { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 30; }
  .rooms, .members { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; }
  .topbar .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .topic { font-size: .85em; }
  .nickbtn { max-width: 8.5em; }
  .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .line { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .imgthumb { max-width: 100%; max-height: 220px; }
  .dialog { width: 100%; max-height: calc(var(--vvh, 100dvh) - 24px); }
  .overlay { align-items: end; padding: 0; }
  .dialog { border-radius: 14px 14px 0 0; }
  .lobby-head { align-items: stretch; }
  .lobby-head > div { width: 100%; }
}

/* ---------- icons ---------- */
.ico { width: 20px; height: 20px; display: block; flex: none; }
.iconbtn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; line-height: 1; vertical-align: middle; }
.iconbtn.nickbtn { padding: 0 12px; }
.send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; }
.send .ico { width: 18px; height: 18px; }
.room .x { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; }
.room .x .ico { width: 16px; height: 16px; }
.composer { align-items: center; }
.composer .rin { min-height: 40px; }

/* ---------- phone spacing ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .topbar { padding: 6px 8px; gap: 4px 8px; align-items: center; }
  .topbar > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .topbar > div:last-of-type { display: flex; align-items: center; gap: 6px; }
  .topbar .title { font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .iconbtn { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; }
  .iconbtn.nickbtn { max-width: 7.5em; padding: 0 10px; font-size: .9em; }
  .topicrow { gap: 6px; }
  .topbar .topic { padding: 2px 4px 4px; }
  .log { padding: 6px 0 10px; }
  .line { grid-template-columns: 3.6em minmax(0, 1fr); gap: 8px; padding-top: 3px; padding-bottom: 3px; }
  .line .ts { font-size: .68em; min-width: 0; padding-top: .35em; opacity: .85; }
  .line .body { line-height: 1.4; }
  .divider { margin: 8px 12px; }
  .composer { gap: 8px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .composer .iconbtn { min-width: 44px; height: 44px; }
  .composer .rin { min-height: 44px; padding: 10px 12px; border-radius: 12px; }
  .send { height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px; }
  .send .sendlbl { display: none; }
  .send .ico { width: 20px; height: 20px; }
  .hint { padding: 0 4px; }
  .rooms .pane-title, .members .pane-title { padding: 10px 8px 10px 16px; min-height: 56px; }
  .room { padding: 10px 16px; min-height: 48px; }
  .net { padding: 12px 16px 6px; }
  .logo-head { padding: 12px 16px; }
  .members li { padding: 8px 16px; min-height: 44px; }
  .members .search { margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; }
  .actions { padding: 12px; gap: 8px; grid-template-columns: repeat(4, 1fr); }
  .actions button { min-height: 44px; font-size: .85em; border-radius: 10px; }
  .overlay .dialog { padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .dialog h2 { margin-bottom: 12px; }
  .dialog label { margin: 14px 0 6px; font-size: .9em; }
  .dialog input[type=text], .dialog input[type=password], .dialog select { padding: 12px; border-radius: 10px; }
  .dialog .row { gap: 8px; margin-top: 18px; }
  .dialog .row .btn { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; border-radius: 10px; }
  .swatch { width: 36px; height: 36px; }
  .swatches { gap: 10px; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv .k { margin-top: 10px; font-size: .8em; }
  #lobby { padding: 16px 12px 40px; }
  .lobby-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .lobby-head h1 { font-size: 1.25em; }
  .lobby-head h1 img { height: 40px; }
  .lobby-head > div { display: grid !important; grid-template-columns: 1fr auto auto; gap: 8px; }
  .lobby-head input[type=search] { grid-column: 1 / -1; padding: 12px; border-radius: 10px; }
  .lobby-head select { padding: 10px; border-radius: 10px; min-height: 44px; }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px 16px; }
  .card .foot .btn { min-height: 44px; display: inline-grid; place-items: center; padding: 0 22px; }
}

/* ---------- account dialog: one clear choice, one action ---------- */
.choices { display: grid; gap: 8px; margin: 4px 0 6px; }
.choice { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text) !important; font-size: 1em !important; }
.choice.on { border-color: var(--accent); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--muted); font-size: .82em; line-height: 1.3; }
.dialog [hidden] { display: none !important; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* buttons in dialogs: one per row, full width, the main action first */
  .dialog .row { flex-direction: column-reverse; align-items: stretch; }
  .dialog .row .btn { width: 100%; flex: none; text-align: center; }
  .choice { padding: 14px; min-height: 56px; }
}

[data-theme="daylight"] { color-scheme: light; }
[data-theme="midnight"] { color-scheme: dark; }

/* ---------- formatting and emoji menus ---------- */
.fmt { position: absolute; bottom: 100%; left: 8px; right: 8px; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.25); z-index: 20; display: block; }
.fmtlabel { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 6px; }
.fmtlabel:first-child { margin-top: 0; }
.fmtrow { display: flex; gap: 8px; }
.fstyle { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 10px; cursor: pointer; font-size: 1.15em; }
.fstyle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.f-b { font-weight: 800; } .f-i { font-style: italic; font-family: Georgia, serif; } .f-u { text-decoration: underline; } .f-s { text-decoration: line-through; } .f-m { font-family: var(--mono); }
.swgrid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.csw { aspect-ratio: 1; min-height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.csw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.csw.none { background: linear-gradient(135deg, var(--panel) 45%, var(--brand-red) 46%, var(--brand-red) 54%, var(--panel) 55%); }
.fmtactions { display: flex; gap: 8px; margin-top: 14px; }
.fmtactions .btn { flex: 1; min-height: 44px; }
.emojimenu { max-width: 360px; }
.emgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.em { height: 40px; border: 0; background: none; font-size: 1.4em; border-radius: 8px; cursor: pointer; padding: 0; }
.em:hover { background: var(--panel2); }
.fmtpreview { grid-column: 1 / -1; background: var(--panel2); border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.fmtpreview .plabel { font-size: .7em; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; flex: none; }
.fmtpreview .pbody { white-space: pre-wrap; word-break: break-word; min-width: 0; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .fmt { left: 0; right: 0; max-width: none; border-radius: 14px 14px 0 0; border-bottom: 0; padding-bottom: 12px; }
  .swgrid { grid-template-columns: repeat(6, 1fr); }
  .csw { min-height: 40px; }
  .emgrid { grid-template-columns: repeat(7, 1fr); }
  .em { height: 44px; }
}

.fmt .btn { border: 0; }
.fmt .btn.ghost { border: 1px solid var(--line); }

/* ---------- unread and mentions: colour, never numbers ---------- */
.room.active { border-left-color: var(--accent); }
.room.unread { border-left-color: var(--brand-red); font-weight: 700; }
.room.hot { border-left-color: var(--brand-red); background: var(--mention-bg); font-weight: 700; }
.room.hot.active, .room.unread.active { background: var(--panel2); }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-red); flex: none; }
.room.hot .unread-dot { box-shadow: 0 0 0 3px var(--mention-bg), 0 0 0 5px var(--brand-red); }
.badge { display: none; }

/* ---------- message box: shows colours and styles as they will look ---------- */
.composer .rin { white-space: pre-wrap; word-break: break-word; overflow-y: auto; cursor: text; line-height: 1.35; font: inherit; color: var(--text); -webkit-user-select: text; user-select: text; box-sizing: border-box; }
.composer .rin:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.composer .rin[contenteditable=false] { opacity: .6; }
.rin .cc { display: inline; width: 0; height: 0; padding: 0; margin: 0; }
.banner.left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); }
.banner.left .btn { padding: 4px 12px; min-height: 0; }

/* ---------- find rooms ---------- */
.rooms li.browse { margin: 10px 8px; list-style: none; }
.rooms li.browse .btn { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.rooms li.browse .btn small { margin-left: auto; color: var(--muted); }
.rooms li.browse .ico { width: 16px; height: 16px; }
.roomlist { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 6px 0; }
.roomrow { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.roominfo { display: grid; gap: 2px; min-width: 0; flex: 1; }
.roominfo small { color: var(--muted); }
.roomtopic { color: var(--muted); font-size: .88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomrow .btn { flex: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .roomrow { padding: 12px; } .roomrow .btn { min-width: 76px; min-height: 44px; } }
.logo-head span { white-space: nowrap; }
.topbtns { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.topbtns [hidden] { display: none !important; }

.banlist { display: grid; gap: 6px; margin: 6px 0; max-height: 30vh; overflow-y: auto; }
.dialog .choice input[type=checkbox] { width: 20px; height: 20px; }

.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .btnrow { flex-direction: column; } .btnrow .btn { width: 100%; } }
.rooms li.browse .btn + .btn { margin-top: 8px; }

.found { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.foundrow { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; word-break: break-word; }
.foundrow small { color: var(--muted); }

/* ---------- phone fixes: no zoom when the keyboard opens, the page follows the visible area ---------- */
html { touch-action: manipulation; }
.composer .rin, .rin { font-size: 16px !important; line-height: 1.35; }
.app { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); width: 100%; overflow: hidden; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .rooms, .members { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); }
  .overlay { overscroll-behavior: contain; }
  .composer { position: relative; }
  .fmt { max-height: calc(var(--vvh, 100dvh) - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  select, input, textarea, [contenteditable] { font-size: 16px !important; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* title on its own line, the buttons below it in a tidy row, so the room name is never squeezed */
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar > div:first-child { grid-column: 1; }
  .topbar .meta { grid-column: 2; }
  .topbtns { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  .topbtns .iconbtn { flex: 0 0 auto; }
  .topbtns .nickbtn { flex: 1 1 auto; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .rooms li.browse .btn { min-height: 46px; } .room .x { width: 36px; height: 36px; } }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* slimmer top bar: smaller buttons, tighter rows, more room for the chat */
  .topbar { padding: 3px 8px 2px; gap: 2px 8px; }
  .topbar .iconbtn { min-width: 36px; height: 34px; padding: 0 8px; border-radius: 8px; }
  .topbar .topbtns > button.roombtn, .topbar .topbtns > button.topicbtn { height: 38px; min-height: 38px; }
  .topbar .iconbtn .ico { width: 18px; height: 18px; }
  .topbar .iconbtn.nickbtn { height: 34px; padding: 0 10px; font-size: .88em; }
  .topbtns { gap: 5px; flex-wrap: nowrap; }
  .topbar .title { font-size: 1em; }
  .topbar .topic { padding: 0 2px 2px; font-size: .8em; line-height: 1.25; }
  .topicrow { min-height: 0; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* one slim row: menu, room name, nickname, people, settings. Operator buttons drop to a thin row of their own only when present */
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; row-gap: 2px; }
  .topbar .meta { display: none; }
  .topbtns { display: contents; }
  .topbtns > .iconbtn { grid-row: 1; }
  .topbtns > button[aria-label="Room settings"], .topbtns > button[aria-label="Edit the topic"] { grid-row: 2; justify-self: end; height: 30px; min-height: 0; }
  .topbtns > button[aria-label="Room settings"] { grid-column: 3; }
  .topbtns > button[aria-label="Edit the topic"] { grid-column: 4; }
  .topbtns > button[hidden] { display: none !important; }
  .topbar > div:first-child { grid-column: 1; grid-row: 1; }
  .topicrow { grid-column: 1 / -1; grid-row: 3; }
  .topbar .iconbtn.nickbtn { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.addr { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; word-break: break-all; user-select: all; -webkit-user-select: all; background: var(--panel2); margin-bottom: 8px; }
.infotopic { margin: 0 0 6px; word-break: break-word; }
.dialog .btn .ico { display: inline-block; vertical-align: middle; margin-right: 6px; width: 16px; height: 16px; }

/* ---------- buddy list (like the TextCE client's) ---------- */
.btabs { display: flex; gap: 8px; margin-bottom: 10px; }
.btab { border: 0; background: var(--panel2); color: var(--text); border-radius: 999px; padding: 8px 18px; cursor: pointer; font-weight: 600; }
.btab.on { background: var(--accent); color: #fff; }
.blist { display: grid; gap: 0; min-height: 160px; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bgroup { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--panel2); color: var(--muted); font-weight: 700; padding: 8px 10px; border-radius: 6px; margin: 4px 0; cursor: pointer; }
.bgroup .ico { width: 18px; height: 18px; transition: transform .15s; }
.bgroup.shut .ico { transform: rotate(-90deg); }
.brow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.bdot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; opacity: .5; }
.bdot.on { background: #22c55e; opacity: 1; }
.bname { display: grid; flex: 1; min-width: 0; }
.bname small { color: var(--muted); }
.bmenu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px 22px; }
.bmenu[hidden] { display: none; }
.bfoot { display: flex; justify-content: center; margin-top: 12px; }
.badd { display: flex; gap: 8px; width: 100%; }
.badd input { flex: 1; min-width: 0; }
.buddydlg .dialog { max-width: 420px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .btab { flex: 1; text-align: center; padding: 10px 6px; } .badd { flex-direction: column; } }

/* the colour schemes set the accent from the palette; the accent choices in settings still override it */
[data-accent="theme"] { --accent: var(--t-accent, #14b8a6); --accent-ink: var(--t-accent-ink, #ffffff); }

/* black and white accents; white gets a grey outline so it can be seen on a light page */
[data-accent="black"] { --accent: #111111; --accent-ink: #ffffff; }
[data-accent="white"] { --accent: #ffffff; --accent-ink: #111111; }
[data-accent="white"] .btn:not(.ghost), [data-accent="white"] .send, [data-accent="white"] .btab.on, [data-accent="white"] .fmt .btn:not(.ghost) { border: 1px solid #9a9a9a; box-shadow: 0 -2px 0 #9a9a9a inset; }
.swatch[data-accent="white"] { border: 2px solid #9a9a9a; box-shadow: 0 -3px 0 #9a9a9a inset; }

/* no thick coloured edges: plain hairlines, and highlights come from the background */
.topbar { border-bottom: 1px solid var(--line); }
.room, .line { border-left: 0; }
.room.active, .room.unread, .room.hot, .line.mention { border-left: 0; }
.room.active { background: var(--panel2); }
.card { border-top: 1px solid var(--line); }

/* unread and mention indicator: a small marker to the left of the name */
.room .mark { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.room.unread .mark { background: var(--brand); }
.room.hot .mark { background: var(--brand-red); }
.room.hot { background: transparent; }
.room.hot.active, .room.active { background: var(--panel2); }
.unread-dot { display: none; }

/* room list icons, as in the Textce client: an outline per kind of window; grey at rest, green with new messages, red for a mention or private message */
.room .rico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.room.unread .rico { color: var(--join); }
.room.hot .rico { color: var(--brand-red); }
.room .mark { display: none; }


/* the Textce sidebar look: icon sizes and colours as in the Textce client (grey, green #34C759 unread, red #DB332E mention) */
.room { --rowbg: var(--panel); }
.room:hover, .room.active { --rowbg: var(--panel2); }
.room .rico { width: 20px; height: 20px; flex: none; display: block; color: var(--muted); }
.room .rico-status { width: 18px; height: 18px; margin: 0 1px; }
.room .rico-highlights { color: var(--text); }
.room.unread .rico { color: #34c759; }
.room.hot .rico { color: #db332e; }

/* ---------- more room around the fields and buttons in dialogs ---------- */
.dialog { padding: 22px; }
.dialog h2 { margin: 0 0 16px; }
.dialog label { margin: 18px 0 8px; }
.dialog > .hint, .dialog > p { margin: 10px 0; }
.dialog input[type=text], .dialog input[type=password], .dialog select { padding: 11px 12px; margin-bottom: 4px; }
.dialog > .btn, .dialog > input + .btn, .dialog > select + .btn, .dialog > .banlist, .dialog > .addr { margin-top: 12px; }
.dialog .btn { min-height: 40px; }
.dialog .btnrow { margin: 12px 0 16px; gap: 10px; }
.dialog .choices { gap: 10px; margin: 8px 0 12px; }
.dialog .choice { padding: 14px; }
.dialog .row { margin-top: 24px; gap: 10px; }
.dialog .badd { margin-top: 6px; gap: 10px; }
.dialog .bfoot { margin-top: 18px; }
.dialog .blist { margin-bottom: 8px; }
.dialog .roomlist { margin: 12px 0; gap: 8px; }
.dialog .swatches { margin: 6px 0 10px; }
.dialog input[type=range] { margin: 6px 0 10px; }
.dialog label input[type=checkbox] { margin-right: 8px; vertical-align: middle; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .dialog label { margin: 20px 0 8px; }
  .dialog .row { margin-top: 26px; }
  .dialog .btn { min-height: 46px; }
}

/* ---------- rooms page: calm, spacious, no shadows and no hover effects ---------- */
body.lobby-body { background: var(--bg); }
#lobby { max-width: 980px; padding: 72px 24px 96px; }
.hero { text-align: center; margin-bottom: 44px; }
.heroLogo { height: 64px; width: auto; display: block; margin: 0 auto 20px; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.lobby-sub { margin: 14px 0 0; color: var(--muted); font-size: 1.2em; }
.lobby-tools { display: flex; align-items: center; gap: 20px; margin-bottom: 48px; }
.searchbox { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--panel2); border-radius: 14px; padding: 0 18px; min-height: 52px; color: var(--muted); }
.searchbox .ico { width: 20px; height: 20px; flex: none; }
.searchbox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 17px; color: var(--text); padding: 14px 0; }
.searchbox input::-webkit-search-cancel-button { opacity: .5; }
.segment { display: inline-flex; background: var(--panel2); border-radius: 12px; padding: 4px; flex: none; }
.seg { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: .95em; padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.seg.on { background: var(--bg); color: var(--text); }
.sectionhead { margin: 0 0 18px; font-size: 1.35em; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-bottom: 52px; }
.card { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 0; border-radius: 22px; padding: 26px; text-decoration: none; color: inherit; transition: none; transform: none; box-shadow: none; min-height: 190px; }
.card:hover { transform: none; box-shadow: none; border: 0; }
.cardname { display: grid; gap: 3px; min-width: 0; }
.cardname h3 { margin: 0; font-size: 1.35em; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friendly { color: var(--muted); font-size: .9em; }
.card .topic { margin: 0; color: var(--muted); font-size: 1em; line-height: 1.45; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.pop { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .95em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.on { background: #34c759; }
.go { color: var(--accent); font-weight: 600; font-size: 1.05em; }
.go::after { content: " \203A"; }
.card.start { background: transparent; border: 1.5px dashed var(--line); }
.grid { display: block; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  #lobby { padding: 40px 18px 64px; }
  .hero { margin-bottom: 30px; }
  .lobby-tools { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 34px; }
  .segment { align-self: flex-start; }
  .cards { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .card { padding: 22px; min-height: 0; }
}
/* a clear Join button: a filled pill in the accent colour (still no hover effects) */
.go { background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1em; padding: 11px 26px; border-radius: 999px; line-height: 1; }
.go::after { content: none; }
.card.start .go { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .go { padding: 14px 28px; } }
.dialog:focus { outline: none; }

.linkshow { word-break: break-all; color: var(--muted); font-size: .9em; padding: 10px 12px; border-radius: 10px; background: var(--panel2); margin: 6px 0 0; }
/* the send button is just an up arrow */
.send { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; gap: 0; }
.send .ico { width: 22px; height: 22px; }
.send .sendlbl { display: none; }

/* the logo sits next to the name; on the dark schemes it gets a light tile so its dark blue outline stays visible */
[data-theme="midnight"] .logo-head img, [data-theme="midnight"] .heroLogo { background: #ffffff; border-radius: 10px; padding: 3px; }
.logo-head img { height: 36px; width: 36px; object-fit: contain; }
.heroLogo { height: 84px; width: auto; }

.banner.left { gap: 18px; }
.banner.left .btn { margin-left: 6px; }
.acctmemo { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.acctmemo .hint { margin: 0 0 10px; }

/* the buttons under the room list stay at the bottom of the sidebar, in view even when the list is long */
.rooms ul { display: flex; flex-direction: column; }
.rooms li.browse { margin-top: auto; position: sticky; bottom: 0; background: var(--panel); padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.rooms li.browse > .btn + .btn { margin-top: 8px; }

/* the command suggestions float above the message box instead of pushing it up */
.composer .hint { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); margin: 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; z-index: 15; max-height: 6.5em; overflow-y: auto; }
.composer .hint:empty { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .composer .hint { left: 8px; right: 8px; } }

/* a question dialog with everything centred */
.dialog.center { text-align: center; }
.dialog.center .row { justify-content: center; }
.logo-head { cursor: pointer; }

/* wider room cards, topics that show more and are trimmed with "..." so a huge topic never breaks the layout */
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.card .topic { -webkit-line-clamp: 5; line-clamp: 5; overflow-wrap: anywhere; word-break: break-word; min-height: 3.6em; }
.card .topic * { max-width: 100%; }
.line .body { white-space: pre-wrap; }
.topbar .topic * { max-width: none; }

/* very long room names are cut with "..." instead of pushing the buttons around */
.topbar > div:first-child { min-width: 0; }
.topbar .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; display: inline-block; vertical-align: bottom; }
.room .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* the room name and "1 user · +nt" sit on one line, centred on the same middle */
.topbar { align-items: center; }
.topbar > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .title { display: block; line-height: 1.2; vertical-align: baseline; }
.topbar .meta { align-self: center; line-height: 1.2; white-space: nowrap; }

/* the room finder never scrolls sideways: long names and topics are cut with "..." */
.roomlist { overflow-x: hidden; }
.roomrow { min-width: 0; }
.roominfo { min-width: 0; overflow: hidden; }
.roominfo strong, .roominfo small, .roominfo .roomtopic { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog { overflow-x: hidden; }

.heroSub { max-width: 620px; margin: 14px auto 0; font-size: 1.08rem; line-height: 1.55; color: var(--muted); }
.promo { margin: 64px 0 24px; padding-top: 8px; border-top: 1px solid var(--line); }
.promoHead { margin: 34px 0 16px; font-size: 1.35em; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-align: center; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.tile h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--text); }
.tile p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.promoSteps { max-width: 640px; margin: 0 auto; padding-left: 22px; color: var(--text); line-height: 1.6; }
.promoSteps li { margin: 6px 0; }
.promoLinks { text-align: center; margin: 22px 0 0; color: var(--muted); }
@media (max-width: 820px) { .tiles { grid-template-columns: 1fr; } .heroSub { font-size: 1rem; } .promo { margin-top: 44px; } }

.faq { max-width: 720px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; margin: 0 0 8px; background: var(--panel); }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 650; color: var(--text); }
.faq p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }
.tiles + .promoHead { margin-top: 44px; }

.heroCta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0 14px; }
.ctaMain, .ctaGhost { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 10px; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; border: 1px solid var(--brand, #1c4570); }
.ctaMain { background: var(--brand, #1c4570); color: #fff; }
.ctaGhost { background: transparent; color: var(--brand, #1c4570); }
@media (max-width: 600px) { .ctaMain, .ctaGhost { width: 100%; } .heroCta { flex-direction: column; } }

.lobby-body { overflow-x: clip; }
.lbBand { margin: 36px calc(50% - var(--cw, 100vw) / 2) 0; padding: clamp(34px, 6vw, 60px) 24px; color: #fff; }
.lbBand.lb1 { background: #102a56; } .lbBand.lb2 { background: #b91f3b; } .lbBand.lb3 { background: #1f6fb2; }
.lbIn { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.lbBand h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.lbBand p { margin: 0 0 18px; max-width: 460px; opacity: .92; font-size: 1.05rem; color: #fff; }
.lbBtn { display: inline-block; padding: 12px 24px; border-radius: 10px; background: #fff; color: #102a56; font-weight: 650; text-decoration: none; }
.lbBtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lbArt svg { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 700px) { .lbIn { grid-template-columns: 1fr; gap: 16px; } .lbArt svg { max-width: 140px; margin: 0; } .lbBtn { display: block; text-align: center; } .lbBand { padding: 30px 16px; } }

.lbBand + .lbBand { margin-top: 0; }
.heroCta { margin-bottom: 0; }

.lbnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid #dde3ec; }
.lbnavin { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; }
.lbbrand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #102a56; text-decoration: none; white-space: nowrap; }
.lbbrand img { width: 36px; height: 36px; border-radius: 9px; }
.lblinks { display: flex; gap: 4px; list-style: none; margin: 0 0 0 12px; padding: 0; }
.lblinks a { display: block; padding: 8px 12px; border-radius: 8px; color: #17233a; text-decoration: none; font-size: .95rem; }
.lblinks a:hover { background: #f5f8fc; }
.lbright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lbq { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid #102a56; border-radius: 50%; color: #102a56; font-weight: 700; text-decoration: none; background: #fff; }
.lbq:hover { background: #102a56; color: #fff; }
.lbstart { display: inline-flex; padding: 9px 18px; border-radius: 10px; background: #b91f3b; color: #fff; font-weight: 650; font-size: .92rem; text-decoration: none; }
.lbstart:hover { background: #9c1830; color: #fff; }
@media (max-width: 991px) { .lblinks { display: none; } .lbnavin { padding: 0 68px 0 14px; } }
@media (max-width: 600px) { .lbbrand span { display: none; } .lbstart { display: none; } }

.createbox { margin: -22px 0 40px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.createText h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--text); }
.createText p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.createRow { display: flex; align-items: stretch; gap: 10px; }
.createRow .hashmark { display: grid; place-items: center; width: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--muted); font-weight: 700; font-size: 1.1rem; }
.createRow input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--input, #fff); color: var(--text); font: inherit; font-size: 17px; outline: 0; }
.createRow input:focus { border-color: var(--brand, #1c4570); }
.createBtn { padding: 0 26px; border: 1px solid var(--brand, #1c4570); border-radius: 12px; background: var(--brand, #1c4570); color: #fff; font: inherit; font-weight: 650; cursor: pointer; white-space: nowrap; }
.createMsg { min-height: 1.3em; margin: 8px 0 0; color: var(--brand-red, #b91f3b); font-size: .9rem; }
@media (max-width: 600px) { .createbox { margin-top: -10px; padding: 16px; } .createRow { flex-wrap: wrap; } .createRow input { flex: 1 1 60%; } .createBtn { flex: 1 1 100%; padding: 13px 0; } }

/* the /chat/ top bar is pixel-identical to the home page's bar (same width, height, gaps and fonts) */
.lbnav { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; font-size: 16px; }
.lbnavin { max-width: 1120px; padding: 0 24px; height: 68px; gap: 28px; }
.lbbrand { font-size: 1.05rem; }
.lblinks { margin: 0 0 0 12px; }
.lbstart { line-height: 1.2; padding: 9px 18px; font-size: .92rem; }
@media (max-width: 991px) { .lbnavin { padding: 0 76px 0 24px; } }
@media (max-width: 600px) { .lbnavin { padding: 0 64px 0 16px; gap: 12px; } .lbbrand span { display: inline; } }
/* final pixel match with the Bootstrap navbar on the other pages */
.lbnav { padding: 8px 0; }
.lbbrand { margin-right: 16px; }
.lblinks a { padding: 9px 13px; }
.lbstart { padding: 10px 19px; }
@media (max-width: 600px) { .lbnavin { flex-wrap: nowrap; } .lbbrand { margin-right: 0; min-width: 0; } .lbbrand span { overflow: hidden; text-overflow: ellipsis; } }

/* touch screens have no hover: the close X is always shown there. A hidden X that only appears on :hover makes iOS use the first tap to "hover" (reveal) and only the second tap to click, which felt like having to tap twice */
@media (hover: none), (pointer: coarse) {
  .room .x { opacity: 1; width: 40px; height: 40px; }
  .room:hover { background: none; }
  .room.active:hover { background: var(--panel2); }
}

.legalfoot { max-width: 1120px; margin: 40px auto 0; padding: 16px 24px 30px; border-top: 1px solid var(--line, #dde3ec); }
.legalfoot p { margin: 0; max-width: 900px; color: #7a8492; font-size: .78rem; line-height: 1.55; }

@media (max-width: 991px) { .lbq { display: none; } }

/* house rules card over a room (ui.ts welcome()): centred on every screen size, like the whois card */
.welcome-overlay { align-items: center; padding: 12px; }
.welcome-overlay .welcome { width: min(440px, 100%); border-radius: 12px; text-align: center; padding: 26px 28px 20px; }
.welcome-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.welcome-brand img { width: 36px; height: 36px; object-fit: contain; display: block; }
.welcome-brand span { font-weight: 700; color: var(--brand); letter-spacing: .01em; white-space: nowrap; }
[data-theme="midnight"] .welcome-brand img { background: #ffffff; border-radius: 10px; padding: 3px; box-sizing: content-box; }
[data-theme="midnight"] .welcome-brand span { color: var(--text); }
.welcome-text { margin: 0; line-height: 1.55; color: var(--text); }
.welcome-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; }
.welcome-foot .btn { min-width: 160px; min-height: 42px; }
.welcome-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome-btns .btn { min-width: 120px; }
.welcome-skip { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .9em; cursor: pointer; }
.welcome-skip input { width: 18px; height: 18px; margin: 0; }

/* ===== Lobby, corporate refresh (2026-10-15): same look as the website. Lobby-only classes; the chat room layout is untouched. ===== */
.heroCta { gap: 8px 20px; align-items: center; margin-top: 26px; }
.ctaMain { min-width: 232px; background: var(--brand-red, #b91f3b); border-color: var(--brand-red, #b91f3b); color: #fff; }
.ctaMain:hover { background: #9c1830; border-color: #9c1830; }
.ctaGhost { border: 0; background: none; min-width: 0; padding: 12px 4px; color: var(--brand, #1c4570); }
.ctaGhost::after { content: "\203A"; margin-left: 6px; font-size: 1.3em; line-height: 1; }
.ctaGhost:hover { color: var(--brand-red, #b91f3b); }
.createBtn { background: var(--brand-red, #b91f3b); border-color: var(--brand-red, #b91f3b); border-radius: 12px; }
.createBtn:hover { background: #9c1830; }
.promoHead { font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.035em; color: var(--brand, #1c4570); }
.tile { padding: 20px 22px 22px; border-radius: 16px; box-shadow: none; }
.tile h3 { color: var(--brand, #1c4570); font-weight: 650; letter-spacing: -.015em; }
.promoSteps { list-style: none; counter-reset: s; padding: 0; max-width: 640px; }
.promoSteps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; padding: 14px 0; margin: 0; border-top: 1px solid var(--line); }
.promoSteps li:last-child { border-bottom: 1px solid var(--line); }
.promoSteps li::before { content: counter(s); grid-row: 1 / 3; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--brand-red, #b91f3b); }
.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.faq details { border: 0; border-radius: 0; margin: 0; padding: 0 20px; background: none; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 16px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 0; padding: 4px 0 20px; }
.lbBand { margin-top: 56px; background: #102a56; text-align: left; }
.lbIn { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(20px, 5vw, 64px); align-items: center; max-width: 1072px; }
.lbBand h2 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.045em; }
.lbBand p { margin: 0 0 26px; color: #c9d6ea; opacity: 1; font-size: 1.1rem; }
.lbBtn { min-width: 232px; text-align: center; }
@media (max-width: 700px) { .lbBtn { display: block; min-width: 0; } .lbBand { text-align: left; } .lbBand p { margin-left: 0; } .promoSteps li { grid-template-columns: 40px 1fr; } }

/* room cards: three in a row (two on tablets, one on phones) */
.cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { min-height: 0; padding: 22px; border-radius: 16px; }
.card:hover, .tile:hover, .createbox:hover { box-shadow: none; }
@media (max-width: 860px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.lbArt svg { width: 100%; max-width: 240px; height: auto; display: block; margin-left: auto; }
@media (max-width: 700px) { .lbIn { grid-template-columns: 1fr; } .lbArt { order: -1; } .lbArt svg { max-width: 120px; margin: 0; } .lbBtn { display: block; } }

/* ===== full footer (generated from site/closing.py) ===== */
.cx-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
#lobby{padding-bottom:0}
.cx-foot{border-top:1px solid #dde3ec;background:#f5f8fc;color:#647089;font:400 .9rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.cx-foot .cx-wrap{padding-top:44px;padding-bottom:30px}
.cx-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.cx-cols h3{margin:0 0 12px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#17233a}
.cx-cols ul{list-style:none;margin:0;padding:0}.cx-cols li{margin:0 0 8px}
.cx-cols a{color:#55627a;text-decoration:none}.cx-cols a:hover{color:#102a56;text-decoration:underline}
.cx-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#102a56!important;text-decoration:none}.cx-brand img{width:30px;height:30px;border-radius:8px}
.cx-cols p{margin:12px 0 0;max-width:280px;color:#647089}
.cx-base{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:30px;padding-top:18px;border-top:1px solid #dde3ec}
.cx-flags{display:flex;gap:8px}.cx-flags img{display:block;width:28px;height:auto;border:1px solid #dde3ec;border-radius:3px;padding:2px;background:#fff}
.cx-legal{flex:1 1 100%;margin:0;color:#6a7688;font-size:.78rem;line-height:1.55;max-width:900px}
@media (max-width:991px){.cx-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.cx-ctain{grid-template-columns:1fr}.cx-art{order:-1}.cx-art svg{max-width:120px;margin:0}.cx-btn{display:flex;width:100%}}
@media (max-width:600px){.cx-wrap{padding:0 16px}.cx-cols{grid-template-columns:1fr 1fr}.cx-cols>div:first-child{grid-column:1/-1}}
@media print{.cx-cta,.cx-foot{display:none}}

/* small round Help "?" icon in the room top bar: opens /help/ in a new window */
a.iconbtn.helpbtn { text-decoration: none; color: var(--muted); }
a.iconbtn.helpbtn:hover { color: var(--text); }

/* create-a-room form sits above the search */
.hero { margin-bottom: 32px; }
.createbox, .createbox { margin: 0 0 32px; }
.lobby-tools { margin-bottom: 40px; }
@media (max-width: 600px) { .createbox { margin: 0 0 24px; } .lobby-tools { margin-bottom: 28px; } }


/* ---------- phone: ONE single-line button row, then the room name and topic on a slim line below ---------- */
.dlg-x { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 5px max(6px, env(safe-area-inset-right)) 3px max(6px, env(safe-area-inset-left)); }
  .topbar > div:first-child, .topbar .topbtns { display: contents !important; }
  .topbar .meta { display: none; }
  .center, .topbar { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .topbar .topbtns .iconbtn, .topbar .roomsbtn { flex: 0 0 auto; min-width: 40px; height: 40px; padding: 0 6px; }
  .topbar .roomsbtn { order: 1; }
  .topbar .roombtn { order: 2; }
  .topbar .topicbtn { order: 3; }
  .topbar .setbtn { order: 4; }
  .topbar .helpbtn { order: 5; }
  .topbar .nickbtn { order: 6; flex: 1 1 0; min-width: 0; max-width: none; padding: 0 8px; font-size: .9em; }
  .topbar .peoplebtn { order: 7; }
  .topbar .topbtns > button.roombtn, .topbar .topbtns > button.topicbtn { height: 40px; min-height: 40px; }
  .topbar .topbtns [hidden] { display: none !important; }
  .topbar::after { content: ""; order: 8; flex: 0 0 100%; height: 0; }
  .topbar .title { order: 9; flex: 0 1 auto; max-width: 45%; margin-left: 4px; font-size: 1em; }
  .topbar .topicrow { order: 10; flex: 1 1 0; min-width: 0; grid-column: auto; grid-row: auto; }
  .topbar .topicrow { overflow: hidden; }
  .topbar .topicrow .topic { padding: 0 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .topicrow .topic.open { white-space: normal; }
.dlg-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 2; background: var(--panel); margin: 0 -16px 6px; padding: 10px 16px 8px; }
  .dlg-head h2 { margin: 0; flex: 1; min-width: 0; }
  .dlg-x { display: inline-grid; flex: none; }
  .overlay .dialog { padding-top: 0; }
}
@media (max-width: 360px) {
  .topbar { gap: 2px 3px; }
  .topbar .topbtns .iconbtn, .topbar .roomsbtn { min-width: 36px; height: 38px; padding: 0 4px; }
  .topbar .iconbtn .ico { width: 18px; height: 18px; }
}

/* no swipe-back / pull-to-refresh bounce out of the chat by accident */
html, body.chat-body { overscroll-behavior-x: none; overscroll-behavior-y: none; }

/* breathing room in alerts: the welcome card and the short confirm boxes */
.dialog { padding: 24px 22px 22px; }
.welcome-overlay .welcome { padding: 44px 28px 34px; }
.welcome-brand { margin-bottom: 4px; }
.welcome-foot { margin-top: 26px; }
.dialog.plain { padding: 30px 24px 26px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .welcome-overlay .welcome { padding: 44px 24px 34px; }
  .dialog.plain .row { flex-direction: row; justify-content: center; margin-top: 6px; }
  .dialog.plain h2 { margin-bottom: 8px; }
  .overlay .dialog.plain { padding: 30px 20px calc(26px + env(safe-area-inset-bottom)); }
  .overlay .dialog:not(.plain):not(.welcome) { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- phone held sideways: same phone layout, one slim header line ---------- */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 480px) {
  .topbar { flex-wrap: nowrap; }
  .topbar::after { display: none; }
  .topbar .roomsbtn { order: 1; }
  .topbar .title { order: 2; flex: 1 1 0; min-width: 0; max-width: none; margin: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .roombtn { order: 3; }
  .topbar .topicbtn { order: 4; }
  .topbar .setbtn { order: 5; }
  .topbar .helpbtn { order: 6; }
  .topbar .nickbtn { order: 7; flex: 0 1 auto; max-width: 9em; }
  .topbar .peoplebtn { order: 8; }
  .topbar .topicrow { display: none !important; }
}
/* ...and with the keyboard up (very little height): shrink everything that is not the chat itself */
@media (pointer: coarse) and (max-height: 340px) {
  .topbar { padding: 2px max(6px, env(safe-area-inset-right)) 2px max(6px, env(safe-area-inset-left)); gap: 2px 4px; }
  .topbar .topbtns .iconbtn, .topbar .roomsbtn, .topbar .topbtns > button.roombtn, .topbar .topbtns > button.topicbtn { min-width: 34px; height: 34px; min-height: 34px; padding: 0 5px; }
  .topbar .topicrow { display: none !important; }
  .composer { padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 6px; }
  .composer .iconbtn, .send { min-width: 36px; height: 36px; min-height: 36px; }
  .composer .rin { min-height: 36px; padding: 6px 10px; }
  .composer .hint, .fmtpreview { display: none !important; }
  .line { padding-top: 1px; padding-bottom: 1px; }
  .log { padding: 2px 0; }
  .banner { padding-top: 2px; padding-bottom: 2px; }
}
/* the same squeeze, switched on by script when the on-screen keyboard leaves very little height (iPhones keep the page height the same) */
  html.short .topbar { padding: 2px max(6px, env(safe-area-inset-right)) 2px max(6px, env(safe-area-inset-left)); gap: 2px 4px; }
  html.short .topbar .topbtns .iconbtn, html.short .topbar .roomsbtn, html.short .topbar .topbtns > button.roombtn, html.short .topbar .topbtns > button.topicbtn { min-width: 34px; height: 34px; min-height: 34px; padding: 0 5px; }
  html.short .topbar .topicrow { display: none !important; }
  html.short .composer { padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 6px; }
  html.short .composer .iconbtn, html.short .send { min-width: 36px; height: 36px; min-height: 36px; }
  html.short .composer .rin { min-height: 36px; padding: 6px 10px; }
  html.short .composer .hint, html.short .fmtpreview { display: none !important; }
  html.short .line { padding-top: 1px; padding-bottom: 1px; }
  html.short .log { padding: 2px 0; }
  html.short .banner { padding-top: 2px; padding-bottom: 2px; }

/* sideways phone with a notch or Dynamic Island: keep the side panels and sheets clear of it */
.rooms { padding-left: env(safe-area-inset-left); }
.members { padding-right: env(safe-area-inset-right); }
@media (pointer: coarse) and (max-height: 500px) { .overlay { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }

/* the whois card: small, centred, never a full-width sheet */
.avatar { width: 44px; height: 44px; font-size: 1.25em; }
.whois-head { gap: 12px; margin-bottom: 8px; }
.whois-overlay { align-items: center !important; padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)) !important; }
.overlay .dialog.whois { width: min(400px, 100%); border-radius: 14px; padding: 16px 18px calc(14px + env(safe-area-inset-bottom)); max-height: calc(var(--vvh, 100dvh) - 24px); }
.overlay .dialog.whois .kv { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: .88em; }
.overlay .dialog.whois .kv .k { margin-top: 0; font-size: 1em; }
.overlay .dialog.whois .row { margin-top: 12px; flex-direction: row; }
.overlay .dialog.whois .row .btn { min-height: 40px; padding: 8px 14px; flex: 1 1 0; }

/* settings: short labels, two-up fields, small switches, so it fits a phone without scrolling much */
.set-field label { margin: 8px 0 4px; }
.set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.set-pair input[type=range] { width: 100%; margin: 8px 0 0; }
.set-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin-top: 10px; }
.dialog label.set-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; color: var(--text); font-size: .95em; }
.dialog label.set-check input { width: 18px; height: 18px; margin: 0; flex: none; }
.dialog .swatches { gap: 8px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .dialog .set-field label { margin: 8px 0 4px; font-size: .85em; }
  .dialog .swatch { width: 26px; height: 26px; }
  .dialog .swatches { gap: 6px; }
  .dialog .set-field select { padding: 9px 10px; }
  .dialog .set-checks { gap: 0 10px; }
  .dialog label.set-check { padding: 9px 0; }
}
@media (max-width: 340px) { .set-pair, .set-checks { grid-template-columns: 1fr; } }
@media (pointer: coarse) and (max-height: 500px) { .dialog .set-checks { grid-template-columns: repeat(3, 1fr); } }

/* Logo never clips at any text size; dialogs keep a fixed size so settings can always be reached. */
.logo-head { min-width: 0; }
.logo-head span { font-size: 15px; white-space: nowrap; }
.logo-head img { flex: none; }
.dialog { font-size: 15px; }
@media (max-width:760px), (pointer: coarse) and (max-height:500px) { .rooms .logo-head span, .logo-head span { font-size: 15px; } }
.lobby-body { background: #fff; }

/* mention lines: an earlier rule removed the left bar, so the highlight colour never showed as itself; draw it as an inset bar (no layout shift) in the exact highlight colour */
.line.mention { box-shadow: inset 3px 0 0 var(--mention-bar); }
/* dark themes: the whole mention line is the highlight colour itself, with dark text */
[data-theme="midnight"] .line.mention { background: var(--mention-bar); }
[data-theme="midnight"] .line.mention .body, [data-theme="midnight"] .line.mention .ts, [data-theme="midnight"] .line.mention .who, [data-theme="midnight"] .line.mention a { color: #1b1300 !important; }

/* a heading for search engines, screen readers and validators that the lobby script replaces with its own visible one */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* phone bars: the top bar reaches under the status bar / notch and the strips outside the app (home indicator, rubber band) wear the bars' colour, light or dark with the theme */
.topbar { border-top: env(safe-area-inset-top, 0px) solid var(--panel); }
body.chat-body { background: var(--panel); }
html { background-color: var(--panel); }

/* messages-app feel on phones: a rounded box, and emoji suggestions above it */
@media (pointer: coarse) { .composer .rin { border-radius: 20px; padding-left: 14px; padding-right: 14px; } }
.composer .hint.emojis { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; }
.composer .hint .emo { font-size: 24px; line-height: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; flex: none; }

/* ======================================================================================================================
   PHONE APP POLISH (last word on phones: a slim header, flat icon buttons, popups that fit, a menu sheet, real touch feedback)
   ====================================================================================================================== */
.sheetlist { display: grid; }
.sheetrow { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; }
.sheetrow:last-child { border-bottom: 0; }
.sheetrow strong { font-weight: 600; }
.sheetrow small { color: var(--muted); font-size: .8em; }
.overlay.sheet .dialog h2 { display: none; }
.overlay.sheet .dialog { padding-top: 6px; }
@media (max-width: 760px) {
  html { -webkit-tap-highlight-color: transparent; }
  button, .iconbtn, .send, .room, .sheetrow, .topbar .title { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
  button:active, .iconbtn:active, .room:active, .sheetrow:active { opacity: .65; }
  .send:active { transform: scale(.93); }

  /* header: menu, room name and size, people, menu sheet. Nickname, room settings, settings and help live in the sheet. */
  html .topbtns .roombtn, html .topbtns .topicbtn, html .topbtns .nickbtn, html .topbtns .setbtn, html .topbtns .helpbtn { display: none !important; }
  html .topbar { padding: 2px max(4px, env(safe-area-inset-right)) 2px max(4px, env(safe-area-inset-left)); gap: 0 6px; border-bottom-width: 1px; }
  html .topbar .topbtns { display: flex; align-items: center; gap: 0; }
  html .topbar .iconbtn { border: 0; background: transparent; width: 44px; min-width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border-radius: 12px; }
  html .topbar .iconbtn:active { background: var(--panel2); opacity: 1; }
  html .topbar .title { font-size: 1.06rem; letter-spacing: -.01em; }
  html .topbar .meta { font-size: .76rem; }
  html .topbar .topicrow { padding: 0 8px 4px; }
  html .topbar .topic { font-size: .8rem; }
  html .topbar .roomsbtn { order: 1; }
  html .topbar .title { order: 2; flex: 1 1 0; min-width: 0; max-width: none; margin: 0 2px; font-size: 1.08rem; }
  html .topbar .peoplebtn { order: 3; }
  html .topbar .morebtn { order: 4; }
  html .topbar .topicrow { padding: 0 10px 5px; gap: 5px; }
  html .topbar .topicrow::before { content: attr(data-meta); color: var(--muted); font-size: .76rem; flex: none; }
  html.kb .topicrow, html.pnl .topicrow { display: none; }
  html.kb .banner:not(.bad), html.pnl .banner:not(.bad) { padding: 0; border: 0; height: 0; overflow: hidden; }       /* never display:none: the banner is a row of the page grid, and without it the messages and the message box swap rows */

  /* message box: flat icon buttons, a pill, a round send button */
  html .composer { padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 4px; align-items: end; }
  html .composer .iconbtn { border: 0; background: transparent; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  html .composer .iconbtn:active { background: var(--panel2); opacity: 1; }
  html .composer .send { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
  html .composer .rin { min-height: 40px; padding: 9px 14px; border-radius: 20px; }
  html .line .ts { font-size: .68em; min-width: 3.3em; opacity: .85; }
  html .line { gap: 8px; }

  /* popups: tight spacing, side-by-side buttons that stay in view, content only scrolls when it truly cannot fit */
  html .overlay .dialog { padding: 0 14px calc(10px + env(safe-area-inset-bottom)); max-height: calc(var(--vvh, 100dvh) - 6px); }
  html .overlay .dialog > h2 { margin: 12px 0 6px; font-size: 1.05rem; }
  html .dlg-head { margin: 0 -14px 4px; padding: 10px 14px 6px; }
  html .dialog > label:not(.choice) { margin: 8px 0 4px; font-size: .8rem; }
  html .dialog input[type=text], html .dialog input[type=password], html .dialog input[type=search], html .dialog select { padding: 9px 12px; border-radius: 10px; }
  html .dialog .choices { gap: 6px; margin: 4px 0 6px; }
  html .dialog .choice { padding: 9px 12px; min-height: 0; gap: 10px; border-radius: 10px; }
  html .dialog .choice small { font-size: .76rem; line-height: 1.25; }
  html .dialog > .hint, html .dialog > p { margin: 6px 0; }
  html .dialog .row { flex-direction: row; flex-wrap: nowrap; gap: 8px; margin: 8px -14px 0; padding: 8px 14px 0; position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line); }
  html .dialog .row .btn { flex: 1 1 0; width: auto; min-height: 42px; padding: 8px 10px; border-radius: 10px; }
  html .overlay .dialog.plain, html .overlay .dialog.welcome { padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
  html .overlay .dialog.plain .row, html .overlay .dialog.welcome .row { position: static; margin: 12px 0 0; padding: 0; border-top: 0; background: none; }
  html .rooms li.browse button, html .rooms li.browse .btn { min-height: 40px; margin: 3px 0; }
}
.overlay.sheet .dlg-head { display: none; }
@media (max-width: 760px) and (max-height: 700px) {
  html .dialog .choice small { display: none; }
  html .dialog .choice { padding: 7px 12px; }
  html .dialog .choices { gap: 5px; margin: 2px 0 4px; }
  html .dlg-head { padding: 8px 14px 4px; }
  html .overlay .dialog > h2 { margin: 8px 0 4px; }
  html .dialog > label:not(.choice) { margin: 6px 0 3px; }
}

/* emoji on phones: a panel docked under the message box in place of the keyboard (like a messages app); the box keeps its place above it */
.composer .emopanel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.emopanel .emgrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: min(212px, calc(var(--vvh, 100dvh) * .36)); overscroll-behavior: contain; }
.emopanel .em { height: 44px; font-size: 1.55em; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.emopanel .em:active { background: var(--panel2); }
.emopanel .emobar { display: flex; justify-content: space-between; align-items: center; }
.emopanel .emokey { min-width: 58px; height: 38px; border: 0; border-radius: 12px; background: var(--panel2); color: var(--text); font: inherit; font-weight: 600; touch-action: manipulation; }
.emopanel .emokey:active { opacity: .6; }

/* the emoji picker: category tabs, a search box on a desktop, colour emoji fonts first (Windows would otherwise sometimes draw plain black symbols) */
.em, .emo, .emotab { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.emotabs { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.emotabs::-webkit-scrollbar { display: none; }
.emotab { flex: none; border: 0; background: none; font-size: 1.25em; line-height: 1; padding: 6px 9px; border-radius: 8px; cursor: pointer; touch-action: manipulation; opacity: .75; }
.emotab[aria-pressed="true"] { background: var(--panel2); opacity: 1; }
.emsearch { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.emnone { grid-column: 1 / -1; color: var(--muted); font-size: .9em; padding: 10px 4px; }
.emojimenu .emgrid { max-height: 240px; grid-template-columns: repeat(8, 1fr); }
.emopanel .emotabs { margin: 0; }
.emopanel .emgrid { max-height: min(176px, calc(var(--vvh, 100dvh) * .3)); }

/* the room list page is white from top to bottom: the page behind the body (html) used to be light grey, which showed below the first screen of cards */
html:has(body.lobby-body), body.lobby-body { background: #fff; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.badge { font-size: .78em; padding: 2px 9px; border-radius: 999px; background: var(--chip, rgba(120,120,140,.16)); color: var(--muted); border: 1px solid rgba(120,120,140,.28); }
.av { display: inline-block; margin-right: 2px; font-size: 1.05em; line-height: 1; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
#members .av, .members .av { margin-right: 4px; }

/* Operator badge: the ConferenceRooms logo stands where an emoji avatar would */
/* the operator badge: our logo on a light rounded tile with room around it, so it reads on every theme */
.av.logo { width: 1.7em; height: 1.7em; padding: .24em; box-sizing: border-box; background: #f3f4f6; border-radius: 30%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); vertical-align: -0.5em; object-fit: contain; }
.av.logo.big { width: 52px; height: 52px; padding: 9px; vertical-align: middle; }

/* Profile box: avatar picker and age */
.profile h3 { margin: 14px 0 6px; font-size: 1em; }
.profile h3:first-child { margin-top: 0; }
.profile .hint { margin: 4px 0 8px; }
.avnow { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.bigav { font-size: 2.2em; line-height: 1; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.bigav.none { font-size: 1em; color: var(--muted); }
.avtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.avtab { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 3px 11px; cursor: pointer; font: inherit; font-size: .9em; }
.avtab.on { background: var(--t-accent); color: var(--t-accent-ink); border-color: transparent; }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; }
.avpick { font-size: 1.5em; line-height: 1; padding: 6px 0; border: 2px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.avpick:hover, .avpick:focus-visible { background: var(--panel2); }
.avpick.on { border-color: var(--t-accent); }
.agerow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.agerow input[type=number], .agecard-overlay input[type=number] { width: 9em; }
.agehide { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; cursor: pointer; }
.btn.small { padding: 4px 12px; font-size: .9em; }
.agecard-overlay .dialog p { margin: 0 0 10px; }

/* back arrow of a dialog that was opened from another dialog */
.dlg-back { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 1.25em; line-height: 1; cursor: pointer; }
.dlg-back:hover, .dlg-back:focus-visible { border-color: var(--t-accent); }

/* who-is card: an avatar is just the emoji, no circle */
.avatar.bare { background: transparent; width: auto; height: auto; border-radius: 0; font-size: 1em; }
.avatar.bare .bigav { font-size: 2.6em; }
.avatar.bare .av.logo.big { width: 58px; height: 58px; padding: 10px; }
.dlg-head.hasback { display: flex; align-items: center; gap: 10px; }
.dlg-head.hasback h2 { margin: 0; }
#members .av, .members .av { display: inline-block; width: 1.4em; text-align: center; margin-right: 4px; }
#members .av.logo, .members .av.logo { width: 1.8em; height: 1.8em; padding: .26em; }
.restricted { font-weight: 700; }
[data-theme="daylight"] .av.logo { background: #e8edf4; box-shadow: inset 0 0 0 1px rgba(28,69,112,.35); }

/* no grey selection or hover bar on the room list and the people list; the open room stays bold, the picked person stays bold */
.room, .room:hover, .room.active, .room.active:hover, .room.hot.active, .room.unread.active { background: transparent; --rowbg: var(--panel); }
.members li:hover, .members li.sel { background: transparent; }
.members li.sel .name { font-weight: 700; }
.members li.away .name { opacity: .7; }
.away-tag { margin-left: 6px; color: var(--muted); font-size: .8em; font-style: italic; flex: none; }

/* people list columns: mode, avatar, nickname; each column has a fixed width so every nickname lines up */
.members li { gap: 4px; }
.members li .pfx { display: inline-block; width: 1.1em; text-align: center; flex: none; }

/* more room between the mode, the avatar and the nickname */
.members li { gap: 10px; }
.members li .pfx { width: 1.2em; }
#members .av, .members .av { margin-right: 0; }
#members .av, .members .av { flex: none; }
.members li .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the operator tile fits the same slot as an emoji, so the nick lines up with every other row */
#members .av.logo, .members .av.logo { width: 1.4em; height: 1.4em; max-height: none; padding: .17em; vertical-align: middle; margin: -.15em 0; }
.av.logo { width: 1.5em; height: 1.5em; padding: .2em; vertical-align: -0.4em; }

/* ---------- lobby sections below the room list (newer style, lp- prefix) ---------- */
.promo { display: none; }
.lpIntro, .lpFeats, .lpUses, .lpFlow, .lpFaq { max-width: 1040px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 0; }
.lpIntro { text-align: center; max-width: 780px; margin-top: 56px; border-top: 1px solid var(--line); }
.lpIntro h2, .lpFeats h2, .lpUses h2, .lpFlow h2, .lpFaq h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.04em; color: var(--brand, #1c4570); text-wrap: balance; }
.lpIntro p { margin: 0 0 14px; font-size: 1.08rem; line-height: 1.65; color: var(--muted); }
.lpLead { max-width: 640px; margin: 0 0 26px; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.lpFeats h2, .lpFeats .lpLead, .lpUses h2, .lpUses .lpLead, .lpFlow h2, .lpFaq h2 { text-align: center; margin-left: auto; margin-right: auto; }
.lpRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; }
.lpIntro .lpRow, .lpRow.center { justify-content: center; }
.lpBtn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 232px; padding: 13px 26px; border-radius: 10px; border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; background: #b91f3b; color: #fff; }
.lpBtn:hover { background: #9c1830; color: #fff; }
.lpBtn.white { background: #fff; color: #102a56; } .lpBtn.white:hover { background: #e9f0f7; color: #102a56; }
.lpMore { font-weight: 650; color: #102a56; text-decoration: none; }
.lpMore::after { content: " \203A"; font-size: 1.2em; }
.lpMore:hover { text-decoration: underline; }
.lpMore.onband { color: #fff; }
.lpFeats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 5vw, 64px); }
.lpFeats li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.lpFeats li div { display: flex; flex-direction: column; gap: 3px; }
.lpFeats b { color: var(--text); font-size: 1.04rem; letter-spacing: -.01em; }
.lpFeats li span:not(.lpTick) { color: var(--muted); line-height: 1.5; }
.lpTick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: #1f7a4d; color: #fff; }
.lpTick svg { width: 15px; height: 15px; }
.lpBand { margin: clamp(48px, 7vw, 88px) calc(50% - var(--cw, 100vw) / 2) 0; padding: clamp(40px, 6vw, 72px) 24px; color: #fff; text-align: left; }
.lpBand.violet { background: #5b3fa6; } .lpBand.navy { background: #102a56; margin-bottom: 0; }
.lpIn { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 5vw, 64px); align-items: center; max-width: 1040px; margin: 0 auto; }
.lpBand h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.lpBand p { margin: 0; max-width: 520px; font-size: 1.08rem; line-height: 1.6; color: #fff; opacity: .94; }
.lpRoles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lpRoles li { padding: 9px 16px; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; font-weight: 650; color: #fff; }
.lpGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lpUse { padding: 22px 22px 24px; border: 2px solid var(--c); border-radius: 18px; background: var(--panel); }
.lpUse.green { --c: #1f7a4d; } .lpUse.orange { --c: #c93d14; } .lpUse.violet { --c: #5b3fa6; }
.lpUseIco { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: var(--c); color: #fff; }
.lpUseIco svg { width: 26px; height: 26px; }
.lpUse h3 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -.02em; color: var(--text); }
.lpUse p { margin: 0; line-height: 1.55; color: var(--muted); }
.lpAddr { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 8px auto 30px; padding: 14px 20px; border: 2px solid #102a56; border-radius: 999px; background: var(--panel); }
.lpAddr i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1f7a4d; }
.lpAddr code { min-width: 0; overflow-wrap: anywhere; font: 600 clamp(.95rem, 2.4vw, 1.2rem)/1.3 var(--mono); color: #102a56; }
.lpCols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); }
.lpCols h3 { margin: 0 0 6px; font-size: 1.12rem; letter-spacing: -.02em; color: var(--brand, #1c4570); }
.lpCols p { margin: 0; line-height: 1.6; color: var(--muted); }
.lpFaq .faq { max-width: 760px; margin-top: 24px; }
.lpMock { padding: 16px 18px 18px; border: 2px solid rgba(255,255,255,.55); border-radius: 18px; background: #0b1c3d; font: .95rem/1.5 var(--mono); color: #fff; }
.lpMockTop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.25); }
.lpMockTop span { font-size: .8rem; opacity: .75; }
.lpMsg { margin: 4px 0; overflow-wrap: anywhere; }
.lpMsg b.c1 { color: #8fd0ff; } .lpMsg b.c2 { color: #ffc27a; }
@media (max-width: 820px) {
  .lpFeats ul, .lpGrid, .lpCols { grid-template-columns: 1fr; }
  .lpIn { grid-template-columns: 1fr; }
  .lpBtn { width: 100%; }
  .lpRow { flex-direction: column; align-items: stretch; text-align: center; }
  .lpBand { padding: 36px 16px; }
}
.lpFeats { margin-top: 56px; border-top: 1px solid var(--line); }