:root {
  --bg: #0b1220;
  --bg-elevated: #131c2e;
  --bg-input: #0f1728;
  --accent: #14b8a6;
  --accent-dim: #0f766e;
  --link: #a5e9ff;
  --danger: #ef4444;
  --text: #e6edf5;
  --text-dim: #9fb0c6;
  --border: #223047;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left);
  --safe-r: env(safe-area-inset-right);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* v4.10: Safari inflates text in landscape otherwise */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Centred screens still have to respect the notch and the home indicator. */
.center-col {
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding:
    calc(var(--safe-t) + 32px)
    calc(var(--safe-r) + 24px)
    calc(var(--safe-b) + 32px)
    calc(var(--safe-l) + 24px);
}

.brand h1 { font-size: 36px; margin: 0 0 8px; letter-spacing: -0.02em; }
.tagline { color: var(--text-dim); margin: 0; font-size: 15px; max-width: 34ch; }
.hint { color: var(--text-dim); font-size: 13px; max-width: 320px; }
.fatal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Sign in ---------- */
.google-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.google-btn:active { background: #f1f1f1; }

/* ---------- Username ---------- */
.username-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.username-form input {
  min-height: 48px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 17px;
  outline: none;
  text-align: center;
}
.username-status { min-height: 18px; font-size: 13px; }
.username-status.ok { color: var(--accent); }
.username-status.bad { color: #ff9a9a; }
.primary-btn {
  min-height: 48px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #04211d;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.primary-btn:disabled { opacity: 0.4; }

/* ---------- Avatars ---------- */
.avatar {
  border-radius: 50%;
  background: var(--bg-elevated);
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-sm { width: 40px; height: 40px; }
.avatar-lg { width: 110px; height: 110px; }

/* ---------- Home ---------- */
#screen-home {
  gap: 6px;
  padding:
    calc(var(--safe-t) + 12px)
    calc(var(--safe-r) + 12px)
    calc(var(--safe-b) + 12px)
    calc(var(--safe-l) + 12px);
}
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px 12px;
}
.me-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  min-width: 0;
}
.me-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  min-height: 44px;
}
.search-wrap { padding: 0 4px; }
.search-wrap input {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.search-results { padding: 4px 4px 0; }

.user-row, .convo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 8px;
  border: none;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.user-row:hover, .convo-row:hover,
.user-row:active, .convo-row:active { background: var(--bg-elevated); }
.user-row .name, .convo-row .name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.convo-row .meta { flex: 1; min-width: 0; }
.convo-row .preview {
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-row .time { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
.empty-note { color: var(--text-dim); font-size: 14px; padding: 16px 8px; }

.convo-list-header {
  margin: 14px 0 0;
  padding: 0 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.convo-list { flex: 1; overflow-y: auto; padding: 4px; }

/* ---------- Conversation ---------- */
#screen-conversation { padding: 0; }
.convo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 8px) 10px calc(var(--safe-l) + 8px);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.convo-header-info { flex: 1; min-width: 0; }
/* A 20-character username must not push the call buttons off screen. */
.peer-username {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peer-presence {
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
}
.icon-btn:disabled { opacity: 0.35; cursor: default; }

.convo-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #3a2a12;
  border-bottom: 1px solid #5a411c;
  color: #ffd9a0;
  font-size: 13px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.load-older {
  align-self: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  font-size: 13px;
  cursor: pointer;
}

.msg-row { display: flex; max-width: 100%; }
.msg-row.me { justify-content: flex-end; }
.msg-row.them { justify-content: flex-start; }
.msg-row.system { justify-content: center; }

.msg-col { display: flex; flex-direction: column; max-width: min(78%, 560px); min-width: 0; }
.msg-row.me .msg-col { align-items: flex-end; }
.msg-row.them .msg-col { align-items: flex-start; }
.bubble-wrap { display: flex; align-items: flex-end; gap: 2px; min-width: 0; max-width: 100%; }

.msg {
  padding: 9px 13px;
  border-radius: var(--bubble-radius);
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.msg-text { white-space: pre-wrap; }
.msg a { color: var(--link); text-decoration: underline; }
.msg-row.me .msg { background: var(--accent-dim); border-bottom-right-radius: 4px; }
.msg-row.them .msg { background: #1c2740; border-bottom-left-radius: 4px; }
.msg.deleted { color: var(--text-dim); font-style: italic; }
.msg-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.msg-row.me .msg-meta { text-align: right; }

.msg img.attachment {
  max-width: min(220px, 60vw);
  height: auto;
  border-radius: 12px;
  display: block;
  margin-bottom: 4px;
  cursor: zoom-in;
}
.file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  min-height: 44px;
  background: rgba(var(--ink-rgb),0.06);
  border-radius: 10px;
  margin-bottom: 4px;
  text-decoration: none;
  color: var(--text);
}
.file-chip.blocked { color: var(--danger-text); background: rgba(239,68,68,0.12); }
.file-chip .fname {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.msg-row.system .msg {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.call-time { opacity: 0.75; font-size: 11px; }

/* 44px hit area without a 44px-wide visual footprint. */
.msg-menu-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-self: center;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ---------- Composer ---------- */
.attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px calc(var(--safe-r) + 14px) 8px calc(var(--safe-l) + 14px);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.attach-preview-inner { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.attach-preview-inner img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.attach-preview-inner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-size { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
.attach-policy { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); flex-shrink: 0; }
.attach-policy button {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.attach-policy button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.attach-policy button:nth-child(n+2)[aria-pressed="true"] { background: #d64b62; }

/* A photo that can be viewed once or twice: a tile, never the picture. */
.view-once {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 12px;
  border: 1px dashed rgba(214,75,98,0.7);
  background: rgba(214,75,98,0.10);
  color: var(--text);
  text-align: left;
  cursor: default;
  font: inherit;
}
.view-once.ready { cursor: pointer; }
.view-once.ready:active { transform: scale(0.98); }
.view-once.gone { border-style: solid; border-color: var(--border); background: rgba(var(--ink-rgb),0.04); color: var(--text-dim); }
.view-once .vo-icon { font-size: 22px; line-height: 1; width: 26px; text-align: center; color: #e8809a; }
.view-once.gone .vo-icon { color: var(--text-dim); }
.view-once .vo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view-once .vo-title { font-weight: 600; font-size: 14px; }
.view-once .vo-sub { font-size: 12px; color: var(--text-dim); }

.edit-banner {
  padding: 8px 14px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px calc(var(--safe-r) + 8px) 10px calc(var(--safe-l) + 8px);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.composer textarea {
  flex: 1;
  min-width: 0; /* without this the send button is pushed off narrow screens */
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.35;
  outline: none;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}
.composer textarea:disabled { opacity: 0.5; }
.send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--send-bg, var(--accent));
  color: var(--bubble-me-text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.send-btn:disabled { opacity: 0.4; }

/* ---------- Action sheet ---------- */
.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 80;
  display: flex;
  align-items: flex-end;
}
.action-sheet {
  width: 100%;
  background: var(--bg-elevated);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 10px;
  padding-bottom: calc(10px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.action-sheet-btn {
  padding: 15px;
  min-height: 48px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
}
.action-sheet-btn:active { background: rgba(255,255,255,0.06); }
.action-sheet-btn.danger { color: #ff8a8a; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
.lightbox video[hidden], .lightbox img[hidden] { display: none !important; }
.lightbox.burn img { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.lightbox-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--safe-b) + 18px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  pointer-events: none;
}
.lightbox-bar[hidden] { display: none !important; }
.lightbox-note { color: rgba(255,255,255,0.85); font-size: 13px; background: rgba(0,0,0,0.5); padding: 7px 12px; border-radius: 14px; }
.lightbox-note[hidden] { display: none !important; }
.lightbox-save {
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  background: var(--accent);
  padding: 10px 16px;
  border-radius: 14px;
}
.lightbox-save[hidden] { display: none !important; }
.lightbox-save:active { transform: scale(0.97); }

/* ---------- Incoming call ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #0b1220, #10203a);
  /* Must outrank the lightbox (95) and the loading overlay (96): a call that
     renders underneath an open photo cannot be answered. */
  z-index: 200;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-t) + 60px) 24px calc(var(--safe-b) + 60px);
}
.incoming-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}
.ring-avatar { border: 2px solid var(--accent); animation: ringpulse 1.2s infinite; }
@keyframes ringpulse {
  0% { box-shadow: 0 0 0 0 rgba(20,184,166,0.5); }
  70% { box-shadow: 0 0 0 24px rgba(20,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-avatar { animation: none; }
  .spinner { animation-duration: 2s; }
}
.incoming-label {
  font-size: 22px;
  font-weight: 700;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incoming-kind { color: var(--text-dim); }
.ring-hint {
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 0.92rem;
  animation: ring-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes ring-hint-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-hint { animation: none; }
}
.incoming-actions { display: flex; gap: 60px; }
.round-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  font-size: 26px;
  color: white;
  cursor: pointer;
}
.round-btn.decline { background: var(--danger); }
.round-btn.accept { background: var(--accent); }

/* ---------- In-call ---------- */
#screen-call {
  position: fixed;
  inset: 0;
  padding: 0;
  background: #000;
  z-index: 85;
}
#remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* switched to contain by applyRemoteFit when cover would crop the face */
  background: transparent;
}
.remote-backdrop {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(28px) brightness(0.55) saturate(0.8);
  pointer-events: none;
}
#screen-call.watching .remote-backdrop { display: none; }
.call-peer-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 1;
}
.call-peer-name { font-size: 20px; font-weight: 600; }
#local-video {
  position: absolute;
  top: calc(var(--safe-t) + 64px);
  right: 16px;
  width: 96px;
  height: auto;
  aspect-ratio: 3 / 4; /* replaced by the camera's real shape once it is known */
  max-height: 40vh;
  border-radius: 14px;
  object-fit: cover;
  background: #111;
  border: 2px solid rgba(255,255,255,0.25);
  z-index: 3;
}
#local-video.landscape { width: 136px; }

/* A phone turned sideways: a short screen, so everything gets smaller and the
   controls hug the bottom edge instead of floating well above it. */
@media (orientation: landscape) and (max-height: 520px) {
  #local-video { top: calc(var(--safe-t) + 12px); width: 72px; }
  #local-video.landscape { width: 108px; }
  .call-status { top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 12px); right: auto; max-width: 48vw; font-size: 12px; padding: 6px 10px; }
  .call-quality { top: calc(var(--safe-t) + 44px); left: calc(var(--safe-l) + 12px); }
  .call-bars { bottom: calc(var(--safe-b) + 10px); gap: 6px; }
  .call-controls { gap: 8px; }
  .call-controls .ctl-btn { width: 46px; height: 46px; font-size: 20px; }
  .call-extras .ctl-btn.small { width: 36px; height: 36px; font-size: 15px; }
}
.call-status {
  position: absolute;
  top: calc(var(--safe-t) + 16px);
  left: 16px;
  right: 16px;
  background: rgba(0,0,0,0.55);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-quality {
  position: absolute;
  top: calc(var(--safe-t) + 58px);
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(0,0,0,0.55);
  font-size: 11px;
  color: var(--text-dim);
  z-index: 2;
}
.call-quality .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.call-quality .bars i {
  width: 3px;
  border-radius: 1px;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s;
}
.call-quality .bars i:nth-child(1) { height: 5px; }
.call-quality .bars i:nth-child(2) { height: 9px; }
.call-quality .bars i:nth-child(3) { height: 12px; }
.call-quality[data-level="good"] .bars i { background: #34d399; }
.call-quality[data-level="ok"] .bars i:nth-child(-n+2) { background: #fbbf24; }
.call-quality[data-level="poor"] .bars i:nth-child(1) { background: #f87171; }
.call-quality[data-level="poor"] { color: #ffc9c9; }
/* Their microphone has gone quiet on a link that is fine: dimmed, not red. */
.call-quality[data-quiet="true"] .bars i { opacity: 0.5; }
.call-quality[data-quiet="true"] { color: var(--text-dim); }

.call-bars {
  position: absolute;
  bottom: calc(var(--safe-b) + 24px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.call-controls, .call-extras {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 12px;
}
.call-extras { gap: 10px; }
.ctl-btn.small { width: 42px; height: 42px; font-size: 17px; }
/* Must stay legible over a bright remote video. */
.ctl-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(12,18,30,0.7);
  color: white;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.ctl-btn.off { background: rgba(255,255,255,0.4); color: #0b1220; }
.ctl-btn.on {
  background: var(--accent);
  color: #04211d;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.28), 0 2px 10px rgba(0,0,0,0.5);
}
.ctl-btn:disabled { opacity: 0.4; }
.ctl-btn.hangup { background: var(--danger); border-color: transparent; }

/* ---------- Toast / loading ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 20px);
  transform: translateX(-50%);
  background: #1c2740;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 300;
  max-width: 90%;
  text-align: center;
}
.loading {
  position: fixed;
  inset: 0;
  background: rgba(11,18,32,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 96;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

[hidden] { display: none !important; }

/* ==========================================================================
   Polish layer
   Animations are restricted to transform/opacity so they stay on the GPU and
   never contend with video encoding during a call.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .screen:not([hidden]) { animation: screenIn 0.24s ease-out; }
  @keyframes screenIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .msg-row.new { animation: msgIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes msgIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  .convo-row, .user-row { animation: rowIn 0.26s ease-out backwards; }
  @keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .convo-row:nth-child(2) { animation-delay: 0.03s; }
  .convo-row:nth-child(3) { animation-delay: 0.06s; }
  .convo-row:nth-child(4) { animation-delay: 0.09s; }
  .convo-row:nth-child(n+5) { animation-delay: 0.12s; }
}

/* --- Aurora: a slow, cheap two-blob gradient behind the entry screens ----- */
/* z-index:0 is load-bearing: without its own stacking context the blobs at
   z-index:-1 paint behind the body background and vanish entirely. */
.center-col { position: relative; overflow: hidden; z-index: 0; isolation: isolate; }
.center-col > * { position: relative; z-index: 1; }
.center-col::before,
.center-col::after {
  content: "";
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.center-col::before {
  background: radial-gradient(circle, rgba(20,184,166,0.55), transparent 70%);
  top: -26vmax; left: -22vmax;
}
.center-col::after {
  background: radial-gradient(circle, rgba(56,110,220,0.45), transparent 70%);
  bottom: -30vmax; right: -24vmax;
}
@media (prefers-reduced-motion: no-preference) {
  .center-col::before { animation: drift1 22s ease-in-out infinite alternate; }
  .center-col::after  { animation: drift2 27s ease-in-out infinite alternate; }
  @keyframes drift1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(9vmax, 7vmax) scale(1.14); }
  }
  @keyframes drift2 {
    from { transform: translate(0, 0) scale(1.08); }
    to   { transform: translate(-8vmax, -6vmax) scale(1); }
  }
}

.brand h1 {
  background: linear-gradient(120deg, #ffffff 15%, var(--accent) 55%, #7cc4ff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Depth on the entry surfaces ---------------------------------------- */
.google-btn { box-shadow: 0 8px 26px rgba(0,0,0,0.42); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.google-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.google-btn:active { transform: translateY(1px) scale(0.985); }

.username-form input,
.search-wrap input,
.composer textarea {
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.username-form input:focus,
.search-wrap input:focus,
.composer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.16);
}

.primary-btn, .send-btn {
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}
.primary-btn:not(:disabled):active,
.send-btn:not(:disabled):active { transform: scale(0.94); }
.primary-btn:not(:disabled):hover,
.send-btn:not(:disabled):hover { filter: brightness(1.08); }

.icon-btn { transition: background 0.14s ease, transform 0.12s ease; }
.icon-btn:not(:disabled):hover { background: rgba(var(--ink-rgb),0.07); }
.icon-btn:not(:disabled):active { transform: scale(0.9); }

/* --- Home header gets a subtle glass treatment --------------------------- */
.home-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.me-chip .avatar { box-shadow: 0 0 0 2px rgba(20,184,166,0.45); }

/* --- Conversation rows --------------------------------------------------- */
.convo-row, .user-row { transition: background 0.14s ease, transform 0.14s ease; }
.convo-row:active, .user-row:active { transform: scale(0.99); }

/* --- Message bubbles ----------------------------------------------------- */
.msg-row.me .msg {
  background: linear-gradient(135deg, var(--bubble-me) 0%, var(--bubble-me-2) 100%);
  color: var(--bubble-me-text);
  box-shadow: 0 2px 10px var(--bubble-me-shadow);
}
.msg-row.me .msg a { color: var(--bubble-me-text-2); font-weight: 600; }
.msg-row.me .msg-menu-btn { color: var(--text-dim); }
.msg-row.them .msg {
  background: linear-gradient(135deg, #1e2a45 0%, #18213a 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.msg img.attachment { transition: transform 0.16s ease; }
.msg img.attachment:hover { transform: scale(1.015); }

/* --- Presence dot -------------------------------------------------------- */
.peer-presence.is-online { color: var(--online); }
.peer-presence.is-online::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--online);
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(52,211,153,0.9);
}

/* --- Call screen --------------------------------------------------------- */
#screen-call { background: radial-gradient(120% 90% at 50% 0%, #16233d 0%, #070b14 65%); }
.call-peer-card .avatar {
  box-shadow: 0 0 0 3px rgba(20,184,166,0.35), 0 18px 50px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .call-peer-card.ringing .avatar { animation: ringpulse 1.6s ease-out infinite; }
}
.call-controls .ctl-btn { transition: transform 0.13s ease, background 0.16s ease; }
.call-controls .ctl-btn:active { transform: scale(0.9); }
#local-video { box-shadow: 0 8px 24px rgba(0,0,0,0.55); transition: transform 0.2s ease; }

/* --- Incoming call ------------------------------------------------------- */
.round-btn { transition: transform 0.14s ease, filter 0.14s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.round-btn:active { transform: scale(0.9); }
.round-btn.accept { animation: acceptGlow 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .round-btn.accept { animation: none; } }
@keyframes acceptGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(20,184,166,0.5); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 14px rgba(20,184,166,0); }
}

/* --- Toast --------------------------------------------------------------- */
.toast {
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
/* v4.9: "Connect updated — tap to reload" is a button in a toast's clothes. */
.toast.tappable { cursor: pointer; border-color: var(--accent); }
.toast.tappable::after { content: " ↻"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toastIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
}

/* --- Action sheet -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .action-sheet-backdrop:not([hidden]) .action-sheet { animation: sheetUp 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
}

/* --- Reactions ----------------------------------------------------------- */
.reaction-row {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.reaction-pick {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.14s ease;
}
.reaction-pick:hover { background: rgba(255,255,255,0.07); transform: scale(1.18); }
.reaction-pick:active { transform: scale(0.92); }
.reaction-pick.mine { background: rgba(var(--accent-rgb),0.22); }

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.reaction-chip.mine { border-color: var(--accent); background: rgba(var(--accent-rgb),0.18); }
.reaction-chip .count { color: var(--text-dim); font-size: 11px; }
.reaction-chip.mine .count { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .reaction-chip { animation: popIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes popIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
  }
}
.msg a, .msg .file-chip { cursor: pointer; }

/* --- Watch together ------------------------------------------------------ */
.watch-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watch-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.watch-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px calc(var(--safe-r) + 24px) 24px calc(var(--safe-l) + 24px);
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #17243e 0%, #05080f 70%);
}
.watch-empty h3 { margin: 0; font-size: 24px; }
.watch-form { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.watch-form input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.watch-form .primary-btn { min-height: 46px; padding: 12px 20px; flex-shrink: 0; }

.watch-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--safe-b) + 14px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 12px;
  border-radius: 18px;
  background: rgba(8,12,20,0.78);
  backdrop-filter: blur(10px);
  z-index: 6;
}
.watch-bar .ctl-btn { width: 44px; height: 44px; font-size: 18px; }
.watch-seek {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  height: 26px;
}
.watch-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; min-width: 38px; text-align: right; }

/* While watching, the call feeds become corner thumbnails over the content. */
#screen-call.watching #remote-video {
  inset: auto;
  top: calc(var(--safe-t) + 12px);
  right: 12px;
  width: 104px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.28);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  z-index: 7;
}
#screen-call.watching #local-video {
  top: calc(var(--safe-t) + 96px);
  right: 12px;
  width: 78px;
  height: 58px;
  z-index: 7;
}
#screen-call.watching .call-peer-card,
#screen-call.watching .call-quality { display: none; }
#screen-call.watching .call-status {
  left: 12px;
  right: auto;
  max-width: 45vw;
  z-index: 7;
}
#screen-call.watching .call-bars { bottom: calc(var(--safe-b) + 74px); z-index: 7; }

/* Floating reactions over the content */
.watch-reactions {
  position: absolute;
  right: 16px;
  bottom: calc(var(--safe-b) + 84px);
  width: 60px;
  height: 220px;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.float-react {
  position: absolute;
  bottom: 0;
  font-size: 26px;
  animation: floatUp 2.4s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 1; transform: translateY(-18px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-190px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .float-react { animation: none; opacity: 0; }
}

/* --- Call control bar: fits the narrowest phone -------------------------- */
/* The bar has grown to as many as eight buttons. Wrap is the safety net; the
   size steps keep it on one row on real phones while staying >=44px. */
.call-controls, .call-extras { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 420px) {
  .call-controls { gap: 10px; padding: 0 8px; }
  .call-extras { gap: 8px; padding: 0 8px; }
  .ctl-btn { width: 50px; height: 50px; font-size: 20px; }
  .ctl-btn.small { width: 40px; height: 40px; font-size: 16px; }
}
@media (max-width: 360px) {
  .call-controls { gap: 8px; padding: 0 6px; }
  .call-extras { gap: 6px; padding: 0 6px; }
  .ctl-btn { width: 48px; height: 48px; font-size: 19px; }
  .ctl-btn.small { width: 38px; height: 38px; font-size: 15px; }
}

/* --- Watch: source chooser ----------------------------------------------- */
.watch-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
}
.watch-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px;
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.watch-option:hover { border-color: var(--accent); background: #18243c; }
.watch-option:active { transform: scale(0.985); }
.watch-option .ico { font-size: 24px; line-height: 1.1; flex-shrink: 0; }
.watch-option .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.watch-option strong { font-size: 15px; }
.watch-option small { color: var(--text-dim); font-size: 12px; line-height: 1.35; }

.yt-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.yt-player iframe { width: 100%; height: 100%; border: 0; }

.watch-banner {
  position: absolute;
  top: calc(var(--safe-t) + 12px);
  left: 12px;
  max-width: 60vw;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(var(--accent-rgb),0.9);
  color: var(--bubble-me-text);
  font-size: 12px;
  font-weight: 600;
  z-index: 8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Conversation must never push its composer off a short screen --------- */
/* A scrollable flex child defaults to min-height:auto, so it refuses to shrink
   below its content and shoves everything after it past the viewport. Caught on
   a real 384x701 phone, where the send button became unclickable. */
.messages { min-height: 0; }
#screen-conversation {
  background: var(--bg);
  color: var(--text); /* v4.1: a mode's --text reaches plain words, not only rules that name it */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* --- v4.10: iOS screens ------------------------------------------------- */
/* On iOS the on-screen keyboard shrinks the *visual* viewport and nothing
   else: 100dvh stays the full height, the composer ends up under the keys,
   and Safari scrolls the page to reveal it — header gone, a gap below. So
   the screens that must fit above the keyboard take their height from
   --vvh, which reflectViewport() sets from visualViewport.height (equal to
   100dvh everywhere else; a pinch-zoomed page is left alone). */
@supports (height: 100dvh) {
  #screen-conversation { height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); min-height: 0; } /* .screen sets min-height: 100dvh */
  .action-sheet-backdrop, .story-screen, .story-compose, .media-screen, .lightbox { height: var(--vvh, 100dvh); bottom: auto; }
}
/* iOS Safari zooms the page on focus of any field under 16px — a rule only
   iOS applies (-webkit-touch-callout exists nowhere else). */
@supports (-webkit-touch-callout: none) {
  input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
}

/* --- Cats ---------------------------------------------------------------- */
/* Generated cat avatars get a soft ring so they read as a portrait, not a sticker. */
.avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.me-chip .avatar { box-shadow: 0 0 0 2px rgba(20,184,166,0.45); }

/* A paw trail padding out the empty conversation list. */
.convo-list .empty-note::after {
  content: " 🐾";
  opacity: 0.7;
}

/* The spinner gets ears. */
.loading::after {
  content: "🐈";
  position: absolute;
  font-size: 20px;
  margin-top: 58px;
  animation: catBob 1.6s ease-in-out infinite;
}
@keyframes catBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .loading::after { animation: none; } }

/* --- The cat (ported from ISH²) ------------------------------------------ */
.empty-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 26px 8px;
}
.cat-sit { overflow: visible; }
.cat-sit .blink { animation: ish-blink 4.5s steps(1, end) infinite; }
.cat-tail { transform-origin: 24px 62px; animation: ish-tail 3.4s ease-in-out infinite; }
.cat-head { transform-origin: 84px 36px; animation: ish-earflick 7.5s ease-in-out infinite; }

@keyframes ish-blink { 0%, 92%, 100% { opacity: 1; } 95%, 97% { opacity: 0.15; } }
@keyframes ish-tail  { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
@keyframes ish-earflick {
  0%, 88%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(-13deg); }
  95% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-sit .blink, .cat-tail, .cat-head { animation: none; }
}

/* ==========================================================================
   The text layer
   Compact the way WhatsApp/Telegram are compact: 2px between messages in a
   group, the time inside the bubble, the tail only on the last of a run.
   Everything animated is transform/opacity so it never fights a video call.
   ========================================================================== */

:root {
  --bubble-them: #1c2740;
  --bubble-them-2: #16203a;
  --chat-bg: #0a1020;
  /* v4.0 chat modes: everything a mode may recolour, with today's look as the default. */
  --bubble-me: #18c4b1;
  --bubble-me-2: #0f8f83;
  --bubble-me-text: #04211d;
  --bubble-me-text-2: #04302b;
  --bubble-me-shadow: rgba(13,127,116,0.3);
  --header-bg: rgba(19, 28, 46, 0.86);
  --composer-bg: rgba(19,28,46,0.92);
  --accent-rgb: 20,184,166;
  --chat-glow-1: rgba(20,184,166,0.10);
  --chat-glow-2: rgba(56,110,220,0.10);
  --bubble-radius: 16px;
  --motion: 1;
  /* v4.1: light variants. Tints "drawn in ink" on the ground, chips that float
     on "paper", and the two accents that are text rather than a bubble. */
  --ink-rgb: 255,255,255;
  --paper-rgb: 19,28,46;
  --tick-seen: #ffffff;
  --online: #34d399;
  --danger-text: #ff8a8a;
  --wall-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.075'><g><path d='M36 54c0-11 7-17 18-17s18 6 18 17c0 12-8 20-18 20S36 66 36 54z'/><path d='M40 44l-3-16 13 9M68 44l3-16-13 9'/><circle cx='48' cy='53' r='1.6' fill='%23fff'/><circle cx='60' cy='53' r='1.6' fill='%23fff'/><path d='M52 59h4l-2 2.5z' fill='%23fff'/><path d='M44 60h-12M44 63l-11 2M64 60h12M64 63l11 2'/></g><g><circle cx='150' cy='40' r='6'/><circle cx='141' cy='31' r='3'/><circle cx='149' cy='27' r='3'/><circle cx='157' cy='28' r='3'/><circle cx='162' cy='35' r='2.6'/></g><g><circle cx='214' cy='92' r='15'/><path d='M203 82c8 4 14 12 16 22M206 101c6-8 13-11 21-11M220 79c-3 8-3 16 2 24'/><path d='M229 96c8 6 12 18 6 28-3 5-9 6-13 3'/></g><g><path d='M40 160l14-8-2 16z'/><path d='M52 160h34'/><path d='M60 154v12M68 152v16M76 154v12'/><path d='M86 160l12-8v16z'/></g><g><path d='M150 210c-14 0-22-8-22-16s10-13 22-13 20 6 20 13-6 16-20 16z'/><circle cx='166' cy='188' r='5'/><circle cx='163' cy='198' r='1.5' fill='%23fff'/><path d='M128 196c-10 0-16 8-12 16 3 6 10 6 12 2'/><path d='M172 200l10-1M172 203l10 2'/></g><g><path d='M226 178l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23fff' stroke='none'/><path d='M22 232l1.5 3.5 3.5 1.5-3.5 1.5-1.5 3.5-1.5-3.5-3.5-1.5 3.5-1.5z' fill='%23fff' stroke='none'/><path d='M104 20l1.2 2.8 2.8 1.2-2.8 1.2-1.2 2.8-1.2-2.8-2.8-1.2 2.8-1.2z' fill='%23fff' stroke='none'/></g><g><path d='M90 232c-12 2-20-6-18-16 2-9 12-12 20-8 6 3 8 10 6 15'/><path d='M76 232l-8 6M96 224c4-2 6-6 6-10'/><path d='M84 218l-2-8 7 5M94 216l3-8-7 4'/><circle cx='86' cy='222' r='1.2' fill='%23fff'/><circle cx='92' cy='221' r='1.2' fill='%23fff'/></g><g font-family='system-ui' font-size='11' fill='%23fff' stroke='none' font-weight='700'><text x='190' y='240'>z</text><text x='198' y='232'>z</text><text x='207' y='222'>Z</text></g><g><circle cx='232' cy='24' r='7'/><path d='M228 18a7 7 0 0 0 0 12'/></g><g><path d='M20 104l16 0M20 108l14 3M20 100l14-3'/></g></svg>");
  --wall-tile-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23140f0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.09'><g><path d='M36 54c0-11 7-17 18-17s18 6 18 17c0 12-8 20-18 20S36 66 36 54z'/><path d='M40 44l-3-16 13 9M68 44l3-16-13 9'/><circle cx='48' cy='53' r='1.6' fill='%23140f0a'/><circle cx='60' cy='53' r='1.6' fill='%23140f0a'/><path d='M52 59h4l-2 2.5z' fill='%23140f0a'/><path d='M44 60h-12M44 63l-11 2M64 60h12M64 63l11 2'/></g><g><circle cx='150' cy='40' r='6'/><circle cx='141' cy='31' r='3'/><circle cx='149' cy='27' r='3'/><circle cx='157' cy='28' r='3'/><circle cx='162' cy='35' r='2.6'/></g><g><circle cx='214' cy='92' r='15'/><path d='M203 82c8 4 14 12 16 22M206 101c6-8 13-11 21-11M220 79c-3 8-3 16 2 24'/><path d='M229 96c8 6 12 18 6 28-3 5-9 6-13 3'/></g><g><path d='M40 160l14-8-2 16z'/><path d='M52 160h34'/><path d='M60 154v12M68 152v16M76 154v12'/><path d='M86 160l12-8v16z'/></g><g><path d='M150 210c-14 0-22-8-22-16s10-13 22-13 20 6 20 13-6 16-20 16z'/><circle cx='166' cy='188' r='5'/><circle cx='163' cy='198' r='1.5' fill='%23140f0a'/><path d='M128 196c-10 0-16 8-12 16 3 6 10 6 12 2'/><path d='M172 200l10-1M172 203l10 2'/></g><g><path d='M226 178l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23140f0a' stroke='none'/><path d='M22 232l1.5 3.5 3.5 1.5-3.5 1.5-1.5 3.5-1.5-3.5-3.5-1.5 3.5-1.5z' fill='%23140f0a' stroke='none'/><path d='M104 20l1.2 2.8 2.8 1.2-2.8 1.2-1.2 2.8-1.2-2.8-2.8-1.2 2.8-1.2z' fill='%23140f0a' stroke='none'/></g><g><path d='M90 232c-12 2-20-6-18-16 2-9 12-12 20-8 6 3 8 10 6 15'/><path d='M76 232l-8 6M96 224c4-2 6-6 6-10'/><path d='M84 218l-2-8 7 5M94 216l3-8-7 4'/><circle cx='86' cy='222' r='1.2' fill='%23140f0a'/><circle cx='92' cy='221' r='1.2' fill='%23140f0a'/></g><g font-family='system-ui' font-size='11' fill='%23140f0a' stroke='none' font-weight='700'><text x='190' y='240'>z</text><text x='198' y='232'>z</text><text x='207' y='222'>Z</text></g><g><circle cx='232' cy='24' r='7'/><path d='M228 18a7 7 0 0 0 0 12'/></g><g><path d='M20 104l16 0M20 108l14 3M20 100l14-3'/></g></svg>");
}

/* --- Header: one compact row ---------------------------------------------- */
.convo-header {
  padding: calc(var(--safe-t) + 4px) calc(var(--safe-r) + 6px) 4px calc(var(--safe-l) + 2px);
  gap: 6px;
  min-height: 54px;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 5;
}
.convo-header .avatar-sm { width: 36px; height: 36px; }
.convo-header .icon-btn { min-width: 40px; min-height: 40px; font-size: 19px; }
.peer-username { font-size: 15.5px; line-height: 1.2; }
.peer-presence { font-size: 11.5px; line-height: 1.3; }
.peer-typing {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.peer-typing[hidden] { display: none !important; }
.dots { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; margin-left: 1px; }
.dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: dotBounce calc(1.2s / var(--motion)) ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }

/* --- The wall: cat doodles ------------------------------------------------ */
/* One 260x260 tile of hand-drawn cats, paws, yarn, a fish and a mouse, drawn
   in translucent white over the dark ground. Inline SVG, so it needs no
   request and cannot be blocked. */
.messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--chat-bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, var(--chat-glow-1), transparent 60%),
    radial-gradient(80% 50% at 100% 110%, var(--chat-glow-2), transparent 60%),
    var(--wall-tile);
  background-size: auto, auto, 260px 260px;
  background-attachment: scroll;
}
.messages { background: transparent; }

/* --- Rows and bubbles --------------------------------------------------- */
.msg-row {
  position: relative;
  padding: 1px 0;
  touch-action: pan-y; /* horizontal drags are ours (swipe to reply) */
  -webkit-user-select: none;
  user-select: none;
}
.msg-row.group-start { margin-top: 7px; }
.msg-row.system { margin: 8px 0 4px; }
.msg-col { max-width: min(82%, 520px); }
.msg-row.them .msg-col { transition: transform calc(0.28s / var(--motion)) cubic-bezier(0.2, 0.9, 0.3, 1); }
.msg-row.me .msg-col { transition: transform calc(0.28s / var(--motion)) cubic-bezier(0.2, 0.9, 0.3, 1); }
.msg-row.dragging .msg-col { transition: none; }

.msg {
  padding: 6px 9px 5px 10px;
  border-radius: var(--bubble-radius);
  font-size: 15px;
  line-height: 1.38;
  -webkit-user-select: text;
  user-select: text;
  cursor: default;
}
.msg-row.me .msg { border-bottom-right-radius: 16px; }
.msg-row.them .msg { border-bottom-left-radius: 16px; }
.msg-row.me.group-end .msg { border-bottom-right-radius: 4px; }
.msg-row.them.group-end .msg { border-bottom-left-radius: 4px; }
.msg-row.me .msg { background: linear-gradient(135deg, var(--bubble-me) 0%, var(--bubble-me-2) 100%); }
.msg-row.them .msg { background: linear-gradient(135deg, var(--bubble-them) 0%, var(--bubble-them-2) 100%); }

/* Time and ticks live inside the bubble, hugging the last line. */
.msg-meta {
  float: right;
  margin: 6px -2px -3px 8px;
  position: relative;
  top: 1px;
  font-size: 10.5px;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.msg-row.me .msg-meta { text-align: right; color: var(--bubble-me-text-2); }
.msg-row.them .msg-meta { color: var(--text-dim); }
.msg-meta .tick { font-size: 11px; letter-spacing: -2px; }
.msg-meta.seen .tick { color: var(--tick-seen); text-shadow: 0 0 6px rgba(var(--ink-rgb),0.7); }
.msg-meta.sending .tick { opacity: 0.6; }
.msg-text .msg-meta { margin: 5px -3px -2px 10px; }
.msg.deleted .msg-meta { opacity: 0.5; }
.msg .msg-meta .edited { font-style: italic; }

/* Media bubbles: thin frame, meta floats over the picture. */
.msg.media { padding: 3px; position: relative; overflow: hidden; }
.msg.media img.attachment, .msg.media img.gif {
  display: block;
  max-width: min(260px, 66vw);
  height: auto;
  border-radius: 13px;
  margin: 0;
}
.msg.media img.gif { cursor: default; }
.msg.media .msg-text { padding: 5px 7px 3px; }
.msg.media .msg-meta.over {
  position: absolute;
  right: 8px;
  bottom: 7px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  opacity: 1;
}
.msg-row.me .msg.media .msg-meta.over { color: #fff; }

/* Just emoji: no bubble, big glyphs. */
.msg-row .msg.jumbo {
  background: none !important;
  box-shadow: none !important;
  padding: 2px 4px 0;
  font-size: 46px;
  line-height: 1.15;
}
.msg.jumbo .msg-text { white-space: normal; }
.msg.jumbo .msg-meta { float: none; display: flex; justify-content: flex-end; margin: 2px 4px 0; opacity: 0.6; }
.msg-row.them .msg.jumbo .msg-meta { justify-content: flex-start; }
.msg-row.me .msg.jumbo .msg-meta { color: var(--text-dim); }

/* A quoted reply at the top of a bubble. */
.reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 4px 8px 5px 8px;
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: rgba(0,0,0,0.22);
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
}
.msg .reply-quote { margin: -1px -3px 5px -4px; }
.msg-row.me .msg .reply-quote { border-left-color: var(--bubble-me-text-2); background: rgba(0,0,0,0.18); }
.reply-who { font-weight: 700; font-size: 11.5px; color: var(--accent); }
.msg-row.me .msg .reply-who { color: var(--bubble-me-text-2); }
.reply-text {
  color: rgba(var(--ink-rgb),0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.msg-row.me .msg .reply-text { color: var(--bubble-me-text-2); opacity: 0.85; }
.reply-quote img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; margin-top: 2px; }

/* Being jumped to: a soft flash so the eye lands on the right bubble. */
.msg-row.flash .msg { animation: flashBubble 1.4s ease-out; }
@keyframes flashBubble {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.0); filter: brightness(1); }
  20%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.45); filter: brightness(1.25); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); filter: brightness(1); }
}

/* Swipe to reply: the arrow that grows as you drag. */
.swipe-icon {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb),0.12);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 15px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.msg-row.them .swipe-icon { left: 4px; }
.msg-row.me .swipe-icon { right: 4px; }
.swipe-icon.armed { background: var(--accent); color: var(--bubble-me-text); }

/* Double-tap heart. */
.heart-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 64px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: heartPop 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  z-index: 3;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
@keyframes heartPop {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70%  { transform: translate(-50%, -62%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .heart-burst { animation-duration: 0.3s; } }

/* Reactions hang off the bubble's bottom corner. */
.reactions { margin-top: -6px; position: relative; z-index: 1; padding: 0 6px; }
.msg-row.me .reactions { justify-content: flex-end; }
.reaction-chip { padding: 1px 7px; min-height: 22px; font-size: 12px; background: var(--bg-elevated); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* Hover toolbar on desktop; long-press does the job on touch. */
.msg-menu-btn {
  font-size: 14px;
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--paper-rgb),0.85);
  border: 1px solid var(--border);
  color: var(--text-dim);
  opacity: 0;
  margin: 0 2px;
  transition: opacity 0.12s ease;
}
.msg-row:hover .msg-menu-btn,
.msg-menu-btn:focus-visible { opacity: 1; }
@media (pointer: coarse) { .msg-menu-btn { display: none; } }

/* Date chips */
.date-chip {
  align-self: center;
  margin: 10px 0 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(var(--paper-rgb),0.78);
  border: 1px solid rgba(var(--ink-rgb),0.06);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-user-select: none;
  user-select: none;
}
.date-chip.first { margin-top: 4px; }

/* The typing bubble at the end of the thread. */
.typing-row { justify-content: flex-start; }
.typing-row .msg-col { align-items: flex-start; }
.typing-row .msg {
  padding: 10px 13px;
  background: linear-gradient(135deg, var(--bubble-them) 0%, var(--bubble-them-2) 100%);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.typing-row .dots { height: 12px; gap: 3px; }
.typing-row .dots i { width: 6px; height: 6px; background: var(--text-dim); }

/* Jump to bottom */
.jump-bottom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--paper-rgb),0.92);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  z-index: 4;
  display: grid;
  place-items: center;
}
.jump-bottom[hidden] { display: none !important; }
.jump-bottom .chev { margin-top: -8px; }
.jump-count {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bubble-me-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.jump-count[hidden] { display: none !important; }

/* --- Composer ---------------------------------------------------------- */
.composer {
  padding: 6px calc(var(--safe-r) + 8px) calc(8px + var(--safe-b)) calc(var(--safe-l) + 8px);
  gap: 6px;
  background: var(--composer-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(var(--ink-rgb),0.05);
}
.composer.panel-open { padding-bottom: 6px; }
.composer-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-height: 44px;
  padding: 2px 3px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.composer-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.composer textarea {
  border: none;
  background: none;
  padding: 10px 4px;
  border-radius: 0;
  font-size: 16px; /* v4.10: under 16px iOS Safari zooms the whole page on focus, and leaves it zoomed */
  box-shadow: none !important;
}
.composer textarea:focus { border: none; box-shadow: none; }
.icon-btn.small { min-width: 38px; min-height: 38px; font-size: 20px; border-radius: 50%; align-self: flex-end; }
.icon-btn.small[aria-expanded="true"] { background: rgba(var(--accent-rgb),0.18); }
.send-btn { width: 44px; height: 44px; display: grid; place-items: center; align-self: flex-end; }
.send-btn svg { margin-left: 2px; }

.reply-bar, .edit-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 0 12px;
  background: var(--composer-bg);
  border-top: 1px solid rgba(var(--ink-rgb),0.05);
}
.reply-bar[hidden], .edit-banner[hidden] { display: none !important; }
.edit-banner { font-size: 13px; color: var(--text-dim); padding-top: 8px; }
.reply-quote-composer { flex: 1; min-width: 0; background: rgba(var(--ink-rgb),0.05); }
.reply-quote-composer .reply-text { max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .reply-bar:not([hidden]) { animation: replyIn 0.18s ease-out; }
  @keyframes replyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --- Emoji / GIF panel --------------------------------------------------- */
.emoji-panel {
  height: min(310px, 44vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
  flex-shrink: 0;
}
.emoji-panel[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .emoji-panel:not([hidden]) { animation: panelUp 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes panelUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
  min-width: 38px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text);
  transition: background 0.12s ease, transform 0.12s ease;
}
.emoji-tab:hover { background: rgba(var(--ink-rgb),0.07); }
.emoji-tab.active { background: rgba(var(--accent-rgb),0.2); }
.emoji-tab.gif-tab { font: 800 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.06em; padding: 0 10px; }
.emoji-grid {
  position: relative; /* offsetParent for the section jumps */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  align-content: start;
  gap: 1px;
  padding: 2px 6px 8px;
  overscroll-behavior: contain;
}
.emoji-grid[hidden] { display: none !important; }
.emoji-section-title {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 4px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-elevated);
}
.emoji-cell {
  height: 42px;
  border: none;
  border-radius: 9px;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, background 0.1s ease;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.emoji-cell:hover { background: rgba(var(--ink-rgb),0.08); transform: scale(1.18); }
.emoji-cell:active { transform: scale(0.9); }
.emoji-empty { grid-column: 1 / -1; color: var(--text-dim); font-size: 13px; padding: 18px 8px; text-align: center; }

.gif-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gif-pane[hidden] { display: none !important; }
.gif-search { padding: 2px 8px 6px; flex-shrink: 0; }
.gif-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.gif-search input:focus { border-color: var(--accent); }
.gif-chips { display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px; flex-shrink: 0; }
.gif-chip-row {
  display: flex;
  gap: 6px;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gif-chip-row::-webkit-scrollbar { display: none; }
.gif-chip {
  flex-shrink: 0;
  height: 28px;
  padding: 0 11px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.gif-chip[aria-pressed="true"] { background: rgba(var(--accent-rgb),0.2); border-color: var(--accent); }
.gif-chip.spicy { border-color: rgba(214,75,98,0.45); }
.gif-chip.spicy[aria-pressed="true"], .gif-chip.adult-toggle[aria-pressed="true"] { background: rgba(214,75,98,0.22); border-color: #d64b62; }
.gif-chip.adult-toggle { padding: 0 8px; font-size: 15px; }
.gif-chip.gif-group { height: 24px; padding: 0 9px; font-size: 12px; font-weight: 600; color: var(--text-dim); border-color: transparent; background: rgba(214,75,98,0.10); }
.gif-chip.gif-group[aria-pressed="true"] { color: var(--text); background: rgba(214,75,98,0.26); border-color: #d64b62; }
.gif-chip-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border); flex-shrink: 0; }
.gif-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
  columns: 3;
  column-gap: 4px;
  overscroll-behavior: contain;
}
@media (min-width: 560px) { .gif-grid { columns: 4; } }
.gif-cell {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 4px;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.gif-cell img { display: block; width: 100%; height: auto; }
.gif-cell:hover { filter: brightness(1.12); transform: scale(1.02); }
.gif-cell:active { transform: scale(0.97); }
.gif-note { padding: 14px 16px; color: var(--text-dim); font-size: 13px; text-align: center; line-height: 1.4; }
.gif-note[hidden] { display: none !important; }
.gif-note a { color: var(--link); }

/* --- Action sheet --------------------------------------------------------- */
.action-sheet { max-width: 520px; margin: 0 auto; border-radius: 18px 18px 0 0; }
@media (min-width: 700px) {
  .action-sheet-backdrop { align-items: center; justify-content: center; }
  .action-sheet { border-radius: 18px; padding-bottom: 10px; max-width: 380px; }
}
.reaction-row { justify-content: flex-start; gap: 0; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.reaction-row::-webkit-scrollbar { display: none; }
.reaction-pick { width: 46px; height: 46px; font-size: 26px; flex-shrink: 0; }
.reaction-pick.more { font-size: 20px; color: var(--text-dim); background: rgba(255,255,255,0.05); width: 40px; height: 40px; margin: 3px 0 0 4px; }
.sheet-preview {
  margin: 0 6px 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.3;
  max-height: 3.9em;
  overflow: hidden;
}
.sheet-preview:empty { display: none; }
.action-sheet-btn { text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 46px; font-size: 15.5px; }
.action-sheet-btn .ico { width: 22px; text-align: center; font-size: 17px; opacity: 0.85; }
#action-cancel { justify-content: center; color: var(--text-dim); margin-top: 2px; border-top: 1px solid var(--border); border-radius: 0; }
.action-sheet-btn[hidden] { display: none !important; }

/* --- In-app message banner ------------------------------------------------ */
.msg-banner {
  position: fixed;
  top: calc(var(--safe-t) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 440px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(19,28,46,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(0,0,0,0.55);
  z-index: 150;
  font: inherit;
}
.msg-banner[hidden] { display: none !important; }
.msg-banner .avatar-sm { width: 36px; height: 36px; }
.msg-banner-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-banner-name { font-weight: 700; font-size: 13.5px; }
.msg-banner-text { color: var(--text-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .msg-banner:not([hidden]) { animation: bannerIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes bannerIn { from { opacity: 0; transform: translateX(-50%) translateY(-18px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
}

/* --- Home: unread ----------------------------------------------------------- */
.convo-row.unread .name { font-weight: 800; }
.convo-row.unread .preview { color: var(--text); }
.convo-row .time-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.9);
}
.convo-row .typing-preview { color: var(--accent); font-weight: 600; }
.convo-row .preview .you { opacity: 0.7; }

/* Small screens: keep the max bubble width generous. */
@media (max-width: 380px) {
  .msg-col { max-width: 86%; }
  .msg.media img.attachment, .msg.media img.gif { max-width: 70vw; }
}

/* --- Voice notes ------------------------------------------------------------ */
.send-btn.mic { font-size: 19px; }
.send-btn[hidden], .composer-field[hidden] { display: none !important; }
.voice-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 2px 3px 2px 4px;
  border-radius: 22px;
  border: 1px solid rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.08);
}
.voice-bar[hidden] { display: none !important; }
.icon-btn.small.danger { color: var(--danger-text); }
.rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 10px rgba(239,68,68,0.9);
  animation: recBlink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.voice-rec-time { font-variant-numeric: tabular-nums; font-size: 14px; min-width: 38px; }
.voice-rec-bars {
  flex: 1;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
}
.voice-rec-bars i {
  width: 3px;
  flex-shrink: 0;
  border-radius: 2px;
  background: #ff9c9c;
  min-height: 3px;
}
.voice-bar .send-btn { background: var(--danger); color: #fff; }

.voice-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(230px, 62vw);
  padding: 2px 0 2px 2px;
}
.voice-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--ink-rgb),0.16);
  color: inherit;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding-left: 2px;
}
.msg-row.me .voice-play { background: rgba(4,33,29,0.22); }
.voice-play:active { transform: scale(0.92); }
.voice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.voice-wave {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.voice-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.12s ease;
}
.voice-wave i.played { opacity: 1; }
.voice-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; opacity: 0.8; }
.voice-time { font-variant-numeric: tabular-nums; }
.voice-speed {
  border: none;
  background: rgba(var(--ink-rgb),0.14);
  color: inherit;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
}
.msg-row.me .voice-speed { background: rgba(4,33,29,0.2); }
.msg .voice-note + .msg-meta { margin-top: 2px; }

/* Touch: the bubble is not selectable text; long-press is the menu. */
@media (pointer: coarse) {
  .msg, .msg * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* --- Sounds sheet ------------------------------------------------------------- */
.sounds-sheet { gap: 8px; padding: 14px 14px calc(12px + var(--safe-b)); max-height: 92vh; overflow-y: auto; }
.sounds-title { margin: 0 0 4px; font-size: 18px; }
.sound-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
}
.sound-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sound-info small { color: var(--text-dim); font-size: 12px; }
.sound-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.sound-btn.playing { background: var(--accent); color: #04211d; border-color: transparent; }
.sounds-note { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.sounds-note.small { font-size: 12px; }
.sounds-note em { color: var(--text); font-style: normal; font-weight: 700; }
.sounds-steps { margin: 2px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.sounds-steps[hidden] { display: none !important; }
.sounds-test { margin-top: 6px; }
#sounds-close { justify-content: center; color: var(--text-dim); }

/* --- Disappearing messages ------------------------------------------------- */
.convo-header-info {
  background: none;
  border: none;
  padding: 0 2px;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  min-width: 0;
}
.convo-header-info:hover { background: rgba(var(--ink-rgb),0.05); }
.disappear-btn { color: var(--text-dim); font-size: 18px; }
.disappear-btn.on { color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb),0.6); }
.disappear-sheet { gap: 8px; padding: 14px 14px calc(12px + var(--safe-b)); }
.disappear-options { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.disappear-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.disappear-option:hover { background: rgba(255,255,255,0.08); }
.disappear-option.current { border-color: var(--accent); background: rgba(var(--accent-rgb),0.14); }
.disappear-option .check { color: var(--accent); font-weight: 800; opacity: 0; }
.disappear-option.current .check { opacity: 1; }
#disappear-close { justify-content: center; color: var(--text-dim); }

/* The ring (v4.28): three ways a thread is allowed to reach you. Same shape as
   the disappear options, with room for the sentence that says what each does —
   a choice about attention deserves more than a label. */
.ring-options { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ring-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ring-option:hover { background: rgba(255,255,255,0.08); }
.ring-option.current { border-color: var(--accent); background: rgba(var(--accent-rgb),0.14); }
.ring-option .ring-emoji { font-size: 18px; line-height: 1; }
.ring-option .ring-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ring-option .ring-text .label { font-weight: 700; }
.ring-option .ring-text .note { color: var(--text-dim); font-size: 12px; }
.ring-option .check { color: var(--accent); font-weight: 800; opacity: 0; }
.ring-option.current .check { opacity: 1; }
.ring-sheet .ring-foot { margin-top: 10px; }
#ring-close { justify-content: center; color: var(--text-dim); }
#quiet-close { justify-content: center; color: var(--text-dim); }
#cadence-close { justify-content: center; color: var(--text-dim); }
#goodhour-close { justify-content: center; color: var(--text-dim); }

/* Drift (v4.28): one line above the list about one person. Warm, not urgent —
   nothing here is an alert, and nothing here is red. */
.drift {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 12px 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.25);
  background: rgba(var(--accent-rgb),0.07);
}
.drift-body { flex: 1 1 auto; min-width: 0; }
.drift-text { font-weight: 700; font-size: 13.5px; }
.drift-note { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.drift-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.drift-call {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--accent);
  color: #06231f;
  font: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.drift-call:hover { filter: brightness(1.08); }
@media (max-width: 420px) {
  .drift { flex-direction: column; align-items: stretch; }
  .drift-actions { flex-direction: row; justify-content: flex-end; align-items: center; }
}

/* The disposition line (v4.28): one quiet line above the composer saying what
   this message is about to do. Never loud — if it competes with the message
   it has already failed. */
.disposition {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 2px;
  font-size: 11.5px;
  color: var(--text-dim);
  min-height: 22px;
}
.disposition-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disposition-urgent {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.disposition-urgent:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,0.3); }
.disposition-urgent.armed { color: #ffd166; border-color: rgba(255,209,102,0.55); background: rgba(255,209,102,0.1); }
.disposition-urgent:disabled { opacity: 0.45; cursor: default; }
.msg-meta .ttl { font-size: 10px; }
.msg-row.system.event .msg { border-color: rgba(var(--accent-rgb),0.35); color: var(--text); font-size: 12.5px; text-align: center; max-width: 92%; }

/* --- Conversation sheet & media screen --------------------------------------- */
.convo-sheet { gap: 4px; padding-top: 18px; }
.convo-sheet-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 12px; }
.convo-sheet-head .avatar-lg { width: 84px; height: 84px; box-shadow: 0 0 0 3px rgba(20,184,166,0.35), 0 12px 30px rgba(0,0,0,0.5); }
.convo-sheet-name { font-weight: 800; font-size: 18px; }
.convo-sheet-presence { color: var(--text-dim); font-size: 12.5px; }
.action-sheet-btn .grow { flex: 1; }
/* v4.30: a second line under a settings row, for the ones where the honest
   consequence needs saying — "you'll stop seeing theirs too". */
.action-sheet-btn .sub { display: block; color: var(--text-dim); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.action-sheet-btn .value { color: var(--accent); font-size: 13.5px; font-weight: 600; }
.action-sheet-btn .chev { color: var(--text-dim); font-size: 20px; margin-left: auto; line-height: 1; }
#convo-sheet-media .chev { margin-left: auto; }
#convo-sheet-close { justify-content: center; color: var(--text-dim); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }

.media-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.media-header { border-bottom: 1px solid var(--border); }
.media-header .convo-header-info { cursor: default; }
.media-header .convo-header-info:hover { background: none; }
.media-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.media-tab {
  flex: 1;
  min-height: 40px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.media-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.media-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px calc(var(--safe-r) + 10px) calc(var(--safe-b) + 20px) calc(var(--safe-l) + 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
@media (min-width: 560px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
.media-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: #1a2438;
  cursor: zoom-in;
}
.media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cell:hover img { filter: brightness(1.1); }
.media-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.media-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.media-row.voice .voice-note { min-width: 0; color: var(--text); }
.media-row .file-chip { margin: 0; }
.media-row .file-chip .fname { max-width: none; }
.media-caption { color: var(--text-dim); font-size: 12px; }
.media-link { color: var(--link); word-break: break-all; font-size: 14px; }
.media-more { margin: 6px auto 0; }
.media-body .empty-cat { margin-top: 30px; }

/* Sounds sheet: one expandable block per platform */
.sound-row { flex-wrap: wrap; }
.sound-saved { flex-basis: 100%; color: var(--accent); font-size: 12px; padding-top: 2px; }
.sounds-platform {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  padding: 0 12px;
}
.sounds-platform summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 0;
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sounds-platform summary::-webkit-details-marker { display: none; }
.sounds-platform summary::after { content: "›"; margin-left: auto; color: var(--text-dim); font-size: 20px; transition: transform 0.15s ease; }
.sounds-platform[open] summary::after { transform: rotate(90deg); }
.sounds-platform .sounds-steps { padding-bottom: 12px; }
.sounds-platform .sounds-note { padding-bottom: 12px; }
.sounds-steps li { margin: 0; }
.sounds-steps small { color: var(--text-dim); font-size: 12px; }
.sounds-sub { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; list-style: disc; }
.sounds-test-hint { margin-top: -2px; text-align: center; }

/* --- Chat options: long-press a row on the home screen ---------------------- */
.convo-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.row-sheet { gap: 4px; padding-top: 12px; }
.row-sheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 12px; }
.row-sheet-head .convo-sheet-name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#row-close { justify-content: center; color: var(--text-dim); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }
#convo-sheet-clear { border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }

/* --- Confirm sheet ---------------------------------------------------------- */
/* v4.30.4: quiet hours joins them. A sheet opened from the profile has to sit
   above it — at the default 80 it opened underneath, and the only way to see
   it was to back out of the profile, which looked like the menu was broken. */
#confirm-backdrop, #photo-backdrop, #sounds-backdrop, #quiet-backdrop { z-index: 96; } /* above the full-screen layers (media, profile) */
.confirm-sheet { gap: 8px; padding: 16px 14px calc(12px + var(--safe-b)); }
.confirm-sheet .sounds-note { margin: 0 2px 6px; }
#confirm-ok { justify-content: center; font-weight: 700; background: rgba(239,68,68,0.12); }
#confirm-ok:active { background: rgba(239,68,68,0.22); }
#confirm-cancel { justify-content: center; color: var(--text-dim); }

/* --- Selecting messages ----------------------------------------------------- */
.select-bar .select-info { cursor: default; }
.select-bar .select-info:hover { background: none; }
.select-bar .icon-btn.danger { color: var(--danger-text); }
.select-bar .icon-btn.danger:disabled { color: var(--text-dim); }
.messages.selecting .msg-row.me,
.messages.selecting .msg-row.them { padding-left: 32px; cursor: pointer; }
.messages.selecting .msg-row.me::before,
.messages.selecting .msg-row.them::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  opacity: 0.55;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.messages.selecting .msg-row.them::before { opacity: 0.18; }
.messages.selecting .msg-row.selected::before {
  content: "✓";
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bubble-me-text);
}
.messages.selecting .msg-row.selected { background: rgba(var(--accent-rgb),0.13); border-radius: 12px; }
.messages.selecting .msg-menu-btn,
.messages.selecting .swipe-icon { display: none; }

/* --- Selecting shared items --------------------------------------------------- */
.media-select-btn { min-height: 40px; padding: 6px 10px; font-weight: 600; flex-shrink: 0; }
.media-select-btn[aria-pressed="true"] { color: var(--text); }
.media-body.selecting .media-cell,
.media-body.selecting .media-row { cursor: pointer; }
.media-body.selecting .media-cell::after,
.media-body.selecting .media-row::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #04302b;
  pointer-events: none;
}
.media-body.selecting .media-cell::after { top: 6px; right: 6px; }
.media-body.selecting .media-row { position: relative; padding-right: 44px; }
.media-body.selecting .media-row::after { top: 50%; right: 12px; margin-top: -11px; border-color: var(--text-dim); background: none; }
.media-body.selecting .media-cell.selected::after,
.media-body.selecting .media-row.selected::after { content: "✓"; background: var(--accent); border-color: var(--accent); }
.media-body.selecting .media-cell.selected img { filter: brightness(0.7); }
.media-body.selecting .media-row.selected { box-shadow: 0 0 0 2px var(--accent) inset; }
.media-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px calc(var(--safe-r) + 8px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 12px);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.media-bar[hidden] { display: none !important; }
.media-count { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  min-height: 48px;
  padding: 4px 6px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.media-action .ico { font-size: 19px; line-height: 1.1; }
.media-action:disabled { opacity: 0.35; cursor: default; }
.media-action:not(:disabled):active { background: rgba(255,255,255,0.06); }
.media-action.danger { color: #ff8a8a; }

/* --- You: profile, settings, the small print ---------------------------------- */
.me-chip { background: none; border: none; color: inherit; font: inherit; font-weight: 600; padding: 4px 8px 4px 4px; margin: -4px 0 -4px -4px; border-radius: 999px; cursor: pointer; text-align: left; }
.me-chip:hover { background: rgba(255,255,255,0.05); }
.me-chip:active { transform: scale(0.98); }
.profile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 12px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 10px; }
.profile-avatar-btn { position: relative; background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; }
.profile-avatar-btn .avatar-lg { width: 96px; height: 96px; box-shadow: 0 0 0 3px rgba(20,184,166,0.4), 0 12px 30px rgba(0,0,0,0.5); display: block; }
.profile-avatar-btn:active .avatar-lg { transform: scale(0.97); }
.profile-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #04302b;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.profile-name { font-weight: 800; font-size: 19px; margin-top: 6px; }
.profile-email { color: var(--text-dim); font-size: 12.5px; }
.profile-section { margin: 10px 4px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; }
.profile-card { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border); }
.profile-card .action-sheet-btn { min-height: 48px; }
.profile-card .action-sheet-btn[hidden] { display: none !important; }
.profile-version { padding: 8px 14px 10px; color: var(--text-dim); font-size: 12px; }
.profile-danger { margin-top: 10px; }
.username-edit { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 8px; }
.username-edit input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.username-edit input:focus { border-color: var(--accent); }
.username-edit .sounds-note.small { margin: 0; font-size: 12px; }
.username-edit-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.primary-btn.small { min-height: 40px; padding: 8px 18px; font-size: 14.5px; width: auto; }
.toggle {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
[role="switch"][aria-checked="true"] .toggle { background: var(--accent); }
[role="switch"][aria-checked="true"] .toggle::after { transform: translateX(18px); }
.photo-sheet { gap: 6px; padding: 14px 10px calc(12px + var(--safe-b)); max-height: 92vh; overflow-y: auto; }
.photo-sheet .sounds-note { margin: 6px 6px 0; }
.photo-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 4px 6px 6px; }
.photo-cat { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; }
.photo-cat .avatar { width: 100%; aspect-ratio: 1 / 1; height: auto; display: block; }
.photo-cat:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }
.photo-cat:active { transform: scale(0.94); }
/* v4.13: the animal kingdom — one group per court, a caption row for the accessory tile */
.photo-kingdom { display: flex; flex-direction: column; gap: 2px; }
.photo-group { border-top: 1px solid var(--border); padding-top: 6px; }
.photo-group:first-child { border-top: none; padding-top: 0; }
.photo-group-head { margin: 0 6px 2px; font-size: 13px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.01em; }
.photo-extra { align-items: center; padding-top: 0; }
.photo-cap { grid-column: span 5; font-size: 12px; color: var(--text-dim); padding-left: 2px; }
.photo-group.required .photo-group-head { color: var(--accent); }
.photo-group.required .photo-group-head::after { content: " — ⚖️ your sentence: wear this one"; font-weight: 500; }
.photo-cat.required .avatar { box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(var(--accent-rgb, 99, 140, 255), 0.55); }
#photo-close { justify-content: center; color: var(--text-dim); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }
.legal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px calc(var(--safe-r) + 18px) calc(var(--safe-b) + 30px) calc(var(--safe-l) + 18px);
}
.legal-doc { max-width: 620px; margin: 0 auto; font-size: 15px; line-height: 1.55; color: var(--text); }
.legal-doc h2 { font-size: 20px; margin: 14px 0 6px; }
.legal-doc h3 { font-size: 15px; margin: 18px 0 4px; color: var(--accent); }
.legal-doc p { margin: 6px 0; }
.legal-doc ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.legal-doc li { margin: 0; }
.legal-doc em { color: var(--text); font-style: normal; font-weight: 600; }

/* --- "Between you today": a subtle mood strip under the header ------------- */
.atmosphere {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px calc(var(--safe-r) + 14px) 5px calc(var(--safe-l) + 14px);
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.atmosphere[hidden] { display: none !important; }
.atmo-lead { opacity: 0.75; }
.atmo-dot { opacity: 0.5; }
.atmo-text {
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
}
.atmo-emoji { font-size: 13px; }
/* One-shot entrance; nothing continuous, nothing that touches scroll or typing. */
.atmosphere.show .atmo-text,
.atmosphere.show .atmo-emoji { animation: atmoIn 0.5s ease-out both; }
.atmosphere.show .atmo-emoji { animation-delay: 0.06s; }
@keyframes atmoIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere.show .atmo-text,
  .atmosphere.show .atmo-emoji { animation: none; }
}

/* ---------- End-to-end encryption ---------- */
.e2e-note {
  display: block;
  margin: 8px auto 12px;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(250, 204, 21, 0.13);
  border: 1px solid rgba(250, 204, 21, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}
.e2e-note:hover { background: rgba(250, 204, 21, 0.2); }
.msg.locked { color: var(--text-dim); font-style: italic; }
.encryption-body p { margin: 6px 0; font-size: 15px; line-height: 1.55; }
.encryption-body h3 { font-size: 15px; margin: 18px 0 6px; color: var(--accent); }
.encryption-body .small { font-size: 13px; color: var(--text-dim); }
.security-code {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 12px;
  max-width: 360px;
  margin: 10px auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-align: center;
}
.security-code:empty::before { content: "…"; grid-column: 1 / -1; color: var(--text-dim); }
.device-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.device-row.me { border-color: var(--accent); }
.device-meta { flex: 1; min-width: 0; }
.device-name { font-weight: 600; font-size: 14px; }
.device-seen { font-size: 12px; color: var(--text-dim); }
.link-btn.danger { color: var(--danger); }

/* ---- v3.7: YouTube links in a message ---- */
.msg.has-card { min-width: min(260px, 66vw); }
.yt-card { margin: 0 0 6px; border-radius: 12px; overflow: hidden; background: #000; }
.yt-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer;
  background-color: #000; background-size: cover; background-position: center; position: relative;
}
.yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 36px; border-radius: 10px; background: rgba(200, 0, 0, 0.9); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 3px;
}
.yt-thumb:hover .yt-play, .yt-thumb:focus-visible .yt-play { background: #e00; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.yt-together {
  display: block; width: 100%; border: 0; padding: 7px 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 13px; font-weight: 600; text-align: center;
}
.yt-together:hover { background: rgba(255, 255, 255, 0.14); }
.msg.media .yt-card { margin: 0; }

/* ---- v3.7: shared in from another app ---- */
.share-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 14px 6px; padding: 8px 12px; border-radius: 12px;
  background: #13352f; border: 1px solid #1f5a4f; color: #c8f5ea; font-size: 13px;
}
.share-banner-lead { font-weight: 700; }
.share-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8fff9; }
.share-banner-hint { color: var(--text-dim); }

/* ---- v3.7: doodles ---- */
.doodle-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; touch-action: none;
}
.doodle-layer.drawing { pointer-events: auto; cursor: crosshair; }
.doodle-tools {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px;
  background: rgba(var(--paper-rgb), 0.88); border: 1px solid rgba(var(--ink-rgb), 0.14); backdrop-filter: blur(6px);
}
.doodle-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.doodle-color.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
.doodle-done {
  border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer;
  background: var(--accent); color: #04211d; font: inherit; font-size: 13px; font-weight: 700;
}
/* v3.12: fade / keep, and a clear for kept strokes */
.doodle-modes { display: inline-flex; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), 0.18); overflow: hidden; }
.doodle-mode {
  border: 0; padding: 4px 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-dim);
}
.doodle-mode.on { background: rgba(var(--ink-rgb), 0.16); color: var(--text); }
.doodle-clear { border: 0; background: transparent; cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
@media (max-width: 380px) { .doodle-tools { gap: 6px; padding: 5px 6px; } .doodle-color { width: 18px; height: 18px; } }
#btn-doodle[aria-pressed="true"] { color: var(--accent); }

/* ---- v3.8: together, from the chat ---- */
.together-dock {
  flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--border);
  max-height: 56vh;
}
/* v4.20: the Together stage in fullscreen (Android floats it on Home) */
.together-stage:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; }
.together-stage:fullscreen > * { width: 100%; height: 100%; }
.together-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.together-stage { position: relative; background: #000; min-height: 0; }
.together-stage .yt-player { position: relative; inset: auto; aspect-ratio: 16 / 9; max-height: 40vh; height: auto; }
.together-stage iframe#yt-player { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 40vh; height: auto; border: 0; }
.together-stage .watch-reactions { position: absolute; right: 12px; bottom: 8px; pointer-events: none; }
.spotify-host { width: 100%; background: #000; }
.spotify-host iframe { display: block; width: 100%; height: 152px; border: 0; }
.reader-pane { display: flex; flex-direction: column; min-height: 0; max-height: 50vh; background: var(--bg-elevated); }
.reader-title { margin: 0; padding: 10px 14px 4px; font-size: 16px; line-height: 1.3; }
.reader-body { overflow-y: auto; padding: 0 14px 14px; font-size: 15px; line-height: 1.55; color: var(--text); -webkit-overflow-scrolling: touch; }
.reader-body p, .reader-body li { margin: 0 0 10px; }
.reader-body h2, .reader-body h3, .reader-body h4 { margin: 14px 0 6px; line-height: 1.3; }
.reader-body blockquote { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-dim); }
.reader-body pre { white-space: pre-wrap; font-size: 13px; background: var(--bg-input); padding: 8px; border-radius: 8px; }
.reader-body a { color: var(--link); }
.reader-site { font-size: 12px; color: var(--text-dim); }
.reader-note { color: var(--text-dim); font-style: italic; }
.together-bar { flex-shrink: 0; }
.together-bar .watch-bar { position: static; margin: 0; border-radius: 0; background: var(--bg); backdrop-filter: none; padding: 6px 10px; }
.together-bar .watch-bar .ctl-btn { width: 38px; height: 38px; font-size: 16px; }
.together-hint { margin: 0; padding: 4px 14px 8px; font-size: 12px; color: var(--text-dim); }
#screen-conversation.together .atmosphere { display: none; }
#screen-conversation.together .mode-strip { display: none; }

/* ---- v4.0: chat modes ---------------------------------------------------- */
/* One mode per conversation, chosen by either side; the whole chat screen
   follows it. Each block only moves the variables above; the default is the
   look with no mode. Every text/bubble pair here is ≥ 4.5:1. */
#screen-conversation[data-mode="sexy"], #screen-call[data-mode="sexy"] {
  --bg: #1a0b14; --bg-elevated: #24101c; --bg-input: #1f0d18; --chat-bg: #170a12; --border: #3d1f30;
  --accent: #f0567e; --accent-dim: #a8325a; --accent-rgb: 240,86,126; --link: #ffc2d4;
  --text: #f7e6ee; --text-dim: #c9a3b5;
  --bubble-me: #f0567e; --bubble-me-2: #de5580; --bubble-me-text: #2a0812; --bubble-me-text-2: #3d0f1c; --bubble-me-shadow: rgba(222,85,128,0.35);
  --bubble-them: #3a1a2c; --bubble-them-2: #2c1322;
  --header-bg: rgba(36,16,28,0.88); --composer-bg: rgba(36,16,28,0.92);
  --chat-glow-1: rgba(240,86,126,0.14); --chat-glow-2: rgba(120,40,90,0.14);
}
#screen-conversation[data-mode="cosy"], #screen-call[data-mode="cosy"] {
  --bg: #1a1208; --bg-elevated: #26190c; --bg-input: #20150a; --chat-bg: #17100a; --border: #3d2c18;
  --accent: #f4a440; --accent-dim: #a86a1c; --accent-rgb: 244,164,64; --link: #ffd9a3;
  --text: #f8efe2; --text-dim: #cdb59a;
  --bubble-me: #f4a440; --bubble-me-2: #c97a1e; --bubble-me-text: #2a1704; --bubble-me-text-2: #3d2208; --bubble-me-shadow: rgba(201,122,30,0.35);
  --bubble-them: #34261a; --bubble-them-2: #2a1d14;
  --header-bg: rgba(38,25,12,0.88); --composer-bg: rgba(38,25,12,0.92);
  --chat-glow-1: rgba(244,164,64,0.12); --chat-glow-2: rgba(160,90,30,0.12);
  --bubble-radius: 20px; --motion: 0.8;
}
#screen-conversation[data-mode="work"], #screen-call[data-mode="work"] {
  --bg: #0f1419; --bg-elevated: #171d24; --bg-input: #12181e; --chat-bg: #0d1217; --border: #26303a;
  --accent: #5b9cf5; --accent-dim: #2f62a8; --accent-rgb: 91,156,245; --link: #bcd6ff;
  --text: #e8edf2; --text-dim: #9aa8b8;
  --bubble-me: #5b9cf5; --bubble-me-2: #4a84d8; --bubble-me-text: #061224; --bubble-me-text-2: #0d1f3a; --bubble-me-shadow: rgba(74,132,216,0.3);
  --bubble-them: #1f2830; --bubble-them-2: #182028;
  --header-bg: rgba(23,29,36,0.9); --composer-bg: rgba(23,29,36,0.94);
  --chat-glow-1: transparent; --chat-glow-2: transparent;
}
#screen-conversation[data-mode="depresso"], #screen-call[data-mode="depresso"] {
  --bg: #101521; --bg-elevated: #171d2c; --bg-input: #131826; --chat-bg: #0e1320; --border: #262e40;
  --accent: #7f93b8; --accent-dim: #55698c; --accent-rgb: 127,147,184; --link: #c5d1e8;
  --text: #d9dfe9; --text-dim: #97a3b8;
  --bubble-me: #7f93b8; --bubble-me-2: #6d80a8; --bubble-me-text: #0b1220; --bubble-me-text-2: #182238; --bubble-me-shadow: rgba(109,128,168,0.3);
  --bubble-them: #1d2436; --bubble-them-2: #171d2c;
  --header-bg: rgba(23,29,44,0.88); --composer-bg: rgba(23,29,44,0.92);
  --chat-glow-1: rgba(127,147,184,0.08); --chat-glow-2: rgba(60,70,110,0.10);
  --motion: 0.5;
}
#screen-conversation[data-mode="anx"], #screen-call[data-mode="anx"] {
  --bg: #121a17; --bg-elevated: #1a2420; --bg-input: #151f1b; --chat-bg: #101715; --border: #27352f;
  --accent: #9ec5a8; --accent-dim: #5e8a6c; --accent-rgb: 158,197,168; --link: #d3ead9;
  --text: #e8f0ea; --text-dim: #a7b8ad;
  --bubble-me: #9ec5a8; --bubble-me-2: #7aa889; --bubble-me-text: #0e1c14; --bubble-me-text-2: #1a2e22; --bubble-me-shadow: rgba(122,168,137,0.3);
  --bubble-them: #26302a; --bubble-them-2: #1e2723;
  --header-bg: rgba(26,36,32,0.88); --composer-bg: rgba(26,36,32,0.92);
  --chat-glow-1: rgba(180,170,220,0.10); --chat-glow-2: rgba(120,160,130,0.10);
  --motion: 0.6;
}
#screen-conversation[data-mode="anx"] .dots i { animation: none; opacity: 0.7; }
#screen-conversation[data-mode="sick"], #screen-call[data-mode="sick"] {
  --bg: #0f1a1a; --bg-elevated: #172424; --bg-input: #121f1f; --chat-bg: #0d1717; --border: #243535;
  --accent: #8fe0c8; --accent-dim: #4fa88f; --accent-rgb: 143,224,200; --link: #cdf3e8;
  --text: #e6f4f0; --text-dim: #9fbdb5;
  --bubble-me: #8fe0c8; --bubble-me-2: #5cbca4; --bubble-me-text: #07211a; --bubble-me-text-2: #123128; --bubble-me-shadow: rgba(92,188,164,0.3);
  --bubble-them: #1e2e2d; --bubble-them-2: #182524;
  --header-bg: rgba(23,36,36,0.88); --composer-bg: rgba(23,36,36,0.92);
  --chat-glow-1: rgba(143,224,200,0.10); --chat-glow-2: rgba(80,140,130,0.10);
  --motion: 0.7;
}
#screen-conversation[data-mode="energetic"], #screen-call[data-mode="energetic"] {
  --bg: #0a1210; --bg-elevated: #121d18; --bg-input: #0e1714; --chat-bg: #080f0d; --border: #1f3328;
  --accent: #b6f000; --accent-dim: #6f9a00; --accent-rgb: 182,240,0; --link: #a5f3fc;
  --text: #eefbf0; --text-dim: #9fc3ab;
  --bubble-me: #b6f000; --bubble-me-2: #22d3ee; --bubble-me-text: #0a1a05; --bubble-me-text-2: #143d42; --bubble-me-shadow: rgba(182,240,0,0.35);
  --bubble-them: #17261f; --bubble-them-2: #111c17;
  --header-bg: rgba(18,29,24,0.88); --composer-bg: rgba(18,29,24,0.92);
  --chat-glow-1: rgba(182,240,0,0.14); --chat-glow-2: rgba(34,211,238,0.14);
  --bubble-radius: 10px; --motion: 1.4;
}
#screen-conversation[data-mode="motivated"], #screen-call[data-mode="motivated"] {
  --bg: #0c0a0a; --bg-elevated: #171313; --bg-input: #120f0f; --chat-bg: #0a0808; --border: #2e2424;
  --accent: #ff3b5c; --accent-dim: #b0163a; --accent-rgb: 255,59,92; --link: #ffb3c1;
  --text: #ffffff; --text-dim: #c4b5b5;
  --bubble-me: #e11d48; --bubble-me-2: #9f1239; --bubble-me-text: #ffffff; --bubble-me-text-2: #ffd6de; --bubble-me-shadow: rgba(225,29,72,0.4);
  --bubble-them: #1f1919; --bubble-them-2: #171212;
  --header-bg: rgba(23,19,19,0.9); --composer-bg: rgba(23,19,19,0.94);
  --chat-glow-1: rgba(255,59,92,0.12); --chat-glow-2: rgba(255,255,255,0.05);
  --bubble-radius: 4px; --motion: 1.2;
}

