/* ============================================================================
   TalkLive — text-chat app (/chat) stylesheet.
   Rebuilt minimal: one top bar, flat surfaces, one accent color, no gradients
   or glow. Self-contained and small so it loads fast on weak phones. Shares
   theme tokens with the main app but ships none of its call/marketing CSS.
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg-1: #0e1220;
  --bg-2: #151a2c;
  --line: rgba(138, 144, 168, 0.16);
  --accent: #5b6cf0;
  --accent-soft: rgba(91, 108, 240, 0.14);
  --danger: #ff5470;
  --green: #2ed47a;
  --text: #eef0fa;
  --muted: #8a90a8;
  --bubble-them: #232a42;
}
[data-theme="light"] {
  --bg-1: #f3f5fb; --bg-2: #ffffff; --line: rgba(90, 97, 122, 0.18);
  --accent: #4a5bd8; --accent-soft: rgba(74, 91, 216, 0.1);
  --text: #1a2033; --muted: #5a617a; --bubble-them: #e7eaf4;
}
[data-theme="ocean"] {
  --bg-1: #06202e; --bg-2: #0a2c3d; --accent: #0aa2c8; --bubble-them: #0f3a4e;
}
[data-theme="sunset"] {
  --bg-1: #1c0e17; --bg-2: #281423; --accent: #e05c6e; --bubble-them: #3a1f31;
}

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-1);
  color: var(--text);
  overflow: hidden; /* the page never scrolls — only the message list does */
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; }
.hidden { display: none !important; }

/* --- App shell: fixed-height column, no page scroll. Centered and framed on
       wide screens; edge-to-edge on phones. --- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* pins to the real visible viewport when supported, so the
                     keyboard/URL bar never scrolls the top bar off-screen */
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-1);
}
@media (min-width: 800px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* --- The one top bar ------------------------------------------------------
   Three balanced zones on a symmetric grid: lead (settings + wordmark) ·
   status (online count, or the partner once connected) · actions.
   The lead and actions take exactly the width they need and the status
   column absorbs everything left over, so the middle is centred in the bar
   instead of being shoved against the brand by a greedy flex child — and it
   truncates rather than sliding under the buttons when space runs out. Every control shares one shape language
   (fully rounded) and one weight scale, with a single saturated element —
   the call button — so the primary action is never in competition. --- */
.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  min-height: 60px;
  position: relative;
  z-index: 20;
  /* Opaque on purpose: the stage sits directly behind this bar, so a
     translucent surface leaves the page heading legible through it — and
     backdrop-filter is the most expensive thing this stylesheet could ask a
     weak phone to composite every frame. */
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
/* A whisper of accent along the base edge so the bar reads as a deliberate
   surface rather than a plain divider. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
  pointer-events: none;
}

.top-lead { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  text-decoration: none; color: var(--text); border-radius: 12px;
  transition: opacity 0.18s ease;
}
.brand:hover { opacity: 0.78; }
/* Four bars that idle as a static waveform and animate while the app is
   live — a small sign that the product is about voice. */
.brand-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.brand-mark i {
  display: block; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--green)));
  animation: brandWave 1.5s ease-in-out infinite;
}
.brand-mark i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.brand-mark i:nth-child(2) { height: 15px; animation-delay: 0.18s; }
.brand-mark i:nth-child(3) { height: 11px; animation-delay: 0.36s; }
.brand-mark i:nth-child(4) { height: 6px;  animation-delay: 0.54s; }
@keyframes brandWave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.brand-text {
  font-size: 17px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap;
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Centre zone. Idle it holds the online pill; connected it holds the partner. */
.top-info { justify-self: stretch; min-width: 0; overflow: hidden; }
.top-id { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.top-name {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font-weight: 700; font-size: 15.5px; letter-spacing: -0.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.top-sub {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

/* Idle: the online count is one compact status pill, centred in the bar. */
#topDefault .top-sub {
  margin-top: 0; padding: 6px 13px; border-radius: 999px; width: fit-content;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--text); font-weight: 600; letter-spacing: 0.01em;
}
/* The live dot breathes, so the count reads as a real-time number. */
#topDefault .top-sub .online-dot { animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
}
.peer-flag { display: inline-flex; flex: none; }
.peer-flag .flag-icon { border-radius: 3px; display: block; }

/* --- Action buttons ---
   One shape, one size, one resting weight. Colour is reserved for meaning:
   the call button is the only filled control, report turns red only on
   contact, and Auto goes green — tonally — solely when switched on. --- */
.top-actions { justify-self: end; display: inline-flex; align-items: center; gap: 7px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted); cursor: pointer; padding: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.icon-btn:hover {
  background: color-mix(in srgb, var(--text) 11%, transparent);
  color: var(--text); transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0) scale(0.93); }
