/* ==========================================================================
   SOLICITAÇÕES — a mesma informação do Portal, do lado de quem abriu.
   O topo vem de index.css. Os chamados ficam numa grade de cartões no
   mesmo estilo dos cards da Base de Soluções (base.css .solucao-card):
   status em selo colorido, título, descrição curta, etiquetas e um rodapé
   com quem respondeu e quando foi aberto.
   ========================================================================== */

.solicitacoes {
  flex: 1;
  /*min-height garante que o campo cinza vai ate o fim da tela mesmo com
    uma linha só — sem isso sobra branco embaixo e a pagina parece cortada.
    84px e a altura do topo.*/
  min-height: calc(100dvh - 84px);
  box-sizing: border-box;
  padding: 2.5rem 1.5rem 4rem;
  background-color: #fafafa;
}

/*MESMA LARGURA DA HOME: a grade precisa de espaco para mais de uma coluna.*/
.solicitacoes__area {
  max-width: 76rem;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.solicitacoes__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.solicitacoes__titulo {
  margin: 0 0 0.1875rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.solicitacoes__resumo {
  margin: 0;
  font-size: 0.8125rem;
  color: #8a8a8a;
}

.solicitacoes__busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 14rem;
  max-width: 20rem;
}

.solicitacoes__busca svg {
  position: absolute;
  left: 0.6875rem;
  color: #a1a1aa;
  pointer-events: none;
}

.solicitacoes__busca input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.5rem 2.125rem;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background-color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #1a1a1a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.solicitacoes__busca input::placeholder {
  color: #a1a1aa;
}

.solicitacoes__busca input:focus {
  outline: none;
  border-color: #dd5b12;
  box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.13);
}

.solicitacoes__busca input::-webkit-search-cancel-button {
  appearance: none;
}

/* --------------------------------------------------------------------------
   FILTROS
   -------------------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.filtro {
  padding: 0.375rem 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.75rem;
  color: #5a5a5a;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.filtro:hover {
  border-color: #d4d4d8;
  color: #1a1a1a;
}

/*TOQUE: sem hover no celular, o filtro precisa reagir no dedo encostar.*/
.filtro:active {
  transform: scale(0.96);
}

.filtro--ativo,
.filtro--ativo:hover {
  border-color: #1a1a1a;
  background-color: #1a1a1a;
  color: #fff;
}

