/* Portal Mariuá — MARI, assistente virtual · v221 (imagem da Mari em camadas) · v220 (personagem em SVG que acena + conversa em folha de baixo para cima)
   Tom escuro: regras html[data-tema="escuro"] body … no <style id="v219-escuro"> do app (app/index.html e minha-area.html).
   Contraste (tom claro) conferido ≥ 4,5:1 em todo texto: #1f3f4f/#fff 11,2 · #264251/#fff 10,4 · #5b6d76/#fff 5,4 · #fff/#c2410c 5,18 · #1f3f4f/#eef4f6 10,1 */
.mari-root{--mari-chao:calc(14px + env(safe-area-inset-bottom,0px));font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#264251}
.mari-root svg{display:block}
.mari-root [hidden]{display:none!important}

/* ===== a personagem ===== */
.mari-agente{position:fixed;right:6px;bottom:var(--mari-chao);z-index:89;display:flex;align-items:flex-end;pointer-events:none;
  transition:transform .35s cubic-bezier(.3,1.2,.5,1),opacity .3s,visibility 0s}
.mari-fig{pointer-events:auto;position:relative;display:block;width:96px;height:112px;padding:0;margin:0;border:0;background:none;cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent;filter:drop-shadow(0 8px 12px rgba(18,46,66,.26));border-radius:22px 22px 0 0;
  transition:width .3s,height .3s,border-radius .3s,background-color .3s,transform .15s}
.mari-fig:active{transform:scale(.94)}
.mari-fig:focus-visible{outline:3px solid #34b6b3;outline-offset:3px}
.mari-svg{position:absolute;left:0;bottom:0;width:96px;height:112px;transition:width .3s,height .3s,top .3s,left .3s}
/* v221: duas camadas da mesma imagem; a mão gira no pulso (20,5% 58,5% da caixa, vale também no modo espiando) */
.mari-svg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;-webkit-user-drag:none;user-select:none}
.mari-svg .mari-mao{transform-origin:20.5% 58.5%}
.mari-acenando .mari-mao{animation:mariAcenoMao 1.5s ease-in-out .4s 2}
.mari-espiando:not(.mari-acenando) .mari-mao{animation:mariAcenoRaro 9s ease-in-out 4s infinite}
.mari-agente{animation:mariRespira 3.4s ease-in-out infinite}
@keyframes mariAcenoMao{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}35%{transform:rotate(10deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}}
@keyframes mariAcenoRaro{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg)}93%{transform:rotate(10deg)}97%{transform:rotate(-7deg)}}
@keyframes mariRespira{0%,100%{translate:0 0}50%{translate:0 -2px}}
/* entrada com pulinho */
.mari-pulo .mari-fig{animation:mariPulo .75s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes mariPulo{0%{transform:translateY(105%)}55%{transform:translateY(-9%) scaleY(1.04)}78%{transform:translateY(2%) scaleY(.97)}100%{transform:none}}
/* espiando: só cabeça e mãozinha na borda, numa janelinha de vidro */
.mari-espiando .mari-agente,.mari-recolhida .mari-agente{right:0}
.mari-espiando .mari-fig,.mari-recolhida .mari-fig{width:74px;height:54px;border-radius:18px 0 0 18px;background-color:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(18,46,66,.2),inset 0 0 0 1px rgba(31,63,79,.1);filter:none}
.mari-espiando .mari-svg,.mari-recolhida .mari-svg{width:72px;height:84px;left:-3px;bottom:auto;top:-6px}
.mari-espiando.mari-pulo .mari-fig{animation:mariEspia .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes mariEspia{from{transform:translateX(100%)}to{transform:none}}
/* recolhida: estava em cima de um botão → só a pontinha na borda */
.mari-recolhida .mari-agente{transform:translateX(58%);opacity:.92}
/* fora: teclado aberto, janela/modal do app aberta ou conversa aberta */
.mari-fora .mari-agente{transform:translateY(150%);opacity:0;visibility:hidden;transition:transform .3s,opacity .3s,visibility 0s .3s}

/* ===== balão de quadrinho ===== */
.mari-balao{pointer-events:auto;position:absolute;right:100px;bottom:62px;width:max-content;max-width:min(232px,calc(100vw - 112px));
  background:#fff;color:#1f3f4f;border:2px solid #1f3f4f;border-radius:18px 18px 4px 18px;padding:9px 34px 10px 13px;
  font-family:inherit;font-weight:700;font-size:14px;line-height:1.38;box-shadow:0 10px 24px rgba(18,46,66,.2);cursor:pointer;animation:mariBalao .32s cubic-bezier(.2,.9,.3,1.3) both}
.mari-balao::after{content:"";position:absolute;right:-9px;bottom:9px;width:14px;height:14px;background:inherit;border-right:2px solid #1f3f4f;border-bottom:2px solid #1f3f4f;transform:rotate(-45deg);border-radius:0 0 4px 0}
.mari-balao-t{margin:0}
.mari-balao-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:#eef4f6;color:#1f3f4f;display:grid;place-items:center;cursor:pointer;padding:0}
.mari-balao-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.mari-espiando .mari-balao{right:82px;bottom:6px}
@keyframes mariBalao{from{opacity:0;transform:translateY(8px) scale(.9);transform-origin:right bottom}to{opacity:1;transform:none}}

/* ===== conversa: folha de baixo para cima ===== */
.mari-scrim{position:fixed;inset:0;z-index:119;background:rgba(12,26,34,.42);opacity:0;transition:opacity .25s}
.mari-sheet-on .mari-scrim{opacity:1}
.mari-panel{position:fixed;z-index:120;left:0;right:0;bottom:var(--mari-kb,0px);height:min(78dvh,640px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;
  background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -18px 50px rgba(16,43,58,.28);overflow:hidden;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.mari-sheet-on .mari-panel{transform:translateY(0)}
.mari-panel.mari-arrasto{transition:none}
.mari-alca{display:flex;justify-content:center;padding:9px 0 3px;cursor:grab;touch-action:none}
.mari-alca i{width:42px;height:5px;border-radius:3px;background:#c9d6dc}
.mari-head{display:flex;align-items:center;gap:10px;padding:4px 10px 10px 14px;border-bottom:1px solid #e6eef1;touch-action:none}
.mari-head div{flex:1;min-width:0}
.mari-head strong{display:block;font-size:16px;color:#1f3f4f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mari-head strong span{font-weight:600;color:#5b6d76;font-size:14px}
.mari-head small{display:flex;align-items:center;gap:6px;font-size:12px;color:#5b6d76}
.mari-ava{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,90,31,.35)}
.mari-ava img.mari-foto{width:100%;height:100%;object-fit:cover;display:block}
.mari-on{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.mari-x{background:#eef4f6;border:0;border-radius:12px;width:40px;height:40px;display:grid;place-items:center;color:#1f3f4f;cursor:pointer;flex:none}
.mari-x svg,.mari-send svg,.mari-acao svg,.mari-a svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mari-x svg{width:20px;height:20px}
.mari-msgs{flex:1;overflow:auto;overscroll-behavior:contain;padding:14px 12px 8px;background:#f4f8f9;display:flex;flex-direction:column;gap:10px}
.mari-m{max-width:86%;padding:10px 13px;border-radius:18px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;animation:mariMsg .22s ease-out both}
.mari-m.b{background:#fff;border:1px solid #e1e9ed;border-bottom-left-radius:6px;align-self:flex-start;color:#264251;box-shadow:0 2px 8px rgba(31,63,79,.06)}
.mari-m.u{background:linear-gradient(135deg,#1f3f4f,#2d5867);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.mari-m.b a{color:#c2410c;font-weight:700}
@keyframes mariMsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mari-dots{display:inline-flex;gap:4px;padding:4px 2px}
.mari-dots i{width:7px;height:7px;border-radius:50%;background:#9fb3bd;animation:mariDot 1s infinite ease-in-out}
.mari-dots i:nth-child(2){animation-delay:.15s}.mari-dots i:nth-child(3){animation-delay:.3s}
@keyframes mariDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.mari-passos{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:#40545e}
.mari-passos li{margin:3px 0}
.mari-m.b a.mari-acao{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;background:#c2410c;color:#fff;text-decoration:none;
  border-radius:12px;padding:10px 14px;font-weight:800;font-size:14.5px;box-shadow:0 6px 14px rgba(194,65,12,.25)}
.mari-acao svg{width:18px;height:18px;flex:none}
.mari-acao:active{transform:scale(.98)}
.mari-ver{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mari-ver small{width:100%;color:#5b6d76;font-size:12px}
.mari-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid #e6eef1;background:#fff;scrollbar-width:none}
.mari-chips::-webkit-scrollbar{display:none}
.mari-chip{flex:none;border:1px solid #d7e3e9;background:#eef4f6;color:#1f3f4f;border-radius:999px;padding:7px 12px;font-family:inherit;font-weight:600;font-size:13px;line-height:1.25;cursor:pointer;white-space:nowrap}
.mari-chip:hover{background:#1f3f4f;color:#fff}
.mari-ver .mari-chip{white-space:normal;text-align:left}
.mari-nr{display:block;margin-top:10px;background:none;border:0;padding:0;color:#1f3f4f;font-family:inherit;font-weight:700;font-size:12.5px;line-height:1.3;text-decoration:underline;cursor:pointer}
.mari-acts{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mari-m.b a.mari-a{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 12px;text-decoration:none;font-weight:700;font-size:14px;color:#fff}
.mari-a svg{width:18px;height:18px}
.mari-a.pri{background:#1f3f4f}.mari-a.wa{background:#1f6f4a}
.mari-hora{margin:2px 0 0;font-size:12px;color:#5b6d76}
.mari-form{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid #e6eef1}
.mari-in{flex:1;min-width:0;border:1.5px solid #cfdde4;border-radius:999px;padding:11px 16px;font:inherit;font-size:16px;outline:none;background:#fff;color:#264251}
.mari-in:focus{border-color:#34b6b3;box-shadow:0 0 0 3px rgba(52,182,179,.18)}
.mari-send{width:46px;height:46px;border-radius:50%;border:0;background:#c2410c;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.mari-send svg{width:20px;height:20px}
.mari-send:active{transform:scale(.92)}

/* computador: a conversa é um cartão no canto, a personagem fica um pouco maior */
@media (min-width:821px){
  .mari-agente{right:18px}
  .mari-scrim{background:transparent}
  .mari-panel{left:auto;right:24px;bottom:24px;width:390px;height:min(600px,calc(100dvh - 48px));border-radius:22px;
    transform:translateY(16px) scale(.98);opacity:0;transition:transform .25s,opacity .25s}
  .mari-sheet-on .mari-panel{transform:none;opacity:1}
  .mari-alca{display:none}
  .mari-head{padding-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .mari-root *,.mari-root *::after{animation:none!important;transition:none!important}
}
@media print{.mari-root{display:none}}

@media (prefers-reduced-motion:reduce){.mari-agente,.mari-svg .mari-mao{animation:none!important}}

/* v223: confete (aniversário, Natal, Ano Novo…), seletor de aniversário e respostas de humor */
.mari-confete{position:absolute;right:10px;bottom:70px;width:230px;height:170px;pointer-events:none}
.mari-confete i{position:absolute;top:0;width:7px;height:11px;border-radius:2px;opacity:0;animation:mariConfete 2.4s ease-in forwards}
@keyframes mariConfete{0%{opacity:1;transform:translateY(-10px) rotate(0)}100%{opacity:0;transform:translateY(160px) rotate(560deg)}}
.mari-niver{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.mari-niver select{font:inherit;font-size:15px;padding:7px 8px;border-radius:10px;border:1px solid #c9d6dc;background:#fff;color:#1f3f4f}
.mari-humor{margin-top:8px}
html[data-tema="escuro"] body .mari-niver select{background:#0f1f27;color:#e2ebee;border-color:rgba(255,255,255,.18)}
@media (prefers-reduced-motion:reduce){.mari-confete{display:none}}

/* v224: campo do apelido e lista do caderninho */
.mari-niver input{font:inherit;font-size:15px;padding:7px 10px;border-radius:10px;border:1px solid #c9d6dc;background:#fff;color:#1f3f4f;width:140px}
html[data-tema="escuro"] body .mari-niver input{background:#0f1f27;color:#e2ebee;border-color:rgba(255,255,255,.18)}
.mari-cad{margin:8px 0 2px;padding-left:18px}.mari-cad li{margin:3px 0}

/* v252: Mari 3D — tira de reação por cima da imagem parada; figurinha na conversa; balões do aniversário */
.mari-svg .mari-tira{position:absolute;inset:0;background-repeat:no-repeat;visibility:hidden}
.mari-svg .mari-tira.on{visibility:visible}
.mari-svg.mari-tocando .mari-corpo{visibility:hidden}
.mari-figurinha{display:block;position:relative;width:96px;height:112px;margin:2px 0 -4px 2px;flex:none;transition:opacity .35s,transform .35s}
.mari-figurinha .mari-tira{position:absolute;inset:0;background-repeat:no-repeat}
.mari-figurinha.sai{opacity:0;transform:scale(.9)}
.mari-baloes{position:absolute;left:-40px;right:0;bottom:60px;height:150px;pointer-events:none;overflow:visible}
.mari-baloes i{position:absolute;bottom:0;width:20px;height:25px;border-radius:50% 50% 46% 46%;opacity:0;animation:mariBalaoSobe 3.8s ease-out forwards}
.mari-baloes i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;background:rgba(60,70,80,.45)}
@keyframes mariBalaoSobe{0%{opacity:0;transform:translateY(30px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(-120px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.mari-baloes,.mari-figurinha{display:none!important}}