/* ============================================================
   BodyCoach — camada "Liquid Glass"
   Materiais em camadas, luz de borda, profundidade e movimento.
   Carregada DEPOIS de style.css; pode ser desativada inteira via
   <html data-fx="reduzido"> (toggle do usuário) ou automaticamente
   com prefers-reduced-transparency / prefers-reduced-motion.
   ============================================================ */

:root {
  /* materiais de vidro: 1 = dock/navegação, 2 = superfície de conteúdo, 3 = folhas/menus */
  --glass-1: rgba(16, 19, 25, .60);
  --glass-2: rgba(21, 24, 31, .82);
  --glass-3: rgba(26, 30, 38, .93);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .035);
  --shadow-contact: 0 24px 48px -22px rgba(0, 0, 0, .6), 0 6px 18px -8px rgba(0, 0, 0, .35);
  --ease-out: cubic-bezier(.22, .8, .26, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .42s;
  --nav-h: 64px;
  --tabbar-h: 62px;
}

/* ---------- fundo: luz ambiente ---------- */

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(196, 165, 116, .085), transparent 62%),
    radial-gradient(760px 520px at -8% 34%, rgba(94, 162, 255, .07), transparent 58%);
}

/* luz que acompanha o ponteiro (desktop, modo completo) */
html[data-fx="completo"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(560px 560px at var(--mx, 50%) var(--my, 30%),
              rgba(196, 165, 116, .045), transparent 65%);
  transition: opacity .4s;
}

/* ---------- entrada: materializar (uma vez, curta) ---------- */

@keyframes bc-materialize {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
html[data-fx="completo"] main > * {
  animation: bc-materialize var(--dur-3) var(--ease-out) both;
}
html[data-fx="completo"] main > :nth-child(2) { animation-delay: .05s; }
html[data-fx="completo"] main > :nth-child(3) { animation-delay: .1s; }
html[data-fx="completo"] main > :nth-child(n+4) { animation-delay: .14s; }

/* ---------- acabamento de vidro nos cards existentes ---------- */

.card, .ck-card, .day-card, .hc-stat, .model-load {
  box-shadow: var(--shadow-contact), var(--edge-light) !important;
}
.card { backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); }

/* brilho especular no topo do card */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent 4%, rgba(255,255,255,.14) 30%, rgba(196,165,116,.22) 55%, transparent 96%);
  pointer-events: none;
}
.card { position: relative; overflow: hidden; }

/* ---------- botões: resposta tátil ---------- */

button:not(.linklike):not(.ex-check):not(.cat-tab):not(.range-btn):not(.norm-btn):not(.queue-x):not(.attach-x):not(.edit-btn):not(.legend-chip) {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), filter var(--dur-2);
  will-change: transform;
}
button:active:not(.linklike) { transform: scale(.97); }

/* foco visível coerente */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(196, 165, 116, .65);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   NAVEGAÇÃO — desktop: sidebar · mobile: topbar + dock flutuante
   ============================================================ */

