/* ============ VanderleIA — assistente lateral (chat) ============
   CSS isolado do chat, carregado por TODAS as telas (inclusive a de Cotações,
   que é standalone e não usa goflux.css). É autocontido: define os tokens de
   acento/texto/sombra que nem toda tela expõe, escopados aos elementos do chat
   para não vazar no restante da página. Tokens de superfície (--surface*,
   --border*, --muted) vêm do host (goflux.css ou a própria tela). */
:root{--gf-chat-w:400px}

.gf-chat-fab, .gf-chat, .gf-chat-backdrop{
  --view:#ffdd00; --view-700:#e6c700;
  --view-dim:rgba(255,221,0,.12); --view-dim-2:rgba(255,221,0,.06);
  --text:#ececf4; --text-soft:#d2d2e0; --neg-text:#ff5d6c; --pos-text:#2fcf78;
  --font:'Nunito','Trebuchet MS',Verdana,Arial,sans-serif;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
:root[data-theme="light"] .gf-chat-fab,
:root[data-theme="light"] .gf-chat,
:root[data-theme="light"] .gf-chat-backdrop{
  --text:#1d1d33; --text-soft:#3f3f58; --view-dim:rgba(255,221,0,.20);
  --shadow:0 10px 30px -16px rgba(40,40,80,.25);
}

/* Botão flutuante que abre o chat. */
.gf-chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--view); color:#1d1d33; border:none; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.gf-chat-fab:hover{transform:translateY(-2px) scale(1.04)}
.gf-chat-fab.hidden{display:none}