.filtro:focus-visible {
  outline: 2px solid #dd5b12;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   GRADE DE CHAMADOS — mesmo vocabulario dos cards da Base de Soluções:
   fundo branco, borda fina, raio de 10px, titulo em Sora, descricao em duas
   linhas, etiquetas cinza e rodape separado por uma linha.
   -------------------------------------------------------------------------- */

.chamados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*O <li> estica o cartao ate a altura da linha da grade: cartoes lado a
  lado ficam do mesmo tamanho, com o rodape alinhado embaixo.*/
.chamados > li {
  display: flex;
}

/*O CARTAO INTEIRO E O ALVO DE CLIQUE*/
.chamado {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.125rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background-color: #fff;
  font-family: inherit;
  text-align: left;
  color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chamado:hover {
  border-color: #8a8a8a;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05);
}

/*TOQUE: sem hover no celular, um leve encolhimento confirma o toque.*/
.chamado:active {
  transform: scale(0.99);
}

.chamado:focus-visible {
  outline: 2px solid #dd5b12;
  outline-offset: 2px;
}

/*AGUARDANDO VOCE: o unico estado que pede acao ganha borda propria, alem
  do selo — da para achar na grade sem ler cartao por cartao.*/
.chamado--aguardando {
  border-color: #f3bcbc;
}

.chamado--aguardando:hover {
  border-color: #d64545;
}

.chamado__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.chamado__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

/*STATUS EM SELO COLORIDO, COMO O TIPO NOS CARDS DE SOLUCAO*/
.chamado__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chamado__status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.chamado--aberto .chamado__status { background-color: #e8eef6; color: #2c5c96; }
.chamado--andamento .chamado__status { background-color: #fbf3dc; color: #8a6608; }
.chamado--aguardando .chamado__status { background-color: #fdeceb; color: #b02a2a; }
.chamado--fechado .chamado__status { background-color: #f2f3f5; color: #6b7280; }

/*"RESPONDA": so aparece quando a bola esta com o usuario*/
.chamado__aviso {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background-color: #d64545;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/*O NUMERO E REFERENCIA, NAO TITULO: tom de apoio, no canto*/
.chamado__numero {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #8a8a8a;
}

.chamado__assunto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: #1a1a1a;
}

.chamado__descricao {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: #5a5a5a;
}

.chamado__descricao--vazia {
  font-style: italic;
  color: #a1a1aa;
}

.chamado__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chamado__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5625rem;
  border-radius: 6px;
  background-color: #f0f0f1;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5a5a5a;
}

.chamado__tag-icone {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/*RODAPE: margin-top auto empurra para o fim do cartao, alinhando os
  rodapes da mesma linha da grade mesmo com titulos de tamanhos diferentes.*/
.chamado__rodape {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e5e5;
}

.chamado__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(221, 91, 18, 0.1);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  color: #c24f00;
  user-select: none;
}

.chamado__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*QUEM CONVERSOU: FOTOS EMPILHADAS (ate 3). A borda branca separa uma foto
  da outra onde elas se sobrepoem.*/
.chamado__avatares {
  display: flex;
  flex-shrink: 0;
}

.chamado__avatares .chamado__avatar {
  box-shadow: 0 0 0 2px #fff;
}

.chamado__avatares .chamado__avatar + .chamado__avatar {
  margin-left: -6px;
}

/*NINGUEM RESPONDEU AINDA: relogio no lugar da foto*/
.chamado__avatar--vazio {
  background-color: #f0f0f1;
  color: #8a8a8a;
}

.chamado__avatar-icone {
  width: 14px;
  height: 14px;
}

.chamado__quem {
  min-width: 0;
  overflow: hidden;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1a1a1a;
}

.chamado__quem--vazio {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  color: #8a8a8a;
}

/*TEXTO DO RODAPE EM DUAS LINHAS: quem conversou em cima, data embaixo*/
.chamado__rodape-texto {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
  line-height: 1.3;
}

.chamado__quando {
  font-size: 0.6875rem;
  color: #8a8a8a;
}

.chamados__vazio {
  margin: 0;
  padding: 3rem 1rem;
  border: 1px dashed #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  font-size: 0.875rem;
  text-align: center;
  color: #8a8a8a;
}

.solicitacoes__erro {
  display: none;
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #f3bcbc;
  border-radius: 8px;
  background-color: #fdeceb;
  font-size: 0.8125rem;
  color: #b02a2a;
}

.solicitacoes__erro--visivel {
  display: block;
}

/* ==========================================================================
   DETALHE: A CONVERSA
   ========================================================================== */

.detalhe {
  width: min(38rem, 92vw);
  max-height: 86dvh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  /*CHEGA COMO MATERIAL, NAO SO UM FADE: opacidade + leve escala junto.
    allow-discrete deixa a transicao rodar antes do display:none sumir
    o elemento (senao nao haveria tempo de anima-lo saindo).*/
  transition: opacity 0.18s ease, transform 0.18s ease,
              overlay 0.18s allow-discrete, display 0.18s allow-discrete;
  opacity: 1;
  transform: scale(1);
}

.detalhe::backdrop {
  background-color: rgba(16, 10, 8, 0.55);
  transition: background-color 0.18s ease, overlay 0.18s allow-discrete,
              display 0.18s allow-discrete;
}

@starting-style {
  .detalhe[open] {
    opacity: 0;
    transform: scale(0.96);
  }

  .detalhe[open]::backdrop {
    background-color: transparent;
  }
}

.detalhe__conteudo {
  display: flex;
  flex-direction: column;
  max-height: 86dvh;
}

.detalhe__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.125rem 1.25rem 1rem;
  border-bottom: 1px solid #ececec;
}

.detalhe__identificacao {
  min-width: 0;
}

.detalhe__numero {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}

.detalhe__titulo {
  margin: 0 0 0.25rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
}

.detalhe__meta {
  margin: 0;
  font-size: 0.75rem;
  color: #8a8a8a;
}

.detalhe__fechar {
  display: flex;
  flex-shrink: 0;
  padding: 0.3125rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #8a8a8a;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.detalhe__fechar:hover {
  background-color: #f4f4f5;
  color: #1a1a1a;
}

/*CONVERSA: mesmos baloes do Portal, so que espelhados — aqui quem fala
  do lado direito e o usuario, nao a equipe.*/
.conversa {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  overflow-y: auto;
}

/*A mensagem e uma grade de duas colunas: foto e balao. A hora ocupa a
  linha de baixo, alinhada com o balao — nao com a foto.*/
.mensagem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  max-width: 82%;
}

.mensagem--minha {
  align-self: flex-end;
  /*Espelha: o balao vem antes da foto, entao a coluna elastica e a primeira.*/
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: end;
}

/*A automatica nao tem foto: uma coluna so. O recuo da esquerda ocupa o
  lugar que seria da foto, para ela alinhar com os baloes da equipe.*/
.mensagem--sistema {
  grid-template-columns: minmax(0, 1fr);
  margin-left: calc(28px + 0.5rem);
}

.mensagem__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  /*Alinha pelo topo do balao, na altura do nome de quem falou — no rodape
    a foto descola do autor quando a mensagem tem varias linhas.*/
  align-self: start;
  background-color: #d4d4d8;
  font-size: 0.625rem;
  font-weight: 600;
  color: #3f3f46;
  /*A foto pode demorar; o circulo ja nasce redondo com as iniciais dentro.*/
  user-select: none;
}

.mensagem__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mensagem__balao {
  padding: 0.5rem 0.6875rem 0.5625rem;
  border-radius: 12px;
  background-color: #e4e4e5;
}

.mensagem--minha .mensagem__balao {
  background-color: #facfc0;
}

/*AUTOMATICA: e do sistema, nao de uma pessoa — tracejado avisa isso.
  O texto fica mais claro que o das pessoas de proposito: no Portal o
  analista audita essas mensagens, aqui elas sao so protocolo e nao
  podem competir com a conversa de verdade.*/
.mensagem--sistema .mensagem__balao {
  border: 1px dashed #d9d9dc;
  background-color: #f7f7f8;
}

.mensagem--sistema .mensagem__texto {
  color: #6a6a6a;
}

.mensagem__autor {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1a1a1a;
}

.mensagem__texto {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #1a1a1a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*CARD DE SOLUCAO: a equipe mandou o link de um artigo da base no chat.*/
.comentario__solucao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5625rem;
  border-radius: 8px;
  background-color: rgba(26, 26, 26, 0.06);
}

.comentario__solucao-icone {
  display: flex;
  flex-shrink: 0;
  color: #dd5b12;
}

.comentario__solucao-titulo {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
}

.comentario__solucao-botao {
  flex-shrink: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: 6px;
  background-color: #dd5b12;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.comentario__solucao-botao:hover {
  filter: brightness(1.08);
}

/*A hora vai para a linha de baixo, na coluna do balao — assim ela fica
  alinhada com o texto e nao embaixo da foto.*/
.mensagem__quando {
  grid-column: 2;
  margin-top: 0.1875rem;
  font-size: 0.625rem;
  color: #a1a1aa;
}

.mensagem--minha .mensagem__quando,
.mensagem--sistema .mensagem__quando {
  grid-column: 1;
}

.conversa__vazia {
  margin: auto;
  font-size: 0.8125rem;
  color: #a1a1aa;
}

/* --------------------------------------------------------------------------
   RESPONDER
   -------------------------------------------------------------------------- */

.responder {
  flex-shrink: 0;
  padding: 0.875rem 1.25rem 1.125rem;
  border-top: 1px solid #ececec;
}

.responder[hidden] {
  display: none;
}

.responder__campo {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #1a1a1a;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.responder__campo::placeholder {
  color: #a1a1aa;
}

.responder__campo:focus {
  outline: none;
  border-color: #dd5b12;
  box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.13);
}

.responder__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.responder__aviso {
  margin: 0;
  font-size: 0.75rem;
  color: #2f9e44;
}

.responder__aviso--erro {
  color: #b02a2a;
}

.responder__enviar {
  flex-shrink: 0;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 8px;
  background-color: #dd5b12;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.responder__enviar:hover:not(:disabled) {
  background-color: #c24f00;
}

.responder__enviar:active:not(:disabled) {
  background-color: #c24f00;
  transform: scale(0.97);
}

.responder__enviar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.detalhe__fechado {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem 1.125rem;
  border-top: 1px solid #ececec;
}

.detalhe__fechado[hidden] {
  display: none;
}

.detalhe__fechado-texto {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8a8a8a;
}

.detalhe__reabrir {
  flex-shrink: 0;
  padding: 0.5rem 1.125rem;
  border: 1px solid #dd5b12;
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #dd5b12;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.detalhe__reabrir:hover:not(:disabled) {
  background-color: #fdf1ea;
}

.detalhe__reabrir:active:not(:disabled) {
  transform: scale(0.97);
}

.detalhe__reabrir:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.detalhe__reabrir-aviso {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.75rem;
  color: #b02a2a;
}

.detalhe__reabrir-aviso:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .detalhe__reabrir,
  .detalhe__reabrir:active:not(:disabled) {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 34rem) {
  .solicitacoes {
    padding: 1.75rem 1rem 3rem;
  }

  .solicitacoes__busca {
    max-width: none;
  }

  /*NO CELULAR, UMA COLUNA SO: o minimo de 18.75rem da grade apertaria o
    cartao em telas mais estreitas que isso.*/
  .chamados {
    grid-template-columns: 1fr;
  }

  .mensagem {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chamado,
  .chamado:hover,
  .chamado:active {
    transition: none;
    transform: none;
  }

  /*SEM ESCALA, SO CROSS-FADE: quem pede menos movimento ainda ve o modal
    chegar, mas sem o leve zoom.*/
  .detalhe {
    transition: opacity 0.15s ease, overlay 0.15s allow-discrete,
                display 0.15s allow-discrete;
  }

  .detalhe,
  .detalhe[open] {
    transform: none;
  }
}