/* NEUVOX · estilo Apple (25/09/2026) - camada opt-in sobre a pele Adaptive.
   Vale SOMENTE com <html data-estilo="apple">, que só existe quando a pessoa escolhe
   um tema da família Apple em Configurações › Aparência (TEMAS no index.html).
   Estrutura, material translúcido e correções do escuro vêm de /nvx-adaptive.css;
   aqui fica a linguagem visual das plataformas Apple: fonte do sistema com tracking
   por tamanho, cores do sistema, balões estilo iMessage, controles preenchidos que
   respondem no toque (pointer-down), campos preenchidos, listas agrupadas.
   Só aparência: nenhum comportamento muda. A marca d'água não é tocada. */

html[data-estilo="apple"]{
  --ap-fill:rgba(118,118,128,.12);          /* tertiarySystemFill */
  --ap-fill-2:rgba(118,118,128,.20);        /* secondarySystemFill (hover) */
  --ap-sep:rgba(60,60,67,.18);              /* separator */
  --ap-bubble-in:#E9E9EB;
  --ap-bubble-in-text:#000;
  --ap-bubble-out-text:#fff;
  --ap-press:.97;
  --radius:12px;--radius-sm:10px;--radius-chip:999px;
}
html[data-estilo="apple"][data-escuro="1"]{
  --ap-fill:rgba(118,118,128,.24);
  --ap-fill-2:rgba(118,118,128,.32);
  --ap-sep:rgba(84,84,88,.6);
  --ap-bubble-in:#26252A;
  --ap-bubble-in-text:#fff;
}

/* ---------- tipografia: fonte do sistema, tracking por tamanho ---------- */
html[data-estilo="apple"] body{letter-spacing:-.01em;font-feature-settings:"kern"}
html[data-estilo="apple"] h1{font-weight:600;letter-spacing:-.01em;line-height:1.12} /* Newsreader: assinatura da marca */
html[data-estilo="apple"] h2{font-weight:600;letter-spacing:-.02em;line-height:1.2}
html[data-estilo="apple"] h3{font-weight:600;letter-spacing:-.012em}
html[data-estilo="apple"] .greet{font-size:20px;font-weight:700;letter-spacing:-.02em}
html[data-estilo="apple"] .eyebrow,html[data-estilo="apple"] .nav .brand-sub{letter-spacing:.02em;text-transform:none;font-weight:600}
html[data-estilo="apple"] small,html[data-estilo="apple"] .meta,html[data-estilo="apple"] .time{letter-spacing:0}