/* Backdrop só aparece em mobile / tela cheia. */
.gf-chat-backdrop{
  position:fixed; inset:0; z-index:118; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.gf-chat-backdrop.show{opacity:1; pointer-events:auto}

/* Painel: docado à direita, altura total, largura variável (arraste). */
.gf-chat{
  position:fixed; top:0; right:0; z-index:119;
  width:var(--gf-chat-w); max-width:100vw; height:100vh;
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid rgba(255,255,255,.21);
  /* halo branco suave na borda esquerda + sombra de profundidade: separa do fundo */
  box-shadow:-16px 0 44px -10px rgba(0,0,0,.55), -4px 0 26px -2px rgba(255,255,255,.18);
  transform:translateX(100%); transition:transform .22s ease;
}
.gf-chat.open{transform:translateX(0)}
.gf-chat.fullscreen{width:100vw !important}

/* Tela cheia: em vez de esticar as mensagens de ponta a ponta (ilegível numa
   tela larga), o conteúdo vira uma COLUNA CENTRALIZADA com respiro dos lados —
   o mesmo padrão de leitura do chat do Claude, com as cores da marca. O gutter
   é elástico: colapsa em telas estreitas e nunca deixa a coluna passar de ~770px.
   O cabeçalho segue de ponta a ponta; só o log e o compositor recebem a coluna. */
@media(min-width:900px){
  .gf-chat.fullscreen .gf-chat__log,
  .gf-chat.fullscreen .gf-chat__form{
    padding-left:max(24px, calc(50% - 385px));
    padding-right:max(24px, calc(50% - 385px));
  }
  /* a bolha do usuário não precisa ir tão larga na coluna centralizada */
  .gf-chat.fullscreen .gf-msg{max-width:min(88%, 620px)}
}

/* Alça de redimensionamento (borda esquerda), estilo VSCode. */
.gf-chat__resize{
  position:absolute; left:-3px; top:0; width:7px; height:100%;
  cursor:col-resize; z-index:1; background:transparent;
}
.gf-chat__resize:hover,.gf-chat__resize.dragging{background:var(--view-dim)}
.gf-chat.fullscreen .gf-chat__resize{display:none}

.gf-chat__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border-soft); flex:0 0 auto;
}
.gf-chat__title{font-size:15px; color:var(--muted); display:flex; align-items:center; gap:9px; min-width:0}
.gf-chat__title b{color:var(--text)}
.gf-chat__truck{color:var(--view); flex:0 0 auto}
.gf-chat__truck--inline{vertical-align:-3px}   /* caminhão desenhado no meio do texto da saudação */
.gf-chat__titles{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.gf-chat__name{color:var(--text); font-weight:600}
.gf-chat__sub{font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gf-chat__tools{display:flex; gap:6px}
.gf-chat__icon{
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.gf-chat__icon:hover{background:var(--surface-2); color:var(--text)}

/* DEMO: barra + pill on/off para simular a trava do plano grátis. */
.gf-chat__demo-bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 16px; border-bottom:1px solid var(--border-soft); background:var(--view-dim-2);
}
.gf-chat__demo-label{font-size:11.5px; color:var(--muted)}
.gf-chat__demo-label em{font-style:normal; opacity:.7}
.gf-chat__switch{
  flex:0 0 auto; width:40px; height:22px; border-radius:99px; cursor:pointer; padding:0;
  background:var(--surface-3,rgba(127,127,127,.3)); border:1px solid var(--border);
  position:relative; transition:background .18s ease, border-color .18s ease;
}
.gf-chat__switch-knob{
  position:absolute; top:50%; left:2px; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--muted); transition:left .18s ease, background .18s ease;
}
.gf-chat__switch.on{background:var(--view); border-color:var(--view)}
.gf-chat__switch.on .gf-chat__switch-knob{left:20px; background:#1d1d33}

.gf-chat__log{
  flex:1 1 auto; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.gf-msg{
  max-width:88%; padding:10px 13px; border-radius:13px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word;
}
.gf-msg--user{align-self:flex-end; background:var(--view); color:#1d1d33; border:1px solid var(--view)}
.gf-msg--bot{align-self:flex-start; background:none; color:var(--text-soft); border:none; padding-left:2px; padding-right:2px}
.gf-msg--erro{align-self:flex-start; background:rgba(255,93,108,.10); color:var(--neg-text); border:1px solid rgba(255,93,108,.3)}
.gf-msg--bot.typing{color:var(--muted); font-style:italic}
/* Bolha do bot com markdown renderizado: blocos reais, não texto pré-formatado. */
.gf-msg--md{white-space:normal}
.gf-msg--md>*:first-child{margin-top:0}
.gf-msg--md>*:last-child{margin-bottom:0}
.gf-msg--md p{margin:0 0 8px}
.gf-msg--md h1,.gf-msg--md h2,.gf-msg--md h3,
.gf-msg--md h4,.gf-msg--md h5,.gf-msg--md h6{margin:10px 0 6px; line-height:1.3; color:var(--text)}
.gf-msg--md h1{font-size:1.25em} .gf-msg--md h2{font-size:1.15em}
.gf-msg--md h3{font-size:1.07em} .gf-msg--md h4,.gf-msg--md h5,.gf-msg--md h6{font-size:1em}
.gf-msg--md ul,.gf-msg--md ol{margin:0 0 8px; padding-left:20px}
.gf-msg--md li{margin:2px 0}
.gf-msg--md a{color:var(--view); text-decoration:underline}
.gf-msg--md strong{color:var(--text)}
.gf-msg--md code{
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:.9em;
  background:var(--surface-3,rgba(127,127,127,.16)); padding:1px 5px; border-radius:5px;
}
.gf-msg--md pre{
  margin:0 0 8px; padding:10px 12px; overflow-x:auto; border-radius:9px;
  background:var(--surface-3,rgba(127,127,127,.16)); border:1px solid var(--border-soft);
}
.gf-msg--md pre code{background:none; padding:0; font-size:.86em}
.gf-msg--md hr{border:none; border-top:1px solid var(--border-soft); margin:12px 0}
.gf-msg--md .gf-md-task{list-style:none; margin-left:-16px}
/* Tabela: rola horizontal dentro da bolha, nunca estoura o painel. */
.gf-msg--md .gf-md-table{overflow-x:auto; margin:0 0 10px; -webkit-overflow-scrolling:touch}
.gf-msg--md table{border-collapse:collapse; width:100%; font-size:.86em}
.gf-msg--md th,.gf-msg--md td{
  border:1px solid var(--border-soft); padding:5px 9px; text-align:left; white-space:nowrap;
}
.gf-msg--md th{background:var(--surface-3,rgba(127,127,127,.16)); color:var(--text); font-weight:600}

.gf-chat__form{
  flex:0 0 auto; display:flex; gap:8px; align-items:flex-end;
  padding:12px 14px; border-top:1px solid var(--border-soft);
}
.gf-chat__form[hidden]{display:none}   /* trava do plano grátis substitui o form */
.gf-chat__input{
  flex:1 1 auto; resize:none; max-height:140px; min-height:40px;
  padding:9px 12px; border-radius:10px; font-family:var(--font); font-size:14px;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
}
.gf-chat__input:focus{outline:none; border-color:var(--view); box-shadow:0 0 0 2px var(--view-dim)}
.gf-chat__send{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--view); color:#1d1d33; border:none; transition:opacity .15s ease;
}
.gf-chat__send:disabled{opacity:.5; cursor:default}

/* Trava do plano grátis: cadeado + upsell de Premium, substitui o campo de envio. */
.gf-chat__lock{
  flex:0 0 auto; text-align:center; padding:20px 18px 22px;
  border-top:1px solid var(--border-soft); background:var(--view-dim-2);
}
.gf-chat__lock-badge{
  width:46px; height:46px; margin:0 auto 10px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:var(--view-dim); border:1px solid var(--view);
}
.gf-chat__lock-title{margin:0 0 4px; font-size:15px; color:var(--text)}
.gf-chat__lock-sub{margin:0 0 12px; font-size:13px; color:var(--muted)}
.gf-chat__lock-perks{
  list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--text-soft); text-align:left; max-width:260px; margin-inline:auto;
}
.gf-chat__lock-perks li{padding-left:22px; position:relative}
.gf-chat__lock-perks li::before{content:"✓"; position:absolute; left:4px; color:var(--view-700); font-weight:700}
.gf-chat__premium{
  width:100%; max-width:260px; height:42px; border:none; border-radius:10px; cursor:pointer;
  font-family:var(--font); font-size:14px; font-weight:700; color:#1d1d33; background:var(--view);
  transition:transform .12s ease, opacity .15s ease;
}
.gf-chat__premium:hover{transform:translateY(-1px)}
.gf-chat__premium:disabled{opacity:.5; cursor:default; transform:none}
.gf-chat__lock-ok{margin:12px 0 0; font-size:13px; color:var(--pos-text,var(--view-700))}

/* Mobile: vira overlay de tela cheia com backdrop; sem alça de arraste. */
@media (max-width:640px){
  .gf-chat{width:100vw !important}
  .gf-chat__resize{display:none}
  .gf-chat-fab{right:16px; bottom:16px}
}