/* =========================================
   iCallU — Production CSS (cleaned)
   - No duplicate blocks
   - PiP reliably stays above main video
   - Fullscreen & Immersive (iOS) parity
   ========================================= */

/* ---------- Theme & Base ---------- */
:root {
  --bg:#0b0e12; --fg:#e9eef5; --muted:#94a3b8; --accent:#60a5fa; --card:#111827; --danger:#ef4444;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --call-banner-h: 44px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; color:var(--fg); background:var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}
a { color: var(--accent); text-decoration: none; }

.container { max-width: 1100px; margin:0 auto; padding: 1rem; }
.row { display:flex; gap:.5rem; align-items:center; }
.row.between { justify-content: space-between; }
.row.gap { gap:.5rem; }
.gap { gap:1rem; }

.brand { font-weight:700; font-size: 1.2rem; }
.site-header {
  position: sticky; top: 0; z-index: 9999;
  background: #0a0f1a; border-bottom: 1px solid #1f2937;
  padding-top: var(--safe-top); padding-left: var(--safe-left); padding-right: var(--safe-right);
}

/* ---------- Form & Buttons ---------- */
.card { background: var(--card); padding: 1rem; border: 1px solid #1f2937; border-radius: 12px; }
.list { display:flex; flex-direction: column; gap:.6rem; }
label { display:flex; flex-direction: column; gap:.25rem; font-size:.95rem; }
input, button, textarea { font: inherit; }
input, textarea { background:#0b1220; border:1px solid #1f2937; color:var(--fg); padding:.6rem .7rem; border-radius:10px; outline:none; width:100%; }

button { background: var(--accent); color:#000; border:none; padding:.65rem 1rem; border-radius:10px; cursor:pointer; }
button.secondary { background:#1f2937; color:#e5e7eb; }
button.link { background:transparent; color:var(--accent); }
button.danger { color:#fff; background:var(--danger); }

a.button { display:inline-block; background:var(--accent); color:#000; padding:.65rem 1rem; border-radius:10px; text-decoration:none; }
a.button.secondary { background:#1f2937; color:#e5e7eb; }
a.button.danger { background:var(--danger); color:#fff; }
a.button:hover { filter:brightness(1.05); }

/* === Legacy button class aliases (compat with existing markup) === */
.btn { 
  background: var(--accent); color:#000; border:none;
  padding:.65rem 1rem; border-radius:10px; cursor:pointer; font:inherit;
}
a.btn { display:inline-block; text-decoration:none; }

.btn-blue { background: var(--accent); color:#000; }
.btn-secondary, .btn-gray, .btn-grey { background:#1f2937; color:#e5e7eb; }
.btn-danger, .btn-red { background: var(--danger); color:#fff; }
.btn-link { background: transparent; color: var(--accent); }

.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity:.6; pointer-events:none; }



.error { background:#4b1c1c; color:#fecaca; padding:.5rem .75rem; border-radius:10px; }
.banner { background:#0b1220; border:1px dashed #334155; padding:.5rem .75rem; border-radius:10px; }
.hidden { display:none !important; }

code.wrap {
  display:block; max-width:100%; white-space:normal;
  overflow-wrap:anywhere; word-break:break-word; word-wrap:break-word; line-break:anywhere;
  padding:.35rem .5rem; background:#0b1220; border:1px solid #1f2937; border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---------- Presence ---------- */
.presence-bar { display:flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid #1f2937; border-radius:12px; padding:.5rem .75rem; margin-bottom:1rem; }
.presence-name { display:inline-flex; align-items:center; gap:.35rem; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#64748b; }
.status-dot.online { background:#22c55e; }
.name-text { font-weight:600; }
.presence-icon svg { display:block; opacity:.9; }
.lock-icon { display:inline-flex; vertical-align:middle; margin-left:.5rem; opacity:.55; color:#94a3b8; }
.lock-icon.ok { opacity:1; color:#10b981; }

/* ---------- Chat ---------- */
.chat-log { background:#0b1220; border:1px solid #1f2937; height:320px; border-radius:10px; overflow:auto; padding:.5rem; }
.msg { margin:.25rem 0; }
.msg .who { color:#93c5fd; font-weight:600; }
.msg .time { color:var(--muted); font-size:.85rem; margin-left:.35rem; }

/* ---------- Lobby Layout ---------- */
.lobby-grid { display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:1024px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; gap:1rem; align-items:stretch; }
  .lobby-grid > .card { display:flex; flex-direction:column; height:100%; }
  .lobby-grid .videobox { flex:1; min-height:260px; }
  .lobby-grid .chat-log { flex:1; height:auto !important; min-height:260px; }
  .lobby-grid .card .row:last-of-type { margin-top:.5rem; }
  .lobby-grid > .card #chatLog.chat-log { flex:0 0 auto !important; height:320px !important; max-height:320px !important; overflow-y:auto !important; min-height:0 !important; }
}
.lobby-grid .videobox { min-height:200px; }
.lobby-grid .chat-log { height:180px; }

@media (max-width:800px) {
  .site-header .container.row, .site-header nav.row { flex-direction:row; align-items:center; flex-wrap:nowrap; gap:.5rem; }
  .site-header .brand { white-space:nowrap; }
  .site-header nav form, .site-header nav a.button, .site-header nav button { white-space:nowrap; }
}

/* ---------- Call Bar & Controls ---------- */
.callbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:nowrap; margin-top:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.callbar .call-cta { display:inline-flex; gap:.5rem; flex:0 0 auto; }
.controls-row { display:inline-flex; gap:.5rem; flex:0 0 auto; flex-wrap:nowrap; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.icon-btn, .button.icon-btn, .btn.icon-btn  { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:10px; }
.icon-btn svg, .button.icon-btn svg, .btn.icon-btn svg { width:20px; height:20px; }
.icon-btn[aria-pressed="true"],
.button.icon-btn[aria-pressed="true"],
.btn.icon-btn[aria-pressed="true"] {
  filter: brightness(1.1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.button.icon-btn[aria-pressed="true"] { background:#1f2937; color:#e5e7eb; }
.button.icon-btn::after, .btn.icon-btn::after { content:""; position:absolute; left:50%; top:50%; width:24px; height:2px; background:var(--danger); border-radius:2px; transform:translate(-50%,-50%) rotate(-45deg); opacity:0; transition:opacity .15s ease; pointer-events:none; }
.button.icon-btn[aria-pressed="true"]::after { opacity:1; }

@media (max-width:767px) {
  .callbar { flex-wrap:wrap; justify-content:flex-start; }
  .callbar .call-cta { order:1; flex:1 1 100%; }
  .callbar .controls-row { order:2; flex:1 1 100%; margin-left:0; justify-content:flex-start; }
}
@media (min-width:768px) and (max-width:1023.98px) {
  .callbar { flex-wrap:wrap; justify-content:flex-start; gap:.5rem; }
  .callbar .call-cta, .callbar .controls-row { width:100%; margin-left:0; }
  .callbar .controls-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(64px,1fr)); gap:.5rem; overflow:visible; justify-items:stretch; align-items:stretch; flex:1 1 auto; }
  .callbar .controls-row .icon-btn { width:100%; height:44px; }
}

/* ---------- Video Area (stage + PiP) ---------- */
.videobox {
  position:relative; width:100%;
  height: clamp(220px, 45vh, 520px);
  background:#000; border-radius:12px; overflow:hidden;
  display:grid; place-items:center;
}

/* 16:9 stage anchored inside videobox */
.videobox .stage {
  aspect-ratio: 16 / 9; width:100%; height:auto; max-width:100%; max-height:100%;
  background:#000; position:relative;
}

/* Main video fills stage; base stacking */
.videobox .stage > video {
  width:100%; height:100%; object-fit:contain; object-position:center; background:#000;
  position:relative; z-index:1; /* base layer */
}

/* PiP thumbnail always above main */
.videobox .stage > video.pip {
  position:absolute; right:12px; bottom:12px;
  width:24%; max-width:220px; max-height:30%; height:auto;
  object-fit:cover; border:2px solid rgba(255,255,255,0.2); border-radius:10px;
  z-index:5; cursor:pointer;
}

/* Mobile PiP tweaks */
@media (max-width:767px) {
  .videobox { height:auto !important; }
  .lobby-grid .videobox { min-height:0 !important; }
  .videobox .stage > video.pip { width:28%; max-width:160px; max-height:28%; right:8px; bottom:8px; }
}

/* Android-specific (non-fullscreen) PiP size */
body.is-android .videobox .stage > video.pip { width:18% !important; max-width:120px !important; max-height:22% !important; }
@media (max-width:767.98px) {
  body.is-android .videobox .stage > video.pip { width:26% !important; max-width:300px !important; max-height:20% !important; right:8px; bottom:8px; }
}
@media (orientation: landscape) {
  body.is-android .videobox .stage > video.pip { height:18vh !important; width:auto !important; aspect-ratio:16/9; }
}

/* ---------- Overlay banner over video (non-blocking) ---------- */
.overlay-banner {
  position:absolute; left:12px; right:12px; z-index:5;
  background: rgba(11,18,32,0.85); border:1px solid #334155; border-radius:10px;
  padding:.5rem .75rem; backdrop-filter: blur(6px);
  pointer-events:none; transition: opacity .18s ease, transform .18s ease;
}
.overlay-banner.top { top:12px; }
.overlay-banner.bottom { bottom:12px; }
.overlay-banner.call-notice { margin:0; }
.overlay-banner.hidden { display:block !important; opacity:0; transform: translateY(-4px); }
.overlay-banner:not(.hidden) { opacity:1; transform:none; }

/* Call banner in Call card — reserve height, fade only */
.card.tight > #callBanner { display:block; width:100%; box-sizing:border-box; min-height:var(--call-banner-h); transition:opacity .18s ease; }
.card.tight > #callBanner.hidden { display:block !important; opacity:0; visibility:hidden; pointer-events:none; }
.lobby-grid > .card #callBanner,
.card.tight > #callBanner { width:100%; max-width:none; align-self:stretch; margin-left:0; margin-right:0; }
.lobby-grid > .card { align-items:stretch; }
@media (min-width:768px) { .lobby-grid > section.card.tight:first-of-type { padding-bottom:.25rem; } }
@media (max-width:767.98px) { #callBanner.call-notice { width:95%; max-width:95%; align-self:center; } }

/* ---------- Native Fullscreen (desktop/tablet) ---------- */
.stage:fullscreen,
.stage:-webkit-full-screen { width:100vw; height:100vh; max-width:none; max-height:none; background:#000; }
.stage:fullscreen > video,
.stage:-webkit-full-screen > video { width:100%; height:100%; object-fit:contain; background:#000; position:relative; z-index:1; }

/* PiP in native fullscreen — bigger & on top */
.stage:fullscreen > video.pip,
.stage:-webkit-full-screen > video.pip,
video:fullscreen.pip,
video:-webkit-full-screen.pip {
  position:absolute; right:2vw; bottom:2vw;
  height:28vh !important; width:auto !important; aspect-ratio:16/9;
  max-width:none !important; max-height:none !important;
  border-width:3px !important; z-index:10 !important; object-fit:cover;
}
@media (min-width:1400px) {
  .stage:fullscreen > video.pip,
  .stage:-webkit-full-screen > video.pip { width: clamp(24vw, 34%, 560px); max-height:46vh; }
}
/* Android smaller PiP in native fullscreen */
body.is-android .stage:fullscreen > video.pip,
body.is-android .stage:-webkit-full-screen > video.pip,
body.is-android video:fullscreen.pip,
body.is-android video:-webkit-full-screen.pip { height:16vh !important; }

/* Keep banner non-blocking in fullscreen */
.stage:fullscreen .overlay-banner,
.stage:-webkit-full-screen .overlay-banner { left:16px; right:16px; bottom:16px; pointer-events:none; }

/* ---------- Immersive Overlay (iOS-friendly fullscreen with PiP) ---------- */
.immersive-root { position:fixed; inset:0; z-index:9999; background:#000; display:grid; grid-template-areas:"stage"; }
.immersive-stage { grid-area:stage; position:relative; width:100vw; height:100vh; overflow:hidden; }

/* When .stage is moved into immersive overlay, mirror stage rules */
.immersive-stage .stage { aspect-ratio:16/9; width:100%; height:100%; max-width:100%; max-height:100%; background:#000; position:relative; }
.immersive-stage .stage > video { width:100%; height:100%; object-fit:contain; object-position:center; background:#000; position:relative; z-index:1; }
.immersive-stage .stage > video.pip { position:absolute; right:12px; bottom:12px; width:24%; max-width:220px; max-height:30%; height:auto; object-fit:cover; border:2px solid rgba(255,255,255,0.2); border-radius:10px; z-index:5; cursor:pointer; }
@media (max-width:767px) {
  .immersive-stage .stage > video.pip { width:28%; max-width:160px; max-height:28%; right:8px; bottom:8px; }
}
/* Android tweaks inside immersive too */
body.is-android .immersive-stage .stage > video.pip { width:18% !important; max-width:120px !important; max-height:22% !important; }
@media (max-width:767.98px) {
  body.is-android .immersive-stage .stage > video.pip { width:26% !important; max-width:300px !important; max-height:20% !important; right:8px; bottom:8px; }
}
@media (orientation:landscape) {
  body.is-android .immersive-stage .stage > video.pip { height:18vh !important; width:auto !important; aspect-ratio:16/9; }
}

/* Immersive exit chip */
.immersive-exit-chip {
  position:absolute; top: calc(var(--safe-top) + 48px); left: calc(var(--safe-left) + 16px);
  padding:10px 16px; border-radius:999px; background: rgba(255,255,255,0.12); color:#fff;
  border:1px solid rgba(255,255,255,0.25); font-size:14px; line-height:1; z-index:10000; backdrop-filter: blur(4px);
  opacity:0; animation: fadeInExit .4s ease-out .4s forwards;
}
@keyframes fadeInExit { to { opacity:1; } }

html.immersive-open, body.immersive-open { overflow:hidden !important; }

/* ---------- Invite / QR ---------- */
.invite-split { display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; }
@media (min-width:920px) { .invite-split { grid-template-columns: 1fr 240px; gap:1.25rem; } }
.invite-right { display:flex; justify-content:center; }
.qr-wrap { background:var(--card); border-radius:10px; padding:.5rem; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.35); }

/* ---------- Footer ---------- */
.lobby-footer { margin-top:.75rem; text-align:center; color:var(--muted); }
.lobby-footer .footer-link { text-decoration:none; color:#93c5fd; font-weight:600; }
.lobby-footer .footer-link:hover { text-decoration:underline; }

/* ---------- Chat (mobile ergonomics) ---------- */
@media (max-width:768px) {
  .chat-panel { position:fixed; left:0; right:0; bottom:0; background:#0f1216; border-top:1px solid rgba(255,255,255,0.08);
    display:grid; grid-template-rows:1fr auto; max-height:45vh; padding-bottom:var(--safe-bottom); z-index:30; }
  #chatLog { overflow-y:auto; padding:10px 12px 6px; scroll-behavior:smooth; }
  .chat-composer { position:sticky; bottom:0; background:inherit; padding: 8px 10px calc(8px + var(--safe-bottom));
    display:flex; gap:8px; align-items:flex-end; }
  .chat-composer textarea { flex:1; resize:none; min-height:44px; max-height:120px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:#12161b; color:#e6e6e6; line-height:1.2; }
  .chat-send { min-width:56px; height:44px; border-radius:12px; font-weight:600; }
  .chat-jump { position:absolute; left:50%; transform:translateX(-50%); bottom: calc(56px + var(--safe-bottom));
    padding:6px 10px; border-radius:999px; font-size:12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,0.12); display:none; z-index:31; }
  .chat-jump.visible { display:inline-flex; }
  .msg { margin:6px 0; max-width:80%; }
  .msg .who { opacity:.7; font-size:12px; display:block; margin-bottom:2px; }
  .msg.me { margin-left:auto; text-align:right; }
  .msg .bubble { display:inline-block; padding:8px 10px; border-radius:14px; background:#1b2430; }
  .msg.me .bubble { background:#18334a; }
  .msg .time { opacity:.5; font-size:11px; margin-left:6px; }
}

@media (max-width:768px) {
  #chatLog .msg .who { display:inline; margin-right:6px; white-space:nowrap; font-size:inherit; font-weight:inherit; }
  #chatLog .msg .time { white-space:nowrap; }
  #chatInput { box-sizing:border-box; height:44px; min-height:44px; max-height:160px; overflow-y:auto; resize:none; -webkit-overflow-scrolling:touch; line-height:1.3; word-break:break-word; }
}

/* Desktop dark scrollbars */
@media (min-width:1024px) {
  #chatLog, #chatInput { scrollbar-width: thin; scrollbar-color:#2f3a49 #0b1220; }
  #chatLog::-webkit-scrollbar, #chatInput::-webkit-scrollbar { width:10px; height:10px; }
  #chatLog::-webkit-scrollbar-track, #chatInput::-webkit-scrollbar-track { background:#0b1220; }
  #chatLog::-webkit-scrollbar-thumb, #chatInput::-webkit-scrollbar-thumb { background-color:#2f3a49; border-radius:8px; border:2px solid #0b1220; }
  #chatLog::-webkit-scrollbar-thumb:hover, #chatInput::-webkit-scrollbar-thumb:hover { background-color:#3a4656; }
}


/* ---- HOTFIX: restore normal-sized control buttons & row ---- */

/* Let the controls row actually use the available width */
.callbar .controls-row {
  flex: 1 1 auto;          /* grow to fill remaining space */
  min-width: 320px;        /* avoid the tiny scroll strip */
  overflow-x: auto;        /* still scroll if truly needed */
  -webkit-overflow-scrolling: touch;
}

/* Icon buttons: allow text or icon.
   - If text is present, grow horizontally (no fixed 42px width)
   - If icon-only, min-width keeps the square look */
.icon-btn,
.button.icon-btn,
.btn.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 42px;         /* square when icon-only, expands if text exists */
  padding: 0 .75rem;       /* room for text if present */
  border-radius: 10px;
}

/* Keep SVG size and spacing sane inside icon/text buttons */
.icon-btn svg,
.button.icon-btn svg,
.btn.icon-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-right: .35rem;    /* small gap before text; harmless if no text */
}

/* Legacy .btn styles (so .btn .btn-blue etc. look right) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--accent);
  color: #000;
  border: none;
  padding: .65rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
a.btn { display:inline-flex; text-decoration:none; }

.btn-blue { background: var(--accent); color:#000; }
.btn-secondary, .btn-gray, .btn-grey { background:#1f2937; color:#e5e7eb; }
.btn-danger, .btn-red { background: var(--danger); color:#fff; }
.btn-link { background: transparent; color: var(--accent); }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity:.6; pointer-events:none; }

/* Keep the red “slash” overlay on pressed icon buttons working */
.button.icon-btn::after,
.btn.icon-btn::after {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:24px; height:2px;
  background: var(--danger);
  border-radius:2px;
  transform: translate(-50%,-50%) rotate(-45deg);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events:none;
}
.button.icon-btn[aria-pressed="true"]::after,
.btn.icon-btn[aria-pressed="true"]::after {
  opacity: 1;
}

/* ===== FINAL OVERRIDES: control row & buttons ===== */

/* Restore legacy .btn styles your markup uses (btn, btn-blue, btn-danger, etc.) */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--accent); color:#000; border:none;
  padding:.65rem 1rem; border-radius:10px; cursor:pointer; font:inherit;
}
a.btn{ display:inline-flex; text-decoration:none; }
.btn-blue{ background:var(--accent); color:#000; }
.btn-secondary,.btn-gray,.btn-grey{ background:#1f2937; color:#e5e7eb; }
.btn-danger,.btn-red{ background:var(--danger); color:#fff; }
.btn-link{ background:transparent; color:var(--accent); }
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.6; pointer-events:none; }

/* Let the controls row actually use the space; avoid tiny scroll strip */
.callbar .controls-row{
  display:flex !important;          /* override any grid rules */
  flex:1 1 auto;
  gap:.5rem;
  flex-wrap:wrap;
  overflow-x:visible;
}
@media (max-width: 767.98px){
  .callbar .controls-row{ overflow-x:auto; }  /* allow scroll only on narrow phones */
}

/* Icon buttons that include text: grow horizontally instead of 42px squares */
.callbar .controls-row .icon-btn,
.callbar .controls-row .button.icon-btn,
.callbar .controls-row .btn.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  height:42px;
  width:auto !important;            /* kill fixed 42px / 100% width from earlier blocks */
  min-width:44px;
  padding:0 .75rem;                 /* room for label */
  border-radius:10px;
  white-space:nowrap;               /* keep “Stop Video” on one line */
}

/* Keep SVG tidy next to the text */
.callbar .controls-row .icon-btn svg,
.callbar .controls-row .button.icon-btn svg,
.callbar .controls-row .btn.icon-btn svg{
  width:20px; height:20px; flex:0 0 auto; margin-right:.4rem;
}

/* Preserve the red slash overlay when pressed */
.callbar .controls-row .button.icon-btn::after,
.callbar .controls-row .btn.icon-btn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:24px; height:2px; background:var(--danger);
  border-radius:2px; transform:translate(-50%,-50%) rotate(-45deg);
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.callbar .controls-row .button.icon-btn[aria-pressed="true"]::after,
.callbar .controls-row .btn.icon-btn[aria-pressed="true"]::after{ opacity:1; }

/* ===== FINAL BUTTON & CONTROLS OVERRIDES (safe to append) ===== */

/* Legacy .btn aliases (so old markup keeps working) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--accent); color:#000; border:none;
  padding:.65rem 1rem; border-radius:10px; cursor:pointer; font:inherit;
}
a.btn{ display:inline-flex; text-decoration:none; }
.btn-blue{ background:var(--accent); color:#000; }
.btn-secondary,.btn-gray,.btn-grey{ background:#1f2937; color:#e5e7eb; }
.btn-danger,.btn-red{ background:var(--danger); color:#fff; }
.btn-link{ background:transparent; color:var(--accent); }
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.6; pointer-events:none; }

/* Icon buttons: square when icon-only; expand when label text is present */
.icon-btn, .button.icon-btn, .btn.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; min-width:42px;
  width:auto !important;               /* no forced 42px width */
  padding:0 .75rem;                    /* space for a label if present */
  border-radius:10px; white-space:nowrap;
}
.icon-btn svg, .button.icon-btn svg, .btn.icon-btn svg{
  width:20px; height:20px; flex:0 0 auto; margin-right:.4rem; /* harmless if no text */
}

/* Pressed/toggled visual (works for all icon-btn variants) */
.icon-btn[aria-pressed="true"],
.button.icon-btn[aria-pressed="true"],
.btn.icon-btn[aria-pressed="true"]{
  filter:brightness(1.1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.button.icon-btn::after, .btn.icon-btn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:24px; height:2px; background:var(--danger);
  border-radius:2px; transform:translate(-50%,-50%) rotate(-45deg);
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.button.icon-btn[aria-pressed="true"]::after,
.btn.icon-btn[aria-pressed="true"]::after{ opacity:1; }

/* Controls row: use available space; wrap on small screens */
.callbar .controls-row{
  display:flex !important; gap:.5rem; align-items:center;
  flex:1 1 auto; flex-wrap:wrap; overflow-x:visible;
}
@media (max-width: 767.98px){
  .callbar .controls-row{ overflow-x:auto; } /* scroll only on very narrow phones */
}

/* Buttons with icon + text (Call / Hang up) */
.btn-with-icon{ display:inline-flex; align-items:center; gap:.4rem; }
.btn-with-icon svg{ width:18px; height:18px; }

/* Bring back green call variants */
button.call-wait,
button.call-reply,
a.button.call-wait,
a.button.call-reply{
  background:#10b981 !important;  /* emerald */
  color:#031b0f !important;
}

/* ===== ICON-ONLY CONTROLS (affects controls row only) ===== */

/* 1) Make every control in the controls row icon-only */
.callbar .controls-row .icon-btn,
.callbar .controls-row .button.icon-btn,
.callbar .controls-row .btn.icon-btn {
  width: 42px;                 /* square */
  min-width: 42px;
  height: 42px;
  padding: 0;                  /* no extra horizontal space */
  font-size: 0;                /* hides stray text nodes */
  line-height: 0;
  border-radius: 10px;
  white-space: nowrap;
}

/* 2) Keep the SVG centered and remove the gap reserved for text */
.callbar .controls-row .icon-btn svg,
.callbar .controls-row .button.icon-btn svg,
.callbar .controls-row .btn.icon-btn svg {
  width: 20px;
  height: 20px;
  margin: 0;                   /* no label gap */
  flex: 0 0 auto;
}

/* 3) If labels are wrapped in elements (e.g. <span>Mute</span>), hide them */
.callbar .controls-row .icon-btn > :not(svg),
.callbar .controls-row .button.icon-btn > :not(svg),
.callbar .controls-row .btn.icon-btn > :not(svg) {
  display: none !important;
}

/* 4) Row layout: no horizontal scrollbar needed now */
.callbar .controls-row {
  display: flex !important;
  gap: .5rem;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  overflow-x: visible;
}


/* ===== LAYOUT: call buttons left, controls right (desktop); stacked on mobile ===== */

/* Icon-only controls (affects ONLY the controls row) */
.callbar .controls-row .icon-btn,
.callbar .controls-row .button.icon-btn,
.callbar .controls-row .btn.icon-btn {
  width: 42px; min-width: 42px; height: 42px; padding: 0;
  font-size: 0; line-height: 0;            /* hide any text nodes */
  border-radius: 10px;
}
.callbar .controls-row .icon-btn svg,
.callbar .controls-row .button.icon-btn svg,
.callbar .controls-row .btn.icon-btn svg { width:20px; height:20px; margin:0; }

/* If labels are wrapped in spans, hide them (keeps DOM untouched) */
.callbar .controls-row .icon-btn > :not(svg),
.callbar .controls-row .button.icon-btn > :not(svg),
.callbar .controls-row .btn.icon-btn > :not(svg) { display:none !important; }

/* ---------- Desktop / tablet (>=768px) ---------- */
@media (min-width:768px) {
  .callbar {
    display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; /* allow wrap instead of scroll */
  }
  .callbar .call-cta {
    display:inline-flex; gap:.5rem; flex:0 0 auto; /* stays on the left */
  }
  .callbar .controls-row {
    display:flex !important; gap:.5rem; align-items:center;
    margin-left:auto;                     /* pushes controls to the right */
    flex:1 1 auto; flex-wrap:wrap;        /* wrap if needed; no scrollbar */
    overflow-x:visible !important;
  }
}

/* ---------- Mobile (<768px): two rows, full-width ---------- */
@media (max-width:767.98px) {
  .callbar {
    display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start;
  }
  /* Row 1: Call + Hang up (two equal columns, full width) */
  .callbar .call-cta {
    order:1; width:100%;
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  }
  .callbar .call-cta .btn-with-icon { width:100%; justify-content:center; }

  /* Row 2: controls fill the row, no scroll bar */
  .callbar .controls-row {
    order:2; width:100%;
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap:.5rem; justify-items:stretch; align-items:stretch;
    overflow-x:hidden !important;     /* no horizontal scrollbar */
  }
  .callbar .controls-row .icon-btn,
  .callbar .controls-row .button.icon-btn,
  .callbar .controls-row .btn.icon-btn {
    width:100%; height:44px;          /* comfy tap targets */
  }
}

/* ===== DESKTOP/TABLET: keep call buttons left and controls on SAME row (right) ===== */
@media (min-width: 768px) {
  /* Call bar itself never wraps and never scrolls horizontally */
  .callbar{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
  }

  /* Left group (Call / Hang up) keeps natural width */
  .callbar .call-cta{
    display:inline-flex;
    gap:.5rem;
    flex: 0 0 auto;
  }

  /* Controls live on the same row, pushed all the way to the right */
  .callbar .controls-row{
    margin-left: auto;                 /* push to the right */
    display: flex !important;
    gap: .5rem;
    align-items: center;
    flex: 0 0 auto;                    /* don't grow, don't wrap */
    flex-wrap: nowrap !important;
    overflow-x: visible !important;    /* no scrollbar */
  }

  /* Ensure controls are true icon-only squares on desktop */
  .callbar .controls-row .icon-btn,
  .callbar .controls-row .button.icon-btn,
  .callbar .controls-row .btn.icon-btn{
    width: 42px; min-width: 42px; height: 42px; padding: 0;
    font-size: 0; line-height: 0;      /* hide any text nodes */
    border-radius: 10px;
  }
  .callbar .controls-row .icon-btn svg,
  .callbar .controls-row .button.icon-btn svg,
  .callbar .controls-row .btn.icon-btn svg{
    width:20px; height:20px; margin:0;
  }
  /* If labels are wrapped in spans/divs, hide them */
  .callbar .controls-row .icon-btn > :not(svg),
  .callbar .controls-row .button.icon-btn > :not(svg),
  .callbar .controls-row .btn.icon-btn > :not(svg){
    display:none !important;
  }
}

/* ===== DESKTOP/TABLET: Call+Hang up LEFT, controls RIGHT on the SAME row ===== */
@media (min-width: 768px) {
  .callbar{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap: nowrap !important;      /* one row only */
    overflow-x: visible !important;    /* no horizontal scroll */
  }

  /* Left group: Call + Hang up */
  .callbar .call-cta{
    display:inline-flex;
    gap:.5rem;
    flex:0 0 auto;                      /* natural width on the left */
  }

  /* Right group: controls */
  .callbar .controls-row{
    margin-left: auto;                  /* pushes to the right edge */
    display:flex !important;
    gap:.5rem;
    align-items:center;
    flex:0 0 auto;                      /* don't stretch and don't wrap */
    flex-wrap: nowrap !important;
    width:auto !important;
    overflow-x: visible !important;
  }

  /* Controls are icon-only squares (no labels) */
  .callbar .controls-row .icon-btn,
  .callbar .controls-row .button.icon-btn,
  .callbar .controls-row .btn.icon-btn{
    width:42px; min-width:42px; height:42px; padding:0;
    font-size:0; line-height:0; border-radius:10px;
  }
  .callbar .controls-row .icon-btn svg,
  .callbar .controls-row .button.icon-btn svg,
  .callbar .controls-row .btn.icon-btn svg{
    width:20px; height:20px; margin:0;
  }
  .callbar .controls-row .icon-btn > :not(svg),
  .callbar .controls-row .button.icon-btn > :not(svg),
  .callbar .controls-row .btn.icon-btn > :not(svg){
    display:none !important;            /* hide any text wrappers */
  }
}

/* ===== DESKTOP/TABLET: Call+Hang up LEFT, controls RIGHT on the SAME row ===== */
@media (min-width: 768px) {
  /* Make the bar a 2-column grid: [auto | fill] */
  .callbar{
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .75rem;
    overflow-x: visible !important;
    flex-wrap: nowrap !important; /* win over any old flex rules */
  }

  /* Left group (Call/Hang up) sits in column 1 */
  .callbar .call-cta{
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    gap: .5rem;
    flex: 0 0 auto;
  }

  /* Controls live in column 2 and hug the right edge */
  .callbar .controls-row{
    grid-column: 2;
    justify-self: end;              /* push to the right side of col 2 */
    display: flex !important;
    justify-content: flex-end;      /* align icons to the right */
    gap: .5rem;
    width: 100% !important;         /* claim the whole second column */
    flex: 0 0 auto;
    flex-wrap: nowrap !important;   /* one line on desktop */
    overflow-x: hidden !important;  /* no scrollbar */
  }

  /* Icon-only squares for controls (no labels) */
  .callbar .controls-row .icon-btn,
  .callbar .controls-row .button.icon-btn,
  .callbar .controls-row .btn.icon-btn{
    width: 42px; min-width: 42px; height: 42px; padding: 0;
    font-size: 0; line-height: 0; border-radius: 10px;
  }
  .callbar .controls-row .icon-btn svg,
  .callbar .controls-row .button.icon-btn svg,
  .callbar .controls-row .btn.icon-btn svg{
    width: 20px; height: 20px; margin: 0;
  }
  .callbar .controls-row .icon-btn > :not(svg),
  .callbar .controls-row .button.icon-btn > :not(svg),
  .callbar .controls-row .btn.icon-btn > :not(svg){
    display: none !important; /* hide any text wrappers */
  }
}

/* === DESKTOP/TABLET: keep Call/Hang up full width on the LEFT; controls on the RIGHT === */
@media (min-width: 768px) {
  /* Two columns: [left = natural width] [right = flexible] */
  .callbar{
    display: grid !important;
    grid-template-columns: max-content 1fr; /* <- prevents squeezing the left group */
    align-items: center;
    column-gap: .75rem;
    overflow-x: visible !important;
  }

  /* Left group (Call / Hang up) — never wrap, size to content */
  .callbar .call-cta{
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    gap: .5rem;
  }
  /* kill any mobile width:100% that might bleed through */
  .callbar .call-cta > .button,
  .callbar .call-cta > button,
  .callbar .call-cta .btn-with-icon{
    width: auto !important;
    white-space: nowrap;          /* keep “Hang up” on one line */
  }

  /* Right group (controls) — icon-only and right-aligned on same row */
  .callbar .controls-row{
    grid-column: 2;
    justify-self: end;
    display: flex !important;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
  }
  .callbar .controls-row .icon-btn,
  .callbar .controls-row .button.icon-btn,
  .callbar .controls-row .btn.icon-btn{
    width: 42px; min-width: 42px; height: 42px; padding: 0;
    font-size: 0; line-height: 0; border-radius: 10px;
  }
  .callbar .controls-row .icon-btn svg,
  .callbar .controls-row .button.icon-btn svg,
  .callbar .controls-row .btn.icon-btn svg{
    width: 20px; height: 20px; margin: 0;
  }
  .callbar .controls-row .icon-btn > :not(svg),
  .callbar .controls-row .button.icon-btn > :not(svg),
  .callbar .controls-row .btn.icon-btn > :not(svg){
    display: none !important; /* hide any text wrappers */
  }
}

/* === Responsive layout for .two-col (Get Started + Welcome) === */
.row.two-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .row.two-col {
    flex-direction: row;
    align-items: flex-start;
  }
  .row.two-col > .card {
    flex: 1 1 0;
  }
}

/* Mirror only the self-view video */
video#localVideo.mirror {   transform: scaleX(-1);   transform-origin: center; }
#remoteVideo.mirror { transform: scaleX(-1); transform-origin: center; }







/* --- Answer attention cue (subtle bounce + glow) --- */
#callBtn.cta-urgent {
  transform-origin: center;
  animation: answer-pop 1.25s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
  font-weight: 800;               /* slightly bolder for visibility */
}

@keyframes answer-pop {
  0%   { transform: translateY(0) scale(1);     box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  12%  { transform: translateY(-2px) scale(1.08); }
  24%  { transform: translateY(0) scale(1); }
  60%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); } /* soft pulse ring */
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #callBtn.cta-urgent { animation: none; box-shadow: none; }
}


/* --- Attention style for "Answer" without size changes or jumps --- */
#callBtn.cta-urgent {
  position: relative;
  isolation: isolate;              /* keep effects contained */
  animation: none !important;      /* cancel any old bounce/scale */
  font-weight: 800;                /* keep text bold for visibility */
}

/* Soft outer pulse ring that does NOT change the button size */
#callBtn.cta-urgent::after {
  content: "";
  position: absolute;
  inset: -6px;                     /* ring sits just outside the button */
  border-radius: inherit;
  border: 2px solid rgba(16,185,129,0.8); /* emerald-ish */
  opacity: 0.6;
  pointer-events: none;
  animation: answer-ring 1.6s ease-out infinite;
  z-index: -1;                     /* behind the button */
}

/* Diagonal "sheen" sweep across the button surface (no size change) */
#callBtn.cta-urgent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.45) 50%,
    transparent 70%
  );
  transform: translateX(-150%);
  animation: answer-sheen 2.4s ease-in-out infinite;
  mix-blend-mode: screen;          /* subtle light overlay */
}

/* Keyframes */
@keyframes answer-ring {
  0%   { opacity: 0.65; transform: scale(1);   }
  100% { opacity: 0;    transform: scale(1.18);} /* scales the RING only */
}

@keyframes answer-sheen {
  0%   { transform: translateX(-60%); }
  50%  { transform: translateX(150%);  }
  100% { transform: translateX(150%);  }
}

/* Reduced-motion users: keep it static but still highlighted */
@media (prefers-reduced-motion: reduce) {
  #callBtn.cta-urgent::before,
  #callBtn.cta-urgent::after { animation: none; }
  #callBtn.cta-urgent::after { opacity: 0.85; }
}











/* === Mobile: make main video ~40% taller and PiP ~40% larger === */
/* No changes to desktop or fullscreen */
@media (max-width: 767.98px) {
  /* Main stage: 16/9 (=1.777) -> 1.777 / 1.4 ˜ 1.27 aspect ratio (˜40% taller) */
  .videobox .stage {
    aspect-ratio: 127 / 100 !important; /* ~1.27 */
  }

  /* PiP size: take existing mobile ~28% and bump ~40% -> ~39% */
  .videobox .stage > video.pip {
    width: 39% !important;
    max-width: 224px !important;  /* 160px * 1.4 */
    max-height: 39% !important;
    right: 8px; bottom: 8px;      /* keep current mobile insets */
  }

  /* Android-specific mobile bump (override the 26% mobile rule) */
  body.is-android .videobox .stage > video.pip {
    width: 36% !important;        /* ~26% * 1.4 ˜ 36% */
    max-width: 168px !important;  /* 120px * 1.4 */
    max-height: 31% !important;   /* keep conservative height growth */
    right: 8px; bottom: 8px;
  }
}

/* Keep fullscreen/immersive behavior exactly as-is: no overrides for :fullscreen */
/* (Intentionally no selectors touching .stage:fullscreen or .immersive-stage) */





/* === Mobile "Tap to full-screen chat" overlay (append-only) === */
@media (max-width: 767.98px) {
  /* Entry point: when <body> gets .chat-open, lock page scroll */
  body.chat-open { overflow: hidden; }

  /* Base chat panel already exists; make it upgrade to full-screen when .chat-open */
  body.chat-open .chat-panel {
    position: fixed !important;
    inset: 0 !important;                 /* fill entire viewport */
    max-height: 100vh !important;
    height: 100vh !important;
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: calc(10px + var(--safe-bottom));
    border-top: none;
    z-index: 10000;                       /* above video/PiP/headers */
    display: grid;
    grid-template-rows: auto 1fr auto;    /* header | log | composer */
    background: #0b0e12;                  /* solid to fully cover stage */
  }

  /* Optional: visually de-emphasize underlying content while open */
  body.chat-open .videobox,
  body.chat-open .callbar,
  body.chat-open .presence-bar {
    filter: blur(2px) brightness(.8);
    pointer-events: none;
    user-select: none;
  }

  /* Chat header (add small close button inside chat) */
  .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #0f1216;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .chat-title {
    font-weight: 700;
    font-size: 1rem;
  }
  .chat-close {
    background: #1f2937;
    color: #e5e7eb;
    border: none;
    border-radius: 10px;
    height: 36px;
    padding: 0 .9rem;
  }

  /* Make the log really use the space in full-screen */
  body.chat-open #chatLog {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    padding: 12px;
  }

  /* Composer stays pinned to the bottom with safe-area padding */
  body.chat-open .chat-composer {
    position: sticky;
    bottom: 0;
    padding: 10px 10px calc(10px + var(--safe-bottom));
    background: #0f1216;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* Floating button to OPEN chat (shows only when chat is closed) */
  .chat-fab {
    position: fixed;
    right: calc(12px + var(--safe-right));
    bottom: calc(12px + var(--safe-bottom));
    height: 48px; min-width: 48px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--accent);
    color: #000;
    border: none;
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: .4rem;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .chat-fab svg { width: 18px; height: 18px; }
  body.chat-open .chat-fab { display: none; }  /* hide FAB when chat is open */
}



/* === PiP: fit native video resolution on mobile & desktop (non-fullscreen only) === */
/* Overrides earlier PiP sizing (which used object-fit: cover and fixed ratios) */
.videobox .stage > video.pip {
  /* Let intrinsic videoWidth/videoHeight dictate the shape */
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  /* Reasonable caps so the overlay never overwhelms the stage */
  max-width: min(38%, 320px) !important;  /* desktop/tablet cap */
  max-height: 38% !important;
  /* keep your placement & chrome */
  right: 12px !important;
  bottom: 12px !important;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  z-index: 5;
  background: #000; /* avoids odd transparent edges */
}

/* Mobile caps — slightly larger but still native AR */
@media (max-width: 767.98px) {
  .videobox .stage > video.pip {
    max-width: 42% !important;
    max-height: 42% !important;
    right: 8px !important;
    bottom: 8px !important;
  }
}

/* Kill any platform/rotation rules that forced 16:9 or cover on Android */
body.is-android .videobox .stage > video.pip {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
}
@media (orientation: landscape) {
  body.is-android .videobox .stage > video.pip {
    aspect-ratio: auto !important;   /* undo earlier 16/9 override */
    width: auto !important;
    height: auto !important;
  }
}

/* NOTE: We intentionally do NOT touch any :fullscreen / immersive selectors,
   so fullscreen PiP behavior remains exactly as you had it. */


/* ===== Goodbye page styles ===== */
:root{
  --gb-bg:#0b0e12; --gb-fg:#e9eef5; --gb-muted:#94a3b8; --gb-accent:#60a5fa; --gb-card:#111827;
}

.gb-body{
  margin:0; padding:0;
  background:var(--gb-bg); color:var(--gb-fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

.gb-wrap{
  min-height:100svh;
  display:block;                          /* no grid centering */
  padding: max(16px, calc(env(safe-area-inset-top, 0px) + 16px)) 24px 48px;
}

.gb-card{
  width:min(720px,100%);
  background:var(--gb-card);
  border-radius:18px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
  margin: 0 auto;              /* center horizontally */
  margin: 24px auto 0; 
}

.gb-title{ font-size:26px; margin:0 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gb-muted{ color:var(--gb-muted); margin:8px 0; }
.gb-list{ margin:8px 0 16px 1.1rem; }

.gb-badge{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--gb-muted);
}

.gb-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.gb-btn{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none;
  border:1px solid rgba(255,255,255,.12); color:var(--gb-fg);
}
.gb-btn:hover{ text-decoration:none; filter:brightness(1.05); }
.gb-btn-primary{ background:var(--gb-accent); color:#05101d; border-color:transparent; }


/* =========================
   Feedback form (fb-*) 
   ========================= */
:root{
  /* adjust if you already use similar tokens */
  --fb-bg: #0b0e12;
  --fb-fg: #e9eef5;
  --fb-muted: #94a3b8;
  --fb-card: #111827;
  --fb-accent: #60a5fa;
  --fb-border: rgba(255,255,255,.10);
}

.fb-wrap{
  max-width: 760px;
  margin: 24px auto 48px;
  padding: 0 12px;
}

.fb-card{
  background: var(--fb-card);
  color: var(--fb-fg);
  border: 1px solid var(--fb-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

.fb-title{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
}

.fb-subtle{ color: var(--fb-muted); }

.fb-field{ margin: 16px 0; }
.fb-label{ display:block; margin: 0 0 8px; font-weight: 600; }

.fb-row{ display:flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* -------- Star rating -------- */
.stars{
  display: inline-flex;
  flex-direction: row-reverse;      /* allows ~ selector to fill leftwards */
  gap: 6px;
}
.stars input{ display:none; }
.stars label.star{
  font-size: 28px;
  line-height: 1;
  color: var(--fb-muted);
  cursor: pointer;
  transition: transform .08s ease, color .08s ease;
  user-select: none;
}
.stars label.star:hover,
.stars label.star:hover ~ label.star{
  color: var(--fb-accent);
  transform: translateY(-1px) scale(1.02);
}
.stars input:checked ~ label.star{
  color: var(--fb-accent);
}

/* -------- Devices grid -------- */
/* --- Force device pill to one-line: checkbox + text --- */
.device-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:10px;
}

.device-option{
  display:flex !important;          /* override any previous grid/inline/block */
  flex-direction:row !important;    /* avoid column stacking */
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:#0e1522;
  border:1px solid var(--fb-border);
  cursor:pointer;
  overflow:hidden;
  text-align:left !important;       /* prevent centered text */
}

.device-option input[type="checkbox"]{
  flex:0 0 auto;
  margin:0;
  vertical-align:middle;
}

.device-option span{
  display:inline-block;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

/* -------- Notes -------- */
.fb-textarea{
  width: 100%;
  min-height: 120px;
  padding: 12px;
  color: var(--fb-fg);
  background: #0b0e12;
  border: 1px solid var(--fb-border);
  border-radius: 12px;
  resize: vertical;
}

/* -------- Actions -------- */
.fb-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.fb-btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--fb-fg);
  border: 1px solid var(--fb-border);
}
.fb-btn:hover{ filter: brightness(1.05); text-decoration: none; }
.fb-btn-primary{
  background: var(--fb-accent);
  color: #05101d;
  border-color: transparent;
}

.stars label.star svg { width: 28px; height: 28px; display: block; fill: currentColor; }


/* Feedback device pills — simple, robust, wraps to 2 lines */
.device-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #111827;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
}
.device-option input[type="checkbox"] { margin: 0; }

/* Invite page actions layout */
.btn-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-top: 0.5rem;
}

/* Exact width split: 50% / 30% / 20% */
.btn-generate { flex: 0 0 50%; }
.btn-spacer-30 { flex: 0 0 30%; }

/* Keep Back button same visual height & centering; relies on existing .button blue styling */
.btn-back {
  flex: 0 0 20%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* (Optional) Small screens: stack the actions neatly */
@media (max-width: 480px) {
  .btn-row { flex-wrap: wrap; gap: 0.5rem; }
  .btn-generate, .btn-back { flex: 1 1 48%; }
  .btn-spacer-30 { display: none; }
}

.top-actions { margin: 16px 0; }