:root { color-scheme: dark; --bg:#061018; --panel:#0a1823; --line:rgba(146,216,234,.13); --text:#e9f7fb; --muted:#79949f; --cyan:#58ddf4; --cyan-dim:rgba(88,221,244,.12); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 68% 10%,#123645 0,transparent 28rem),var(--bg); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:245px minmax(0,1fr); min-height:100vh; }
.sidebar { display:flex; flex-direction:column; padding:28px 16px 22px; background:rgba(3,13,20,.58); border-right:1px solid var(--line); }
.brand { display:flex; gap:11px; align-items:center; color:inherit; text-decoration:none; padding:0 9px 30px; }
.brand-mark,.avatar { display:grid; place-items:center; border:1px solid var(--cyan); background:var(--cyan-dim); color:var(--cyan); box-shadow:0 0 23px rgba(88,221,244,.16); }
.brand-mark { width:33px; height:33px; border-radius:10px; font-weight:800; }
.brand strong,.brand small { display:block; }.brand strong { letter-spacing:.13em; font-size:13px; }.brand small { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.new-chat,.history-item { width:100%; display:flex; align-items:center; border:1px solid var(--line); color:#cfe4e9; background:transparent; border-radius:9px; text-align:left; }
.new-chat { gap:10px; padding:10px 12px; }.new-chat span { color:var(--cyan); font-size:20px; line-height:15px; }.new-chat:hover { border-color:var(--cyan); }
nav { padding:31px 0; } nav p { color:#66808a; font-size:10px; letter-spacing:.15em; padding:0 10px; } .history-item { justify-content:space-between; padding:10px; border-color:transparent; color:#9db4bb; font-size:13px; }.history-item.active { background:rgba(110,193,212,.08); color:#e8f6fa; }
.system-state { margin-top:auto; display:flex; gap:9px; align-items:center; color:#78919b; font-size:11px; padding:10px; }.system-state i { width:7px; height:7px; border-radius:50%; background:#65eba7; box-shadow:0 0 10px #65eba7; }
.sidebar-links { display:grid; gap:4px; padding:0 9px 12px; }.sidebar-links a,.back-link { color:#91b1bb; text-decoration:none; font-size:12px; }.sidebar-links a:hover,.back-link:hover { color:var(--cyan); }
.workspace { display:flex; flex-direction:column; width:min(900px,100%); min-height:100vh; margin:0 auto; padding:42px clamp(20px,5vw,60px) 18px; }
.topbar { display:flex; justify-content:space-between; align-items:start; padding-bottom:25px; border-bottom:1px solid var(--line); }.eyebrow { margin:0 0 5px; color:var(--cyan); font-size:10px; letter-spacing:.17em; }.topbar h1 { margin:0; font-size:23px; font-weight:550; letter-spacing:-.03em; }.topbar time { color:#95b3bc; font-size:12px; padding-top:7px; }
.chat { flex:1; padding:38px 0 18px; overflow:auto; }.message { display:flex; gap:12px; margin:0 0 26px; max-width:760px; }.avatar { flex:0 0 31px; height:31px; border-radius:50%; font-weight:800; font-size:12px; }.bubble { padding:3px 0; }.message-name { display:block; color:var(--cyan); font-size:11px; letter-spacing:.13em; margin-bottom:5px; }.bubble p { margin:0; white-space:pre-wrap; }.message.user { margin-left:auto; flex-direction:row-reverse; }.message.user .avatar { border-color:#607dff; color:#94a9ff; background:#111b42; box-shadow:none; }.message.user .message-name { color:#aebcff; text-align:right; }.message.user .bubble { max-width:72%; background:#0d2431; border:1px solid var(--line); border-radius:12px; padding:10px 13px; }.message.user .message-name { display:none; }
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 13px; }.quick-actions button { color:#a9c5cd; background:rgba(12,36,47,.7); border:1px solid var(--line); padding:8px 11px; border-radius:999px; font-size:12px; }.quick-actions button:hover { color:var(--cyan); border-color:rgba(88,221,244,.55); }
.composer { display:flex; align-items:end; gap:10px; padding:8px 8px 8px 15px; border:1px solid rgba(101,212,235,.31); border-radius:14px; background:#091b26; box-shadow:0 0 30px rgba(35,156,183,.08); }.composer:focus-within { border-color:var(--cyan); }.composer textarea { flex:1; max-height:150px; resize:none; border:0; outline:0; background:transparent; color:var(--text); padding:9px 0; }.composer textarea::placeholder { color:#607b86; }.send { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:10px; background:var(--cyan); color:#03202a; font-size:21px; font-weight:700; transition:transform .15s; }.send:hover { transform:scale(1.05); }.send:disabled { opacity:.45; cursor:not-allowed; transform:none; }.disclaimer { color:#607984; font-size:10px; text-align:center; margin:11px 0 0; }.typing { color:#80a0aa; font-size:13px; }.typing span { animation:blink 1.2s infinite; }.typing span:nth-child(2) { animation-delay:.2s; }.typing span:nth-child(3) { animation-delay:.4s; } @keyframes blink { 50% { opacity:.2; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 20%,#13394a,transparent 31rem),var(--bg); }.login-card { width:min(440px,100%); padding:34px; border:1px solid var(--line); border-radius:18px; background:rgba(7,24,35,.9); box-shadow:0 25px 70px rgba(0,0,0,.35); }.login-card > .brand-mark { margin-bottom:22px; }.login-card h1 { margin:4px 0 8px; font-size:25px; }.login-card > p:not(.eyebrow) { color:#94adb5; margin:0 0 24px; }.login-card label { display:grid; gap:7px; color:#c4d9df; font-size:12px; margin:14px 0; }.login-card input { width:100%; color:var(--text); background:#071620; border:1px solid var(--line); outline:0; padding:11px; border-radius:9px; }.login-card input:focus { border-color:var(--cyan); }.primary-button { width:100%; border:0; border-radius:9px; padding:12px; margin-top:10px; background:var(--cyan); color:#03202a; font-weight:800; }.form-error,.form-success { padding:10px; border-radius:8px; font-size:12px; margin-bottom:14px; }.form-error { background:rgba(233,99,99,.12); color:#ffb5b5; border:1px solid rgba(233,99,99,.25); }.form-success { background:rgba(101,235,167,.1); color:#a8f3cb; border:1px solid rgba(101,235,167,.25); }.back-link { display:block; margin-bottom:25px; }
@media (max-width:700px) { .app-shell { display:block; }.sidebar { display:none; }.workspace { padding:27px 18px 15px; }.topbar h1 { font-size:21px; }.chat { padding-top:30px; }.message.user .bubble { max-width:84%; } }

/* J.A.R.V.I.S. visual system */
body { overflow-x:hidden; background:#02070c; }
body::before,body::after { content:""; position:fixed; pointer-events:none; z-index:-1; inset:0; }
body::before { opacity:.32; background-image:linear-gradient(rgba(83,226,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(83,226,255,.055) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 72%); transform:perspective(600px) rotateX(58deg) scale(1.7) translateY(23%); transform-origin:center bottom; animation:gridDrift 16s linear infinite; }
body::after { background:radial-gradient(circle at 74% 3%,rgba(42,206,243,.22),transparent 24rem),radial-gradient(circle at 34% 98%,rgba(76,73,255,.13),transparent 32rem); animation:atmosphere 8s ease-in-out infinite alternate; }
.sidebar { position:relative; background:linear-gradient(180deg,rgba(3,17,27,.9),rgba(2,9,15,.82)); backdrop-filter:blur(18px); box-shadow:16px 0 50px rgba(0,0,0,.22); }
.sidebar::after { content:""; position:absolute; right:-1px; top:0; width:1px; height:100%; background:linear-gradient(transparent,var(--cyan),transparent); box-shadow:0 0 13px var(--cyan); opacity:.5; }
.brand-mark { position:relative; overflow:hidden; animation:corePulse 3.2s ease-in-out infinite; }.brand-mark::after { content:""; position:absolute; width:150%; height:2px; background:#e9feff; box-shadow:0 0 12px #e9feff; transform:rotate(-45deg) translateY(-20px); animation:scan 3.6s ease-in-out infinite; }
.new-chat { position:relative; overflow:hidden; background:linear-gradient(100deg,rgba(35,177,206,.14),rgba(19,61,80,.03)); }.new-chat::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(177,248,255,.25),transparent 80%); transform:translateX(-110%); transition:transform .55s; }.new-chat:hover::before { transform:translateX(110%); }
.workspace { position:relative; }.workspace::before { content:""; position:absolute; width:280px; height:280px; top:90px; right:-125px; border:1px solid rgba(88,221,244,.13); border-radius:50%; box-shadow:0 0 0 22px rgba(88,221,244,.025),0 0 0 60px rgba(88,221,244,.012); pointer-events:none; animation:orbitalSpin 24s linear infinite; }
.workspace::after { content:"JARVIS // NEURAL LINK ACTIVE"; position:absolute; right:13px; top:118px; color:rgba(143,225,239,.3); font-size:8px; letter-spacing:.22em; writing-mode:vertical-rl; pointer-events:none; }
.topbar { position:relative; }.topbar::after { content:""; position:absolute; bottom:-1px; left:0; width:115px; height:1px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:lineBreathe 2.6s ease-in-out infinite; }.eyebrow { text-shadow:0 0 12px rgba(88,221,244,.9); }
.chat { scrollbar-color:rgba(88,221,244,.45) transparent; scrollbar-width:thin; }.message { animation:messageEnter .35s cubic-bezier(.2,.8,.2,1) both; }.assistant .avatar { animation:avatarFloat 4s ease-in-out infinite,corePulse 3s ease-in-out infinite; }.assistant .avatar::before { content:""; position:absolute; width:45px; height:45px; border:1px solid rgba(88,221,244,.23); border-radius:50%; animation:ring 2.8s linear infinite; }.avatar { position:relative; }.bubble { text-shadow:0 1px 12px rgba(0,0,0,.25); }.message.assistant .bubble { border-left:1px solid rgba(88,221,244,.19); padding-left:12px; }
.composer { position:relative; isolation:isolate; background:linear-gradient(110deg,rgba(7,26,37,.97),rgba(8,38,51,.76)); box-shadow:0 0 0 1px rgba(88,221,244,.04),0 15px 50px rgba(0,0,0,.25),0 0 35px rgba(30,185,220,.08); }.composer::before { content:""; position:absolute; z-index:-1; inset:-1px; border-radius:15px; background:conic-gradient(from var(--spin),transparent 12%,var(--cyan),transparent 27%); opacity:0; transition:opacity .3s; animation:borderSpin 3s linear infinite; }.composer:focus-within::before { opacity:.65; }.send { box-shadow:0 0 19px rgba(88,221,244,.47); }.send:hover { box-shadow:0 0 30px rgba(88,221,244,.84); }
.quick-actions button { position:relative; overflow:hidden; transition:transform .2s,border-color .2s,background .2s; }.quick-actions button:hover { transform:translateY(-2px); background:rgba(20,70,87,.7); }
@property --spin { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes gridDrift { to { background-position:0 44px,44px 0; } } @keyframes atmosphere { to { opacity:.72; transform:scale(1.08); } } @keyframes corePulse { 50% { box-shadow:0 0 32px rgba(88,221,244,.55),inset 0 0 11px rgba(88,221,244,.17); } } @keyframes scan { 55%,100% { transform:rotate(-45deg) translateY(40px); } } @keyframes orbitalSpin { to { transform:rotate(360deg); } } @keyframes lineBreathe { 50% { width:220px; opacity:.58; } } @keyframes messageEnter { from { opacity:0; transform:translateY(11px); } to { opacity:1; transform:none; } } @keyframes avatarFloat { 50% { transform:translateY(-3px); } } @keyframes ring { to { transform:scale(1.5); opacity:0; } } @keyframes borderSpin { to { --spin:360deg; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }

.voice-control { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(88,221,244,.22); border-radius:9px; color:#8ddfeb; background:rgba(25,96,116,.16); font-size:17px; transition:.2s; }.voice-control:hover,.voice-control.active { color:#04151c; background:var(--cyan); box-shadow:0 0 18px rgba(88,221,244,.58); }.voice-control.listening { color:#fff; background:#e75e74; border-color:#ff9eae; animation:listenPulse .95s infinite; }.voice-control:disabled { opacity:.35; cursor:not-allowed; } @keyframes listenPulse { 50% { box-shadow:0 0 0 8px rgba(231,94,116,0); } }
.composer textarea,.composer .send { display:none; }.composer { justify-content:center; min-height:12px; padding:0; border-color:transparent; background:transparent; box-shadow:none; }.composer::before { display:none; }.voice-control { display:none; }.activate-jarvis { align-self:center; margin:10px auto 17px; min-width:240px; padding:15px 22px; color:#dffcff; border:1px solid rgba(88,221,244,.65); border-radius:999px; background:rgba(12,75,94,.34); letter-spacing:.16em; font-size:11px; box-shadow:0 0 24px rgba(88,221,244,.21),inset 0 0 18px rgba(88,221,244,.08); animation:corePulse 2.5s ease-in-out infinite; }.activate-jarvis.ready { color:#03151c; background:var(--cyan); }

html,body { height:100%; overflow:hidden; }.app-shell { height:100dvh; min-height:0; overflow:hidden; }.workspace { height:100dvh; min-height:0; overflow:hidden; padding-bottom:10px; }.chat { min-height:0; overscroll-behavior:contain; }.quick-actions { flex:0 0 auto; }.activate-jarvis { flex:0 0 auto; margin-top:4px; margin-bottom:7px; }.disclaimer { flex:0 0 auto; margin:6px 0 0; } @media (max-width:700px) { .workspace { height:100dvh; padding-top:20px; padding-bottom:8px; }.topbar { padding-bottom:15px; }.chat { padding-top:17px; }.quick-actions { margin:5px 0 7px; }.quick-actions button { padding:6px 9px; }.activate-jarvis { min-width:220px; padding:13px 18px; } }

.chat { padding:25px 16px 14px; scrollbar-width:none; }.chat::-webkit-scrollbar { width:0; height:0; }.message { max-width:850px; }.quick-actions { padding-left:16px; }.topbar { flex:0 0 auto; }.workspace::after { display:none; } @media (min-width:701px) { .workspace { width:min(980px,100%); padding-top:28px; } }