/* ============================================================
   components.css — peças reutilizáveis da interface
   ============================================================ */

/* ---------------------------------------------------------
   1. Botão circular de vidro (perfil / aulas)
   --------------------------------------------------------- */
.orb {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--ink);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring), var(--glass-edge), var(--sh-xs);
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast) var(--ease-out);
}
.orb:active { transform: scale(.92); background: var(--track); }

.topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wordmark { display: none; }
#btn-menu { display: none; }   /* só no desktop */

.orb--avatar {
  font-size: 16px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  background: var(--surface);
}

/* ---------------------------------------------------------
   2. Segmented control (as duas pages)
   --------------------------------------------------------- */
.segments {
  /* Quantas pages o conjunto da vez tem, e em qual delas estamos. Os dois
     vêm de `tabs.js`: o conjunto muda de tamanho conforme a pessoa entra e
     sai de uma conversa, e a pastilha precisa acompanhar. */
  --n: 2;
  --i: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 40px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(39, 37, 31, .05);
}

.segments__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--sh-pop);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--t-base) var(--ease-out),
              width var(--t-base) var(--ease-out);
  will-change: transform;
}

.segment {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--ink-mute);
  transition: color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.segment[aria-selected="true"] { color: var(--ink); }
.segment:active { transform: scale(.94); }

/* ---------------------------------------------------------
   3. Composer
   --------------------------------------------------------- */
/* O campo de escrever é a única peça de vidro branco da tela.

   Com o fundo da página chapado, não há muito o que desfocar — então o
   "líquido" vem das camadas, não do blur: um gradiente que clareia no
   topo e volta a clarear na base (a curva da luz atravessando um vidro
   grosso), um fio branco correndo por dentro da borda, uma aresta de luz
   no topo, o contorno de meio pixel e o ar embaixo. */
.composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--pill);
  -webkit-backdrop-filter: saturate(200%) blur(34px);
  backdrop-filter: saturate(200%) blur(34px);
  box-shadow:
    0 0 0 .5px rgba(39, 37, 31, .09),
    0 1px 3px rgba(0, 0, 0, .06),
    0 2px 6px rgba(0, 0, 0, .06);
  transition: box-shadow var(--t-base) var(--ease-out);
}

