/* Inglês com Pip · camada do hub (SOL-222): Ajustes, alinhamento dos botões, barra de navegação translúcida e o tema
   "Vidro (macOS)": escuro, translúcido, com desfoque e bordas de luz. Vem DEPOIS do estilo do app e usa :where() para não
   passar por cima dos estados (acerto, erro, selecionado), que continuam mandando. */

/* ---------------------------------------------------------------- alinhamento (todos os temas) */
.chips .chip, button.chip { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; text-align: center; }
.btn.inline { min-height: 44px; }
.send .txt { height: 50px; padding-top: 0; padding-bottom: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes .btn { width: auto; flex: 1 1 140px; }
.mini { box-sizing: border-box; }
#app { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
nav { padding-bottom: env(safe-area-inset-bottom); }
nav button { min-height: 52px; display: flex; align-items: center; justify-content: center; }

/* barra de navegação translúcida nos temas claro e escuro */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  nav { background: color-mix(in srgb, var(--card) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
}

/* ---------------------------------------------------------------- Ajustes */
.ajuste { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.ajuste h2 { font-size: 18px; }
.ajuste .nota { font-size: 14px; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.seg button { min-height: 46px; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 6px 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; }
.seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.seg button[disabled] { opacity: .5; cursor: not-allowed; }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.ponto.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.ponto.off { background: var(--bad); }
.estado-ia { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; background: var(--good-bg); color: var(--good); font-size: 15px; }
.estado-ia.livre { background: color-mix(in srgb, var(--sun) 18%, transparent); color: var(--ink); }
.estado-ia b { font-family: var(--display); }
.quem { display: flex; align-items: center; gap: 12px; }
.quem .av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 800; font-size: 18px; }
.quem .t { display: flex; flex-direction: column; min-width: 0; }
.quem .t span { overflow-wrap: anywhere; }
.modelo-linha { font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- tema Vidro (macOS escuro, liquid glass) */
:root[data-theme="vidro"] {
  --paper: #070b16; --card: rgba(255, 255, 255, .07); --ink: #eef4f6; --muted: #a8b6c6; --line: rgba(255, 255, 255, .16);
  --accent: #46dcc4; --accent-ink: #032019; --belly: #b9f2e8; --sun: #ffcc55;
  --good: #74e6a4; --good-bg: rgba(70, 210, 130, .16); --bad: #ff9a85; --bad-bg: rgba(255, 110, 90, .17);
  --vidro: blur(26px) saturate(190%);
  --luz: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .28);
  --sombra: 0 12px 36px rgba(0, 0, 0, .38);
  color-scheme: dark;
}
:root[data-theme="vidro"] body { background: #070b16; }
:root[data-theme="vidro"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 14%, rgba(70, 220, 196, .55), transparent 72%),
    radial-gradient(34% 30% at 88% 10%, rgba(132, 98, 255, .52), transparent 72%),
    radial-gradient(42% 36% at 78% 82%, rgba(255, 168, 64, .34), transparent 72%),
    radial-gradient(40% 40% at 16% 92%, rgba(46, 124, 255, .42), transparent 72%),
    linear-gradient(160deg, #0a1022, #070b16 55%, #0b0f1d);
  animation: pip-deriva 36s ease-in-out infinite alternate;
}
@keyframes pip-deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="vidro"] body::before { animation: none; } }

:where(:root[data-theme="vidro"]) :is(.bubble, .row, .cardq, .chip, .opt, .tile, .msg, .list li, input.txt, .mini, .ajuste, .seg button, .pill) {
  background-color: var(--card);
  background-image: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .16), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: var(--luz);
}
:where(:root[data-theme="vidro"]) :is(.bubble, .row, .cardq, .ajuste, .list li) { box-shadow: var(--luz), var(--sombra); }
:where(:root[data-theme="vidro"]) .msg.note { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-theme="vidro"]) .btn {
  background: linear-gradient(180deg, #5eeed6, #22b29b); color: #022019; border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(0, 60, 50, .35), 0 10px 28px rgba(70, 220, 196, .32);
}
:where(:root[data-theme="vidro"]) .btn.ghost {
  background: rgba(255, 255, 255, .07); color: var(--accent); border: 1px solid rgba(70, 220, 196, .55);
  -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro); box-shadow: var(--luz);
}
:where(:root[data-theme="vidro"]) :is(.mic, .mini.go, .chip.main, .chip[aria-pressed="true"], .pill.go, .msg.me),
:where(:root[data-theme="vidro"]) .seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, #5eeed6, #22b29b); color: #022019; border-color: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px rgba(70, 220, 196, .28);
}
:where(:root[data-theme="vidro"]) :is(.mic.on, .mini.on, .mic.on:hover) { background: linear-gradient(180deg, #ff9d88, #e5543d); color: #fff; }
:where(:root[data-theme="vidro"]) .opt[aria-pressed="true"] { background: rgba(70, 220, 196, .22); border-color: var(--accent); color: var(--ink); }
:where(:root[data-theme="vidro"]) .opt.hit { background: var(--good-bg); border-color: var(--good); color: var(--good); }
:where(:root[data-theme="vidro"]) .opt.miss { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
:where(:root[data-theme="vidro"]) .pill.ok { background: var(--good-bg); color: var(--good); }
:where(:root[data-theme="vidro"]) .fb { -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro); box-shadow: var(--luz); border: 1px solid rgba(255, 255, 255, .14); }
:where(:root[data-theme="vidro"]) .foot { background: linear-gradient(to top, rgba(7, 11, 22, .82), rgba(7, 11, 22, .45)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:where(:root[data-theme="vidro"]) nav {
  left: 50%; right: auto; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); padding-bottom: 0; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)), rgba(12, 18, 34, .55);
  -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 40px rgba(0, 0, 0, .45);
}
:where(:root[data-theme="vidro"]) nav button[aria-current="page"] { border-top-color: transparent; background: rgba(70, 220, 196, .16); border-radius: 18px; }
:where(:root[data-theme="vidro"]) .unit-head { border-top-color: rgba(255, 255, 255, .25); }
:where(:root[data-theme="vidro"]) .bar { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
:where(:root[data-theme="vidro"]) .quem .av { background: linear-gradient(180deg, #5eeed6, #22b29b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
:where(:root[data-theme="vidro"]) .estado-ia { -webkit-backdrop-filter: var(--vidro); backdrop-filter: var(--vidro); box-shadow: var(--luz); }