@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;
}

/* Mesmo layout de duas colunas (rail + painel) do chat com IA (chat.css) — reaproveitado
   de proposito pra manter a linguagem visual da plataforma, mas sem colapsar pra icones:
   a lista de tickets precisa do assunto/status legiveis o tempo todo, entao a rail do
   suporte tem largura fixa em vez de alternar entre "colapsada" e "expandida". */
.support-page {
  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));
}

.support-tickets {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 0 0 300px;
  width: 300px;
  border-radius: var(--radius-lg);
  padding: 1rem;
  height: fit-content;
  max-height: 74vh;
  overflow: hidden;
  position: sticky;
  top: calc(var(--navbar-height, 15vh) + var(--site-banner-height, 0px));
}

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

.support-tickets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
}

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

.support-tickets__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;
}

.support-tickets__load-more:hover {
  background: var(--lavender-mist);
}

.support-ticket-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.support-ticket-item:hover {
  background: var(--lavender-mist);
}

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

/* Ticket com resposta nao lida (ver unreadByUser no backend) — ponto indigo antes do
   assunto, mesma logica visual de "notificacao nao lida" usada noutras listas do site. */
.support-ticket-item.is-unread .support-ticket-item__subject::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--eletric-indigo);
  margin-right: 0.4rem;
}

.support-ticket-item__subject {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-item__meta {
  font-size: 0.75rem;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

/* O atributo HTML "hidden" tem a MESMA especificidade (0,1,0) de um seletor de classe —
   quando os dois miram o mesmo elemento, a regra do stylesheet do autor (esta classe)
   sempre vence a do user-agent ("[hidden]{display:none}"), mesmo com especificidade
   empatada. Sem isso, "el.hidden = true" via JS parava de esconder o elemento sempre que
   ele tivesse "display" declarado aqui. Mesmo problema/correcao ja usado em profile.css
   (.profile-avatar-menu[hidden]). */
.support-empty-state[hidden] {
  display: none !important;
}

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

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

/* Status: cores ad-hoc (mesmo espirito de .chat-retry em chat.css) — sem tokens
   semanticos de sucesso/aviso/erro no design system global, entao definidas aqui e
   ajustadas para dark mode via [data-theme="dark"]. */
.support-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  width: fit-content;
}

/* Ver comentario de .support-empty-state[hidden] mais acima — mesmo problema: sem isso, um
   badge escondido via "el.hidden = true" (ex: support-requester-account-badge) continuava
   visivel como uma bolha vazia, porque "display: inline-flex" acima empata em especificidade
   com a regra "[hidden]{display:none}" do user-agent. */
.support-status-badge[hidden] {
  display: none !important;
}

.support-status-badge--sm {
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  align-self: flex-start;
}

.support-status-badge--pending-agent {
  background: color-mix(in srgb, var(--eletric-indigo) 12%, transparent);
  color: var(--eletric-indigo);
}

.support-status-badge--pending-user {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

[data-theme="dark"] .support-status-badge--pending-user {
  color: #fbbf24;
}

.support-status-badge--resolved {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

[data-theme="dark"] .support-status-badge--resolved {
  color: #4ade80;
}

.support-status-badge--closed {
  background: color-mix(in srgb, var(--gray) 15%, transparent);
  color: var(--gray);
}

/* Usados pelo modal de usuario do painel admin (ver admin/main.js) — nao sao status de
   ticket, mas reaproveitam a mesma linguagem visual de badge arredondado. */
.support-status-badge--plan {
  background: color-mix(in srgb, var(--eletric-indigo) 12%, transparent);
  color: var(--eletric-indigo);
}

.support-status-badge--danger {
  background: color-mix(in srgb, #b42318 12%, transparent);
  color: #b42318;
}

[data-theme="dark"] .support-status-badge--danger {
  color: #ff8a75;
}

.support-new-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  max-width: 560px;
  margin: auto;
  width: 100%;
}

/* Ver comentario de .support-empty-state[hidden] acima — mesmo problema. */
.support-new-ticket[hidden] {
  display: none !important;
}

.support-new-ticket h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.support-new-ticket label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
}

.support-new-ticket input,
.support-new-ticket select,
.support-new-ticket textarea {
  border: none;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.92rem;
  padding: 0.65rem 0.85rem;
  resize: vertical;
}

.support-new-ticket textarea {
  min-height: 8rem;
}

.support-new-ticket input:focus-visible,
.support-new-ticket select:focus-visible,
.support-new-ticket textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eletric-indigo) 15%, transparent);
}

