/* =========================================================
   styles for /text/index.html ONLY (text chat room).
   Same design tokens/language as the /video/ page, but built
   as a normal document flow (not an absolute video overlay)
   since there's no camera here — just a clean, centered chat
   column that's full-bleed on mobile and a bordered card on
   wider screens.
   ========================================================= */

:root{
  --bg:#0D0E14;
  --surface:#161822;
  --surface-alt:#1E212D;
  --border:#2A2D3B;
  --text:#F4F3F7;
  --muted:#9A97AC;
  --pink:#FF4D7A;
  --pink-dim:#B93A5C;
  --teal:#33E0C2;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Unbounded',sans-serif; line-height:1.15; margin:0; font-weight:600;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;
}
/* HARD safety net: an author stylesheet's `display` rule normally beats the
   browser's built-in `[hidden]{display:none}` rule even without !important,
   which is exactly what silently broke the typing indicator and the
   Start/Next toggle earlier. This makes `hidden` win, always. */
[hidden]{display:none !important;}
/* iOS/Android sometimes paint native chrome (extra padding, a grey
   background, a border) on <button> before author styles fully apply,
   which is likely what looked like "broken CSS" on the Filters button on
   some phones. Reset that explicitly instead of relying on each button
   class to out-specificity it. */
button{-webkit-appearance:none; appearance:none; margin:0;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

.btn-primary{
  background:var(--pink); color:#fff; font-weight:600; font-size:16px; padding:16px 30px;
  border-radius:999px; border:none; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(255,77,122,0.55);
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{background:#ff6690; transform:translateY(-1px);}

/* ===================== PAGE SHELL ===================== */
/* Full page on EVERY device — phone, tablet, desktop. No side margins, no
   bordered "card" look, no centering. The shell always fills the entire
   viewport exactly, so there is nothing that can create horizontal scroll. */
html, body{overflow-x:hidden; background:var(--bg);}
body.text-page{
  height:100vh; height:100dvh; height:var(--app-vh, 100vh); /* --app-vh is set by JS from window.innerHeight — see the script — so this tracks the REAL visible area even when a mobile browser's address bar shows/hides or a keyboard opens */
  overflow:hidden; margin:0; width:100%; background:var(--bg);
}
.tc-shell{
  position:relative; display:flex; flex-direction:column;
  height:100%; width:100%; max-width:100%;
  background:var(--bg); overflow:hidden;
}

/* ---- top bar ----
   The bar itself (background/border) always spans the full width — that's
   what keeps the page "full page" with zero side margins. Only the actual
   controls live inside .tc-topbar-inner, which gets centered with a
   comfortable max-width on wide screens (see the min-width:960px block
   below) so buttons don't end up scattered across a 1920px-wide bar. On
   phones/tablets .tc-topbar-inner is just 100% wide, so nothing changes
   there. */
.tc-topbar{
  flex:none; border-bottom:1px solid var(--border); background:var(--surface);
  position:relative; z-index:20;
}
.tc-topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; min-width:0; width:100%;
}
.tc-exit{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:none;
  color:#fff; background:rgba(255,255,255,0.08); border:1px solid var(--border);
}
.tc-exit:hover{background:rgba(255,255,255,0.16);}
.tc-brand{
  display:flex; align-items:center; gap:8px;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; color:#fff;
  white-space:nowrap; flex:none;
}
.tc-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(51,224,194,0.22);}
.tc-report-btn{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,77,122,0.16); border:1px solid rgba(255,77,122,0.4);
  color:#ff6690; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:999px; cursor:pointer;
}
.tc-report-btn:hover{background:rgba(255,77,122,0.3); color:#fff;}
.tc-report-btn svg{width:15px; height:15px;}

/* A trigger button + its dropdown panel share this wrapper so the panel is
   always anchored to (and clamped by) its own button — it can never drift
   over another control or off the edge of the screen, at any width. */
.tc-anchor{position:relative; flex:none; min-width:0;}

/* ---- second row: Filters (left) + status pill (right) — plain flex row,
   nothing floating/absolute here, so there is nothing to overlap ---- */
.tc-toolbar{
  flex:none; border-bottom:1px solid var(--border); background:var(--surface);
}
.tc-toolbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; min-width:0; width:100%;
}

