:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#080b14;color:#f1f5ff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#192548 0%,#080b14 60%)}
.app{width:min(760px,100%);min-height:100vh;margin:auto;padding:28px 22px;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:13px;border-bottom:1px solid #ffffff14;padding-bottom:22px}
.logo{height:44px;width:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#8b7cff,#40d9d0);color:#07101d;font-size:24px;font-weight:800}
h1{font-size:17px;letter-spacing:3px;margin:0 0 4px}
header p,.note{font-size:12px;color:#8f9bb7;margin:0}
.status{margin-left:auto;border:1px solid #394663;border-radius:20px;padding:6px 10px;font-size:10px;letter-spacing:1px;color:#aab8dc}
.welcome{padding:60px 5px 25px}
.eyebrow{font-size:10px;letter-spacing:2px;color:#8c91ff}
h2{font-size:clamp(28px,6vw,42px);margin:15px 0 10px;letter-spacing:-1px}
.welcome p{color:#aab4cb;line-height:1.7;max-width:460px}
.chat{flex:1;min-height:180px;display:flex;flex-direction:column;gap:12px;padding:12px 0 25px}
.message{max-width:90%;padding:14px 16px;border-radius:17px;line-height:1.6;font-size:14px;white-space:pre-wrap}
.shyama{align-self:flex-start;background:#151c30;border:1px solid #29334e}
.user{align-self:flex-end;background:#38336b;border:1px solid #6258a6}
form{display:flex;gap:10px;align-items:center;padding:10px;background:#111727;border:1px solid #303953;border-radius:19px}
textarea{flex:1;resize:none;max-height:150px;border:0;outline:0;background:transparent;color:#fff;font:inherit;padding:9px}
button{height:42px;width:42px;border:0;border-radius:13px;background:#aaa0ff;color:#101124;font-size:25px;cursor:pointer}
button:hover{background:#c3bcff}
.note{text-align:center;padding:14px 0}
@media(min-height:800px){.chat{min-height:260px}}