:root { color-scheme: dark; --bg:#08111f; --surface:#0c1b2e; --surface-2:#102640; --line:#285477; --text:#eef6ff; --muted:#b6c5d8; --cyan:#74e0df; --blue:#38a8e8; --yellow:#ffd84d; --green:#9be870; --shadow:0 24px 70px rgba(0,0,0,.32); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 72% -15%, #123b5c 0, transparent 36%), radial-gradient(circle at 45% 82%, rgba(27,89,118,.18), transparent 34%), var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.38; background-image: radial-gradient(circle, rgba(116,224,223,.8) 0 1px, transparent 1.5px); background-size: 170px 140px; mask-image: linear-gradient(135deg, transparent 6%, black 30%, transparent 82%); }
button, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:5; padding:.6rem .9rem; background:var(--yellow); color:#08111f; font-weight:800; border-radius:8px; }
.skip-link:focus { top:1rem; }
.app-shell { display:grid; grid-template-columns: 284px minmax(0,1fr); height:100vh; min-height:560px; }
.sidebar { display:flex; flex-direction:column; gap:28px; padding:30px 20px 22px; border-right:1px solid rgba(116,224,223,.28); background:linear-gradient(180deg, rgba(5,20,38,.94), rgba(5,15,30,.9)); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(116,224,223,.5); border-radius:13px; background:#081b31; box-shadow:0 0 26px rgba(56,168,232,.22); }
.brand-mark img { width:42px; height:42px; max-width:100%; object-fit:cover; object-position:center; }
.brand-copy strong, .brand-copy span { display:block; }
.brand-copy strong { font-size:16px; letter-spacing:-.02em; }
.brand-copy span { color:var(--cyan); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.new-chat { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; border:1px solid #4ec5ef; border-radius:10px; background:linear-gradient(135deg, #20a8e7, #2478c7); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 10px 28px rgba(33,146,211,.2); }
.new-chat:hover, .send:hover { filter:brightness(1.1); transform:translateY(-1px); }
.new-chat span { font-size:24px; font-weight:300; line-height:1; }
.nav-links { display:grid; gap:7px; padding:0 0 24px; border-bottom:1px solid rgba(116,224,223,.22); }
.nav-link { display:flex; align-items:center; gap:13px; width:100%; padding:11px 12px; border:0; border-radius:9px; background:transparent; color:var(--muted); text-align:left; text-decoration:none; cursor:pointer; }
.nav-link span { width:21px; color:var(--cyan); font-size:20px; text-align:center; }
.nav-link:hover, .nav-link.active { background:linear-gradient(90deg, rgba(35,119,172,.46), rgba(17,50,78,.55)); color:var(--text); }
.model-block { display:grid; gap:9px; }
.model-block label { color:var(--muted); font-size:12px; font-weight:700; }
.model-block select { width:100%; padding:11px 12px; border:1px solid #477292; border-radius:9px; background:#0a1b2e; color:var(--text); outline:none; }
.model-block select:focus-visible, textarea:focus-visible { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(116,224,223,.18); }
.sidebar-footer { display:grid; gap:4px; margin-top:auto; color:#829bb4; font-size:11px; }
.sidebar-footer a { color:var(--cyan); text-decoration:none; }
.secure-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }
.workspace { display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin:12px 18px 0; padding:17px 24px; border:1px solid rgba(56,168,232,.42); border-radius:12px; background:rgba(9,28,48,.72); box-shadow:var(--shadow); }
.section-label { color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:3px 0 0; font-size:clamp(17px, 2vw, 24px); line-height:1.1; letter-spacing:-.035em; }
.connection { color:var(--green); font-size:13px; white-space:nowrap; }
.history { position:relative; flex:1; min-height:0; overflow-y:auto; padding:42px clamp(18px, 7vw, 110px) 22px; scroll-behavior:smooth; }
.history::after { content:""; position:absolute; left:8%; right:0; bottom:10%; height:22%; opacity:.24; pointer-events:none; background:repeating-radial-gradient(ellipse at 70% 100%, transparent 0 26px, rgba(56,168,232,.42) 27px 28px, transparent 29px 45px); transform:perspective(320px) rotateX(55deg); }
.welcome { position:absolute; inset:10% 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; pointer-events:none; }
.welcome-mark { width:116px; height:116px; object-fit:cover; object-position:left center; opacity:.95; filter:drop-shadow(0 0 24px rgba(56,168,232,.25)); }
.welcome h2 { margin:14px 0 3px; color:var(--yellow); font-size:clamp(26px, 4vw, 46px); line-height:1; letter-spacing:-.055em; }
.welcome p { margin:0; font-size:clamp(16px, 2vw, 22px); }
.welcome-rule { width:64px; height:5px; margin-top:25px; border-radius:99px; background:linear-gradient(90deg, var(--blue), var(--cyan)); }
.msg { position:relative; z-index:1; max-width:860px; margin:0 auto 16px; padding:15px 18px; border:1px solid #315e7f; border-radius:13px; background:rgba(12,34,56,.88); white-space:pre-wrap; line-height:1.65; box-shadow:0 12px 28px rgba(0,0,0,.16); }
.msg.user { margin-left:auto; border-color:#3c85ae; background:linear-gradient(135deg, rgba(22,75,111,.9), rgba(15,38,63,.92)); }
.msg.assistant { margin-right:auto; background:linear-gradient(135deg, rgba(13,42,64,.92), rgba(11,30,50,.94)); }
.msg-role { display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.msg-role::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.assistant .msg-role::before { background:var(--green); }
.copy { display:block; margin-top:10px; padding:4px 8px; border:1px solid #3c6582; border-radius:6px; background:transparent; color:#b6d3e4; font-size:11px; cursor:pointer; }
.copy:hover { border-color:var(--cyan); color:#fff; }
.composer-wrap { position:relative; z-index:2; padding:14px clamp(18px, 7vw, 110px) 20px; border-top:1px solid rgba(116,224,223,.24); background:linear-gradient(180deg, rgba(8,17,31,.56), rgba(8,17,31,.97)); }
.composer { display:flex; gap:14px; max-width:860px; margin:auto; padding:13px; border:1px solid #2d6a91; border-radius:14px; background:rgba(12,34,56,.86); box-shadow:0 -14px 38px rgba(0,0,0,.2); }
textarea { flex:1; min-width:0; resize:vertical; min-height:64px; max-height:180px; padding:12px 13px; border:1px solid #477292; border-radius:9px; background:#0b2035; color:var(--text); outline:none; line-height:1.5; }
textarea::placeholder { color:#91aac1; }
.send { align-self:stretch; min-width:104px; border:1px solid #55c9f0; border-radius:9px; background:linear-gradient(135deg, #1ba7e6, #176fc2); color:#fff; font-weight:800; cursor:pointer; transition:transform .15s, filter .15s; }
.send span { margin-right:5px; font-size:18px; }
.composer-hint { max-width:860px; margin:7px auto 0; color:#819ab0; font-size:11px; }
.busy { color:var(--yellow); }
.bad { color:#ff9ca7; }
@media (max-width: 760px) { body { overflow:auto; } .app-shell { display:flex; flex-direction:column; height:auto; min-height:100vh; } .sidebar { display:grid; grid-template-columns:1fr auto; gap:14px; padding:16px; border-right:0; border-bottom:1px solid rgba(116,224,223,.28); } .brand { grid-column:1 / -1; } .new-chat { min-height:42px; } .nav-links, .model-block, .sidebar-footer { display:none; } .workspace { min-height:calc(100vh - 130px); } .topbar { margin:10px 12px 0; padding:14px 16px; } .history { min-height:52vh; padding:26px 12px 18px; } .welcome { inset:4% 0 0; } .welcome-mark { width:84px; height:84px; } .welcome h2 { font-size:31px; } .composer-wrap { padding:10px 12px 14px; } .composer { gap:8px; padding:9px; } .send { min-width:76px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }