/* Temas: Desert, Nord e Rosé Pine. Cada um em modo Claro ou Escuro.
   Pares de texto >= 4,5:1 e de componentes >= 3:1, verificados na geração das cores. */
:root {
  color-scheme: light;
  --bg: #f2ead9; --surface: #fbfaf9; --surface-alt: #ede7e3;
  --text: #292724; --muted: #615c51; --line: #ddcba6; --input-line: #615c51;
  --btn-bg: #292724; --btn-fg: #f2ead9; --btn-hover: #3d3a34;
  --focus: #bc672f; --accent: #bc672f; --ok: #5c523d;
  --err: #8a2a0f; --err-bg: #f6e3d6;
  --spk-1: #bc672f; --spk-2: #816f4b; --spk-3: #7e7767; --spk-4: #5c523d;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}
html[data-palette="desert"][data-mode="light"] {
  color-scheme: light;
  --bg: #f2ead9; --surface: #fbfaf9; --surface-alt: #ede7e3;
  --text: #292724; --muted: #615c51; --line: #ddcba6; --input-line: #615c51;
  --btn-bg: #292724; --btn-fg: #f2ead9; --btn-hover: #3d3a34;
  --focus: #bc672f; --accent: #bc672f; --ok: #5c523d;
  --err: #8a2a0f; --err-bg: #f6e3d6;
  --spk-1: #bc672f; --spk-2: #816f4b; --spk-3: #7e7767; --spk-4: #5c523d;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}
html[data-palette="desert"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #292724; --surface: #3d3a34; --surface-alt: #292724;
  --text: #f2ead9; --muted: #bbb4a5; --line: #615c51; --input-line: #9f9684;
  --btn-bg: #dd7c3c; --btn-fg: #292724; --btn-hover: #f29d63;
  --focus: #f29d63; --accent: #dd7c3c; --ok: #ddcba6;
  --err: #f29d63; --err-bg: #292724;
  --spk-1: #dd7c3c; --spk-2: #ddcba6; --spk-3: #bbb4a5; --spk-4: #f29d63;
  --shadow: none;
}
html[data-palette="nord"][data-mode="light"] {
  color-scheme: light;
  --bg: #e5e9f0; --surface: #eceff4; --surface-alt: #d8dee9;
  --text: #2e3440; --muted: #4c566a; --line: #d8dee9; --input-line: #4c566a;
  --btn-bg: #2e3440; --btn-fg: #eceff4; --btn-hover: #3b4252;
  --focus: #5e81ac; --accent: #5e81ac; --ok: #57664c;
  --err: #9f5158; --err-bg: #e5e9f0;
  --spk-1: #5e81ac; --spk-2: #bf616a; --spk-3: #607053; --spk-4: #6b5a72;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}
html[data-palette="nord"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #2e3440; --surface: #3b4252; --surface-alt: #2e3440;
  --text: #eceff4; --muted: #d8dee9; --line: #4c566a; --input-line: #81a1c1;
  --btn-bg: #88c0d0; --btn-fg: #2e3440; --btn-hover: #8fbcbb;
  --focus: #88c0d0; --accent: #88c0d0; --ok: #a3be8c;
  --err: #d89fa4; --err-bg: #2e3440;
  --spk-1: #88c0d0; --spk-2: #b48ead; --spk-3: #a3be8c; --spk-4: #ebcb8b;
  --shadow: none;
}
html[data-palette="rose"][data-mode="light"] {
  color-scheme: light;
  --bg: #faf4ed; --surface: #fffaf3; --surface-alt: #f2e9e1;
  --text: #575279; --muted: #6a6781; --line: #dfdad9; --input-line: #938fa0;
  --btn-bg: #286983; --btn-fg: #fffaf3; --btn-hover: #1f5a70;
  --focus: #286983; --accent: #907aa9; --ok: #286983;
  --err: #9a5568; --err-bg: #f2e9e1;
  --spk-1: #286983; --spk-2: #b4637a; --spk-3: #907aa9; --spk-4: #56949f;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}
html[data-palette="rose"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #232136; --surface: #2a273f; --surface-alt: #232136;
  --text: #e0def4; --muted: #918dab; --line: #393552; --input-line: #908caa;
  --btn-bg: #c4a7e7; --btn-fg: #232136; --btn-hover: #ea9a97;
  --focus: #ea9a97; --accent: #ea9a97; --ok: #9ccfd8;
  --err: #eb6f92; --err-bg: #232136;
  --spk-1: #c4a7e7; --spk-2: #ea9a97; --spk-3: #f6c177; --spk-4: #9ccfd8;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text);
  max-width: 1000px; margin: 0 auto; padding: 1.75rem 1.25rem 3.5rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}
body.center { display: grid; place-items: center; min-height: 100vh; max-width: none; padding: 1.25rem; }

h1 { font-size: 1.35rem; margin: 0; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }
.meta, .hint, .warn, .drop-sub { color: var(--muted); font-size: .9rem; }
.meta { margin-top: .2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin: 0 0 .15rem; font-weight: 600; }
code { font: .88em ui-monospace, Menlo, Consolas, monospace; background: var(--surface-alt); padding: .08em .4em; border-radius: 6px; }

.brand { display: flex; align-items: center; gap: .85rem; }
.mark {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-fg);
}
.mark svg { fill: currentColor; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.top-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.login-top { display: flex; justify-content: center; margin-bottom: .9rem; gap: .6rem; flex-wrap: wrap; }

/* segmentados (paleta e modo) */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--surface-alt); border: 1px solid var(--line);
}
.seg button {
  font: inherit; font-size: .86rem; color: var(--muted); background: transparent; border: 0;
  padding: .32rem .7rem; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.4rem; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.card[hidden] { display: none; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: .45rem; }

.btn {
  font: inherit; font-weight: 600; font-size: .92rem; padding: .55rem 1.05rem; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; line-height: 1.2; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn.primary:hover:not(:disabled) { background: var(--btn-hover); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--input-line); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-alt); }
.btn.small { padding: .35rem .75rem; font-size: .86rem; border-radius: 8px; }
.btn.block { width: 100%; margin-top: .5rem; padding: .7rem 1rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, .drop:focus-visible, .seg button:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

label { font-size: .88rem; color: var(--muted); font-weight: 500; }
input[type="text"], input[type="password"] {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--input-line); border-radius: 10px; padding: .6rem .75rem; width: 100%;
}
input[type="text"]:focus, input[type="password"]:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }

.login-wrap { width: min(420px, 100%); }
.login { width: 100%; padding: 1.75rem; }
.login .brand { margin-bottom: 1.35rem; }
.alert {
  background: var(--err-bg); color: var(--err); border-radius: 10px;
  padding: .65rem .8rem; margin: 0 0 .8rem; font-size: .93rem; border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
}

.drop {
  position: relative; display: grid; place-items: center; gap: .3rem; text-align: center;
  border: 1.5px dashed var(--input-line); border-radius: 14px; padding: 2.2rem 1rem; cursor: pointer;
  background: var(--surface-alt); transition: border-color .15s, background-color .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); }