/* the header button, the strip under the atmosphere, the picker */
.mode-btn { color: var(--text-dim); font-size: 18px; }
.mode-btn.on { color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb),0.6); }
/* v4.19: star and pin */
.pin-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; font-size: 12.5px; color: var(--text); background: rgba(245, 179, 1, 0.1); border-bottom: 1px solid var(--border); }
.pin-bar-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pin-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-meta .star { color: #f5b301; font-size: 11px; margin-right: 2px; }
.msg-row.pinned .bubble { box-shadow: 0 0 0 1.5px rgba(245, 179, 1, 0.55); }
#screen-conversation.together .pin-bar { display: none; }
.mode-strip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 12px; font-size: 12px; color: var(--text-dim);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0));
  border-bottom: 1px solid var(--border);
}
.mode-strip[hidden] { display: none !important; }
.mode-strip .mode-strip-emoji { font-size: 14px; }
.mode-strip .mode-strip-text { font-weight: 700; color: var(--accent); }
.mode-strip .mode-strip-tag { opacity: 0.85; }
.mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
/* v4.13.2: a tile can never be wider than its column — the props preview used to set a
   138px floor (nowrap), so the third column ran off a 384px phone. */
.mode-tile { min-width: 0; max-width: 100%; }
.mode-tile .mode-props { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mode-tile .mode-tag, .mode-tile .mode-label { max-width: 100%; overflow-wrap: anywhere; }
.mode-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 14px; cursor: pointer; font: inherit;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text);
}
.mode-tile .mode-emoji { font-size: 22px; }
.mode-tile .mode-label { font-size: 12.5px; font-weight: 700; }
.mode-tile .mode-tag { font-size: 10.5px; color: var(--text-dim); text-align: center; }
.mode-tile:hover { background: rgba(255,255,255,0.08); }
.mode-tile.current { border-color: var(--accent); background: rgba(var(--accent-rgb),0.14); }
.mode-tile[data-mode="sexy"] .mode-emoji { filter: drop-shadow(0 0 6px rgba(240,86,126,0.7)); }
.together-sheet { display: flex; flex-direction: column; gap: 10px; }
.together-sheet input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #2b3a5c; background: #0b1220; color: var(--text); font: inherit; }
.together-sheet-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

