:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e8ecf3; background:#080b12; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0%,#1b2550 0,transparent 35%),radial-gradient(circle at 100% 100%,#17352d 0,transparent 30%),#080b12; }
button,textarea { font:inherit; }
.app-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.chat-card { width:min(980px,100%); height:min(860px,calc(100vh - 48px)); display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.1); border-radius:24px; overflow:hidden; background:rgba(12,16,26,.86); backdrop-filter:blur(18px); box-shadow:0 24px 80px rgba(0,0,0,.38); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.eyebrow { color:#8fa7ff; font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:3px 0 1px; font-size:24px; }
.topbar p { margin:0; color:#8e98aa; font-size:13px; }
.ghost-btn { color:#dfe5ef; background:#151b28; border:1px solid #283247; border-radius:12px; padding:10px 13px; cursor:pointer; }
.messages { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:18px; scroll-behavior:smooth; }
.message { display:flex; align-items:flex-start; gap:10px; max-width:82%; }
.message.user { align-self:flex-end; flex-direction:row-reverse; }
.avatar { flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#202a42; color:#aebeff; font-size:11px; font-weight:800; }
.user .avatar { background:#1d4538; color:#9ff1cd; }
.bubble { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; padding:13px 15px; border-radius:6px 18px 18px 18px; background:#151b28; border:1px solid rgba(255,255,255,.06); }
.user .bubble { background:#244f42; border-color:#2d6655; border-radius:18px 6px 18px 18px; }
.status { padding:0 24px 10px; color:#94a0b4; font-size:13px; }
.composer { margin:0 20px; padding:10px; display:flex; align-items:flex-end; gap:10px; border:1px solid #2a3449; border-radius:18px; background:#0d121d; }
textarea { flex:1; min-height:44px; max-height:180px; resize:none; border:0; outline:0; color:#eef2f8; background:transparent; padding:11px 10px; line-height:1.45; }
textarea::placeholder { color:#667085; }
#sendBtn { border:0; border-radius:12px; padding:12px 17px; font-weight:750; color:#07110e; background:#7ee2b8; cursor:pointer; }
#sendBtn:disabled { opacity:.55; cursor:not-allowed; }
.hint { padding:8px 24px 16px; text-align:center; color:#5f697a; font-size:11px; }
@media (max-width:650px) { .app-shell{padding:0}.chat-card{height:100vh;border-radius:0;border:0}.topbar{padding:16px}.messages{padding:18px 14px}.message{max-width:92%}.composer{margin:0 12px}.ghost-btn{font-size:12px;padding:9px}.topbar p{display:none} }