:root {
  --brand:#2196f3;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#f7f7f8;
  --card:#ffffff;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand); color:#fff;
  padding:10px 0;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 16px; max-width:1200px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{font-size:20px}
.nav a{color:#fff; text-decoration:none; margin-left:14px; font-weight:600}
.nav a:hover{opacity:.9}
.site-main{
  padding:16px 0 24px;
  background:var(--bg);
}
.container{max-width:1200px; margin:0 auto; padding:0 16px}
.intro h1{margin:.2rem 0 .4rem}
.intro p{margin:0; color:var(--muted)}
.chatwrap{
  margin-top:16px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  overflow:hidden;
}
.chat-viewport{
  height: min(80vh, 760px);
  height: 70svh;
  min-height: 520px;
  width: 100%;
  display:block;
}
.faq, .contato{
  margin-top:20px;
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
details{padding:10px 0}
summary{cursor:pointer; font-weight:600}
summary::-webkit-details-marker{display:none}
details p{margin:.5rem 0 0; color:var(--muted)}
.site-footer{
  padding:16px 0; background:#eaf0f6; color:#334155;
}
.site-footer .container{display:flex; align-items:center; justify-content:center}
@media (min-width: 768px){
  .chat-viewport{height: min(75vh, 800px)}
}