/* ========== VARS (tema) ========== */
:root{
  --vo-purple:#5B2EA6;
  --ink:#1b53e3;
  --paper:#ffffff;
  --soft:#F6F7FB;
  --line:#E6E8F0;
  --text:#0F1630;
  --muted:#6B7280;
  --shadow:0 10px 28px rgba(10,30,61,.08);
}

/* ========== RESET/BASE ========== */
*{box-sizing:border-box}
html{font-size:16px}
@media (min-width:768px){ html{font-size:17px} }
@media (min-width:1024px){ html{font-size:18px} }

html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ========== TOPBAR ========== */
.vo-topbar{
  background:var(--vo-purple);
  color:#fff;
  padding:12px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.vo-topbar-inner{
  max-width:1120px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center;
}
.vo-logo{height:28px; width:auto}
@media (min-width:768px){ .vo-logo{height:32px} }

/* ========== LAYOUT ========== */
.vo-main{
  max-width:960px;
  margin:20px auto 28px;
  padding:0 16px;
}
@media (min-width:768px){
  .vo-main{ margin:28px auto 40px; }
}

/* ========== HERO ========== */
.vo-hero{ text-align:center; margin:8px 0 16px; }
.vo-hero-icon{ width:48px; height:auto; margin:0 auto 10px; display:block; }
.vo-hero-title{
  margin:0 0 4px;
  font-size:clamp(1.25rem, 2.5vw, 1.75rem); /* 20–28px */
  color:#04324A;
  line-height:1.25;
}
.vo-hero-sub{ margin:0; color:var(--muted); font-size:.95rem }

/* ========== CHAT CARD ========== */
.vo-card{
  background:#fff;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.vo-messages{
  /* altura responsiva: cresce com viewport, mas não passa do razoável */
  min-height:38vh; max-height:58vh;
  padding:14px; overflow:auto; background:var(--soft);
  border-bottom:1px solid var(--line);
}
@media (min-width:640px){
  .vo-messages{ padding:18px; min-height:42vh; max-height:60vh; }
}
@media (min-width:1024px){
  .vo-messages{ padding:22px; min-height:46vh; max-height:64vh; }
}

.msg{display:flex; margin:8px 0}
.msg.me{justify-content:flex-end}
.bubble{
  background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; max-width:70ch; line-height:1.45;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  font-size:.95rem;
}
.msg.me .bubble{ background:#EAF0FF; border-color:#DCE6FF }

/* ========== COMPOSER ========== */
.composer{
  display:flex; gap:8px; padding:10px; background:#fff;
}
.composer input{
  flex:1; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; font-size:1rem; outline:none; background:#fff;
}
.composer input:focus{
  border-color:#cdd7ff; box-shadow:0 0 0 3px rgba(27,83,227,.12)
}
.composer button{
  padding:0 16px; border:0; border-radius:12px; background:var(--ink);
  color:#fff; font-weight:600; cursor:pointer; min-width:84px;
  font-size:.95rem; height:44px;
}
.composer button:disabled{opacity:.6; cursor:not-allowed}
@media (min-width:640px){
  .composer{ gap:10px; padding:12px 14px; }
  .composer button{ min-width:96px; height:46px; }
}

/* ========== FOOTER ========== */
.vo-footer{
  text-align:center; color:#9aa4b2; font-size:.8rem; padding:18px 12px 26px;
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;}
}