/* NossilAI — sobreposição visual sobre o LibreChat
   Consolidado em 06/08/2026. Uma regra por seletor.
   Anterior: nossilai.css.bak-06082026_* */

/* ============ TOKENS ============ */
:root{
  --nossil-accent:#EF9F27;
  --nossil-accent-hover:#f7ac3d;
  --nossil-on-accent:#412402;
}

html.dark{
  /* escala neutra → grafite quente */
  --gray-900:#121110;
  --gray-850:#191817;
  --gray-800:#232120;
  --gray-700:#2b2926;
  --gray-600:#403d39;
  --gray-500:#5a564f;
  --gray-400:#8a867e;
  --gray-300:#c4c0b8;
  --gray-200:#dcd8d0;
  --gray-100:#edeae4;
  /* ação */
  --surface-submit:#EF9F27;
  --surface-submit-hover:#f7ac3d;
}

/* ============ TIPOGRAFIA ============ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2')}

body,.font-sans{
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
code,pre,.font-mono{
  font-family:'IBM Plex Mono',ui-monospace,'Cascadia Code','Consolas',monospace !important;
}

/* ============ LOGIN ============ */
[data-testid="login-button"]{
  background-color:var(--nossil-accent) !important;
  color:var(--nossil-on-accent) !important;
}
[data-testid="login-button"]:hover{
  background-color:var(--nossil-accent-hover) !important;
}
input.focus\:border-green-500:focus,
input.focus-visible\:border-green-500:focus-visible{
  border-color:rgba(239,159,39,0.65) !important;
}
.peer:focus ~ label.peer-focus\:text-green-500,
label.peer-focus\:text-green-500,
label[for="email"],
label[for="password"]{
  color:#dcd8d0 !important;
}

/* ============ BOTÕES ============ */
html.dark .btn-primary{
  background-color:#EF9F27;
  color:#412402;
}
html.dark .btn-primary:hover{
  background-color:#f7ac3d;
}

/* ============ TURNOS ============ */
/* filete vertical na resposta, sem balão */
html.dark .agent-turn{
  border-left:1px solid rgba(255,255,255,0.13);
  padding-left:15px;
}

