/* ============================================================
   open-chat.css — Chat aberto na coluna direita da tela principal.
   A coluna vira uma conversa funcional desde o carregamento:
   área de mensagens no topo, bloco de arquivos, input de prompt,
   controles adaptados (chip + popover) e o Concierge no rodapé.
   Reusa a linguagem visual do site (styles.css / concierge.css).
   ============================================================ */

/* A área "só do grid" da coluna passa a ocupar a altura disponível,
   empilhando o bloco de anexos (topo) e o chat (flexível) em coluna. */
.grid-only { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }

.openchat {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; gap: 8px;
}

/* ---------- cabeçalho ---------- */
.openchat-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: none; }
.openchat-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #3a3b4c; }
.openchat-title svg.lucide { width: 15px; height: 15px; color: #7c6ff7; }
body.dark-mode .openchat-title { color: #d0d0e0; }
.openchat-head-actions { display: flex; gap: 4px; }
.openchat-head-actions button {
  position: relative;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #e3e6f0; background: #fff; border-radius: 8px;
  color: #8a8ca8; cursor: pointer; transition: .15s;
}
.openchat-head-actions button:hover { border-color: #7c6ff7; color: #7c6ff7; }
.openchat-head-actions button svg.lucide { width: 14px; height: 14px; }
/* Tooltip explicativo (classe .tooltip de styles.css) ABAIXO do botão, pois
   no topo da coluna um tooltip acima seria cortado pelo overflow do painel. */
.openchat-head-actions .tooltip { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; transform: none; }
.openchat-head-actions button:hover .tooltip,
.openchat-head-actions button:focus-visible .tooltip { visibility: visible; opacity: 1; }
body.dark-mode .openchat-head-actions button { background: #323342; border-color: #424354; }
body.dark-mode .openchat-head-actions button:hover { background: #3b3c52; border-color: #7c6ff7; color: #b3a9f5; }

/* ---------- área de mensagens ---------- */
.openchat-msgs {
  flex: 1 1 auto; min-height: 110px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 2px 6px;
}
.oc-empty {
  margin: auto; max-width: 240px; text-align: center;
  color: #9aa0b5; font-size: 12.5px; line-height: 1.6; padding: 10px 6px;
}
.oc-empty svg.lucide { width: 26px; height: 26px; color: #c7c2ec; margin-bottom: 6px; }
body.dark-mode .oc-empty svg.lucide { color: #4a4470; }

/* Coluna "ainda sem envio": a área de mensagens não cresce e as margens
   auto absorvem o espaço livre em terços iguais — composer viesado pra
   cima e o bloco do Concierge (texto introdutório + botão) no MEIO entre
   a barra de chat e o fim da coluna. Após o 1º prompt a classe
   .openchat--vazio sai (open-chat.js) e tudo volta ao rodapé. */
.openchat--vazio .openchat-msgs { flex: 0 1 auto; min-height: 0; }
.openchat--vazio .openchat-head { margin-bottom: auto; }
.openchat--vazio .openchat-conc-intro { display: block; margin-top: auto; }
.openchat--vazio .openchat-concierge-slot { margin-bottom: auto; }

/* Texto introdutório do Concierge: só aparece no estado "ainda sem
   envio", acima do botão, explicando como ele pode ajudar. */
.openchat-conc-intro {
  display: none; max-width: 260px; margin-left: auto; margin-right: auto;
  text-align: center; color: #9aa0b5; font-size: 12px; line-height: 1.6;
}
body.dark-mode .openchat-conc-intro { color: #a0a3ba; }

.oc-bubble {
  max-width: 94%; padding: 8px 10px; border-radius: 12px;
  font-size: 13px; line-height: 1.55; overflow-wrap: break-word;
}
.oc-bubble.oc-user {
  align-self: flex-end; background: #7c6ff7; color: #fff;
  border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.oc-bubble.oc-ai { align-self: flex-start; background: #f4f5fa; color: #2b2c3a; border-bottom-left-radius: 4px; }
body.dark-mode .oc-bubble.oc-ai { background: #323342; color: #d6d7e4; }
.oc-bubble .oc-content > *:first-child { margin-top: 0; }
.oc-bubble .oc-content > *:last-child { margin-bottom: 0; }
.oc-bubble pre { max-width: 100%; overflow: auto; font-size: 11.5px; }
.oc-bubble code { font-size: 11.5px; }
.oc-bubble img { max-width: 100%; border-radius: 8px; }
.oc-bubble table { display: block; overflow-x: auto; max-width: 100%; }
.oc-streaming { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #7c6ff7; margin-bottom: 4px; }
.oc-streaming svg.lucide { width: 11px; height: 11px; }
.oc-sys { align-self: center; font-size: 11px; color: #9aa0b5; }
.oc-warn {
  align-self: stretch; font-size: 12px; line-height: 1.5;
  color: #b4552f; background: #fdf1ea; border: 1px solid #f0d3c2;
  border-radius: 10px; padding: 6px 8px;
}
body.dark-mode .oc-warn { background: #3a2a22; border-color: #5a3d2e; color: #e8a488; }
.oc-typing { align-self: flex-start; background: #f4f5fa; border-radius: 12px; padding: 4px 10px; }
body.dark-mode .oc-typing { background: #323342; }

/* Chooser de tipo (Sincronizada/Cofre) em versão coluna: cartas empilhadas */
.openchat .thread-kind-chooser { margin: 4px 0 0; max-width: none; padding: 10px; }
.openchat .thread-kind-chooser .tkc-cards { flex-direction: column; gap: 8px; }
.openchat .thread-kind-chooser .tkc-card { padding: 10px; }
.openchat .thread-kind-chooser .tkc-title { font-size: 12.5px; margin-bottom: 8px; }
.openchat .thread-kind-chooser .tkc-name { font-size: 12.5px; }
.openchat .thread-kind-chooser .tkc-desc { font-size: 11px; }
body.dark-mode .openchat .thread-kind-chooser { background: #282736; border-color: #3f3c56; }
body.dark-mode .openchat .thread-kind-chooser .tkc-title,
body.dark-mode .openchat .thread-kind-chooser .tkc-name { color: #d6d3ea; }
body.dark-mode .openchat .thread-kind-chooser .tkc-card { background: #323342; border-color: #424354; }

/* ---------- anexos pendentes (chips) ---------- */
.openchat-attach-row { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.openchat-attach-row .pending-chip { max-width: 100%; }

/* ---------- input de prompt ---------- */
.openchat-input-row {
  display: flex; align-items: flex-end; gap: 6px; flex: none;
  border: 1px solid #e3e6f0; background: #fff; border-radius: 12px;
  padding: 6px 6px 6px 10px;
  transition: border-color .15s, box-shadow .15s;
}
.openchat-input-row:focus-within { border-color: #7c6ff7; box-shadow: 0 0 0 3px rgba(124, 111, 247, .12); }
body.dark-mode .openchat-input-row { background: #323342; border-color: #424354; }
body.dark-mode .openchat-input-row:focus-within { border-color: #7c6ff7; }
body.dark-mode #openChatInput::placeholder { color: #9b9bac; }
#openChatInput {
  flex: 1; min-width: 0; border: none; outline: none; resize: none;
  background: transparent; color: inherit; font: inherit;
  font-size: 13px; line-height: 1.5; max-height: 140px; overflow-y: auto;
  padding: 4px 0;
}
.openchat-send {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: #7c6ff7; color: #fff;
  cursor: pointer; transition: .15s;
}
.openchat-send:hover { background: #6a5ce0; }
.openchat-send svg.lucide { width: 15px; height: 15px; }
.openchat-send.oc-stop { background: #e8745c; }
.openchat-send.oc-stop:hover { background: #d6634b; }

/* ---------- controles adaptados (chip + popover + mini switches) ---------- */
.openchat-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
.openchat-controls .ai-config-chip { font-size: 11.5px; padding: 4px 10px; max-width: 100%; }
.openchat-controls .ai-config-chip > span { overflow: hidden; text-overflow: ellipsis; }
.openchat-controls .ai-config-popover { min-width: 240px; width: min(280px, calc(100vw - 80px)); }
.oc-mini-switch {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; font-family: inherit;
  color: #8a8ca8; background: transparent;
  border: 1px solid #e3e6f0; border-radius: 999px; padding: 3px 9px;
  cursor: pointer; transition: .15s;
}
.oc-mini-switch svg.lucide { width: 12px; height: 12px; }
.oc-mini-switch:hover { border-color: #7c6ff7; color: #7c6ff7; }
.oc-mini-switch[aria-pressed="true"] { background: #7c6ff7; border-color: #7c6ff7; color: #fff; }
body.dark-mode .oc-mini-switch { border-color: #424354; color: #8a8ca8; }
body.dark-mode .oc-mini-switch:hover { border-color: #7c6ff7; color: #b3a9f5; }
body.dark-mode .oc-mini-switch[aria-pressed="true"] { background: #7c6ff7; border-color: #7c6ff7; color: #fff; }

/* ---------- Concierge no rodapé da coluna ----------
   O botão (#concLancAgente) é MOVIDO para este slot no desktop pelo
   open-chat.js; no mobile volta para o launcher da topbar. */
.openchat-concierge-slot:empty { display: none; }
.openchat-concierge-slot { flex: none; margin-top: 2px; display: flex; justify-content: center; }
/* Padrão neutro: fundo claro + a LINHA accent ao redor (mesma linguagem do
   launcher em foco); no mouse over vira accent cheio (como o .conc-lanc).
   Largura própria (não ocupa a coluna inteira): centralizado no slot. */
.openchat-concierge-slot .conc-lanc-agente {
  justify-content: center; gap: 8px;
  padding: 8px 10px; border: 1.5px solid var(--accent); border-radius: 10px;
  background: #fff; color: #777; font-size: 12.5px;
}
.openchat-concierge-slot .conc-lanc-agente svg { color: var(--accent); }
.openchat-concierge-slot .conc-lanc-agente:hover { background: var(--accent); color: #fff; }
.openchat-concierge-slot .conc-lanc-agente:hover svg { color: #fff; }
body.dark-mode .openchat-concierge-slot .conc-lanc-agente { background: #323342; border-color: var(--accent); color: #a0a0b5; }
body.dark-mode .openchat-concierge-slot .conc-lanc-agente:hover { background: var(--accent); color: #fff; }
body.dark-mode .openchat-concierge-slot .conc-lanc-agente:hover svg { color: #fff; }
/* No estado "ainda sem envio" o botão centrado é o convite principal da
   coluna: vale a cor de highlight (accent cheio) já no padrão; o hover
   só realça o brilho. O chip Ctrl+K branco já contrasta por cima. */
.openchat--vazio .openchat-concierge-slot .conc-lanc-agente { background: var(--accent); border-color: var(--accent); color: #fff; }
.openchat--vazio .openchat-concierge-slot .conc-lanc-agente svg { color: #fff; }
.openchat--vazio .openchat-concierge-slot .conc-lanc-agente:hover { filter: brightness(1.08); }
body.dark-mode .openchat--vazio .openchat-concierge-slot .conc-lanc-agente { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark-mode .openchat--vazio .openchat-concierge-slot .conc-lanc-agente svg { color: #fff; }
/* Sobrou só o gatilho de busca no launcher: some com o divisor órfão */
.conc-launcher--so-busca .conc-lanc-div { display: none; }

/* ---------- bloco de arquivos compacto (topo da coluna) ---------- */
.openchat-files { margin: 0; flex: none; }
.openchat-files h4 { margin: 0 0 6px; font-size: 12px; }
.openchat-files .drop-zone { padding: 10px 8px; }
.openchat-files .drop-zone p { margin: 4px 0 2px; font-size: 12px; }
.openchat-files .drop-zone svg.lucide { font-size: 18px; }
.openchat-files-hint { font-size: 11px; color: #999; margin: 6px 0 0; line-height: 1.5; }

/* ---------- tablet/mobile: a coluna vira drawer (styles.css);
   o chat continua usável dentro dele e o Concierge volta ao launcher ---------- */
@media (max-width: 1024px) {
  .openchat-msgs { min-height: 180px; }
}