@import url(../generic/_animations.css);
@import url(../components/_navbar.css);
@import url(../components/_modal-gloabal.css);
@import url(../settings/_radius.css);
@import url(../settings/_padding.css);

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* _navbar.css deixa .navbar em fluxo normal (position: relative), entao o
   conteudo abaixo dela nao precisa de padding extra pra "escapar" de uma
   navbar fixa ● so um respiro visual. */
/* Sem width/max-width + margin:auto (a antiga centralizacao deixava a sidebar flutuando
   com uma folga grande ate a borda esquerda real da tela) ● mesmo padrao ja usado em
   .user-workspace/.user-sidebar (profile.css) pra paginas com sidebar persistente: o
   container ocupa a largura toda e so o padding direito da o respiro, deixando a sidebar
   colada na borda esquerda. */
.chat-page {
  --chat-sidebar-w: 64px;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 2rem 3vw 3rem 0;
  min-height: calc(100dvh - var(--navbar-height, 15vh) - var(--site-banner-height, 0px));
}

.chat-page.chat-sidebar-expanded {
  --chat-sidebar-w: 280px;
}

.chat-sessions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 0 0 var(--chat-sidebar-w);
  width: var(--chat-sidebar-w);
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1rem;
  height: fit-content;
  max-height: 74vh;
  box-shadow: none;
  overflow: hidden;
  transition: width 0.25s ease, flex-basis 0.25s ease;
  /* .navbar e fixed (ver _navbar.css, breakpoints min-width:1001px e max-width:1000px),
     entao "top" gruda o rail logo abaixo dela ● mesmo padrao de sidebar persistente
     usado em .user-sidebar (profile.css). Sticky (nao fixed) porque o rail continua
     participando do fluxo flex de .chat-page, sem precisar recalcular left/width via JS. */
  position: sticky;
  top: calc(var(--navbar-height, 15vh) + var(--site-banner-height, 0px));
}

/* Rail colapsada (so icones): a lista e o rotulo do botao de nova conversa somem em
   qualquer largura de tela ● o rail fica sempre visivel e no fluxo (nunca fora da tela),
   entao o botao de toggle dentro dele continua alcancavel mesmo no mobile. */
.chat-page:not(.chat-sidebar-expanded) .chat-sessions__new-label,
.chat-page:not(.chat-sidebar-expanded) .chat-sessions__search,
.chat-page:not(.chat-sidebar-expanded) .chat-sessions__list,
.chat-page:not(.chat-sidebar-expanded) .chat-sessions__delete-all {
  display: none;
}

.chat-sessions__delete-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  flex-shrink: 0;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--gray, #6b7280);
  font: 500 13px var(--montserrat);
  cursor: pointer;
}

.chat-sessions__delete-all:hover {
  color: var(--black);
}

/* Colapsado, o botao vira um icone quadrado de verdade (nao a pilula esticada que sobrava
   do btn-primary com so o padding horizontal zerado) ● largura/altura fixas e centralizado
   no rail. */
.chat-page:not(.chat-sidebar-expanded) .chat-sessions__new {
  width: 40px;
  height: 40px;
  padding: 0;
  align-self: center;
  border-radius: var(--radius-md, 10px);
}

.chat-sessions__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  flex-shrink: 0;
}

/* Colapsada, a rail nao tem espaco pro input de busca (so 64px de largura, ver
   --chat-sidebar-w) ● esse botao-icone substitui a .chat-sessions__search escondida logo
   abaixo (mesma regra de "colapsado esconde" acima), garantindo que a busca continue
   alcancavel com um clique em vez de desaparecer inteira. Escondido no estado expandido
   (o input de verdade ja esta visivel ali, esse botao ficaria redundante). Mesmo
   tratamento visual do .chat-sidebar-toggle logo abaixo (icone-so, largura total do rail).
*/
.chat-sessions__search-toggle {
  display: none;
}

.chat-page:not(.chat-sidebar-expanded) .chat-sessions__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 10px);
  color: var(--black);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.chat-page:not(.chat-sidebar-expanded) .chat-sessions__search-toggle:hover {
  background: var(--lavender-mist);
}

.chat-sessions__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--gray);
}

.chat-sessions__search .lucide-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.chat-sessions__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
}

