/* A cara do app. Escuro, denso, de conversa — e sem nenhum componente feito à
   mão: o que tem estado (botão, campo, gaveta, diálogo, etiqueta, aviso) é do
   Shoelace. O que está aqui é layout, cor e tipografia. */

:root, .sl-theme-dark {
  --fundo: #0B1220;
  --fundo-2: #111A2C;
  --fundo-3: #16223A;
  --borda: #22304D;
  --tinta: #E6EDF7;
  --tinta-fraca: #93A4C0;
  --marca: #7C9CFF;
  --minha: #1E3A6B;
  --alerta: #F0A84A;
  --sl-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* A escala primária do Shoelace inteira, e não só o tom do meio: o
     componente usa 500 no fundo, 600 no toque, 700 no pressionado e 400 no
     foco. Trocar um degrau só dá um botão que muda de identidade quando a
     pessoa encosta nele.
     E ela mora no mesmo seletor que o tema (`.sl-theme-dark`), não em `:root`:
     o tema declara a paleta ali, ganha por especificidade, e uma sobreposição
     em `:root` simplesmente não aparece. */
  --sl-color-primary-50:  #EEF3FF;
  --sl-color-primary-100: #DCE5FF;
  --sl-color-primary-200: #C0D0FF;
  --sl-color-primary-300: #9DB5FF;
  --sl-color-primary-400: #7C9CFF;
  --sl-color-primary-500: #5F83F5;
  --sl-color-primary-600: #4A6BE0;
  --sl-color-primary-700: #3A55B8;
  --sl-color-primary-800: #2C4190;
  --sl-color-primary-900: #1F2F68;
  --sl-color-primary-950: #16224C;
}

* { box-sizing: border-box; }

/* `hidden` TEM que esconder, inclusive componente.
   A folha do navegador dá `display: none` a `[hidden]` com a menor
   prioridade que existe, e todo web component declara o próprio `display` no
   `:host` — que vence. O resultado é um elemento marcado como escondido
   aparecendo na tela, e foi assim que a tela de entrada do app foi ao ar com
   um botão de login que ainda não existe. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;            /* APPS-GUIDE 8 */
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font: 400 16px/1.5 var(--sl-font-sans);
  touch-action: pan-y;                  /* APPS-GUIDE 8 */
  -webkit-tap-highlight-color: transparent;
}

/* ─── carregando e entrada ────────────────────────────────────────────────── */

#carregando {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--fundo);
}

#entrada { display: none; }
body[data-entrada="sim"] #entrada { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
body[data-entrada="sim"] #app { display: none; }

#entrada .cartao {
  max-width: 26rem; text-align: center;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 18px;
  padding: 40px 28px; display: grid; gap: 14px; justify-items: center;
}
#entrada h1 { margin: 0; font-size: 2rem; letter-spacing: -.02em; }
#entrada p { margin: 0; color: var(--tinta-fraca); }

.nota { color: var(--tinta-fraca); font-size: .875rem; margin: 0; }
.nota.aviso { color: var(--alerta); }

/* ─── esqueleto ───────────────────────────────────────────────────────────── */

#app {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "topo topo" "coluna painel";
  height: 100dvh;
}

#topo {
  grid-area: topo;
  display: flex; align-items: center; gap: 10px;
  padding: 10px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
  background: var(--fundo-2); border-bottom: 1px solid var(--borda);
}
#topo .marca { display: grid; line-height: 1.2; min-width: 0; margin-right: auto; }
#topo .marca strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topo .marca small { color: var(--tinta-fraca); font-size: .75rem; }
#versao { display: flex; align-items: center; }

#coluna {
  grid-area: coluna;
  border-right: 1px solid var(--borda);
  background: var(--fundo-2);
  display: flex; flex-direction: column; min-height: 0;
}
.coluna-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px; border-bottom: 1px solid var(--borda);
  color: var(--tinta-fraca); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
}
#lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; display: grid; gap: 4px; }
.vazio-lista { color: var(--tinta-fraca); font-size: .875rem; padding: 16px 12px; margin: 0; }