.icon-btn:focus-visible {
  outline: none; color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
}
.report-btn:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.friend-btn:hover { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }

/* The one saturated control in the bar: the primary action. */
.call-btn {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}
.call-btn:hover {
  background: color-mix(in srgb, var(--accent) 88%, #fff); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 44%, transparent);
}

/* "Auto" — the auto-reconnect toggle. Same height as its neighbours, tonal
   when off so it stops shouting over the call button, filled when on. */
.auto-btn {
  width: auto; min-width: 0; border-radius: 999px; padding: 0 14px; height: 38px;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
/* On reads as green, but tonal rather than filled: a solid swatch here sat
   beside the call button as a second primary action and the eye had to pick.
   Filled is reserved for the one control that starts something. */
.auto-btn.active {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
}
.auto-btn.active:hover {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 24%, transparent);
}

/* --- Responsive ---
   Connected, the bar can carry six controls. Below 560px the wordmark drops
   to its waveform and the controls tighten, so the centre zone keeps room
   for the partner's name instead of the row overflowing. --- */
/* --- Overflow menu ---
   The bar carries Auto and Call and nothing else; every other action lives
   here with its name spelled out beside it. Three controls fit any phone
   without shrinking, and no secondary action depends on decoding a glyph. */
.top-more { position: relative; display: inline-flex; }
.more-btn { position: relative; }
/* Unread messages are inside the closed menu, so the count is mirrored out
   here as a dot — otherwise folding Friends away would hide notifications. */
.more-dot {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--bg-2);
}
.top-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  animation: menuIn 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: start;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-item svg { flex: none; color: var(--muted); transition: color 0.15s ease; }
.menu-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.menu-item:hover svg { color: var(--text); }
.menu-item:active { background: color-mix(in srgb, var(--text) 13%, transparent); }
.menu-item:focus-visible {
  outline: none; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent);
}
.menu-item:disabled { opacity: 0.45; cursor: default; }
.menu-item:disabled:hover { background: transparent; }
.menu-item .notif-badge { position: static; margin-inline-start: auto; }
/* Report is the one destructive action, so it is coloured and set apart. */
.menu-item-danger, .menu-item-danger svg { color: var(--danger); }
.menu-item-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.menu-item-danger:hover svg { color: var(--danger); }
.menu-item-danger:not(.hidden) {
  margin-top: 5px; padding-top: 13px; border-top: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
}

/* Responsive rules for the bar live together further down, in one block, so
   there is a single place that decides how it degrades. */

@media (prefers-reduced-motion: reduce) {
  .brand-mark i, #topDefault .top-sub .online-dot { animation: none; }
  .icon-btn { transition: background 0.2s ease, color 0.2s ease; }
  .icon-btn:hover, .icon-btn:active { transform: none; }
}

/* --- Stage --- */
.chat-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.chat-view { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; min-height: 0; }