/* Spotify and readable links in a message */
.sp-card { margin: 0 0 6px; border-radius: 12px; overflow: hidden; background: #0e2a1d; }
.sp-head { padding: 8px 10px; font-size: 13px; font-weight: 700; color: #b8f5d4; }
.sp-together { display: block; width: 100%; border: 0; padding: 7px 10px; cursor: pointer; background: #1db954; color: #04211d; font: inherit; font-size: 13px; font-weight: 700; text-align: center; }
.sp-together:hover { background: #22d15f; }
.read-chip {
  display: inline-block; margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: rgba(var(--ink-rgb), 0.06); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.read-chip:hover { background: rgba(var(--ink-rgb), 0.12); }

/* ---- v4.1: modes alive — type, motion, the wall, and the time of day ------ */
/* Each face is fetched the first time a mode draws with it (font-display: swap
   keeps the words on screen meanwhile); the service worker keeps them after. */
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/playfair-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/nunito.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/special-elite.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-bold.woff2") format("woff2"); }
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bangers.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/oswald.woff2") format("woff2"); }

/* The mode's voice: one var, applied where words live. Off has no var, so the
   fallback (inherit) keeps today's system stack. */
#screen-conversation[data-mode] .msg-text,
#screen-conversation[data-mode] #composer-input,
#screen-conversation[data-mode] .mode-strip,
#screen-conversation[data-mode] #peer-username,
#screen-conversation[data-mode] .prop-tile,
#screen-conversation[data-mode] .fx-stamp,
#screen-conversation[data-mode] .fx-type { font-family: var(--mode-font, inherit); }

/* The send button wears the mode's glyph instead of the arrow. */
.send-btn.glyph svg { display: none; }
.send-btn.glyph::after { content: var(--send-glyph, "➤"); font-size: 20px; line-height: 1; }

/* The wall: one ambient layer per mode, painted under the messages. */
#screen-conversation[data-mode] .messages-wrap { isolation: isolate; clip-path: inset(0); }
#screen-conversation[data-mode] .messages-wrap::before,
#screen-conversation[data-mode] .messages-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }

/* -- sexy: whispered serif, asymmetric bubbles, a vignette that breathes ---- */
#screen-conversation[data-mode="sexy"] { --mode-font: "Playfair Display", Georgia, "Times New Roman", serif; --send-glyph: "🔥"; }
#screen-conversation[data-mode="sexy"] .msg-text { font-style: italic; font-weight: 600; font-size: 15.5px; letter-spacing: 0.1px; }
#screen-conversation[data-mode="sexy"] #composer-input, #screen-conversation[data-mode="sexy"] .mode-strip-tag { font-style: italic; }
#screen-conversation[data-mode="sexy"] .msg-row.me .msg { border-radius: 18px 18px 4px 18px; }
#screen-conversation[data-mode="sexy"] .msg-row.them .msg { border-radius: 18px 18px 18px 4px; border-left: 2px solid rgba(var(--accent-rgb),0.55); }
#screen-conversation[data-mode="sexy"] .messages-wrap::after { background: radial-gradient(120% 90% at 50% 60%, transparent 42%, rgba(120,10,50,0.42) 100%); }

/* -- cosy: rounded voice, pillow bubbles, dust in a sunbeam ---------------- */
#screen-conversation[data-mode="cosy"] { --mode-font: "Nunito", system-ui, -apple-system, sans-serif; --send-glyph: "🧸"; }
#screen-conversation[data-mode="cosy"] .msg-text { font-weight: 600; font-size: 15.5px; }
#screen-conversation[data-mode="cosy"] .msg-row.me .msg { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 10px var(--bubble-me-shadow); }
#screen-conversation[data-mode="cosy"] .msg-row.them .msg { box-shadow: inset 0 1px 0 rgba(var(--ink-rgb),0.08); }
#screen-conversation[data-mode="cosy"] .messages-wrap::before {
  inset: -100% 0 0 0;
  background-image: radial-gradient(circle, rgba(255,214,140,0.55) 1px, transparent 2px), radial-gradient(circle, rgba(255,190,110,0.35) 1.2px, transparent 2.6px);
  background-size: 150px 170px, 230px 260px; background-position: 0 0, 70px 40px; opacity: 0.55;
}

/* -- work: the app's own voice, flat and square, no wallpaper -------------- */
#screen-conversation[data-mode="work"] { --bubble-radius: 6px; --wall-tile: none; }
#screen-conversation[data-mode="work"] .msg-text { font-size: 14.5px; line-height: 1.35; }
#screen-conversation[data-mode="work"] .msg-row.me .msg { background: var(--bubble-me); box-shadow: none; }
#screen-conversation[data-mode="work"] .msg-row.them .msg { background: var(--bubble-them); border: 1px solid var(--border); }
#screen-conversation[data-mode="work"] .msg-row.me.group-end .msg, #screen-conversation[data-mode="work"] .msg-row.them.group-end .msg { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

/* -- depresso: a typewriter, dimmed, bubbles that droop, rain -------------- */
#screen-conversation[data-mode="depresso"] { --mode-font: "Special Elite", "Courier New", Courier, monospace; --send-glyph: "🌧️"; --bubble-radius: 14px; }
#screen-conversation[data-mode="depresso"] .msg-text { font-size: 14.5px; letter-spacing: 0.2px; opacity: 0.92; }
#screen-conversation[data-mode="depresso"] .msg-row.them .msg { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
#screen-conversation[data-mode="depresso"] .messages-wrap::before {
  inset: -100% 0 0 0;
  background-image: linear-gradient(to bottom, transparent 0, rgba(var(--ink-rgb),0.13) 45%, transparent 100%), linear-gradient(to bottom, transparent 0, rgba(var(--ink-rgb),0.09) 50%, transparent 100%);
  background-size: 2px 70px, 1.5px 110px; background-repeat: repeat; background-position: 0 0, 37px 51px;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 61px), repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 89px);
  mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 61px), repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 89px);
  opacity: 0.7;
}