.chat-sessions__search-input:focus {
  outline: none;
}

.chat-sessions__search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.chat-sessions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
}

.chat-sessions__load-more-item {
  list-style: none;
}

.chat-sessions__load-more {
  width: 100%;
  background: none;
  border: 1px dashed var(--alabaster-gray);
  border-radius: var(--radius-md, 10px);
  color: var(--eletric-indigo);
  font-family: var(--montserrat);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.chat-sessions__load-more:hover {
  background: var(--lavender-mist);
}

.chat-sessions__empty {
  color: var(--gray);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0.5rem;
}

.chat-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  color: var(--black);
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.9rem;
  text-align: left;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.chat-session-item:hover {
  background: var(--lavender-mist);
}

.chat-session-item.is-active {
  background: var(--lavander-veil);
  border-color: var(--eletric-indigo);
}

.chat-session-item__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.chat-session-item__delete {
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: var(--radius-sm, 6px);
  flex-shrink: 0;
}

.chat-session-item__delete:hover {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
}

.chat-session-item__delete .lucide-icon {
  width: 15px;
  height: 15px;
}

.chat-window {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: none;
  overflow: hidden;
  min-height: 74vh;
}

.chat-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--alabaster-gray);
  flex-shrink: 0;
}

.chat-window__header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Indicador de cota diaria (ver ChatController.getUsage / main.js) — some quando vazio
   (antes do primeiro carregamento) via :empty, sem precisar de outra classe pra isso. */
.chat-usage-badge {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray);
  background: var(--lavender-mist);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

.chat-usage-badge:empty {
  display: none;
}

.chat-usage-badge--near-limit {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
}

/* Fica dentro de .chat-sessions (o rail), nao no cabecalho do chat ● largura total do
   rail pra ficar com a mesma "pegada" visual do botao de nova conversa logo abaixo, tanto
   colapsado (icone centralizado) quanto expandido (icone alinhado a esquerda, como um
   controle de topo do painel). */
.chat-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md, 10px);
  color: var(--black);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.chat-page.chat-sidebar-expanded .chat-sidebar-toggle {
  justify-content: flex-start;
  padding-left: 0.6rem;
}

.chat-sidebar-toggle:hover {
  background: var(--lavender-mist);
}

.chat-sessions-backdrop {
  display: none;
}

.chat-window__header p {
  margin: 0;
  color: var(--gray);
  font-size: 0.85rem;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-messages__load-more {
  align-self: center;
  background: none;
  border: 1px dashed var(--alabaster-gray);
  border-radius: var(--radius-md, 10px);
  color: var(--eletric-indigo);
  font-family: var(--montserrat);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.chat-messages__load-more:hover {
  background: var(--lavender-mist);
}

.chat-messages__load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-empty-state {
  margin: auto;
  text-align: center;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 32ch;
}

.chat-empty-state .lucide-icon {
  width: 40px;
  height: 40px;
  color: var(--eletric-indigo);
  opacity: 0.8;
}

.chat-empty-state p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Preview da questao referenciada exibido ANTES do envio (ver chat/main.js
   showPendingQuestionPreview), no lugar do estado vazio generico — some assim que a
   mensagem e enviada (o card equivalente passa a viver dentro da propria bolha). */
.chat-question-context-preview {
  align-self: center;
  width: min(520px, 100%);
  margin: auto;
  text-align: center;
}

.chat-question-context-preview__label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--gray);
}

.chat-question-context-preview .chat-question-context {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.chat-message {
  max-width: 78%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  line-height: 1.55;
  font-size: 0.95rem;
  word-break: break-word;
  animation: chat-message-in 0.18s ease both;
}

@keyframes chat-message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message--user {
  align-self: flex-end;
  background: var(--lavender-mist);
  color: var(--black);
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  /* flex column: o botao de editar (unico filho extra, ver .chat-message__edit-btn)
     empilha abaixo do texto, alinhado a direita do proprio bubble. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chat-message--assistant {
  align-self: flex-start;
  background: var(--lavender-mist);
  color: var(--black);
  border-bottom-left-radius: 4px;
}

.chat-message--pending {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* Card citando a questao referenciada por um deep link (?qid=, ver ResultadoView.js ->
   "Perguntar a IA sobre esta questao" -> chat/main.js renderQuestionContextCard). Empilha
   acima do texto digitado dentro do proprio bubble do usuario, aproveitando o mesmo
   "display:flex; flex-direction:column" de .chat-message--user (ver acima) — visualmente
   discreto (fundo/borda mais fracos que a bolha) pra nao competir com a pergunta real do
   aluno. */
.chat-question-context {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--eletric-indigo) 35%, transparent);
  text-align: left;
  white-space: normal;
}

