:root {
  color-scheme: dark;
  --bg: #11111b;
  --panel: #181825;
  --panel-hi: #313244;
  --text: #cdd6f4;
  --muted: #7f849c;
  --line: #313244;
  --brand: #a6e3a1;
  --accent: var(--brand);
  --mine: #94e2d5;
  --danger: #f38ba8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at top, #1e1e2e 0, var(--bg) 34rem);
  color: var(--text);
  font: 1rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.booting .login { visibility: hidden; }

header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
}
header .brand {
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
header .brand img { display: block; width: 30px; height: 30px; object-fit: contain; }
.room-title { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.room-title.direct { color: var(--brand); }
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 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 { anchor-name: --notification-button; }
header #enable-notifications.busy { opacity: .55; }
.notification-tooltip {
  position: absolute;
  z-index: 30;
  top: calc(100% + .6rem);
  left: 4rem;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--panel-hi) 76%, transparent);
  color: var(--text);
  box-shadow: 0 .7rem 2rem #0007;
  backdrop-filter: blur(1rem) saturate(1.2);
  font: .8rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -.25rem;
  transition: opacity .12s ease, translate .12s ease, visibility .12s;
}
#enable-notifications:hover + .notification-tooltip,
#enable-notifications:focus-visible + .notification-tooltip { opacity: 1; visibility: visible; translate: 0; }
@supports (position-anchor: --notification-button) {
  .notification-tooltip {
    position: fixed;
    position-anchor: --notification-button;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    inset: auto;
    margin: .55rem;
  }
}
header select { max-width: 10.5rem; }

