/* MAX — visual novo (conceito 01, direção do dono 23/10): branco neve, avatar em painel próprio,
   o M da testa é o ÚNICO controle de voz (azul desligado, verde com neon em conversa).
   Base: MAX-VISUAL-NOVO/assets/interface.css, sem a apresentação lateral da prévia. */
:root{color-scheme:light;--bg:#f8fafd;--panel:#fff;--line:#e0e7f0;--text:#18263a;--muted:#687b94;--blue:#386ff4;--green:#13b985;--app-height:100dvh;--viewport-top:0px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px}
button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid #9cc2ff;outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus:not(:focus-visible){outline:0}

.shell{display:grid;place-content:center;min-height:100dvh;padding:30px;background:var(--bg)}
.app{position:relative;width:min(480px,100vw);height:min(820px,calc(100dvh - 60px));display:grid;grid-template-rows:56px 180px minmax(0,1fr) auto 28px;overflow:hidden;background:#fff;border:1px solid #dfe6ef;border-radius:26px;box-shadow:0 20px 80px #243b5e0c;isolation:isolate}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #edf1f6;background:#fff;gap:12px}
.brand{font-size:17px;letter-spacing:.12em;font-weight:700}
.conexao{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.06em;color:#8c99ad}
.conexao .led{width:6px;height:6px;border-radius:50%;background:#c3cede}.conexao .led.ok{background:var(--green)}.conexao .led.vivo{background:var(--blue)}.conexao .led.erro{background:#e0566b}

.avatar-panel{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:flex-start;min-height:0;padding:3px 12px 8px;background:#fff;border-bottom:1px solid #e5ebf3;overflow:hidden;isolation:isolate}
.avatar-wrap{position:relative;width:138px;height:138px;flex:0 0 138px;--level:0;--jaw:0}
.avatar-wrap svg{display:block;width:100%;height:100%;overflow:visible}
.forehead{position:absolute;width:48px;height:48px;left:calc(50% - 24px);top:5px;border:0;padding:0;border-radius:16px;background:transparent;z-index:3}
.forehead:disabled{cursor:default}
.forehead:hover:enabled{box-shadow:0 0 24px #75a1ff33}.forehead:focus-visible{outline:2px solid #b7d3ff;outline-offset:1px}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.avatar-wrap .m-surface{transition:fill .2s,stroke .2s}
.avatar-wrap[data-mode="active"] .m-surface{fill:#079c71;stroke:#8cffe0}
.avatar-wrap[data-mode="active"] .forehead:hover{box-shadow:0 0 24px #39dfa133}
.avatar-wrap .robot-body{transform-origin:150px 275px;animation:breathe 6s ease-in-out infinite}
.robot-eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.8s infinite}
.pupil{transition:transform .3s}.avatar-wrap[data-state="thinking"] .pupil{transform:translate(2px,-3px)}
.mouth-open{transform-box:fill-box;transform-origin:center;opacity:0}
.avatar-wrap[data-state="speaking"] .mouth-open{opacity:1}
.avatar-copy{text-align:center}
.avatar-status{font-size:12px;line-height:16px;margin:-2px 0 0;font-weight:500;letter-spacing:.01em}
.avatar-hint{margin:2px 0 0;color:var(--muted);font-size:10px;line-height:14px}
.status-led{display:inline-block;width:5px;height:5px;margin-right:5px;background:#7ea9ff;border-radius:50%;vertical-align:2px}
.app[data-active="true"] .status-led{background:var(--green)}
.avatar-wrap[data-mode="active"] .m-energy{opacity:1;stroke-dasharray:48 206;animation:energy-travel 3s linear infinite;filter:drop-shadow(0 0 4px #39ffb5)}
.avatar-wrap[data-mode="active"] .m-letter{filter:drop-shadow(0 0 3px #7bffd3)}
.avatar-wrap[data-mode="active"] .m-surface{filter:drop-shadow(0 0 5px #35efad99);animation:neon-morph 3.2s ease-in-out infinite}
.avatar-wrap[data-mode="active"][data-state="listening"] .m-energy{animation-duration:2.2s}

/* atuação por estado: atenção ao ouvir; gestos de fala seguem a energia do áudio REAL (--level) */
.robot-head{transform-origin:150px 210px;animation:attentive-idle 17s ease-in-out infinite}
.robot-hand{transform:rotate(27deg);transform-origin:204px 226px;transition:transform .7s ease-in-out}
.robot-hand-left{transform-origin:103px 225px;transition:transform .5s}
.eyebrow{transform-origin:center;transition:transform .5s}
.avatar-wrap[data-state="listening"] .robot-head{animation:attentive-listen 5.5s ease-in-out infinite}
.avatar-wrap[data-state="listening"] .eyebrow{transform:translateY(-3px)}
.avatar-wrap[data-state="listening"] .robot-hand{animation:welcome-wave 1.8s ease-in-out 1;transform:rotate(24deg)}
.avatar-wrap[data-state="thinking"] .robot-head{animation:attentive-think 4s ease-in-out infinite}
.avatar-wrap[data-state="thinking"] .eyebrow-right{transform:translateY(-5px)}
.avatar-wrap[data-state="thinking"] .robot-hand{transform:rotate(-14deg)}
.avatar-wrap[data-state="speaking"] .robot-head{animation:speech-nod 3.6s ease-in-out infinite}
.avatar-wrap[data-state="speaking"] .robot-hand{transition:transform .12s linear;transform:rotate(calc(8deg - var(--level) * 19deg))}
.avatar-wrap[data-state="speaking"] .robot-hand-left{transition:transform .15s linear;transform:rotate(calc(var(--level) * 11deg))}
.avatar-wrap[data-state="speaking"] .eyebrow-left{transform:translateY(calc(var(--level) * -3px))}
.avatar-wrap[data-state="speaking"] .mouth-open{transform:scale(calc(.78 + var(--jaw)*.25),calc(.06 + var(--jaw)*1.25))}
.avatar-wrap[data-state="speaking"] .mouth-smile{opacity:calc(1 - min(1,var(--jaw)*16))}

.conversation{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden;position:relative;background:#fff}
.chat{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-height:0;padding:20px 16px;display:flex;flex-direction:column;gap:17px;scrollbar-width:thin;scrollbar-color:#cbd7e8 transparent}
.bolha{flex:0 0 auto;align-self:flex-start;max-width:92%;background:#f3f6fa;border:1px solid #e5ebf3;border-radius:3px 15px 15px 15px;padding:12px 14px;color:#27384e;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;animation:arrive .22s ease-out}
.bolha.eu{align-self:flex-end;max-width:86%;background:#e8f0ff;border-color:#dce8fe;border-radius:15px 3px 15px 15px;color:#25446f}
.bolha.cortada:after{content:" · " attr(data-motivo);color:#8da8cf;font-size:11px}
.bolha.aviso-bolha{color:#9a3346;background:#fff5f6;border-color:#f3d6db}
.draft{flex:0 0 auto;align-self:flex-end;max-width:86%;font-size:13px;line-height:1.5;color:#496eaa;border:1px dashed #9db9e7;padding:10px 12px;border-radius:12px}
.draft[hidden]{display:none}
.new-messages{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;padding:9px 14px;border:1px solid #c1d4f3;border-radius:30px;background:#eef4ff;color:#305b9a;font-size:11px;min-height:44px;box-shadow:0 2px 18px #2b47751a}
.new-messages[hidden]{display:none}
.sem-par{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:6px;padding:24px;background:#fffffff2;text-align:center}
.sem-par[hidden]{display:none}.sem-par h2{margin:0;font-size:17px}.sem-par p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.composer{min-width:0}
.input-row{display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:center}
.composer textarea{display:block;width:100%;min-width:0;resize:none;overflow:auto}
.app-footer{display:flex;align-items:center;justify-content:center;gap:10px;color:#8695aa;font-size:9px;letter-spacing:.04em;background:#fff;padding:0 8px}
.app-footer b{font-weight:500;color:#70829e}
.toast{position:absolute;z-index:9;bottom:110px;left:14px;right:14px;padding:12px;border:1px solid #cbd9ed;border-radius:12px;background:#eef4fe;color:#314d75;font-size:12px;line-height:1.45;box-shadow:0 4px 20px #334b6e1a}
.toast[hidden]{display:none}

.view-compact .app{grid-template-rows:48px 106px minmax(0,1fr) auto 22px}
.view-compact .avatar-wrap{width:98px;height:98px;flex-basis:98px}
.view-compact .avatar-panel{flex-direction:row;justify-content:center;gap:14px;padding:3px 18px}
.view-compact .avatar-copy{max-width:180px;text-align:left}
.view-compact .forehead{top:0}

@keyframes neon-morph{0%,100%{fill:#07875e;stroke:#67efbc}50%{fill:#0da78b;stroke:#c0ffe3}}
@keyframes energy-travel{to{stroke-dashoffset:-254}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@keyframes arrive{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes attentive-idle{0%,25%,40%,100%{transform:rotate(0)}29%,34%{transform:rotate(-2deg)}65%,75%{transform:rotate(1.5deg)}}
@keyframes attentive-listen{0%,100%{transform:rotate(-4deg)}20%,30%{transform:rotate(-4deg) translateY(2px)}60%{transform:rotate(2deg)}}
@keyframes attentive-think{0%,100%{transform:rotate(5deg)}50%{transform:rotate(4deg) translateY(-2px)}}
@keyframes speech-nod{0%,100%{transform:rotate(0)}17%{transform:rotate(-2.5deg) translateY(1px)}35%{transform:rotate(1deg) translateY(-1px)}60%{transform:rotate(2.5deg)}80%{transform:rotate(-1deg) translateY(1px)}}
@keyframes welcome-wave{0%,100%{transform:rotate(24deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-12deg)}75%{transform:rotate(6deg)}}

/* celular (e telas baixas): o app ocupa a área útil inteira, com as margens seguras do iPhone */
@media(max-width:760px),(max-height:620px){
  .shell{display:block;padding:0;height:var(--app-height);min-height:0;background:#fff;position:absolute;inset:var(--viewport-top) 0 auto;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .app{width:100%;height:100%;max-width:540px;margin:auto;border:0;border-radius:0;box-shadow:none;grid-template-rows:calc(56px + env(safe-area-inset-top,0px)) 180px minmax(0,1fr) auto calc(28px + env(safe-area-inset-bottom,0px))}
  .app-header{padding-top:env(safe-area-inset-top,0px)}.app-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
  .view-compact .app{grid-template-rows:calc(48px + env(safe-area-inset-top,0px)) 106px minmax(0,1fr) auto calc(22px + env(safe-area-inset-bottom,0px))}
  .bolha{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .robot-head,.robot-hand,.robot-hand-left,.eyebrow,.pupil{transform:none!important}
  .avatar-wrap[data-state="speaking"] .mouth-open{transform:scale(.9,.7)}.avatar-wrap[data-state="speaking"] .mouth-smile{opacity:0}
}