.support-new-ticket__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.support-new-ticket__feedback {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: #b42318;
}

[data-theme="dark"] .support-new-ticket__feedback {
  color: #ff8a75;
}

.support-thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Ver comentario de .support-empty-state[hidden] acima — mesmo problema. */
.support-thread[hidden] {
  display: none !important;
}

/* Layout do painel embutido do agente (profile.html) vira Grid em vez do flex aninhado que
   .support-thread usa por padrao (ainda usado por public/pages/suporte.html, aluno comum,
   que nunca tem o aside de contexto e continua com a hierarquia mais simples de 3 blocos
   empilhados). Grid permite posicionar "Detalhes do aluno" numa area INDEPENDENTE do resto —
   abaixo de "Respostas prontas" no mobile, ao lado das mensagens no desktop — sem duplicar
   DOM nem lutar com "order" atravessando um nivel de aninhamento flex (o que aconteceria se
   o aside continuasse dentro de um wrapper flex proprio so com as mensagens). */
[data-user-screen-panel="support-agent"] #support-thread {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "messages aside"
    "composer composer";
}

[data-user-screen-panel="support-agent"] .support-thread__header {
  grid-area: header;
}

[data-user-screen-panel="support-agent"] #support-messages {
  grid-area: messages;
  min-height: 0;
}

[data-user-screen-panel="support-agent"] .support-requester-panel {
  grid-area: aside;
  /* Sem isso o aside estica pra ocupar a MESMA altura da coluna de mensagens (padrao de
     grid item, "stretch"), sobrando um vazio grande embaixo do conteudo curto (ver
     img/organizar-componentes.png) — "start" deixa a altura ser so a do conteudo de verdade. */
  align-self: start;
  /* ... mas o oposto tambem acontecia: com dado de verdade (varios tickets, muitas sessoes
     ativas), o aside virava MAIS alto que as mensagens, e como nada aqui tem altura fixa
     nem scroll interno de verdade (.support-window so tem overflow:hidden, sem max-height —
     ver comentario la), o conteudo do aside "travava" a altura de toda a pagina, empurrando
     o toolbar/caixa de resposta pra fora da tela mesmo com uma conversa curta (ver
     img/sidebar-chat.png). O `overflow-y:auto` da regra base (.support-requester-panel,
     mais abaixo neste arquivo) ja existia mas era um no-op sem um teto pra estourar —
     max-height aqui e o que faz o scroll interno de verdade acontecer. Mesmo vh usado por
     [data-user-screen-panel="support-agent"] .support-window (linha ~1083) — nao inventa um
     numero novo, so cala o mesmo teto vertical que a janela do chat ja usa como alvo. */
  max-height: 60vh;
}

/* Abas de modo (Responder ao aluno/Nota interna) + dropdown de respostas prontas + textarea
   viram UM bloco so (composer) — antes toolbar e form eram areas de grid separadas, e no
   mobile o aside de "Detalhes do aluno" ficava colocado ENTRE elas, afastando o seletor de
   modo do campo de texto que ele controla (ver profile.html, o wrapper .support-composer).
   O cartao com borda/cantos arredondados (abaixo) e o que faz as abas virarem literalmente
   o cabecalho da caixa de resposta, em vez de uma faixa solta acima dela (ver
   img/responder-aluno.png) — "overflow:hidden" clipa os cantos de .support-reply-toolbar/
   .support-input-bar dentro do raio do cartao, sem cada um precisar do proprio border-radius. */
