/* =========================================================================
   LucaoLabs Studio — base visual
   Escalas primeiro, componentes depois. Todo valor novo sai daqui: se um
   numero nao existe na escala, ele nao entra solto no meio do arquivo.
   ========================================================================= */

:root {
  /* superficies, do fundo para a frente */
  --bg:      #0b0d11;
  --panel:   #14181f;
  --panel2:  #1b202a;
  --panel3:  #232935;
  --line:    #262d3a;
  --line2:   #333b4a;

  /* texto */
  --fg:      #e8ebf2;
  --fg2:     #b7c0d0;
  --dim:     #8d97a8;

  /* marca e estados */
  --accent:  #6ea8fe;
  --accent2: #a78bfa;
  --accent-soft: rgba(110,168,254,.14);
  --ok:      #4ade80;
  --warn:    #fbbf24;
  --err:     #f87171;

  /* tipografia */
  --t-xs:   11.5px;
  --t-sm:   12.5px;
  --t-md:   13.5px;
  --t-base: 15px;
  --t-lg:   17px;
  --t-xl:   21px;
  --t-2xl:  27px;

  /* espacamento: ritmo de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 8px;  --r: 11px;  --r-lg: 14px;  --r-full: 999px;

  --sombra:    0 1px 2px rgba(0,0,0,.28);
  --sombra-lg: 0 8px 28px rgba(0,0,0,.45);
  --transicao: .15s ease;
  --foco: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  font: var(--t-base)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* foco visivel e igual em tudo que recebe teclado */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------- topo */
header.top {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.brand { font-weight: 700; letter-spacing: -.2px; color: var(--fg); font-size: var(--t-lg); }
.brand span { color: var(--accent2); }
.brand:hover { text-decoration: none; }
nav.top { display: flex; gap: var(--s1); flex: 1; flex-wrap: wrap; }
nav.top a {
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--dim); font-weight: 500; font-size: var(--t-md);
  transition: background var(--transicao), color var(--transicao);
}
nav.top a:hover { background: var(--panel2); color: var(--fg); text-decoration: none; }
nav.top a.on { background: var(--panel2); color: var(--fg); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: var(--r-full);
  background: var(--panel2); border: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--dim); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.on  { background: var(--ok);  box-shadow: 0 0 8px var(--ok); }
.dot.off { background: var(--err); }

/* ----------------------------------------------------------------- layout */
main { max-width: 1080px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }
main.wide { max-width: 1360px; }

h1 { font-size: var(--t-2xl); line-height: 1.25; letter-spacing: -.4px; margin: 0 0 var(--s1); }
h2 { font-size: var(--t-lg); line-height: 1.35; margin: var(--s6) 0 var(--s3); }
h3 { font-size: var(--t-base); margin: var(--s4) 0 var(--s2); }
.sub { color: var(--dim); margin: 0 0 var(--s5); max-width: 68ch; }
.hint { font-size: var(--t-sm); color: var(--dim); line-height: 1.55; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4);
  box-shadow: var(--sombra);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- controles */
label { display: block; font-size: var(--t-md); color: var(--dim); margin-bottom: var(--s1); }
input, textarea, select {
  font: inherit; color: var(--fg); background: var(--panel2);
  border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); width: 100%;
  transition: border-color var(--transicao), background var(--transicao);
}
input:hover, textarea:hover, select:hover { border-color: var(--dim); }
textarea { resize: vertical; min-height: 82px; line-height: 1.55; }
.field { margin-bottom: var(--s4); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }

