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

:root {
  --bg: #0b0f17;
  --panel: #111827;
  --card: #151d2b;
  --border: #223047;
  --text: #e5ecf6;
  --muted: #8496b0;
  --accent: #7c6cff;
  --accent2: #2dd4bf;
  --danger: #f87171;
  --ok: #34d399;
}

html, body { height: 100%; }

body {
  background: radial-gradient(1200px 600px at 80% -10%, #1b1440 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.brand { display: flex; align-items: center; gap: 14px; }

.logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0f17;
}

h1 { font-size: 18px; font-weight: 650; letter-spacing: 0.2px; }
.sub { font-size: 12px; color: var(--muted); }

.header-right { display: flex; align-items: center; gap: 16px; }

.pill {
  font-size: 12px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pill.idle       { color: var(--muted); }
.pill.connecting { color: #fbbf24; border-color: #fbbf2455; }
.pill.live       { color: var(--ok); border-color: #34d39955; }
.pill.ended      { color: var(--accent); border-color: #7c6cff55; }

/* response-latency badge */
.latency-badge {
  display: none;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #0d1420;
  font-variant-numeric: tabular-nums;
}
.latency-badge.active { display: inline-flex; }
.latency-badge .lat-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
#lat-last { font-weight: 700; color: var(--ok); }
.latency-badge .lat-avg { color: var(--muted); font-size: 11px; }
/* colour the last reading by how snappy it was */
.latency-badge.slow #lat-last { color: #fbbf24; }
.latency-badge.laggy #lat-last { color: var(--danger); }

/* bot speaking equalizer */
.speaking-indicator { display: flex; gap: 3px; align-items: flex-end; height: 18px; opacity: 0; transition: opacity .2s; }
.speaking-indicator.active { opacity: 1; }
.speaking-indicator span {
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  animation: eq 0.8s ease-in-out infinite;
  height: 6px;
}
.speaking-indicator span:nth-child(2) { animation-delay: 0.15s; }
.speaking-indicator span:nth-child(3) { animation-delay: 0.3s; }
.speaking-indicator span:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq { 0%, 100% { height: 5px; } 50% { height: 18px; } }

main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
  gap: 22px;
  padding: 22px 28px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.panel { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.card-title {
  display: block;
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.hint { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }

textarea, input[type="text"] {
  width: 100%;
  background: #0d1420;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
textarea:focus, input:focus { border-color: var(--accent); }

.q-row { display: flex; gap: 8px; margin-bottom: 8px; }
.q-row input { flex: 1; }
.q-row .remove {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; width: 34px; cursor: pointer; font-size: 15px;
}
.q-row .remove:hover { color: var(--danger); border-color: var(--danger); }

.ghost-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12.5px;
  width: 100%;
}
.ghost-btn:hover { color: var(--accent2); border-color: var(--accent2); }

.call-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  border: none; border-radius: 14px;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  color: #0b0f17;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: transform .1s, filter .15s;
}
.call-btn:hover { filter: brightness(1.1); }
.call-btn:active { transform: scale(0.99); }
.call-btn:disabled { filter: grayscale(.6); cursor: wait; }
.call-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: #0b0f17; }
.call-btn.live { background: var(--danger); color: #fff; }
.call-btn.live .dot { background: #fff; animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* -------- view mode toggle -------- */
.mode-toggle {
  display: flex;
  background: #0d1420;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.mode-toggle button {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mode-toggle button.active {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

/* -------- phone-view call overlay: one blob, no turn cues -------- */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(900px 700px at 50% 30%, #17102e 0%, #07090f 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.call-overlay.hidden { display: none; }

.blob-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  filter: blur(0.5px);
}
.blob {
  position: absolute;
  inset: 0;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: linear-gradient(135deg, var(--accent) 0%, #4f8cff 55%, var(--accent2) 100%);
  animation: morph 7s ease-in-out infinite, drift 11s ease-in-out infinite;
  opacity: 0.9;
}
.blob-2 {
  inset: 12px;
  background: linear-gradient(315deg, var(--accent2) 0%, var(--accent) 100%);
  animation: morph 9s ease-in-out infinite reverse, drift 13s ease-in-out infinite reverse;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.blob-3 {
  inset: -18px;
  background: radial-gradient(circle at 35% 35%, #7c6cff44, transparent 65%);
  animation: morph 12s ease-in-out infinite, spin 24s linear infinite;
  opacity: 0.8;
}
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
  25%      { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
  50%      { border-radius: 50% 50% 62% 38% / 42% 55% 45% 58%; }
  75%      { border-radius: 38% 62% 48% 52% / 60% 44% 56% 40%; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(6px, -8px) scale(1.05); }
  66%      { transform: translate(-7px, 6px) scale(0.96); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.overlay-meta { text-align: center; }
.overlay-title { font-size: 17px; font-weight: 650; letter-spacing: .3px; }
#call-timer {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}

.hangup-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--danger);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform .1s, filter .15s;
}
.hangup-btn:hover { filter: brightness(1.12); }
.hangup-btn:active { transform: scale(0.95); }

.phone-row { display: flex; gap: 8px; }
.phone-row input { flex: 1; }
.phone-btn { width: auto; padding: 8px 18px; white-space: nowrap; }
.phone-btn:disabled { opacity: .5; cursor: wait; }

.error-bar {
  color: var(--danger);
  font-size: 12.5px;
  background: #f8717114;
  border: 1px solid #f8717140;
  border-radius: 10px;
  padding: 10px 12px;
}
.hidden { display: none; }

/* -------- right column -------- */
.live { min-height: 0; }
.transcript-card { flex: 1; display: flex; flex-direction: column; min-height: 220px; }
.log-card { max-height: 180px; display: flex; flex-direction: column; }

.empty { color: var(--muted); font-size: 12.5px; font-style: italic; }

#checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #0d1420;
  border: 1px solid var(--border);
  transition: border-color .3s, background .3s;
}
#checklist li .mark { font-size: 14px; line-height: 1.4; }
#checklist li.answered { border-color: #34d39955; background: #34d3990d; }
#checklist li.answered .q-text { color: var(--muted); }
#checklist li .answer { display: block; color: var(--ok); font-size: 12px; margin-top: 3px; }

#transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.bubble.user { align-self: flex-end; background: #24334d; border-bottom-right-radius: 4px; }
.bubble.bot  { align-self: flex-start; background: #1c1836; border: 1px solid #7c6cff33; border-bottom-left-radius: 4px; }
.bubble .who { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 3px; }

#event-log { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.event {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--muted);
  padding: 6px 10px;
  background: #0d1420;
  border-radius: 8px;
  border-left: 3px solid var(--accent2);
}
.event .tool { color: var(--accent2); font-weight: 600; font-family: Consolas, monospace; }