[data-user-screen-panel="support-agent"] .support-composer {
  grid-area: composer;
  margin: 0 1.5rem 1.25rem;
  border: 1px solid var(--alabaster-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.support-thread__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;
}

.support-thread__header-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.support-thread__header-info h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Segunda linha do cabecalho: nome do aluno + categoria/prioridade/status/aging/data de
   abertura — tudo em flex-wrap pra caber sem espremer em telas estreitas (ver breakpoint
   de 480px mais abaixo, so escopado ao painel embutido do agente). Substitui o antigo
   "Usuario: <uuid>" cru (ver plano de implementacao). */
.support-thread__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.support-thread__meta-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
}

.support-thread__meta-text {
  font-size: 0.8rem;
  color: var(--gray);
}

.support-thread__aging {
  font-size: 0.8rem;
  font-weight: 600;
  color: #b45309;
}

[data-theme="dark"] .support-thread__aging {
  color: #fbbf24;
}

.support-messages {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.support-message {
  max-width: 78%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  line-height: 1.5;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  animation: chat-message-in 0.18s ease both;
}

.support-message--user {
  align-self: flex-end;
  background: var(--lavender-mist);
  color: var(--black);
  border-bottom-right-radius: 4px;
  align-items: flex-end;
}

.support-message--agent {
  align-self: flex-start;
  background: var(--lavander-veil);
  color: var(--black);
  border-bottom-left-radius: 4px;
}

.support-message__time {
  font-size: 0.72rem;
  color: var(--gray);
}

/* Nota interna: fica na mesma linha do tempo da conversa (nao alinhada nem a esquerda nem a
   direita, ja que nao e "do aluno" nem "pro aluno") — cor ambar reaproveitada de
   .support-status-badge--pending-user, aqui como fundo tracejado pra distinguir claramente
   de uma mensagem de verdade mesmo com leitura rapida. Nunca visivel na visao do aluno (ver
   entities/Support.ts / SupportController.getTicket). */
.support-message--note {
  align-self: center;
  max-width: 92%;
  background: rgba(217, 119, 6, 0.1);
  border: 1px dashed rgba(217, 119, 6, 0.4);
}

.support-message__note-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b45309;
}

[data-theme="dark"] .support-message__note-tag {
  color: #fbbf24;
}

.support-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;
}

.support-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;
}

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

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

/* Abas "Responder ao aluno"/"Nota interna" + dropdown de respostas prontas — antes uma
   faixa solta, flutuando acima da caixa de texto com um vao ate ela (ver
   img/responder-aluno.png). Agora e a faixa SUPERIOR do mesmo cartao da caixa de resposta
   (ver .support-composer abaixo): fundo lavender-mist pra ler como "cabecalho de aba" —
   mesma linguagem visual ja usada em .support-requester-panel__section — com a divisoria
   real sendo o border-top que .support-input-bar ja tinha, agora servindo de linha interna
   do cartao em vez de separador solto. */
.support-reply-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: var(--lavender-mist);
}

.support-reply-mode-tabs {
  display: flex;
  gap: 0.35rem;
}

.support-reply-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: transparent;
  color: var(--gray);
  font-family: var(--montserrat);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.support-reply-mode-tab:hover {
  background: var(--lavender-mist);
}