.composer__main {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #e4e4e4;
  border-radius: var(--r-md);
  background: var(--surface);
}
.composer__notice {
  margin: 0;
  padding: 4px 12px calc(6px + var(--safe-bottom));
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.composer__input {
  display: block;
  width: 100%;
  flex: 1;
  min-width: 0;
  min-height: 60px;
  max-height: 132px;
  padding: 6px 4px;
  overflow-y: auto;
  border: 0;
  resize: none;
  background: none;
  font-size: 17px;
  font-weight: var(--w-regular);
  line-height: 24px;
  letter-spacing: -.01em;
}
.composer__input:focus { outline: none; }
.composer__input::placeholder { color: var(--ink-mute); }

.composer__row {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-top: 0;
}
.composer__row .spacer { flex: 1; }

/* Botão de anexo */
.chip {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--pill);
  color: var(--ink-soft);
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.chip:active { transform: scale(.92); }

/* Botão de enviar */
.action {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--brown);
  color: #FFF;
  box-shadow: 0 2px 8px rgba(92, 68, 51, .30);
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.action:active { transform: scale(.90); background: var(--brown-deep); }

.action[disabled] {
  background: var(--pill);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ---------------------------------------------------------
   4. Thread de mensagens
   --------------------------------------------------------- */
.thread {
  --ink: #101010;
  --ink-soft: #171717;
  --ink-mute: #292929;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  /* Reserva espaço para a última mensagem parar acima do campo. */
  padding: var(--gap-5) 18px calc(var(--dock-h, 96px) + 24px);
  /* A rolagem para nos limites desta área: sem isto, chegar ao fim da
     conversa arrasta a página inteira no iOS. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* A posição é controlada pelo chat, inclusive durante o teclado. */
  overflow-anchor: none;
  /* Sem `scroll-behavior: smooth`. Aqui a rolagem é posição, não animação:
     o salto para a última mensagem precisa ACONTECER, e acontecer agora.
     Com o deslize ligado, o teclado subindo enquanto a resposta chega
     empilha animações que disputam a mesma barra, e o fim nunca chega. */
}
.thread:has(.entrar) { justify-content: center; }

.msg { display: flex; flex-direction: column; gap: 6px; }
.msg__menu-trigger {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-height: 32px; min-width: 32px; padding: 5px; border: 0; border-radius: 8px;
  background: transparent; color: #626262; cursor: pointer; animation: none; transition: none;
}
.msg__menu-trigger[hidden] { display: none; }
.msg__menu-trigger:hover, .msg__menu-trigger[aria-expanded="true"] { background: var(--track); color: var(--ink); }
.msg--me .msg__menu-trigger { align-self: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .msg__menu-trigger { opacity: 0; }
  .msg:hover .msg__menu-trigger, .msg:focus-within .msg__menu-trigger,
  .msg__menu-trigger[aria-expanded="true"] { opacity: 1; }
}
.message-actions {
  position: fixed; z-index: 1200; width: 208px; max-width: calc(100vw - 24px); padding: 5px;
  background: #fff; color: var(--ink); border: 1px solid #e7e7e7; border-radius: 14px;
  box-shadow: 0 4px 16px #00000012; font: inherit; font-size: 14px;
  animation: none !important; transition: none !important;
}
.message-actions[hidden] { display: none; }
.message-actions button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; animation: none; transition: none;
}
.message-actions button:hover { background: var(--track); }
.message-actions button:disabled { opacity: .5; cursor: default; }
.message-actions button:focus-visible, .msg__menu-trigger:focus-visible { outline: 2px solid #777; outline-offset: 2px; }
.message-actions [data-message-action="delete"], .message-actions [data-message-action="confirm"] { color: #b42318; }
.message-actions--confirm { width: 280px; padding: 14px; }
.message-actions h3 { font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.message-actions p { font-size: 12px; line-height: 1.5; margin: 0 0 12px; color: #626262; }
.message-actions__buttons { display: flex; gap: 6px; }
.message-actions__buttons button { justify-content: center; min-height: 34px; background: #f5f5f5; }
.message-actions .message-actions__error { color: #b42318; margin: 8px 5px 3px; }

.msg--me { align-items: flex-end; }

.msg--me .msg__body {
  max-width: 82%;
  padding: 10px 15px;
  border-radius: 22px 22px 6px 22px;
  background: var(--message-bg);
  color: var(--ink);
  font-weight: var(--w-regular);
  letter-spacing: -.005em;
}

/* A resposta vem em Markdown e é desenhada como texto de leitura:
   títulos discretos, listas com respiro, e nada de `pre-wrap` — quem
   quebra as linhas agora são os parágrafos. */
.msg--ai .msg__body {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -.005em;
}
.msg--ai .msg__body > :first-child { margin-top: 0; }
.msg--ai .msg__body > :last-child  { margin-bottom: 0; }

.msg__body p { margin: 0 0 12px; }

.msg__body h3,
.msg__body h4 {
  margin: 20px 0 8px;
  font-size: 16.5px;
  font-weight: var(--w-medium);
  letter-spacing: -.012em;
  color: var(--ink);
}
.msg__body h4 { font-size: 16px; color: var(--ink-soft); }
.msg--ai .msg__body > :is(h3, h4):not(:first-child) {
  border-top: 1px solid var(--line-strong);
  margin-top: 24px;
  padding-top: 20px;
  margin-bottom: 12px;
}
.msg--ai .msg__body > hr + :is(h3, h4) {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.msg--ai .msg__body > h3:first-child {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 14px;
  text-wrap: balance;
}

.msg__body ul,
.msg__body ol { margin: 0 0 12px; padding-left: 22px; }
.msg__body ul { list-style: disc; }
.msg__body ol { list-style: decimal; }
.msg__body li { margin-bottom: 5px; }
.msg__body li::marker { color: var(--ink-mute); }

.msg__body strong { font-weight: var(--w-medium); }
.msg__body em { font-style: italic; }

.msg__body code {
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--track);
  font-family: var(--font);
  font-size: .88em;
}

.msg__body blockquote {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
}

.msg__body hr {
  height: 0;
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.msg__body a { color: var(--brown); text-underline-offset: 2px; }

/* ── Entrar ───────────────────────────────────────────────────────────
   Sem conta, o chat não tem o que mostrar — e mandar a pessoa para outro
   app para voltar depois é um desvio que ninguém pede. O formulário é
   aqui mesmo. */
.entrar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding: 26px 22px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-md);
}

.entrar__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: var(--w-medium);
  letter-spacing: -.02em;
  color: var(--ink);
}
.entrar__texto {
  margin: -6px 0 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.entrar__campo { display: flex; flex-direction: column; gap: 6px; }
.entrar__campo span {
  font-size: 13.5px;
  font-weight: var(--w-medium);
  color: var(--ink-soft);
}
.entrar__campo input {
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--track);
  color: var(--ink);
  /* 16px: abaixo disso o iOS dá zoom sozinho ao focar o campo */
  font-size: 17px;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.entrar__campo input:focus {
  outline: none;
  box-shadow: none;
}

.entrar__erro {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(196, 88, 92, .10);
  box-shadow: 0 0 0 .5px rgba(196, 88, 92, .28);
  font-size: 14px;
  line-height: 1.4;
  color: #8E3E42;
}

.entrar__recado {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--track);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.entrar__botao {
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--brown);
  color: #FFF;
  font-size: 16px;
  font-weight: var(--w-medium);
  box-shadow: 0 2px 8px rgba(92, 68, 51, .26);
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.entrar__botao:active:not([disabled]) { transform: scale(.98); background: var(--brown-deep); }
.entrar__botao[disabled] { opacity: .6; cursor: default; }

.entrar__link {
  align-self: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  text-underline-offset: 2px;
}
.entrar__link:hover { color: var(--ink); text-decoration: underline; }

/* Um problema que a pessoa precisa ver, sem virar tela de erro. */
.aviso {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(196, 88, 92, .10);
  box-shadow: 0 0 0 .5px rgba(196, 88, 92, .28);
  font-size: 14.5px;
  color: #8E3E42;
}

/* Composer travado: sem conta, ou enquanto o servidor não respondeu. */
.dock[data-travado="true"] .composer { opacity: .5; pointer-events: none; }

/* Atalho de voltar ao fim da conversa.

   Fica preso ao rodapé da page, logo acima do composer, e não rola com o
   texto: ele é um controle da tela, não parte da conversa. */
.ir-ao-fim {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h, 96px) + 10px);
  z-index: 16;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  transform: translateX(-50%);
  border-radius: var(--r-full);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring), var(--glass-edge), var(--sh-md);
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease-spring),
              background var(--t-fast) var(--ease-out);
  animation: sobeAtalho var(--t-base) var(--ease-out) both;
}
.ir-ao-fim:active { transform: translateX(-50%) scale(.9); background: var(--track); }

@keyframes sobeAtalho {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* Indicador de digitação */
.typing { display: inline-flex; gap: 5px; padding: 6px 0; }
.typing__text { color: var(--ink-mute); font-size: 15px; font-weight: 500; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .typing__text {
    background: linear-gradient(105deg, #292929 35%, #ded5cc 47%, #ffffff 50%, #ded5cc 53%, #292929 65%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: generating-shimmer 1.6s linear infinite;
  }
}
@keyframes generating-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .typing__text { animation: none !important; background: none; color: var(--ink-mute); }
}
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint);
  animation: pulse 1.2s var(--ease-out) infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }

/* ---------------------------------------------------------
   5. Estado vazio ("Em breve")
   --------------------------------------------------------- */
.empty__title { font-size: 25px; font-weight: var(--w-medium); letter-spacing: -.025em; }

/* ---------------------------------------------------------
   6. Sheets laterais (perfil + aulas)
   --------------------------------------------------------- */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(39, 37, 31, .22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

.sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 50;
  width: min(330px, 86%);
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 14px) 0 calc(var(--safe-bottom) + 14px);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-lg);
  transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  visibility: hidden;
}
.sheet[data-open="true"] { transform: none !important; visibility: visible; transition-delay: 0s; }