/* -- anx: the most legible face, roomy lines, a halo that breathes 4-7-8 --- */
#screen-conversation[data-mode="anx"] { --mode-font: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif; --send-glyph: "🫧"; --bubble-radius: 20px; }
#screen-conversation[data-mode="anx"] .msg-text { font-size: 14.5px; line-height: 1.5; }
#screen-conversation[data-mode="anx"] .msg-row.them .msg { border: 1px solid rgba(var(--ink-rgb),0.06); }
#screen-conversation[data-mode="anx"] .messages-wrap::after { background: radial-gradient(42% 30% at 50% 100%, rgba(var(--accent-rgb),0.26), transparent 70%); transform-origin: 50% 100%; }

/* -- sick: soft voice, a blanket stitch on their bubbles, steam ------------ */
#screen-conversation[data-mode="sick"] { --mode-font: "Nunito", system-ui, -apple-system, sans-serif; --send-glyph: "🍵"; --bubble-radius: 18px; }
#screen-conversation[data-mode="sick"] .msg-text { font-weight: 600; font-size: 15px; }
#screen-conversation[data-mode="sick"] .msg-row.them .msg { outline: 1px dashed rgba(var(--accent-rgb),0.4); outline-offset: -4px; }
#screen-conversation[data-mode="sick"] .messages-wrap::before {
  background: radial-gradient(30% 22% at 28% 82%, rgba(var(--accent-rgb),0.2), transparent 70%), radial-gradient(26% 20% at 72% 66%, rgba(var(--accent-rgb),0.15), transparent 70%);
  filter: blur(14px);
}

/* -- energetic: comic-book shouting, stickers slapped on, stripes ---------- */
#screen-conversation[data-mode="energetic"] { --mode-font: "Bangers", Impact, "Arial Black", sans-serif; --send-glyph: "⚡"; }
#screen-conversation[data-mode="energetic"] .msg-text { font-size: 17px; letter-spacing: 0.4px; line-height: 1.25; }
#screen-conversation[data-mode="energetic"] .msg-row[data-len="short"] .msg-text { font-size: 22px; text-transform: uppercase; }
#screen-conversation[data-mode="energetic"] .msg-row .msg { box-shadow: 3px 3px 0 rgba(0,0,0,0.35); }
#screen-conversation[data-mode="energetic"] .msg-row.them:nth-child(odd) .bubble-wrap { transform: rotate(-0.7deg); }
#screen-conversation[data-mode="energetic"] .msg-row.me:nth-child(even) .bubble-wrap { transform: rotate(0.6deg); }
#screen-conversation[data-mode="energetic"] .messages-wrap::before { inset: 0 -60px 0 0; background: repeating-linear-gradient(-45deg, rgba(var(--accent-rgb),0.07) 0 14px, transparent 14px 40px); }

/* -- motivated: a gym poster — condensed caps, hard edges, chevrons -------- */
#screen-conversation[data-mode="motivated"] { --mode-font: "Oswald", "Arial Narrow", system-ui, sans-serif; --send-glyph: "💪"; }
#screen-conversation[data-mode="motivated"] .msg-text { font-weight: 500; font-size: 16px; line-height: 1.3; }
#screen-conversation[data-mode="motivated"] .msg-row[data-len="short"] .msg-text { font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#screen-conversation[data-mode="motivated"] .msg-row .msg { box-shadow: 4px 4px 0 rgba(0,0,0,0.5); }
#screen-conversation[data-mode="motivated"] .msg-row.them .msg { border-left: 3px solid var(--accent); }
#screen-conversation[data-mode="motivated"] .mode-strip-text, #screen-conversation[data-mode="motivated"] .mode-strip-tag { text-transform: uppercase; letter-spacing: 0.6px; }
#screen-conversation[data-mode="motivated"] .messages-wrap::before { background: repeating-linear-gradient(20deg, rgba(var(--ink-rgb),0.035) 0 10px, transparent 10px 60px); }
#screen-conversation[data-mode="motivated"] .messages-wrap::after { inset: 0 0 auto 0; height: 3px; background: var(--accent); }

