/* Falamigo V4 — sala de conversa, detalhes do elenco e interação ao toque. */
.companion-card{flex:0 0 auto;min-width:0;overflow:hidden;border:1.5px solid var(--line);border-radius:30px;background:var(--card);box-shadow:0 4px 0 var(--line-soft);margin:4px 0 8px}
.stage.companion-stage{height:228px;min-height:228px;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:linear-gradient(160deg,var(--sky),var(--lavender) 54%,var(--peach));padding:0}
.stage.companion-stage::after,.stage.companion-stage.withscene::before{display:none}
.companion-stage .scene{opacity:.72}
.companion-stage #av{position:relative;display:block;margin:0;z-index:2}
.companion-stage .companion-touch{position:relative;z-index:2;display:grid;place-items:center;width:208px;height:222px;padding:3px 10px 0;border-radius:42% 42% 28% 28%;background:transparent;border:2px solid transparent;align-self:end;touch-action:manipulation}
.companion-touch:hover{background:color-mix(in srgb,var(--card) 25%,transparent)}
.companion-touch:focus-visible{outline:3px solid var(--deep);outline-offset:-3px;background:color-mix(in srgb,var(--card) 35%,transparent)}
.companion-touch:active{transform:translateY(2px)}
.companion-trait{display:inline-flex;align-items:center;border-radius:16px;padding:7px 12px;background:var(--lavender);color:var(--ink);border:1px solid var(--line-soft);font-size:.73rem;font-weight:800;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.companion-stage-trait{position:absolute;left:12px;top:12px;z-index:3;max-width:45%;background:var(--card)}
.companion-tap-hint{position:absolute;right:12px;bottom:12px;z-index:3;max-width:85px;padding:7px 9px;background:var(--card);border:1px solid var(--line-soft);border-radius:16px 16px 16px 4px;color:var(--ink-2);font-size:.68rem;font-weight:700;text-align:center;pointer-events:none}
.companion-caption{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px 6px;min-height:40px}
.companion-caption p{font-size:.78rem;line-height:1.4;color:var(--ink-2);text-align:center;margin:0;overflow-wrap:anywhere}
.companion-status-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--deep);box-shadow:0 0 0 4px var(--mint)}
.companion-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:3px 12px 10px}
.companion-tools .btn{min-height:44px;font-size:.73rem;padding:7px 12px;border-radius:18px;background:var(--card-2)}
.companion-profile{padding:15px;background:var(--card-2);border:1px solid var(--line-soft);border-radius:22px;margin-top:14px}
.companion-profile p{font-size:.88rem;color:var(--ink-2);margin:10px 0;line-height:1.55}
.companion-hobbies{display:flex;flex-wrap:wrap;gap:6px}
.companion-hobbies span{background:var(--card);border-radius:12px;border:1px solid var(--line-soft);padding:6px 9px;font-size:.73rem;color:var(--ink-2)}
#s-chat .sticky-line{margin-bottom:4px;flex:0 0 auto}
#s-chat #hints,#s-chat #scbar{flex-shrink:0}
#s-chat .chat{padding-left:2px;padding-right:2px;min-height:145px;overscroll-behavior:contain}
/* O compositor permanece acima das abas mesmo se o palco provocar rolagem.
   A coluna que contém o input precisa crescer: sem isso width:0 colapsa o campo. */
#s-chat .speakbar{gap:12px;padding:12px 0 8px;flex:0 0 auto;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 8px);z-index:20;background:var(--bg)}
#s-chat .speakbar>.grow{flex:1 1 0;min-width:0}
#s-chat .heard{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px}
#s-chat .heard.hide{display:none}
#s-chat .heard input{border-radius:14px;min-width:0;min-height:44px;flex:1 1 auto;width:0;font-size:1rem;padding:4px 0;line-height:1.5}
#s-chat #kbSend{flex:0 0 44px;width:44px;min-height:44px;background:var(--action);color:var(--action-ink);border:1px solid var(--action-edge);border-radius:16px}
#s-chat .bubble.them{border-radius:23px 23px 23px 8px}
#s-chat .bubble.me{border-radius:23px 23px 8px 23px}
@media(min-width:700px){.stage.companion-stage{height:250px;min-height:250px}.companion-stage .companion-touch{height:239px;width:220px}.companion-stage #av .avatar{width:204px;height:auto}.companion-stage-trait{top:20px;left:20px}.companion-tap-hint{right:24px;bottom:22px;max-width:120px}}
@media(max-height:740px){.stage.companion-stage{height:164px;min-height:164px}.companion-stage .companion-touch{height:164px;width:156px}.companion-stage #av .avatar{width:142px;height:auto}.companion-caption{padding-top:8px}.companion-tools{padding-bottom:6px}.companion-tools .btn{font-size:.7rem}#s-chat .chat{min-height:100px}}
/* Paisagem e navegadores que reduzem a área ao abrir o teclado: o elenco
   continua visível, os três controles cabem, e a conversa mantém rolagem. */
@media(max-height:560px){
 .stage.companion-stage{height:96px;min-height:96px}
 .companion-stage .companion-touch{height:94px;width:94px;padding:0 5px}
 .companion-stage #av .avatar{width:82px;height:auto}
 .companion-tap-hint{display:none}
 .companion-stage-trait{top:8px;left:8px;font-size:.7rem;max-width:35%;padding:5px 8px}
 .companion-caption{min-height:32px;padding:6px 10px 3px}
 .companion-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:4px;padding:3px 8px 7px}
 .companion-tools .btn{min-width:0;min-height:44px;padding:6px;gap:4px;font-size:.7rem}
 #s-chat .chat{min-height:96px}
 #s-chat .speakbar{padding:8px 0 5px;gap:8px}
 #s-chat .mic{width:52px;height:52px}
}
@media(max-width:360px){.companion-stage-trait{font-size:.65rem;max-width:38%;padding:6px 8px}.companion-tap-hint{max-width:72px;font-size:.63rem;right:8px}#s-chat .speakbar{gap:8px}#s-chat .mic{width:56px;height:56px}.companion-tools{gap:5px;padding-inline:7px}.companion-tools .btn{padding-inline:7px}.companion-caption{padding-inline:10px}}
@media(max-height:560px) and (max-width:360px){.companion-stage-trait{max-width:30%;padding:5px 6px}}
@media(prefers-reduced-motion:reduce){.companion-touch:active{transform:none}}
:root[data-motion="reduce"] .companion-touch:active{transform:none}
