:root {
  color-scheme: dark;
  --bg: #0a0e13;
  --panel: #131b26;
  --panel2: #0f151d;
  --elevated: #1a2433;
  --text: #e8eef6;
  --muted: #8fa3b8;
  --accent: #5eead4;
  --accent-dim: #134e4a;
  --danger: #f87171;
  --border: #2a3648;
  --radius: 10px;
  --sidebar-w: 15.5rem;
  --composer-rows: 3;
  --composer-textarea-h: 4.5rem;
  --composer-send-min-w: 3rem;
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

[hidden] { display: none !important; }

body {
  background: radial-gradient(ellipse 90% 55% at 50% -15%, #1a2a3a 0%, transparent 65%), var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ambient field: grain + star dust + thin aurora curtains. No blobs. */
.skjal-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  flex: none;
}
.fx-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(94, 234, 212, 0.11) 1px, transparent 1.2px);
  background-size: 32px 32px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 78%);
}
.fx-stars {
  position: absolute;
  inset: -30%;
  opacity: 0.85;
  background-image:
    radial-gradient(1px 1px at 8% 14%, rgba(232, 238, 246, 0.55), transparent),
    radial-gradient(1px 1px at 22% 38%, rgba(94, 234, 212, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 41% 22%, rgba(232, 238, 246, 0.4), transparent),
    radial-gradient(1px 1px at 63% 11%, rgba(125, 211, 252, 0.42), transparent),
    radial-gradient(1px 1px at 78% 34%, rgba(232, 238, 246, 0.35), transparent),
    radial-gradient(1.2px 1.2px at 91% 18%, rgba(94, 234, 212, 0.4), transparent),
    radial-gradient(1px 1px at 12% 68%, rgba(232, 238, 246, 0.38), transparent),
    radial-gradient(1px 1px at 33% 81%, rgba(94, 234, 212, 0.32), transparent),
    radial-gradient(1.2px 1.2px at 54% 62%, rgba(232, 238, 246, 0.48), transparent),
    radial-gradient(1px 1px at 71% 88%, rgba(125, 211, 252, 0.36), transparent),
    radial-gradient(1px 1px at 86% 73%, rgba(94, 234, 212, 0.4), transparent),
    radial-gradient(1px 1px at 47% 47%, rgba(232, 238, 246, 0.28), transparent);
  background-size: 220px 220px, 280px 280px, 340px 340px, 190px 260px, 310px 210px, 250px 300px,
    270px 240px, 320px 280px, 200px 320px, 360px 220px, 240px 260px, 300px 300px;
  animation: fx-star-drift 80s linear infinite;
}
.fx-ribbon {
  position: absolute;
  top: -25%;
  height: 150%;
  width: 9vw;
  min-width: 4.5rem;
  max-width: 7.5rem;
  border-radius: 100%;
  filter: blur(22px);
  opacity: 0.14;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(94, 234, 212, 0.55) 38%,
    rgba(45, 140, 160, 0.35) 58%,
    transparent 100%
  );
}
.fx-ribbon.r1 {
  left: 12%;
  transform: rotate(11deg);
  animation: fx-curtain-a 48s ease-in-out infinite;
}
.fx-ribbon.r2 {
  left: 48%;
  width: 7vw;
  opacity: 0.11;
  transform: rotate(-7deg);
  animation: fx-curtain-b 56s ease-in-out infinite;
}
.fx-ribbon.r3 {
  left: 74%;
  width: 8vw;
  opacity: 0.13;
  transform: rotate(6deg);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(125, 211, 252, 0.45) 42%,
    rgba(94, 234, 212, 0.28) 62%,
    transparent 100%
  );
  animation: fx-curtain-c 64s ease-in-out infinite;
}
.fx-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@keyframes fx-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-40px, -60px, 0); }
}
@keyframes fx-curtain-a {
  0%, 100% { transform: rotate(11deg) translate3d(0, 0, 0); opacity: 0.12; }
  50% { transform: rotate(14deg) translate3d(18px, -12px, 0); opacity: 0.2; }
}
@keyframes fx-curtain-b {
  0%, 100% { transform: rotate(-7deg) translate3d(0, 0, 0); opacity: 0.1; }
  50% { transform: rotate(-10deg) translate3d(-14px, 10px, 0); opacity: 0.16; }
}
@keyframes fx-curtain-c {
  0%, 100% { transform: rotate(6deg) translate3d(0, 0, 0); opacity: 0.11; }
  50% { transform: rotate(3deg) translate3d(10px, -16px, 0); opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-stars, .fx-ribbon { animation: none; }
}

.shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Auth */
.hero { text-align: center; padding: 2rem 1rem 1rem; }
.hero.compact { padding-top: 3rem; }
.mark { font-size: 2rem; color: var(--accent); }
h1 { margin: 0.25rem 0; letter-spacing: 0.08em; font-weight: 600; }
.tagline { color: var(--muted); margin: 0; }
.auth-panel {
  max-width: 22rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  position: relative;
}

.field { display: grid; gap: 0.35rem; margin: 1rem 0; }
.field span { font-size: 0.82rem; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: #3d5168;
}

.hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.auth-device-hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 0.5rem;
  padding: 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.check-field input { margin-top: 0.15rem; accent-color: var(--accent); }

.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: #3d5168; background: var(--elevated); }
.btn.primary { background: var(--accent-dim); border-color: #1f6f68; color: #e6fffa; }
.btn.primary:hover { background: #16655f; }
.btn.danger { background: #3f1d1d; border-color: #7f2d2d; color: #fecaca; }
.btn.ghost { background: transparent; }
.btn.small { padding: 0.3rem 0.55rem; font-size: 0.82rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.icon { padding: 0.4rem 0.6rem; font-size: 1rem; line-height: 1; }

.muted { color: var(--muted); }
.err { color: var(--danger); font-size: 0.88rem; }
.center { text-align: center; padding: 2rem; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  padding-top: max(0.65rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
  flex-shrink: 0;
}
.who { flex: 1; display: grid; line-height: 1.25; min-width: 0; }
.who strong { font-size: 0.95rem; }
.who span { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.linked-phone-qr {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.65rem;
  background: #fff;
  border-radius: 12px;
}
.linked-phone-qr img {
  width: 196px;
  height: 196px;
  display: block;
  background: #fff;
}
.linked-phone-qr .hint { color: #334; text-align: center; }

/* Layout */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--panel2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-account-menu { display: none; }
.sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel2);
  z-index: 2;
}
.phonebook-dock {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 70%, var(--panel2));
}
.phonebook-dock-head {
  padding: 0.5rem 0.85rem 0.15rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.phonebook-panel {
  padding: 0 0.65rem 0.65rem;
  display: grid;
  gap: 0.4rem;
}
.phonebook-search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 0.42rem 0.75rem;
  font: inherit;
  font-size: 0.84rem;
}
.phonebook-search:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: #3d5168;
}
.phonebook-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem;
  max-height: 6.5rem;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
}
.phonebook-list li {
  font-size: 0.84rem;
}
.phonebook-empty,
.phonebook-loading {
  padding: 0.45rem 0.55rem;
  margin: 0;
}
.phonebook-hit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.12s;
}
.phonebook-hit-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phonebook-hit:hover,
.phonebook-hit.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
}
.phonebook-detail { min-height: 0; }
.phonebook-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.phonebook-card-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.phonebook-card-meta strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phonebook-slogan {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phonebook-card-msg { flex-shrink: 0; }
.phonebook-error { margin: 0; font-size: 0.78rem; }
.phonebook-dialog .phonebook-list { max-height: 10rem; }
.phonebook-dialog-actions { margin-top: 0.35rem; }

.sidebar-section {
  padding: 0.5rem 0.85rem 0.2rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.room-list { list-style: none; margin: 0; padding: 0.35rem; }
.room-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  font-size: 0.9rem;
  min-width: 0;
}
.room-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-list li:hover, .room-list li.active { background: var(--panel); }
.room-list li.active { border: 1px solid #2d4558; }
.room-list li.fixture .room-badge { color: var(--accent); font-size: 0.65rem; }
.room-list li.has-unread .channel-label { font-weight: 600; }
.channel-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unread-badge {
  flex-shrink: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #042f2e;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}
.toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: grid;
  gap: 0.45rem;
  pointer-events: none;
  max-width: min(20rem, calc(100vw - 2rem));
}
.toast {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.86rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Chat panel */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  position: relative;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
  flex-shrink: 0;
}
.peer { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.peer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-meta { display: grid; gap: 0.1rem; min-width: 0; }
.peer-sub { font-size: 0.75rem; color: var(--muted); }
.peer-trust {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  flex-wrap: wrap;
}
.peer-fp {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.peer-fp.verified { color: var(--accent); }

.companion-block {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.5rem;
}
.companion-block .field-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.companion-cs {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  color: var(--accent);
}

.fingerprint-block { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.fingerprint-block .field-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0;
}
.fingerprint-full {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  word-break: break-word;
  margin: 0;
  padding: 0.5rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.fingerprint-hint { font-size: 0.75rem; margin: 0; }
.verify-qr {
  display: block;
  margin: 0.5rem auto;
  background: #fff;
  padding: 0.35rem;
  border-radius: 6px;
}
.verify-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.88rem;
}
.chat-head-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; flex-shrink: 0; }
.room-banner {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
  font-size: 0.88rem;
  flex-shrink: 0;
}
.room-banner.rules { font-size: 0.8rem; color: var(--muted); }

.chat-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.65rem;
}
.scroll-bottom-fab {
  position: absolute;
  right: 1.1rem;
  bottom: 0.85rem;
  z-index: 8;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel2) 92%, var(--accent) 8%);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.scroll-bottom-fab:hover {
  border-color: #1f6f68;
  color: var(--accent);
  transform: translateY(-1px);
}
.scroll-bottom-fab[hidden] { display: none !important; }
.day-separator {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.35rem 0 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  user-select: none;
}
.day-separator::before,
.day-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
.day-separator span {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: var(--panel);
}
.bubble-sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
  padding: 0 0.1rem;
}
.bubble.mine .bubble-sender { display: none; }

.bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: min(85%, 42rem);
}
.bubble-avatar {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1.15rem;
}
.bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.3rem 0.45rem 0.35rem;
  border: 1px dotted color-mix(in srgb, var(--border) 38%, transparent);
  border-radius: 12px;
}
.bubble.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-time {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.2;
  padding: 0 0.1rem;
  user-select: text;
}
.bubble.mine .msg-time { text-align: right; }
.bubble .text {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  line-height: 1.45;
  word-break: break-word;
  max-width: 100%;
}
.bubble.mine .text { background: var(--accent-dim); border-color: #1f6f68; }
.bubble.pending { opacity: 0.72; }
.bubble.failed { opacity: 0.88; border-color: #8a3a3a; }
.bubble.failed .send-failed-note,
.bubble.queued .send-queued-note {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.bubble.failed .send-failed-note { color: #e88; }
.bubble.queued .send-queued-note { color: var(--muted); font-style: italic; }
.bubble.queued { opacity: 0.8; }
.ok-hint { color: var(--accent); font-size: 0.85rem; }
.crypto-pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-left: 0.25rem;
  vertical-align: middle;
}
.crypto-pill.ratchet { color: var(--accent); border-color: #1f6f68; background: #0f2522; }
.crypto-pill.legacy { color: var(--muted); }
.crypto-pill.pending { color: var(--muted); font-style: italic; }
.bubble .btn-retry-send { margin-top: 0.35rem; font-size: 0.78rem; }
.reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-top: 0.1rem;
}
.bubble.mine .reaction-row { justify-content: flex-end; }
.btn-reply,
.btn-react {
  font-size: 0.78rem;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--border) 55%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  cursor: pointer;
  line-height: 1.2;
  opacity: 0.42;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bubble:hover .btn-reply,
.bubble:hover .btn-react,
.bubble:focus-within .btn-reply,
.bubble:focus-within .btn-react {
  opacity: 0.68;
}
.btn-reply:hover,
.btn-react:hover {
  opacity: 0.9;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.reaction-chip {
  font-size: 0.82rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  line-height: 1.2;
}
.reaction-chip.mine {
  border-color: #1f6f68;
  background: var(--accent-dim);
}
.reaction-n {
  font-size: 0.68rem;
  margin-left: 0.2rem;
  color: var(--muted);
}
.reaction-picker {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  max-width: 11.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.reaction-pick {
  font-size: 1.1rem;
  padding: 0.15rem 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
}
.reaction-pick:hover { background: var(--panel); }
.reply-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel2));
  font-size: 0.82rem;
}
.reply-bar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.reply-bar-label strong { color: var(--text); }
.reply-quote {
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}
.reply-quote strong { color: var(--text); }
.reply-arrow { opacity: 0.7; }
.ws-banner {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, #c4a035 12%, var(--panel2));
}
.bubble.purged .text {
  background: #1a1f28;
  border-color: #2a3340;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}
.bubble .text a { color: var(--accent); }
.bubble .text.ascii {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.48rem;
  line-height: 1.08;
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  padding: 0.75rem;
}
.bubble .text.styled { border-radius: 14px; }
.bubble .media { max-width: 100%; }
.bubble .media img,
.bubble .media video {
  max-width: min(100%, 360px);
  max-height: 280px;
  border-radius: var(--radius);
  display: block;
  object-fit: contain;
}
.bubble .media img.media-zoomable { cursor: zoom-in; }

.link-msg .text { padding: 0; background: transparent; border: none; }
.link-card {
  display: flex;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}
.link-card:hover { border-color: #1f6f68; }
.link-card-thumb {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 6px;
  background: var(--panel2) center/cover no-repeat;
}
.link-card-body {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}
.link-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-card-desc {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.link-card-site,
.link-card-url { font-size: 0.68rem; color: var(--muted); }
.link-card-pending { display: grid; gap: 0.15rem; }

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 8, 14, 0.88);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.media-lightbox.show { opacity: 1; }
.media-lightbox img,
.media-lightbox video {
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
body.lightbox-open { overflow: hidden; }

.typing-host { flex-shrink: 0; min-height: 0; }
.typing-host:empty { display: none; }
.typing-indicator {
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: var(--panel2);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.typing-dots {
  width: 1.1rem;
  height: 0.35rem;
  background: radial-gradient(circle, var(--accent) 38%, transparent 40%) 0 50% / 33% 100%,
    radial-gradient(circle, var(--accent) 38%, transparent 40%) 50% 50% / 33% 100%,
    radial-gradient(circle, var(--accent) 38%, transparent 40%) 100% 50% / 33% 100%;
  opacity: 0.75;
  animation: typing-pulse 1.1s ease-in-out infinite;
}
@keyframes typing-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.security-body .security-h {
  font-size: 0.95rem;
  margin: 1rem 0 0.35rem;
}
.security-list {
  margin: 0.25rem 0 0.5rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.device-model-hint {
  border-left: 2px solid var(--accent);
  padding-left: 0.55rem;
  margin-top: 0.5rem;
}

/* Composer */
.composer-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--panel2);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.composer-status {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--danger);
  background: #2a1515;
  border-bottom: 1px solid #4a2020;
}
.composer-status.ok { color: var(--accent); background: #0f2522; border-color: #1f4a44; }
.composer-hint {
  padding: 0.25rem 1rem 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem 0.65rem;
}
.composer-toolrow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.format-bar-slot { flex: 1; min-width: 0; }
.composer-quick-btns {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
  align-items: center;
  position: relative;
  z-index: 3;
}
.composer-input-row {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
}
.composer.composer-locked textarea {
  resize: none;
  overflow-y: auto;
}
.composer textarea {
  flex: 1;
  min-width: 0;
  min-height: var(--composer-textarea-h);
  max-height: var(--composer-textarea-h);
  resize: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font: inherit;
  line-height: 1.35;
}
.composer textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: #3d5168;
}
.send-btn {
  flex-shrink: 0;
  min-width: var(--composer-send-min-w);
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.2;
  align-self: flex-end;
}

/* Floating composer popups */
.composer-popup {
  position: fixed;
  z-index: 200;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  max-height: min(50vh, 22rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.composer-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.composer-popup-title { font-weight: 600; font-size: 0.88rem; }
.composer-popup-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.composer-popup-body {
  padding: 0.65rem;
  overflow: auto;
  min-height: 0;
}
.attach-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 1rem;
  overflow: hidden;
}
.attach-drop .attach-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}
.attach-drop-label { color: var(--muted); font-size: 0.9rem; pointer-events: none; }

.media-vis-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0 0.4rem;
}
.vis-pick {
  flex: 1 1 30%;
  min-width: 5.4rem;
  font-size: 0.78rem;
  padding: 0.4rem 0.45rem;
}
.vis-pick.active {
  background: var(--accent);
  color: #04110f;
  border-color: var(--accent);
}
.media-vis-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.media-once-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--panel2) 80%, #0a1a18);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.media-once-gate span { font-weight: 650; }
.media-once-gate em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
}
.btn-retract-media {
  margin-top: 0.25rem;
  align-self: flex-start;
}

/* Format bar (Saga-style) */
.fmt-bar-wrap { position: relative; }
.fmt-bar-wrap--inline { padding: 0; }
.fmt-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.12rem;
  padding: 0.16rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--elevated) 0%, var(--panel) 100%);
  overflow-x: auto;
}
.fmt-btn {
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.25rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 0.74rem;
  cursor: pointer;
}
.fmt-btn:hover, .fmt-btn.active { border-color: var(--border); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.fmt-ic-fg { color: var(--accent); }
.fmt-ic-bg { background: #ffeb3b; color: #000; padding: 0 2px; border-radius: 2px; }
.fmt-sep { width: 1px; height: 1.1rem; background: var(--border); margin: 0 0.08rem; }
.fmt-font-select, .fmt-size-select {
  height: 1.65rem;
  padding: 0 0.25rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.72rem;
  max-width: 5.5rem;
}
.fmt-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.fmt-popup[hidden] { display: none !important; }
.fmt-popup-head { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; }
.fmt-popup-close { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.fmt-color-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.fmt-color-swatch { aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.08); border-radius: 2px; cursor: pointer; padding: 0; }

/* Composer picker (emoticons / figlet) */
.composer-picker-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.composer-picker-title { font-weight: 600; flex: 1; }
.composer-search {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.45rem 0.6rem;
}
.composer-symbol-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0; }
.composer-symbol-tabs .symbol-tab.active { border-color: var(--accent); color: var(--accent); }
.composer-symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
  gap: 0.2rem;
  max-height: min(36vh, 14rem);
  overflow-y: auto;
}
.composer-symbol { width: 100%; aspect-ratio: 1; font-size: 1.15rem; }
.composer-symbol {
  width: 2rem; height: 2rem; font-size: 1.1rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); cursor: pointer;
}
.composer-symbol:hover { border-color: var(--accent); }
.figlet-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  font-size: 0.5rem;
  line-height: 1.1;
  overflow: auto;
  max-height: 7rem;
  margin: 0.5rem 0;
}

