/* ============================================================
   TEMA CORTEX (desk-like) para Open WebUI v0.11.0 — Ge IA
   Fonte no HOST: /opt/ia/owui-tema/custom.css
   Entrega: pasta montada :ro em /owui-tema; ow-boot-patch.sh copia p/
   /app/build/static/custom.css no boot (link nativo no index.html).
   Iterar SEM restart: bash /opt/ia/owui-tema/aplicar.sh + Ctrl+F5.
   (NAO montar o arquivo direto: bind de arquivo unico quebra quando o
   editor recria o inode — foi testado e mordeu.)
   Referência: /opt/ia/OWUI-TEMA-DESK.md (tokens reais do app desktop)
   Regra de ouro: só seletores ESTÁVEIS (#id, [aria-*]) — nada de
   classe hashada. Classes Tailwind utilitárias (ex.: .dark\:bg-gray-850)
   só onde não há id; revalidar se a imagem for atualizada.
   ============================================================ */

:root {
  --ctx-brand: #2563eb;        /* kBrand — azul da marca */
  --ctx-brand-hover: #1d4ed8;
  --ctx-accent: #2dd4bf;       /* kAccent — verde-água "ao vivo" */
  --ctx-gold: #d9a21b;         /* kCortex — dourado do provedor da casa */
  --ctx-surface: #171b23;      /* superfície do desk (compositor, código) */
  --ctx-pill: rgba(37, 99, 235, 0.14);   /* seleção lateral kBrand-14% */
  --ctx-pill-strong: rgba(37, 99, 235, 0.22);
}

/* ------------------------------------------------------------
   1) PALHETA DARK — tinge os cinzas neutros do OWUI para o
   azul-escuro da família Cortex. O OWUI usa var(--color-gray-*)
   em todo o dark; sobrescrever só no .dark muda o app inteiro
   de forma consistente (light fica intocado).
   ------------------------------------------------------------ */
html.dark {
  --color-gray-800: #1e242f;
  --color-gray-850: #171b23;   /* = superfície do desk (compositor/código) */
  --color-gray-900: #0e1117;   /* = scaffoldBackgroundColor do desk (main.dart) */
  --color-gray-950: #0a0d12;   /* lateral / fundo mais profundo */
}

/* O PANO DE FUNDO do OWUI NÃO usa as variáveis: o CSS compilado traz
   body{background:#171717} (dark) e #fff (light), hard-coded. É o que
   deixava o app inteiro com cara de "padrão preto" mesmo com o resto
   tingido (diagnóstico por getComputedStyle em 21/08 — só o body pinta;
   os containers são transparentes). Uma regra tinge o app todo: */
html.dark body {
  background: #0e1117 !important;
}
html:not(.dark) body {
  background: #f7f8fb !important;  /* scaffold claro do desk (main.dart) */
}

/* ------------------------------------------------------------
   2) LATERAL
   ------------------------------------------------------------ */
/* conversa ativa: primaryContainer ~45%, raio 10 (conversation_drawer.dart
   linha ~860: primaryContainer.withValues(alpha: .45), circular(10)) */
#sidebar a[aria-current='page'],
#sidebar [id='sidebar-chat-item'][aria-current='page'] {
  background: rgba(37, 99, 235, 0.26) !important;
  border-radius: 10px !important;
}
html.dark #sidebar a[aria-current='page'] {
  color: #dbe4ff;
}
/* no light o desk usa primaryContainer claro — bem mais suave
   (validado no print apk-largo-light-chat) */
html:not(.dark) #sidebar a[aria-current='page'],
html:not(.dark) #sidebar [id='sidebar-chat-item'][aria-current='page'] {
  background: rgba(37, 99, 235, 0.11) !important;
}

/* itens da lateral: raio 10px como no drawer do desk */
#sidebar [id='sidebar-chat-item'] {
  border-radius: 10px !important;
}

/* "Novo Chat": enxuto, primaryContainer 35%, raio 10 — "a caneta do
   Codex, não um botão parrudo" (conversation_drawer.dart ~189) */
