:root{
  --bg:#ffffff;
  --text:#111418;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bubble-user:#fae7e6;
  --shadow:0 4px 14px rgba(0,0,0,.08);
  --send:#fae7e6;
  --send-hover:#ffc7c9;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app{min-height:100dvh; display:flex; flex-direction:column; align-items:center;}
.landing-title{
  margin: 18vh 16px 24px;
  text-align:center;
  font-weight:600;
  font-size: clamp(22px, 4vw, 32px);
  color:#1f2937;
}
.messages{
  width:100%;
  max-width:980px;
  flex:1 1 auto;
  overflow-y:auto;
  padding: 24px 20px 200px;
  display:none;
}
.msg{ display:flex; gap:12px; margin:18px auto; max-width:820px; width:100%; }
.msg.assistant{ justify-content:flex-start; }
.msg.user{ justify-content:flex-end; }
.assistant .bubble{
  background:transparent; border:none; box-shadow:none; padding:0;
  max-width: min(100%, 760px);
  line-height:1.65; font-size:16px; color:var(--text); white-space:pre-wrap;
}
.user .bubble{
  background:var(--bubble-user); border:none; box-shadow:none;
  padding:14px 16px; border-radius:16px; line-height:1.45; font-size:16px; white-space:pre-wrap;
}
.composer{
  position:fixed; left:0; right:0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  padding:0 16px; display:flex; justify-content:center;
}
.composer-field{
  width:min(980px, 96%);
  background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow: var(--shadow);
  display:flex; align-items:center; gap:10px; padding:12px 12px 12px 18px;
}
.composer-input{
  flex:1 1 auto; border:none; outline:none; background:transparent;
  font-size:16px; color:var(--text);
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.composer-input::placeholder{
  color:#9aa1ac; font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.icon-btn{
  border:none; background:#f3f4f6; color:#111; border-radius:999px;
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
}
.icon-btn.recording{ background:#fee2e2; color:#b91c1c; }
.send-btn{
  border:none; background:var(--send); color:#111; border-radius:999px;
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
}
.send-btn:disabled{ opacity:.6; cursor:not-allowed; }
.disclaimer{
  position:fixed; left:0; right:0; bottom:16px;
  padding:8px 24px calc(8px + env(safe-area-inset-bottom));
  text-align:center; color:var(--muted); font-size:12px; display:none;
}

/* Landing-only overrides */
body:not(.started) .composer{ position:static; margin-top: 6vh; }
/* Mobile/tablet default */
body:not(.started) .composer-field{ width:96%; }
/* Desktop 50% viewport width */
@media (min-width: 1024px){
  body:not(.started) .composer-field{ width:50vw; }
}
/* Perfect circles in landing */
body:not(.started) .icon-btn,
body:not(.started) .send-btn{ width:44px; height:44px; }
body:not(.started) .send-btn:hover{ background: var(--send-hover); }

body.started .messages{ display:block; }
body.started .disclaimer{ display:block; }

.typing{display:inline-flex; gap:6px; align-items:center;}
.dot{ width:6px; height:6px; border-radius:50%; background:#9ca3af; opacity:.8; animation:bounce 1.2s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay:.15s; }
.dot:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,80%,100%{transform:translateY(0);opacity:.5;} 40%{transform:translateY(-6px); opacity:1;} }
.messages::-webkit-scrollbar{width:10px;}
.messages::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px;}
.messages::-webkit-scrollbar-track{background:transparent;}