/* ===========================================================
   LinkLine — design tokens
   A quiet, technical "ops console" surface: near-black graphite,
   signal-green for live/good state, amber/red for degraded state.
   Telemetry (timers, ping, bitrate) always renders in mono type
   so it reads as measured data, not decoration.
=========================================================== */
:root{
  --bg: #0B0E14;
  --surface: #12161F;
  --surface-2: #171C27;
  --border: #232838;
  --text: #E7EAF0;
  --text-dim: #7C8494;
  --accent: #5B8DEF;      /* room codes, links */
  --good: #3DDC84;        /* live / excellent signal */
  --fair: #F2B84B;        /* degraded signal */
  --poor: #E5484D;        /* poor signal / hang up */

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% -10%, rgba(91,141,239,0.10), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(61,220,132,0.06), transparent 40%);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input{ font-family: inherit; color: inherit; }
button{ cursor: pointer; }
h1,h2,h3{ font-family: var(--font-display); margin: 0; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- layout scaffolding ---------- */
#app{ min-height: 100dvh; }
.screen{ min-height: 100dvh; }
.screen[hidden]{ display:none; }

/* ---------- gate / dial panel ---------- */
#dial-screen, #gate-screen{
  display:flex; align-items:center; justify-content:center;
  padding: max(24px, var(--safe-top)) 20px max(24px, var(--safe-bottom));
}
.panel{
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
}
.panel.narrow{ max-width: 360px; }

.brand{ display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
.brand-mark{
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--good), var(--accent) 60%, var(--good) 100%);
  box-shadow: 0 0 0 3px rgba(61,220,132,0.12);
}
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.hint{ color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }

.field{ display:block; margin-bottom: 16px; }
.field > span{ display:block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.01em; }
.field input{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  outline: none;
}
.field input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,141,239,0.18); }

.room-row{ display:flex; gap: 8px; }
.room-row input{ text-transform: uppercase; letter-spacing: 0.06em; }

.mode-toggle{ display:flex; gap:8px; margin-bottom: 20px; }
.mode-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 10px; font-size: 14px; font-weight: 500; color: var(--text-dim);
  transition: border-color .15s, color .15s, background .15s;
}
.mode-btn .icon{ width:16px; height:16px; fill: currentColor; }
.mode-btn.is-active{ color: var(--text); border-color: var(--accent); background: rgba(91,141,239,0.10); }