.chat-question-context__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--black) 55%, transparent);
  margin-bottom: 0.2rem;
}

.chat-question-context__statement {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--black) 75%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-question-context__answer {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--black) 55%, transparent);
}

/* Linha de acoes (regenerar/editar) dentro do proprio bubble — mesmo principio das outras
   sub-mensagens (.chat-suggestion__btn, .chat-quiz-wizard__btn) que ja vivem dentro de
   ".chat-message". Botao de editar (unico, sem linha propria) fica solto no bubble do
   usuario, alinhado a direita pelo "align-items: flex-end" que .chat-message--user ganhou
   junto com "display: flex; flex-direction: column" (ver acima). */
.chat-message__actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.chat-message__action-btn,
.chat-message__edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: color-mix(in srgb, var(--black) 6%, transparent);
  border: none;
  border-radius: var(--radius-sm, 6px);
  color: var(--gray);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.chat-message__action-btn:hover,
.chat-message__edit-btn:hover {
  background: color-mix(in srgb, var(--black) 12%, transparent);
  color: var(--black);
}

.chat-message__action-btn .lucide-icon,
.chat-message__edit-btn .lucide-icon {
  width: 14px;
  height: 14px;
}

/* Feedback 👍/👎 marcado (ver createFeedbackButtons em main.js) */
.chat-message__action-btn--active {
  background: color-mix(in srgb, var(--eletric-indigo) 14%, transparent);
  color: var(--eletric-indigo);
}

.chat-message__edit-btn {
  margin-top: 0.4rem;
  align-self: flex-end;
}

.chat-message--editing {
  width: min(100%, 40ch);
  align-self: stretch;
}

.chat-message__edit-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 3.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md, 10px);
  border: none;
  background: var(--white);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.9rem;
}

.chat-message__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.chat-message__edit-save,
.chat-message__edit-cancel {
  border: none;
  border-radius: var(--radius-md, 10px);
  padding: 0.35rem 0.75rem;
  font-family: var(--montserrat);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-message__edit-save {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.chat-message__edit-save:disabled,
.chat-message__edit-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-message__edit-cancel {
  background: var(--white);
  color: var(--black);
}

/* Elementos gerados pelo parser de markdown (markdown.js) dentro de uma resposta da IA.
   Escopado a .chat-message--assistant pra nao afetar a bolha do aluno, que continua texto
   puro. */
.chat-message--assistant p {
  margin: 0 0 0.6em;
}

.chat-message--assistant> :first-child {
  margin-top: 0;
}

.chat-message--assistant> :last-child {
  margin-bottom: 0;
}

.chat-message--assistant h1,
.chat-message--assistant h2,
.chat-message--assistant h3,
.chat-message--assistant h4,
.chat-message--assistant h5,
.chat-message--assistant h6 {
  margin: 0.9em 0 0.4em;
  line-height: 1.3;
  font-weight: 700;
}

.chat-message--assistant h1 {
  font-size: 1.2rem;
}

.chat-message--assistant h2 {
  font-size: 1.12rem;
}

.chat-message--assistant h3 {
  font-size: 1.05rem;
}

.chat-message--assistant h4,
.chat-message--assistant h5,
.chat-message--assistant h6 {
  font-size: 0.98rem;
}

.chat-message--assistant ul,
.chat-message--assistant ol {
  margin: 0.3em 0 0.6em;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.chat-message--assistant li {
  line-height: 1.5;
}

.chat-message--assistant li> :is(ul, ol) {
  margin-top: 0.25em;
}

.chat-message--assistant strong {
  font-weight: 700;
}

.chat-message--assistant em {
  font-style: italic;
}

.chat-message--assistant code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: color-mix(in srgb, var(--eletric-indigo) 10%, transparent);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

.chat-message--assistant pre {
  background: #1c1330;
  color: #f1ecff;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 10px);
  overflow-x: auto;
  margin: 0.4em 0 0.6em;
}

.chat-message--assistant pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 0.85em;
  white-space: pre;
}

.chat-message--assistant a {
  color: var(--eletric-indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-message--assistant hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--black) 12%, transparent);
  margin: 0.8em 0;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chat-typing__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg,
      rgba(111, 0, 255, 0.35) 0%,
      rgba(111, 0, 255, 0.95) 45%,
      rgba(157, 92, 255, 0.95) 55%,
      rgba(111, 0, 255, 0.35) 100%);
  background-size: 220% 100%;
  animation:
    chat-typing-bounce 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    chat-typing-shimmer 1.6s linear infinite;
}