.sheet--left  { left: 0;  transform: translateX(-102%); border-radius: 0 28px 28px 0; }
.sheet--right { right: 0; transform: translateX(102%);  border-radius: 28px 0 0 28px; }

/* Painéis opacos; o menu móvel deixa uma faixa da conversa visível. */
#sheet-profile,
#sheet-lessons {
  width: 100%;
  border-radius: 0;
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Menu cinza; as demais telas mantêm o fundo branco. */
#sheet-profile {
  background: var(--menu-bg);
  box-shadow: none;
}

/* Marcado ou sendo tocado, a linha só clareia: uma cor lisa, sem sombra
   e sem relevo. */
#sheet-profile .row:active,
#sheet-profile .row[aria-current="true"] {
  background: #FAF9F7;
  box-shadow: none;
}

#sheet-profile button.row__icon:active { background: rgba(39, 37, 31, .07); }
#sheet-profile .sheet__head { padding-inline: 12px; }
#sheet-lessons .sheet__head { padding-inline: 18px; }
#sheet-lessons .sheet__body { padding-inline: 16px; }

.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: 6px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-size: 18px; font-weight: var(--w-medium); letter-spacing: -.015em; }

/* Cabeçalho com título centralizado e um botão em cada canto. */
.sheet__head--center {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}
.sheet__head--center .sheet__title { text-align: center; }
.sheet__head--center > :last-child { justify-self: end; }