.btn{
  border: none; border-radius: var(--radius-sm);
  padding: 13px 18px; font-size: 15px; font-weight: 600;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .1s ease, filter .15s ease, background .15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-block{ width: 100%; }
.btn-primary{ background: var(--accent); color: #08101F; }
.btn-primary:hover{ filter: brightness(1.08); }
.btn-ghost{ background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 0 14px; }
.btn-ghost:hover{ color: var(--text); border-color: var(--accent); }

.btn-dial{
  position: relative;
  background: var(--good); color: #06251A;
  padding: 15px 18px; font-size: 16px;
  margin-top: 4px;
}
.dial-ring{ position:absolute; left:14px; width:26px; height:26px; opacity:0; }
.dial-ring-track{ fill:none; stroke: rgba(6,37,26,0.25); stroke-width:3; }
.dial-ring-fg{ fill:none; stroke:#06251A; stroke-width:3; stroke-linecap:round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transform-origin:center; transform: rotate(-90deg); }
.btn-dial.is-connecting .dial-ring{ opacity:1; animation: spin 1.1s linear infinite; }
.btn-dial.is-connecting .dial-ring-fg{ stroke-dashoffset: 30; }
.btn-dial.is-connecting span{ opacity: 0.7; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.status-line{ text-align:center; color: var(--text-dim); font-size: 13px; margin: 16px 0 0; }
.error{ text-align:center; color: var(--poor); font-size: 13px; margin: 12px 0 0; }

/* ---------- call screen ---------- */
#call-screen{ display:flex; flex-direction:column; }

.call-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(18,22,31,0.9); backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 5;
}
.topbar-cluster{ display:flex; align-items:center; gap:10px; font-size: 13px; color: var(--text-dim); }
.room-chip{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--text); background: var(--surface-2); border:1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
}
.link-btn{ background:none; border:none; color: var(--accent); font-size: 13px; padding: 4px; }
.sep{ opacity: 0.4; }
.topbar-label{ color: var(--text-dim); }

.quality-dot{ width:9px; height:9px; border-radius:50%; background: var(--text-dim); display:inline-block; }
.quality-dot[data-tier="excellent"]{ background: var(--good); box-shadow: 0 0 8px rgba(61,220,132,0.7); }
.quality-dot[data-tier="good"]{ background: var(--good); }
.quality-dot[data-tier="fair"]{ background: var(--fair); }
.quality-dot[data-tier="poor"]{ background: var(--poor); }
.quality-dot[data-tier="connecting"]{ animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }

.reconnect-banner{
  width:max-content; margin:10px auto 0;
  background: rgba(245,190,60,0.12); border:1px solid var(--fair);
  color: var(--fair); font-size:13px; padding:6px 14px; border-radius:999px;
  animation: pulse 1.2s ease-in-out infinite;
}

.tile-grid{
  flex:1; display:grid; gap: 10px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: center;
}
.tile{
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  aspect-ratio: 4 / 3; overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
}

/* --- Spotlight: one big tile, the rest floating thumbnails --- */
.tile-grid.has-spotlight{ display:block; position:relative; overflow:hidden; }
.tile-grid.has-spotlight .tile.spotlight{
  /* Pin to the call area instead of sizing from content: a portrait phone
     video or an empty (avatar-only) tile must not dictate the box size. */
  position:absolute; inset:14px; width:auto; height:auto; aspect-ratio:auto;
  cursor:zoom-out;
}
/* Big view default (Fit): whole picture visible, no cropping. */
.tile-grid.has-spotlight .tile.spotlight video{ object-fit:contain; }
/* Fill: cover the whole area, cropping edges as needed. */
.tile-grid.has-spotlight .tile.spotlight.fit-cover video{ object-fit:cover; }
/* 100%: native resolution, pannable in both directions. */
.tile-grid.has-spotlight .tile.spotlight.fit-zoom{ display:block; overflow:auto; cursor:default; }
.tile-grid.has-spotlight .tile.spotlight.fit-zoom video{
  display:block; width:auto; height:auto; max-width:none; max-height:none; margin:auto;
}

.view-toggle{
  /* Hovers just inside the top-right corner of the enlarged picture. */
  position:fixed; top:72px; right:38px; z-index:40;
  background: rgba(10,13,20,0.55); border:1px solid rgba(255,255,255,0.3); color:#fff;
  font-size:12px; padding:6px 12px; border-radius:999px; cursor:pointer;
  opacity:0.65; backdrop-filter: blur(4px);
  transition: opacity .15s ease, background .15s ease;
}
.view-toggle:hover{ opacity:1; background: rgba(10,13,20,0.85); }
.view-toggle[hidden]{ display:none; }

/* --- Chat panel --- */
.chat-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(340px, 92vw);
  background: var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column; z-index:45;
}
.chat-panel[hidden]{ display:none; }
.chat-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600;
}
.chat-header button{ background:none; border:none; color:var(--text-dim); font-size:15px; cursor:pointer; padding:4px 8px; }
.chat-messages{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ font-size:13px; line-height:1.4; word-break:break-word; }
.chat-msg .chat-who{ display:block; color:var(--text-dim); font-size:11px; }
.chat-msg.self .chat-who{ color: var(--accent); }
.chat-warn{ display:block; color: var(--fair); font-size:11px; margin-top:2px; }
.chat-file-btn{
  display:block; margin-top:6px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer;
}
.chat-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.chat-input-row input[type="text"]{
  flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:8px 10px; font-size:13px;
}
.chat-input-row button{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13px; cursor:pointer;
}
.chat-unread{
  background: var(--accent); color:#fff; border-radius:999px;
  font-size:10px; padding:1px 6px; margin-left:5px;
}
/* On wide screens the open chat pushes the call area aside instead of covering it. */
@media (min-width: 900px){
  #call-screen.chat-open{ padding-right: 340px; }
  #call-screen.chat-open .view-toggle{ right: 378px; }
}
.tile-grid.has-spotlight .tile:not(.spotlight){
  position:absolute; right:22px; width:132px; aspect-ratio:4/3;
  bottom: calc(22px + var(--float-i, 0) * 112px);
  z-index:6; border-radius:10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.tile-grid.has-spotlight .tile:not(.spotlight) .tile-stats{ display:none; }
.tile-grid.has-spotlight .tile:not(.spotlight) .tile-name{ font-size:10px; }
.tile-grid.has-spotlight .tile:not(.spotlight) .tile-quality-bar{ display:none; }

#toast{
  position:fixed; left:50%; bottom:96px;
  transform:translateX(-50%) translateY(8px);
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding:10px 16px; border-radius:12px; font-size:13px; max-width:min(80vw, 480px);
  text-align:center; z-index:50; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.tile video{ width:100%; height:100%; object-fit: cover; background:#000; }
/* Tall (portrait) video: show all of it rather than cropping to the tile. */
.tile video.portrait{ object-fit: contain; }
.tile video.is-mirrored{ transform: scaleX(-1); }

.tile-quality-bar{
  position:absolute; left:50%; bottom:5px; transform:translateX(-50%);
  width:56px; height:4px; border-radius:999px;
  background: rgba(255,255,255,0.12); overflow:hidden;
  pointer-events:none; opacity:0.85;
}
.tile-quality-fill{
  height:100%; width:0; border-radius:999px; background: var(--text-dim);
  transition: width .6s ease, background .6s ease;
}
.tile[data-tier="excellent"] .tile-quality-fill{ background: var(--good); width:100%; }
.tile[data-tier="good"] .tile-quality-fill{ background: var(--good); width:75%; }
.tile[data-tier="fair"] .tile-quality-fill{ background: var(--fair); width:50%; }
.tile[data-tier="poor"] .tile-quality-fill{ background: var(--poor); width:25%; }
/* No network hop to yourself — hide the meter on your own tile. */
.tile.is-self .tile-quality-bar{ display:none; }

.tile-meta{
  position:absolute; left:10px; bottom:8px; right:10px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.tile-name{ font-size: 13px; font-weight: 600; }
.tile-stats{ font-size: 11px; color: rgba(231,234,240,0.75); }
.tile-muted-badge{
  position:absolute; top:10px; right:10px; background: rgba(229,72,77,0.85);
  color:#fff; font-size: 11px; padding: 3px 8px; border-radius: 999px;
}
.tile.no-video video{ visibility:hidden; }
.tile.no-video::before{
  content: attr(data-initial);
  position:absolute; font-family: var(--font-display); font-size: 34px; font-weight:700;
  color: var(--text-dim); width:64px; height:64px; border-radius:50%;
  background: var(--surface-2); display:flex; align-items:center; justify-content:center;
}

.control-bar{
  display:flex; align-items:center; justify-content:center; gap: 14px;
  padding: 14px 16px calc(16px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: rgba(18,22,31,0.9); backdrop-filter: blur(6px);
}
.ctrl-btn{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s;
}
.ctrl-btn .icon{ width: 22px; height: 22px; fill: var(--text); }
.ctrl-btn[data-on="false"]{ background: rgba(229,72,77,0.14); border-color: var(--poor); }
.ctrl-btn[data-on="false"] .icon{ fill: var(--poor); }
.ctrl-btn[data-on="true"][id="share-btn"]{ background: rgba(91,141,239,0.16); border-color: var(--accent); }
.ctrl-end{ background: var(--poor); border-color: var(--poor); }
.ctrl-end .icon{ fill: #fff; }
.ctrl-end:hover{ filter: brightness(1.1); }

@media (min-width: 720px){
  .tile-grid{ padding: 20px; gap: 14px; }
}

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