/* backend/static/avatar/style.css */

/* ---------- Tokens ---------- */
:root{
  --bg:#0b0e13;
  --panel:#0f141b;
  --ink:#e6e8eb;
  --muted:#9aa3ad;
  --brand:#ff2e88;
  --card:#072428;
  --line:#26323d;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:#0c0f14;
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- Chat (básico) ---------- */
#chatContainer{
  max-width:980px;
  margin:24px auto;
  padding:20px;
  background:#082325;
  border-radius:12px;
  border:1px solid #14323a;
}
#messages{ display:flex; flex-direction:column; gap:12px; min-height:120px }
.userMessage,.botMessage{
  background:#e5e5ea; color:#111; padding:10px 14px; max-width:74%; border-radius:14px
}
.userMessage{ align-self:flex-end; background:#1677ff; color:#fff }
.botMessage{ align-self:flex-start; background:#e5e5ea; color:#000 }
#inputContainer{ display:flex; gap:8px; margin-top:12px }
#userInput{
  flex:1; min-height:44px; padding:10px; border-radius:10px;
  border:1px solid #2a313a; background:#0d1219; color:#e6e8eb
}
button{ background:var(--brand); color:#fff; border:0; border-radius:10px; padding:10px 14px; cursor:pointer }
button:hover{ opacity:.9 }

/* ---------- Avatar (PAINEL ÚNICO) ---------- */

/* Botão flutuante (opcional) */
#openAvatarButton{
  position:fixed;
  right:18px;
  top:390px;
  background:var(--brand);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  z-index:10000;
}

/* Painel do avatar */
#avatarPanel{
  /* o JS liga/desliga com style.display; aqui só definimos a aparência */
  display:none;
  position:fixed;
  right:18px;
  bottom:18px;
  width:460px;
  height:380px;                /* altura explícita pro canvas não zerar */
  min-height:320px;
  background:#0c1116;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
  z-index:9999;
}

/* Cabeçalho fixo de 48px (mantém cálculo do canvas estável) */
#avatarHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:48px;                 /* altura fixa → canvas usa calc(100% - 48px) */
  padding:0 12px;
  background:#0f1620;
  color:var(--ink);
  border-bottom:1px solid #1e2832;
  font-weight:600;
}
#avatarHeader .btn-small{ padding:6px 10px; font-size:.9rem }

/* Corpo do painel (sem padding pra canvas preencher 100%) */
#avatarBody{
  width:100%;
  height:calc(100% - 48px);    /* sobra do header */
}

/* Canvas – ocupa todo o corpo */
#avatarCanvas{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;            /* segurança extra */
  background:#000;
  border:0;
  outline:0;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 600px){
  #avatarPanel{
    right:10px; left:10px;
    width:auto;
    height:50vh;
    min-height:300px;
  }
  #avatarBody{ height:calc(50vh - 48px); }
}