.side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  width: 232px; padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px;
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-right: 1px solid var(--line);
  box-shadow: var(--edge-light);
  overflow-y: auto;
}
.side-logo { font-size: 1.18rem; padding: 4px 10px 14px; }
.side .who { align-self: flex-start; margin: 0 10px 10px; }
.side-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); padding: 12px 12px 5px;
}
.side a:not(.logo) {
  display: flex; align-items: center; gap: 11px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: 9px 12px; border-radius: 12px;
  transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.side a:not(.logo):hover { color: var(--text); background: rgba(255, 255, 255, .05); text-decoration: none; }
.side a:not(.logo):active { transform: scale(.985); }
.side a[aria-current="page"] {
  color: var(--accent);
  background: linear-gradient(120deg, rgba(196, 165, 116, .14), rgba(196, 165, 116, .05));
  box-shadow: inset 0 0 0 1px rgba(196, 165, 116, .28);
}
.side svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.side-foot { margin-top: auto; padding-top: 14px; }
.side-foot .linklike { width: 100%; text-align: left; }

/* topbar mobile (vidro fino) */
.topbar {
  position: sticky; top: 0; z-index: 55;
  display: none; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 18px;
  background: var(--glass-1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* dock inferior flutuante — top:auto neutraliza o nav{top:0} legado do style.css */
.tabbar {
  position: fixed; z-index: 70;
  top: auto;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: var(--tabbar-h);
  display: none;
  align-items: stretch; justify-content: space-around; gap: 2px;
  padding: 6px;
  background: var(--glass-1);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  box-shadow: var(--shadow-contact), var(--edge-light);
}
.tabbar a, .tabbar button.tab-more {
  flex: 1; min-width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; box-shadow: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: .66rem; font-weight: 700;
  letter-spacing: .02em; text-decoration: none; border-radius: 17px;
  transition: color var(--dur-1), background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tabbar svg { width: 21px; height: 21px; }
.tabbar a:active, .tabbar button.tab-more:active { transform: scale(.94); }
.tabbar a[aria-current="page"] { color: var(--accent); background: rgba(196, 165, 116, .1); box-shadow: inset 0 0 0 1px rgba(196, 165, 116, .18); }

/* FAB registro rápido */
.fab {
  position: fixed; z-index: 69;
  right: 18px; bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--grad-accent); color: #17130c; text-decoration: none;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  box-shadow: 0 12px 30px -8px rgba(196, 165, 116, .55), var(--edge-light);
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1);
}
.fab:hover { filter: brightness(1.07); text-decoration: none; }
.fab:active { transform: scale(.92); }
.fab svg { width: 24px; height: 24px; }

/* folha "Mais" */
.more-sheet {
  position: fixed; z-index: 80;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  margin: 0 auto; max-width: 420px;
  background: var(--glass-3);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: var(--shadow-contact), var(--edge-light);
  padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.more-sheet[hidden] { display: none; }
html[data-fx="completo"] .more-sheet { animation: bc-materialize var(--dur-2) var(--ease-out); }
.more-sheet a, .more-sheet form button {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 14px;
  color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none;
  background: none; border: none; box-shadow: none; cursor: pointer; text-align: left;
}
.more-sheet a:hover, .more-sheet form button:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.more-sheet a[aria-current="page"] { color: var(--accent); background: rgba(196, 165, 116, .1); }
.more-sheet svg { width: 18px; height: 18px; opacity: .8; }
.more-veil {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(5, 6, 9, .45); border: none; padding: 0; cursor: default;
}
html[data-fx="completo"] .more-veil { animation: bc-fade var(--dur-2) ease both; }
@keyframes bc-fade { from { opacity: 0; } }

/* troca por viewport */
@media (max-width: 959px) {
  .side { display: none; }
  .topbar { display: flex; }
  .tabbar { display: flex; }
  .fab { display: flex; }
  main { padding-bottom: calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom)) !important; }
  body { padding-bottom: 0; }
}
@media (min-width: 960px) {
  main { margin-left: 232px; max-width: 1120px; }
  .topbar, .tabbar, .fab, .more-veil { display: none !important; }
  .more-sheet[hidden] { display: none; }
}
body:has(.more-sheet:not([hidden])) { overflow: hidden; }

/* ============================================================
   TELA HOJE
   ============================================================ */

.hoje-hero {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 26px 26px 22px; margin-bottom: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(196, 165, 116, .16), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(94, 162, 255, .1), transparent 55%),
    var(--glass-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-contact), var(--edge-light);
}
.hoje-hero .hoje-eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); opacity: .9;
}
.hoje-hero h1 {
  font-size: clamp(2rem, 6vw, 2.6rem); margin: 2px 0 4px; line-height: 1.05;
  font-family: var(--font-display); letter-spacing: -.02em;
}
.hoje-hero .hoje-date { color: var(--muted); font-size: .9rem; }

.hoje-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .hoje-grid { grid-template-columns: 1fr; } }

.hoje-card {
  position: relative; overflow: hidden;
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: 20px; padding: 18px 20px 16px;
  box-shadow: var(--shadow-contact), var(--edge-light);
  display: flex; flex-direction: column; gap: 10px;
}
.hoje-card::after {
  content: ""; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px;
  background: radial-gradient(closest-side, rgba(196, 165, 116, .12), transparent); border-radius: 50%;
  pointer-events: none;
}
.hoje-card > h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.hoje-card > h2 svg { width: 15px; height: 15px; color: var(--accent); }
.hoje-title { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }
.hoje-empty { color: var(--muted); font-size: .88rem; }
.hoje-empty b { color: var(--text); }
.hoje-more { margin-top: auto; font-size: .8rem; font-weight: 700; text-decoration: none; }
.hoje-more:hover { text-decoration: none; color: var(--text); }