#sidebar-new-chat-button {
  border-radius: 10px !important;
  transition: background 0.15s ease;
}
html.dark #sidebar-new-chat-button {
  background: rgba(37, 99, 235, 0.2);
  color: #c7d6ff;
}
html.dark #sidebar-new-chat-button:hover {
  background: rgba(37, 99, 235, 0.32);
}
html:not(.dark) #sidebar-new-chat-button {
  background: rgba(37, 99, 235, 0.1);
  color: #1e40af;
}
html:not(.dark) #sidebar-new-chat-button:hover {
  background: rgba(37, 99, 235, 0.18);
}

/* cabeçalho de grupo (Hoje/Ontem/pastas): cabecinha MAIÚSCULA pequena,
   como CONTA/IA/APLICATIVO no desk. O rótulo é um div sem id com o trio
   w-full + pl-2.5 + text-xs (validado no DOM vivo em 21/08). */
#sidebar div.w-full.text-xs[class*='pl-2.5'] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   3) COMPOSITOR — caixa arredondada 24px, superfície do desk
   ------------------------------------------------------------ */
/* A CAIXA é o invólucro EXTERNO (#message-input-container), que contém o
   campo E a fileira de botões — igual ao desk (uma caixa só). Estilizar só
   o #chat-input-container cria caixa-dentro-de-caixa desalinhada (bug
   apontado pelo dono em 21/08). */
#message-input-container {
  border-radius: 24px !important;
}
html.dark #message-input-container {
  background: var(--ctx-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
html:not(.dark) #message-input-container {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
/* o campo interno fica transparente: some a segunda caixa */
#chat-input-container,
html.dark #chat-input-container,
html:not(.dark) #chat-input-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* botão enviar: redondo kBrand (desk) */
#send-message-button {
  border-radius: 9999px !important;
  background: var(--ctx-brand) !important;
  color: #fff !important;
  transition: background 0.15s ease;
}
#send-message-button:hover {
  background: var(--ctx-brand-hover) !important;
}
#send-message-button:disabled {
  opacity: 0.35;
}
#send-message-button svg {
  color: #fff !important;
}

/* ------------------------------------------------------------
   4) CABEÇALHO — nome do modelo em destaque (desk: bold 16 +
   linha de baixo pequena/cinza)
   ------------------------------------------------------------ */
button[id^='model-selector'] {
  font-weight: 700 !important;
  font-size: 16px !important;
}
#response-message-model-name {
  font-weight: 600;
}

/* ------------------------------------------------------------
   5) MENSAGENS
   ------------------------------------------------------------ */
/* bolha do usuário = IGUAL ao desk (message_view.dart ~76): fundo
   scheme.primary sólido, texto onPrimary, raio 18 com "rabinho" 4px
   embaixo-direita. No M3 dark o primary vira o lilás claro #B4C5FF
   (texto escuro); no light é o próprio kBrand (texto branco). */
html.dark .user-message .dark\:bg-gray-850 {
  background: #b4c5ff !important;
  color: #0a2e6e !important;
  border-radius: 18px 18px 4px 18px !important;
  font-size: 15px;
  line-height: 1.4;
}
html.dark .user-message .dark\:bg-gray-850 * {
  color: inherit;
}
html:not(.dark) .user-message .dark\:bg-gray-850 {
  background: var(--ctx-brand) !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
  font-size: 15px;
  line-height: 1.4;
}
html:not(.dark) .user-message .dark\:bg-gray-850 * {
  color: inherit;
}

/* código: superfície do desk já vem via --color-gray-850 (item 1) */

/* código INLINE como chip neutro (igual ao app — print apk-largo-dark-chat:
   `somar(1.5, 2.0)` aparece num chip cinza, não em texto colorido) */
.chat-assistant code:not(pre code),
.chat-user code:not(pre code),
.user-message code:not(pre code),
[id='messages-container'] code:not(pre code) {
  background: rgba(148, 163, 184, 0.16) !important;
  color: inherit !important;
  border-radius: 6px;
  padding: 1px 5px;
}
html:not(.dark) [id='messages-container'] code:not(pre code) {
  background: rgba(15, 23, 42, 0.07) !important;
}

/* sugestões da tela inicial como CARDS (igual ao app: borda sutil,
   raio 12, fundo elevado, ícone/título azul no hover) */