/* ---------- barra lateral: item ativo em cápsula da cor de destaque ---------- */
html[data-estilo="apple"] .nav a{border-radius:10px;font-weight:500}
html[data-estilo="apple"] .nav a.active{background:var(--accent);color:var(--on-accent,#fff);font-weight:600}
html[data-estilo="apple"] .nav a.active svg,html[data-estilo="apple"] .nav a.active .ic{color:inherit;fill:currentColor}

/* ---------- lista de conversas: separador fino recuado, seleção em cápsula ---------- */
html[data-estilo="apple"] .conv{border-bottom:none;border-left:none;margin:0 6px;border-radius:12px;position:relative}
html[data-estilo="apple"] .conv::after{content:"";position:absolute;left:15px;right:6px;bottom:0;height:.5px;background:var(--ap-sep)}
html[data-estilo="apple"] .conv.sel{background:var(--accent-soft)}
html[data-estilo="apple"] .conv.sel::after,html[data-estilo="apple"] .conv:has(+ .conv.sel)::after{opacity:0}
html[data-estilo="apple"] .conv.needs{border-left:none;box-shadow:inset 3px 0 0 var(--amber-mark)}

/* ---------- balões estilo iMessage ---------- */
html[data-estilo="apple"] .m-in{background:var(--ap-bubble-in);color:var(--ap-bubble-in-text);border:none;border-radius:18px 18px 18px 6px}
html[data-estilo="apple"] .m-out{background:var(--accent);color:var(--ap-bubble-out-text);border:none;border-radius:18px 18px 6px 18px}
html[data-estilo="apple"] .m-out .sender,html[data-estilo="apple"] .m-out .meta,html[data-estilo="apple"] .m-out .time,
html[data-estilo="apple"] .m-out a{color:rgba(255,255,255,.85)}
html[data-estilo="apple"] .m-ai{border-radius:18px 18px 6px 18px}

/* ---------- botões: preenchido, cinza preenchido; resposta no pointer-down ---------- */
html[data-estilo="apple"] .btn{border:none;border-radius:10px;background:var(--ap-fill);color:var(--action);font-weight:600;box-shadow:none}
html[data-estilo="apple"] .btn:hover{background:var(--ap-fill-2)}
html[data-estilo="apple"] .btn.primary{background:var(--accent);color:var(--on-accent,#fff);box-shadow:none}
html[data-estilo="apple"] .btn.primary:hover{background:var(--accent-2)}
html[data-estilo="apple"] .btn:active,html[data-estilo="apple"] .chip:active,html[data-estilo="apple"] .conv:active{transform:scale(var(--ap-press));transition:transform 100ms ease-out}

/* ---------- campos: preenchidos, sem borda; foco com anel da cor de destaque ---------- */
html[data-estilo="apple"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-estilo="apple"] select,html[data-estilo="apple"] textarea{background:var(--ap-fill);border:1px solid transparent;border-radius:10px}
html[data-estilo="apple"] input:focus,html[data-estilo="apple"] select:focus,html[data-estilo="apple"] textarea:focus{
  background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
html[data-estilo="apple"] .composer textarea,html[data-estilo="apple"] .composer input[type=text]{border-radius:18px}

/* ---------- chips e filtros: cápsulas (controle segmentado) ---------- */
html[data-estilo="apple"] .chip{border:none;background:var(--ap-fill);border-radius:999px;font-weight:500}
html[data-estilo="apple"] .chip.on,html[data-estilo="apple"] .chip.active,html[data-estilo="apple"] .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff)}

/* ---------- cartões: lista agrupada (inset grouped), sem moldura ---------- */
html[data-estilo="apple"] .card{border:none;border-radius:12px;background:var(--surface);box-shadow:none}
html[data-estilo="apple"] .card h3{font-size:13px;font-weight:600;text-transform:none;color:var(--muted);letter-spacing:0}
html[data-estilo="apple"] .cfg-row{border-color:var(--ap-sep)}

/* ---------- barra superior: material translúcido, sem linha dura ---------- */
html[data-estilo="apple"] .topbar{background:var(--nvx-glass-bg);backdrop-filter:var(--nvx-glass-filter);-webkit-backdrop-filter:var(--nvx-glass-filter);
  border-bottom:.5px solid var(--ap-sep)}

/* ---------- barras de rolagem discretas ---------- */
html[data-estilo="apple"] *{scrollbar-width:thin;scrollbar-color:var(--ap-fill-2) transparent}

/* ---------- acessibilidade ---------- */
html[data-estilo="apple"][data-movimento="reduzido"] .btn:active,html[data-estilo="apple"][data-movimento="reduzido"] .chip:active,
html[data-estilo="apple"][data-movimento="reduzido"] .conv:active{transform:none}
@media (prefers-reduced-motion:reduce){
  html[data-estilo="apple"] .btn:active,html[data-estilo="apple"] .chip:active,html[data-estilo="apple"] .conv:active{transform:none}
}
html[data-estilo="apple"][data-contraste="alto"] .btn,html[data-estilo="apple"][data-contraste="alto"] .chip,
html[data-estilo="apple"][data-contraste="alto"] input,html[data-estilo="apple"][data-contraste="alto"] select,
html[data-estilo="apple"][data-contraste="alto"] textarea,html[data-estilo="apple"][data-contraste="alto"] .card,
html[data-estilo="apple"][data-contraste="alto"] .m-in{border:1px solid var(--ink)}
@media (prefers-contrast:more){
  html[data-estilo="apple"] .btn,html[data-estilo="apple"] .chip,html[data-estilo="apple"] .card,html[data-estilo="apple"] .m-in{border:1px solid var(--ink)}
}

/* Prévia e hora na lista: texto do sistema em cinza (a Adaptive usa monoespaçada). */
html[data-estilo="apple"] .conv .meta,html[data-estilo="apple"] .conv .time,html[data-estilo="apple"] .meta{
  font-family:var(--font-body);font-variant-numeric:tabular-nums;color:var(--muted);text-align:left;letter-spacing:0}

/* "Precisa de atenção": ponto discreto à esquerda (como o de não lida), sem moldura nem pulsação. */
html[data-estilo="apple"] .conv.needs{border:none;box-shadow:none;animation:none;outline:none}
html[data-estilo="apple"] .conv.needs::before{content:"";position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--amber-mark)}

/* ---------- chave liga/desliga no formato iOS (51×31, verde do sistema) ---------- */
html[data-estilo="apple"] .sw{width:51px;height:31px}
html[data-estilo="apple"] .sw i{background:var(--ap-fill-2);border-radius:999px;transition:background 200ms ease}
html[data-estilo="apple"] .sw i:before{width:27px;height:27px;left:2px;top:2px;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  transition:transform 300ms cubic-bezier(.34,1.36,.64,1)}
html[data-estilo="apple"] .sw input:checked + i{background:#34C759}
html[data-estilo="apple"][data-escuro="1"] .sw input:checked + i{background:#30D158}
html[data-estilo="apple"] .sw input:checked + i:before{transform:translateX(20px)}
html[data-estilo="apple"] .sw input:focus-visible + i{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---------- janelas como folhas: fundo escurecido, material, sobe de baixo no celular ---------- */
/* Os contêineres (#modal, #modal-kb…) trazem o fundo inline: !important só aqui. */
html[data-estilo="apple"] [id^="modal"]:has(> .modal-box){background:rgba(0,0,0,.32)!important}
html[data-estilo="apple"] .modal-box{background:var(--nvx-glass-bg);backdrop-filter:var(--nvx-glass-filter);-webkit-backdrop-filter:var(--nvx-glass-filter);
  border:.5px solid var(--nvx-glass-border);border-radius:16px;box-shadow:var(--shadow-float)}
html[data-estilo="apple"] .modal-box{animation:apFolha 320ms cubic-bezier(.16,1,.3,1)}
html[data-estilo="apple"] .modal-box h2{font-size:17px;font-weight:600;letter-spacing:-.02em;text-align:center}
@keyframes apFolha{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){
  html[data-estilo="apple"] [id^="modal"]:has(> .modal-box){align-items:flex-end!important}
  html[data-estilo="apple"] .modal-box{width:100%;max-width:none;border-radius:16px 16px 0 0;padding-bottom:max(22px,env(safe-area-inset-bottom))}
  html[data-estilo="apple"] .modal-box::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--ap-fill-2);margin:-10px auto 12px}
}

/* ---------- Configurações no estilo Ajustes: item ativo em cápsula ---------- */
html[data-estilo="apple"] .cfg-navitem{border-radius:10px;font-weight:500}
html[data-estilo="apple"] .cfg-navitem:hover{background:var(--ap-fill)}
html[data-estilo="apple"] .cfg-navitem.active{background:var(--accent);color:var(--on-accent,#fff);font-weight:600;box-shadow:none}
html[data-estilo="apple"] .cfg-navitem:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---------- avisos (toast) como HUD do iOS ---------- */
html[data-estilo="apple"] .toast{background:rgba(28,28,30,.86);color:#fff;border:none;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  font-weight:500;letter-spacing:-.01em}

/* ---------- movimento reduzido: folha e chave sem deslocamento ---------- */
html[data-estilo="apple"][data-movimento="reduzido"] .modal-box{animation:none}
html[data-estilo="apple"][data-movimento="reduzido"] .sw i:before{transition:none}
@media (prefers-reduced-motion:reduce){
  html[data-estilo="apple"] .modal-box{animation:none}
  html[data-estilo="apple"] .sw i:before{transition:none}
}
html[data-estilo="apple"][data-transparencia="reduzida"] .toast{background:#1C1C1E;backdrop-filter:none}

/* ---------- etiquetas (badges): cápsula tingida, peso médio, sem caixa alta ---------- */
html[data-estilo="apple"] .badge{font-size:11px;font-weight:600;letter-spacing:0;padding:2px 8px;border:none}
html[data-estilo="apple"] .b-canal{background:var(--info-soft);color:var(--action)}
html[data-estilo="apple"] .tag{background:var(--ap-fill);font-weight:500}
html[data-estilo="apple"] .tag.on{background:var(--accent-soft);color:var(--action)}
html[data-estilo="apple"] .tag.on:before{background:#34C759}

/* ---------- cabeçalho da conversa: barra translúcida, sem linha dura ---------- */
html[data-estilo="apple"] .chat-head{background:var(--nvx-glass-bg);backdrop-filter:var(--nvx-glass-filter);-webkit-backdrop-filter:var(--nvx-glass-filter);
  border-bottom:.5px solid var(--ap-sep)}

/* ---------- estados vazios: texto secundário do sistema, centralizado e calmo ---------- */
html[data-estilo="apple"] .empty{color:var(--muted);font-size:15px;font-weight:500;letter-spacing:-.01em}