/* SynMed — atendimento: chat, ficha do paciente, prancheta de avaliação, drawers.
   Depende dos tokens de static/styles.css. Nunca edite outros arquivos CSS.

   Leitura do desenho: a tela é um prontuário aberto. A conversa é a folha
   principal (branca, com sombra); a margem esquerda guarda as instruções e o
   usuário; a coluna direita separa o REGISTRO (dados do paciente, bloco
   rebaixado) do TRABALHO (a prancheta de avaliação, folha em branco).
   A luz turquesa (--beacon) fica reservada a uma coisa só: a voz e a ficha do
   paciente sintético. Todo o resto é tinta e filete. */

/* ------------------------------------------------------------- moldura -- */

/* 100dvh e não 100vh: no iOS a barra do navegador comeria o rodapé.
   A calha horizontal do container-fluid fica como está: é ela que absorve a
   margem negativa do .row — zerando, o row vaza 12px e a página rola de lado. */
.container-geral {
  height: 100dvh;
  overflow: hidden;
}

.paiDeTodos {
  min-height: 0;
}

/* No celular a calha do container já basta; o respiro extra do row sai. */
@media (max-width: 560px) {
  .paiDeTodos {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

.main-content,
.right-panel {
  min-height: 0;
}

.main-content > .mb-3 {
  flex: 0 0 auto;
}

.main-content .logo {
  display: inline-flex;
}

.main-content > .mb-3 > .text-muted {
  font-size: var(--t-sm);
  margin-bottom: 0.625rem;
}

/* -------------------------------------------------------------- margem -- */

/* A coluna de instruções é a margem do prontuário: some abaixo de 1200px,
   onde não sobra largura para ela sem espremer a conversa. */
.new-s-wrapper {
  display: none !important;
}

/* A margem deixa de ser um vinco no papel e passa a ser um painel de tinta: a
   coluna ganha corpo próprio, e a costura com a conversa vira a borda do painel
   em vez de um filete. Tudo aqui dentro é escopado em .new-s-wrapper e vive
   dentro desta faixa: as cópias das instruções e da assinatura no drawer
   continuam em papel, como sempre foram. */
@media (min-width: 1200px) {
  .new-s-wrapper {
    display: flex !important;
    padding: 1.125rem 1rem;
    border-radius: var(--r-sheet);
    background-color: var(--deep);
    background-image: var(--glow-beacon), var(--grad-ink);
  }

  /* Com a margem à vista, o atalho para o drawer não tem mais razão de ser. */
  .instruction-toggler {
    display: none !important;
  }

  /* Sobre tinta a leitura inverte: o corpo é branco apagado, o título é branco. */
  .new-s-wrapper .sidebar {
    color: rgba(255, 255, 255, 0.75);
  }

  .new-s-wrapper .sidebar h4 {
    color: #ffffff;
  }

  /* O filete abaixo do título separava o título do texto que ele titula; com o
     texto virando cartão, a separação já está feita e o filete só empilha. */
  .new-s-wrapper .sidebar > .mb-4 {
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* As instruções viram cartão de vidro — o material de qualquer bloco sobre
     tinta: um véu claro e uma aresta um pouco mais clara que ele. */
  .new-s-wrapper .sidebar > :last-child {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-glass);
    background-color: var(--glass);
  }

  /* A assinatura é o mesmo vidro, no pé da coluna. O border-top que a separava
     do texto sai junto: o cartão é a separação. */
  .new-s-wrapper .user-config {
    padding: 0.625rem !important;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-glass);
    background-color: var(--glass);
  }

  .new-s-wrapper .user-config-name {
    color: #ffffff;
  }

  .new-s-wrapper .user-config-email {
    color: rgba(255, 255, 255, 0.6);
  }

  /* "Sair" continua sendo alarme, mas um alarme lido sobre tinta: o tom de
     alerta clareia até destacar do fundo e o véu fica translúcido — o rosa
     chapado de --alert-tint sumiria no azul profundo. */
  .new-s-wrapper .user-config i.bi {
    color: rgba(255, 255, 255, 0.6);
  }

  .new-s-wrapper .user-config i.bi:hover {
    color: color-mix(in srgb, var(--alert) 35%, #ffffff);
    background-color: color-mix(in srgb, var(--alert) 45%, transparent);
  }
}

/* Sem a margem, a conversa ocupa o espaço que sobrou (9 de 12). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-content {
    width: 75%;
  }
}

.s-wrapper {
  min-height: 0;
}

/* Instrução é interface, não fala: letra de interface, pequena e calma.
   A serifa fica reservada às falas do paciente. */
.sidebar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
}

.sidebar h4 {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
}

/* O título vinha com mb-4 num flex solto e descolava do texto que titula. */
.sidebar > .mb-4 {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* Atalho das instruções: um controle discreto, não um título solto. */
.instruction-toggler {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4375rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  background-color: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-control);
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.instruction-toggler::before {
  font-family: bootstrap-icons;
  content: "\f431";
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--seal);
}

.instruction-toggler:hover {
  background-color: var(--sheet);
  border-color: var(--ink-3);
  color: var(--ink);
}

.instructions {
  font: inherit;
}

/* ---------------------------------------------------------- assinatura -- */

/* Quem está atendendo — o rodapé da margem. */
.user-config {
  margin-top: auto !important;
  padding: 0.75rem 0 0 !important;
  gap: 0.625rem;
  border-top: 1px solid var(--rule);
}

.user-config .profile-pic {
  width: 36px;
  height: 36px;
}

.user-config-name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.user-config-email {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* "Sair" é um <i class="bi">: a fonte de ícones vazava para o texto ao lado.
   Devolvemos a fonte de interface ao elemento e mantemos o glifo no ::before. */
.user-config i.bi {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4375rem 0.5rem;
  font-family: var(--font-ui) !important;
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-control);
  transition: background-color 0.14s ease, color 0.14s ease;
}

.user-config i.bi::before {
  font-family: bootstrap-icons !important;
  font-size: 0.9375rem;
}

.user-config i.bi:hover {
  color: var(--alert);
  background-color: var(--alert-tint);
}

/* --------------------------------------------------------------- folha -- */

.chat-component {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-container {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  border-radius: var(--r-hero);
  border-color: var(--rule);
  /* Folha de herói: a sombra é mais larga e mais rasa que a de um bloco comum —
     a conversa flutua sobre o papel em vez de repousar nele. */
  box-shadow: var(--shadow-hero);
}

/* Cabeçalho da folha: o filete atravessa a largura toda, não só o título. */
.chat-container > .d-flex {
  flex: 0 0 auto;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.chat-title {
  padding: 0;
  border-bottom: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.chat-container > .d-flex .form-check {
  margin-right: 0 !important;
  margin-bottom: 0;
}

.chat-container > .d-flex .form-check-label {
  font-size: var(--t-sm);
  color: var(--ink-2);
  white-space: nowrap;
}

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--sheet);
}

/* ------------------------------------------------------------- diálogo -- */

/* O texto da mensagem é um nó irmão do <img>: sem flex ele escorre por baixo
   do avatar. O flex transforma esse nó num item anônimo e a bolha se resolve. */
.chat-messages .text {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem !important;
  overflow-wrap: anywhere;
  animation: mensagem-entra 0.18s ease-out both;
}

@keyframes mensagem-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* A fala do paciente: papel rebaixado, serifa, filete de registro à esquerda. */
.chat-messages .bg-bot-message {
  width: auto !important;
  max-width: 80%;
  margin-right: auto;
  background-color: var(--sheet-sunk);
  border: 1px solid var(--rule) !important;
  border-left: 3px solid var(--beacon) !important;
  border-radius: 4px 14px 14px 4px !important;
  font-family: var(--font-voice);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

/* A fala do médico: à direita, tinta de ação, letra de interface. */
.chat-messages .bg-user-message {
  width: auto !important;
  max-width: 72%;
  margin-left: auto;
  background-color: var(--seal-tint);
  border: 1px solid color-mix(in srgb, var(--seal) 22%, transparent) !important;
  /* O canto vivo troca de lado: na fala do paciente ele aponta para a margem
     esquerda, aqui aponta para quem escreve. */
  border-radius: 14px 14px 4px 14px !important;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
}

/* 32px, redondo e sem encolher. color:transparent apaga o texto do alt quando
   a imagem falha, sem tirar o atributo de quem usa leitor de tela. */
.profile-pic {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--rule);
  color: transparent;
  font-size: 0;
}

/* Paciente digitando. */
.chat-messages .spinner-grow {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ composer -- */

.chat-container > .card-footer {
  flex: 0 0 auto;
  background-color: var(--sheet);
  border-top: 1px solid var(--rule);
  padding: 0.75rem !important;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}

/* O input-group junta os controles num bloco só; aqui eles são separados (o
   markup já usa ms-2), então devolvemos o raio a cada um. O !important é para
   vencer os seletores :not() encadeados do Bootstrap. O campo de fala tem raio
   próprio, maior que o dos botões: é ele que convida. */
.chat-container .card-footer .input-group > .btn {
  border-radius: var(--r-control) !important;
}

.chat-container .card-footer .input-group > .form-control {
  border-radius: var(--r-glass) !important;
}

.chat-container .card-footer .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* Em repouso o campo é uma calha rebaixada no rodapé; ao receber o foco ele
   sobe para o branco da folha e acende o anel do farol. O :not(.placeholder)
   é o que deixa o esqueleto de carregamento cinza: sem ele estas regras, mais
   específicas, pintariam material por cima do vazio. */
.chat-container .card-footer .form-control:not(.placeholder) {
  background-color: var(--sheet-sunk);
  border-color: var(--rule);
}

.chat-container .card-footer .form-control:not(.placeholder):focus {
  background-color: var(--sheet);
  border-color: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--beacon) 42%, transparent);
}

.chat-container .card-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

/* Enviar é a ação da folha: é o único botão com peso aqui. Ele nasce .btn-light,
   que deixa --btn-fill em `none`: sem repor a camada de volume o botão ficava
   chapado. --btn-bg segue sendo o selo, que é o que aparece se o gradiente
   falhar; --btn-ink é reposto no hover porque .btn-light:hover o pinta de selo.
   :not(.placeholder) preserva o cinza do rodapé de carregamento. */
.chat-container .card-footer .btn:last-child:not(.placeholder) {
  --btn-bg: var(--seal);
  --btn-ink: #ffffff;
  --btn-edge: var(--seal-press);
  --btn-fill: var(--grad-action);
  box-shadow: var(--shadow-action);
}

.chat-container .card-footer .btn:last-child:not(.placeholder):hover,
.chat-container .card-footer .btn:last-child:not(.placeholder):focus-visible,
.chat-container .card-footer .btn:last-child:not(.placeholder):active {
  --btn-bg: var(--seal-press);
  --btn-ink: #ffffff;
  --btn-edge: var(--seal-press);
  --btn-fill: var(--grad-action-press);
}

/* O botão afunda 1px sob o dedo, como toda ação principal. */
.chat-container .card-footer .btn:last-child:not(.placeholder):active {
  transform: translateY(1px);
}

/* ------------------------------------------------------------ registro -- */

patient-info {
  display: block;
}

/* Ficha do paciente: bloco rebaixado com o filete que marca o registro. */
.patient {
  background-color: var(--sheet-sunk);
  border-radius: var(--r-block);
  border-left: 3px solid var(--beacon) !important;
}

.patient-title {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.patient-form {
  padding: 0.75rem 0.875rem;
}

.patient-form ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

/* Rótulo e valor em duas colunas: os valores alinham em coluna, como numa
   ficha preenchida à máquina. */
.patient-form li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.patient-form li strong {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
}

/* A ficha aparece dentro da folha só quando não há coluna direita. */
.internal-patient {
  flex: 0 0 auto;
  padding: 0.75rem 0.75rem 0;
}

@media (min-width: 941px) {
  .internal-patient {
    display: none;
  }
}

.external-patient {
  flex: 0 0 auto;
}

/* ----------------------------------------------------------- prancheta -- */

/* A prancheta é o outro gênero de bloco da coluna: enquanto a ficha é papel
   rebaixado com filete de registro, esta é folha em branco com uma tarja de
   trabalho no topo — o mesmo tom das falas do médico. Dá para distinguir
   "o que o paciente é" de "o que eu escrevo" antes de ler uma palavra.
   Não estica até o pé da coluna: termina onde o conteúdo termina. */
.case-evaluation {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  height: auto !important;
}

.evaluation {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  height: auto !important;
  background-color: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-block);
}

.evaluation-title {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem;
  /* A tarja de trabalho ganha profundidade: uma faixa que clareia no alto e
     desce até o tom chapado, que continua sendo o fallback. */
  background-color: var(--seal-tint);
  background-image: linear-gradient(180deg, #e9f4f6, var(--seal-tint));
  border-bottom: 1px solid color-mix(in srgb, var(--seal) 20%, transparent);
  border-radius: calc(var(--r-block) - 1px) calc(var(--r-block) - 1px) 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--seal);
}

.evaluation-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.875rem;
}