/* Menu: seta de voltar e bloco da conta lado a lado, sem borda. */
#sheet-profile .sheet__head {
  gap: 10px;
  padding: 0 12px 12px;
  border-bottom: 0;
}
#sheet-profile .profile { flex: 1; min-width: 0; margin: 0; }
.sheet__body { flex: 1; min-height: 0; padding: 14px 12px; }

.sheet__section {
  padding: 14px 6px 6px;
  font-size: 12.5px;
  font-weight: var(--w-medium);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Linhas de lista */
.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: 11px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.row:active { transform: scale(.985); background: var(--track); }
.row[aria-current="true"] { background: var(--track); }
.row__text { display: block; min-width: 0; flex: 1; }
.row__title {
  display: block;
  font-size: 15.5px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__sub { display: block; font-size: 13px; font-weight: var(--w-regular); color: var(--ink-mute); }
.row__icon { color: var(--ink-soft); }

button.row__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  color: var(--ink-mute);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
button.row__icon:active { background: var(--line); color: var(--ink); }

/* Novo chat — discreto, alinhado ao topo do painel */
.new-chat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 9px;
  margin: 0 6px 10px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: -.01em;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.new-chat:active { transform: scale(.97); background: var(--track); }

/* Sair mora longe do resto: é a única ação do menu que a pessoa não
   desfaz com outro toque. */
.new-chat--sair { margin-top: var(--gap-5); color: var(--ink-soft); }

/* Cartão de perfil */
.profile {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin: 0 6px 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glass-ring), var(--sh-xs);
}
.profile__avatar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--track);
  font-size: 18px; font-weight: var(--w-medium);
}
.profile__name { font-size: 16px; font-weight: var(--w-medium); letter-spacing: -.01em; }

/* Barra de progresso */
.bar { display: block; height: 4px; border-radius: var(--r-full); background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brown); }

/* Vazio dentro da sheet */
.sheet-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 20px; text-align: center; color: var(--ink-mute);
}

/* ---------------------------------------------------------
   7. Animações
   --------------------------------------------------------- */