/* -- motion: how a message arrives, and how the wall moves ----------------- */
@media (prefers-reduced-motion: no-preference) {
  #screen-conversation[data-mode="sexy"] .msg-row.new { animation: fx-in-unveil calc(0.5s / var(--motion)) ease-out; }
  @keyframes fx-in-unveil { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
  #screen-conversation[data-mode="cosy"] .msg-row.new { animation: fx-in-settle calc(0.42s / var(--motion)) cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes fx-in-settle { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
  #screen-conversation[data-mode="work"] .msg-row.new { animation: msgIn 0.14s ease-out; }
  #screen-conversation[data-mode="depresso"] .msg-row.new { animation: fx-in-sink calc(0.9s / var(--motion)) ease-out; }
  @keyframes fx-in-sink { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  #screen-conversation[data-mode="anx"] .msg-row.new { animation: fx-in-ease calc(0.7s / var(--motion)) ease-in-out; }
  @keyframes fx-in-ease { from { opacity: 0; } to { opacity: 1; } }
  #screen-conversation[data-mode="sick"] .msg-row.new { animation: msgIn calc(0.35s / var(--motion)) ease-out; }
  #screen-conversation[data-mode="energetic"] .msg-row.new { animation: fx-in-slam calc(0.28s / var(--motion)) cubic-bezier(0.2, 1.4, 0.4, 1); }
  @keyframes fx-in-slam { from { opacity: 0; transform: scale(1.35) rotate(-3deg); } 60% { transform: scale(0.97) rotate(0.5deg); } to { opacity: 1; transform: none; } }
  #screen-conversation[data-mode="motivated"] .msg-row.new { animation: fx-in-stamp calc(0.3s / var(--motion)) cubic-bezier(0.2, 1.2, 0.4, 1); }
  @keyframes fx-in-stamp { from { opacity: 0; transform: scale(0.7); } 70% { transform: scale(1.05); } to { opacity: 1; transform: none; } }

  /* a glow, not a size: the button's box never moves (tap targets, and Playwright, like it that way) */
  #screen-conversation[data-mode] #btn-mode.on { animation: fx-breathe-btn 4s ease-in-out infinite; }
  @keyframes fx-breathe-btn { 0%, 100% { text-shadow: 0 0 6px rgba(var(--accent-rgb),0.45); } 50% { text-shadow: 0 0 18px rgba(var(--accent-rgb),1); } }

  #screen-conversation[data-mode="sexy"] .messages-wrap::after { animation: fx-breathe 6s ease-in-out infinite; }
  @keyframes fx-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  #screen-conversation[data-mode="cosy"] .messages-wrap::before { animation: fx-drift-up 70s linear infinite; }
  @keyframes fx-drift-up { from { transform: translateY(0); } to { transform: translateY(50%); } }
  #screen-conversation[data-mode="depresso"] .messages-wrap::before { animation: fx-rain 1.4s linear infinite; }
  @keyframes fx-rain { from { transform: translateY(0); } to { transform: translateY(50%); } }
  #screen-conversation[data-mode="anx"] .messages-wrap::after { animation: fx-halo 19s ease-in-out infinite; }
  @keyframes fx-halo { 0% { transform: scale(0.8); opacity: 0.6; } 21% { transform: scale(1.18); opacity: 1; } 58% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.6; } }
  #screen-conversation[data-mode="sick"] .messages-wrap::before { animation: fx-steam 14s ease-in-out infinite alternate; }
  @keyframes fx-steam { from { transform: translate(0, 0); } to { transform: translate(6px, -14px); } }
  #screen-conversation[data-mode="energetic"] .messages-wrap::before { animation: fx-stripes 1.2s linear infinite; }
  @keyframes fx-stripes { from { transform: translateX(0); } to { transform: translateX(-56.57px); } }
  #screen-conversation[data-mode="motivated"] .messages-wrap::after { animation: fx-pulse-bar 2.4s ease-in-out infinite; }
  @keyframes fx-pulse-bar { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  #screen-conversation[data-mode="cosy"][data-daypart="night"] .messages-wrap::after,
  #screen-conversation[data-mode="sexy"][data-daypart="night"] .messages-wrap::before { animation: fx-flicker 3.1s steps(1, end) infinite; }
  @keyframes fx-flicker { 0% { opacity: 0.85; } 13% { opacity: 1; } 21% { opacity: 0.8; } 34% { opacity: 0.95; } 47% { opacity: 0.75; } 58% { opacity: 1; } 71% { opacity: 0.88; } 84% { opacity: 0.97; } 100% { opacity: 0.85; } }
  #screen-conversation[data-mode="energetic"][data-daypart="night"] .messages-wrap::after { animation: fx-neon 2s ease-in-out infinite; }
  @keyframes fx-neon { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
  #screen-conversation .messages-wrap.fx-shake { animation: fx-shake 0.22s linear; }
  @keyframes fx-shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } }
}

/* -- time of day ---------------------------------------------------------- */
/* Mornings go light. Everything the dark ground assumed flips here once; each
   mode then paints its own light palette below. */
#screen-conversation[data-mode="cosy"][data-daypart="morning"],
#screen-conversation[data-mode="sexy"][data-daypart="morning"],
#screen-conversation[data-mode="depresso"][data-daypart="morning"],
#screen-conversation[data-mode="anx"][data-daypart="morning"],
#screen-conversation[data-mode="sick"][data-daypart="morning"],
#screen-conversation[data-mode="energetic"][data-daypart="morning"],
#screen-conversation[data-mode="work"][data-daypart="morning"],
#screen-conversation[data-mode="work"][data-daypart="day"] {
  color-scheme: light;
  --ink-rgb: 20,16,10; --paper-rgb: 255,250,242; --tick-seen: var(--bubble-me-text); --online: #0f8a5f; --danger-text: #b91c1c;
  --wall-tile: var(--wall-tile-dark); --send-bg: var(--bubble-me);
}
#screen-conversation[data-mode="cosy"][data-daypart="morning"] {
  --bg: #f6ead8; --bg-elevated: #fff8ec; --bg-input: #fffaf1; --chat-bg: #f3e4cf; --border: #e2cfb3;
  --accent: #a85a12; --accent-dim: #c97a1e; --link: #8a4a10; --text: #3a2410; --text-dim: #7a5a3a;
  --bubble-them: #fffaf1; --bubble-them-2: #f9efe0; --bubble-me-text: #2a1704; --bubble-me-text-2: #4a2c0a;
  --header-bg: rgba(246,234,216,0.88); --composer-bg: rgba(246,234,216,0.94);
  --chat-glow-1: rgba(255,200,100,0.45); --chat-glow-2: rgba(255,240,200,0.6);
}
#screen-conversation[data-mode="sexy"][data-daypart="morning"] {
  --bg: #fbe9ec; --bg-elevated: #fff5f7; --bg-input: #fff8f9; --chat-bg: #f8dfe4; --border: #ebc7d0;
  --accent: #b8234f; --accent-dim: #d94a74; --link: #8a1a3a; --text: #4a1424; --text-dim: #8a5566;
  --bubble-them: #fff4f6; --bubble-them-2: #fbe9ec; --bubble-me-2: #e0446e;
  --header-bg: rgba(251,233,236,0.88); --composer-bg: rgba(251,233,236,0.94);
  --chat-glow-1: rgba(240,86,126,0.2); --chat-glow-2: rgba(255,210,220,0.5);
}
#screen-conversation[data-mode="sexy"][data-daypart="morning"] .messages-wrap::after { background: radial-gradient(120% 90% at 50% 60%, transparent 55%, rgba(240,86,126,0.16) 100%); }
#screen-conversation[data-mode="work"][data-daypart="morning"], #screen-conversation[data-mode="work"][data-daypart="day"] {
  --bg: #f4f6f8; --bg-elevated: #ffffff; --bg-input: #ffffff; --chat-bg: #eef1f4; --border: #d5dce4;
  --accent: #2563eb; --accent-dim: #1d4ed8; --link: #1d4ed8; --text: #14202c; --text-dim: #5b6b7c;
  --bubble-me: #3b82f6; --bubble-me-2: #2563eb; --bubble-me-text: #ffffff; --bubble-me-text-2: #dbe7ff;
  --bubble-them: #ffffff; --bubble-them-2: #f7f9fb;
  --header-bg: rgba(244,246,248,0.9); --composer-bg: rgba(244,246,248,0.94);
  --chat-glow-1: transparent; --chat-glow-2: transparent; --wall-tile: none;
}
#screen-conversation[data-mode="depresso"][data-daypart="morning"] {
  --bg: #e9ecf1; --bg-elevated: #f5f7fa; --bg-input: #f8f9fb; --chat-bg: #e3e7ee; --border: #cdd3dd;
  --accent: #4f5f80; --accent-dim: #6d80a8; --link: #3b4a6b; --text: #2c3442; --text-dim: #6b7585;
  --bubble-them: #f5f7fa; --bubble-them-2: #eceff4;
  --header-bg: rgba(233,236,241,0.88); --composer-bg: rgba(233,236,241,0.94);
  --chat-glow-1: rgba(255,230,180,0.35); --chat-glow-2: rgba(200,210,230,0.5);
}
#screen-conversation[data-mode="depresso"][data-daypart="morning"] .messages-wrap::before { opacity: 0.25; }
#screen-conversation[data-mode="anx"][data-daypart="morning"] {
  --bg: #eef4ef; --bg-elevated: #f7faf7; --bg-input: #fafcfa; --chat-bg: #e7efe9; --border: #cfdcd3;
  --accent: #3f7a55; --accent-dim: #5e8a6c; --link: #2f5f42; --text: #1e2d24; --text-dim: #5f7468;
  --bubble-them: #f7faf7; --bubble-them-2: #eef4ef;
  --header-bg: rgba(238,244,239,0.88); --composer-bg: rgba(238,244,239,0.94);
  --chat-glow-1: rgba(180,170,220,0.25); --chat-glow-2: rgba(158,197,168,0.35);
}
#screen-conversation[data-mode="sick"][data-daypart="morning"] {
  --bg: #eaf6f3; --bg-elevated: #f6fbf9; --bg-input: #f9fcfb; --chat-bg: #e2f1ed; --border: #c9e0da;
  --accent: #1f8a71; --accent-dim: #4fa88f; --link: #166b58; --text: #173430; --text-dim: #5c7a74;
  --bubble-them: #f6fbf9; --bubble-them-2: #eaf6f3;
  --header-bg: rgba(234,246,243,0.88); --composer-bg: rgba(234,246,243,0.94);
  --chat-glow-1: rgba(143,224,200,0.3); --chat-glow-2: rgba(255,250,220,0.5);
}
#screen-conversation[data-mode="energetic"][data-daypart="morning"] {
  --bg: #fff1cc; --bg-elevated: #fff9e8; --bg-input: #fffbf0; --chat-bg: #ffe9b8; --border: #f0d59a;
  --accent: #d1461a; --accent-dim: #ff7a18; --accent-rgb: 255,122,24; --link: #b03d0e; --text: #3a1d00; --text-dim: #8a5a1a;
  --bubble-me: #ff7a18; --bubble-me-2: #ffb703; --bubble-me-text: #2a1200; --bubble-me-text-2: #4a2400; --bubble-me-shadow: rgba(255,122,24,0.3);
  --bubble-them: #fff9e8; --bubble-them-2: #fff1cc;
  --header-bg: rgba(255,241,204,0.88); --composer-bg: rgba(255,241,204,0.94);
  --chat-glow-1: rgba(255,122,24,0.3); --chat-glow-2: rgba(255,220,80,0.45);
}
/* motivated's morning is the 5 am club: gold on black, still dark. */
#screen-conversation[data-mode="motivated"][data-daypart="morning"] {
  --bg: #0a0a0a; --chat-bg: #070707; --accent: #f5c542; --accent-dim: #b8900f; --accent-rgb: 245,197,66; --link: #ffe38a;
  --bubble-me: #f5c542; --bubble-me-2: #d99e12; --bubble-me-text: #221800; --bubble-me-text-2: #4a3400; --bubble-me-shadow: rgba(245,197,66,0.35);
  --chat-glow-1: rgba(245,197,66,0.14); --chat-glow-2: rgba(255,255,255,0.04);
}
/* Evenings: the day's palette with a warm band across the top of the wall. */
#screen-conversation[data-mode="sexy"][data-daypart="evening"] { --chat-glow-1: rgba(255,120,90,0.18); }
#screen-conversation[data-mode="cosy"][data-daypart="evening"] { --chat-glow-1: rgba(255,150,50,0.2); }
#screen-conversation[data-mode="work"][data-daypart="evening"] { --chat-glow-1: rgba(255,170,90,0.06); }
#screen-conversation[data-mode="depresso"][data-daypart="evening"] { --chat-glow-1: rgba(200,150,120,0.1); }
#screen-conversation[data-mode="anx"][data-daypart="evening"] { --chat-glow-1: rgba(230,180,150,0.12); }
#screen-conversation[data-mode="sick"][data-daypart="evening"] { --chat-glow-1: rgba(255,200,140,0.12); }
#screen-conversation[data-mode="energetic"][data-daypart="evening"] { --chat-glow-1: rgba(255,160,40,0.18); }
#screen-conversation[data-mode="motivated"][data-daypart="evening"] { --chat-glow-1: rgba(255,120,60,0.16); }
/* Nights: the deepest ground, and each mode's own light in the dark. */
#screen-conversation[data-mode="sexy"][data-daypart="night"] { --bg: #0f0409; --bg-elevated: #1a0812; --bg-input: #15060e; --chat-bg: #0c0307; --bubble-them: #2a0f1f; --bubble-them-2: #1f0a17; --header-bg: rgba(20,6,13,0.9); --composer-bg: rgba(20,6,13,0.94); --chat-glow-1: rgba(240,86,126,0.1); --chat-glow-2: rgba(255,140,60,0.16); }
#screen-conversation[data-mode="sexy"][data-daypart="night"] .messages-wrap::before { background: radial-gradient(40% 30% at 92% 96%, rgba(255,150,70,0.3), transparent 70%); }
#screen-conversation[data-mode="cosy"][data-daypart="night"] { --bg: #120c04; --bg-elevated: #1c1308; --bg-input: #170f06; --chat-bg: #0f0a03; --header-bg: rgba(28,19,8,0.9); --composer-bg: rgba(28,19,8,0.94); --chat-glow-1: rgba(244,164,64,0.06); --chat-glow-2: rgba(255,170,60,0.24); }
#screen-conversation[data-mode="cosy"][data-daypart="night"] .messages-wrap::after { background: radial-gradient(45% 35% at 100% 100%, rgba(255,170,60,0.3), transparent 70%); }
#screen-conversation[data-mode="work"][data-daypart="night"] { --bg: #0a0e12; --bg-elevated: #12181e; --bg-input: #0e1419; --chat-bg: #080b0f; --header-bg: rgba(18,24,30,0.92); --composer-bg: rgba(18,24,30,0.95); }
#screen-conversation[data-mode="depresso"][data-daypart="night"] { --bg: #0a0d16; --bg-elevated: #121828; --bg-input: #0e1320; --chat-bg: #080a12; --header-bg: rgba(18,24,40,0.9); --composer-bg: rgba(18,24,40,0.94); --chat-glow-1: rgba(127,147,184,0.05); --chat-glow-2: rgba(255,190,120,0.12); }
#screen-conversation[data-mode="depresso"][data-daypart="night"] .messages-wrap::before { opacity: 0.4; }
#screen-conversation[data-mode="anx"][data-daypart="night"] { --bg: #0d1411; --bg-elevated: #151f1a; --bg-input: #111a15; --chat-bg: #0b110e; --header-bg: rgba(21,31,26,0.9); --composer-bg: rgba(21,31,26,0.94); --chat-glow-1: rgba(200,170,220,0.08); --chat-glow-2: rgba(255,200,150,0.1); }
#screen-conversation[data-mode="sick"][data-daypart="night"] { --bg: #0a1414; --bg-elevated: #121e1e; --bg-input: #0e1919; --chat-bg: #081111; --header-bg: rgba(18,30,30,0.9); --composer-bg: rgba(18,30,30,0.94); --chat-glow-1: rgba(200,230,255,0.12); --chat-glow-2: rgba(143,224,200,0.08); }
#screen-conversation[data-mode="energetic"][data-daypart="night"] { --bg: #05060c; --bg-elevated: #0e1020; --bg-input: #0a0c18; --chat-bg: #04050a; --border: #1c2140; --bubble-them: #101426; --bubble-them-2: #0c0f1e; --header-bg: rgba(14,16,32,0.9); --composer-bg: rgba(14,16,32,0.94); --chat-glow-1: rgba(34,211,238,0.2); --chat-glow-2: rgba(236,72,153,0.2); }
#screen-conversation[data-mode="energetic"][data-daypart="night"] .messages-wrap::after { background: radial-gradient(60% 40% at 50% 0%, rgba(34,211,238,0.22), transparent 70%), radial-gradient(50% 35% at 50% 100%, rgba(236,72,153,0.2), transparent 70%); }
#screen-conversation[data-mode="motivated"][data-daypart="night"] { --bg: #0a0505; --bg-elevated: #160b0b; --bg-input: #110808; --chat-bg: #080404; --header-bg: rgba(22,11,11,0.92); --composer-bg: rgba(22,11,11,0.95); --chat-glow-1: rgba(225,29,72,0.2); --chat-glow-2: rgba(0,0,0,0); }

/* ---- v4.1: the arsenal — the props pill, the tray, the replay chip ------- */
.mode-strip { justify-content: flex-start; }
.mode-strip .mode-strip-tag { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v4.13: the prompt is read whole on a phone in portrait — it wraps inside its box
   (the strip grows one line) instead of being cut to "feeling any bet…". */
.mode-strip { flex-wrap: nowrap; }
.mode-strip .mode-strip-tag { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.mode-strip .mode-strip-text { white-space: nowrap; }
/* The placeholder alone may shrink to fit the row (the field itself stays 16px, so iOS never zooms). */
#composer-input::placeholder { font-size: var(--ph-size, inherit); }
@media (max-width: 420px) { .mode-strip { font-size: clamp(11px, 3.2vw, 12px); padding-left: 10px; padding-right: 8px; gap: 5px; } }
.mode-strip-props {
  margin-left: auto; flex-shrink: 0; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb),0.45); background: rgba(var(--accent-rgb),0.12); color: var(--accent);
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3;
}
.mode-strip-props[aria-expanded="true"] { background: var(--accent); color: var(--bubble-me-text); }
.props-tray {
  display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; scrollbar-width: none;
  background: var(--composer-bg); border-bottom: 1px solid var(--border);
}
.props-tray::-webkit-scrollbar { display: none; }
.props-tray[hidden] { display: none !important; }
#screen-conversation.together .props-tray { display: none; }
.prop-tile {
  flex: 1 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border); background: rgba(var(--ink-rgb),0.04);
  color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prop-tile .prop-emoji { font-size: 22px; line-height: 1.1; }