/* O conteúdo real e o esqueleto de carregamento são irmãos: os dois precisam
   virar coluna flexível para a altura obedecer à tela, não ao rows="". */
.evaluation-content > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

.evaluation-content textarea.form-control {
  height: auto;
  font-size: var(--t-sm);
}

/* Cresce com a tela, mas com teto: um campo de 500px de branco não convida
   a escrever, só sobra. */
.evaluation-content textarea.form-control:nth-of-type(1) {
  flex: 1 1 auto;
  min-height: 4.5rem;
  max-height: 17rem;
}

.evaluation-content textarea.form-control:nth-of-type(2) {
  flex: 0 0 auto;
  height: 4.5rem;
  min-height: 4.5rem;
}

.evaluation-content .mb-3 {
  margin-bottom: 0.625rem !important;
}

/* Encerrar Anamnese nunca sai do alcance: fica colado no pé da prancheta. */
.actions {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.25rem;
}

.actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

/* -------------------------------------------------------------- drawers - */

.offcanvas {
  --bs-offcanvas-width: min(88vw, 380px);
  background-color: var(--paper);
  border-left: 1px solid var(--rule);
}

.offcanvas-header {
  flex: 0 0 auto;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.offcanvas-title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}

.offcanvas-header .btn-close {
  padding: 0.75rem;
  border-radius: var(--r-control);
  opacity: 0.6;
}

