:root {
  color-scheme: dark;
  --bg:           #0c0a14;
  --surface:      #17132a;
  --surface-2:    #1e1935;
  --surface-3:    #251f3d;
  --text:         #ece8ff;
  --muted:        #8878b8;
  --brand:        #a78bfa;
  --brand-dim:    #7c5fcf;
  --brand-glow:   rgba(167,139,250,0.18);
  --success:      #56d27d;
  --success-bg:   rgba(86,210,125,0.16);
  --warning:      #d8b05a;
  --warning-bg:   rgba(216,176,90,0.16);
  --danger:       #e05c5c;
  --border:       #2e2748;
  --border-soft:  #221d38;
  --video-bg:     #07050f;
  --sidebar-w:    290px;
  --handle-w:     14px;
  --topbar-h:     42px;
  --tile-shadow:  0 14px 30px rgba(0, 0, 0, 0.24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: "IBM Plex Sans", "Source Sans 3", "Segoe UI", sans-serif;
  font-size: 14px;
  background:
    radial-gradient(ellipse at 10% 0%,   #200c42 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, #150929 0%, transparent 50%),
    var(--bg);
  color: var(--text);
}

/* ── App shell ──────────────────────────────────── */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Topbar ─────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.85rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.room-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  max-width: min(60vw, 340px);
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.room-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.room-name {
  font-size: 0.8rem;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-state {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  flex-shrink: 0;
}

.room-pill.online {
  color: var(--success);
  border-color: rgba(86, 210, 125, 0.42);
  background: var(--success-bg);
}

.room-pill.connecting {
  color: var(--warning);
  border-color: rgba(216, 176, 90, 0.42);
  background: var(--warning-bg);
}

.room-pill.offline {
  color: var(--danger);
  border-color: rgba(224, 92, 92, 0.4);
  background: rgba(224, 92, 92, 0.14);
}

.topbar-spacer { flex: 1; }

.peer-count {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── Main area (videos + handle + sidebar) ──────── */
.main {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
}

.participants-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.45rem 0.7rem 0.55rem;
  background: rgba(10, 8, 18, 0.92);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.participants-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.participants-list {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.1rem;
}

.participant-chip {
  flex-shrink: 0;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.1;
}

.participant-chip:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--brand-dim);
  transform: none;
}

.participant-chip.local {
  color: var(--brand);
}

.participant-chip.active {
  border-color: var(--brand);
  background: var(--brand-glow);
  color: #fff;
}

/* ── Video grid ─────────────────────────────────── */
.videos {
  --grid-columns: 1;
  --grid-tile-ratio: 16 / 9;
  --grid-tile-min-h: clamp(132px, 18vw, 240px);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;           /* solo mode: local tile fills */
  padding: 0.5rem;
  gap: 0.5rem;
}

/* Solo: local tile fills whole videos area */
.videos:not(.has-peers) .tile.local {
  flex: 1;
}
.videos:not(.has-peers) .tile.local video {
  aspect-ratio: unset;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Grid mode: when peers are present */
.videos.has-peers {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  align-items: start;
  overflow: auto;
}
.videos.has-peers .tile {
  width: 100%;
  min-height: var(--grid-tile-min-h);
  aspect-ratio: var(--grid-tile-ratio);
}
.videos.has-peers .tile video {
  height: 100%;
  aspect-ratio: unset;
  object-fit: contain;
}
.videos.has-peers:not(.has-spotlight) .tile.local {
  display: none;
}
.videos.has-peers.dense-grid .tile {
  padding: 0.34rem;
}
.videos.has-peers.dense-grid .tile-header {
  margin-bottom: 0.22rem;
}
.videos.has-peers.dense-grid .tile-name {
  font-size: 0.72rem;
}
.videos.has-peers.dense-grid .tile-hint {
  display: none;
}
.videos.has-peers.compact-grid .tile {
  padding: 0.26rem;
  border-radius: 8px;
}
.videos.has-peers.compact-grid .tile-header {
  margin-bottom: 0.16rem;
}
.videos.has-peers.compact-grid .tile-name {
  font-size: 0.64rem;
}

/* Spotlight mode */
.videos.has-spotlight {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tile.spotlight {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}
.tile.spotlight video {
  aspect-ratio: unset !important;
  height: 100%;
  object-fit: contain;
}

/* Thumbnail strip (created by JS in spotlight mode) */
.thumb-strip {
  display: flex;
  gap: 0.5rem;
  min-height: 92px;
  height: clamp(92px, 18vh, 144px);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.1rem;
  scroll-snap-type: x proximity;
}
.thumb-strip .tile {
  width: clamp(136px, 20vw, 192px);
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  cursor: pointer;
  scroll-snap-align: start;
}
.thumb-strip .tile video {
  aspect-ratio: unset !important;
  object-fit: contain;
}

/* ── Tile ───────────────────────────────────────── */
.tile {
  position: relative;
  background: linear-gradient(155deg, #100d1c 0%, #17132a 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem;
  cursor: pointer;
  transition: border-color 160ms;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--tile-shadow);
}

.tile:hover { border-color: var(--brand-dim); }
.tile.spotlight { border-color: var(--brand); cursor: default; }

.tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  flex-shrink: 0;
}

.tile-name {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-hint {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 180ms;
  flex-shrink: 0;
}
.tile:hover .tile-hint { opacity: 0.4; }
.tile.spotlight .tile-hint { display: none; }

.tile video {
  width: 100%;
  border-radius: 6px;
  background: var(--video-bg);
  border: 1px solid var(--border-soft);
  display: block;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}

/* Muted badges overlay */
.tile-overlay {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: flex;
  gap: 0.2rem;
  pointer-events: none;
}
.overlay-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.26rem;
  border-radius: 3px;
  background: rgba(224,92,92,0.85);
  color: #fff;
}

/* ── Sidebar handle ──────────────────────────────── */
.sidebar-handle {
  width: var(--handle-w);
  flex-shrink: 0;
  background: var(--surface-2);
  border: none;
  border-left:  1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  padding: 0;
  transition: background 120ms, color 120ms;
  z-index: 10;
}
.sidebar-handle:hover { background: var(--brand-dim); color: #fff; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
  transition: width 200ms ease;
}

.sidebar.collapsed { width: 0; }
.sidebar.wide { width: 50%; }

.sidebar-top {
  display: flex;
  justify-content: flex-end;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-wide-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 120ms, background 120ms;
  line-height: 1;
}
.sidebar-wide-btn:hover { color: var(--brand); background: var(--surface-3); }

/* Local preview in sidebar */
.local-preview-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 0.45rem 0.45rem 0;
}
.local-preview-wrap video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--video-bg);
  border: 1px solid var(--border-soft);
  display: block;
  object-fit: contain;
}