/* START */
.chat-start-title { margin: 0 0 6px; font-size: clamp(24px, 6vw, 32px); font-weight: 800; letter-spacing: -0.5px; text-align: center; }
.chat-start-sub { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.chat-start-btn {
  border: none; cursor: pointer; border-radius: 999px; padding: 16px 42px;
  font-size: 17px; font-weight: 700; color: #fff; background: var(--accent);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.chat-start-btn:hover { opacity: 0.92; }
.chat-start-btn:active { transform: scale(0.96); }

/* SEARCHING: the official logo, gently breathing, with a couple of quiet
   ripples radiating out from it. No orbits, no sparks — calm. */
.search-scene { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.cs-beacon {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  animation: csBreathe 2.6s ease-in-out infinite;
}
.cs-beacon img { display: block; width: 76px; height: 76px; border-radius: 20px; }
@keyframes csBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.cs-halo {
  position: absolute; inset: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 24px;
  border: 2px solid var(--accent); opacity: 0; animation: csHalo 2.6s ease-out infinite;
}
.cs-halo.h2 { animation-delay: 1.3s; }
@keyframes csHalo { 0% { transform: scale(0.75); opacity: 0.6; } 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-halo, .cs-beacon { animation: none; }
}
.search-line { margin: 24px 0 0; font-size: 15px; font-weight: 600; text-align: center; min-height: 22px; }
.search-note { margin: 10px 0 0; font-size: 13px; color: var(--danger); min-height: 16px; }
.search-cancel {
  margin-top: 18px; background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 10px 24px; font-size: 13.5px; cursor: pointer; min-height: 40px;
}

/* LIVE: just the messages. Who you're talking to lives in the top bar. */
.chat-view-live { justify-content: flex-start; align-items: stretch; padding: 0; min-height: 0; }
.msgs {
  flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 4px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.msg {
  max-width: min(78%, 480px); padding: 9px 13px; border-radius: 17px;
  font-size: 15px; line-height: 1.35; overflow-wrap: anywhere;
  animation: msgIn 0.15s ease both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.them { align-self: flex-start; background: var(--bubble-them); color: var(--text); border-bottom-left-radius: 5px; }
.msg.system { align-self: center; margin: 4px auto; max-width: 92%; background: none; color: var(--muted); font-size: 12.5px; text-align: center; padding: 0 8px; }
.msg.system.system-warn { color: var(--danger); font-weight: 600; }
.typing { flex: 0 0 auto; margin: 0; padding: 2px 16px 6px; font-size: 12.5px; color: var(--muted); }
.typing-dots span { animation: typingDot 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Composer: Next · input · send. One row, big targets, no noise. */
.composer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--bg-2);
}
.next-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 16px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--muted); background: transparent;
  transition: transform 0.12s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.next-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.next-btn:active { transform: scale(0.94); }
.next-kbd { display: none; } /* touch/phone: no keyboard, so no Esc hint */
.next-btn.confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
#msgInput, #friendChatInput {
  flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-1); color: var(--text); padding: 0 16px; font-size: 16px; outline: none;
  transition: border-color 0.15s ease;
}
#msgInput:focus, #friendChatInput:focus { border-color: var(--accent); }
#msgInput:disabled { opacity: 0.5; }
.send-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, opacity 0.15s ease;
}
.send-btn svg { width: 20px; height: 20px; margin-left: 2px; }
.send-btn:hover { opacity: 0.92; }
.send-btn:active { transform: scale(0.9); }

/* --- The top bar on smaller screens --------------------------------------
   Connected, the bar carries up to six controls plus a partner name that can
   run to "ElectricPanther45". Rather than shrink everything at once, it sheds
   in stages: first the wordmark, then the label text, then size. --- */
@media (max-width: 700px) {
  /* Connected, the partner's name takes the room the wordmark was using. */
  .topbar.connected .brand { display: none; }
}
@media (max-width: 480px) {
  .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .brand-text { display: none; }
  .top-lead { gap: 6px; }
  .top-sub { font-size: 11.5px; }
  /* Controls keep their full size here on purpose. With three of them in the
     bar there is room, and shrinking tap targets on the smallest screens is
     backwards — that is where they need to be easiest to hit. */
}

/* Very narrow phones: tighten the composer so all three controls fit. The
   top bar needs nothing here — it carries three controls at any width. */
@media (max-width: 360px) {
  .next-btn { padding: 0 12px; }
  .next-btn span { display: none; } /* icon-only Next */
}

/* Blocked / maintenance full screen */
.chat-blocked-full { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 8px; }
.chat-blocked-full h1 { margin: 0; font-size: 22px; }
.chat-blocked-full p { margin: 0; color: var(--muted); max-width: 360px; }