/* exercícios do dia (leitura) */
.hoje-ex { display: flex; flex-direction: column; gap: 7px; }
.hoje-ex-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, .2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; font-size: .88rem;
}
.hoje-ex-row .tick {
  width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
  border: 1px solid var(--line-strong); color: transparent;
}
.hoje-ex-row.done .tick { background: var(--grad-accent); border-color: transparent; color: #17130c; }
.hoje-ex-row.done .ex-n { color: var(--faint); text-decoration: line-through; }
.hoje-ex-row .ex-n { flex: 1; min-width: 0; }
.hoje-ex-row .ex-m { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* progresso do dia: anel só quando existe dado */
.hoje-ring { display: flex; align-items: center; gap: 14px; }
.hoje-ring svg { width: 64px; height: 64px; }
.hoje-ring .ring-track { stroke: rgba(255, 255, 255, .08); }
.hoje-ring .ring-fill { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset var(--dur-3) var(--ease-out); }
.hoje-ring b { font-size: 1.5rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hoje-ring small { display: block; color: var(--muted); font-size: .74rem; }

/* macros planejados */
.hoje-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hoje-macro {
  background: rgba(0, 0, 0, .2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 10px 7px; text-align: center;
}
.hoje-macro b { display: block; font-size: 1.02rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hoje-macro span { font-size: .62rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.hoje-ref { display: flex; gap: 8px; align-items: baseline; font-size: .84rem; color: #cfd4dd; }
.hoje-ref time { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .78rem; width: 44px; flex-shrink: 0; }
.plan-tag {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #d4b98c; background: rgba(196, 165, 116, .1);
  border: 1px solid rgba(196, 165, 116, .25); border-radius: 999px; padding: 2px 8px;
}

/* últimos registros */
.hoje-log { display: flex; flex-direction: column; gap: 7px; }
.hoje-log-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, .2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; font-size: .86rem;
}
.hoje-log-row .k {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
  background: rgba(94, 162, 255, .1); color: #bcd2f5; border: 1px solid rgba(94, 162, 255, .25);
}
.hoje-log-row .k.k-meal { background: rgba(196, 165, 116, .1); color: #e6d9c2; border-color: rgba(196, 165, 116, .3); }
.hoje-log-row .k.k-note { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--line-strong); }
.hoje-log-row time { margin-left: auto; color: var(--faint); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   CHAT — composer e status de modelo discretos
   ============================================================ */

.model-load {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 700; color: var(--muted);
  background: var(--glass-3); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 12px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--edge-light);
  max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-load[data-state="ok"] { color: #9fb9de; }
.model-load[data-state="busy"] { color: #f8cd7a; }
.model-load[data-state="down"] { color: #ff9a8a; }
.model-load::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--faint); box-shadow: 0 0 8px currentColor;
}
.model-load[data-state="ok"]::before { background: #7ee08a; }
.model-load[data-state="busy"]::before { background: var(--amber); }
.model-load[data-state="down"]::before { background: var(--red); }
.chat-shell { position: relative; }

/* mensagens surgem suaves */
html[data-fx="completo"] .msg { animation: bc-materialize var(--dur-2) var(--ease-out) both; }

/* ============================================================
   TREINO — seletor de dias compacto
   ============================================================ */

.day-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px;
  scrollbar-width: none; margin: 14px 0 4px;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 58px; padding: 9px 10px 7px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  color: var(--muted); font-family: inherit;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.day-tab b { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.day-tab small { font-size: .62rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.day-tab:hover { color: var(--text); transform: translateY(-1px); }
.day-tab.today { border-color: rgba(196, 165, 116, .45); color: var(--accent); }
.day-tab.sel {
  background: rgba(196, 165, 116, .12); color: var(--accent);
  border-color: rgba(196, 165, 116, .4);
  box-shadow: 0 0 16px rgba(196, 165, 116, .12);
}

/* ============================================================
   ESTADOS VAZIOS ÚTEIS
   ============================================================ */

.empty-hero {
  text-align: center; padding: 40px 22px;
  border: 1px dashed var(--line-strong); border-radius: 20px;
  background: rgba(0, 0, 0, .18);
}
.empty-hero .empty-ico { font-size: 2rem; display: block; margin-bottom: 8px; }
.empty-hero h2 { font-size: 1.05rem; }
.empty-hero p { color: var(--muted); font-size: .88rem; margin: 4px 0 16px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   LOGIN — vidro em camadas com profundidade
   ============================================================ */

.auth-wrap { position: relative; }
.auth-card {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), var(--edge-light);
}
html[data-fx="completo"] .auth-card { animation: bc-materialize var(--dur-3) var(--ease-out) both; }
.auth-card .logo-big { border-radius: 24px; transform: rotate(-4deg); transition: transform var(--dur-2) var(--ease-out); }
.auth-card:hover .logo-big { transform: rotate(0deg) scale(1.03); }

/* ============================================================
   MODO REDUZIDO — identidade mantida, efeitos simples
   ============================================================ */

html[data-fx="reduzido"] .card,
html[data-fx="reduzido"] .ck-card, html[data-fx="reduzido"] .day-card,
html[data-fx="reduzido"] .hc-stat, html[data-fx="reduzido"] .hoje-card,
html[data-fx="reduzido"] .hoje-hero, html[data-fx="reduzido"] .chip,
html[data-fx="reduzido"] .tabbar, html[data-fx="reduzido"] .side,
html[data-fx="reduzido"] .topbar, html[data-fx="reduzido"] .more-sheet,
html[data-fx="reduzido"] .auth-card, html[data-fx="reduzido"] .model-load {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--surface-solid);
}
html[data-fx="reduzido"] body::after, html[data-fx="reduzido"] main > * { animation: none; }
html[data-fx="reduzido"] * { transition-duration: .01s !important; }

@media (prefers-reduced-transparency: reduce) {
  .card, .ck-card, .day-card, .hoje-card, .hoje-hero, .tabbar, .side, .topbar, .more-sheet, .auth-card {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-solid);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
  html { scroll-behavior: auto; }
}

/* efeitos pausam com a aba oculta (o navegador já pausa rAF; garantir animações) */
html[data-fx-hidden="1"] main > *, html[data-fx-hidden="1"] .msg { animation: none !important; }

/* toque mínimo e inputs iOS */
@media (pointer: coarse) {
  .ex-check, .tabbar a, .tabbar button, .fab, .day-tab { min-width: 44px; min-height: 44px; }
  input, textarea, select { font-size: 16px; }
}

/* ===== formulários sob demanda (details) e etapas do registro ===== */
details.day-edit, details.day-add {
  margin-top: 10px;
  border: 1px solid var(--edge-light);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
details.day-edit > summary, details.day-add > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  border-radius: 14px;
  transition: color .2s ease, background .2s ease;
}
details.day-edit > summary::-webkit-details-marker { display: none; }
details.day-edit > summary::before, details.day-add > summary::before {
  content: "+ ";
  font-weight: 600;
  color: var(--accent);
}
details.day-edit[open] > summary::before, details.day-add[open] > summary::before { content: "− "; }
details.day-edit > summary:hover, details.day-add > summary:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}
details.day-edit > form, details.day-add > form { padding: 2px 14px 14px; }
details.day-edit[open], details.day-add[open] { background: rgba(255,255,255,.05); }

/* etapas do registro rápido: pill discreta */
.ql-steps {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 14px 0 4px;
  list-style: none;
}
.ql-steps li {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--edge-light);
  background: rgba(255,255,255,.03);
}
html[data-fx="reduzido"] details.day-edit, html[data-fx="reduzido"] .ql-steps li {
  background: var(--surface-solid);
  border-color: rgba(255,255,255,.12);
}

/* foco visível consistente (acessibilidade) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   CHAT TELA CHEIA — a página do Coach ocupa o app inteiro
   ============================================================ */
.main-chat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 22px); /* desconta o padding vertical (10 topo + 12 base) */
  max-width: 1060px;
  margin-bottom: 0;
  padding: 10px 12px 12px;
}
html[data-fx] body:has(.main-chat) { overflow: hidden; }              /* sem scroll de página */
.main-chat .chat-shell {
  flex: 1; min-height: 0; width: 100%;
  margin-bottom: 0;
}
.main-chat .chat-stream {
  flex: 1; min-height: 0; max-height: none;   /* quebra o teto de 62vh */
  padding-bottom: 16px;
}
.main-chat .chips { flex-shrink: 0; }
.main-chat .hint { flex-shrink: 0; }
.main-chat .composer { flex-shrink: 0; }

/* imagens do coach (gráficos matplotlib, fotos, laudos) */
.msg-body img {
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-contact);
  background: rgba(255,255,255,.04);
  margin: 6px 0;
}
.msg-body img[alt] { cursor: zoom-in; }

@media (max-width: 959px) {
  .main-chat { height: 100dvh; padding: 8px 6px calc(var(--tabbar-h) + 52px + env(safe-area-inset-bottom)) !important; }
  body:has(.main-chat) .fab { display: none; }
  .main-chat .chat-stream { padding-bottom: 10px; padding-inline: 2px; }
  /* teclado iOS: encolhe sem sumir (visualViewport ajusta 100dvh) */
  .main-chat .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   COACH — área de leitura ampliada (vertical e horizontal)
   ============================================================ */
.main-chat .chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 8px;
  padding-bottom: 2px;
}
.main-chat .chips::-webkit-scrollbar { display: none; }
.main-chat .hint { font-size: .72rem; margin-top: 6px; }
.main-chat .chat-stream { padding-top: 16px; }
@media (min-width: 960px) {
  main.main-chat { max-width: none; margin-right: 24px; }
  .main-chat .chat-stream { padding-inline: clamp(18px, 2.5vw, 32px); }
  .main-chat { padding: 14px 18px 12px; height: calc(100dvh - 26px); }
}