.prop-tile .prop-label { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.prop-tile:active { transform: scale(0.94); }
.prop-tile.sent { border-color: var(--accent); background: rgba(var(--accent-rgb),0.16); }
/* v4.2: the whole kit, unfolded */
.props-tray.open { flex-wrap: wrap; overflow-x: hidden; max-height: 42vh; overflow-y: auto; }
.props-tray.open .prop-tile { flex: 1 0 calc(20% - 6px); max-width: calc(25% - 5px); }
.prop-tile.more { border-style: dashed; color: var(--accent); }
.prop-tile.more .prop-emoji { font-size: 18px; line-height: 1.35; }
.prop-tile.more .prop-label { color: var(--accent); font-weight: 700; }
.mode-tile .mode-props { font-size: 10px; letter-spacing: 1px; opacity: 0.85; margin-top: 2px; white-space: nowrap; }
.msg-row.system.event.flash .msg { gap: 8px; }
.fx-replay {
  font: inherit; font-size: 11px; font-weight: 700; color: var(--accent); cursor: pointer;
  background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px; padding: 1px 8px;
}

/* ---- v4.1: the flash layer — a stage over the chat, empty until a prop plays */
.flash-layer { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.flash-layer.playing { pointer-events: auto; }
.flash-layer .fx-root { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; --fx-ink: #fff; }
.flash-layer .fx-root.light { --fx-ink: #1a1208; }
/* Every primitive reads its timing from vars set inline by the engine. */
.fx-wash, .fx-dim, .fx-vignette { position: absolute; inset: 0; }
.fx-wash { background: var(--fx-color, #fff); opacity: 0; }
.fx-dim { background: #000; opacity: 0; }
.fx-vignette { background: radial-gradient(circle at 50% 50%, transparent 28%, rgba(0,0,0,0.85) 100%); opacity: 0; }
.fx-emoji { position: absolute; left: var(--fx-x, 50%); top: var(--fx-y, 50%); transform: translate(-50%, -50%); font-size: var(--fx-size, min(38vw, 160px)); line-height: 1; opacity: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.fx-stamp {
  position: absolute; left: 50%; top: var(--fx-y, 50%); transform: translate(-50%, -50%); max-width: 92vw; text-align: center;
  font-size: clamp(30px, 10vw, 64px); font-weight: 800; letter-spacing: 0.5px; color: var(--fx-ink); opacity: 0;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.45), 0 0 24px rgba(0,0,0,0.35); white-space: pre-line;
}
.fx-stamp.caps { text-transform: uppercase; }
.fx-stamp.small { font-size: clamp(18px, 5vw, 28px); font-weight: 700; }
.fx-type { position: absolute; left: 50%; top: var(--fx-y, 58%); transform: translateX(-50%); max-width: 86vw; font-size: clamp(18px, 5.2vw, 28px); color: var(--fx-ink); text-shadow: 0 2px 12px rgba(0,0,0,0.5); white-space: pre-wrap; text-align: center; }
.fx-type::after { content: "▍"; opacity: 0.7; }
.fx-particles { position: absolute; left: var(--fx-x, 50%); top: var(--fx-y, 50%); width: 0; height: 0; }
.fx-p { position: absolute; left: 0; top: 0; width: var(--size, 10px); height: var(--size, 10px); border-radius: var(--r, 2px); background: var(--c, #fff); opacity: 0; transform: translate(-50%, -50%); }
.fx-p.glyph { width: auto; height: auto; background: none; font-size: var(--size, 18px); line-height: 1; }
.fx-sheet { position: absolute; left: -6%; right: -6%; bottom: -12%; height: 72%; border-radius: 48px 48px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,0.35); transform: translateY(110%); }
.fx-sheet.blanket { background: repeating-linear-gradient(45deg, var(--fx-c1, #c97a1e) 0 12px, var(--fx-c2, #a85a12) 12px 24px), var(--fx-c1, #c97a1e); background-blend-mode: multiply; }
.fx-sheet.blanket::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.12) 0 12px, transparent 12px 24px); border-radius: inherit; }
.fx-sheet.silk { left: 0; right: 0; top: -10%; bottom: auto; height: 118%; border-radius: 0 0 40% 40% / 0 0 60px 60px; background: linear-gradient(180deg, #000 0%, #0a0004 80%, #2a0812 100%); transform: translateY(-110%); box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.fx-sheet.roll { top: 0; bottom: 0; height: auto; width: 62%; left: auto; right: auto; border-radius: 0 50% 50% 0 / 0 40% 40% 0; background: var(--fx-c1, #1d2436); box-shadow: 0 0 40px rgba(0,0,0,0.6); transform: translateX(-110%); }
.fx-sheet.roll.right { border-radius: 50% 0 0 50% / 40% 0 0 40%; transform: translateX(110%); }
.fx-ring { position: absolute; left: 50%; top: 46%; width: 44vmin; height: 44vmin; border-radius: 50%; border: 4px solid var(--fx-c1, #9ec5a8); box-shadow: 0 0 70px rgba(var(--accent-rgb),0.45), inset 0 0 40px rgba(var(--accent-rgb),0.25); transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
.fx-ring-label { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: clamp(22px, 6vw, 34px); font-weight: 700; color: var(--fx-ink); text-shadow: 0 2px 12px rgba(0,0,0,0.5); letter-spacing: 1px; }
.fx-hint { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font-size: 12px; color: var(--fx-ink); opacity: 0.7; }
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-svg path, .fx-svg polyline, .fx-svg circle { fill: none; stroke: var(--fx-c1, #fff); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(0,0,0,0.5)); }
.fx-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(0,0,0,0.72); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.fx-card .fx-card-emoji { font-size: 26px; }
.fx-mark { position: absolute; font-size: 44px; line-height: 1; pointer-events: none; z-index: 3; opacity: 0.7; transform: rotate(var(--fx-rot, -12deg)); }

@media (prefers-reduced-motion: no-preference) {
  .fx-wash { animation: fx-wash var(--fx-ms, 600ms) ease-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-wash { 0% { opacity: 0; } 12% { opacity: var(--fx-level, 1); } 100% { opacity: 0; } }
  .fx-wash.double { animation: fx-wash2 var(--fx-ms, 400ms) steps(1, end) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-wash2 { 0% { opacity: 1; } 18% { opacity: 0; } 40% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
  .fx-dim { animation: fx-dim var(--fx-ms, 2000ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-dim { 0% { opacity: 0; } 22% { opacity: var(--fx-level, 0.6); } 74% { opacity: var(--fx-level, 0.6); } 100% { opacity: 0; } }
  .fx-vignette { animation: fx-vignette var(--fx-ms, 1600ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-vignette { 0% { opacity: 0; transform: scale(1.5); } 45% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
  .fx-emoji.pop { animation: fx-pop var(--fx-ms, 1400ms) cubic-bezier(0.2, 1.4, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
  .fx-emoji.zoom { animation: fx-zoom var(--fx-ms, 1800ms) ease-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-zoom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 52% { transform: translate(-50%, -50%) scale(0.94); } 60% { transform: translate(-50%, -50%) scale(1.02); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
  .fx-emoji.rise { animation: fx-rise var(--fx-ms, 2000ms) cubic-bezier(0.2, 0.9, 0.3, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-rise { 0% { opacity: 0; transform: translate(-50%, 60vh); } 30% { opacity: 1; transform: translate(-50%, -50%); } 82% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -60%); } }
  .fx-emoji.drop { animation: fx-drop var(--fx-ms, 1600ms) cubic-bezier(0.34, 1.56, 0.64, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-drop { 0% { opacity: 0; transform: translate(-50%, -70vh); } 35% { opacity: 1; transform: translate(-50%, -50%); } 82% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -40%); } }
  .fx-emoji.slide { animation: fx-slide var(--fx-ms, 1200ms) cubic-bezier(0.3, 0, 0.2, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-slide { 0% { opacity: 1; transform: translate(-70vw, -50%); } 100% { opacity: 1; transform: translate(70vw, -50%); } }
  .fx-emoji.swing-l { animation: fx-swing-l var(--fx-ms, 1600ms) cubic-bezier(0.2, 1.3, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-swing-l { 0% { opacity: 0; transform: translate(-90vw, -50%) rotate(-40deg); } 40% { opacity: 1; transform: translate(-50%, -50%) rotate(8deg); } 55% { transform: translate(-50%, -50%) rotate(0); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
  .fx-emoji.swing-r { animation: fx-swing-r var(--fx-ms, 1600ms) cubic-bezier(0.2, 1.3, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-swing-r { 0% { opacity: 0; transform: translate(90vw, -50%) rotate(40deg); } 40% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); } 55% { transform: translate(-50%, -50%) rotate(0); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
  .fx-emoji.float { animation: fx-float var(--fx-ms, 2400ms) ease-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-float { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40vh); } }
  .fx-emoji.fall { animation: fx-fall var(--fx-ms, 1600ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-fall { 0% { opacity: 0; transform: translate(-50%, -60vh) rotate(-20deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-40%, 30vh) rotate(25deg); } }
  .fx-emoji.gallop { animation: fx-gallop-emoji 0.4s ease-in-out var(--fx-delay, 0ms) 6 both; opacity: 1; }
  @keyframes fx-gallop-emoji { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -70%) rotate(6deg); } }
  .fx-emoji.pulse { animation: fx-pulse-emoji 0.7s ease-in-out var(--fx-delay, 0ms) 3 both; opacity: 1; }
  @keyframes fx-pulse-emoji { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(0.86); } }
  .fx-emoji.amble { animation: fx-amble var(--fx-ms, 3000ms) linear var(--fx-delay, 0ms) forwards; }
  @keyframes fx-amble { 0% { opacity: 1; transform: translate(-60vw, -50%); } 25% { transform: translate(-30vw, -52%); } 50% { transform: translate(0, -50%); } 75% { transform: translate(30vw, -52%); } 100% { opacity: 1; transform: translate(60vw, -50%); } }
  .fx-emoji.shakey { animation: fx-shakey 0.12s linear var(--fx-delay, 0ms) 8 both; opacity: 1; }
  @keyframes fx-shakey { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -50%) rotate(8deg); } }
  /* v4.2: more ways to move */
  .fx-emoji.drift { animation: fx-drift var(--fx-ms, 3000ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-drift { 0% { opacity: 0; transform: translate(-80%, -50%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-20%, -54%); } }
  .fx-emoji.spin { animation: fx-spin var(--fx-ms, 2000ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-spin { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -50%) rotate(90deg) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) rotate(630deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg) scale(0.8); } }
  .fx-emoji.spin-back { animation: fx-spin-back var(--fx-ms, 2000ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-spin-back { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) rotate(-630deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-720deg) scale(0.8); } }
  .fx-emoji.bounce { animation: fx-bounce var(--fx-ms, 1800ms) cubic-bezier(0.3, 0, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-bounce { 0% { opacity: 0; transform: translate(-50%, -70vh); } 22% { opacity: 1; transform: translate(-50%, -50%); } 34% { transform: translate(-50%, -78%); } 46% { transform: translate(-50%, -50%); } 54% { transform: translate(-50%, -62%); } 62% { transform: translate(-50%, -50%); } 86% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -46%); } }
  .fx-emoji.shiver { animation: fx-shiver 0.09s linear var(--fx-delay, 0ms) 16 both; opacity: 1; }
  @keyframes fx-shiver { 0%, 100% { transform: translate(-52%, -50%) rotate(-3deg); } 50% { transform: translate(-48%, -50%) rotate(3deg); } }
  .fx-emoji.slide-back { animation: fx-slide-back var(--fx-ms, 1200ms) cubic-bezier(0.3, 0, 0.2, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-slide-back { 0% { opacity: 1; transform: translate(70vw, -50%) scaleX(-1); } 100% { opacity: 1; transform: translate(-70vw, -50%) scaleX(-1); } }
  .fx-stamp { animation: fx-stamp-in 0.36s cubic-bezier(0.2, 1.4, 0.4, 1) var(--fx-delay, 0ms) forwards, fx-out 0.45s ease-in calc(var(--fx-delay, 0ms) + var(--fx-hold, 1000ms)) forwards; }
  @keyframes fx-stamp-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-6deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); } }
  .fx-stamp.soft { animation: fx-soft-in 0.9s ease-out var(--fx-delay, 0ms) forwards, fx-out 0.9s ease-in calc(var(--fx-delay, 0ms) + var(--fx-hold, 1000ms)) forwards; }
  @keyframes fx-soft-in { 0% { opacity: 0; transform: translate(-50%, -46%); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
  @keyframes fx-out { to { opacity: 0; } }
  .fx-type { animation: fx-out 0.6s ease-in calc(var(--fx-delay, 0ms) + var(--fx-hold, 2000ms)) forwards; }
  .fx-p { animation: fx-burst var(--fx-ms, 1600ms) cubic-bezier(0.1, 0.8, 0.3, 1) var(--d, 0ms) forwards; }
  @keyframes fx-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 0deg)) scale(1); } }
  .fx-sheet.blanket { animation: fx-sheet-up var(--fx-ms, 2200ms) cubic-bezier(0.3, 1.2, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-sheet-up { 0% { transform: translateY(110%); } 32% { transform: translateY(0); } 44% { transform: translateY(-3%); } 56% { transform: translateY(0); } 76% { transform: translateY(0); } 100% { transform: translateY(110%); } }
  .fx-sheet.silk { animation: fx-sheet-down var(--fx-ms, 2400ms) cubic-bezier(0.3, 0.9, 0.4, 1) var(--fx-delay, 0ms) forwards; }
  @keyframes fx-sheet-down { 0% { transform: translateY(-110%); } 24% { transform: translateY(0); } 70% { transform: translateY(0); } 100% { transform: translateY(-110%); } }
  .fx-sheet.roll { animation: fx-roll-l var(--fx-ms, 2200ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  .fx-sheet.roll.right { animation-name: fx-roll-r; }
  @keyframes fx-roll-l { 0% { transform: translateX(-110%); } 30% { transform: translateX(-30%); } 70% { transform: translateX(-30%); } 100% { transform: translateX(-110%); } }
  @keyframes fx-roll-r { 0% { transform: translateX(110%); } 30% { transform: translateX(30%); } 70% { transform: translateX(30%); } 100% { transform: translateX(110%); } }
  .fx-ring { animation: fx-ring-cycle var(--fx-ms, 19000ms) ease-in-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-ring-cycle { 0% { transform: translate(-50%, -50%) scale(0.6); } 21% { transform: translate(-50%, -50%) scale(1.15); } 58% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(0.6); } }
  .fx-ring.once { animation: fx-ring-once var(--fx-ms, 1600ms) ease-out var(--fx-delay, 0ms) forwards; }
  @keyframes fx-ring-once { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
  .fx-svg path, .fx-svg polyline, .fx-svg circle { animation: fx-draw var(--fx-ms, 700ms) ease-out var(--fx-delay, 0ms) forwards, fx-out 0.4s ease-in calc(var(--fx-delay, 0ms) + var(--fx-hold, 1200ms)) forwards; }
  @keyframes fx-draw { to { stroke-dashoffset: 0; } }
  .fx-card { animation: fx-card 0.7s ease-in-out forwards; }
  @keyframes fx-card { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
  .fx-mark { animation: fx-mark 6s ease-in forwards; }
  @keyframes fx-mark { 0% { opacity: 0; transform: rotate(var(--fx-rot, -12deg)) scale(1.6); } 8% { opacity: 0.85; transform: rotate(var(--fx-rot, -12deg)) scale(1); } 60% { opacity: 0.7; } 100% { opacity: 0; } }
  /* the stage itself moves for some props */
  #screen-conversation.fx-punch { animation: fx-punch 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
  @keyframes fx-punch { 0% { transform: scale(1); } 35% { transform: scale(0.965); } 100% { transform: scale(1); } }
  #screen-conversation.fx-squeeze { animation: fx-squeeze 1.5s ease-in-out; }
  @keyframes fx-squeeze { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.955); } 70% { transform: scale(0.955); } }
  #screen-conversation.fx-tug { animation: fx-tug 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
  @keyframes fx-tug { 0% { transform: translateX(0); } 30% { transform: translateX(10px) rotate(0.4deg); } 100% { transform: none; } }
  #screen-conversation.fx-gallop { animation: fx-gallop 0.4s ease-in-out 6; }
  @keyframes fx-gallop { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } }
  #screen-conversation.fx-shake { animation: fx-shake 0.22s linear 2; }
  #screen-conversation.fx-hue { animation: fx-hue 2s linear; }
  @keyframes fx-hue { 0% { filter: hue-rotate(0); } 33% { filter: hue-rotate(120deg); } 66% { filter: hue-rotate(240deg); } 100% { filter: hue-rotate(360deg); } }
  #screen-conversation.fx-grey { animation: fx-grey 3s ease-in-out; }
  @keyframes fx-grey { 0%, 100% { filter: saturate(1); } 30%, 70% { filter: saturate(0.2) brightness(0.85); } }
}
@media (prefers-reduced-motion: reduce) {
  /* No choreography: a card says what happened, and leaves. */
  .flash-layer .fx-root > :not(.fx-card) { display: none !important; }
  .fx-card { opacity: 1; }
}

/* A replayed scene speaks in the voice of the mode it was sent in. */
.fx-root[data-mode="sexy"] { --mode-font: "Playfair Display", Georgia, serif; font-style: italic; }
.fx-root[data-mode="cosy"], .fx-root[data-mode="sick"] { --mode-font: "Nunito", system-ui, sans-serif; }
.fx-root[data-mode="depresso"] { --mode-font: "Special Elite", "Courier New", monospace; }
.fx-root[data-mode="anx"] { --mode-font: "Atkinson Hyperlegible", system-ui, sans-serif; }
.fx-root[data-mode="energetic"] { --mode-font: "Bangers", Impact, sans-serif; }
.fx-root[data-mode="motivated"] { --mode-font: "Oswald", "Arial Narrow", sans-serif; }
.fx-root[data-mode="work"], .fx-root[data-mode="off"] { --mode-font: inherit; font-style: normal; }
.fx-stamp, .fx-type, .fx-ring-label, .fx-hint { font-family: var(--mode-font, inherit); }
.fx-type.big { font-size: clamp(30px, 10vw, 64px); font-weight: 800; letter-spacing: 1px; text-shadow: 3px 3px 0 rgba(0,0,0,0.45); }

/* ---- v4.4: texting on the call --------------------------------------------
   Captions float bottom-left over the picture and fade; the input is a pill
   above the controls that appears only when asked for. Both are overlays:
   the video keeps the whole screen. --kb lifts the pill above an on-screen
   keyboard (the visual viewport shrinks, the layout viewport does not). */
#screen-call { --kb: 0px; --ctl-top: calc(var(--safe-b) + 80px); } /* --ctl-top: measured, the controls wrap on narrow phones */
.call-chat {
  position: absolute; left: 12px; right: 76px; bottom: calc(var(--ctl-top) + 64px + var(--kb));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none; z-index: 4;
}
.call-cap {
  max-width: 100%; padding: 6px 11px; border-radius: 14px; font-size: 14px; line-height: 1.3;
  background: rgba(8,12,22,0.62); color: #fff; backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); overflow-wrap: anywhere;
  animation: call-cap-in 0.28s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.call-cap.me { background: rgba(var(--accent-rgb, 20,184,166), 0.42); }
.call-cap-who { font-weight: 700; margin-right: 6px; opacity: 0.85; font-size: 12px; }
.call-cap.gone { animation: call-cap-out 0.6s ease-in forwards; }
.call-cap.typing { opacity: 0.75; font-style: italic; }
@keyframes call-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes call-cap-out { to { opacity: 0; transform: translateY(-6px); } }
.call-chat-form {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--ctl-top) + 10px + var(--kb));
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 999px;
  background: rgba(8,12,22,0.78); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45); z-index: 5;
}
.call-chat-form[hidden] { display: none !important; }
.call-chat-form input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; outline: none;
}
.call-chat-form input::placeholder { color: rgba(255,255,255,0.55); }
.call-chat-send {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: #04211d;
}
.call-chat-send:disabled { opacity: 0.4; }
#btn-call-chat.on { background: var(--accent); color: #04211d; border-color: transparent; }
@media (orientation: landscape) and (max-height: 520px) {
  .call-chat { bottom: calc(var(--ctl-top) + 56px + var(--kb)); right: 96px; }
  .call-cap { font-size: 13px; padding: 4px 9px; }
  .call-chat-form { bottom: calc(var(--ctl-top) + 8px + var(--kb)); }
}
#screen-call.watching .call-chat-form { z-index: 8; }
@media (prefers-reduced-motion: reduce) { .call-cap { animation: none; } .call-cap.gone { animation: none; opacity: 0; } }

/* ---- v4.6: the mode on the call ------------------------------------------
   The call screen wears the mode's colours (its variable blocks above name
   both screens), a chip says which, ✨ opens the props tray over the picture,
   ✍️ draws on a canvas over the picture. The picker sheet sits above the
   call. The stage moves (punch, shake) on the call screen while a call is up. */
#mode-backdrop { z-index: 90; }
#screen-call[data-mode] .ctl-btn.on, #screen-call[data-mode] #btn-call-chat.on, #screen-call[data-mode] .call-chat-send { background: var(--accent); color: var(--bubble-me-text, #04211d); }
#screen-call[data-mode] .call-cap.me { background: rgba(var(--accent-rgb), 0.45); }
#screen-call[data-mode]:not(.has-video) { background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.28) 0%, #070b14 70%); }
.call-mode-chip {
  position: absolute; top: calc(var(--safe-t) + 96px); left: 16px; z-index: 2;
  padding: 5px 11px; border-radius: 20px; border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.55);
  background: rgba(0,0,0,0.55); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(6px);
}
.call-mode-chip[hidden] { display: none !important; }
.call-mode-chip .chip-tag { font-weight: 400; opacity: 0.8; margin-left: 4px; }
/* v4.11: no mode yet — a quieter chip that still reads as a button */
.call-mode-chip.off { border-style: dashed; border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.9); }
.call-mode-chip:active { transform: scale(0.96); }
#screen-call.watching .call-mode-chip { display: none; }
.call-props {
  position: absolute; left: 8px; right: 8px; bottom: calc(var(--ctl-top) + 10px + var(--kb)); z-index: 5;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.18); background: rgba(8,12,22,0.8); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45); padding: 8px; color: #fff;
  --ink-rgb: 255,255,255; --text: #fff; --text-dim: rgba(255,255,255,0.7); --border: rgba(255,255,255,0.18);
}
.call-props.open { max-height: 46vh; }
.call-props .prop-tile { background: rgba(255,255,255,0.06); }
.call-props .prop-tile.mode { border-color: rgba(var(--accent-rgb, 20,184,166), 0.6); }
.call-props .prop-tile.mode .prop-label { color: var(--accent); }
#btn-call-props[aria-expanded="true"], #btn-call-doodle[aria-pressed="true"] { background: var(--accent); color: var(--bubble-me-text, #04211d); border-color: transparent; }
.call-doodle { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--ctl-top) + 4px); width: 100%; height: auto; z-index: 4; }
#screen-call .doodle-tools { top: calc(var(--safe-t) + 100px); z-index: 6; --paper-rgb: 8,12,22; --ink-rgb: 255,255,255; color: #fff; }
#screen-call .doodle-mode.on { color: #fff; }
@media (orientation: landscape) and (max-height: 520px) {
  .call-mode-chip { top: calc(var(--safe-t) + 78px); left: calc(var(--safe-l) + 12px); }
  #screen-call .doodle-tools { top: calc(var(--safe-t) + 10px); }
}
@media (prefers-reduced-motion: no-preference) {
  #screen-call.fx-punch { animation: fx-punch 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
  #screen-call.fx-squeeze { animation: fx-squeeze 1.5s ease-in-out; }
  #screen-call.fx-tug { animation: fx-tug 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); }
  #screen-call.fx-gallop { animation: fx-gallop 0.4s ease-in-out 6; }
  #screen-call.fx-shake { animation: fx-shake 0.22s linear 2; }
  #screen-call.fx-hue { animation: fx-hue 2s linear; }
  #screen-call.fx-grey { animation: fx-grey 3s ease-in-out; }
}

/* ---- v4.7: video clips ----------------------------------------------------
   A clip in the thread is its poster frame with a play badge; the clip screen
   records and trims; the attach sheet is the way in. */
.sheet-small { display: block; font-size: 11px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
#attach-backdrop { z-index: 94; } /* above the profile (90), where a story is added from */
.video-tile { position: relative; display: block; max-width: 260px; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.video-tile img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.video-tile .video-badge {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,0.6); color: #fff; backdrop-filter: blur(4px);
}
.video-tile .video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; display: grid; place-items: center; font-size: 22px; border: 2px solid rgba(255,255,255,0.7);
}
.video-tile.loading .video-play { animation: video-spin 1s linear infinite; border-top-color: transparent; font-size: 0; }
@keyframes video-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.attach-preview-inner .attach-video { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #000; flex-shrink: 0; }
.attach-preview-inner .attach-video img { width: 100%; height: 100%; object-fit: cover; }
.attach-preview-inner .attach-video span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px #000; }

.clip-screen {
  position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column; background: #05070c; color: #fff;
}
.clip-screen[hidden] { display: none !important; }
.clip-head { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 8px) 10px 8px; }
.clip-title { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }
.clip-use { padding: 7px 16px; font-size: 14px; }
.clip-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; overflow: hidden; }
.clip-stage video { width: 100%; height: 100%; object-fit: contain; }
#clip-cam { object-fit: cover; }
.clip-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.5); color: #fff; font-size: 26px; cursor: pointer;
}
.clip-play[hidden] { display: none !important; }
.clip-rec-time { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); font-size: 13px; font-weight: 700; }
.clip-rec-time::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 6px; animation: rec-blink 1s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: 0.2; } }
.clip-flip { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.5); color: #fff; }
.clip-record {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.clip-record[hidden] { display: none !important; }
.clip-record-dot { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%; background: #ef4444; transform: translate(-50%, -50%); transition: border-radius 0.2s, width 0.2s, height 0.2s; }
.clip-record[aria-pressed="true"] .clip-record-dot { width: 30px; height: 30px; border-radius: 6px; }
.clip-record-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.clip-record-ring circle { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: var(--clip-left, 1); opacity: 0.9; }
.clip-record:not([aria-pressed="true"]) .clip-record-ring circle { stroke-dashoffset: 0; opacity: 0.55; }
.clip-trim { position: relative; height: 64px; margin: 12px 14px 4px; border-radius: 10px; background: #14181f; overflow: hidden; touch-action: none; user-select: none; }
.clip-trim[hidden] { display: none !important; }
.clip-strip { position: absolute; inset: 0; display: flex; }
.clip-strip canvas { flex: 1 0 0; height: 100%; width: auto; object-fit: cover; opacity: 0.85; }
.clip-window { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border: 3px solid var(--accent); border-left-width: 14px; border-right-width: 14px; border-radius: 10px; box-sizing: border-box; box-shadow: 0 0 0 999px rgba(5,7,12,0.55); }
.clip-handle { position: absolute; top: 50%; width: 4px; height: 22px; border-radius: 2px; background: #04211d; transform: translateY(-50%); }
.clip-handle.start { left: -9px; } .clip-handle.end { right: -9px; }
.clip-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; left: 0; pointer-events: none; }
.clip-info { text-align: center; font-size: 13px; color: var(--text-dim); padding: 6px 0 calc(var(--safe-b) + 12px); min-height: 22px; }
.clip-busy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(5,7,12,0.82); font-size: 14px; }
.clip-busy[hidden] { display: none !important; }
.clip-busy-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.clip-busy-ring circle { fill: none; stroke-width: 6; }
.clip-busy-ring .track { stroke: rgba(255,255,255,0.15); }
.clip-busy-ring .arc { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: var(--clip-done, 1); transition: stroke-dashoffset 0.2s linear; }

/* ---- v4.8: stories ---------------------------------------------------------
   Rings on the home screen, a section on the profile, a full-screen viewer
   with a bar per story, and a small composer for a caption. */
.stories-strip { display: flex; gap: 14px; padding: 4px 14px 12px; overflow-x: auto; scrollbar-width: none; }
.stories-strip::-webkit-scrollbar { display: none; }
.stories-strip[hidden] { display: none !important; }
.story-ring { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; }
.story-ring .ring { position: relative; width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: var(--border); }
.story-ring.unseen .ring { background: conic-gradient(from 200deg, #f0567e, #f4a440, #14b8a6, #f0567e); }
.story-ring.seen .ring { background: var(--border); }
.story-ring.mine.empty .ring { background: var(--border); }
.story-ring .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--bg); }
.story-ring .plus { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #04211d; font-weight: 800; font-size: 15px; line-height: 20px; text-align: center; border: 2px solid var(--bg); }
.story-ring .name { font-size: 11px; color: var(--text-dim); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-stories { display: flex; gap: 8px; padding: 8px 12px 12px; overflow-x: auto; scrollbar-width: none; }
.profile-stories[hidden] { display: none !important; }
.profile-story { flex: 0 0 auto; width: 72px; border: 0; padding: 0; background: none; color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.profile-story img { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; background: #000; }
.profile-story .meta { font-size: 10.5px; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.story-compose { position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column; background: #05070c; color: #fff; }
.story-compose[hidden] { display: none !important; }
.story-compose-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.story-compose-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-compose-stage .video-badge { position: absolute; left: 14px; bottom: 14px; }
.story-compose-caption { padding: 10px 14px 0; }
.story-compose-caption input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font: inherit; font-size: 15px; outline: none; }

.story-screen { position: fixed; inset: 0; z-index: 97; display: flex; flex-direction: column; background: #000; color: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.story-screen[hidden] { display: none !important; }
.story-bars { position: absolute; top: calc(var(--safe-t) + 8px); left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; }
.story-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; position: relative; }
.story-bars span::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.story-bars span.done::after { transform: scaleX(1); }
.story-head { position: absolute; top: calc(var(--safe-t) + 18px); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.story-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.story-age { font-weight: 400; opacity: 0.8; font-size: 12px; }
.story-head .icon-btn { color: #fff; }
.story-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; touch-action: none; }
.story-stage img, .story-stage video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.story-stage img[hidden], .story-stage video[hidden] { display: none !important; }
.story-caption-view { position: absolute; left: 14px; right: 14px; bottom: 16px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.55); font-size: 15px; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.story-caption-view[hidden] { display: none !important; }
.story-paused { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40px; opacity: 0.8; text-shadow: 0 2px 10px #000; pointer-events: none; }
.story-paused[hidden] { display: none !important; }
.story-foot { padding: 8px 12px calc(var(--safe-b) + 12px); background: #000; }
.story-reply { display: flex; align-items: center; gap: 8px; }
.story-reply[hidden] { display: none !important; }
.story-reply input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font: inherit; font-size: 15px; outline: none; }
.story-heart { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); font-size: 20px; cursor: pointer; }
.story-mine { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.8); min-height: 40px; }
.story-mine[hidden] { display: none !important; }
.story-mine .link-btn.danger { color: #ff8a8a; }

/* ---- v4.13: a story that serves a sentence, and the court record --------
   The composer says which case the story serves; the viewer wears a ribbon
   under the bars that jumps to the served card; the profile keeps the
   record; the verdict sheet shows the other side's. */
.story-serve-note { margin: 10px 14px 0; padding: 9px 12px; border-radius: 12px; background: rgba(255, 214, 138, 0.14); border: 1px solid rgba(255, 214, 138, 0.35); color: #ffd98a; font-size: 13px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-serve-note[hidden] { display: none !important; }
/* v4.14: a day or kept — the same segmented control as the composer's
   Keep/Once/Twice, on the story composer's dark stage. */
.story-ttl { align-self: center; margin: 12px auto 0; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.story-ttl button { color: rgba(255,255,255,0.75); font-size: 13px; padding: 6px 14px; }
.story-ttl button[aria-pressed="true"], .story-ttl button:nth-child(n+2)[aria-pressed="true"] { background: var(--accent); color: #fff; }
.story-court { position: absolute; top: calc(var(--safe-t) + 62px); left: 12px; right: 12px; z-index: 3; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 214, 138, 0.45); background: rgba(0, 0, 0, 0.55); color: #ffd98a; font: inherit; font-size: 13.5px; font-weight: 700; text-align: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 6px rgba(0,0,0,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-court[hidden] { display: none !important; }
.story-court:active { background: rgba(255, 214, 138, 0.22); }
.profile-court { padding: 12px 14px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border); }
.profile-court-line { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.profile-court.empty .profile-court-line { font-weight: 400; color: var(--text-dim); font-size: 14px; }
.profile-court-sub { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.verdict-sheet .vd-peer-record { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); min-height: 0; }
.verdict-sheet .vd-peer-record:empty { display: none; }

/* --- v4.12: Verdict — the court sits in the chat ------------------------- */
/* The header button, a sheet to file a case or testify in one, and the
   case's stages as court documents inside the ordinary bubbles. The card
   takes the mode's colours through the bubble it sits in (--bubble-me,
   --accent-rgb, --mode-font). */
.verdict-btn { font-size: 18px; }
.convo-header .verdict-btn { min-width: 44px; min-height: 44px; margin: -2px 0; } /* a 44px target without growing the header */
/* Five actions now sit in the header; on a phone they draw in so the name
   keeps its room (360px: back + avatar + five buttons left 34px for it). */
@media (max-width: 420px) {
  .convo-header { gap: 3px; }
  .convo-header .icon-btn { min-width: 36px; padding-left: 0; padding-right: 0; }
  .convo-header .verdict-btn { min-width: 36px; min-height: 44px; margin: -2px 0; } /* narrow, but still a 44px-tall target */
  .convo-header .avatar-sm { margin-right: 3px; }
}
#verdict-backdrop { z-index: 90; } /* with the mode picker: above the profile */
.verdict-sheet {
  gap: 8px;
  max-height: 80vh;
  max-height: min(80vh, calc(var(--vvh, 100dvh) - 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.verdict-sheet .vd-masthead { text-align: center; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); }
.verdict-sheet .vd-court { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; font-variant-caps: small-caps; }
.verdict-sheet .vd-judge { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; font-style: italic; }
.verdict-stage { display: flex; flex-direction: column; gap: 6px; padding: 2px 4px; }
.verdict-sheet[data-stage="filed"] .verdict-stage-testimony, .verdict-sheet[data-stage="testimony"] .verdict-stage-filed { display: none; }
.verdict-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-top: 4px; }
.verdict-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-input, rgba(255,255,255,0.05)); color: var(--text);
  font: inherit; font-size: 16px; outline: none;
}
.verdict-input:focus { border-color: var(--accent); }
.verdict-textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.verdict-count { font-size: 12px; color: var(--text-dim); text-align: right; margin-top: -2px; }
.verdict-primary { margin-top: 4px; }
.verdict-quote { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border-left: 3px solid var(--accent); }
.verdict-quote .vd-title { text-align: left; margin: 0 0 4px; font-size: 13px; }
.verdict-quote .vd-claim { font-size: 14px; max-height: 8.4em; overflow: auto; }
.verdict-open-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.verdict-open-list[hidden] { display: none !important; }
.verdict-quiet { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.verdict-quiet .grow { flex: 1; min-width: 0; text-align: left; }
.verdict-quiet .value { font-weight: 700; color: var(--accent); }
.verdict-quiet[data-on="false"] .value { color: var(--text-dim); }
.verdict-open-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); padding: 0 4px 2px; }
.verdict-open-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 10px;
  border: none; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.verdict-open-row:active { background: rgba(255,255,255,0.06); }
.verdict-open-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.verdict-open-state { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
#verdict-cancel { justify-content: center; color: var(--text-dim); margin-top: 2px; border-top: 1px solid var(--border); border-radius: 0; }
.msg-row.jump-flash .msg { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the card: a court document inside the bubble */
.msg.has-verdict { min-width: min(280px, 72vw); max-width: 100%; }
.verdict-card {
  --vd-line: rgba(0,0,0,0.22);
  margin: 1px 0 4px;
  padding: 10px 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--vd-line);
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  font-family: var(--mode-font, inherit);
  color: inherit;
  display: flex; flex-direction: column;
}
.msg-row.them .verdict-card { --vd-line: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.verdict-card .vd-court {
  font-variant-caps: small-caps; letter-spacing: 0.08em; font-size: 12px; font-weight: 800; text-align: center;
  padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px double currentColor; opacity: 0.9;
}
.verdict-card .vd-title { font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; margin: 0 0 8px; line-height: 1.3; }
.verdict-card .vd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; margin: 2px 0 2px; }
.verdict-card .vd-claim, .verdict-card .vd-testimony { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.verdict-card .vd-headline { font-weight: 800; font-size: 15px; text-align: center; margin: 2px 0 8px; line-height: 1.3; }
.verdict-card .vd-reasoning { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.verdict-card .vd-order { margin-top: 8px; padding: 8px 10px; border-left: 3px solid currentColor; background: rgba(0,0,0,0.12); font-size: 14px; line-height: 1.4; border-radius: 0 8px 8px 0; }
.verdict-card .vd-order b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.verdict-card .vd-sign { margin-top: 8px; font-style: italic; font-size: 12.5px; opacity: 0.85; text-align: right; }
.verdict-card .vd-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.verdict-card .vd-foot:empty { display: none; }
.verdict-card .vd-wait, .verdict-card .vd-state, .verdict-card .vd-deliberating { font-size: 12.5px; font-style: italic; opacity: 0.85; }
.verdict-card .vd-state { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
.verdict-card .vd-deliberating::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: vdDots 1.2s steps(4, end) infinite; }
@keyframes vdDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.verdict-testify, .verdict-retry, .verdict-share {
  flex: 1; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.6);
  background: rgba(var(--accent-rgb, 20,184,166), 0.2);
  color: inherit; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.msg-row.me .verdict-testify, .msg-row.me .verdict-retry, .msg-row.me .verdict-share { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.16); }
.verdict-testify:active, .verdict-retry:active, .verdict-share:active { transform: scale(0.98); }
.verdict-card .vd-stamp {
  align-self: center; margin: 4px auto 10px; padding: 5px 12px; border: 2px solid currentColor; border-radius: 6px;
  transform: rotate(-6deg); font-weight: 900; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  color: #e5484d; opacity: 0.92; white-space: nowrap;
}
.verdict-card .vd-stamp[data-winner="defendant"] { color: #3e63dd; }
.verdict-card .vd-stamp[data-winner="split"] { color: #d9a300; }
.msg-row.me .verdict-card .vd-stamp { color: rgba(0,0,0,0.75); }
.verdict-card .vd-fault { margin-top: 10px; font-size: 12px; }
.verdict-card .vd-fault-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,0.2); }
.verdict-card .vd-fault-bar i { display: block; height: 100%; }
.verdict-card .vd-fault-bar i.p { background: #e5484d; }
.verdict-card .vd-fault-bar i.d { background: #3e63dd; }
.verdict-card .vd-fault-names { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; opacity: 0.9; }
.verdict-card .vd-fault-names .d { text-align: right; }
.verdict-card .vd-fault-names span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.has-verdict .msg-meta { margin-top: 0; }
#screen-conversation[data-mode="sexy"] .verdict-card { font-style: italic; }
#screen-conversation[data-mode="sexy"] .verdict-card .vd-court, #screen-conversation[data-mode="sexy"] .verdict-card .vd-stamp { font-style: normal; }
#screen-conversation[data-mode="work"] .verdict-card { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; border-radius: 4px; }
#screen-conversation[data-mode="work"] .verdict-card .vd-stamp { border-radius: 2px; transform: rotate(-3deg); }
#screen-conversation[data-mode="energetic"] .verdict-card .vd-title, #screen-conversation[data-mode="energetic"] .verdict-card .vd-headline { font-size: 16px; }

/* ---- v4.13: serving the sentence — the sentence line, the second stamp,
.vd-term { margin: 6px 0 2px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border: 1px dashed rgba(var(--accent-rgb), 0.45); font-variant-numeric: tabular-nums; }
.vd-term.done { border-style: solid; background: rgba(46, 204, 113, 0.14); color: #2ecc71; border-color: rgba(46, 204, 113, 0.5); }
   Serve / Accept / Not served, the ribbon on evidence, the chip above the
   composer, and the You-owe / They-owe rows in the sheet ------------------ */
.verdict-card .vd-sentence { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb, 20,184,166), 0.14); font-size: 14px; line-height: 1.4; }
.msg-row.me .verdict-card .vd-sentence { background: rgba(0,0,0,0.14); }
.verdict-card .vd-deed-icon { flex: none; font-size: 18px; line-height: 1.1; }
.verdict-card .vd-deed-text { min-width: 0; overflow-wrap: anywhere; }
.verdict-card .vd-stamp.served { color: #1f9d55; margin-top: 10px; transform: rotate(4deg); }
.verdict-card .vd-stamp.served.again { color: #e5484d; }
.msg-row.me .verdict-card .vd-stamp.served { color: rgba(0,0,0,0.75); }
.verdict-card .vd-note { font-size: 12.5px; font-style: italic; opacity: 0.85; overflow-wrap: anywhere; }
.verdict-card .vd-foot { flex-wrap: wrap; }
.verdict-serve, .verdict-accept, .verdict-reject, .verdict-reject-send {
  flex: 1; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.6);
  background: rgba(var(--accent-rgb, 20,184,166), 0.2);
  color: inherit; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.msg-row.me .verdict-serve, .msg-row.me .verdict-accept, .msg-row.me .verdict-reject { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.16); }
.verdict-serve:active, .verdict-accept:active, .verdict-reject:active, .verdict-reject-send:active { transform: scale(0.98); }
.verdict-reject { border-color: rgba(229,72,77,0.55); background: rgba(229,72,77,0.14); }
.verdict-card.vd-small { padding: 10px 12px; }
.verdict-card.vd-small .vd-court { margin-bottom: 4px; }
.verdict-card.vd-small .vd-stamp { margin: 4px auto 6px; font-size: 12px; }
.verdict-card .vd-evidence { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.verdict-card .vd-state { display: block; margin-top: 6px; }
.vd-story-thumb { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px; border-radius: 12px; border: 1px solid var(--vd-line, rgba(255,255,255,0.18)); background: rgba(0,0,0,0.12); color: inherit; font: inherit; cursor: pointer; width: 100%; text-align: left; }
.vd-story-thumb img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; background: rgba(0,0,0,0.3); flex: none; }
.vd-story-thumb .vd-story-open { font-weight: 700; font-size: 13.5px; }
.vd-verify { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.msg.has-ribbon > .vd-verify { padding: 0 10px 8px; }
.vd-reject-form { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.vd-reject-form[hidden] { display: none !important; }
.vd-reject-note { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,0.15); color: inherit; font: inherit; font-size: 16px; }
.vd-reject-form .verdict-reject-send { flex: none; }
/* the ribbon on a photo, clip, voice note or the phrase that serves */
.vd-ribbon { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; background: rgba(var(--accent-rgb, 20,184,166), 0.22); border-bottom: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.35); }
.msg-row.me .vd-ribbon { background: rgba(0,0,0,0.16); border-bottom-color: rgba(0,0,0,0.2); }
.vd-ribbon-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-ribbon-state { flex: none; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; }
.msg.has-ribbon { overflow: hidden; }
.msg.has-ribbon > .vd-ribbon { margin: -6px -9px 6px -10px; } /* bleeds to the bubble's edges */
.msg.has-ribbon.media { min-width: min(240px, 68vw); }
.msg.has-ribbon.media > .vd-ribbon { margin: -3px -3px 3px; border-radius: 0; }
.msg.has-ribbon.media > .vd-verify { padding: 4px 6px 6px; }
/* the chip above the composer */
.serve-chip { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(var(--accent-rgb, 20,184,166), 0.16); border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.4); font-size: 13.5px; font-weight: 600; }

/* ---- v4.17: a prop as a timed cue — the countdown chip, the breathing ring, the tray tag ---- */
.serve-timer { gap: 10px; }
.serve-timer .serve-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serve-timer-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }
.serve-ring { display: none; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(var(--accent-rgb, 20,184,166), 0.35); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 20,184,166), 0.25); }
.serve-timer[data-ring="true"] .serve-ring { display: block; animation: serveBreathe 10s ease-in-out infinite; } /* six breaths a minute: five in, five out */
@keyframes serveBreathe { 0%, 100% { transform: scale(0.6); opacity: 0.55; } 50% { transform: scale(1.35); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .serve-timer[data-ring="true"] .serve-ring { animation: serveBreatheStill 10s ease-in-out infinite; } @keyframes serveBreatheStill { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } }
.vd-item-timer { margin: 4px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.prop-tile.cued { position: relative; outline: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.6); }
.prop-cue { position: absolute; top: -6px; right: -4px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--bubble-me-text, #fff); font-size: 9.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.serve-chip[hidden] { display: none !important; }
.serve-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serve-chip .icon-btn { min-width: 36px; min-height: 36px; }
/* the required prop in the tray */
.prop-tile.required { outline: 2px solid rgba(var(--accent-rgb, 20,184,166), 0.9); outline-offset: 2px; animation: vdRequired 1.2s ease-in-out infinite; }
@keyframes vdRequired { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .prop-tile.required { animation: none; } }
/* the sheet's owe rows */
.verdict-owe-row { display: flex; align-items: center; gap: 8px; }
.verdict-owe-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; border-radius: 10px; }
.verdict-owe-body:active { background: rgba(255,255,255,0.06); }
.verdict-owe-row .verdict-serve.small { flex: none; min-height: 40px; padding: 6px 12px; font-size: 13px; }
.verdict-owe-row .verdict-open-state, .verdict-owed-row .verdict-open-state { white-space: normal; text-align: right; }
.vd-bench { width: 40px; height: 40px; border-radius: 50%; display: block; margin: 0 auto 4px; }
.vd-bench:not([src]) { display: none; }

/* ---- v4.15 (C1): the sentence is a bundle — the items on the ruling card,
   each with its dose and proof, its state, a docket of days for a dosed item
   ("Day 2 of 7" + dots), and the owing party's Serve / Done today ----------- */
.verdict-card .vd-bundle { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.verdict-card .vd-bundle-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.verdict-card .vd-item { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb, 20,184,166), 0.14); font-size: 14px; line-height: 1.4; }
.msg-row.me .verdict-card .vd-item { background: rgba(0,0,0,0.14); }
.verdict-card .vd-item[data-state="done"] { opacity: 0.82; }
.verdict-card .vd-item-head { display: flex; gap: 8px; align-items: flex-start; }
.verdict-card .vd-item-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: rgba(var(--accent-rgb, 20,184,166), 0.3); }
.msg-row.me .verdict-card .vd-item-n { background: rgba(0,0,0,0.22); }
.verdict-card .vd-item-detail { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.verdict-card .vd-item-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; opacity: 0.85; padding-left: 30px; }
.verdict-card .vd-item-dose { font-weight: 700; font-variant-numeric: tabular-nums; }
.verdict-card .vd-item-proof { overflow-wrap: anywhere; }
.verdict-card .vd-item-state { font-size: 12.5px; padding-left: 30px; opacity: 0.9; overflow-wrap: anywhere; }
.verdict-card .vd-item[data-state="done"] .vd-item-state { color: #1f9d55; font-weight: 700; }
.msg-row.me .verdict-card .vd-item[data-state="done"] .vd-item-state { color: rgba(0,0,0,0.75); }
.verdict-card .vd-item[data-state="rejected"] .vd-item-state { color: #e5484d; font-weight: 700; }
.msg-row.me .verdict-card .vd-item[data-state="rejected"] .vd-item-state { color: rgba(0,0,0,0.75); }
.verdict-card .vd-item .vd-term { margin: 0 0 0 30px; }
.verdict-card .vd-item .verdict-serve, .verdict-card .vd-item .verdict-checkin { align-self: stretch; }
.verdict-checkin {
  flex: 1; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(46, 204, 113, 0.6); background: rgba(46, 204, 113, 0.18);
  color: inherit; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.verdict-checkin:active { transform: scale(0.98); }
.verdict-checkin.counted { border-style: dashed; background: rgba(46, 204, 113, 0.1); opacity: 0.85; cursor: default; }
.msg-row.me .verdict-checkin { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.16); }
.verdict-card .vd-stamp.served.partial { color: #b7791f; transform: rotate(-3deg); }
.msg-row.me .verdict-card .vd-stamp.served.partial { color: rgba(0,0,0,0.7); }
/* the docket: "Day 2 of 7" and one dot a day */
.vd-docket { margin-left: 30px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,0.1); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vd-docket-title { font-weight: 700; margin-bottom: 4px; }
.vd-docket.run .vd-docket-title { color: #1f9d55; }
.msg-row.me .vd-docket.run .vd-docket-title { color: rgba(0,0,0,0.75); }
.vd-days { display: flex; flex-wrap: wrap; gap: 5px; }
.vd-day { display: block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(var(--accent-rgb, 20,184,166), 0.6); background: transparent; box-sizing: border-box; }
.msg-row.me .vd-day { border-color: rgba(0,0,0,0.35); }
.vd-day.done { background: #2ecc71; border-color: #2ecc71; }
.vd-day.today { border-color: #f5b301; border-width: 2px; box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.25); }
.vd-day.missed { border-color: rgba(229,72,77,0.7); background: rgba(229,72,77,0.25); }
.verdict-card.vd-small .vd-checkin { font-weight: 600; }

/* ---- v4.15 (C2): motions and amendments — "Ask the court" on the ruling,
   the motion stage of the sheet, the small motion / answer / amendment cards,
   the court's options with "Add to the sentence" for the winner ------------ */
.verdict-motion, .verdict-motion-retry {
  flex: 1; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--vd-line, rgba(255,255,255,0.25)); background: rgba(255,255,255,0.08);
  color: inherit; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.msg-row.me .verdict-motion, .msg-row.me .verdict-motion-retry { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.12); }
.verdict-motion:active, .verdict-motion-retry:active, .verdict-amend:active { transform: scale(0.98); }
.verdict-sheet:not([data-stage="motion"]) .verdict-stage-motion { display: none; }
.verdict-sheet[data-stage="motion"] .verdict-stage-filed, .verdict-sheet[data-stage="motion"] .verdict-stage-testimony { display: none; }
/* v4.18: the clinic — the tier control, held/slipped dockets, the urge tool */
.verdict-sheet:not([data-stage="urge"]) .verdict-stage-urge { display: none; }
.verdict-sheet[data-stage="urge"] .verdict-stage-filed, .verdict-sheet[data-stage="urge"] .verdict-stage-testimony { display: none; }
.verdict-tier { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.verdict-tier-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.verdict-tier-opt { min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25; cursor: pointer; }
.verdict-tier-opt.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb, 20,184,166), 0.14); }
.vd-held-slipped { display: flex; flex-wrap: wrap; gap: 6px; align-self: stretch; }
.vd-held-slipped .verdict-checkin { flex: 1 1 auto; }
.verdict-slip { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed rgba(245, 179, 1, 0.7); background: rgba(245, 179, 1, 0.08); color: inherit; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.msg-row.me .verdict-slip { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.12); }
.vd-sits { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.vd-sits-title { grid-column: 1 / -1; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.vd-sit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid rgba(var(--accent-rgb, 20,184,166), 0.5); background: rgba(var(--accent-rgb, 20,184,166), 0.08); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.msg-row.me .vd-sit { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.1); }
.vd-sit-label { font-size: 13px; font-weight: 700; }
.vd-sit-hint { font-size: 11.5px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vd-day.slipped { border-color: #f5b301; background: rgba(245, 179, 1, 0.45); }
.vd-evidence.vd-slipped { color: #b7790a; }
.msg-row.me .vd-evidence.vd-slipped { color: rgba(0,0,0,0.75); }
.vd-clinic-record { font-size: 12.5px; opacity: 0.85; margin-top: 4px; }
.verdict-stage-urge .urge-step { display: none; flex-direction: column; gap: 10px; }
.verdict-stage-urge[data-step="rate"] .urge-step-rate, .verdict-stage-urge[data-step="breathe"] .urge-step-breathe, .verdict-stage-urge[data-step="ride"] .urge-step-ride, .verdict-stage-urge[data-step="rerate"] .urge-step-rerate { display: flex; }
.urge-scale { display: flex; align-items: center; gap: 12px; }
.urge-slider { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
.urge-out { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
.urge-copy { font-size: 15px; line-height: 1.4; text-align: center; padding: 0 6px; }
.urge-copy.small { font-size: 12.5px; color: var(--text-dim); }
.urge-ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 160px; }
.urge-ring { display: block; width: 72px; height: 72px; border-radius: 50%; background: rgba(var(--accent-rgb, 20,184,166), 0.35); box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 20,184,166), 0.2); transform: scale(0.7); transition: transform 1s ease-in-out; }
.urge-ring.on { animation: urgeBreathe 13s ease-in-out infinite; } /* in 4 · hold 2 · out 6 · rest 1 */
@keyframes urgeBreathe { 0% { transform: scale(0.7); opacity: 0.6; } 30.8% { transform: scale(1.5); opacity: 1; } 46.2% { transform: scale(1.5); opacity: 1; } 92.3% { transform: scale(0.7); opacity: 0.6; } 100% { transform: scale(0.7); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .urge-ring.on { animation: urgeBreatheStill 13s ease-in-out infinite; } @keyframes urgeBreatheStill { 0% { opacity: 0.45; } 30.8%, 46.2% { opacity: 1; } 92.3%, 100% { opacity: 0.45; } } }
.urge-phase { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.urge-clock { text-align: center; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.urge-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.urge-act { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-elev); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.urge-act.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb, 20,184,166), 0.14); }
.urge-act-icon { font-size: 18px; }
.urge-act-label { font-size: 13px; font-weight: 700; }
.urge-act-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.urge-outcome { display: flex; flex-direction: column; gap: 8px; }
.urge-had { border: 1.5px dashed rgba(245, 179, 1, 0.7); }
.urge-sits { display: block; }
.urge-sits .vd-sits { margin-top: 6px; }
#verdict-motion-quote .vd-sentence { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
#verdict-motion-quote .vd-deed-icon { flex: none; font-size: 16px; line-height: 1.2; }
#verdict-motion-quote .vd-deed-text { min-width: 0; overflow-wrap: anywhere; }
.verdict-card .vd-motion-q { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; }
.verdict-card .vd-answer { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.verdict-card .vd-answer.vd-safety { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(229,72,77,0.5); background: rgba(229,72,77,0.1); font-weight: 600; }
.verdict-card .vd-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.verdict-card .vd-option { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb, 20,184,166), 0.14); font-size: 14px; line-height: 1.4; }
.msg-row.me .verdict-card .vd-option { background: rgba(0,0,0,0.14); }
.verdict-card .vd-option .vd-deed-icon { flex: none; font-size: 18px; line-height: 1.1; }
.verdict-card .vd-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.verdict-card .vd-option-name { font-weight: 800; font-size: 13px; letter-spacing: 0.02em; }
.verdict-card .vd-option-detail { overflow-wrap: anywhere; }
.verdict-card .vd-option-dose { font-size: 12px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.verdict-card .vd-option-state { flex: none; width: 100%; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #1f9d55; }
.msg-row.me .verdict-card .vd-option-state { color: rgba(0,0,0,0.75); }
.verdict-amend {
  flex: none; width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.6); background: rgba(var(--accent-rgb, 20,184,166), 0.22);
  color: inherit; font: inherit; font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
}
.msg-row.me .verdict-amend { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.16); }
.verdict-card.vd-motion .vd-foot, .verdict-card.vd-motion-reply .vd-foot { margin-top: 8px; }

/* ---- v4.16: the loop — the court's review at term end (TERM HELD / TERM
   SLIPPED, the note, the next term's items and "Take the next term"), the
   term tag on an item, the due-today badge on the header button and the
   sheet's Today group with its action inline ------------------------------ */
.verdict-card.vd-review .vd-stamp { margin: 4px auto 8px; }
.verdict-card.vd-review .vd-stamp[data-result="held"] { color: #1f9d55; }
.verdict-card.vd-review .vd-stamp[data-result="slipped"] { color: #e5484d; }
.msg-row.me .verdict-card.vd-review .vd-stamp { color: rgba(0,0,0,0.75); }
.verdict-card .vd-review-note { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; margin-top: 4px; }
.verdict-card .vd-next-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; margin-top: 10px; }
.verdict-card .vd-next { margin-top: 6px; }
.verdict-card .vd-next-item { border: 1px dashed rgba(var(--accent-rgb, 20,184,166), 0.5); }
.msg-row.me .verdict-card .vd-next-item { border-color: rgba(0,0,0,0.25); }
.verdict-next {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb, 20,184,166), 0.6); background: rgba(var(--accent-rgb, 20,184,166), 0.22);
  color: inherit; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
.msg-row.me .verdict-next { border-color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.16); }
.verdict-next:active { transform: scale(0.98); }
.verdict-card .vd-item-term { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; opacity: 0.9; }
.verdict-card .vd-stamp[data-term] { white-space: normal; text-align: center; }
/* the badge: what is due today, on the header button */
.verdict-btn { position: relative; }
.verdict-due {
  position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center;
  letter-spacing: 0; font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 0 0 2px var(--bg, #0b1220);
}
.verdict-due[hidden] { display: none; }
/* the sheet's Today group: the item and its button side by side */
.verdict-today-row { display: flex; align-items: center; gap: 8px; }
.verdict-today-row .verdict-open-state { white-space: normal; text-align: right; }
.verdict-today-row .verdict-checkin.small, .verdict-today-row .verdict-serve.small { flex: none; min-height: 40px; padding: 6px 12px; font-size: 13px; }
.verdict-today-row .verdict-checkin.small { border-radius: 10px; }
.verdict-today-row .verdict-checkin[disabled] { opacity: 0.6; cursor: default; }

/* ---- v4.22: the docket and the case's own screen ---- */
/* Only one stage is ever on. The case view is a screen, not a form: it holds
   what the case is and every move still open on it. */
.verdict-sheet:not([data-stage="case"]) .verdict-stage-case { display: none; }
.verdict-sheet[data-stage="case"] .verdict-stage-filed,
.verdict-sheet[data-stage="case"] .verdict-stage-testimony { display: none; }

.verdict-docket-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin: 14px 2px 4px; }
.verdict-docket-row { align-items: center; gap: 8px; }
.verdict-docket-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; text-align: left; }
.verdict-chip { flex: 0 0 auto; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.14)); opacity: .9; white-space: nowrap; }
.verdict-chip[data-status="open"] { background: rgba(255, 196, 84, .14); border-color: rgba(255, 196, 84, .35); }
.verdict-chip[data-status="testified"] { background: rgba(126, 170, 255, .14); border-color: rgba(126, 170, 255, .35); }
.verdict-chip[data-status="sentenced"], .verdict-chip[data-status="evidence"] { background: rgba(160, 230, 160, .12); border-color: rgba(160, 230, 160, .3); }
.verdict-chip[data-status="rejected"] { background: rgba(255, 120, 120, .14); border-color: rgba(255, 120, 120, .35); }
.verdict-chip[data-status="served"] { background: rgba(120, 220, 170, .16); border-color: rgba(120, 220, 170, .38); }
.verdict-chip[data-status="withdrawn"] { background: rgba(255,255,255,.06); opacity: .6; }

.verdict-case-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 2px 2px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); }
.verdict-case-parties { display: flex; gap: 10px; font-size: 12px; opacity: .7; flex-wrap: wrap; }
.verdict-case-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px; max-height: 46vh; overflow-y: auto; }
.verdict-case-withdrawn { font-size: 14px; opacity: .8; }
.verdict-case-items { display: flex; flex-direction: column; gap: 6px; }
.verdict-case-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.verdict-case-item[data-state="done"] { opacity: .5; }
.verdict-case-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.verdict-case-item-line { font-size: 13px; }
.verdict-case-item-state { font-size: 11px; opacity: .6; }
.verdict-case-acts { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.verdict-withdraw { color: #ff9a9a; }
.verdict-withdraw-warn { font-size: 13px; line-height: 1.45; opacity: .85; padding: 8px 10px; border-radius: 10px; background: rgba(255, 120, 120, .1); border: 1px solid rgba(255, 120, 120, .28); }
.verdict-withdraw-row { display: flex; gap: 8px; }
.verdict-withdraw-row > * { flex: 1; }
.verdict-withdraw-yes { background: #b13b3b; }

/* A withdrawn case's rows stay in the conversation, struck through. */
.verdict-card[data-withdrawn="1"] .vd-title,
.verdict-card[data-withdrawn="1"] .vd-claim,
.verdict-card[data-withdrawn="1"] .vd-testimony,
.verdict-card[data-withdrawn="1"] .vd-headline { text-decoration: line-through; opacity: .55; }
.vd-stamp[data-winner="withdrawn"] { background: rgba(255,255,255,.08); color: inherit; opacity: .75; }

/* ---- v4.23: the summons window, the ex parte ruling, the petition ---- */
.verdict-sheet:not([data-stage="petition"]) .verdict-stage-petition { display: none; }
.verdict-sheet[data-stage="petition"] .verdict-stage-filed,
.verdict-sheet[data-stage="petition"] .verdict-stage-testimony { display: none; }

.verdict-optional { font-weight: 400; opacity: .5; font-size: 11px; text-transform: none; letter-spacing: 0; }
.verdict-relief { display: flex; gap: 8px; }
.verdict-relief-opt { flex: 1; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.16)); background: rgba(255,255,255,.04); color: inherit; font-size: 13px; }
.verdict-relief-opt.on { background: rgba(126, 170, 255, .16); border-color: rgba(126, 170, 255, .5); }

/* The window: what is left of the day the defendant has. */
.verdict-window { font-size: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 196, 84, .12); border: 1px solid rgba(255, 196, 84, .3); }
.verdict-window[data-state="run"] { background: rgba(255, 120, 120, .12); border-color: rgba(255, 120, 120, .32); }

/* Ex parte and default: a ruling that says what it was given. */
.vd-exparte, .vd-default { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; padding: 3px 7px; border-radius: 6px; display: inline-block; border: 1px dashed currentColor; }
.vd-exparte { color: #ffc454; }
.vd-default { color: #ff9a9a; }
.vd-stamp[data-provisional="1"] { opacity: .78; border-style: dashed; }
.vd-counter { font-size: 13px; line-height: 1.45; opacity: .9; border-left: 2px solid rgba(255,255,255,.18); padding-left: 8px; }
.vd-counter-finding { font-size: 12px; opacity: .75; font-style: italic; }

/* Confidence: the court's own number, and how much of the bar it fills. */
.vd-confidence { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.vd-conf-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.vd-conf-bar > i { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.vd-confidence[data-band="high"] .vd-conf-bar > i { background: #78dcaa; }
.vd-confidence[data-band="mid"] .vd-conf-bar > i { background: #ffc454; }
.vd-confidence[data-band="low"] .vd-conf-bar > i { background: #ff9a9a; }
.vd-conf-text { font-size: 11px; opacity: .65; }

.verdict-petition-card .vd-claim { font-style: italic; }
.verdict-case-petition { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.verdict-case-petition[data-kind="petition-reply"] { background: rgba(126, 170, 255, .1); }
.verdict-chip[data-status="provisional"] { background: rgba(255, 196, 84, .14); border-color: rgba(255, 196, 84, .35); }
.verdict-chip[data-status="default"] { background: rgba(255, 120, 120, .14); border-color: rgba(255, 120, 120, .35); }
.verdict-chip[data-status="dismissed"] { background: rgba(255,255,255,.06); opacity: .6; }

/* ---- v4.24: exhibits and the appeal ---- */
.verdict-sheet:not([data-stage="exhibit"]) .verdict-stage-exhibit { display: none; }
.verdict-sheet:not([data-stage="appeal"]) .verdict-stage-appeal { display: none; }
.verdict-sheet[data-stage="exhibit"] .verdict-stage-filed, .verdict-sheet[data-stage="exhibit"] .verdict-stage-testimony,
.verdict-sheet[data-stage="appeal"] .verdict-stage-filed, .verdict-sheet[data-stage="appeal"] .verdict-stage-testimony { display: none; }

.verdict-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.verdict-kind-opt { flex: 1 1 45%; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.16)); background: rgba(255,255,255,.04); color: inherit; font-size: 13px; text-align: left; }
.verdict-kind-opt.on { background: rgba(126, 170, 255, .16); border-color: rgba(126, 170, 255, .5); }
.verdict-exhibit-letter { font-size: 11px; opacity: .55; }

.verdict-exhibit-card .vd-claim { font-style: italic; }
.verdict-exhibit-item[data-side="defendant"] { border-left: 2px solid rgba(255, 154, 154, .5); }
.verdict-exhibit-item[data-side="plaintiff"] { border-left: 2px solid rgba(126, 170, 255, .5); }
.vd-cited { font-size: 12px; opacity: .75; line-height: 1.45; }
.vd-appeal { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; color: #a9c6ff; padding: 3px 7px; border-radius: 6px; border: 1px dashed currentColor; display: inline-block; }
.verdict-card[data-set-aside="1"] { opacity: .6; }
.verdict-card[data-set-aside="1"] .vd-headline, .verdict-card[data-set-aside="1"] .vd-order { text-decoration: line-through; }
.verdict-appeal-act { color: #a9c6ff; }

/* ---- v4.25: the merger — conduct before the court, and the parties' form ---- */
.props-court-hint { font-size: 11px; opacity: .7; padding: 4px 10px; text-align: center; }
.props-tray[data-court="pending"] { box-shadow: inset 0 1px 0 rgba(255, 196, 84, .25); }

.verdict-conduct { display: flex; flex-wrap: wrap; gap: 6px; }
.verdict-conduct-chip { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); }
.verdict-conduct-chip[data-side="plaintiff"] { border-color: rgba(126, 170, 255, .45); }
.verdict-conduct-chip[data-side="defendant"] { border-color: rgba(255, 154, 154, .45); }

.verdict-party { display: flex; align-items: center; gap: 6px; min-width: 0; }
.verdict-party-face { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.verdict-party-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.verdict-party-role { font-size: 12px; }
.verdict-party-record { font-size: 10px; opacity: .55; letter-spacing: .04em; }

/* --- Plans (v4.27): the diary, and the strip that counts it down ------------
   Two clocks live in this sheet at once, so every line that carries a time is
   allowed to wrap; nothing here is ellipsised except the strip, which has the
   composer under it and cannot grow. */
#plans-backdrop { z-index: 90; } /* with the mode picker: above the conversation sheet (80) */
.plans-sheet { gap: 8px; padding: 14px 14px calc(12px + var(--safe-b)); }

.plans-list { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.plans-empty { padding: 10px 2px; color: var(--text-dim); font-size: 13.5px; }
.plans-head { padding: 8px 2px 2px; color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.plans-score { padding: 8px 2px 2px; color: var(--text-dim); font-size: 12px; font-style: italic; }

.plan-row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.plan-row.on { border-color: rgba(var(--accent-rgb, 20,184,166), 0.5); }
.plan-row.spent { opacity: 0.55; }
.plan-row-body { flex: 1; min-width: 0; }
.plan-row-when { font-size: 14px; font-weight: 600; }
.plan-row-sub { margin-top: 2px; color: var(--text-dim); font-size: 12px; }
.plan-row-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.plan-act { min-height: 34px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text); font-size: 12.5px; cursor: pointer; }
.plan-act:active { transform: scale(0.97); }
.plan-act.yes { border-color: var(--accent); color: var(--accent); }
.plan-act.no { color: #ff8a8a; }

.plans-compose { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.plans-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.plans-quick-btn { min-height: 34px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-dim); font-size: 12.5px; cursor: pointer; }
.plans-quick-btn:active { transform: scale(0.97); }
.plans-when { display: flex; gap: 6px; }
/* 16px or Safari zooms the whole page when the field takes focus. */
.plans-input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 16px; font-family: inherit; }
.plans-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.plans-echo { min-height: 16px; padding: 0 2px; color: var(--text-dim); font-size: 12px; }
.plans-echo.bold { color: var(--accent); }
.plans-kind { display: flex; gap: 6px; }
.plans-kind-btn { flex: 1; min-height: 40px; border-radius: 12px; border: 1px solid var(--border); background: none; color: var(--text-dim); font-size: 13.5px; cursor: pointer; }
.plans-kind-btn.current { border-color: var(--accent); color: var(--accent); }
.plans-propose { background: var(--accent-dim); font-weight: 600; }
.plans-propose:disabled { opacity: 0.6; }

/* The strip: same grammar as the pin bar, one line, never wraps. */
.plan-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; font-size: 12.5px; color: var(--text); background: rgba(20, 184, 166, 0.10); border-bottom: 1px solid var(--border); }
.plan-bar.due { background: rgba(20, 184, 166, 0.22); }
.plan-bar-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-bar-go { min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.plan-bar-go:active { transform: scale(0.97); }
/* Watching together takes the screen; the diary can wait. */
#screen-conversation.together .plan-bar { display: none; }

/* --- The room (v4.27): three or four on the call ---------------------------
   At two people none of this exists and the remote picture keeps the whole
   screen. At three or four the grid takes over the stage, the main video is
   folded away, and the controls keep their room at the bottom exactly as
   before — nothing here is allowed to steal space from the controls. */
.call-grid {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--safe-t) + 8px);
  bottom: calc(var(--ctl-top, 140px) + 8px);
  display: grid;
  gap: 6px;
  padding: 0 8px;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  z-index: 2;
}
/* Two others is the common watchparty: side by side, one row. Three fills the
   second row and the odd tile spans it. */
.call-grid[data-n="2"] { grid-template-rows: 1fr; }
.call-grid[data-n="3"] > :last-child { grid-column: span 2; }
.call-grid > * { min-height: 0; }

#screen-call.room #remote-video,
#screen-call.room #remote-backdrop,
#screen-call.room .call-peer-card { display: none; }

.room-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-tile.has-video { background: #000; }
.room-tile-video { width: 100%; height: 100%; object-fit: cover; display: none; }
.room-tile.has-video .room-tile-video { display: block; }
/* The face stands in for the picture whenever there isn't one — camera off,
   still connecting, or a voice call. */
.room-tile-face { width: 54px; height: 54px; border-radius: 50%; }
.room-tile.has-video .room-tile-face { display: none; }
.room-tile-cap {
  position: absolute;
  left: 6px; right: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none;
}
.room-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Somebody the room is still waiting on reads as waiting, not as broken. */
.room-tile.waiting { opacity: 0.6; }
.room-tile.waiting::after {
  content: attr(data-state);
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10.5px; letter-spacing: 0.04em;
}
/* Watching together already shrinks everyone to thumbs; the grid becomes that
   strip rather than competing with the content for the screen. */
#screen-call.room.watching .call-grid {
  top: auto;
  bottom: calc(var(--ctl-top, 140px) + 8px);
  height: 84px;
  grid-template-columns: repeat(auto-fit, minmax(72px, 110px));
  justify-content: center;
}

.room-sheet { gap: 6px; padding: 14px 14px calc(12px + var(--safe-b)); }
.room-list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.room-pick:disabled { opacity: 0.45; }
#room-backdrop { z-index: 96; } /* above the call screen, which is full-screen chrome */