.chat-typing__dot:nth-child(2) {
  animation-delay: 0.15s, 0.15s;
}

.chat-typing__dot:nth-child(3) {
  animation-delay: 0.3s, 0.3s;
}

@keyframes chat-typing-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.55;
  }

  30% {
    transform: translateY(-5px) scale(1);
    opacity: 1;
  }
}

@keyframes chat-typing-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .chat-typing__dot {
    animation: none;
    opacity: 0.85;
  }

  /* .chat-message (chat-message-in, linha ~314) so respeitava reduced-motion no typing
     dot — carregar um historico longo (selectSession) anima dezenas de bolhas de uma vez
     mesmo com "reduzir movimento" ativado no SO. */
  .chat-message {
    animation: none;
  }
}

.chat-retry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(180, 35, 24, 0.06);
  border: none;
}

.chat-retry__text {
  margin: 0;
  color: #7a231a;
}

/* #7a231a (vermelho escuro) e legivel sobre --white claro, mas --white vira quase-preto
   (#121212) no dark mode (ver _colors.css) — sobre esse fundo o mesmo tom fica com
   contraste bem abaixo do minimo. Escopado aqui (nao no design system global) porque essa
   cor de erro so existe dentro do chat. */
[data-theme="dark"] .chat-retry__text {
  color: #ff8a75;
}