div[role='list'] button.waterfall[role='listitem'] {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  transition: background 0.15s ease, border-color 0.15s ease;
}
html.dark div[role='list'] button.waterfall[role='listitem'] {
  background: #141922 !important;
}
html.dark div[role='list'] button.waterfall[role='listitem']:hover {
  background: #1a2029 !important;
  border-color: rgba(37, 99, 235, 0.4);
}
html:not(.dark) div[role='list'] button.waterfall[role='listitem'] {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.1);
}
html:not(.dark) div[role='list'] button.waterfall[role='listitem']:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

/* ------------------------------------------------------------
   6) ACABAMENTO
   ------------------------------------------------------------ */
/* scrollbar discreta, combinando com o dark azulado */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 8px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}
html.dark ::-webkit-scrollbar-track {
  background: transparent;
}

/* seleção de texto na cor da marca */
::selection {
  background: rgba(37, 99, 235, 0.35);
}

/* rodapé jurídico (injetado pelo custom.js): login + pé da lateral.
   Textos/URLs = os do site; CNPJ exposto por pedido do dono. */
#ge-legal-auth {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  z-index: 40;
  color: rgba(148, 163, 184, 0.85);
}
#ge-legal-sidebar {
  padding: 6px 12px 10px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.7);
}
#ge-legal-auth a,
#ge-legal-sidebar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#ge-legal-auth a:hover,
#ge-legal-sidebar a:hover {
  color: var(--ctx-brand);
}
.ge-legal-cnpj {
  opacity: 0.8;
}

/* leitor interno dos documentos jurídicos (modal com iframe) */
#ge-legal-leitor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#ge-legal-leitor .ge-leitor-caixa {
  width: min(920px, 100%);
  height: min(82vh, 100%);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
html.dark #ge-legal-leitor .ge-leitor-caixa {
  background: var(--ctx-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#ge-legal-leitor .ge-leitor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
}
#ge-legal-leitor .ge-leitor-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}
#ge-legal-leitor .ge-leitor-abrir {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--ctx-brand);
  color: #fff !important;
  text-decoration: none;
}
#ge-legal-leitor .ge-leitor-abrir:hover {
  background: var(--ctx-brand-hover);
}
#ge-legal-leitor .ge-leitor-fechar {
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
#ge-legal-leitor .ge-leitor-fechar:hover {
  background: rgba(148, 163, 184, 0.2);
}
#ge-legal-leitor iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
html:not(.dark) #ge-legal-auth,
html:not(.dark) #ge-legal-sidebar {
  color: rgba(71, 85, 105, 0.85);
}

/* foco visível na cor da marca (acessível e da família) */
#message-input-container:focus-within {
  border-color: rgba(37, 99, 235, 0.45);
}

/* ============================================================
   7) SKIN CORTEX V2 — casca visual compartilhada com o Cortex Desk

   Esta camada usa somente ids do OWUI e os data-attributes adicionados
   pelo custom.js. Se um seletor deixar de existir em versão futura, a
   regra simplesmente não se aplica; o chat continua funcional.
   ============================================================ */
html[data-ge-skin='cortex-v2'] {
  --ctx-canvas: #0e1117;
  --ctx-sidebar: #11151d;
  --ctx-elevated: #171b23;
  --ctx-elevated-2: #1e242f;
  --ctx-line: rgba(148, 163, 184, 0.16);
  --ctx-line-soft: rgba(148, 163, 184, 0.09);
  --ctx-text: #eef2f8;
  --ctx-muted: #9ca7b8;
  --ctx-user: #b4c5ff;
  --ctx-user-text: #0a2e6e;
}

html[data-ge-skin='cortex-v2']:not(.dark) {
  --ctx-canvas: #f7f8fb;
  --ctx-sidebar: #fbfbfd;
  --ctx-elevated: #ffffff;
  --ctx-elevated-2: #f1f3f8;
  --ctx-line: rgba(15, 23, 42, 0.12);
  --ctx-line-soft: rgba(15, 23, 42, 0.07);
  --ctx-text: #161b24;
  --ctx-muted: #647086;
  --ctx-user: #5068a7;
  --ctx-user-text: #ffffff;
}

html[data-ge-skin='cortex-v2'] body.ge-cortex-app {
  background: var(--ctx-canvas) !important;
  color: var(--ctx-text);
}

