:root {
  --bg: #121724;        /* igual ao painel do site -> o iframe funde-se */
  --panel: #171d2e;
  --line: #232b40;
  --accent: #6366f1;    /* indigo markethub */
  --accent2: #22d3ee;   /* cyan markethub */
  --ok: #34d399;
  --text: #eef2fb;
  --muted: #9aa7c2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* o atributo hidden vence o display:flex */

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.stage {
  width: min(960px, 96vw);
  text-align: center;
  padding: 18px;
}

h1 { font-size: 1.05rem; font-weight: 600; margin: 0 0 16px; letter-spacing: -.01em; color: var(--text); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.layout:has(.col-media:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.video-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 58%;
  margin: 0 auto;
  background: #0a0f1c;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px -24px rgba(0,0,0,.7);
}

#avatar { width: 100%; height: 100%; object-fit: cover; display: block; background: #0a0f1c; }

/* Indicador de estado */
.status {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text);
  background: rgba(8,12,20,.62); backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
}
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.dot.listening { background: var(--ok); animation: pulse 1.4s infinite; }
.dot.thinking  { background: #fbbf24; animation: blink 1s infinite; }
.dot.speaking  { background: var(--accent2); animation: pulse 1s infinite; }
.dot.error     { background: #f85149; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
@keyframes blink { 50% { opacity: .3; } }

/* Barra de volume */
.vu {
  width: 58%;
  margin: 12px auto 0;
  height: 6px;
  background: #0e1322;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.vu-fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .05s linear;
}

/* Legendas */
.captions {
  margin: 16px 0 0;
  min-height: 84px;
  max-height: 160px;
  overflow-y: auto;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .95rem;
  line-height: 1.45;
}
.cap-line { margin: 0 0 6px; }
.cap-who { font-weight: 600; opacity: .85; margin-right: 4px; }
.cap-user { color: var(--muted); }
.cap-agent { color: var(--text); }

/* Painel de imagens */
.col-media {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
}
.media-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-weight: 600;
}
#media-img { width: 100%; border-radius: 12px; display: block; background: #0a0f1c; }
.media-caption { color: var(--muted); font-size: .88rem; margin: 10px 2px 0; }
.icon-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--muted);
  font-size: 1.4rem; line-height: 1; padding: 0 4px;
}
.icon-btn:hover { color: var(--text); }

/* Botão principal */
.btn {
  appearance: none; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #818cf8); color: #fff;
  font-size: 1rem; font-weight: 600;
  padding: 13px 22px; border-radius: 12px;
  width: 100%; margin-top: 16px;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Barra de controlo */
.controls { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.seg {
  display: inline-flex; align-self: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.seg-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--muted);
  font-size: .92rem; font-weight: 600;
  padding: 8px 18px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.seg-btn.is-active { background: linear-gradient(135deg, var(--accent), #818cf8); color: #fff; }

.ctrl-row { display: flex; gap: 8px; }
.pill {
  appearance: none; border: 0; cursor: pointer;
  background: #0e1322; color: var(--text); border: 1px solid var(--line);
  font-size: .92rem; font-weight: 600;
  padding: 11px 16px; border-radius: 12px;
  flex: 1;
  transition: filter .15s, background .15s;
}
.pill:hover { filter: brightness(1.2); }
.pill.is-off { background: #3a1f2b; color: #f3b9c2; border-color: #4a2530; }
.pill-stop { background: #1c2333; }
.pill-send { flex: none; background: linear-gradient(135deg, var(--accent), #818cf8); color: #fff; border: 0; }

.text-form { display: flex; gap: 8px; }
#text-input {
  flex: 1; border: 1px solid var(--line); border-radius: 12px;
  background: #0a0f1c; color: var(--text);
  padding: 12px 14px; font-size: 1rem; outline: none;
}
#text-input:focus { border-color: var(--accent); }

.hint { color: var(--muted); font-size: .8rem; margin-top: 14px; }

@media (max-width: 680px) {
  .layout:has(.col-media:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .video-wrap { width: 80%; }
  .vu { width: 80%; }
}