.support-reply-mode-tab.is-active {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

/* .simulaked-dropdown (componente padronizado, _dropdown.css) vem com width:100% pensado
   pra formularios de coluna unica — aqui divide a linha com as abas de modo, entao precisa
   de largura propria em vez de esticar. */
.support-canned-dropdown {
  width: auto;
  max-width: 14rem;
  flex-shrink: 0;
}

/* .simulaked-dropdown__button base (justify-content: space-between, pensado pra so
   label+chevron) espalharia o icone novo longe do label — reempilha os dois a esquerda e
   empurra so o chevron pra direita via margin-left:auto. */
.support-canned-dropdown .simulaked-dropdown__button {
  justify-content: flex-start;
}

.support-canned-dropdown .simulaked-dropdown__button .simulaked-dropdown__icon {
  margin-left: auto;
}

/* Ver no Painel Admin / Ver sessões ativas / dropdown de respostas prontas — icone-lucide
   ao lado de texto de botao. Sem tamanho proprio o SVG do Lucide usa o padrao da lib (24px),
   grande demais pra um botao compacto (mesmo motivo de .admin-icon-btn .lucide-icon em
   admin.css, so que aqui cobrindo varios seletores de uma vez porque todos querem o mesmo
   tamanho pequeno). */
.support-requester-panel__admin-btn .lucide-icon,
.support-requester-panel__toggle .lucide-icon,
.support-canned-dropdown .lucide-icon,
.support-thread__assign-wrap .lucide-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

/* Select nativo de atribuicao + icone ao lado (nao da pra por icone DENTRO de um <select>). */
.support-thread__assign-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray);
}

/* So pro botao "Ver sessões ativas" — NUNCA aplicar esta classe em "Ver no Painel Admin"
   (data-admin-only hidden): declarar display incondicionalmente aqui reintroduziria a
   pegadinha de especificidade do atributo "hidden" ja documentada nesta folha (ver
   .support-status-badge[hidden]/.btn-secondary[hidden] mais acima) pro botao admin-only, que
   depende de NAO ter display na classe base ate a regra de revelacao
   (body.is-admin-account [data-admin-only], profile.css) entrar em cena. */
.support-requester-panel__admin-btn--standalone {
  display: inline-flex;
}

/* Mesmo motivo do bloco de icones acima — badge de categoria (cabecalho do ticket), assunto
   na lista de tickets (rail esquerda), Resolver/Fechar e o botao de enviar tambem ganharam
   icone e precisam do proprio tamanho (senao caem no padrao de 24px do Lucide). */
.support-status-badge .lucide-icon,
.btn-secondary .lucide-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.support-ticket-item__subject .lucide-icon {
  width: 0.85rem;
  height: 0.85rem;
  vertical-align: -0.1rem;
  margin-right: 0.15rem;
}

.support-input-bar__send .lucide-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.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;
}

/* Precisa vir DEPOIS de .btn-primary — mesma especificidade (0,1,0) das duas classes, e o
   "background" do .btn-primary e um shorthand (reseta background-image pro gradiente de
   novo); a ultima declarada no arquivo e que vale. Botao de enviar so icone nos dois modos
   (ver profile.html) — so a cor muda aqui. Ambar reaproveitado de .support-message--note,
   pra reforcar visualmente que o envio nesse modo NAO vai pro aluno. */
.support-input-bar__send--note {
  background: #b45309;
}

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

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

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--lavender-mist);
  color: var(--black);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md, 10px);
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
  flex-shrink: 0;
}

/* Ver comentario de .support-empty-state[hidden] mais acima — mesmo problema. Usado por
   #btn-support-resolve (suporte.html) e #btn-admin-enable-account/#btn-admin-disable-
   account (admin.html), todos alternados via "el.hidden = ..." no JS. */
.btn-secondary[hidden] {
  display: none !important;
}

.btn-secondary:hover {
  background: var(--alabaster-gray);
}

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

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

/* ---- Painel do agente (embutido em profile.html, data-user-screen-panel="support-agent") ---- */

.support-admin__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0 0.25rem;
}

.support-admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.25rem 0.5rem;
}

