:root {
  color-scheme: dark;
  --bg: #11111b;
  --blur-light: blur(3px);
  --blur-medium: blur(9px);
  --blur-heavy: blur(18px);
  --panel: #181825;
  --panel-hi: #313244;
  --text: #cdd6f4;
  --muted: #7f849c;
  --line: var(--panel-hi); /* same tone as panel-hi today; change here to separate borders from surfaces */
  --brand: #a6e3a1;
  --accent: var(--brand);
  --mine: #94e2d5;
  --danger: #f38ba8;
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .boot-screen img { animation: none; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
html { background: var(--bg); }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(max(50vw, 34rem) 34rem at 50% -10rem, #1e1e2e, var(--bg));
  color: var(--text);
  font: 1rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.boot-screen {
  position: fixed;
  z-index: 102;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(max(50vw, 34rem) 34rem at 50% -10rem, #1e1e2e, var(--bg));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.boot-screen img { width: 7rem; height: 7rem; animation: boot-logo 1.1s linear infinite; }
@keyframes boot-logo { from { transform: perspective(900px) rotateY(0deg); } to { transform: perspective(900px) rotateY(360deg); } }
.auth-card .login-logo {
  filter: none;
  display: block;
  margin-inline: auto;
  will-change: transform;
}
body.booting .auth-card .login-logo { opacity: 0; transform: perspective(900px) rotateY(180deg) scale(.96); }
body.booting > :not(.boot-screen):not(.auth-modal) { visibility: hidden; }
body.booting .boot-screen { opacity: 1; visibility: visible; transition-delay: 0s; }
body.booting .auth-modal { z-index: 101; background: transparent; backdrop-filter: none; }
body.booting .auth-card { border-color: transparent; background: transparent; box-shadow: none; }
body.booting .auth-card > :not(.login-logo) { visibility: hidden; opacity: 0; pointer-events: none; }
body.boot-modal-revealing > :not(.boot-screen):not(.auth-modal):not(script) { visibility: hidden; }
body.boot-modal-revealing .auth-modal { animation: modal-reveal .5s ease-in-out both; }
body.boot-modal-revealing .auth-card { animation: card-reveal .5s ease-in-out both; }
body.boot-modal-revealing .auth-card > :not(.login-logo) { animation: page-reveal .5s ease-in-out both; }
body.boot-page-revealing > :not(.boot-screen):not(.auth-modal):not(script) { animation: page-reveal .5s ease-in-out both; }
@keyframes page-reveal { from { opacity: 0; } }
@keyframes modal-reveal { from { background: transparent; backdrop-filter: blur(0); } }
@keyframes card-reveal { from { border-color: transparent; background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  body.boot-modal-revealing *, body.boot-page-revealing * { animation: none !important; }
}

header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  min-height: calc(3.625rem + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  backdrop-filter: var(--blur-medium) saturate(1.15);
}
header .brand {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
header .brand { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; }
header .brand svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.header-logo { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); text-decoration: none; }
.header-logo .header-mark { width: 1.25rem; height: 1.25rem; }
.header-logo .header-wordmark { width: auto; height: .85rem; }
.room-heading { min-width: 0; margin-left: auto; display: grid; justify-items: end; }
.room-title { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.room-title.direct { color: var(--muted); }
.room-mark { position: relative; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--panel-hi); color: var(--muted); font: 750 .85rem/1 system-ui, sans-serif; }
.room-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
::view-transition-group(root), ::view-transition-group(mobile-nav) { animation-duration: .18s; }
html[data-transition="forward"]::view-transition-old(root) { animation: .18s ease both vt-forward-out; }
html[data-transition="forward"]::view-transition-new(root) { animation: .18s ease both vt-forward-in; }
html[data-transition="back"]::view-transition-old(root) { animation: .18s ease both vt-back-out; }
html[data-transition="back"]::view-transition-new(root) { animation: .18s ease both vt-back-in; }
html[data-transition="tab"]::view-transition-old(root) { animation: .14s ease both vt-tab-out; }
html[data-transition="tab"]::view-transition-new(root) { animation: .18s ease both vt-tab-in; }
html[data-transition="tab"]::view-transition-old(mobile-nav), html[data-transition="tab"]::view-transition-new(mobile-nav) { animation: none; }
@keyframes vt-forward-out { to { opacity: .55; transform: translateX(-12%); } }
@keyframes vt-forward-in { from { transform: translateX(100%); } }
@keyframes vt-back-out { to { transform: translateX(100%); } }
@keyframes vt-back-in { from { opacity: .55; transform: translateX(-12%); } }
@keyframes vt-tab-out { to { opacity: 0; transform: translateY(3px); } }
@keyframes vt-tab-in { from { opacity: 0; transform: translateY(3px); } }
.room-title-text { display: grid; min-width: 0; }
.room-subtitle { display: none; }
.room-title-chevron { display: none; }
.system-table { width: 100%; border-collapse: collapse; margin-top: .25rem; font: .85rem/1.35 system-ui, sans-serif; }
.system-table th { text-align: left; padding: .2rem .5rem; color: var(--muted); font-weight: 650; border-bottom: 1px solid var(--line); }
.system-table td { padding: .35rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); vertical-align: top; }
.system-table td:first-child { color: var(--brand); white-space: nowrap; }
.system-table td:nth-child(2) { color: var(--muted); text-align: right; }
.system-table tbody tr { cursor: pointer; }
.system-table tbody tr:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.recent-contacts { display: flex; gap: .25rem; padding: .25rem .25rem .5rem; overflow-x: auto; scrollbar-width: none; }
.recent-contacts::-webkit-scrollbar { display: none; }
.recent-contact { display: grid; justify-items: center; gap: .3rem; min-width: 3.9rem; padding: .35rem .25rem; border: 0; border-radius: .75rem; background: transparent; color: var(--muted); font: 600 .7rem/1 system-ui, sans-serif; }
.recent-contact .room-mark { width: 2.75rem; height: 2.75rem; }
.recent-contact small { max-width: 3.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.mobile-collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin: .5rem .65rem 0; }
.mobile-collapsible > summary::-webkit-details-marker { display: none; }
.mobile-collapsible > summary::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: -45deg; transition: rotate .15s ease; }
.mobile-collapsible[open] > summary::before { rotate: 45deg; }
.room-topic { max-width: min(46vw, 32rem); overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .68rem; line-height: 1.15; text-align: right; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.room-topic.expanded { white-space: normal; overflow-wrap: anywhere; }
.channel-menu-topic { display: none; }
header .status { display: none; }
.login .status { display: block; color: var(--muted); font-size: .9rem; }
header select, header button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-hi);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}
header button { cursor: pointer; }
header > .header-icon, .notification-control {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
}
.notification-control { position: relative; }
.bell-icon { display: block; width: 1.4rem; height: 1.55rem; background: currentColor; -webkit-mask: var(--bell) center / contain no-repeat; mask: var(--bell) center / contain no-repeat; }
.bell-icon.bell-dot { --bell: url(/icons/ui/bell-dot.svg?v=1); }
.bell-icon.bell-ring { --bell: url(/icons/ui/bell-ring.svg?v=1); width: 1.55rem; }
.bell-icon.bell-off { --bell: url(/icons/ui/bell-off.svg?v=1); }
.notification-control #enable-notifications { width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
header .room-title { border: 0; background: none; padding: 0; }
.header-dms { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: 0 .35rem; }
.header-dm { position: relative; width: 1.9rem; height: 1.9rem; margin-left: -.55rem; padding: 0; border: 0; border-radius: 50%; background: var(--panel-hi); color: var(--text); font: 700 .7rem/1 system-ui, sans-serif; cursor: pointer; }
.header-dm:first-child { margin-left: 0; }
.header-dm img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.header-dm { box-shadow: 0 0 0 .18rem var(--panel); }
.header-dm-more { display: grid; place-items: center; }
.header-dm-count { position: absolute; top: -.2rem; right: -.2rem; min-width: .95rem; height: .95rem; padding: 0 .2rem; border: 2px solid var(--panel); border-radius: 999px; background: var(--brand); color: var(--bg); font: 750 .55rem/.75rem system-ui, sans-serif; text-align: center; }
.header-dm-list { position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; min-width: 12rem; display: grid; padding: .35rem; border: 1px solid var(--line); border-radius: .75rem; background: color-mix(in srgb, var(--panel) 97%, transparent); box-shadow: 0 .75rem 2rem #0008; }
.header-dm-list button { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--text); font: .9rem/1 system-ui, sans-serif; text-align: left; cursor: pointer; }
.header-dm-list button:hover { background: var(--panel-hi); }
.header-dm-list img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.header-dm-list small { margin-left: auto; color: var(--muted); }
header button svg, .message-add svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
header #enable-notifications.busy { opacity: .55; }
header #enable-notifications.busy::after, .settings-toggle.busy::after { border-top-color: var(--brand); }
header #enable-notifications.busy .bell-icon { opacity: 0; }
.header-tooltip {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: .55rem .7rem;
  border-radius: .65rem;
  background: color-mix(in srgb, var(--panel-hi) 82%, transparent);
  color: var(--text);
  box-shadow: 0 .7rem 2rem #0007;
  backdrop-filter: var(--blur-light) saturate(1.2);
  font: .8rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}
header select { max-width: 10.5rem; }

.rooms {
  position: fixed;
  z-index: 25;
  inset: 0;
  background: #0006;
  backdrop-filter: var(--blur-light);
}
.rooms-enter, .rooms-leave { transition: opacity .18s ease; }
.rooms-enter .rooms-sheet, .rooms-leave .rooms-sheet { transition: translate .18s ease; }
.rooms-hidden { opacity: 0; }
.rooms-hidden .rooms-sheet { translate: -100% 0; }
.rooms-visible { opacity: 1; }
.rooms-visible .rooms-sheet { translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .rooms-enter, .rooms-leave, .rooms-enter .rooms-sheet, .rooms-leave .rooms-sheet { transition: none; } }
/* Desktop: the sidebar docks as a fixed rail and the chat leans right of it. */
/* ponytail: rail is 15rem (240px); keep the rail width in one place if it ever varies. */
@media (not (pointer: coarse)) {
  .notification-control #enable-notifications { border: 0; background: transparent; color: var(--muted); }
  .notification-control #enable-notifications:hover, .notification-control #enable-notifications:focus-visible { color: var(--brand); }
  .composer-plus { order: -1; }
  body.rooms-docked .rooms { background: transparent; backdrop-filter: none; z-index: 21; pointer-events: none; }
  body.rooms-docked .rooms-sheet { translate: none !important; box-shadow: none; opacity: 1 !important; width: 15rem; background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); pointer-events: auto; }
  body.rooms-docked header { z-index: 22; padding-inline: calc(15rem + 3rem) 3rem; }
  /* Desktop header: channel name and topic lead on the left, bell and unread DMs sit on the right. */
  .room-heading { order: -1; margin-left: 0; margin-right: auto; justify-items: start; }
  .room-title { color: var(--text); }
  .room-title-text { justify-items: start; text-align: left; line-height: 1.2; }
  .room-title-text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .room-subtitle { display: block; overflow: hidden; max-width: min(46vw, 34rem); color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .notification-control #enable-notifications { width: 2.25rem; height: 2.25rem; border-radius: .5rem; }
  .notification-control #enable-notifications:hover, .notification-control #enable-notifications:focus-visible { background: var(--panel-hi); }
  .bell-icon { width: 1.1rem; height: 1.2rem; }
  .bell-icon.bell-ring { width: 1.2rem; }
  /* 8. Send button fades on desktop; Enter sends. */
  .composer .composer-send { opacity: .2; transition: opacity .15s ease, transform .1s ease; }
  .composer .composer-send:disabled { opacity: .12; }
  .composer:focus-within .composer-send:not(:disabled), .composer .composer-send:not(:disabled):hover, .composer .composer-send:focus-visible { opacity: 1; }
  /* 3. Nick in the UI sans, body stays mono. */
  .chat .msg .nick { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .92em; font-weight: 500; letter-spacing: .01em; }
  /* 4. Lighter mention chips. */
  .chat .msg .body .mention { padding: 0 .15rem; background: transparent; font-weight: 500; }
  .chat .msg .body .mention:hover, .chat .msg .body .mention:focus-visible { background: color-mix(in srgb, var(--brand) 16%, transparent); }
  .chat .msg .body .mention.me { background: color-mix(in srgb, var(--mine) 14%, transparent); }
  /* 5. Room list scrolls fully clear of the fixed footer. */
  body.rooms-docked .rooms-sheet { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .header-logo { position: absolute; left: 1rem; top: 50%; display: inline-flex; align-items: center; gap: .4rem; padding: 0; translate: 0 -50%; }
  .header-logo .header-mark { width: 1.5rem; height: 1.5rem; }
  .header-logo .header-wordmark { width: auto; height: 1rem; }
  /* Public read-only: header content sits on the 860px chat column edges, title on the right. */
  body.rooms-docked header.public { padding-inline: max(1rem, calc((100% - 860px) / 2 + 1rem)); }
  header.public .header-logo { position: static; translate: none; }
  header.public .room-heading { order: 0; margin-left: auto; margin-right: 0; justify-items: end; }
  header.public .room-title-text { justify-items: end; text-align: right; }
  body.rooms-docked .chat { left: calc(15rem + 3rem); right: 3rem; width: auto; margin-inline: 0; }
  body.rooms-docked .composer, body.rooms-docked .composer.tall { left: calc(15rem + 3rem); right: 3rem; width: auto; translate: none; }
  /* Members panel: a 15rem right rail; chat and composer give way. */
  body.rooms-docked .chat, body.rooms-docked .composer, body.rooms-docked .composer.tall { transition: right .28s cubic-bezier(.2, .7, .2, 1); }
  body.rooms-docked.members-docked .chat, body.rooms-docked.members-docked .composer, body.rooms-docked.members-docked .composer.tall { right: calc(15rem + 3rem); }
  .members-panel { position: fixed; z-index: 19; top: calc(3.625rem + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; width: 15rem; overflow-y: auto; padding: .75rem .6rem 1.5rem; translate: 100% 0; pointer-events: none; transition: translate .28s cubic-bezier(.2, .7, .2, 1); background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); scrollbar-width: none; }
  .members-panel.open { translate: 0 0; pointer-events: auto; }
  @media (prefers-reduced-motion: reduce) { .members-panel, body.rooms-docked .chat, body.rooms-docked .composer { transition: none; } }
  .members-panel::-webkit-scrollbar { display: none; }
  /* Right cluster order: unread DMs, bell, members. */
  .header-dms { order: 1; }
  .notification-control { order: 2; }
  header > .members-toggle { order: 3; }
  header > .members-toggle { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); }
  header > .members-toggle:hover, header > .members-toggle:focus-visible { background: var(--panel-hi); color: var(--text); outline: none; }
  header > .members-toggle .members-icon { width: 1.2rem; height: 1.2rem; }
  header > .members-toggle.active { color: var(--brand); background: transparent; }
}
@media (not (pointer: coarse)) {
  .channel-row { border-radius: 6px; }
  .channel-row > .room { background: transparent; }
  .channel-row > .room:hover, .channel-row > .room.active { background: transparent; }
  .channel-row:hover { background: color-mix(in srgb, var(--panel-hi) 55%, transparent); }
  .channel-row:has(.room.active) { background: var(--bg); }
  .channel-row:has(.room.active):hover { background: color-mix(in srgb, var(--bg) 90%, #000); }
  .channel-row:has(.room.active) .room { color: var(--text); }
  .channel-row:has(.room.active) .room small { color: var(--muted); }
  .room.active .room-mark { box-shadow: 0 0 0 2px var(--brand); }
  .room.active.draft-room, .room.active.thread-room { background: var(--bg); color: var(--text); }
  .room.active.draft-room:hover, .room.active.thread-room:hover { background: color-mix(in srgb, var(--bg) 90%, #000); }
  .channel-kebab { margin-right: 4px; opacity: 0; transition: opacity .12s ease; }
  .channel-row:hover .channel-kebab, .channel-row:focus-within .channel-kebab { opacity: 1; }
}
.rooms-sheet {
  width: min(300px, calc(100vw - 28px));
  height: 100%;
  min-height: 100%;
  display: flex;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-direction: column;
  padding: calc(4rem + env(safe-area-inset-top, 0px)) 14px calc(5rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--panel) 72%, var(--panel-hi));
  box-shadow: 16px 0 45px #0005;
  backdrop-filter: blur(14px) saturate(1.1);
}
.rooms-sheet::-webkit-scrollbar { display: none; }
.section-title { display: flex; align-items: center; gap: .25rem; width: 100%; margin: 14px 0 5px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font: 650 .75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; text-transform: uppercase; letter-spacing: .09em; cursor: pointer; }
.section-title svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .12s ease; }
.section-title.collapsed svg { transform: none; }
.section-title:focus-visible { outline: none; color: var(--text); }
.section-more { width: 100%; padding: .4rem .6rem; border: 0; background: transparent; color: var(--muted); font: .75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.section-more:hover, .section-more:focus-visible { color: var(--brand); outline: none; }
.room { width: 100%; display: flex; align-items: center; gap: .5rem; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.room:hover { background: color-mix(in srgb, var(--panel-hi) 55%, transparent); }
.room.active { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
.room small { color: var(--muted); }
.draft-room .room-mark svg { width: .9rem; height: .9rem; }
.lock-icon { display: block; width: .6rem; height: .85rem; background: currentColor; -webkit-mask: url(/icons/ui/lock.svg?v=1) center / contain no-repeat; mask: url(/icons/ui/lock.svg?v=1) center / contain no-repeat; }
.draft-room > span:last-child { min-width: 0; display: grid; }
.draft-room small { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.thread-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-tooltip { position: fixed; z-index: 70; width: min(18rem, calc(100vw - 1rem)); padding: .5rem .6rem; border: 1px solid var(--line); border-radius: .5rem; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 .6rem 1.5rem #0009; color: var(--text); font: .76rem/1.35 system-ui, sans-serif; pointer-events: none; }
.thread-tooltip.above { translate: 0 -100%; }
.rooms-sheet { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.channel-row { position: relative; display: flex; align-items: center; }
.channel-row > .room { min-width: 0; flex: 1; width: auto; }
.rooms-sheet .room { gap: 1.05rem; }
.rooms-sheet .room-mark { translate: .6rem 0; }
.channel-kebab { width: 2rem; height: 2rem; border: 0; border-radius: .45rem; background: transparent; color: var(--muted); font: 700 1.1rem/1 system-ui, sans-serif; cursor: pointer; }
.channel-kebab:hover { background: var(--panel-hi); color: var(--text); }
.channel-menu { position: absolute; z-index: 4; top: calc(100% - .2rem); right: 0; min-width: 9rem; padding: .3rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); box-shadow: 0 .8rem 2rem #0008; }
.channel-menu button, .message-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .35rem; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.menu-icon { display: block; width: .95rem; height: .95rem; flex: 0 0 auto; }
.menu-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.channel-menu button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.channel-menu button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.channel-menu button.danger { color: var(--danger); }
.channel-menu button.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.available-room { justify-content: space-between; color: var(--muted); }
.available-room span:last-child { color: var(--brand); font-size: .78rem; font-weight: 700; }
.unread-badge { min-width: 1.25rem; margin-left: auto; padding: .14rem .38rem; border-radius: 999px; background: var(--brand); color: var(--bg); font: 750 .68rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }
.presence-dot, .profile-status { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.presence-dot.off { background: #9aa4b2; box-shadow: 0 0 0 2px color-mix(in srgb, #9aa4b2 18%, transparent); }
.presence-dot.unverified { background: #f59e0b; box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 18%, transparent); }
.presence-dot.away { opacity: .5; }
.message-avatar .presence-dot, .room-mark .presence-dot, .profile-avatar .presence-dot { position: absolute; left: -.1rem; bottom: -.1rem; width: .25rem; height: .25rem; border: 2px solid var(--panel); }
.room-mark .presence-dot, .profile-avatar .presence-dot { box-shadow: none; }
.profile-avatar .presence-dot { cursor: pointer; }
.panel-footer { position: absolute; z-index: 2; left: 14px; bottom: max(1rem, env(safe-area-inset-bottom)); width: calc(min(300px, 100vw - 28px) - 28px); padding: 0; }
body.rooms-docked .panel-footer { left: 14px; right: auto; width: calc(15rem - 28px); pointer-events: auto; }
.profile-card { min-width: 0; display: flex; align-items: center; border: 0; border-radius: .65rem; background: transparent; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.profile-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.profile-card:hover { background: color-mix(in srgb, var(--panel-hi) 72%, transparent); }
.profile-main:focus-visible { outline: none; }
.profile-avatar { position: relative; width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--bg); font: 750 .72rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.profile-cog { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; display: block; color: var(--muted); }
.profile-cog svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-copy small { display: block; }
.profile-avatar > span, .message-avatar > span, .profile-modal-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--panel-hi); }
.profile-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.profile-copy strong, .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { display: flex; align-items: center; gap: .35rem; color: var(--text); font-size: .88rem; }
.profile-copy strong > span { overflow: hidden; text-overflow: ellipsis; }
.profile-copy .admin-badge { width: .9rem; height: .9rem; }
.profile-copy small { color: var(--muted); font-size: .7rem; }
.panel-help { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .6rem; color: var(--muted); text-decoration: none; transition: color .12s ease, background .12s ease; }
.panel-help:hover, .panel-help:focus-visible { background: var(--panel-hi); color: var(--text); }
.panel-help svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-badge { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-admin { width: 1.15rem; height: 1.15rem; }
.verify-email { color: #f9e2af; }
.history-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem 0; color: var(--muted); font: .85rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.history-pending .msg, .history-pending .date-divider, .history-pending .public-channel-intro, .history-pending .channel-intro, .history-pending .history-event { opacity: 0; pointer-events: none; }
.history-settled .channel-intro { animation: intro-in .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .04s; }
@keyframes intro-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .history-settled .channel-intro, .history-settled .msg, .history-settled .date-divider, .history-settled .public-channel-intro, .history-settled .history-event { animation: none; } }
.history-settled .msg, .history-settled .date-divider, .history-settled .public-channel-intro, .history-settled .history-event { animation: msg-in .26s cubic-bezier(.2, .7, .2, 1) both; }
.history-settled .msg { animation-delay: .12s; }

.chat {
  position: fixed;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  inset: calc(3.625rem + env(safe-area-inset-top, 0px)) 0 var(--composer-space, calc(5rem + env(safe-area-inset-bottom)));
  width: min(100%, 860px);
  margin-inline: auto;
  overflow-y: auto;
  padding: 1rem max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat::-webkit-scrollbar, .giphy-results::-webkit-scrollbar { display: none; }
/* Conversation hugs the composer like a phone messenger; older messages scroll up. */
#messages { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.message-entry { display: contents; }
.date-divider { display: flex; align-items: center; gap: .75rem; margin: 1.15rem 0 .65rem; color: var(--muted); font: 650 .75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.date-divider::before, .date-divider::after { content: ""; height: 1px; flex: 1; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.msg {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 3.25rem minmax(5.25rem, auto) minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
  line-height: 1.6;
  padding: 2px .25rem;
  border-radius: .3rem;
  outline: none;
}
.msg:focus-visible { background: color-mix(in srgb, var(--panel-hi) 38%, transparent); box-shadow: inset .125rem 0 color-mix(in srgb, var(--brand) 55%, var(--muted)); }
.msg.menu-open { z-index: 7; }
.msg:focus-visible .message-add { opacity: .65; }
.message-add {
  grid-column: 1;
  align-self: start;
  justify-self: end;
  width: .875rem;
  height: .875rem;
  margin: .3rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s ease, transform .12s ease;
}
.msg:hover .message-add, .message-add:focus-visible { opacity: .5; }
.message-add:hover { color: var(--brand); opacity: 1; transform: scale(1.1); }
.message-add:active { transform: scale(.92); }
.message-add.stamp { animation: stamp .38s cubic-bezier(.12,.8,.25,1); }
.message-add svg { width: .875rem; height: .875rem; }
.msg .time {
  grid-column: 2;
  color: color-mix(in srgb, var(--muted) 52%, transparent);
  font-size: 1rem;
  font-weight: 200;
  text-align: right;
  white-space: nowrap;
  user-select: none;
}
.msg .nick {
  grid-column: 3;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}
.msg .nick > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.msg .nick > small { flex: 0 0 auto; padding: .15rem .3rem; border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 999px; color: var(--muted); font: 700 .58rem/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.mobile-time { display: none; color: var(--muted); font-size: .68rem; white-space: nowrap; user-select: none; }
.message-avatar { display: none; position: relative; place-items: center; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--bg); font: 750 .9rem/1 system-ui, sans-serif; }
.message-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg .body { grid-column: 4; min-width: 0; overflow-wrap: anywhere; container-type: inline-size; }
.message-copy { display: block; }
.msg .body .body-seg > span:first-child { white-space: pre-wrap; }
.msg .body blockquote { display: block; margin: .15rem 0 .3rem; padding: .1rem .6rem; border-left: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); color: var(--muted); font-style: italic; }
.reaction-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
.reaction-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 1.75rem; padding: .15rem .35rem; border: 0; border-radius: 0; background: transparent; color: var(--text); font: .85rem/1 ui-monospace, monospace; white-space: nowrap; cursor: pointer; animation: reaction-in .15s ease-out; }
.glass-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--composer-space, 5rem) + .75rem); display: flex; align-items: center; gap: .5rem; max-width: calc(100vw - 2rem); padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--panel) 48%, transparent); box-shadow: 0 .5rem 1.5rem #0009; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--text); font: 650 .85rem/1 system-ui, sans-serif; translate: -50% 0; pointer-events: none; }
/* Bottom stack: nav pill, composer above it, both glass. Every offset derives from these so keyboard and safe-area math lives in one place. */
:root { --nav-h: 4.1rem; --nav-lift: max(.5rem, env(safe-area-inset-bottom, 0px)); --composer-bottom: calc(var(--kb, 0px) + var(--nav-h) + var(--nav-lift) + .5rem); }
body.kb-open { --composer-bottom: calc(var(--kb, 0px) + .5rem); }
.mobile-nav { position: fixed; z-index: 30; inset: auto 1rem var(--nav-lift); height: var(--nav-h); display: grid; grid-template-columns: repeat(3, 1fr); padding: .3rem .5rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: blur(14px) saturate(1.2); touch-action: manipulation; transition: translate .2s ease-out, opacity .2s ease-out; }
body.kb-open .mobile-nav { translate: 0 150%; opacity: 0; pointer-events: none; }
.mobile-nav button { position: relative; display: grid; place-items: center; justify-items: center; gap: .2rem; min-height: 3.4rem; padding: .45rem 0 .5rem; border: 0; background: transparent; color: var(--muted); font: 650 .78rem/1 system-ui, sans-serif; cursor: pointer; transition: color .12s ease; }
.mobile-nav button .menu-icon { display: block; width: 2.1rem; height: 1.6rem; object-fit: contain; filter: grayscale(1) opacity(.62); transition: filter .15s ease; }
.mobile-nav button .nav-dot { top: .35rem; }
.mobile-nav button.active .menu-icon { filter: none; }
.mobile-nav button.active .nav-label { color: var(--brand); }
.mobile-back { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; margin-left: -.35rem; border: 0; border-radius: .6rem; background: transparent; color: var(--text); }
.mobile-back svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav .nav-dot { position: absolute; right: calc(50% - 1.2rem); width: .42rem; height: .42rem; border-radius: 50%; background: var(--brand); }
.mobile-screen { position: fixed; z-index: 24; inset: 0 0 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.mobile-screen-body { animation: mobile-body-in .18s ease both; }
.mobile-screen.swipe-right .mobile-screen-body { animation: swipe-right-in .2s cubic-bezier(.22, .8, .3, 1) both; }
.mobile-screen.swipe-left .mobile-screen-body { animation: swipe-left-in .2s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes mobile-body-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes swipe-right-in { from { opacity: 0; transform: translateX(9%); } }
@keyframes swipe-left-in { from { opacity: 0; transform: translateX(-9%); } }
.mobile-screen-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: calc(4.6rem + env(safe-area-inset-top, 0px)); padding: calc(.95rem + env(safe-area-inset-top, 0px)) 1rem .95rem; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 750 1.3rem/1 system-ui, sans-serif; flex: 0 0 auto; }
.home-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; }
.home-brand img { width: 1.85rem; height: 1.85rem; }
.home-brand strong { display: flex; align-items: center; font: 750 1.3rem/1 system-ui, sans-serif; color: var(--text); }
.mobile-profile { width: 2rem; height: 2rem; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 50%; background: var(--panel-hi); }
.mobile-profile img { width: 100%; height: 100%; object-fit: cover; }
.mobile-profile-fixed { position: fixed; z-index: 26; top: calc(.95rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.mobile-screen-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 .5rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
.mobile-screen-body::-webkit-scrollbar { display: none; }
.mobile-spacer { margin-top: auto; min-height: 2rem; }
.mobile-row { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.15rem; padding: .58rem .65rem; border: 0; border-radius: .65rem; background: transparent; color: var(--text); text-align: left; font: 1.0625rem/1.1 system-ui, sans-serif; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mobile-row:active { background: color-mix(in srgb, var(--panel-hi) 72%, transparent); }
.mobile-row, .mobile-row:hover { text-decoration: none; }
.mobile-row .menu-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--muted); }
.mobile-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .22rem; }
.mobile-row-main small, .mobile-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-row-main strong { font-weight: 650; }
.mobile-row-main small { color: var(--muted); font-size: .875rem; }
.mobile-section-label { margin: 1.05rem .65rem .35rem; color: var(--muted); font: 700 .875rem/1 system-ui, sans-serif; }
.mobile-section-toggle { display: flex; align-items: center; gap: .35rem; width: calc(100% - 1.3rem); min-height: 2.5rem; margin-block: .4rem 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.mobile-section-toggle svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s ease; }
.mobile-section-toggle.collapsed svg { transform: none; }
.mobile-empty { margin: 1.5rem .65rem; color: var(--muted); font-size: .95rem; }
.glass-toast .toast-check { width: 1rem; height: 1rem; color: var(--brand); flex: 0 0 auto; }
.reaction-tooltip { position: fixed; z-index: 60; display: flex; align-items: center; gap: .45rem; width: max-content; max-width: min(18rem, calc(100vw - 2rem)); padding: .45rem .55rem; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: .55rem; background: transparent; box-shadow: 0 .55rem 1.5rem #000c; backdrop-filter: var(--blur-light) saturate(1.2); -webkit-backdrop-filter: var(--blur-light) saturate(1.2); color: var(--text); font: .78rem/1.25 system-ui, sans-serif; pointer-events: none; }
.reaction-tooltip strong { display: inline-flex; align-items: center; gap: .15rem; line-height: 1; color: var(--brand); }
.reaction-tooltip small { color: var(--text); font: inherit; }
.reaction-chip small { color: var(--muted); font-size: .72rem; }
.reaction-chip.mine { color: var(--brand); }
.reaction-chip.mine small { color: var(--muted); }
.reaction-chip.stamp { animation: stamp .38s cubic-bezier(.12,.8,.25,1); }
.thread-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .12s ease;
}
.thread-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.thread-avatars { display: flex; flex-direction: row-reverse; }
.thread-avatars img { width: 1.1rem; height: 1.1rem; margin-left: -.3rem; border: 1px solid var(--bg); border-radius: 50%; object-fit: cover; }
.thread-link:hover, .thread-link:focus-visible { color: var(--brand); }
.msg.action { grid-template-columns: 2rem 3.25rem auto minmax(0, 1fr); color: var(--muted); font-style: italic; }
.msg.action .nick { color: inherit; font-weight: 650; overflow: visible; }
.msg.action .nick::before { content: "* "; }
.msg .body a { color: var(--mine); }
.msg .body .mention { display: inline; padding: .05rem .3rem; border: 0; border-radius: .35rem; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
.msg .body .mention:hover, .msg .body .mention:focus-visible { background: color-mix(in srgb, var(--brand) 28%, transparent); outline: none; }
.msg .body .mention.me { background: color-mix(in srgb, var(--mine) 22%, transparent); color: var(--mine); }
.message-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.gif-label { padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.gif-label:hover, .gif-label:focus-visible { color: var(--brand); text-decoration: underline; }
.msg .body code { padding: .08rem .28rem; border-radius: .25rem; background: var(--panel-hi); color: var(--mine); font: .9em ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.edited-marker { margin-left: .35rem; color: var(--muted); font-size: .75rem; font-style: normal; }
.msg .body .fence { display: block; margin: .375rem 0 .25rem; padding: .625rem .75rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--bg); overflow-x: auto; }
.msg .body .fence code { padding: 0; background: transparent; color: var(--text); }
.fence code b, .fence code strong { color: var(--brand); font-weight: 700; }
.fence code em { color: var(--mine); font-style: normal; }
.fence code sup { color: var(--muted); font-style: italic; font-size: inherit; vertical-align: baseline; }
.fence code label { color: var(--mine); }
.fence code i { color: var(--muted); font-style: normal; }
.fence code u { text-decoration: none; color: var(--brand); }
.fence code mark { background: transparent; color: var(--brand); }
.fence code ins { color: var(--brand); text-decoration: none; }
.fence code del { color: var(--danger); opacity: .75; }
.fence code dfn { color: var(--mine); font-style: normal; }
.image-preview { position: relative; width: fit-content; margin-top: .45rem; }
.image-preview summary {
  position: absolute;
  z-index: 1;
  top: .5rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #11131acc;
  color: #fff;
  cursor: pointer;
  list-style: none;
  opacity: .6;
  transition: opacity .12s ease;
}
.image-preview summary:hover, .image-preview summary:focus-visible { opacity: 1; }
.image-preview summary::-webkit-details-marker { display: none; }
.image-preview summary svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .12s ease; }
.image-preview .image-icon { display: none; }
.image-preview:not([open]) { display: inline-block; margin: 0; vertical-align: top; }
.image-preview:not([open]) summary { position: static; margin: 0; }
.image-preview:not([open]) .image-chevron { display: none; }
.image-preview:not([open]) .image-icon { display: block; }
/* Embed cards: toggle sits top-right on a plain dark chip; text keeps clear of it. */

.embed-card .embed-copy, .embed-card .embed-player-copy { padding-right: 1.75rem; }
.msg .body img {
  display: block;
  max-width: min(100%, 440px);
  max-height: 300px;
  margin-top: 0;
  border-radius: 7px;
}
.msg .body video {
  display: block;
  max-width: min(100%, 440px);
  max-height: 300px;
  border-radius: 7px;
  background: #000;
  cursor: pointer;
}
.msg.system {
  display: block;
  margin: 12px 0 5px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 1rem;
  white-space: pre-line;
}
.msg.error { color: var(--danger); }
.history-event {
  margin: .25rem 0;
  padding: .2rem 0;
  color: var(--muted);
  opacity: .5;
  transition: opacity .12s ease;
}
.history-event:hover, .history-event[open] { opacity: 1; }
.history-event summary { display: flex; align-items: center; gap: .25rem; cursor: pointer; list-style: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.history-event:focus-visible, .history-event summary:focus-visible { outline: none; }
.history-event summary::-webkit-details-marker { display: none; }
.history-event svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s ease; }
.history-event[open] svg { transform: rotate(90deg); }
.history-event > div { padding: .25rem 0 .25rem 1.1rem; }
.system-event { user-select: none; -webkit-user-select: none; }
.system-text { white-space: pre-wrap; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid transparent; border-top-color: var(--brand); border-radius: 50%; vertical-align: -.2rem; animation: spin .8s linear infinite; }
.loading { display: inline-flex; align-items: center; gap: .5rem; }
/* Buttons: btn-primary (brand), btn-secondary (neutral), btn-danger (red). No other button classes. */
.btn-primary, .btn-secondary, .btn-danger {
  min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: .55rem; background: var(--panel-hi); color: var(--text);
  font: 700 .9rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--bg); }
.btn-danger { background: var(--danger); color: var(--bg); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .6; cursor: default; }
.btn-primary:active { transform: translateY(1px); }
.public-help-composer .btn-primary { min-height: 2.75rem; padding: .75rem 1rem; font-size: 1rem; line-height: 1.45; }
.session-expired .btn-primary { justify-self: start; font-size: .85rem; }
button[disabled].busy, .btn-primary[disabled], .btn-danger[disabled] { position: relative; color: transparent !important; }
button[disabled].busy::after, .btn-primary[disabled]::after, .btn-danger[disabled]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; border: 2px solid transparent; border-top-color: #11111b; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, button[disabled]::after { animation-duration: 2s; } }
.help-list { display: grid; gap: .3rem; }
.help-item { display: contents; }
.help-line { display: block; }
.help-docs { display: block; margin-top: .25rem; color: var(--brand); text-decoration: none; font-weight: 650; }
.help-docs:hover { text-decoration: underline; }
.help-line strong { margin-right: .45rem; color: color-mix(in srgb, var(--brand) 45%, var(--muted)); font-weight: 650; }
.reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  position: fixed;
  z-index: 61;
  width: max-content;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: .35rem .45rem;
  border-radius: .5rem;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: transparent;
  box-shadow: 0 .5rem 1.5rem #000c;
  backdrop-filter: blur(.5rem) saturate(1.2);
  -webkit-backdrop-filter: blur(.5rem) saturate(1.2);
  animation: picker-in .14s ease-out;
}
.picker-reaction { display: inline-flex; align-items: center; gap: .15rem; border: 0; border-radius: .3rem; background: transparent; color: var(--text); padding: .2rem; cursor: pointer; opacity: .7; transition: opacity .12s ease, transform .12s ease; }
.picker-reaction .pr-emoji { font-size: 1.25rem; line-height: 1; }
.picker-reaction .pr-count { color: var(--muted); font: 650 .7rem/1 ui-monospace, monospace; }
.picker-reaction:hover { opacity: 1; transform: scale(1.16); }
.message-more {
  position: absolute;
  z-index: 3;
  top: -.2rem;
  right: .2rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: .45rem;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  backdrop-filter: blur(.75rem);
  transition: color .12s ease, opacity .12s ease;
}
.message-more svg { width: 1rem; height: 1rem; fill: currentColor; }
.msg:hover .message-more, .msg:focus-within .message-more, .message-more[aria-expanded="true"] { opacity: .75; }
.message-more:hover, .message-more:focus-visible { color: var(--text); opacity: 1; }
.message-menu {
  position: absolute;
  z-index: 6;
  top: 1.8rem;
  right: .2rem;
  min-width: 10rem;
  padding: .3rem;
  border-radius: .65rem;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 .75rem 2rem #0008;
  backdrop-filter: blur(1rem) saturate(1.15);
}
.message-menu.popover-up { top: auto; bottom: calc(100% - .3rem); }
.message-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .4rem; background: transparent; color: var(--text); font: .85rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.message-menu button:hover, .message-menu button:focus-visible { background: var(--panel-hi); outline: none; }
.message-menu button.danger { color: var(--danger); }
@keyframes picker-in { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes reaction-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: .5; } }
@keyframes stamp { 0% { transform: scale(.65); } 55% { transform: scale(1.28); filter: drop-shadow(0 0 8px var(--brand)); } 100% { transform: scale(1); filter: none; } }

.giphy-results {
  position: fixed;
  z-index: 19;
  inset: auto 0 var(--composer-space, calc(5rem + env(safe-area-inset-bottom)));
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .5rem .75rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
}
.giphy-results::after { content: "GIPHY"; align-self: end; color: var(--muted); font: .65rem/1 ui-monospace, monospace; }
.giphy-results button { flex: 0 0 auto; padding: .18rem; border: 2px solid transparent; border-radius: .48rem; background: none; cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.giphy-results button.selected { border-color: var(--brand); transform: translateY(-.1rem); }
.giphy-results img { display: block; width: 5rem; height: 4rem; object-fit: cover; border-radius: .3rem; }
.command-palette { position: fixed; z-index: 60; display: grid; max-height: min(18rem, 45vh); overflow-y: auto; padding: .35rem; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--panel) 65%, transparent); box-shadow: 0 .75rem 2rem #0008; backdrop-filter: blur(.5rem) saturate(1.2); -webkit-backdrop-filter: blur(.5rem) saturate(1.2); scrollbar-width: none; -ms-overflow-style: none; }
.command-palette::-webkit-scrollbar { display: none; }
.command-palette button { display: flex; align-items: baseline; gap: .7rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.command-palette button:hover, .command-palette button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); outline: none; }
.command-palette code { min-width: 4.8rem; color: var(--brand); font: .85rem/1 ui-monospace, monospace; }
.command-palette button.danger code, .command-palette button.danger:hover { color: var(--danger); }
.mention-palette button { align-items: center; gap: .6rem; padding: .4rem .5rem; }
.mention-palette button.active { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--text); }
.mention-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: #11111b; font: 750 .8rem/1 system-ui, sans-serif; }
.mention-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mention-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.mention-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mention-copy strong { color: var(--text); font-size: .9rem; }
.mention-copy small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.mention-hint { margin-left: auto; color: var(--muted); font-size: .8rem; }
.composer {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(calc(100% - 1rem), 860px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  padding: .375rem .6rem;
  border-radius: 999px;
  /* Native feel: taps never start a double-tap zoom or a delayed click. */
  touch-action: manipulation;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  box-shadow: 0 .5rem 1.5rem #0007;
  backdrop-filter: blur(14px) saturate(1.2);
  translate: -50% 0;
  transition: background-color .15s ease;
}

.composer-editor {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 1.5rem;
  max-height: 10rem;
  overflow-y: auto;
}
.composer-input {
  display: block;
  width: 100%;
  height: 1.5rem;
  max-height: 10rem;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 0 .25rem;
  font: 1rem/1.5 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  overflow-wrap: anywhere;
  caret-color: var(--brand);
}
.composer-input::placeholder { color: var(--muted); opacity: .78; }
.composer-nick {
  flex: 0 0 auto;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: .5rem;
  color: var(--muted);
  font: .85rem/1 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  opacity: .7;
}
.composer.tall { align-items: start; border-radius: 1.25rem; }
.composer-nick.editing { color: var(--mine); }
.composer-plus {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, transform .1s ease;
}
.composer-plus:hover { color: var(--brand); }
.composer-plus:active { transform: scale(.92); }
.composer-plus { order: -1; }
.composer-plus img { display: block; width: 1.2rem; height: 1.2rem; }
.composer-send {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  box-shadow: none;
  cursor: pointer;
  transition: transform .1s ease;
}
.composer-send img { display: block; width: 1.5rem; height: 1.5rem; transition: filter .15s ease, opacity .15s ease; }
.composer-send:disabled { cursor: default; color: color-mix(in srgb, var(--muted) 60%, transparent); box-shadow: none; opacity: .5; filter: saturate(0); }

.composer-send:not(:disabled):active { transform: scale(.92); }
.composer-plus:focus-within { outline: .125rem solid var(--brand); outline-offset: .125rem; }
.custom-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 1rem; background: #09091040; backdrop-filter: var(--blur-light); }
.profile-dialog-card, .notice-card, .auth-card, .delete-dialog { width: min(27rem, calc(100vw - 2rem)); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--panel) 96%, transparent); color: var(--text); box-shadow: 0 1.5rem 5rem #000b; }
.delete-dialog::backdrop { background: #09091040; backdrop-filter: var(--blur-light); }
.profile-dialog-card { position: relative; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.35rem; }
.profile-panels { overflow: hidden; }
.mobile-settings-head { display: none; }
.profile-close { position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.35rem; cursor: pointer; }
.profile-close:hover, .profile-close:focus-visible { background: var(--panel-hi); color: var(--text); outline: none; }
.profile-heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.profile-heading h2 { display: flex; align-items: center; gap: .4rem; margin: 0; font: 700 1.2rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.profile-heading p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.profile-dialog-card .profile-modal-avatar { width: 4rem; height: 4rem; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--bg); font: 750 1.75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.avatar-upload { position: relative; cursor: pointer; }
.avatar-upload::after { content: "Change"; position: absolute; inset: auto 0 0; padding: .25rem 0; background: #11111bb8; color: var(--text); font: 650 .62rem/1 system-ui, sans-serif; text-align: center; opacity: 0; transition: opacity .12s ease; }
.avatar-upload:hover::after, .avatar-upload:focus-within::after { opacity: 1; }
.avatar-upload.busy::after { content: ""; inset: 0; margin: auto; width: 1.2rem; height: 1.2rem; padding: 0; border: 2px solid transparent; border-top-color: var(--brand); border-radius: 50%; background: transparent; opacity: 1; animation: spin .8s linear infinite; }
.profile-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-dialog-card form { display: grid; gap: .75rem; }
.irc-settings h3, .irc-credential h4 { margin: 0 0 .35rem; }
.irc-settings > .mobile-settings-body > p, .irc-credential > p { margin: 0 0 .9rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.irc-device-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin-bottom: .8rem; }
.irc-device-row { display: flex; min-width: 0; min-height: 3rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: .6rem; background: color-mix(in srgb, var(--panel-hi) 42%, transparent); }
.irc-device-row > span { min-width: 0; flex: 1; }
.irc-device-row > button { flex-shrink: 0; }
.irc-device-remove-all { justify-self: end; }
.irc-device-row strong, .irc-device-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irc-device-row strong { font: 650 .88rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.irc-device-row small { color: var(--muted); font-size: .7rem; }
.irc-connect-button { width: 100%; }
.irc-device-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.irc-device-form { padding: .7rem; border: 1px solid var(--line); border-radius: .6rem; background: color-mix(in srgb, var(--panel-hi) 35%, transparent); }
.irc-device-form > p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.irc-device-form > p a, .irc-settings > .mobile-settings-body > p a { color: var(--brand); }
.irc-credential { display: grid; gap: .7rem; }
.irc-password { display: flex; align-items: stretch; gap: .45rem; }
.irc-password code { min-width: 0; flex: 1; padding: .65rem; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); color: var(--brand); font: .78rem/1.35 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.irc-password button { border: 0; border-radius: .55rem; padding: 0 .8rem; color: var(--text); font-weight: 700; }
.irc-config { overflow: hidden; border: 1px solid var(--line); border-radius: .6rem; }
.irc-config > div { display: flex; align-items: center; justify-content: space-between; padding: .5rem .65rem; background: var(--panel-hi); font-size: .8rem; }
.irc-config pre { max-height: 12rem; margin: 0; padding: .65rem; overflow: auto; background: var(--bg); color: var(--text); font: .7rem/1.45 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; white-space: pre; }
.irc-done { justify-self: end; }
.link-button { padding: 0 .25rem; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: .8rem; cursor: pointer; }
.link-button.danger { min-width: 2.75rem; min-height: 2.75rem; color: var(--danger); opacity: .7; transition: opacity .15s ease; }
.link-button.danger:hover, .link-button.danger:focus-visible { opacity: 1; }
.profile-dialog-card label { display: grid; gap: .3rem; color: var(--muted); font-size: .75rem; }
.profile-dialog-card input, .profile-dialog-card textarea, .profile-dialog-card select { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .55rem; outline: none; background: var(--bg); color: var(--text); font: .9rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; resize: vertical; }
.profile-dialog-card input:focus, .profile-dialog-card textarea:focus, .profile-dialog-card select:focus { border-color: var(--brand); }
.profile-dialog-card input:read-only, .profile-dialog-card textarea:read-only { border-color: transparent; padding-left: 0; background: transparent; resize: none; }
.profile-dialog-card textarea { resize: none; }
.profile-member + .profile-member { margin-top: .3rem; }
.profile-member a { color: var(--brand); }
.field-hint code { font-size: .72rem; color: var(--text); }
.admin-email { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .4rem .7rem; }
.admin-email .profile-note { grid-column: 1 / -1; margin: 0; }
.profile-member, .profile-note, .profile-error { margin: 0; color: var(--muted); font-size: .78rem; }
.profile-error { color: var(--danger); }
.profile-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.profile-tabs { display: flex; gap: .25rem; margin: -.25rem 0 1rem; padding: .2rem; border-radius: .65rem; background: var(--bg); }
.profile-tabs button { flex: 1; min-height: 2.25rem; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); font: 650 .85rem/1 system-ui, sans-serif; cursor: pointer; }
.profile-tabs button.active { background: var(--panel-hi); color: var(--text); }
.agent-list { display: grid; gap: .35rem; }
.agent-row { display: flex; align-items: flex-start; gap: .7rem; min-height: 3.5rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: .6rem; background: color-mix(in srgb, var(--panel-hi) 42%, transparent); }
.agent-mark { flex: 0 0 auto; padding: .2rem .4rem; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 999px; color: var(--brand); font: 750 .6rem/1 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.agent-copy { min-width: 0; flex: 1; display: grid; gap: .1rem; }
.agent-copy strong, .agent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-copy strong { font: 700 .9rem/1.25 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.agent-copy small { color: var(--muted); font-size: .75rem; }
.agent-copy .agent-presence { color: var(--brand); }
.agent-row > .link-button { align-self: center; flex-shrink: 0; }
.agent-intro { margin: 0 0 .9rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.agent-intro a { color: var(--brand); }
.agent-pair { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .9rem; padding: .45rem .3rem .45rem .7rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: .6rem; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.agent-pair code { min-width: 0; overflow-x: auto; color: var(--text); font: .78rem/1.4 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; white-space: nowrap; }
.profile-dialog-card .pair-code-form { display: flex; align-items: end; gap: .5rem; margin: 0 0 .9rem; }
.pair-code-form label { flex: 1; }
.pair-code-form input { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.pair-code-form .btn-secondary { flex: 0 0 auto; }
.copy-button { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); cursor: pointer; }
.copy-button:hover, .copy-button:focus-visible { color: var(--text); background: var(--panel-hi); outline: none; }
.copy-button .menu-icon { grid-area: 1 / 1; transition: opacity .15s ease, transform .15s ease; }
.copy-button .check-glyph { color: var(--brand); opacity: 0; transform: scale(.6); }
.copy-button.copied .copy-glyph { opacity: 0; transform: scale(.6); }
.copy-button.copied .check-glyph { opacity: 1; transform: scale(1); }
.admin-settings > p, .channel-settings > p, .session-settings > p { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
.channel-settings h3 { margin: 0 0 .35rem; }
.channel-settings .mobile-settings-body > p { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
.profile-dialog-card .field-hint, .field-hint { margin: -.35rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.field-hint a { color: var(--brand); }
.profile-dialog-card select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239399b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem; }
.session-more { margin-top: .2rem; }
.session-more summary { display: inline-block; min-height: 2.25rem; padding: .5rem .25rem; color: var(--muted); font: 650 .8rem/1 system-ui, sans-serif; cursor: pointer; list-style: none; }
.session-more summary::-webkit-details-marker { display: none; }
.session-more summary::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .25s ease; }
.session-more[open] summary::after { transform: translateY(.05rem) rotate(-135deg); }
.session-more summary:hover, .session-more summary:focus-visible { color: var(--text); outline: none; }
.session-more::details-content { height: 0; overflow: hidden; transition: height .25s ease, content-visibility .25s allow-discrete; }
.session-more[open]::details-content { height: 12rem; overflow-y: auto; padding-right: .15rem; }
.session-list { display: grid; gap: .4rem; }
.session-row { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: .6rem; background: color-mix(in srgb, var(--panel-hi) 42%, transparent); }
.session-row > span { min-width: 0; flex: 1; }
.session-row > button { flex-shrink: 0; }
.session-row strong, .session-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row strong { font: 650 .88rem/1.35 system-ui, sans-serif; display: flex; align-items: center; gap: .45rem; }
.session-row strong > span { overflow: hidden; text-overflow: ellipsis; }
.session-row small { color: var(--muted); font-size: .7rem; }
.session-row strong b { padding: .12rem .35rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: .62rem; text-transform: uppercase; }
.admin-settings h3 { margin: 1.25rem 0 .35rem; }
.admin-settings .mobile-settings-body > p { margin: 0 0 1rem; color: var(--muted); font-size: .85rem; }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .6rem .75rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: .7rem; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); text-align: left; cursor: pointer; }
.settings-toggle > span:first-child { min-width: 0; display: flex; align-items: center; gap: .5rem; }
.settings-toggle .bell-icon { width: 1.1rem; height: 1.2rem; flex: 0 0 auto; color: var(--muted); }
.settings-toggle small::before { content: "·"; margin-right: .5rem; }
.settings-toggle strong { font: 700 .9rem/1.25 system-ui, sans-serif; }
.settings-toggle small { color: var(--muted); font-size: .75rem; }
.settings-toggle > span:last-child { color: var(--brand); font: 700 .8rem/1 system-ui, sans-serif; }
.settings-toggle:disabled { cursor: default; opacity: .7; }
.delete-dialog { width: min(27rem, calc(100vw - 2rem)); }
.delete-dialog-card { padding: 1.35rem; }
.delete-dialog h2 { margin: 0 0 .5rem; font: 700 1.1rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.delete-dialog p { margin: 0; color: var(--muted); font-size: .88rem; }
.delete-dialog blockquote { max-height: 6rem; margin: 1rem 0; padding: .7rem .8rem; overflow: hidden; border-left: 2px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--text); font: .85rem/1.4 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; white-space: pre-wrap; }
.delete-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.delete-dialog-actions button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pair-modal { z-index: 75; }
.pair-card { padding: 1.4rem; text-align: left; }
.notice-card.pair-card h2 { margin: .2rem 0 .5rem; font: 700 1.25rem/1.3 system-ui, sans-serif; overflow-wrap: anywhere; }
.pair-card > p { margin: .4rem 0; }
.pair-card .pair-eyebrow { margin: 0 0 .25rem; color: var(--brand); font: 750 .68rem/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pair-card > p strong { color: var(--text); font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.pair-code { display: grid; justify-items: center; gap: .35rem; margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.pair-code small { color: var(--muted); font: 700 .65rem/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pair-code strong { color: var(--text); font: 750 2rem/1 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; }
.pair-card .pair-warning { color: var(--text); font-size: .88rem; }
.pair-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; }
.pair-complete { min-height: 2.75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.2rem !important; border-radius: .55rem; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand) !important; font-weight: 750; }
.agent-member { padding-left: .5rem; }
.rooms-sheet .agent-member > span:nth-child(2) { min-width: 0; display: grid; }
.rooms-sheet .agent-member > span:nth-child(2) > span, .rooms-sheet .agent-member > span:nth-child(2) > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-sheet .agent-member > span:nth-child(2) > small { color: var(--muted); font-size: .68rem; }
@media (max-width: 500px) {
  .boot-screen img { width: 6rem; height: 6rem; }
  .auth-modal { place-items: end center; padding: .75rem; }
  .profile-dialog-card { max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1rem; }
  .profile-tabs button { min-width: 0; min-height: 2.75rem; font-size: .78rem; }
  .agent-row { padding-inline: .5rem; }
  .agent-remove { min-width: 4rem; }
  .pair-card { padding: 1.15rem; }
  .pair-code strong { font-size: 1.75rem; }
  .auth-card { width: min(100% - 1rem, 27rem); padding: 1rem; border-radius: 1.15rem; }
  .auth-card .login-logo { width: 4.5rem; height: 4.5rem; margin-bottom: .5rem; }
  .boot-screen img { width: 5rem; height: 5rem; }
  .auth-card:has(.auth-step:not(.collapsed) .name-step) > .login-logo { display: none; }
  .name-step { gap: .9rem; padding: .25rem 0 .5rem; }
  .name-step p { font-size: 1.35rem; }
  .nickname-logo { display: block; width: 2.5rem; height: 2.5rem; animation: nickname-logo-in .5s cubic-bezier(.42,0,.58,1) both; }
  @keyframes nickname-logo-in { from { opacity: 0; transform: rotateY(180deg) scale(.9); } to { opacity: 1; transform: rotateY(360deg) scale(1); } }
  .msg, .msg.action { grid-template-columns: 1.25rem 2.25rem minmax(0, 1fr) auto; column-gap: .4rem; }
  .msg .time { display: none; }
  .msg .nick { display: none; }
  .message-avatar { display: grid; grid-column: 2; grid-row: 1; align-self: start; width: 1.5rem; height: 1.5rem; }
  .mobile-time { display: inline; grid-column: 4; grid-row: 1; align-self: baseline; }
  .msg .body { grid-column: 3; grid-row: 1; }
  .composer { gap: .25rem; }
  .reaction-picker { display: none !important; }
  .composer-nick { max-width: 4.5rem; padding-left: .35rem; font-size: .8rem; }
}
/* Desktop messages: avatar column, name and time on the first row of a run, follow-ups tuck under. */
@media (not (pointer: coarse)) and (min-width: 501px) {
  .msg { grid-template-columns: 2rem 2.25rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .6rem; padding: 1px .25rem 3px; }
  .msg.action { grid-template-columns: 2rem 2.25rem auto minmax(0, 1fr); }
  .message-entry:has(.msg:not(.cont)) { margin-top: .55rem; }
  .message-add { grid-row: 1; margin-top: .25rem; }
  .message-avatar { display: grid; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 2.25rem; height: 2.25rem; margin-top: .1rem; font-size: 1rem; }
  .msg .nick { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; font: 700 .92rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .msg .time { grid-column: 4; grid-row: 1; align-self: center; color: color-mix(in srgb, var(--muted) 45%, transparent); font: 400 .72rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .msg .body { grid-column: 3 / span 2; grid-row: 2; line-height: 1.55; }
  .msg.cont .message-avatar, .msg.cont .nick { display: none; }
  .msg.cont .body { grid-row: 1; }
  .msg.cont .time { grid-row: 1; align-self: start; margin-top: .3rem; opacity: 0; transition: opacity .12s ease; }
  .msg.cont:hover .time, .msg.cont:focus-within .time { opacity: 1; }
  .msg.action .message-avatar { display: none; }
  .msg.action .nick { grid-column: 3; grid-row: 1; font: inherit; font-style: italic; }
  .msg.action .body { grid-column: 4; grid-row: 1; }
  .msg.action .time { grid-column: 4; grid-row: 1; justify-self: end; align-self: start; margin-top: .3rem; }
  /* Kebab rides the body row, clear of the name and time; a leading code fence pulls it down to the box edge. */
  .msg:not(.cont) .message-more { top: 1.45rem; }
  .msg .message-more { top: .05rem; }
  .msg:not(.cont):has(.message-copy > .body-seg:first-of-type > .fence:not([style*="none"])) .message-more { top: 1.95rem; }
  .msg.cont:has(.message-copy > .body-seg:first-of-type > .fence:not([style*="none"])) .message-more { top: .55rem; }
}

/* Touch: long-press sheet replaces hover picker + kebab; composer rides the keyboard; 44px targets. */
@media (pointer: coarse) {
  .reaction-tooltip { display: none !important; }
  header { gap: .5rem; padding-inline: 12px; }
  /* Touch header: back, identity pill (name + topic or presence), unread DM avatars. Bell lives in More. */
  header > .notification-control { display: none; }
  .room-heading { flex: 0 1 auto; min-width: 0; margin-left: auto; justify-items: end; }
  .room-title { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-height: 2.75rem; max-width: 100%; padding: .3rem .55rem .3rem .35rem; border-radius: 999px; background: color-mix(in srgb, var(--panel-hi) 55%, transparent); color: var(--text); gap: .55rem; }
  .room-title .room-mark { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .room-title-text { text-align: left; line-height: 1.15; }
  .room-title-text > span { font: 650 1rem/1.15 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .room-subtitle { display: block; overflow: hidden; color: var(--muted); font: 500 .75rem/1.2 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
  .thread-link { gap: .35rem; margin-top: .25rem; color: var(--muted); font: 600 .8125rem/1 system-ui, sans-serif; white-space: nowrap; }
  .thread-avatars img { width: 1.25rem; height: 1.25rem; }
  .room-title-chevron { display: block; flex: 0 0 auto; width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-back svg, header button svg { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
  /* 44pt hit areas for small visuals */
  .header-dm::after, .image-preview summary::after { content: ""; position: absolute; inset: -.45rem; }
  .mobile-time { font-size: .6875rem; }
  .header-logo { display: none; }
  .room-topic { display: none; }
  header .mobile-back, header .header-icon, header > .notification-control { flex: 0 0 2.75rem; }
  .bell-icon { width: 1.6rem; height: 1.75rem; }
  .msg { min-height: 2.75rem; padding: .35rem .25rem; transition: translate .12s ease-out; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .msg .body, .msg .body a { -webkit-touch-callout: none; }
  body:has(.sheet-backdrop:not([style*="display: none"])) { user-select: none; -webkit-user-select: none; }
  .message-add, .message-more, .reaction-picker, .message-menu { display: none; }
  .room, .profile-card, .panel-help, .thread-link { min-height: 2.75rem; }
  .reaction-chip { min-width: 2.75rem; min-height: 2.75rem; padding: .2rem .7rem; font-size: .95rem; }
  .composer { left: 1rem; right: 1rem; bottom: var(--composer-bottom); width: auto; border-radius: 1.1rem; padding: .5rem calc(.5rem + env(safe-area-inset-right, 0px)) .5rem calc(.5rem + env(safe-area-inset-left, 0px)); box-shadow: none; translate: none; transition: bottom .1s ease-out; }
  .chat { top: 0; bottom: 0; }
  .chat #messages { padding-top: calc(3.625rem + env(safe-area-inset-top, 0px) + .5rem); }
  header { background: color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter: var(--blur-medium) saturate(1.2); }
  .composer, .mobile-nav { background: color-mix(in srgb, var(--panel) 52%, transparent); backdrop-filter: blur(12px) saturate(1.2); }
  .mobile-screen-head { background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(18px) saturate(1.2); }
  .mobile-settings-modal { z-index: 24; display: block; overflow: hidden; padding: 0; background: var(--bg); backdrop-filter: none; }
  .mobile-settings-modal .profile-dialog-card { display: flex; flex-direction: column; width: 100%; height: 100dvh; max-height: none; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .mobile-settings-modal .profile-close, .mobile-settings-modal .profile-heading, .mobile-settings-modal .profile-tabs, .mobile-settings-modal .profile-panels > .profile-note, .mobile-settings-modal .profile-panels > .profile-error { display: none !important; }
  .mobile-settings-modal .profile-panels { flex: 1; min-height: 0; height: 100% !important; overflow: hidden; transition: none; }
  .mobile-settings-modal .admin-settings, .mobile-settings-modal .channel-settings, .mobile-settings-modal .agent-settings, .mobile-settings-modal .irc-settings { display: flex; height: 100%; min-height: 0; flex-direction: column; }
  .mobile-settings-modal .mobile-settings-head { display: flex; }
  .mobile-settings-head .mobile-back, .mobile-head-balance { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; }
  .mobile-settings-head .mobile-back { margin: 0; }
  .mobile-settings-body { min-height: 0; flex: 1; overflow-y: auto; padding: .75rem 1rem calc(var(--nav-h) + var(--nav-lift) + 1rem); }
  .chat #messages { padding-bottom: calc(var(--composer-space, 4rem) + var(--nav-h) + var(--nav-lift) + .5rem - var(--kb, 0px)); }
  body.kb-open .chat #messages { padding-bottom: calc(var(--composer-space, 4rem) + .5rem - var(--kb, 0px)); }
  .composer-plus, .composer-send { width: 2.75rem; height: 2.75rem; }
  .composer-plus img { width: 1.1rem; height: 1.1rem; }
  .composer-send img { width: 1.65rem; height: 1.65rem; }
  header button, .channel-kebab { min-width: 2.75rem; min-height: 2.75rem; }
  .channel-menu button, .message-menu button { min-height: 2.75rem; }
  /* Touch: row popovers become bottom sheets, like message actions. */
  /* rooms-sheet's backdrop-filter makes fixed children position relative to it; span the viewport explicitly. */
  .rooms-sheet { backdrop-filter: none; background: var(--bg); }
  .channel-menu { position: fixed; z-index: 45; inset: auto 0 0; width: 100vw; min-width: 0; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 1.25rem 1.25rem 0 0; background: color-mix(in srgb, var(--panel) 45%, transparent); backdrop-filter: var(--blur-heavy) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; animation: sheet-in .18s ease-out; }
  .channel-menu button { min-height: 2.9rem; padding: 0 .9rem; border-radius: .6rem; font: 1rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .channel-menu button:active { background: var(--panel-hi); }
  .channel-menu-topic { display: block; margin: 0 0 .5rem; padding: .4rem .9rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font: .9rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
  /* Above-composer floaters: composer top edge = --composer-bottom + composer height (--composer-space minus kb and its 16px gap). */
  .glass-toast, .giphy-results { --above-composer: calc(var(--composer-bottom) + var(--composer-space, 4rem) - var(--kb, 0px) - 16px + .5rem); }
  .glass-toast { bottom: var(--above-composer); }
  .giphy-results { inset: auto 0 var(--above-composer); }
}
.sheet-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; align-items: end; background: #0006; backdrop-filter: var(--blur-light); }
.action-sheet { display: grid; gap: .5rem; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 1.25rem 1.25rem 0 0; background: color-mix(in srgb, var(--panel) 45%, transparent); backdrop-filter: var(--blur-heavy) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; animation: sheet-in .18s ease-out; }
.sheet-head { display: flex; justify-content: space-between; padding: .25rem .5rem; color: var(--muted); font: .8rem/1.2 ui-monospace, monospace; }
.sheet-head strong { color: var(--accent); }
.sheet-reactions { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; scrollbar-width: none; }
.sheet-reactions button { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; flex: 0 0 auto; min-height: 2.75rem; padding: 0 .45rem; border: 0; border-radius: .75rem; background: transparent; color: var(--text); font: 1.25rem/1 ui-monospace, monospace; white-space: nowrap; cursor: pointer; }
.sheet-reactions small { color: var(--muted); font-size: .65rem; }
.sheet-reactions button:active { transform: scale(.94); }
.sheet-actions { display: grid; }
.sheet-reaction-rows { display: grid; }
.sheet-reaction-rows button { min-height: 2.9rem; display: flex; align-items: center; gap: .7rem; padding: 0 .9rem; border: 0; border-radius: .6rem; background: transparent; color: var(--text); font: 1rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.sheet-reaction-rows button:active { background: var(--panel-hi); }
.sheet-reaction-rows .rs-emoji { font-size: 1.25rem; }
.sheet-reaction-rows .rs-count { min-width: 2rem; color: var(--muted); font: 750 .9rem/1 ui-monospace, monospace; }
.sheet-reaction-rows .rs-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: .95rem/1 system-ui, sans-serif; }
.sheet-reaction-rows button.mine .rs-emoji { text-shadow: 0 0 0 var(--brand); }
.sheet-reaction-rows .rs-empty { margin: .25rem 0; padding: .5rem .9rem; color: var(--muted); font-size: .9rem; }
.sheet-divider { height: 1px; margin: .25rem 0; background: color-mix(in srgb, var(--text) 12%, transparent); }
.sheet-actions button { min-height: 2.9rem; padding: 0 .9rem; border: 0; border-radius: .6rem; background: transparent; color: var(--text); font: 1rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; cursor: pointer; display: flex; align-items: center; gap: .7rem; }
.sheet-actions button:active { background: var(--panel-hi); }
.sheet-actions button.danger { color: var(--danger); }
@keyframes sheet-in { from { translate: 0 1.5rem; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .action-sheet, .msg, .message-entry { animation: none; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .composer, .composer-send { transition: none; }
  }

.login input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}
.login input:focus { border-color: var(--accent); }

.login {
  position: fixed;
  inset: 0;
  width: min(22.5rem, calc(100vw - 2rem));
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.login-logo { width: 10rem; height: 10rem; margin: 0 auto 1.5rem; object-fit: contain; }
.login label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 1rem;
}
.connection-error { text-align: center; }
.connection-error p { margin: 0; color: var(--muted); }
.reconnecting-logo { animation: reconnect-pulse 1.6s ease-in-out infinite; cursor: pointer; }
@keyframes reconnect-pulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reconnecting-logo { animation: none; } }
.auth-modal { perspective: 700px; }
.auth-card { position: relative; padding: 1.25rem 1.25rem .85rem; }
.invite-heading { margin-bottom: .8rem; }
.auth-card .login-logo { width: 7rem; height: 7rem; margin-bottom: .75rem; }
.auth-card:has(.auth-view:not(.collapsed) .email-sent) > .login-logo { display: none; }
.auth-card form { display: grid; }
.auth-card label { display: grid; gap: .3rem; color: var(--muted); font-size: .8rem; }
.auth-step { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease-in-out, opacity .2s ease-in-out; }
.auth-step.collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.auth-step > div { min-height: 0; overflow: hidden; margin-bottom: .75rem; }
.auth-view > div { margin-bottom: 0; }
.name-step { display: grid; gap: .75rem; }
.name-step p { margin: 0; font-size: 1.1rem; font-weight: 700; }
.name-step > small { color: var(--muted); line-height: 1.4; }
.nickname-logo { display: none; }
.change-email { justify-self: start; border: 0; background: transparent; color: var(--muted); padding: 0; font: inherit; cursor: pointer; }
.change-email:hover { color: var(--text); }
.email-sent { display: grid; justify-items: center; gap: .75rem; padding: .75rem .5rem .5rem; text-align: center; }
.email-sent-icon { display: grid; width: 7rem; height: 7rem; place-items: center; border-radius: 50%; background: transparent; color: var(--brand); }
.email-sent-icon.linked { cursor: pointer; }
.email-sent-icon.linked:hover { opacity: .85; }
.email-sent-icon svg { width: 5rem; height: auto; }
.email-sent h2 { margin: .15rem 0 0; font-size: 1.2rem; }
.email-sent p { margin: 0; color: var(--muted); line-height: 1.5; }
.email-sent strong { color: var(--text); overflow-wrap: anywhere; }
.gmail-link { color: var(--brand); font-weight: 700; }
.dev-link { display: grid; justify-items: center; gap: .5rem; padding: .75rem; border: 1px dashed color-mix(in srgb, var(--brand) 50%, transparent); border-radius: .65rem; }
.dev-link p { margin: 0; color: var(--muted); font-size: .8rem; }
.dev-link a { color: var(--brand); font-weight: 700; word-break: break-all; }
.email-sent .change-email { justify-self: center; }
.auth-card input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .55rem; outline: none; background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; }
.auth-card input:focus { border-color: var(--brand); }
.session-pair { display: grid; justify-items: center; gap: .65rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.session-pair-button { min-height: 2.75rem; padding: 0 .8rem; border: 0; background: transparent; color: var(--brand); font: 700 .88rem/1 system-ui, sans-serif; cursor: pointer; }
.session-pair-panel { display: grid; justify-items: center; gap: .65rem; }
.session-pair-panel p { margin: 0; color: var(--muted); font-size: .8rem; }
.session-pair-qr { align-self: center; }
.session-pair-qr svg { width: 9rem; height: 9rem; }
.session-pair-panel .change-email { justify-self: center; min-height: 2.75rem; }
.session-pair-error { margin: 0; font-size: .8rem; }
.notice-card { position: relative; padding: 1.5rem; text-align: center; }
/* Members list, shared by the desktop panel and the phone sheet. */
.members-icon { display: block; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url(/icons/ui/members.svg?v=1) center / contain no-repeat; mask: url(/icons/ui/members.svg?v=1) center / contain no-repeat; }
.members-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .25rem .5rem .6rem; }
.members-head strong { font: 700 .9rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.members-head small { color: var(--muted); font-size: .72rem; }
.members-group { margin-bottom: .6rem; }
.members-label { display: flex; justify-content: space-between; margin: 0; padding: .35rem .5rem .2rem; color: var(--muted); font: 700 .65rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.member-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; padding: .3rem .5rem; border: 0; border-radius: .5rem; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.member-row:hover, .member-row:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); outline: none; }
.member-row.offline { opacity: .55; }
.member-row .room-mark { width: 1.6rem; height: 1.6rem; }
.member-row .presence-dot { display: block; left: auto; right: -.1rem; bottom: -.1rem; width: .3rem; height: .3rem; background: var(--brand); }
.member-row .presence-dot.away { background: #f9e2af; }
.member-row .presence-dot.offline { display: none; }
.member-copy { min-width: 0; display: grid; }
.member-nick { display: flex; align-items: center; gap: .35rem; overflow: hidden; font-size: .88rem; white-space: nowrap; }
.member-nick > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.member-nick .admin-badge { width: .85rem; height: .85rem; }
.member-nick .agent-mark { padding: .12rem .3rem; font-size: .52rem; }
.member-copy small { color: var(--muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-empty { margin: 0; padding: .5rem; color: var(--muted); font-size: .8rem; }
.members-sheet .sheet-head { padding-bottom: .35rem; }
.members-sheet-list { max-height: 60vh; overflow-y: auto; padding: 0 .35rem .5rem; }
.members-sheet-list .member-row { min-height: 2.9rem; }
/* Command palette (Cmd/Ctrl+K), desktop. */
.palette-modal { align-items: start; padding-top: 12vh; }
.palette-modal .palette { animation: intro-in .18s ease both; }
@media (prefers-reduced-motion: reduce) { .palette-modal .palette { animation: none; } }
.palette { width: min(34rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 1.5rem 5rem #0009; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.palette-input { width: 100%; padding: 1rem 1.1rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); outline: none; background: transparent; color: var(--text); font: 1rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.palette-input::placeholder { color: var(--muted); }
.palette-list { max-height: min(24rem, 55vh); overflow-y: auto; padding: .4rem; }
.palette-list button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .45rem .6rem; border: 0; border-radius: .6rem; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.palette-list button.active { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.palette-list button.danger strong { color: var(--danger); }
.palette-mark { position: relative; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--muted); font: 750 .8rem/1 system-ui, sans-serif; }
.palette-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.palette-mark .lock-icon { width: .55rem; height: .8rem; }
.palette-mark .menu-icon { width: .85rem; height: .85rem; }
.palette-slash { color: var(--brand); font: 750 .9rem/1 ui-monospace, monospace; }
.palette-copy { min-width: 0; flex: 1; display: grid; }
.palette-copy strong { overflow: hidden; font-size: .92rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.palette-copy small { overflow: hidden; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { margin: 0; padding: 1rem .8rem; color: var(--muted); font-size: .85rem; }
.palette-foot { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .55rem 1rem; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); color: var(--muted); font-size: .72rem; }
.palette-foot kbd { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.25rem; margin-right: .1rem; padding: 0 .3rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--bg); color: var(--text); font: 650 .68rem/1 system-ui, sans-serif; }
.notice-dismiss { margin-left: .5rem; }
.notice-card.delete-confirmation { text-align: left; }
.notice-card h2 { margin: .8rem 0 .5rem; font-size: 1.25rem; }
.notice-card p { color: var(--muted); }
.channel-topic-card { text-align: left; }
.channel-topic-card form, .channel-topic-card label { display: grid; gap: .75rem; }
.channel-topic-card input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .55rem; outline: none; background: var(--bg); color: var(--text); font: inherit; }
.channel-topic-card input:focus { border-color: var(--brand); }
.notice-icon { width: 3.5rem; height: 3.5rem; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notice-steps { padding: .75rem 1rem; border-radius: .75rem; background: var(--bg); text-align: left; }
.notice-steps ol { margin: .5rem 0; padding-left: 1.25rem; }
.notice-steps li + li { margin-top: .4rem; }

@media (min-width: 700px) {
  header { padding-inline: max(24px, calc((100vw - 860px) / 2)); }
}

.invite-message {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.invite-link {
  color: var(--brand);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Cascadia Code, Menlo, monospace;
  font-size: .85rem;
}
.invite-qr {
  align-self: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: .5rem;
  line-height: 0;
}
.invite-qr svg { width: 8.5rem; height: 8.5rem; }
.invite-copy {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: .4rem .75rem;
  font: inherit;
  cursor: pointer;
}
.invite-copy:hover { border-color: var(--accent); }

.invite-hint { color: var(--muted); font-size: .85rem; margin: 0; }
.invite-actions { display: flex; gap: .5rem; }

.join-eyebrow {
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}
.join-heading { color: var(--text); font-size: 1.4rem; margin: 0; }
.join-note { color: var(--muted); margin: 0; }
.session-expired { display: grid; gap: .75rem; margin-bottom: 1rem; padding: .85rem; border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: .75rem; background: color-mix(in srgb, var(--brand) 8%, transparent); }
.session-expired p { margin: 0; color: var(--text); font-size: .85rem; line-height: 1.4; }
.join-error { display: flex; align-items: flex-start; gap: .5rem; margin: 1.25rem 0 0; color: var(--danger); }
.join-error svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-accept.btn-primary { width: 100%; }

.channel-intro { margin: 1.5rem 0 2.5rem; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.channel-intro-mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .8rem; border-radius: 50%; background: var(--panel-hi); color: var(--muted); font: 750 1.4rem/1 system-ui, sans-serif; }
.channel-intro-mark .lock-icon { width: 1rem; height: 1.4rem; }
.channel-intro h2 { margin: 0 0 .2rem; font: 750 1.5rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.channel-intro-meta { margin: 0 0 .7rem; color: var(--muted); font-size: .8rem; }
.channel-intro-topic { max-width: 40rem; margin: 0 0 1rem; color: var(--text); font-size: .95rem; line-height: 1.5; }
.channel-intro-topic.muted { color: var(--muted); }
.channel-intro-actions { display: flex; gap: .5rem; }
.channel-intro-actions button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: 0 .8rem; border: 0; border-radius: .5rem; font: 650 .82rem/1 system-ui, sans-serif; cursor: pointer; }
.channel-intro-actions .menu-icon { width: .9rem; height: .9rem; }
.public-channel-intro { margin: 1rem 0 2rem; padding: 1.25rem 0; }
.public-channel-intro h1 { margin: 0 0 .8rem; color: var(--text); font: 750 clamp(1.7rem, 6vw, 2.8rem)/1 system-ui, sans-serif; letter-spacing: -.035em; }
.public-motd { display: grid; margin-bottom: .75rem; color: var(--muted); font: 1rem/1.5 ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, monospace; }
.public-motd-break { height: .5rem; margin: .65rem 0; line-height: 0; }
.public-motd-cta { color: var(--text); font-weight: 700; }
.public-channel-intro a { color: var(--brand); }
.archived-channel { position: fixed; z-index: 15; inset: auto 0 0; width: min(100%, 860px); margin-inline: auto; padding: .9rem; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(14px); color: var(--muted); text-align: center; }
.chat.public-readonly { left: 0; width: min(100%, 860px); inset-block-end: calc(4.8rem + env(safe-area-inset-bottom)); }
body.rooms-docked .chat.public-readonly { left: 0; right: 0; width: min(100%, 860px); margin-inline: auto; }
.public-help-composer { position: fixed; z-index: 15; inset: auto 0 0; display: flex; align-items: stretch; gap: .55rem; width: min(100%, 860px); margin-inline: auto; padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
.public-help-composer input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: .6rem; outline: none; background: var(--bg); color: var(--text); padding: .7rem .8rem; font: inherit; }
.public-help-composer input:focus { border-color: var(--brand); }

.media-preview {
  order: -2; /* first row, above the + button (order -1), input, and send */
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .25rem .15rem 0;
}
.media-chip {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: .55rem;
  background: var(--panel-hi);
}
.media-chip img, .media-chip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .15rem .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #000a;
  color: var(--text);
  font: .65rem/1.2 ui-monospace, Menlo, monospace;
}
.media-remove {
  position: absolute;
  top: .15rem;
  right: .15rem;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #0009;
  color: var(--text);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
}
.media-remove:hover { background: var(--danger); color: var(--bg); }

.lightbox {
  width: fit-content;
  max-width: none;
  max-height: none;
  grid-template-rows: auto auto;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  overflow: hidden;
  background: #050508ee;
  color: var(--text);
  box-shadow: 0 2rem 6rem #000c;
}
.lightbox[open] { display: grid; position: fixed; inset: 50% 0 auto; width: fit-content; height: auto; margin: 0 auto; max-height: 100dvh; translate: 0 -50%; align-content: start; }
.lightbox::backdrop { background: #050508cc; backdrop-filter: var(--blur-light); }
.lightbox-media { display: grid; place-items: center; border-radius: .5rem; overflow: hidden; background: #000; color-scheme: dark; }
.lightbox-media video { display: block; max-width: 92vw; max-height: calc(94dvh - 2.75rem); }
/* Images scale past natural size: as tall as the viewport allows, capped by width, ratio set on load. */
.lightbox-media img { --ar: 1.5; display: block; width: min(92vw, calc((94dvh - 2.75rem) * var(--ar))); height: auto; aspect-ratio: var(--ar); }
/* Players: as much of the viewport as 16:9 allows, whichever side binds. */
.lightbox-media iframe { --ar: 1.7778; display: block; width: min(92vw, calc(82dvh * var(--ar)), 1400px); aspect-ratio: var(--ar); height: auto; border: 0; border-radius: .5rem; background: #000; color-scheme: dark; }
.lightbox-media iframe.compact { width: min(92vw, 40rem); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .3rem .4rem .3rem .85rem; }
.lightbox-meta { min-width: 0; display: grid; gap: .05rem; opacity: .5; transition: opacity .2s ease; }
.lightbox-bar:hover .lightbox-meta, .lightbox-bar:focus-within .lightbox-meta { opacity: 1; }
.lightbox-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 .88rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lightbox-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.lightbox-actions { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; margin-left: auto; }
.lightbox-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); cursor: pointer; opacity: .5; transition: opacity .2s ease, background-color .15s ease, color .15s ease; }
.lightbox-bar:hover .lightbox-btn, .lightbox-btn:focus-visible { opacity: 1; }
.lightbox-btn:hover, .lightbox-btn:focus-visible { background: var(--panel-hi); color: var(--text); outline: none; }
.lightbox-btn .menu-icon { width: 1rem; height: 1rem; }
.ui-icon { display: block; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--ui-icon) center / contain no-repeat; mask: var(--ui-icon) center / contain no-repeat; }
.icon-xmark { --ui-icon: url(/icons/ui/xmark.svg?v=1); width: .8rem; height: .8rem; }
.icon-expand { --ui-icon: url(/icons/ui/expand.svg?v=1); }
.icon-collapse { --ui-icon: url(/icons/ui/collapse.svg?v=1); }
.lightbox.maximized { inset: 0; width: 100vw; height: 100dvh; translate: none; border-radius: 0; grid-template-rows: 1fr auto; align-content: stretch; }
.lightbox.maximized .lightbox-media { border-radius: 0; }
.lightbox.maximized .lightbox-media img, .lightbox.maximized .lightbox-media video, .lightbox.maximized .lightbox-media iframe { width: 100vw; height: calc(100dvh - 2.75rem); max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; }
@media (pointer: coarse) { .lightbox-btn:has(.icon-expand), .lightbox-btn:has(.icon-collapse) { display: none; } }

.embed-card {
  position: relative;
  width: min(100%, 440px);
  margin-top: .45rem;
}
.embed-og {
  border-radius: .65rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  backdrop-filter: blur(10px);
}
.embed-og > a { display: flex; gap: .75rem; padding: .6rem; color: inherit; text-decoration: none; }
.embed-og > a:hover { background: color-mix(in srgb, var(--panel-hi) 55%, transparent); }
.embed-og img { width: 7rem; height: 5rem; flex: 0 0 auto; object-fit: cover; border-radius: .45rem; }
.embed-copy { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.embed-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 700 .88rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.embed-copy span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font: .8rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.embed-copy small { color: color-mix(in srgb, var(--muted) 80%, transparent); font: .7rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.embed-thumb {
  position: relative;
  width: min(100%, 440px);
  padding: 0;
  border: 0;
  border-radius: .65rem;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.embed-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.embed-inline { display: block; width: 100%; border: 0; border-radius: 12px; background: transparent; }
/* Spotify's strip stops reflowing under 300px and crops. Narrow columns keep the strip at 300px and scale it
   down in steps; the negative margin makes the card follow the visual height. */
@container (max-width: 300px) {
  .embed-card:has(.embed-inline) { overflow: hidden; }
  .embed-inline { --s: .9; width: 300px; transform-origin: 0 0; transform: scale(var(--s)); margin-bottom: calc(152px * (var(--s) - 1)); }
}
@container (max-width: 270px) { .embed-inline { --s: .8; } }
@container (max-width: 240px) { .embed-inline { --s: .72; } }
@container (max-width: 216px) { .embed-inline { --s: .65; } }
.embed-player { display: grid; min-height: 6rem; }
.embed-player img, .embed-player .embed-player-copy, .embed-player .embed-play { grid-area: 1 / 1; }
.embed-player .embed-player-copy { z-index: 1; align-self: end; display: grid; gap: .1rem; padding: .6rem .75rem; background: linear-gradient(transparent, #000c); color: #fff; }
.embed-player .embed-player-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .85rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.embed-player .embed-player-copy small { font-size: .7rem; opacity: .8; }
.embed-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.embed-play::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #0009;
  box-shadow: 0 0 0 6px #0005;
  transition: transform .12s ease;
}
.embed-play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: .2rem;
  border-left: .85rem solid var(--brand);
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
}
.embed-thumb:hover .embed-play::before { transform: scale(1.12); }

/* Threads nest one step under their channel; only the active channel shows them, four at most. */
.nested-thread > .room { padding-left: 1.85rem; }
.nested-thread .room-mark { width: 1.1rem; height: 1.1rem; }
.nested-thread .room-mark .menu-icon { width: .85rem; height: .85rem; }
.thread-more { color: var(--muted); }
.mobile-row.nested { padding-left: 2.6rem; min-height: 2.5rem; }
.mobile-row.nested .room-mark { width: 1.4rem; height: 1.4rem; }
.mobile-row.nested strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-section-toggle svg { margin-left: auto; }
.row-chevron { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-right: -.5rem; border-radius: 50%; color: var(--muted); }
.row-chevron svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s ease; }
.row-chevron.collapsed svg { transform: none; }