/* Avatars */
.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 2px solid var(--panel);
  pointer-events: none;
}
.avatar-wrap.online .presence-dot { background: #3dba7a; }
.avatar-wrap.offline .presence-dot { background: var(--muted, #6b7280); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}
.avatar.sm { width: 1.65rem; height: 1.65rem; font-size: 0.72rem; }
.avatar.lg { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
img.avatar { object-fit: cover; border: 1px solid var(--border); }
.profile-avatar-preview, .room-avatar-preview {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}

.avatar-picker-host { margin: 0.25rem 0; }

.avatar-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 2px dashed var(--border);
  background: var(--panel2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}

.avatar-picker:hover,
.avatar-picker:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel2));
  outline: none;
}

.avatar-picker-host.drag-over .avatar-picker {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
}

.avatar-picker-label {
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
  padding: 0.5rem;
  max-width: 4.5rem;
}

.avatar-picker img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: none;
}

/* Dialogs */
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(5, 8, 12, 0.78); }
dialog {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  max-width: calc(100vw - 2rem);
}
.dialog-body {
  padding: 1.35rem;
  min-width: 18rem;
  max-width: 24rem;
  display: grid;
  gap: 0.75rem;
}
.dialog-body h2 { margin: 0; font-size: 1.1rem; }
.dialog-body.profile-body {
  max-width: 26rem;
  max-height: min(85vh, 85dvh);
  overflow-y: auto;
}
.dialog-body .field { margin: 0.35rem 0; }
.dialog-body .companion-block .field { margin: 0; }
.invite-block { display: grid; gap: 0.85rem; justify-items: stretch; }
.invite-qr-card {
  margin: 0.15rem auto 0.25rem;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.invite-qr-card img,
.invite-block img {
  display: block;
  width: 12.5rem;
  height: 12.5rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 0.45rem;
}
.invite-qr-card .hint {
  text-align: center;
  margin: 0;
}
.invite-link-row {
  display: grid;
  gap: 0.4rem;
}
.invite-link {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-all;
  margin: 0;
  padding: 0.65rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.invite-link-row .btn { justify-self: start; }
.invite-block .btn.primary { width: 100%; }

.fixture-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #0f2522;
  border: 1px solid #1f6f68;
  color: var(--accent);
}

.wipe-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 19, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 10;
}
.wipe-overlay.active { opacity: 1; }
.wipe-stage { text-align: center; }
.wipe-avatar { width: 5rem; height: 5rem; font-size: 2rem; animation: wipe-dissolve 1.8s ease-in forwards; }
@keyframes wipe-dissolve {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; filter: blur(12px); }
}

