:root {
  --bg: #1a1a1d;
  --surface: #242427;
  --surface2: #2e2e32;
  --border: rgba(255,255,255,.08);
  --text: #e8eaed;
  --dim: #9aa0a6;
  --accent: #8ab4f8;
  --green: #81c995;
  --amber: #fdd663;
  --red: #f28b82;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
audio { display: none; }

/* ── Pre-call overlay ── */
.precall {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.precall.hidden { display: none; }

.precall-card {
  width: 100%;
  max-width: 360px;
  padding: 32px 28px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.precall-header { text-align: center; }
.precall-icon { color: var(--accent); margin-bottom: 8px; }
.precall-header h1 { font-size: 1.25rem; font-weight: 600; }
.precall-sub { color: var(--dim); font-size: .8rem; margin-top: 4px; }

/* Mic panel */
.mic-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  font-size: .78rem;
}

.mic-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mic-badge-pending { background: rgba(253,214,99,.12); color: var(--amber); }
.mic-badge-ready   { background: rgba(129,201,149,.12); color: var(--green); }
.mic-badge-warning { background: rgba(253,214,99,.12); color: var(--amber); }
.mic-badge-blocked { background: rgba(242,139,130,.12); color: var(--red); }

.mic-summary { color: var(--text); font-weight: 500; }
.mic-detail  { color: var(--dim); width: 100%; font-size: .72rem; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }

input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  outline: none;
  transition: border-color .15s;
}

input:focus { border-color: var(--accent); }

/* Buttons */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-join { background: var(--accent); color: #1a1a1d; }

/* ── In-call layout ── */
.call {
  display: grid;
  grid-template-rows: 48px 1fr 72px;
  height: 100vh;
  overflow: hidden;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: .82rem;
  border-bottom: 1px solid var(--border);
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.room-label { font-weight: 600; }
.status-label { color: var(--dim); }
.divider { color: var(--border); }

.meta-chip {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-size: .72rem;
  color: var(--dim);
}

/* Stage — participant tiles */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 280px;
  height: 280px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s;
}

.tile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.tile-avatar-remote { color: var(--green); }

.tile-name {
  font-size: .88rem;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom controls */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}

.icon-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 22px;
  background: var(--surface2);
  cursor: pointer;
  transition: background .15s;
}

.icon-btn:hover:enabled { background: rgba(255,255,255,.12); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.icon-btn-end { background: #c5221f; color: #fff; }
.icon-btn-end:hover:enabled { background: #d93025; }

.icon-btn-sm {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.btn-label { font-size: .78rem; font-weight: 500; }

/* Info panel */
.info-panel {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 72px;
  width: 300px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 50;
}

.info-panel.hidden { display: none; }

.panel-section h3 {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  margin-bottom: 10px;
}

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.metric {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.metric dt {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dim);
}

.metric dd { margin-top: 4px; font-size: .92rem; font-weight: 500; }

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-btn {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .75rem;
}

.log-output {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.3);
  color: var(--dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .75rem;
  line-height: 1.5;
  min-height: 120px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .stage { flex-direction: column; padding: 16px; }
  .tile { width: 100%; max-width: 300px; height: 200px; }
  .btn-label { display: none; }
  .icon-btn { padding: 0 12px; }
  .info-panel { width: 100%; top: 48px; }
  .controls { gap: 8px; }
}