.offcanvas-header .btn-close:hover {
  opacity: 1;
}

.offcanvas-body {
  padding: 1.25rem;
  min-height: 0;
}

.offcanvas .s-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem;
}

.offcanvas-body case-evaluation {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Dentro do drawer a moldura já é o próprio drawer, e o título dele já diz
   "Avaliação do caso": a prancheta larga a casca para não repetir os dois.
   O flex é o que a faz ocupar a largura: a prancheta do drawer não tem a
   classe .case-evaluation (que é coluna), então mora numa linha flex e, sem
   crescer, encolhia até o cols="20" do textarea — deixando meio drawer vazio
   à direita. Invisível enquanto o drawer era estreito; gritante em tela cheia. */
.offcanvas-body .evaluation {
  flex: 1 1 auto;
  min-width: 0;
  background-color: transparent;
  border: 0;
}

.offcanvas-body .evaluation-title {
  display: none;
}

.offcanvas-body .evaluation-content {
  padding: 0;
}

/* O painel é só do resumo, mas soltar o teto fazia o campo comer o drawer
   inteiro: um retângulo branco de altura de tela com uma linha de placeholder,
   que ofusca a hipótese e o botão em vez de convidar a escrever. O teto sobe
   em relação ao do desktop, sem deixar de ser teto. */
.offcanvas-body .evaluation-content textarea.form-control:nth-of-type(1) {
  max-height: min(45vh, 20rem);
}

/* Campo sobre papel: folha branca e filete forte. A calha rebaixada do
   compositor não serve aqui — ela só lê como calha quando o entorno é branco,
   e o entorno do drawer é --paper, mais escuro que --sheet-sunk: o campo
   subiria em vez de afundar. O que o drawer herda do compositor é o convite
   (o raio maior) e o foco: aresta de selo e anel do farol. */
.offcanvas-body .evaluation-content textarea.form-control:not(.placeholder) {
  background-color: var(--sheet);
  border-color: var(--rule-strong);
  border-radius: var(--r-glass);
}

/* O fundo já é branco em repouso: sob o foco muda só a aresta e o anel. */
.offcanvas-body .evaluation-content textarea.form-control:not(.placeholder):focus {
  border-color: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--beacon) 42%, transparent);
}