@keyframes pulse {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.chat-actions { position: fixed; z-index: 500; width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 8px 28px #0002; }
.chat-actions[hidden] { display: none; }
.chat-actions button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px; border-radius: 8px; text-align: left; font-size: 15px; }
.chat-actions button:hover, .chat-actions button:focus-visible { background: var(--track); }
.chat-actions [data-action="delete"] { color: #9b3535; }
.chat-manage { width: min(440px, calc(100vw - 32px)); padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--ink); margin: auto; }
.chat-manage::backdrop { background: #17141066; backdrop-filter: blur(4px); }
.chat-manage h2 { font-size: 23px; margin: 0 0 12px; font-weight: 500; }
.chat-manage p { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.chat-name-field { display: grid; gap: 8px; margin-top: 18px; font-size: 14px; }
.chat-name-field[hidden] { display: none; }
.chat-name-field input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--surface); color: var(--ink); font-size: 17px; }
.chat-manage-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.chat-manage-buttons button { min-height: 44px; padding: 10px 16px; border-radius: 10px; background: var(--track); font-size: 15px; }
.chat-manage [data-confirm] { background: var(--brown); color: white; }
.chat-manage[data-action="delete"] [data-confirm] { background: #9b3535; }
.chat-manage-error { color: #9b3535; }
.chat-manage-error:empty { display: none; }

.chat-manage[data-action="edit"] h2 { margin: 0; }
.chat-manage[data-action="edit"] .chat-name-field { margin-top: 24px; }
.chat-manage #chat-manage-description:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  [data-chat] [data-chat-options] { opacity: 0; pointer-events: none; }
  [data-chat]:hover [data-chat-options],
  [data-chat]:focus-within [data-chat-options],
  [data-chat] [data-chat-options][aria-expanded="true"] { opacity: 1; pointer-events: auto; }
}

.msg--ai .msg__body a[href="https://www.instagram.com/biteti/"],
.msg--ai .msg__body a[href="https://www.instagram.com/biteti"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  min-width: 174px;
  padding: 4px 14px;
  border-radius: 9px;
  background: #f1e8df;
  color: #74563e;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.msg--ai .msg__body a[href="https://www.instagram.com/biteti/"]::after,
.msg--ai .msg__body a[href="https://www.instagram.com/biteti"]::after { content: '↗'; }

.research-sources { margin: 20px 0; }
.research-sources summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 8px 0; }
.research-sources .pilulas { margin-top: 8px; }

.chat-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 360px)); justify-content: center; align-items: start; gap: 24px; margin: 24px 0; width: 100%; }
.chat-previews[hidden] { display: none; }
.chat-previews .chat-preview { min-width: 0; width: 100%; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.65; }
.chat-previews .video { cursor: pointer; }
.chat-preview__loading { color: var(--ink-mute); font-size: 13px; }