.support-admin__filter {
  border: none;
  background: var(--lavender-mist);
  color: var(--gray);
  font-family: var(--montserrat);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.support-admin__filter:hover {
  background: var(--alabaster-gray);
}

.support-admin__filter.is-active {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.support-admin__status-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Select nativo (nao o dropdown customizado — ver comentario em populateAssignSelect no
   SupportAgentController.js) de atribuicao de ticket, no cabecalho junto com Resolver/
   Fechar. Mesma paleta dos inputs do input-bar (fundo lavender-mist), so compacto. */
.support-thread__assign-select {
  border: none;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  max-width: 12rem;
}

/* Mensagens do painel do agente sao mostradas do ponto de vista de quem esta respondendo:
   a propria mensagem do agente fica a direita (enviada), a do aluno a esquerda (recebida) —
   inverso da pagina do usuario (support-message--user a direita), ver
   profile/controllers/SupportAgentController.js. */
.support-messages--agent-view .support-message--agent {
  align-self: flex-end;
  background: var(--lavender-mist);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: var(--radius-lg);
  align-items: flex-end;
}

.support-messages--agent-view .support-message--user {
  align-self: flex-start;
  background: var(--lavander-veil);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: var(--radius-lg);
  align-items: flex-start;
}

/* Painel de contexto do aluno (nome/e-mail/plano/ultimos tickets), ao lado das mensagens
   dentro da thread do agente — so existe no markup de profile.html (data-user-screen-panel
   ="support-agent"), nunca em public/pages/suporte.html (aluno comum). */
.support-requester-panel {
  flex: 0 0 260px;
  min-width: 0;
  border-left: 1px solid var(--alabaster-gray);
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* So existe visualmente <=760px (ver media query mais abaixo) — no desktop o painel do
   aluno sempre fica visivel ao lado das mensagens, entao esse botao nunca precisa aparecer
   ali. Fora da media query fica display:none incondicional (nao ha atributo "hidden" aqui
   pra se preocupar com a pegadinha de especificidade ja documentada nesta folha). */
.support-requester-panel__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
}

.support-requester-panel__toggle-chevron {
  margin-left: auto;
  transition: transform 0.18s ease;
}

.support-requester-panel[hidden] {
  display: none !important;
}

.support-requester-panel__empty {
  color: var(--gray);
  font-size: 0.85rem;
}

.support-requester-panel__content[hidden] {
  display: none !important;
}

.support-requester-panel__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.support-requester-panel__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.support-requester-panel__email {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gray);
  overflow-wrap: anywhere;
}

.support-requester-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* O motivo do bloqueio (accountDisabledReason) e texto livre digitado por um admin — ao
   contrario dos outros usos de support-status-badge (rotulos curtos e fixos), pode ser mais
   longo que a largura do painel (260px). Sobrescreve o white-space:nowrap so aqui, escopado
   ao painel, pra quebrar linha em vez de vazar pra fora do aside. */
.support-requester-panel .support-status-badge {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

.support-requester-panel__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray);
}

/* Mesmo visual de .btn-secondary, mas SEM usar a classe: .btn-secondary[hidden] tem
   "display: none !important" (pensado pro padrao "el.hidden = true/false" via JS, ver
   #btn-support-resolve/#btn-admin-enable-account), e !important sempre vence a regra de
   revelacao "body.is-admin-account [data-admin-only]{display:flex}" (profile.css) que
   controla ESTE botao — a combinacao das duas deixava o botao preso invisivel mesmo pra
   quem tem role admin. Por isso nao declara "display" aqui (deixa o [hidden] nativo
   funcionar ate a regra de revelacao decidir mostrar), igual o padrao ja usado em
   .billing-chip[data-admin-only]. */
.support-requester-panel__admin-btn {
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* var(--white), nao lavender-mist: o botao agora mora DENTRO de um
     .support-requester-panel__section (mesmo fundo lavender-mist) — precisa contrastar com
     o cartao em vez de se misturar nele. */
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md, 10px);
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.support-requester-panel__admin-btn:hover {
  background: var(--alabaster-gray);
}

.support-requester-panel__subtitle {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--black);
}

/* Agrupa cada bloco de informacao (identidade, ultimos tickets, sessoes ativas, disputas)
   num cartao visualmente separado — mesma linguagem de .admin-user-section (admin.css):
   fundo lavender-mist, cantos arredondados. Antes tudo ficava so empilhado solto, sem
   nenhuma separacao visual entre "quem e o aluno" e cada secao, e o aside esticava pra
   ocupar a mesma altura da coluna de mensagens (align-self:start abaixo evita isso), sobrando
   um vazio grande embaixo do conteudo curto (ver img/organizar-componentes.png). */