/* Sidebar com a mesma separação estrutural do Desk. */
html[data-ge-skin='cortex-v2'] [data-ge-region='sidebar'] {
  background: var(--ctx-sidebar) !important;
  border-right: 1px solid var(--ctx-line) !important;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='sidebar'] > div {
  background: transparent !important;
}

html[data-ge-skin='cortex-v2'] #sidebar-new-chat-button {
  min-height: 42px;
  margin-inline: 8px;
  font-weight: 650;
}

html[data-ge-skin='cortex-v2'] #sidebar-chat-item {
  min-height: 40px;
  margin-block: 2px;
  border: 1px solid transparent;
}

html[data-ge-skin='cortex-v2'] #sidebar-chat-item:hover {
  background: var(--ctx-elevated-2) !important;
  border-color: var(--ctx-line-soft);
}

html[data-ge-skin='cortex-v2'] #sidebar-chat-item[aria-current='page'] {
  background: var(--ctx-pill-strong) !important;
  border-color: rgba(37, 99, 235, 0.24);
}

/* Cabeçalho/modelo: compacto, legível e alinhado ao Desk. */
html[data-ge-skin='cortex-v2'] [data-ge-region='model-selector'] {
  min-height: 42px;
  border-radius: 12px !important;
  letter-spacing: -0.01em;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='model-selector']:hover {
  background: var(--ctx-elevated-2) !important;
}

/* Área da conversa com linha de leitura semelhante ao Desk. */
html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] {
  color: var(--ctx-text);
  scrollbar-gutter: stable;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] .user-message {
  margin-top: 10px;
}

html[data-ge-skin='cortex-v2'].dark [data-ge-region='messages'] .user-message .dark\:bg-gray-850 {
  background: var(--ctx-user) !important;
  color: var(--ctx-user-text) !important;
  box-shadow: none;
}

html[data-ge-skin='cortex-v2']:not(.dark) [data-ge-region='messages'] .user-message .dark\:bg-gray-850 {
  background: var(--ctx-user) !important;
  color: var(--ctx-user-text) !important;
  box-shadow: none;
}

/* Sanfonas de raciocínio/ferramentas continuam sanfonas mesmo apó o stream. */
html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] details,
html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] button[aria-expanded] {
  border-radius: 12px;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] details {
  border: 1px solid var(--ctx-line);
  background: color-mix(in srgb, var(--ctx-elevated) 88%, transparent);
  overflow: clip;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='messages'] pre {
  border: 1px solid var(--ctx-line);
  border-radius: 12px !important;
  overflow: auto;
}

/* Compositor único: texto e ferramentas na mesma superfície. */
html[data-ge-skin='cortex-v2'] [data-ge-region='composer'] {
  background: var(--ctx-elevated) !important;
  border: 1px solid var(--ctx-line) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html[data-ge-skin='cortex-v2'] [data-ge-region='composer']:focus-within {
  border-color: rgba(37, 99, 235, 0.58) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(37, 99, 235, 0.11);
}

html[data-ge-skin='cortex-v2'] [data-ge-region='send'] {
  width: 42px;
  height: 42px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3);
}

/* Login continua sendo OWUI, mas entra na mesma família visual. */
html[data-ge-skin='cortex-v2'] body.ge-cortex-auth {
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.18), transparent 34%),
    radial-gradient(circle at 82% 88%, rgba(45, 212, 191, 0.11), transparent 32%),
    var(--ctx-canvas) !important;
}

html[data-ge-skin='cortex-v2'] body.ge-cortex-auth form {
  border: 1px solid var(--ctx-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ctx-elevated) 94%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  html[data-ge-skin='cortex-v2'] [data-ge-region='sidebar'] {
    width: min(88vw, 360px) !important;
  }

  html[data-ge-skin='cortex-v2'] [data-ge-region='composer'] {
    border-radius: 20px !important;
  }

  html[data-ge-skin='cortex-v2'] [data-ge-region='send'] {
    width: 40px;
    height: 40px;
  }

  #ge-legal-auth {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ge-skin='cortex-v2'] *,
  html[data-ge-skin='cortex-v2'] *::before,
  html[data-ge-skin='cortex-v2'] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}