/* Maritime Intelligence — paleta "carta náutica": papel frio, tinta azul-marinho, azul de sondagem.
   Cores de status (verde/âmbar/vermelho/cinza) aparecem só nas classificações de atraso. */
:root {
  --papel: #F2F4F6; --superficie: #FFFFFF; --tinta: #13222F; --tinta-suave: #5B6B78; --linha: #D5DCE2;
  --mar: #1F5F7A; --mar-claro: #E1EDF2; --normal: #2E7D4F; --atencao: #9A6200; --atraso: #B5382A; --indet: #66727C;
  --raio: 10px; --fonte: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0E1820; --superficie: #15222D; --tinta: #E3EBF1; --tinta-suave: #93A4B2; --linha: #26394A;
    --mar: #6FB3D2; --mar-claro: #1A3443; --normal: #6CC28E; --atencao: #E2B05B; --atraso: #F08A7C; --indet: #A2AEB8;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: var(--papel); line-height: 1.5; }
a { color: var(--mar); }
:focus-visible { outline: 3px solid var(--mar); outline-offset: 2px; }
header.topo { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.marca { font-weight: 700; display: flex; gap: 8px; align-items: center; margin-right: auto; }
header.topo nav { display: flex; gap: 4px; flex-wrap: wrap; }
header.topo nav a { padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--tinta); }
header.topo nav a.ativo, header.topo nav a:hover { background: var(--mar-claro); }
.contador { background: var(--atraso); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 7px; margin-left: 4px; font-weight: 700; }
main.pagina { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.1rem; margin: 26px 0 10px; }
.sub { color: var(--tinta-suave); margin: 0 0 16px; }
input[type=text], input[type=password], textarea, select { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; }
button, .botao { font: inherit; font-weight: 600; border: 1px solid var(--mar); background: var(--mar); color: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
button.sec { background: transparent; color: var(--mar); }
button.peq { padding: 4px 10px; font-size: .88rem; }
button:disabled { opacity: .55; cursor: progress; }
.caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--linha); vertical-align: top; font-size: .95rem; }
th { background: var(--papel); color: var(--tinta-suave); font-size: .85rem; border-top: 0; }
td form { display: inline; }
.aviso { background: var(--mar-claro); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; }
.aviso.erro { color: var(--atraso); }
.ok { color: var(--normal); font-weight: 600; } .nao { color: var(--atraso); font-weight: 600; }
.chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid currentColor; }
.chip.Normal { color: var(--normal); } .chip.Atenção { color: var(--atencao); } .chip.Atraso { color: var(--atraso); } .chip.Indeterminado { color: var(--indet); }

/* Chat */
.chat-app { display: grid; grid-template-columns: 250px minmax(0, 1fr); flex: 1; min-height: 0; position: relative; }
body:has(.chat-app) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.lista { border-right: 1px solid var(--linha); background: var(--superficie); overflow-y: auto; padding: 12px; }
.lista button { width: 100%; margin-bottom: 10px; }
.lista a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--tinta); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista a.ativo, .lista a:hover { background: var(--mar-claro); }
.lista small { color: var(--tinta-suave); }
.conversa { display: flex; flex-direction: column; min-width: 0; }
.mensagens { flex: 1; overflow-y: auto; padding: 22px max(16px, calc((100% - 820px) / 2)); display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 100%; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--mar); color: #fff; padding: 9px 14px; border-radius: 14px 14px 3px 14px; max-width: 80%; white-space: pre-wrap; }
.msg.assistant { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 18px; }
.msg.assistant p { margin: 0 0 8px; } .msg.assistant p:last-child { margin: 0; }
.msg.assistant ul { margin: 4px 0 10px; padding-left: 20px; }
.msg.assistant h3 { font-size: 1rem; margin: 14px 0 6px; }
.msg.assistant code { font-family: var(--mono); font-size: .9em; background: var(--papel); padding: 1px 5px; border-radius: 4px; }
.pensando { color: var(--tinta-suave); font-style: italic; }
.vazio { margin: auto; text-align: center; color: var(--tinta-suave); max-width: 560px; }
.vazio h1 { color: var(--tinta); font-size: 1.8rem; letter-spacing: -0.01em; }
.exemplos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.exemplos button { background: var(--superficie); color: var(--tinta); border-color: var(--linha); font-weight: 400; }
.status-int { font-size: .85rem; color: var(--tinta-suave); margin-top: 18px; }
form.enviar { display: flex; gap: 8px; padding: 12px max(16px, calc((100% - 820px) / 2)) 18px; border-top: 1px solid var(--linha); background: var(--papel); }
form.enviar textarea { flex: 1; min-width: 0; resize: none; height: 48px; max-height: 160px; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 360px; display: grid; gap: 12px; }
.login label { display: grid; gap: 4px; font-size: .92rem; }
@media (max-width: 760px) {
  .chat-app { grid-template-columns: minmax(0, 1fr); }
  .lista { display: none; }
  .lista.aberta { display: block; position: absolute; inset: 0; z-index: 5; }
  header.topo { padding: 8px 12px; gap: 6px; }
  header.topo nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  header.topo nav a { white-space: nowrap; }
  #abrir-lista { display: inline-block !important; }
  table { display: block; overflow-x: auto; }
}