/* --- Modals --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(5, 7, 15, 0.65);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal-box {
  width: 100%; max-width: 400px; max-height: 85vh; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4); overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -10px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 20px 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.hint { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.btn { border: none; cursor: pointer; font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: 999px; transition: transform 0.15s ease, opacity 0.15s ease; display: inline-flex; align-items: center; justify-content: center; }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--accent-soft); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; margin-top: 8px; }

/* Report reasons */
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.report-reason { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.report-reason:hover { border-color: var(--danger); }
.report-reason:active { transform: scale(0.96); }
.report-reason.selected { background: var(--danger); border-color: var(--danger); color: #fff; }
.field-label { display: block; margin: 6px 0 6px; font-size: 13px; color: var(--muted); }
.textarea {
  width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 44px; outline: none;
}
.textarea:focus { border-color: var(--accent); }
.friend-to { margin: 0 0 12px; font-size: 14.5px; }

/* Consent gate */
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.consent-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.consent-links a { color: var(--accent); }

/* ============================================================================
   Nav features shared with the call app: settings + friends side panels,
   badges, pills, toggles. Mobile-first; panels are full-height sheets that
   slide in from the side.
   ========================================================================== */
.icon-btn { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; padding: 0 4px;
  text-align: center; pointer-events: none;
}
.msg .flag-icon, .top-sub .flag-icon { border-radius: 3px; vertical-align: -2px; display: inline-block; }
.msg.system .flag-icon { margin-left: 4px; }

.side-overlay {
  position: fixed; inset: 0; background: rgba(5, 7, 15, 0.55); z-index: 110;
  opacity: 1; transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.side-overlay.hidden { display: block !important; opacity: 0; pointer-events: none; }
.side-panel {
  position: fixed; top: 0; bottom: 0; width: min(360px, 92vw); z-index: 120;
  background: var(--bg-2); display: flex; flex-direction: column;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
  visibility: hidden;
}
.side-left { left: 0; border-right: 1px solid var(--line); transform: translateX(-104%); }
.side-right { right: 0; border-left: 1px solid var(--line); transform: translateX(104%); }
.side-panel.open { transform: translateX(0); visibility: visible; }
.side-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.side-header h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.side-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }

/* Settings controls */
.name-row { display: flex; gap: 8px; margin-bottom: 6px; }
.text-input {
  flex: 1 1 auto; min-width: 0; min-height: 42px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--text);
  padding: 0 12px; font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color 0.15s ease;
}
.text-input:focus { border-color: var(--accent); }
.select-input { width: 100%; appearance: auto; }
.side-body .field-label { margin: 16px 0 8px; font-weight: 600; color: var(--muted); }
.side-body .field-label:first-child { margin-top: 0; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.pill:active { transform: scale(0.95); }
.pill.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* Friends panel */
.requests-list:not(:empty) { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.request-row, .friend-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px;
  border-radius: 12px; transition: background 0.15s ease;
}
.friend-row:hover, .request-row:hover { background: var(--accent-soft); }
.friend-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; flex: none; text-transform: uppercase;
}
.friend-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.friend-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-name .flag-icon { border-radius: 3px; vertical-align: -2px; margin-left: 5px; }
.friend-status { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.friend-status .online-dot { width: 6px; height: 6px; }
.friend-status.is-offline .online-dot { background: var(--muted); opacity: 0.5; }
.friend-actions { display: inline-flex; gap: 6px; flex: none; }
.mini-btn {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.mini-btn:active { transform: scale(0.92); }
.mini-btn.accept { color: #fff; background: var(--green); border-color: var(--green); }
.mini-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.mini-btn .notif-badge { top: -5px; right: -5px; }
.request-note { font-size: 12px; color: var(--muted); margin: 2px 0 0; overflow-wrap: anywhere; }
.list-empty { color: var(--muted); font-size: 13.5px; text-align: center; margin: 18px 0; }
.side-hint { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 0 0 12px; }

/* Friend chat panel */
.friend-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.friend-chat-msgs { padding-bottom: 12px; }
.friend-chat-composer { border-top: 1px solid var(--line); }

/* ============================================================================
   DESKTOP (≥900px): the phone layout stays exactly as-is below this line.
   On big screens the app floats as a rounded glass card over an ambient,
   slowly-drifting aurora backdrop, with richer hover/motion polish.
   ========================================================================== */
@media (min-width: 900px) {
  body {
    background:
      radial-gradient(60vw 60vh at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
      radial-gradient(50vw 55vh at 88% 90%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
      var(--bg-1);
  }
  body::before, body::after {
    content: ""; position: fixed; z-index: 0; border-radius: 50%;
    filter: blur(90px); opacity: 0.35; pointer-events: none;
    animation: auroraDrift 26s ease-in-out infinite alternate;
  }
  body::before {
    width: 44vw; height: 44vw; top: -18vw; left: -14vw;
    background: radial-gradient(circle, var(--accent), transparent 70%);
  }
  body::after {
    width: 38vw; height: 38vw; bottom: -16vw; right: -12vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #7bdcff), transparent 70%);
    animation-delay: -13s; animation-direction: alternate-reverse;
  }
  @keyframes auroraDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 4vh, 0) scale(1.15); }
  }

  .app {
    position: relative; z-index: 1;
    max-width: 900px;
    height: calc(100dvh - 56px);
    margin: 28px auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-1) 88%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
    animation: appRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes appRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

  .topbar { min-height: 64px; padding: 10px 18px; gap: 14px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
  .brand-text { font-size: 19px; }
  /* Hover stays borderless here — the base rules already carry the tint and
     the lift, and re-introducing outlines on hover alone made the controls
     jump between two different shapes. */
  .icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
  .report-btn:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
  .call-btn:hover { color: #fff; }
  .icon-btn, .pill, .btn, .next-btn, .send-btn, .chat-start-btn { will-change: transform; }

  /* START view: a real desktop hero */
  .chat-start-title { font-size: 42px; letter-spacing: -1.2px; animation: heroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
  .chat-start-sub { font-size: 16px; animation: heroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
  .chat-start-btn {
    padding: 18px 54px; font-size: 18px;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 45%, transparent);
    animation: heroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, opacity 0.15s ease;
  }
  .chat-start-btn:hover { transform: translateY(-2px) scale(1.03); opacity: 1; box-shadow: 0 16px 44px color-mix(in srgb, var(--accent) 60%, transparent); }
  .chat-start-btn:active { transform: scale(0.97); }
  @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  /* SEARCHING */
  .search-scene { width: 190px; height: 190px; }
  .cs-beacon img { width: 92px; height: 92px; }
  .cs-halo { width: 102px; height: 102px; margin: -51px 0 0 -51px; }
  .search-line { font-size: 17px; }
  .search-cancel:hover { color: var(--text); border-color: var(--accent); }

  /* LIVE: roomier bubbles, smoother entrance, custom scrollbar */
  .msgs { padding: 20px 26px 10px; gap: 6px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
  .msgs::-webkit-scrollbar { width: 8px; }
  .msgs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 8px; }
  .msg { font-size: 15.5px; padding: 10px 15px; animation: msgInDesk 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .msg.me { transform-origin: bottom right; }
  .msg.them { transform-origin: bottom left; }
  @keyframes msgInDesk { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

  .composer { padding: 12px 18px 14px; gap: 10px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
  #msgInput { min-height: 48px; font-size: 15px; padding: 0 18px; transition: border-color 0.15s ease, box-shadow 0.2s ease; }
  #msgInput:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  .next-btn { min-height: 48px; }
  /* Desktop-only hint that Esc jumps to the next stranger. */
  .next-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
    letter-spacing: 0.03em; color: var(--muted); padding: 3px 5px; margin-left: 1px;
    border: 1px solid var(--line); border-radius: 5px; background: var(--bg-1);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .next-btn:hover .next-kbd { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .next-btn.confirm .next-kbd { display: none; }
  .next-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
  .next-btn.confirm:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
  .send-btn { width: 48px; height: 48px; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease, box-shadow 0.2s ease; }
  .send-btn:hover { transform: scale(1.08); opacity: 1; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent); }
  .send-btn:active { transform: scale(0.92); }

  /* Panels dock inside the floating card look: taller radius + shadow */
  .side-panel { width: 380px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); }
  .side-left { border-radius: 0 22px 22px 0; }
  .side-right { border-radius: 22px 0 0 22px; }

  .modal-box { max-width: 440px; animation: modalPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
  .modal-overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .app, .msg, .modal-box, .chat-start-title, .chat-start-sub, .chat-start-btn { animation: none; }
  .side-panel { transition: none; }
}