/* A single horizontal row with aligned media and compact descriptions. */
.chat-previews {
  display: flex; justify-content: flex-start; align-items: stretch;
  gap: 16px; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 4px 0 12px; -webkit-overflow-scrolling: touch;
}
.chat-previews > .chat-reference-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 8px;
  flex: 0 0 min(250px, 82%); width: min(250px, 82%); max-width: 250px; min-height: 120px;
  padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); scroll-snap-align: start; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.chat-previews > .chat-reference-card:active { background: #FAF9F7; }
.chat-previews > .chat-reference-card:focus-visible { outline: 2px solid #E6DED3; outline-offset: 2px; }
.chat-previews .chat-reference-card h3 {
  margin: 0; padding-right: 8px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-reference-card__excerpt {
  margin: 0; padding-right: 28px; font-size: 13px; line-height: 20px; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-reference-card__go {
  position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center;
  width: 24px; height: 24px; color: var(--ink-mute);
}

/* Botões de criar: cor lisa, sem brilho, reflexo ou relevo. */
#sheet-profile .new-action {
  border-radius: 999px;
  box-shadow: none;
  transition: filter var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
#sheet-profile .new-action:active { filter: brightness(.96); box-shadow: none; }

.new-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0 6px 14px; }
.new-actions .new-action { margin: 0; flex: 0 0 auto; width: 100%; height: 50px; padding-inline: 18px; justify-content: center; white-space: nowrap; }
#sheet-profile #new-chat { color: #513722; background: #EADCC9; }
#sheet-profile #new-photo { color: #244c51; background: #D2E9E5; }

/* Voice occupies the same compact composer until the editable text is ready. */
.composer__mic, .voice-control { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.composer__mic:hover:not(:disabled), .voice-control:hover:not(:disabled) { background: #f1f1f1; }
.composer__mic:disabled { opacity: .4; cursor: default; }
.voice-panel { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 36px; }
.voice-panel[hidden] { display: none; }
.composer[data-voice="requesting"] .composer__input, .composer[data-voice="recording"] .composer__input, .composer[data-voice="transcribing"] .composer__input,
.composer[data-voice="requesting"] .composer__row, .composer[data-voice="recording"] .composer__row, .composer[data-voice="transcribing"] .composer__row { display: none; }
.voice-center { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; gap: 10px; }
.voice-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; flex: 1; max-width: 380px; overflow: hidden; }
.voice-wave span { flex: 1 1 3px; max-width: 4px; min-width: 1px; height: 3px; border-radius: 4px; background: var(--ink); }
.voice-timer { flex: none; color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.voice-control--finish { background: var(--ink); color: #fff; }
.voice-control--finish:hover:not(:disabled) { background: #343434; }
.voice-control:disabled { opacity: .35; }
.voice-transcribing { display: none; flex: 1; text-align: center; color: var(--ink-soft); font-size: 14px; }
.composer[data-voice="transcribing"] .voice-transcribing { display: block; }
.composer[data-voice="transcribing"] .voice-center { display: none; }
.voice-status { max-width: 760px; margin: 8px auto 0; padding-inline: 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; }
.voice-status button { margin-left: 8px; padding: 2px 0; background: transparent; color: var(--ink); text-decoration: underline; font-size: inherit; }

/* Permission education uses the platform's own dialog, before the native prompt. */
.voice-permission { position: fixed; inset: 0; margin: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; border: 1px solid #e7e7e7; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 12px 40px #00000014; }
.voice-permission::backdrop { background: #00000045; }
.voice-permission-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: transparent; }
.voice-permission-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 2px 0 20px; border-radius: 16px; background: #f3f3f3; }
.voice-permission h2 { margin: 0 0 12px; font-size: 21px; font-weight: 500; letter-spacing: -.45px; line-height: 1.25; }
.voice-permission p, .voice-permission li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.voice-permission p { margin: 0; }
.voice-permission ol { margin: 16px 0 0; padding-left: 20px; }
.voice-permission li + li { margin-top: 10px; }
.voice-permission-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.voice-permission-actions button { flex: 1 1 auto; min-height: 44px; padding: 11px 14px; border-radius: 14px; background: #f3f3f3; font-size: 14px; font-weight: 500; }
.voice-permission-actions [data-allow] { background: #242424; color: #fff; }
.voice-permission button:focus-visible { outline: 2px solid #626262; outline-offset: 3px; }
@media (max-width: 420px) { .voice-permission { padding: 24px; } .voice-permission[data-mode="blocked"] .voice-permission-actions { flex-direction: column-reverse; } }

@media (max-width: 899px) {
  /* Menu e conversa deslizam juntos, preservando a largura do chat. */
  #sheet-profile { width: 90%; border-radius: 0 24px 24px 0; transform: translateX(-100%); }
  .app > .topbar,
  .app > .stage {
    transition: transform var(--t-slow) var(--ease-out);
  }
  .app:has(#sheet-profile[data-open="true"]) > .topbar,
  .app:has(#sheet-profile[data-open="true"]) > .stage {
    transform: translateX(90%);
  }
  /* Transparente também ao fechar, sem flash escuro durante a saída. */
  .app:not(:has(.sheet:not(#sheet-profile)[data-open="true"])) .scrim {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}