.conversa-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; border-radius: 10px;
  padding: 10px 12px; color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.conversa-item:hover { background: var(--fundo-3); }
.conversa-item.aberta { background: var(--fundo-3); box-shadow: inset 2px 0 0 var(--marca); }
.conversa-item .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-item sl-icon { color: var(--tinta-fraca); flex: none; }

#painel { grid-area: painel; display: grid; grid-template-rows: 1fr auto; min-height: 0; }

/* ─── o estado vazio, que é a tela em repouso ─────────────────────────────── */

#nada-aberto { display: none; }
body[data-tem="nada"] #linha, body[data-tem="nada"] #rodape { display: none; }
body[data-tem="nada"] #nada-aberto {
  display: grid; place-content: center; justify-items: center; gap: 12px;
  text-align: center; padding: 32px; max-width: 32rem; margin: 0 auto;
}
#nada-aberto sl-icon { font-size: 3rem; color: var(--marca); opacity: .7; }
#nada-aberto h2 { margin: 0; font-size: 1.4rem; }
#nada-aberto p { margin: 0; color: var(--tinta-fraca); }

/* ─── a conversa ──────────────────────────────────────────────────────────── */

#linha {
  overflow-y: auto; padding: 20px 16px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
/* A conversa começa embaixo, como toda conversa — e continua rolando quando
   passa da altura. `justify-content: flex-end` faria o topo ficar inalcançável
   no scroll; esta linha não. */
#linha > *:first-child { margin-top: auto; }
.vazio-conversa { margin: auto; text-align: center; color: var(--tinta-fraca); display: grid; gap: 8px; justify-items: center; }
.vazio-conversa sl-icon { font-size: 2.5rem; opacity: .5; }

.bolha {
  max-width: min(46rem, 88%); border-radius: 16px; padding: 12px 14px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  display: grid; gap: 6px;
}
.bolha.minha { margin-left: auto; background: var(--minha); border-color: #2C4E8C; }
.bolha.agente { margin-right: auto; }
.bolha header { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-fraca); }
.bolha .texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha footer { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--tinta-fraca); }
.bolha.escrevendo { border-style: dashed; }
.bolha.escrevendo .texto::after {
  content: '▌'; margin-left: 2px; color: var(--marca);
  animation: pisca 1s steps(2, start) infinite;
}
@keyframes pisca { to { visibility: hidden; } }

.anexo {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px 10px; font-size: .9rem;
}
.anexo small { margin-left: auto; color: var(--tinta-fraca); font-size: .72rem; white-space: nowrap; }
.anexo[data-estado="transcrevendo"] sl-icon, .anexo[data-estado="subindo"] sl-icon { color: var(--alerta); }
.transcricao { margin: 0 0 0 10px; font-style: italic; color: var(--tinta-fraca); font-size: .875rem; }

.passo, .tarefa, .erro {
  margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--tinta-fraca);
}
.tarefa { color: var(--marca); }
.erro { color: var(--alerta); }

/* ─── o rodapé: estado, pacote em montagem, composer ──────────────────────── */

#rodape {
  border-top: 1px solid var(--borda); background: var(--fundo-2);
  padding: 10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  display: grid; gap: 8px;
}
#estado { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tinta-fraca); }
#estado[data-estado="guardada"], #estado[data-estado="esperando"] { color: var(--alerta); }
#estado[data-estado="parada"] { color: #F87171; }
#estado[data-estado="respondendo"] { color: var(--marca); }

#staging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#staging .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); }
#gravando { color: #F87171; font-variant-numeric: tabular-nums; }

#composer { display: flex; align-items: flex-end; gap: 6px; }
#campo { flex: 1; }
#gravar.gravando { color: #F87171; }

/* ─── estreito ────────────────────────────────────────────────────────────── */

.so-estreito { display: none; }

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-areas: "topo" "painel"; }
  #app > #coluna { display: none; }          /* dentro da gaveta ela volta a aparecer */
  sl-drawer #coluna { display: flex; border-right: 0; height: 100%; }
  .so-estreito { display: inline-flex; }
  .bolha { max-width: 94%; }
}

sl-dialog::part(body) { display: grid; gap: 16px; }