.drop.over { background: var(--surface); }
.drop-icon { color: var(--accent); margin-bottom: .3rem; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-title { font-weight: 620; font-size: 1.02rem; }
.warn { margin-top: 1rem; font-size: .86rem; }

.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.summary { font-weight: 600; font-size: .95rem; }
.queue { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.item {
  border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.15rem 1.2rem; background: var(--surface-alt);
}
.item-head { display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; }
.name { font-weight: 620; word-break: break-all; }
.chip {
  font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line); background: var(--surface);
}
.chip.ok { color: var(--ok); }
.chip.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.note { margin-top: .5rem; font-size: .92rem; color: var(--muted); }
.note.err { color: var(--err); }
.bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: .75rem; }
.bar > i { display: block; height: 100%; width: 40%; background: var(--accent); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .bar > i { animation: none; width: 100%; opacity: .5; } }

/* ações no topo de cada transcrição (fixas ao rolar a conversa) */
.item-actions {
  position: sticky; top: 8px; z-index: 2;
  display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  margin: .8rem -.2rem 0; padding: .55rem .6rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.item-actions .spacer { flex: 1; }

.speakers { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .2rem; }
.spk-pill {
  display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .55rem .2rem .3rem;
}
.spk-pill .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); flex: none; }
.spk-pill input {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: .15rem .4rem; width: 150px;
}
.spk-pill input:hover { border-color: var(--line); }
.spk-pill input:focus { border-color: var(--focus); outline: none; background: var(--surface-alt); }

.convo { display: grid; gap: .7rem; margin-top: .7rem; }
.turn {
  border-left: 3px solid var(--c); background: var(--surface);
  border-radius: 0 10px 10px 0; padding: .55rem .9rem .6rem 1rem;
}
.turn-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.turn-name { font-weight: 650; font-size: .92rem; color: var(--text); }
.turn-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.turn-text { margin-top: .2rem; font-size: 1rem; line-height: 1.65; white-space: pre-wrap; }
.spk-0 { --c: var(--spk-1); } .spk-1 { --c: var(--spk-2); }
.spk-2 { --c: var(--spk-3); } .spk-3 { --c: var(--spk-4); }
.empty { color: var(--muted); font-style: italic; margin-top: .6rem; }

@media (max-width: 640px) {
  body { padding: 1.1rem .8rem 2.5rem; }
  .card { padding: 1.1rem; border-radius: 14px; }
  .spk-pill input { width: 120px; }
  .item-actions { position: static; }
  .item-actions .btn { flex: 1; }
}

/* seletor de paleta (dropdown) */
.ctl { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.ctl-label { font-size: .84rem; color: var(--muted); font-weight: 500; }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
  content: ""; position: absolute; right: .85rem; top: 50%; width: 6px; height: 6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select-wrap select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: .9rem; font-weight: 550;
  color: var(--text); background: var(--surface); border: 1px solid var(--input-line);
  border-radius: 10px; padding: .42rem 2.2rem .42rem .8rem; min-width: 150px; cursor: pointer;
}
.select-wrap select:hover { background: var(--surface-alt); }
.select-wrap select option { background: var(--surface); color: var(--text); }
.select-wrap select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .select-wrap select { min-width: 0; } .ctl-label { display: none; } }