/* -------------------------------------------------------------- mobile -- */

/* Abaixo de 940px o JS remove a coluna direita: instruções e avaliação passam
   a ser dois controles de superfície, do mesmo material. */
.mobile-actions {
  display: flex;
  gap: 0.5rem;
}

.mobile-actions .fab-action {
  flex: 1 1 0;
  max-width: 15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background-color: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-control);
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.mobile-actions .fab-action:hover {
  background-color: var(--sheet-sunk);
  border-color: var(--ink-3);
}

.mobile-actions .fab-action i {
  font-size: 1rem;
  color: var(--seal);
}

@media (max-width: 940px) {
  .chat-messages .bg-bot-message {
    max-width: 92%;
    font-size: 1rem;
  }

  .chat-messages .bg-user-message {
    max-width: 88%;
  }

  /* Alvos de toque no dedo, não no cursor. */
  .chat-container .card-footer .btn,
  .chat-container .card-footer .form-control,
  .offcanvas .user-config i.bi {
    min-height: 42px;
  }

  /* A ficha dentro da folha é resumo, não formulário: adensa para sobrar
     tela para a conversa. */
  .internal-patient {
    padding: 0.625rem 0.625rem 0;
  }

  .internal-patient .patient-title {
    padding: 0.4375rem 0.75rem;
    font-size: var(--t-xs);
  }

  .internal-patient .patient-form {
    padding: 0.5rem 0.75rem;
  }

  .internal-patient .patient-form ul {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
  }

  .internal-patient .patient-form li {
    grid-template-columns: auto 1fr;
    column-gap: 0.4rem;
  }

  .internal-patient .patient-form li:first-child {
    grid-column: 1 / -1;
  }
}