/* tom: pergunta clara, resposta um passo abaixo */
html.dark .user-turn{color:#edeae4}
html.dark .agent-turn .markdown{color:#c4c0b8}
html.dark .user-turn .markdown,
html.dark .user-turn p{font-size:1.05rem}

/* rótulo "você" — âmbar, mono */
html.dark .user-turn::before{
  content:'você';
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:15px;
  letter-spacing:0.18em;
  color:#EF9F27;
  margin-bottom:8px;
}

/* rótulos nativos do LibreChat — ocultos, acessíveis a leitor de tela */
html.dark .user-turn > h2,
html.dark .agent-turn > h2{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border-width:0 !important;
  background:transparent !important;
}

/* avatares e nome do endpoint — ocultos */
html.dark .message-render:has(.user-turn) > .relative.flex.flex-shrink-0,
html.dark .message-render:has(.agent-turn) > .relative.flex.flex-shrink-0{
  display:none;
}

/* ============ CURSOR ============ */
/* digitando — bloco âmbar ao fim do fluxo */
html.dark .result-streaming > :not(ol):not(ul):not(pre):last-child:after,
html.dark .result-streaming > pre:last-child code:after{
  content:'';
  display:inline-block;
  width:7px;height:15px;
  background:#EF9F27;
  margin-left:4px;
  vertical-align:-2px;
  animation:nossil-soft 1.5s ease-in-out infinite;
}

/* repouso — bloco fixo ao fim da última resposta */
html.dark .agent-turn:last-child .markdown::after{
  content:'';
  display:block;
  width:7px;height:15px;
  background:#EF9F27;
  margin-top:10px;
}
html.dark .result-streaming .markdown::after{
  animation:nossil-soft 1.5s ease-in-out infinite;
}

@keyframes nossil-soft{
  0%,100%{opacity:1}
  50%{opacity:.25}
}
@media (prefers-reduced-motion:reduce){
  html.dark .result-streaming > :not(ol):not(ul):not(pre):last-child:after,
  html.dark .result-streaming > pre:last-child code:after,
  html.dark .result-streaming .markdown::after{
    animation:none;
  }
}

/* ============ COMPOSER ============ */
html.dark{
  --surface-chat:#191817;
  --border-light:rgba(255,255,255,0.15);
}
html.dark form .rounded-3xl{
  border-radius:12px;
  box-shadow:none;
}
html.dark form .rounded-3xl:focus-within{
  border-color:rgba(239,159,39,0.55);
}

/* [composer] Botão de enviar — seta âmbar, sem fundo */
html.dark button[data-testid="send-button"]{
  background-color:transparent;
  color:#EF9F27;
}
html.dark button[data-testid="send-button"]:hover{
  background-color:transparent;
  color:#f7ac3d;
}

/* [composer] Botão de enviar — força a cor no ícone */
html.dark button[data-testid="send-button"] svg,
html.dark button[data-testid="send-button"] path{
  color:#EF9F27 !important;
  stroke:#EF9F27 !important;
  fill:#EF9F27 !important;
}

/* [composer] Ícone de enviar — tamanho */
html.dark button[data-testid="send-button"] svg{
  width:22px;
  height:22px;
}

/* [composer] Ícone de enviar — tamanho pareado com os demais */
html.dark button[data-testid="send-button"] svg{
  width:26px !important;
  height:26px !important;
}

/* [composer] Enviar — bloco âmbar preenchido */
html.dark button[data-testid="send-button"]{
  background-color:#EF9F27 !important;
  border-radius:10px !important;
  width:40px !important;
  height:40px !important;
}
html.dark button[data-testid="send-button"] svg,
html.dark button[data-testid="send-button"] path{
  color:#412402 !important;
  stroke:#412402 !important;
  fill:none !important;
  width:20px !important;
  height:20px !important;
}
html.dark button[data-testid="send-button"]:hover{
  background-color:#f7ac3d !important;
}

/* [composer] Enviar — bloco black glass, seta âmbar */
html.dark button[data-testid="send-button"]{
  background-color:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  border-radius:10px !important;
  width:40px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
html.dark button[data-testid="send-button"] svg,
html.dark button[data-testid="send-button"] path{
  color:#EF9F27 !important;
  stroke:#EF9F27 !important;
  fill:none !important;
}
html.dark button[data-testid="send-button"]:hover{
  background-color:rgba(255,255,255,0.09) !important;
  border-color:rgba(239,159,39,0.55) !important;
}

/* [composer] Forma retangular */
html.dark form .rounded-3xl{
  border-radius:8px !important;
}

/* [composer] Enviar — canto pareado com a caixa */
html.dark button[data-testid="send-button"]{
  border-radius:8px !important;
}

/* [composer] Anel de contexto — progresso em âmbar */
html.dark button[data-testid="token-usage"] svg circle:last-child,
html.dark button[data-testid="token-usage"] svg path{
  stroke:#EF9F27 !important;
}

/* [composer] Ícones auxiliares — cinza, âmbar no hover */
html.dark form button[aria-haspopup="menu"] svg,
html.dark form label[for="file-upload"] svg{
  color:#65625c !important;
  stroke:#65625c !important;
}
html.dark form button[aria-haspopup="menu"]:hover svg,
html.dark form label[for="file-upload"]:hover svg{
  color:#EF9F27 !important;
  stroke:#EF9F27 !important;
}

/* [composer] Microfone — cinza, âmbar no hover */
html.dark #audio-recorder svg{
  stroke:#65625c !important;
}
html.dark #audio-recorder:hover svg{
  stroke:#EF9F27 !important;
}
html.dark #audio-recorder svg.stroke-red-500{
  stroke:#ef4444 !important;
}