.support-requester-panel__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--lavender-mist);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 0.9rem;
}

.support-requester-panel__tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.support-requester-panel__ticket {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md, 10px);
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--montserrat);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.support-requester-panel__ticket:hover {
  background: var(--lavender-mist);
}

.support-requester-panel__ticket.is-active {
  background: var(--lavander-veil);
  border-color: var(--eletric-indigo);
  cursor: default;
}

/* Sessoes ativas / disputas de cobranca (ver renderActiveSessions/renderBillingDisputes) —
   mesmo visual de item de lista, mas nao navegam pra lugar nenhum: sem cursor de ponteiro
   nem highlight de hover, que sugeririam uma acao que nao existe. */
.support-requester-panel__ticket--static {
  cursor: default;
}

.support-requester-panel__ticket--static:hover {
  background: transparent;
}

.support-requester-panel__ticket-subject {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-requester-panel__ticket-meta {
  font-size: 0.72rem;
  color: var(--gray);
}

@media (max-width: 860px) {
  .support-page {
    flex-direction: column;
    /* Mesmo motivo do comentario em [data-user-screen-panel="support-agent"] .support-page
       mais abaixo: align-items:flex-start (regra base) vira eixo horizontal quando a direcao
       muda pra coluna, e sem stretch o .support-window (sem width proprio) sobra estreito. */
    align-items: stretch;
    padding: 1.25rem 3vw 2rem;
  }

  .support-tickets {
    position: static;
    width: 100%;
    flex: 1 1 auto;
    max-height: none;
  }

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

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

/* Painel de suporte (agente) embutido em /profile, dentro de
   [data-user-screen-panel="support-agent"] — NAO mexe nas regras base de .support-page/
   .support-tickets/.support-window acima, que continuam servindo public/pages/suporte.html
   (chat do aluno comum) e nao devem mudar de comportamento. A coluna de conteudo do perfil
   e sempre mais estreita que a pagina cheia (tem a sidebar de navegacao ao lado), entao aqui
   usamos sempre o mesmo layout empilhado que o breakpoint mobile acima ja define pra telas
   estreitas, em vez de inventar um terceiro conjunto de regras. */
[data-user-screen-panel="support-agent"] .support-page {
  flex-direction: column;
  /* .support-page (regra base) define align-items:flex-start pensando no layout em LINHA,
     onde isso so afeta o eixo vertical. Aqui a direcao vira coluna e align-items passa a
     controlar o eixo horizontal — sem resetar pra stretch, .support-window (sem width
     proprio, so "flex:1" que agora e o eixo errado) encolhia pro conteudo em vez de ocupar
     a largura toda, deixando um vazio grande do lado direito (ver img/chat-espace.png). */
  align-items: stretch;
  padding: 0;
  min-height: 60vh;
}

[data-user-screen-panel="support-agent"] .support-tickets {
  position: static;
  width: 100%;
  flex: 1 1 auto;
  max-height: none;
}

[data-user-screen-panel="support-agent"] .support-window {
  min-height: 60vh;
}

/* Celular estreito: o cabecalho da conversa (assunto/solicitante/status + botoes Resolver/
   Fechar) e o padding generoso de header/mensagens/input-bar foram pensados pra pagina cheia
   — dentro da coluna (mais estreita) do perfil isso sobra pouco espaco pro assunto do ticket
   antes de truncar. So essas duas mudancas, escopadas ao painel embutido: o cabecalho empilha
   (info em cima, acoes embaixo, cada uma com a largura toda) em vez de espremer os dois lado a
   lado, e o padding lateral encolhe pra sobrar mais largura de leitura. Nao mexe em
   public/pages/suporte.html (aluno comum), que continua com o padding original. */
@media (max-width: 480px) {
  [data-user-screen-panel="support-agent"] .support-thread__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 1rem;
  }

  [data-user-screen-panel="support-agent"] .support-admin__status-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  [data-user-screen-panel="support-agent"] .support-messages {
    padding: 1rem;
  }

  [data-user-screen-panel="support-agent"] .support-input-bar {
    padding: 0.75rem 1rem;
  }

  [data-user-screen-panel="support-agent"] .support-composer {
    margin: 0 1rem 1rem;
  }
}

/* A coluna de conteudo do perfil (sidebar de navegacao ao lado) e sempre mais estreita que
   a pagina cheia de suporte — o painel de contexto do aluno some do lado das mensagens bem
   antes do breakpoint de celular acima e empilha embaixo, em vez de espremer o chat contra
   uma coluna de 260px inutilizavel. */
@media (max-width: 760px) {
  /* Redefine so as AREAS (o grid-area de cada bloco, ver regra base de #support-thread
     acima, nao muda) — result: aside sai de "do lado das mensagens" e cai logo ACIMA do
     composer (abas de modo + respostas prontas + textarea, sempre um bloco so — ver
     profile.html), nunca mais partido no meio dele. Uma coluna so, altura de cada linha
     vira "auto" (a pagina inteira rola, em vez de travar as mensagens numa altura fixa com
     scroll interno — mesmo comportamento que ja era assim antes desta tela virar Grid). */
  [data-user-screen-panel="support-agent"] #support-thread {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "header"
      "messages"
      "aside"
      "composer";
  }

  [data-user-screen-panel="support-agent"] .support-requester-panel {
    border-left: none;
    border-top: 1px solid var(--alabaster-gray);
    /* O teto de 60vh (regra desktop) nao faz sentido aqui — quem limita a altura no mobile
       e o .support-requester-panel__body (280px, so quando expandido, ver abaixo); o aside
       inteiro (toggle fechado + corpo) precisa ficar livre pra crescer com a pagina. */
    max-height: none;
  }

  /* Painel do aluno fechado por padrao (so o botao "Detalhes do aluno" visivel) — antes ele
     ficava sempre aberto, encravado no meio do scroll entre as mensagens e a caixa de
     resposta (ver img/melhoria-mobile.png), mesmo limitado a 260px. O limite de altura agora
     e so do CORPO, quando expandido, nao do painel inteiro (que tambem contem o botao). */
  .support-requester-panel__toggle {
    display: flex;
  }

  .support-requester-panel__body {
    display: none;
  }

  .support-requester-panel.is-expanded .support-requester-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.75rem;
  }

  .support-requester-panel.is-expanded .support-requester-panel__toggle-chevron {
    transform: rotate(180deg);
  }

  /* Abas de resposta + dropdown de respostas prontas: a linha unica (space-between +
     flex-wrap) deixava o dropdown cair sozinho, desalinhado, quando nao cabia ao lado das
     abas (ver img/melhoria-mobile.png). Empilhados em blocos de largura cheia fica previsivel. */
  .support-reply-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .support-canned-dropdown {
    max-width: 100%;
  }
}

/* ---- Spec 006: busca/filtros da fila, editar prioridade/categoria, acoes de conta ---- */

.support-admin__search {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.25rem 0.5rem;
}

.support-admin__search-row {
  display: flex;
  gap: 0.35rem;
}

.support-admin__search input,
.support-admin__search select {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.78rem;
  padding: 0.45rem 0.6rem;
}

.support-admin__search input:focus-visible,
.support-admin__search select:focus-visible {
  outline: none;
  border-color: var(--eletric-indigo);
}

/* Lapis ao lado dos badges do cabecalho do ticket. */
.support-thread__meta-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--alabaster-gray);
  border-radius: var(--radius-8, 8px);
  background: var(--white);
  color: var(--gray);
  cursor: pointer;
}

.support-thread__meta-edit:hover {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.support-thread__meta-edit .lucide-icon {
  width: 0.85rem;
  height: 0.85rem;
}

.support-requester-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* --standalone declara display:inline-flex, o que venceria o [hidden] nativo do botao
   "Reenviar confirmacao" (so aparece com e-mail nao confirmado). */
.support-requester-panel__admin-btn--standalone[hidden] {
  display: none;
}