.app-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel2));
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.app-banner span { flex: 1; line-height: 1.4; }

.recovery-banner {
  padding: 0.65rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel2));
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  flex-shrink: 0;
  display: grid;
  gap: 0.45rem;
}
.recovery-banner.warn {
  background: color-mix(in srgb, #c4a035 12%, var(--panel2));
  border-bottom-color: #5a4a20;
}
.recovery-banner strong { font-size: 0.88rem; }
.bubble.undecryptable-summary {
  max-width: 92%;
  border-style: dashed;
  opacity: 0.92;
}

.bubble .text.undecryptable {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  border-style: dashed;
}

.empty-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 2rem;
}

.mobile-only { display: none; }

@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
  .topbar-actions { display: none; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 3.25rem;
    bottom: 0;
    width: min(85vw, 16rem);
    z-index: 120;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    top: 3.25rem;
    background: rgba(5, 8, 12, 0.55);
    z-index: 110;
  }
  .sidebar-backdrop[hidden] { display: none !important; }
  .sidebar-account-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sidebar-account-menu .btn {
    width: 100%;
    min-height: 2.5rem;
    justify-content: center;
    text-align: center;
  }
  .sidebar-account-menu [data-skjal-act="invite"] {
    grid-column: 1 / -1;
  }
  .bubble { max-width: 92%; }
  .composer-popup {
    left: 8px !important;
    right: 8px;
    width: auto !important;
    max-height: 45vh;
  }
  .fmt-bar { flex-wrap: wrap; }
  .composer-toolrow { flex-wrap: wrap; }
  .auth-panel { padding-bottom: 2rem; }
  dialog { max-width: calc(100vw - 1.25rem); }
  .dialog-body { min-width: 0; width: 100%; }

  /* Security / Settings / Profile — native <dialog> sizes to content on iOS.
     Force a real full-screen sheet from the hamburger menu. */
  dialog.app-sheet,
  dialog.app-sheet[open],
  dialog.app-sheet:modal {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    max-height: none !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  dialog.app-sheet .dialog-body {
    max-width: none;
    width: 100%;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  dialog.app-sheet .dialog-body .btn-row:last-child {
    margin-top: auto;
    padding-top: 1rem;
  }
}

.unit-banner {
  background: var(--accent-dim);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.unit-banner code.unit-fp,
.unit-fp-display code {
  font-family: "IBM Plex Mono", monospace;
  color: var(--accent);
}

.unit-auth-block {
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
/* Aella paid companion */
.fixture-pill { margin-left: 0.35rem; font-size: 0.78rem; opacity: 0.95; }
.fixture-pill.ok { color: #4ade80; }
.fixture-pill.pay { color: #fbbf24; }
.room-banner.aella-banner { font-size: 0.85rem; line-height: 1.35; }
.room-banner.aella-banner.ok { border-left: 3px solid #4ade80; }
.room-banner.aella-banner.pay { border-left: 3px solid #fbbf24; }
.room-banner.aella-banner.warn { border-left: 3px solid #f87171; }
.channel-list li.fixture .channel-label::after { content: " · Aella"; opacity: 0.55; font-size: 0.75em; }

/* skjal-phone-safe */
body { padding-bottom: env(safe-area-inset-bottom); }
.shell { min-height: 100dvh; }

/* --------------------------------------------------------------------------
   Compact iPhone pocket shell
   Desktop + the 768px drawer stay as they are. This skin is portrait phones
   (≤480px): every control stays on screen, sized for a thumb.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --radius: 14px;
    --sidebar-w: 100%;
    --composer-textarea-h: 2.85rem;
    --composer-send-min-w: 4.35rem;
    --iphone-pad: 0.7rem;
  }

  html, body {
    background: #05070b;
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(ellipse 120% 42% at 50% -8%, #17343c 0%, transparent 58%),
      linear-gradient(180deg, #0b1218 0%, #05070b 42%, #070b10 100%);
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    padding-bottom: 0;
  }

  .shell {
    flex: 1;
    min-height: 0;
    height: auto;
    background: transparent;
  }

  .btn,
  .fmt-btn,
  .composer-symbol,
  .reaction-chip,
  .scroll-bottom-fab {
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }

  input, select, textarea, .btn {
    font-size: 16px;
  }

  .btn {
    min-height: 2.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
  }
  .btn.small {
    min-height: 2.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
  }
  .btn.icon {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }
  .btn.ghost {
    background: color-mix(in srgb, var(--panel) 70%, transparent);
  }

  /* Auth — stacked, full-width, thumb-sized */
  .hero { padding: 1.1rem 0.5rem 0.4rem; }
  .hero.compact { padding-top: max(1.4rem, env(safe-area-inset-top)); }
  .mark { font-size: 1.7rem; }
  h1 { font-size: 1.45rem; }
  .tagline { font-size: 0.88rem; }
  .auth-panel {
    max-width: none;
    padding: 0 var(--iphone-pad) calc(1.25rem + env(safe-area-inset-bottom));
  }
  .auth-panel .btn-row {
    flex-direction: column;
    gap: 0.55rem;
  }
  .auth-panel .btn-row .btn {
    width: 100%;
    min-height: 2.9rem;
  }
  .field { margin: 0.7rem 0; }
  .field input, .field textarea, .field select {
    min-height: 2.85rem;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
  }

  /* Identity island — account actions live in the ☰ menu */
  .topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem var(--iphone-pad) 0.4rem;
    padding-top: max(0.35rem, env(safe-area-inset-top));
    background: color-mix(in srgb, #0d161e 88%, #0a2a2c);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }
  .topbar #btn-channels {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 12px;
  }
  .topbar-actions { display: none !important; }
  .sidebar-account-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.85rem 0.9rem;
  }
  .sidebar-account-menu .btn {
    min-height: 2.75rem;
  }
  .sidebar-account-menu [data-skjal-act="invite"] {
    grid-column: 1 / -1;
  }
  .topbar .avatar {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.82rem;
  }
  .who strong { font-size: 0.92rem; }
  .who span { font-size: 0.7rem; }

  /* Full-height channel sheet */
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(100vw, 22.5rem);
    z-index: 130;
    transform: translateX(-105%);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border-right: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: 0 18px 18px 0;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.45);
    background: #0c141c;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 125;
    background: rgba(4, 8, 12, 0.62);
    backdrop-filter: blur(6px);
  }
  .sidebar-head {
    padding: 0.75rem 0.9rem;
    font-size: 0.78rem;
  }
  .sidebar-head .btn.small {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }
  .room-list li {
    min-height: 3rem;
    padding: 0.7rem 0.7rem;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .phonebook-search {
    min-height: 2.6rem;
    font-size: 16px;
    border-radius: 999px;
  }
  .phonebook-hit { min-height: 2.6rem; }

  /* Chat — pocket bubbles */
  .chat { background: transparent; }
  .chat-head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem var(--iphone-pad) 0.45rem;
    background: color-mix(in srgb, var(--panel2) 92%, #102226);
  }
  .peer { flex: 1 1 auto; min-width: 0; }
  .peer strong { font-size: 0.95rem; }
  .peer-sub { font-size: 0.7rem; }
  .chat-head-actions {
    width: auto;
    max-width: 46%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chat-head-actions::-webkit-scrollbar { display: none; }
  .chat-head-actions .btn {
    width: auto;
    flex-shrink: 0;
    min-height: 2.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .peer-trust {
    width: 100%;
  }
  .peer-trust #btn-verify-peer {
    min-height: 2.25rem;
  }

  .messages {
    padding: 0.7rem var(--iphone-pad) 0.85rem;
    gap: 0.5rem;
    flex-direction: column;
    justify-content: flex-start;
  }
  .fx-ribbon { width: 14vw; opacity: 0.16; }
  .fx-grid { opacity: 0.18; background-size: 26px 26px; }
  .bubble {
    max-width: 94%;
    gap: 0.35rem;
  }
  .bubble-stack {
    padding: 0.15rem 0.15rem 0.2rem;
    border: none;
    background: transparent;
  }
  .bubble .text {
    border-radius: 16px 16px 16px 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
  }
  .bubble.mine .text {
    border-radius: 16px 16px 6px 16px;
  }
  .btn-reply,
  .btn-react {
    opacity: 0.85;
    min-height: 1.85rem;
    padding: 0.2rem 0.5rem;
  }
  .bubble .media img,
  .bubble .media video {
    max-width: min(100%, 100vw);
    max-height: 220px;
  }

  .app-banner,
  .room-banner,
  .recovery-banner,
  .unit-banner {
    padding: 0.5rem var(--iphone-pad);
    font-size: 0.8rem;
  }

  /* Composer dock — stays above home indicator + keyboard */
  .composer-area {
    background: color-mix(in srgb, #0e171f 94%, #123338);
    border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    padding-bottom: max(env(safe-area-inset-bottom), var(--vv-bottom, 0px));
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
  }
  .composer {
    padding: 0.35rem var(--iphone-pad) 0.4rem;
    gap: 0.3rem;
  }
  .composer-toolrow {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  .fmt-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.12rem 0.2rem;
  }
  .fmt-bar::-webkit-scrollbar { display: none; }
  .fmt-btn {
    min-width: 2.15rem;
    min-height: 2.15rem;
    flex-shrink: 0;
  }
  .fmt-font-select, .fmt-size-select {
    min-height: 2.15rem;
    max-width: 4.8rem;
  }
  .composer-quick-btns { gap: 0.25rem; }
  .composer-input-row {
    align-items: stretch;
    gap: 0.4rem;
  }
  .composer textarea {
    min-height: 2.5rem;
    max-height: 5.5rem;
    border-radius: 16px;
    padding: 0.5rem 0.75rem;
    font-size: 16px;
  }
  .send-btn {
    min-width: var(--composer-send-min-w);
    min-height: 2.5rem;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 650;
    align-self: stretch;
  }
  .composer-popup,
  .composer-popup.composer-popup-sheet {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none;
    max-height: none;
    height: 100dvh;
    height: 100svh;
    border-radius: 0;
    border: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .composer-popup-head {
    padding: 0.7rem var(--iphone-pad);
  }
  .composer-popup-title { font-size: 1rem; }
  .composer-popup-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem var(--iphone-pad) 1rem;
  }
  .composer-popup-sheet .attach-drop {
    flex: 1;
    min-height: 12rem;
  }
  .composer-popup-sheet .composer-symbol-grid {
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  .scroll-bottom-fab {
    right: 0.75rem;
    bottom: 0.7rem;
    width: 2.6rem;
    height: 2.6rem;
  }

  /* Full-height sheets — Profile / Settings / Security use the whole screen.
     iOS <dialog> UA is height:fit-content + margin:auto; !important required. */
  dialog:not([open]) { display: none !important; }
  dialog,
  dialog[open],
  dialog:modal,
  dialog.app-sheet,
  dialog.app-sheet[open],
  dialog.app-sheet:modal {
    margin: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    box-sizing: border-box !important;
  }
  .dialog-body,
  dialog.app-sheet .dialog-body,
  .dialog-body.security-body,
  .dialog-body.settings-body,
  .dialog-body.profile-body {
    min-width: 0;
    max-width: none !important;
    width: 100%;
    min-height: 100%;
    height: 100%;
    padding: max(0.9rem, env(safe-area-inset-top)) var(--iphone-pad) calc(0.95rem + env(safe-area-inset-bottom));
    max-height: none !important;
    overflow-y: auto;
    gap: 0.6rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .dialog-body .btn-row:last-child,
  dialog.app-sheet .dialog-body .btn-row:last-child {
    margin-top: auto;
    padding-top: 1rem;
  }
  .dialog-body .btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.45rem;
  }
  .dialog-body .btn-row .btn,
  .phonebook-dialog-actions .btn {
    width: 100%;
    min-height: 2.75rem;
  }
  .invite-qr-card {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .invite-qr-card img,
  .invite-block img {
    width: min(14rem, 72vw);
    height: min(14rem, 72vw);
    margin-left: auto;
    margin-right: auto;
  }
  .invite-link-row .btn,
  .invite-block .btn.primary { width: 100%; justify-self: stretch; }

  .toast-host {
    right: 0.65rem;
    left: 0.65rem;
    bottom: calc(0.65rem + env(safe-area-inset-bottom));
    max-width: none;
  }

  .media-lightbox { padding: 0.5rem; }
  .media-lightbox img,
  .media-lightbox video {
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 10px;
  }
  .media-vis-picks { flex-direction: column; }
  .vis-pick { min-height: 2.5rem; }
  .attach-drop { min-height: 4.5rem; }
  .media-once-gate {
    min-width: 0;
    width: 100%;
    min-height: 3.25rem;
  }
  .lightbox-close {
    top: max(0.6rem, env(safe-area-inset-top));
    right: 0.6rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  #skjal-install-bar {
    flex-shrink: 0;
    position: relative;
    top: auto;
    z-index: 400;
    padding: 0.45rem var(--iphone-pad) !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    gap: 0.45rem !important;
    align-items: center !important;
  }
  #skjal-install-bar span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #skjal-install-bar button {
    min-height: 2.1rem;
    flex-shrink: 0;
  }
}