/* CAM / MIC row */
.cam-mic-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0.45rem 0;
  flex-shrink: 0;
}

/* Icon buttons (CAM / MIC) */
.icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--brand);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms, border-color 120ms, color 120ms;
  flex-shrink: 0;
}
.icon-btn.media-btn {
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border-radius: 999px;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: currentColor;
}
.btn-text {
  display: none;
}
.icon-btn:hover:not(:disabled) {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
  color: #fff;
}
.icon-btn.media-toggle.active {
  background: var(--success-bg);
  border-color: rgba(86, 210, 125, 0.42);
  color: var(--success);
}
.icon-btn.media-toggle.active:hover:not(:disabled) {
  background: rgba(86, 210, 125, 0.24);
  border-color: var(--success);
  color: #dffff0;
}
.icon-btn.muted {
  background: rgba(224,92,92,0.14);
  border-color: var(--danger);
  color: var(--danger);
}
.icon-btn.muted:hover:not(:disabled) {
  background: rgba(224,92,92,0.22);
  border-color: var(--danger);
  color: #ffe0e0;
}
#next-cam-btn {
  color: var(--brand);
}
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Shared input / select / button ──────────────── */
input, select {
  font: inherit;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #110e1f;
  color: var(--text);
  padding: 0.36rem 0.55rem;
  transition: border-color 120ms, box-shadow 120ms;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

button {
  font: inherit;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #6338b8;
  background: linear-gradient(170deg, #9a78f0 0%, #7344cc 100%);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 0.36rem 0.65rem;
  transition: opacity 120ms, transform 80ms;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

.leave-btn {
  background: linear-gradient(170deg, #d77878 0%, #bf5f5f 100%);
  border-color: #a75353;
  margin-left: auto;
}

/* ── Sidebar panes ──────────────────────────────── */
.sidebar-pane {
  padding: 0.45rem 0.45rem 0;
  flex-shrink: 0;
}

#join-form {
  display: flex;
  gap: 0.35rem;
}
#join-form input {
  flex: 1;
  min-width: 0;
}

.status-text {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.25rem 0;
  min-height: 1.2em;
}

/* ── Device row ─────────────────────────────────── */
.device-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.45rem 0;
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
  margin-top: 0.4rem;
}
.device-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.device-group label {
  font-size: 0.7rem;
  color: var(--muted);
}
.device-group select {
  width: 100%;
}
#apply-media-btn {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 0.28rem 0.55rem;
}