.chat-retry__btn {
  background: var(--white);
  color: var(--eletric-indigo);
  border: 1px solid var(--eletric-indigo);
  border-radius: var(--radius-md, 10px);
  padding: 0.4rem 0.9rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.chat-retry__btn:hover {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.chat-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.chat-suggestion__text {
  margin: 0;
}

/* Especificidade de 2 classes (0,2,0) de proposito: o wrapper deste botao tambem carrega
   ".chat-message--assistant" (mesma bolha do texto da IA), e a regra ".chat-message--
   assistant a" (0,1,1) generica pra links de markdown teria precedencia sobre um seletor
   de 1 classe so (".chat-suggestion__btn", 0,1,0) e sobrescreveria color/text-decoration —
   na pratica texto branco virava roxo sobre fundo roxo, deixando o botao com texto
   invisivel. Ver ChatController/ChatSuggestionService para o que preenche este botao. */
.chat-suggestion .chat-suggestion__btn {
  display: inline-block;
  background: var(--eletric-indigo-solid);
  color: #fff;
  border-radius: var(--radius-md, 10px);
  padding: 0.5rem 1rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.chat-suggestion .chat-suggestion__btn:hover {
  opacity: 0.88;
}

.chat-quiz-wizard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

.chat-quiz-wizard--frozen {
  opacity: 0.6;
  pointer-events: none;
}

.chat-quiz-wizard__step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-quiz-wizard__legend {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.chat-quiz-wizard__final-text {
  margin: 0;
}

.chat-quiz-wizard__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Mesma linguagem visual de pill ja usada em .quiz-setup__button-badge
   (_quiz-setup.css) — classe propria pra nao acoplar o chat aquele componente
   especifico do index. */
.chat-quiz-wizard__badge {
  display: inline-flex;
  align-items: center;
  background-color: color-mix(in srgb, var(--eletric-indigo) 10%, transparent);
  color: var(--eletric-indigo);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-family: var(--montserrat);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.chat-quiz-wizard__chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat-quiz-wizard__chip {
  background: var(--white);
  color: var(--eletric-indigo);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.9rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.chat-quiz-wizard__chip:hover {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.chat-quiz-wizard__chip--recommended {
  border-width: 2px;
}

.chat-quiz-wizard__group-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chat-quiz-wizard__resolved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.chat-quiz-wizard__change-btn {
  background: none;
  border: none;
  color: var(--eletric-indigo);
  font-family: var(--montserrat);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.chat-quiz-wizard__custom-time {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-quiz-wizard__custom-time-input {
  width: 16rem;
  border: none;
  border-radius: var(--radius-md, 10px);
  padding: 0.4rem 0.6rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
}

.chat-quiz-wizard__custom-time-btn {
  background: var(--white);
  color: var(--eletric-indigo);
  border: none;
  border-radius: var(--radius-md, 10px);
  padding: 0.4rem 0.9rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-quiz-wizard__custom-time-btn:hover {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

/* Mesma especificidade de proposito que ".chat-suggestion .chat-suggestion__btn" (ver
   comentario acima): o wrapper deste botao carrega ".chat-quiz-wizard", nao
   ".chat-suggestion", entao precisa da propria regra igualmente especifica pra vencer
   ".chat-message--assistant a". */
.chat-quiz-wizard .chat-quiz-wizard__btn {
  display: inline-block;
  background: var(--eletric-indigo-solid);
  color: #fff;
  border-radius: var(--radius-md, 10px);
  padding: 0.5rem 1rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.chat-quiz-wizard .chat-quiz-wizard__btn:hover {
  opacity: 0.88;
}

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--alabaster-gray);
  flex-shrink: 0;
}

.chat-input-bar__textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 10px);
  border: none;
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-input-bar__textarea:focus-visible {
  outline: none;
  border-color: var(--eletric-indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eletric-indigo) 15%, transparent);
}

/* Cooldown de "ja existe uma resposta em andamento" (ver scheduleSendCooldown em
   main.js) — opacidade reduzida + cursor "not-allowed" deixam claro que o campo esta
   temporariamente bloqueado, nao so o placeholder "Aguarde Xs..." mudando de texto. */
.chat-input-bar__textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gradient-indigo);
  color: #fff;
  border: 0;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-md, 10px);
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.85, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--eletric-indigo) 45%, transparent);
  outline-offset: 2px;
}

.chat-input-bar__send {
  width: 46px;
  height: 46px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.chat-input-bar__send:disabled,
.chat-sessions__new:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Estado "Parar" durante o streaming (ver setSendingState em main.js) — neutro (mesmos
   tokens de cinza usados em botoes secundarios pelo projeto, ver .btn-secondary em
   cronograma.css/caderno-erros.css) em vez do gradiente indigo padrao, so pra sinalizar
   que o clique agora interrompe a geracao em vez de enviar — sem vermelho, que sugeriria
   erro/perigo numa acao que e so um cancelamento normal. */
.chat-input-bar__send--stop {
  background: var(--alabaster-gray);
  color: var(--black);
}

.chat-input-bar__send--stop:hover {
  background: var(--gray);
  color: var(--white);
}

@media (max-width: 860px) {
  .chat-page {
    padding: 1.25rem 3vw 2rem 0;
  }

  /* Colapsada (rail de icones) fica no fluxo normal, do lado do chat, em qualquer
     largura ● e o que mantem o botao de toggle sempre alcancavel, mesmo no mobile. So a
     versao EXPANDIDA vira overlay fixo aqui: 280px nao cabe ao lado do chat numa tela
     estreita sem espremer o conteudo, entao ela se destaca do fluxo e flutua por cima. */
  .chat-page.chat-sidebar-expanded .chat-sessions {
    position: fixed;
    top: calc(var(--navbar-height, 0px) + var(--site-banner-height, 0px));
    left: 0;
    width: 280px;
    max-height: none;
    height: calc(100dvh - var(--navbar-height, 0px) - var(--site-banner-height, 0px));
    background: var(--white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 50;
  }

  .chat-sessions-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .chat-page.chat-sidebar-expanded .chat-sessions-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .chat-window {
    min-height: 65vh;
  }

  .chat-message {
    max-width: 92%;
  }
}