/* ---- consolidated Filters launcher + panel ---- */
.options-btn{
  display:flex; align-items:center; gap:7px;
  background:var(--surface-alt); border:1px solid var(--border);
  color:#fff; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.options-btn svg{width:15px; height:15px;}
.options-btn:hover{border-color:#3c4055;}
.options-panel{
  position:absolute; left:0; top:calc(100% + 8px); z-index:25;
  width:220px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px; display:none; flex-direction:column; gap:14px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.6);
}
.options-panel.show{display:flex;}
.options-section label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;}
.options-section .filter-select{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:9px 10px; font-size:13.5px; font-family:'Inter',sans-serif;
}
.options-section .filter-select option{color:#0D0E14;}

/* ---- report panel: anchored under the Report button (top-right of the
   topbar wrapper), opens list view then reason view ---- */
.report-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:26;
  width:260px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px; display:none; flex-direction:column; gap:10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.6);
}
.report-panel.show{display:flex;}
.report-panel-head{display:flex; align-items:center; justify-content:space-between;}
.report-panel-head h4{font-family:'Unbounded',sans-serif; font-size:13.5px; color:var(--text); margin:0;}
.report-panel-head button{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;}
.report-list{display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto;}
.report-row{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-alt); border:1px solid var(--border); color:var(--text);
  font-size:12.5px; padding:9px 11px; border-radius:10px; cursor:pointer; text-align:left; width:100%;
}
.report-row:hover{border-color:var(--pink); color:#ff6690;}
.report-row-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.report-row-id{font-weight:600; color:var(--text); font-size:12.5px;}
.report-row-sub{color:var(--muted); font-size:11px;}
.report-reason-row{font-weight:500;}
.report-back{background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; text-align:left; padding:6px 2px 0;}
.report-back:hover{color:var(--text);}
.report-empty{color:var(--muted); font-size:12.5px; text-align:center; padding:10px 0; margin:0;}

/* ---- status pill ---- */
.tc-status{
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:6px 12px; font-size:12.5px; color:var(--muted);
  background:var(--surface-alt); border:1px solid var(--border); border-radius:999px;
  overflow:hidden;
}
.tc-status span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tc-status-dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none;}
.tc-status-dot.searching{background:var(--teal); animation:pulse 1.2s ease-in-out infinite;}
.tc-status-dot.connected{background:#3ee08a; box-shadow:0 0 0 3px rgba(62,224,138,0.2);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,224,194,0.5);} 50%{box-shadow:0 0 0 6px rgba(51,224,194,0);}}

/* ---- main chat log ---- */
.tc-main{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg);}
.tc-log{flex:1; min-height:0; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px;}
.tc-empty{margin:auto; text-align:center; max-width:32ch; display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px;}
.tc-empty-glyph{
  width:60px; height:60px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pink-dim), #6B2FA8 140%); color:#fff;
}
.tc-empty-glyph svg{width:26px; height:26px;}
.tc-empty h3{font-size:17px; color:var(--text);}
.tc-empty p{color:var(--muted); font-size:13.5px;}
.tos-reminder{font-size:11.5px !important; color:var(--muted); max-width:36ch;}
.tos-reminder a{color:var(--teal); text-decoration:underline;}

/* big, obviously-alive "searching" state — replaces the passive status
   pill as the primary feedback when Start/Next is pressed */
.tc-searching{
  margin:auto; text-align:center; max-width:32ch;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px;
}
.tc-searching h3{font-size:17px; color:var(--text);}
.tc-searching p{color:var(--muted); font-size:13.5px;}
.tc-search-loader{display:flex; gap:8px;}
.tc-search-loader span{
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--pink), #7A3CFF);
  animation:searchBounce 1s ease-in-out infinite;
}
.tc-search-loader span:nth-child(2){animation-delay:0.15s;}
.tc-search-loader span:nth-child(3){animation-delay:0.3s;}
@keyframes searchBounce{
  0%,60%,100%{transform:translateY(0) scale(1); opacity:0.6;}
  30%{transform:translateY(-10px) scale(1.1); opacity:1;}
}
/* the rotating headline inside the searching card ("Looking for a
   stranger…" / "Uhmingle" / etc.) — cross-fades on change instead of
   snapping, so it doesn't feel like a jittery repeat every second */
.tc-searching-msg{min-height:22px; transition:opacity .25s ease;}
/* Uhmingle name — ALWAYS pinned at the bottom of the searching card,
   independent of whatever the rotating headline above is currently
   showing */
.tc-searching-brand{
  margin-top:4px; display:flex; align-items:center; gap:7px;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:12.5px;
  color:var(--muted); letter-spacing:0.02em;
}
.tc-searching-brand .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(51,224,194,0.18);}