/* ── Chat ───────────────────────────────────────── */
.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-soft);
  margin-top: 0.45rem;
  overflow: hidden;
}

.chat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.3rem 0.5rem 0.2rem;
  flex-shrink: 0;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  background: #0d0b18;
}

.msg {
  margin: 0 0 0.3rem;
  color: #c4bcee;
  line-height: 1.4;
  word-break: break-word;
}
.msg strong {
  color: var(--brand);
  margin-right: 0.2rem;
}

.chat-form {
  display: flex;
  gap: 0.3rem;
  padding: 0.35rem 0.45rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
}
#chat-input { flex: 1; }
#chat-send {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sidebar-w: 100%; }
  html, body { overflow: auto; }
  .app {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .main {
    flex-direction: column;
    overflow: visible;
  }
  .videos {
    --grid-tile-ratio: 4 / 3;
    --grid-tile-min-h: clamp(96px, 24vw, 168px);
    flex: none;
    min-height: 0;
    height: auto;
    padding: 0.35rem;
    gap: 0.35rem;
    overflow: visible;
  }
  .videos.has-peers {
    gap: 0.35rem;
  }
  .videos.has-spotlight {
    min-height: clamp(320px, 54svh, 560px);
    overflow: hidden;
  }
  .videos.has-peers:not(.has-spotlight) .tile.local {
    display: flex;
  }
  .local-preview-wrap {
    display: none !important;
  }
  .videos.has-peers.dense-grid:not(.has-spotlight) .tile {
    padding: 0.22rem;
    border-radius: 7px;
    min-height: clamp(72px, 21vw, 120px);
  }
  .videos.has-peers.dense-grid:not(.has-spotlight) .tile-header {
    margin-bottom: 0.12rem;
  }
  .videos.has-peers.dense-grid:not(.has-spotlight) .tile-name {
    font-size: 0.62rem;
  }
  .videos.has-peers.compact-grid:not(.has-spotlight) .tile-name {
    font-size: 0.58rem;
  }
  .videos.has-peers.compact-grid:not(.has-spotlight) .overlay-badge,
  .videos.has-peers.dense-grid:not(.has-spotlight) .overlay-badge {
    font-size: 0.5rem;
    padding: 0.08rem 0.2rem;
  }
  .videos.has-peers.compact-grid:not(.has-spotlight) .tile {
    min-height: clamp(62px, 18vw, 96px);
  }
  .thumb-strip {
    gap: 0.35rem;
    height: clamp(84px, 18vh, 116px);
  }
  .thumb-strip .tile {
    width: clamp(112px, 34vw, 152px);
  }
  .sidebar-top {
    display: none;
  }
  .sidebar {
    width: 100% !important;
    flex: none;
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
    overflow: visible;
  }
  .sidebar.collapsed,
  .sidebar.wide {
    width: 100% !important;
    max-height: none;
  }
  .sidebar-handle {
    display: none;
  }
  .chat {
    min-height: clamp(220px, 34svh, 360px);
  }
  .participants-bar {
    min-height: 2.8rem;
    padding: 0.4rem 0.45rem 0.5rem;
    gap: 0.45rem;
  }
  .participants-label {
    display: none;
  }
  .participant-chip {
    font-size: 0.72rem;
    padding: 0.28rem 0.55rem;
  }
  .cam-mic-row {
    padding-top: 0.35rem;
  }
  .icon-btn.media-btn {
    flex: 0 0 auto;
    justify-content: center;
  }
  .leave-btn {
    width: 100%;
    margin-left: 0;
  }
}