/* Telas estreitas: altura é o recurso escasso. Cabeçalho e composer cabem
   cada um em UMA linha — os controles é que encolhem, nunca o campo de fala
   nem o nome acessível do botão Enviar. */
@media (max-width: 560px) {
  .chat-container > .d-flex {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .chat-title,
  .chat-container > .d-flex .form-check-label {
    font-size: var(--t-xs);
  }

  .chat-container > .d-flex .form-check {
    flex: 0 0 auto;
    padding-left: 1.7em;
  }

  .chat-container > .card-footer {
    padding: 0.5rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  }

  .chat-container .card-footer .btn {
    padding: 0.5rem 0.625rem;
    gap: 0.3rem;
    font-size: var(--t-xs);
  }

  .chat-container .card-footer .btn.ms-2 {
    margin-left: 0.375rem !important;
  }

  .main-content > .mb-3 > .text-muted {
    font-size: var(--t-xs);
  }

  /* No celular o drawer toma a tela inteira. Os 88vw deixavam uma tira de
     página recortada na borda — o olho lê a tira como erro, não como contexto.
     Sem nada ao lado, a borda esquerda também deixa de ter o que separar. */
  .offcanvas {
    --bs-offcanvas-width: 100vw;
    border-left: 0;
  }
}

/* Faixa estreita em que o JS ainda considera desktop (a coluna direita
   existe) mas o Bootstrap já empilha as colunas: aqui a página rola. */
@media (min-width: 941px) and (max-width: 991.98px) {
  .container-geral {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .paiDeTodos,
  .main-content,
  .right-panel {
    height: auto !important;
  }

  /* Teto na folha: mesmo com a página rolando, o composer continua dentro
     da conversa em vez de fugir para o fim do documento. */
  .chat-component {
    min-height: 60vh;
    max-height: 78vh;
  }

  .right-panel {
    margin-top: 1rem;
  }

  .evaluation-content textarea.form-control:nth-of-type(1) {
    min-height: 9rem;
  }
}