.tc-msg{max-width:78%; padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.45; word-wrap:break-word; animation:msgIn .22s ease-out both;}
@keyframes msgIn{
  from{opacity:0; transform:translateY(8px) scale(0.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.tc-msg.sent{align-self:flex-end; background:linear-gradient(100deg, var(--pink), #7A3CFF); color:#fff; border-bottom-right-radius:4px; transform-origin:bottom right;}
.tc-msg.received{align-self:flex-start; background:var(--surface-alt); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; transform-origin:bottom left;}
.tc-msg.system{align-self:center; color:var(--muted); font-size:12px; background:none; padding:4px 0; max-width:90%; text-align:center;}

.tc-typing{
  flex:none; display:flex; align-items:center; gap:6px; padding:0 16px 10px; color:var(--muted); font-size:12.5px;
}
.tc-typing[hidden]{display:none;} /* the browser's default [hidden]{display:none} was being overridden by the rule above — this is what actually made "Stranger is typing…" show even before you were connected to anyone */
.tc-typing:not([hidden]){animation:typingFadeIn .18s ease-out both;}
@keyframes typingFadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.tc-typing-dot{width:5px; height:5px; border-radius:50%; background:var(--muted); animation:typingBounce 1.1s ease-in-out infinite;}
.tc-typing-dot:nth-child(2){animation-delay:0.15s;}
.tc-typing-dot:nth-child(3){animation-delay:0.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0); opacity:0.5;} 30%{transform:translateY(-3px); opacity:1;}}

/* ---- composer ---- */
.tc-composer{
  flex:none; border-top:1px solid var(--border); background:var(--surface);
}
.tc-composer-inner{
  display:flex; gap:10px; padding:12px 14px; width:100%;
}
.tc-composer input{
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:999px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px; padding:12px 18px;
}
.tc-composer input:disabled{opacity:0.5;}
.tc-composer button{
  background:var(--pink); color:#fff; border:none; border-radius:999px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.tc-composer button:disabled{opacity:0.4; cursor:not-allowed;}
.tc-composer button svg{width:17px; height:17px;}

/* ---- action bar: Start / Next / Stop ---- */
.tc-actionbar{
  flex:none; border-top:1px solid var(--border); background:var(--surface);
}
.tc-actionbar-inner{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.control-btn{
  display:flex; align-items:center; gap:7px; border:none; border-radius:999px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; padding:12px 22px; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.control-btn[hidden]{display:none;} /* same fix as .tc-typing above — without this, startBtn/nextBtn ignored their .hidden toggle and both showed at once */
.control-btn:active{transform:scale(0.97);}
.control-btn:disabled{opacity:0.35; cursor:not-allowed;}
.control-btn svg{width:15px; height:15px;}
.control-btn.primary{background:linear-gradient(100deg, var(--pink), #7A3CFF); color:#fff; box-shadow:0 10px 22px -10px rgba(255,77,122,0.55);}
.control-btn.accent{background:var(--teal); color:#08201c;}
.control-btn.danger{background:rgba(255,255,255,0.06); border:1px solid var(--border); color:#fff;}
.control-btn.danger:hover{border-color:#ff6690; color:#ff6690;}

/* ---- first-visit terms overlay ---- */
.tos-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(9,10,15,0.92);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.tos-overlay.show{display:flex;}
.tos-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; max-width:420px; width:100%;
}
.tos-card h3{font-family:'Unbounded',sans-serif; font-size:19px; margin-bottom:16px; color:var(--text);}
.tos-card ul{list-style:disc; padding-left:20px; color:var(--muted); font-size:13.5px; display:flex; flex-direction:column; gap:8px;}
.tos-card .tos-fullink{margin-top:16px; font-size:12.5px; color:var(--muted);}
.tos-card .tos-fullink a{color:var(--teal);}
.tos-card .btn-primary{width:100%; margin-top:20px; text-align:center;}

/* ---- toast ---- */
.call-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:12px 20px; border-radius:999px; font-size:13.5px; z-index:600;
  opacity:0; transition:all .25s ease; pointer-events:none; box-shadow:0 12px 28px -12px rgba(0,0,0,0.5);
}
.call-toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---- responsive tweaks ---- */
@media (max-width:480px){
  .tc-topbar-inner, .tc-toolbar-inner{padding-left:12px; padding-right:12px;}
  .tc-brand{font-size:14.5px;}
  .tc-report-btn{padding:7px 11px; font-size:11.5px;}
  .options-btn{padding:7px 12px; font-size:11.5px;}
  .tc-msg{max-width:86%; font-size:14px;}
  .control-btn{padding:10px 16px; font-size:12.5px;}
}

/* ---- wide desktop ----
   The chat log stays FULL-BLEED here, same as mobile — no side gutters, no
   empty space, messages use the entire width of the window. What changes
   on desktop is everything AROUND the log: the topbar/filters row get more
   breathing room and the Filters panel becomes a proper wide dropdown with
   its three selects laid out side-by-side instead of the stacked mobile
   version. Phones and tablets are completely untouched by this block. ---- */
@media (min-width:960px){
  .tc-topbar-inner, .tc-toolbar-inner{
    padding-left:32px; padding-right:32px;
  }
  .tc-composer-inner, .tc-actionbar-inner{
    padding-left:32px; padding-right:32px;
  }
  .tc-log{
    padding-left:48px; padding-right:48px; padding-top:24px; gap:14px;
  }
  .tc-brand{font-size:17px;}
  .tc-report-btn{padding:9px 16px; font-size:13px;}
  .options-btn{padding:9px 16px; font-size:13px;}

  /* messages: cap the bubble width in absolute px (not %) so a single
     short line doesn't stretch edge-to-edge on a 1920px screen, while
     still letting the surrounding log fill the whole page */
  .tc-msg{max-width:520px; font-size:15px;}
  .tc-empty, .tc-searching{max-width:38ch;}

  /* redesigned desktop Filters panel: wider, three columns in a row
     instead of the mobile single-column stack */
  .options-panel{
    width:420px; flex-direction:row; flex-wrap:wrap; gap:16px 14px; padding:18px;
  }
  .options-section{flex:1 1 120px; min-width:120px;}

  /* redesigned desktop Report panel: a bit roomier */
  .report-panel{width:320px; padding:16px;}
}