button, .btn {
  font: inherit; font-weight: 600; font-size: var(--t-md);
  background: var(--accent); color: #08101f; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: var(--s2) var(--s4);
  width: auto; cursor: pointer; transition: filter var(--transicao),
  background var(--transicao), border-color var(--transicao);
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
button:active { filter: brightness(.95); }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.ghost { background: var(--panel2); color: var(--fg); border-color: var(--line2); }
button.ghost:hover { background: var(--panel3); filter: none; }
button.danger { background: var(--err); color: #2a0b0b; }
button.small { padding: var(--s1) var(--s3); font-size: var(--t-sm); }
button.bloco { width: 100%; padding: var(--s3) var(--s4); }

.checkline { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.checkline input { width: auto; }
.checkline label { margin: 0; color: var(--fg); font-size: var(--t-md); }

.msg { padding: var(--s3) var(--s4); border-radius: var(--r-sm);
       margin-bottom: var(--s4); font-size: var(--t-md); line-height: 1.5; }
.msg.ok  { background: #0f2a1c; color: #b6f0cd; border: 1px solid #1d5c37; }
.msg.err { background: #331515; color: #ffc9c9; border: 1px solid #6b2727; }

table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
th { text-align: left; color: var(--dim); font-weight: 600; font-size: var(--t-sm);
     text-transform: uppercase; letter-spacing: .4px;
     padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: var(--panel2); }
tr:last-child td { border-bottom: none; }

.tag { display: inline-block; font-size: var(--t-xs); padding: 2px var(--s2);
       border-radius: var(--r-full); background: var(--panel2);
       border: 1px solid var(--line2); color: var(--dim); white-space: nowrap; }
.tag.ok   { color: var(--ok);   border-color: #1d5c37; background: #0f2a1c; }
.tag.warn { color: var(--warn); border-color: #5c4a1d; background: #2a230f; }
.tag.err  { color: var(--err);  border-color: #6b2727; background: #2a1010; }

details summary { cursor: pointer; color: var(--dim); font-size: var(--t-md);
                  padding: var(--s2) 0; user-select: none; }
details summary:hover { color: var(--fg); }

code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
            font-size: var(--t-sm); }
pre { background: var(--panel2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: var(--s3); overflow-x: auto; }

.center-box { max-width: 400px; margin: 9vh auto; }
footer { text-align: center; padding: var(--s5) var(--s5) var(--s6);
         color: var(--dim); font-size: var(--t-sm); }

/* ===================================================================== chat */
.chat-wrap { display: grid; grid-template-columns: 260px 1fr; gap: var(--s4); }
@media (max-width: 820px) { .chat-wrap { grid-template-columns: 1fr; } .convs { display: none; } }

.convs { max-height: 70vh; overflow-y: auto; }
.conv-item { display: flex; align-items: center; border-radius: var(--r-sm);
             transition: background var(--transicao); }
.conv-item:hover, .conv-item.on { background: var(--panel2); }
.conv-titulo { flex: 1; padding: var(--s2) var(--s3); color: var(--dim);
               font-size: var(--t-md); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.conv-item:hover .conv-titulo, .conv-item.on .conv-titulo { color: var(--fg); text-decoration: none; }
.conv-acao { background: none; border: none; color: var(--dim); padding: var(--s1) var(--s2);
             font-size: var(--t-sm); opacity: 0; }
.conv-item:hover .conv-acao { opacity: 1; }
.conv-acao:hover { color: var(--fg); filter: none; }

.chat-topo { display: flex; align-items: center; gap: var(--s3);
             margin-bottom: var(--s3); padding-bottom: var(--s3);
             border-bottom: 1px solid var(--line); }
.chat-topo select { width: auto; max-width: 260px; padding: var(--s1) var(--s2);
                    font-size: var(--t-md); }

#log { min-height: 45vh; max-height: 62vh; overflow-y: auto; padding-right: var(--s2); }
.turn { margin-bottom: var(--s4); }
.turn .who { font-size: var(--t-xs); color: var(--dim); margin-bottom: var(--s1);
             text-transform: uppercase; letter-spacing: .5px; }
.bubble { background: var(--panel2); border: 1px solid var(--line);
          border-radius: var(--r); padding: var(--s3) var(--s4);
          word-wrap: break-word; overflow-wrap: anywhere; }
.turn.me .bubble { background: #182238; border-color: #2b3d63; }
.composer { display: flex; gap: var(--s3); margin-top: var(--s3); align-items: flex-end; }
.composer textarea { min-height: 54px; max-height: 200px; }

.acoes { display: flex; gap: var(--s1); margin-top: var(--s1);
         opacity: 0; transition: opacity var(--transicao); }
.turn:hover .acoes { opacity: 1; }
.acao { background: none; border: none; color: var(--dim); font-size: var(--t-sm);
        padding: 2px var(--s2); border-radius: var(--r-sm); }
.acao:hover { background: var(--panel2); color: var(--fg); filter: none; }

/* chat ocupando a tela: so a area de mensagens rola */
body:has(main.chat-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body:has(main.chat-page) header.top { flex: 0 0 auto; }
body:has(main.chat-page) footer { display: none; }
main.chat-page { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex;
                 max-width: 1360px; width: 100%; padding-bottom: var(--s4); }
.chat-page .chat-wrap { flex: 1; min-height: 0; }
.chat-page .chat-wrap > * { min-height: 0; }
.chat-page .convs { height: 100%; max-height: none; overflow-y: auto; }
.chat-page .chat-wrap > section.card { display: flex; flex-direction: column; }
.chat-page #log { flex: 1 1 auto; min-height: 0; max-height: none; }
.chat-page .composer { flex: 0 0 auto; }
@media (max-width: 820px) {
  body:has(main.chat-page) { height: auto; overflow: auto; display: block; }
  main.chat-page { display: block; height: auto; overflow: visible; }
  .chat-page #log { max-height: 60vh; }
}

/* markdown dentro da bolha */
.bubble .texto > *:first-child { margin-top: 0; }
.bubble .texto > *:last-child { margin-bottom: 0; }
.bubble p { margin: 0 0 var(--s3); }
.bubble ul, .bubble ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
.bubble li { margin: var(--s1) 0; }
.bubble h1, .bubble h2, .bubble h3 { font-size: var(--t-base); margin: var(--s4) 0 var(--s2); }
.bubble blockquote { margin: var(--s2) 0; padding-left: var(--s3);
                     border-left: 3px solid var(--line2); color: var(--dim); }
.bubble table { margin: var(--s3) 0; display: block; overflow-x: auto; }
.bubble th, .bubble td { border: 1px solid var(--line); padding: var(--s2) var(--s3); }
.bubble :not(pre) > code { background: var(--bg); border: 1px solid var(--line);
                           border-radius: 5px; padding: 1px 5px; }
.bubble pre { position: relative; background: #090b0f; border: 1px solid var(--line);
              border-radius: var(--r); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.bubble pre code { background: none; border: none; padding: 0; }
.copiar-code { position: absolute; top: var(--s2); right: var(--s2);
               padding: 2px var(--s2); font-size: var(--t-xs);
               background: var(--panel2); color: var(--dim);
               border: 1px solid var(--line2); border-radius: var(--r-sm); opacity: 0; }
.bubble pre:hover .copiar-code { opacity: 1; }
.copiar-code:hover { color: var(--fg); filter: none; }
.bubble .texto textarea { width: 100%; }

/* etapas do agente e fontes */
.etapas { margin-bottom: var(--s3); }
.etapa { display: flex; gap: var(--s2); align-items: baseline; font-size: var(--t-sm);
         color: var(--dim); padding: 2px 0 2px var(--s3);
         border-left: 2px solid var(--line2); margin-left: 2px; }
.etapa > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fontes { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line);
          display: flex; flex-direction: column; gap: 2px; }
.fontes .titulo { font-size: var(--t-xs); text-transform: uppercase;
                  letter-spacing: .5px; color: var(--dim); margin-bottom: 2px; }
.fontes a, .fontes span { font-size: var(--t-sm); overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================= imagens */
.bar { height: 6px; background: var(--panel2); border-radius: var(--r-full);
       overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0;
           background: linear-gradient(90deg, var(--accent), var(--accent2));
           transition: width .3s ease; }
.gal { display: grid; gap: var(--s3);
       grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gal figure { position: relative; margin: 0; background: var(--panel);
              border: 1px solid var(--line); border-radius: var(--r);
              overflow: hidden; transition: border-color var(--transicao); }
.gal figure:hover { border-color: var(--line2); }
.gal img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.gal figcaption { padding: var(--s2) var(--s3); font-size: var(--t-sm);
                  color: var(--dim); max-height: 56px; overflow: hidden; }

.gal figure.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.marcar { position: absolute; top: var(--s2); left: var(--s2); width: 22px; height: 22px;
          border-radius: var(--r-sm); border: 1px solid var(--line2);
          background: rgba(11,13,17,.85); opacity: 0; display: flex;
          align-items: center; justify-content: center; font-size: var(--t-md);
          line-height: 1; color: transparent; padding: 0; }
.gal figure:hover .marcar, .gal.selecionando .marcar { opacity: 1; }
.gal figure.sel .marcar { background: var(--accent); border-color: var(--accent);
                          color: #08101f; opacity: 1; }
.apagar-img { position: absolute; top: var(--s2); right: var(--s2);
              padding: var(--s1) var(--s2); font-size: var(--t-md); line-height: 1;
              background: rgba(11,13,17,.85); color: var(--dim);
              border: 1px solid var(--line2); border-radius: var(--r-sm); opacity: 0; }
.gal figure:hover .apagar-img { opacity: 1; }
.apagar-img:hover { color: var(--err); border-color: var(--err); filter: none; }
.barra-selecao { position: sticky; top: 58px; z-index: 10; display: flex;
                 gap: var(--s3); align-items: center; background: var(--panel);
                 border: 1px solid var(--line); border-radius: var(--r-lg);
                 padding: var(--s3) var(--s4); margin-bottom: var(--s4);
                 box-shadow: var(--sombra-lg); }
.barra-selecao .conta { flex: 1; font-size: var(--t-md); }

/* ================================================== dialogos e login Google */
dialog { border: 1px solid var(--line); background: var(--panel); color: var(--fg);
         border-radius: var(--r-lg); padding: 0; max-width: 92vw; max-height: 92vh;
         box-shadow: var(--sombra-lg); }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
#lightbox img { max-width: 88vw; max-height: 80vh; display: block; }
#lightbox .cap { padding: var(--s3) var(--s4); font-size: var(--t-md); color: var(--dim); }
#modal { max-width: 420px; width: 92vw; }
.modal-box { padding: var(--s5); }
.modal-box h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.modal-acoes { display: flex; gap: var(--s3); justify-content: flex-end; margin-top: var(--s5); }

.btn-google { display: flex; align-items: center; justify-content: center; gap: var(--s3);
              width: 100%; padding: var(--s3) var(--s4); border-radius: var(--r-sm);
              font-weight: 600; background: #fff; color: #1f1f1f;
              border: 1px solid #dadce0; }
.btn-google:hover { background: #f2f4f7; text-decoration: none; }
.ou { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0;
      color: var(--dim); font-size: var(--t-md); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =============================================================== documentos */
.solta { border: 2px dashed var(--line2); border-radius: var(--r-lg);
         padding: var(--s6); text-align: center; cursor: pointer;
         transition: border-color var(--transicao), background var(--transicao); }
.solta:hover, .solta.ativo { border-color: var(--accent); background: var(--panel2); }