.rooms {
  position: fixed;
  z-index: 25;
  inset: 3.625rem 0 0;
  background: #0006;
  backdrop-filter: blur(3px);
}
.rooms-sheet {
  width: min(300px, calc(100vw - 28px));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  border-right: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, #313244);
  box-shadow: 16px 0 45px #0005;
  animation: slide-in .16s ease-out;
}
.section-title { display: block; margin: 14px 10px 5px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.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); }
.unread-badge { min-width: 1.25rem; margin-left: auto; padding: .14rem .38rem; border-radius: 999px; background: #a6e22e; color: #11111b; 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); }
.panel-footer { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.profile-card { min-width: 0; flex: 1; display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border: 0; border-radius: .65rem; background: color-mix(in srgb, var(--panel-hi) 45%, transparent); color: inherit; text-align: left; cursor: pointer; }
.profile-card:hover, .profile-card:focus-visible { background: var(--panel-hi); outline: none; }
.profile-avatar { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 18%, var(--panel-hi)); color: var(--brand); font: 750 .72rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.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 { color: var(--text); font-size: .88rem; }
.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; }
@keyframes slide-in { from { transform: translateX(-14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.chat {
  position: fixed;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  inset: 3.625rem 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)) 1.625rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat::-webkit-scrollbar, .giphy-results::-webkit-scrollbar { display: none; }
#messages { min-height: 100%; }
.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(--line) 78%, 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;
  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:focus-visible .message-add { opacity: .65; }
.message-add {
  grid-column: 1;
  align-self: center;
  justify-self: end;
  width: .875rem;
  height: .875rem;
  margin: 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, .message-add.has-reaction { opacity: .5; }
.message-add:hover { color: var(--brand); opacity: 1; transform: scale(1.1); }
.message-add:active { transform: scale(.92); }
.message-add.has-reaction { color: var(--text); opacity: 1; font-size: 1rem; }
.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: var(--muted);
  font-size: 1rem;
  text-align: right;
  white-space: nowrap;
  user-select: none;
}
.msg .nick {
  grid-column: 3;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.msg .body { grid-column: 4; min-width: 0; overflow-wrap: anywhere; }
.thread-link {
  display: block;
  margin: .2rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .12s ease;
}
.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 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: .35rem;
  left: .35rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  list-style: none;
  mix-blend-mode: difference;
  opacity: .5;
  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; }
.msg .body img {
  display: block;
  max-width: min(100%, 440px);
  max-height: 300px;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.msg.system {
  display: block;
  margin: 12px 0 5px;
  padding: 5px 9px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 1rem;
  white-space: pre-line;
}
.msg.error { color: var(--danger); }
.history-event {
  margin: .25rem 0;
  padding: .2rem 0 .2rem .7rem;
  border-left: .15rem solid var(--border, var(--line));
  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; }
.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(180deg); }
.history-event > div { padding: .25rem 0; }
.system-text { white-space: pre-wrap; }
.help-list { display: grid; gap: .3rem; }
.help-line { display: block; }
.help-line strong { margin-right: .45rem; color: color-mix(in srgb, var(--brand) 45%, var(--muted)); font-weight: 650; }
.reactions {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  margin: 0;
}
.reaction {
  min-width: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  padding: 3px 5px;
  font: .85rem/1 ui-monospace, monospace;
  opacity: .5;
  cursor: pointer;
  transition: opacity .14s ease, transform .14s ease;
  animation: reaction-in .15s ease-out;
}
.reaction:hover, .reaction.mine { opacity: 1; }
.reaction:active { transform: scale(.94); }
.reaction.stamp { animation: stamp .38s cubic-bezier(.12,.8,.25,1); opacity: 1; }
.add-reaction { color: var(--muted); }
.reaction-picker {
  display: flex;
  gap: .25rem;
  position: absolute;
  z-index: 5;
  top: -.3rem;
  left: 0;
  width: max-content;
  max-width: calc(100% - 1rem);
  margin: 0;
  padding: .3rem .45rem;
  border: 0;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--panel-hi) 88%, transparent);
  box-shadow: 0 .5rem 1.5rem #0005;
  backdrop-filter: blur(.5rem);
  animation: picker-in .14s ease-out;
}
.msg:has(.image-preview[open]) .reaction-picker { top: 50%; translate: 0 -50%; }
.picker-reaction { border: 0; border-radius: .3rem; background: transparent; color: var(--text); padding: .2rem; font-size: 1rem; cursor: pointer; opacity: .6; transition: opacity .12s ease, transform .12s ease; }
.picker-reaction:hover { opacity: 1; transform: scale(1.16); }
.message-more {
  position: absolute;
  z-index: 3;
  top: -.2rem;
  right: .2rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: .45rem;
  background: color-mix(in srgb, var(--panel) 88%, 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: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 .75rem 2rem #0008;
  backdrop-filter: blur(1rem) saturate(1.15);
}
.message-menu button { display: block; 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;
  border-top: 1px solid var(--line);
  background: var(--panel-hi);
}
.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; }
.composer {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(.5rem, env(safe-area-inset-bottom));
  width: min(calc(100% - 1rem), 860px);
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 .5rem 1.5rem #0007;
  backdrop-filter: blur(.875rem) saturate(1.15);
  translate: -50% 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.composer:focus-within { border-color: color-mix(in srgb, var(--brand) 48%, var(--line)); background: color-mix(in srgb, var(--panel) 97%, transparent); }
.composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 10rem;
  field-sizing: content;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: .55rem .25rem;
  font: 1rem/1.4 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  caret-color: var(--brand);
}
.composer textarea::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-nick.editing { color: var(--mine); }
.composer-send {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel-hi);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.composer-send svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.composer-send:disabled { cursor: default; opacity: .55; }
.composer-send:not(:disabled) { background: var(--brand); color: var(--bg); }
.composer-send:not(:disabled):hover { background: color-mix(in srgb, var(--brand) 88%, var(--text)); }
.composer-send:not(:disabled):active { transform: scale(.93); }
.composer-send:focus-visible { outline: .125rem solid var(--brand); outline-offset: .125rem; }
.profile-dialog, .delete-dialog { width: min(27rem, calc(100vw - 2rem)); padding: 0; 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; }
.profile-dialog::backdrop, .delete-dialog::backdrop { background: #090910a6; backdrop-filter: blur(.55rem); }
.profile-dialog-card { position: relative; padding: 1.35rem; }
.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 { 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-modal-avatar { width: 4rem; height: 4rem; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--brand) 18%, var(--panel-hi)); color: var(--brand); font: 750 1.15rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.profile-modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-dialog form { display: grid; gap: .75rem; }
.profile-dialog label { display: grid; gap: .3rem; color: var(--muted); font-size: .75rem; }
.profile-dialog input, .profile-dialog textarea { 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 input:focus, .profile-dialog textarea:focus { border-color: var(--brand); }
.profile-dialog input:read-only, .profile-dialog textarea:read-only { border-color: transparent; padding-left: 0; background: transparent; resize: none; }
.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-actions button { min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: .55rem; color: var(--text); font: 650 .88rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.profile-save { background: var(--brand); color: var(--bg) !important; }
.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 { min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: .55rem; color: var(--text); font: 650 .88rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.dialog-cancel { background: var(--panel-hi); }
.dialog-delete { background: var(--danger); color: var(--bg) !important; }
.delete-dialog-actions button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 500px) {
  .msg, .msg.action { grid-template-columns: 1.25rem minmax(4.5rem, auto) minmax(0, 1fr); column-gap: .4rem; }
  .msg .time { display: none; }
  .msg .nick { grid-column: 2; }
  .msg .body { grid-column: 3; }
  .composer { gap: .25rem; }
  .composer-nick { max-width: 4.5rem; padding-left: .35rem; font-size: .8rem; }
}
@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 button {
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: var(--bg);
  padding: 0 15px;
  font: 700 1rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.login button:active { transform: translateY(1px); }

.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;
}
.login button { min-height: 42px; margin-top: 5px; }

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