:root { --ink:#1d1e26; --ink-soft:#555866; --line:#e7e4df; --canvas:#f4f1eb; --surface:#fffdfa; --lavender:#eceaff; --violet:#6d5ce8; --violet-dark:#5547cf; --mint:#dcf2d5; --peach:#fff0e7; --shadow:0 18px 44px rgba(44,38,70,.08); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--canvas); }
body { min-width:320px; margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans","Noto Sans SC",sans-serif; }
button,input,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.app-shell { display:flex; min-height:100vh; position:relative; overflow:hidden; }
.app-shell::before,.app-shell::after { content:""; position:fixed; border-radius:50%; pointer-events:none; filter:blur(1px); }
.app-shell::before { width:520px; height:520px; top:-260px; right:-80px; background:radial-gradient(circle,rgba(213,205,255,.62),rgba(232,229,255,.06) 62%,transparent 72%); }
.app-shell::after { width:410px; height:410px; bottom:-260px; left:100px; background:radial-gradient(circle,rgba(207,241,206,.55),rgba(232,245,231,.05) 66%,transparent 73%); }
.rail { z-index:2; width:236px; padding:34px 20px 22px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(255,253,250,.78); backdrop-filter:blur(20px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:700 24px/1 "DM Sans",sans-serif; letter-spacing:-.08em; padding:3px 8px; }
.brand-mark { width:28px; height:28px; display:flex; align-items:flex-end; gap:3px; padding:5px; border-radius:9px; background:var(--ink); transform:rotate(-8deg); }
.brand-mark i { width:4px; border-radius:99px; background:#fffdf9; }.brand-mark i:nth-child(1) { height:9px; }.brand-mark i:nth-child(2) { height:15px; background:#c6ffc4; }.brand-mark i:nth-child(3) { height:7px; }.brand-dot { color:var(--violet); }
.rail-caption { margin:43px 10px 14px; color:#9b9ba1; font:500 9px "DM Mono",monospace; letter-spacing:.13em; }
.side-nav { display:grid; gap:4px; }.nav-btn { width:100%; display:flex; align-items:center; gap:11px; padding:11px 12px; color:#72737b; border:0; border-radius:10px; background:transparent; text-align:left; font-size:13px; font-weight:500; cursor:pointer; transition:.18s ease; }.nav-btn:hover { color:var(--ink); background:#f1efeb; }.nav-btn.active { color:var(--ink); background:#ece9ff; font-weight:700; }.nav-icon { display:grid; place-items:center; width:20px; color:#8b82ed; font-size:15px; }.nav-btn.active .nav-icon { color:var(--violet); }
.rail-bottom { margin-top:auto; }.help-card { display:flex; gap:9px; padding:12px 9px 14px; border-bottom:1px solid var(--line); color:#6d6e76; font-size:11px; line-height:1.65; }.help-card>span { flex:0 0 20px; height:20px; display:grid; place-items:center; color:#6155c9; background:#eceaff; border-radius:50%; font-weight:700; }.help-card p { margin:0; }.help-card small { color:#9d9da3; }.profile { display:flex; width:100%; justify-content:space-between; align-items:center; padding:17px 9px 4px; color:#65666e; border:0; background:transparent; font-size:12px; cursor:pointer; }.profile b { letter-spacing:1px; }
.workspace { z-index:1; width:min(1220px,calc(100vw - 236px)); min-height:100vh; padding:0 66px; display:flex; flex-direction:column; margin:auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(226,222,215,.86); }.crumb { display:flex; align-items:center; gap:9px; color:#a1a0a2; font-size:12px; }.crumb b { color:#cac7c2; font-weight:400; }.crumb strong { color:#454650; font-weight:600; }.top-actions { display:flex; align-items:center; gap:18px; }.security-badge { display:flex; align-items:center; gap:7px; color:#656671; font-size:11px; }.security-badge i { width:7px; height:7px; border-radius:50%; background:#76b76c; box-shadow:0 0 0 4px rgba(118,183,108,.13); }.more-button { width:29px; height:29px; color:#686975; border:1px solid #dfdcd6; border-radius:8px; background:#fffdfa; font-weight:700; letter-spacing:1px; cursor:pointer; }
.conversation { width:min(780px,100%); margin:auto; padding:64px 0 46px; }.welcome { position:relative; padding:0 0 0 104px; }.welcome-mark { position:absolute; top:-7px; left:0; width:74px; height:74px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(145deg,#eeeaff,#dfecff); transform:rotate(-5deg); box-shadow:0 12px 26px rgba(93,84,180,.12); }.orbital-card { width:37px; height:45px; display:grid; place-items:center; border:1px solid rgba(88,74,190,.16); border-radius:10px; color:#6254cc; background:#fff; box-shadow:0 5px 12px rgba(56,45,128,.1); font:700 9px "DM Mono",monospace; letter-spacing:.04em; transform:rotate(10deg); }.spark { position:absolute; color:#8f7aeb; font-size:15px; }.spark-one { right:7px; top:5px; }.spark-two { bottom:7px; left:8px; color:#faad7d; font-size:10px; }.eyebrow { margin:0 0 13px; color:#807d8f; font:500 10px "DM Mono",monospace; letter-spacing:.09em; }.eyebrow span { display:inline-block; width:5px; height:5px; margin:0 6px 1px 7px; border-radius:50%; background:#72b16d; }.welcome h1 { margin:0; color:#292a34; font-family:"Noto Serif SC",Georgia,serif; font-size:clamp(32px,4.2vw,48px); font-weight:900; letter-spacing:-.075em; line-height:1.23; }.welcome h1 em { color:#6c5cdc; font-style:normal; }.intro { max-width:550px; margin:17px 0 18px; color:#74747e; font-size:14px; line-height:1.85; }.privacy-note { display:inline-flex; align-items:center; gap:9px; padding:9px 12px 9px 9px; color:#777681; border-radius:10px; background:#f0f7ed; font-size:11px; }.privacy-icon { width:25px; height:25px; display:grid; place-items:center; color:#4c8844; border-radius:7px; background:#d7edd1; font-size:16px; }.privacy-note p { display:grid; gap:1px; margin:0; }.privacy-note strong { color:#4d594d; font-weight:700; }.privacy-note small { color:#879087; font-size:10px; }
.message-divider { display:flex; align-items:center; gap:12px; margin:42px 0 17px; color:#aaa8ab; }.message-divider span { flex:1; height:1px; background:#e4e1dc; }.message-divider p { margin:0; font:500 9px "DM Mono",monospace; letter-spacing:.08em; white-space:nowrap; }
.composer { padding:22px; border:1px solid rgba(224,220,214,.9); border-radius:18px; background:rgba(255,253,250,.92); box-shadow:var(--shadow); }.composer-top { display:flex; align-items:center; gap:9px; padding-bottom:19px; border-bottom:1px solid #eeeae5; }.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:9px 9px 9px 2px; color:#fff; background:linear-gradient(145deg,#8778ee,#6152ce); box-shadow:0 5px 10px rgba(89,75,199,.2); font-size:12px; font-weight:700; }.composer-top p { margin:0 0 2px; color:#62616d; font:500 9px "DM Mono",monospace; letter-spacing:.05em; }.composer-top div span { color:#a5a3a4; font-size:10px; }.composer-top small { margin-left:auto; color:#aaa7a5; font:500 9px "DM Mono",monospace; letter-spacing:.04em; }.form-heading { display:flex; justify-content:space-between; align-items:center; margin:21px 0 17px; color:#33333d; font-size:15px; font-weight:700; }.form-heading small { display:flex; align-items:center; gap:5px; color:#96949a; font-size:10px; font-weight:400; }.form-heading small i { width:5px; height:5px; border-radius:50%; background:#81b876; }.fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field { display:grid; gap:7px; color:#5c5d66; font-size:11px; font-weight:700; }.field>i { min-height:14px; color:#a7a5aa; font-size:10px; font-style:normal; font-weight:400; }input,select { width:100%; height:44px; padding:0 13px; border:1px solid #e2dfda; border-radius:9px; outline:0; color:#31323b; background:#fff; font-size:13px; transition:border-color .18s,box-shadow .18s; }input::placeholder { color:#b6b4b4; }input:focus,select:focus { border-color:#9b90ee; box-shadow:0 0 0 3px rgba(134,119,237,.12); }select { appearance:none; cursor:pointer; }.select-wrap { position:relative; }.select-wrap::after { content:"⌄"; position:absolute; top:10px; right:13px; color:#8b8991; font-size:16px; pointer-events:none; }.upload-label { display:flex; align-items:center; gap:8px; margin:19px 0 9px; color:#5c5d66; font-size:11px; font-weight:700; }.upload-label small { padding:2px 5px; color:#957259; border-radius:4px; background:#fff0e7; font-size:9px; font-weight:500; }
.drop-zone { min-height:104px; display:flex; align-items:center; gap:13px; padding:15px; border:1px dashed #d2ccc5; border-radius:12px; background:#fffefa; cursor:pointer; transition:.2s ease; }.drop-zone:hover,.drop-zone.dragging { border-color:#9083e9; background:#faf9ff; }.drop-zone.has-file { opacity:.56; }.file-orbit { width:45px; height:45px; display:grid; flex:0 0 45px; place-items:center; border-radius:12px; color:#6f60d8; background:#eeebff; }.file-orbit svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.drop-copy { display:grid; gap:4px; }.drop-copy strong { color:#494953; font-size:13px; }.drop-copy small { color:#a19fa2; font-size:11px; }.browse { display:flex; align-items:center; gap:8px; margin-left:auto; padding:8px 10px; color:#6559c6; border:1px solid #ddd7ff; border-radius:7px; background:#f8f7ff; font-size:11px; white-space:nowrap; }.browse b { font-size:14px; }.file-pill { display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 10px; color:#5e5d66; border-radius:8px; background:#f3f2f0; font:500 10px "DM Mono",monospace; }.file-icon { padding:3px 4px; color:#6559c6; border-radius:3px; background:#dedaff; font-size:8px; font-weight:700; }.file-pill #file-size { margin-left:auto; color:#99969c; }.file-pill button { color:#919097; border:0; background:transparent; font-size:19px; cursor:pointer; }.send-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }.send-row p { margin:0; color:#a4a2a3; font-size:10px; }.send-row p span { display:inline-grid; width:13px; height:13px; place-items:center; margin-right:3px; color:#438443; border-radius:50%; background:#dbefd7; font-size:8px; font-weight:700; }.send-button { display:flex; align-items:center; gap:14px; padding:6px 7px 6px 15px; color:#fff; border:0; border-radius:9px; background:var(--ink); box-shadow:0 7px 14px rgba(35,35,43,.17); font-size:12px; font-weight:700; cursor:pointer; transition:transform .18s,background .18s; }.send-button:hover { background:#383844; transform:translateY(-1px); }.send-button:disabled { cursor:wait; opacity:.72; transform:none; }.send-button b { display:grid; width:25px; height:25px; place-items:center; color:#27272f; border-radius:7px; background:#d8ffb5; font-size:15px; }.loader { display:block; width:15px; height:15px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }.form-message { min-height:16px; margin:10px 1px -5px; font-size:11px; }.form-message.error { color:#ca6351; }.form-message.success { color:#4e914a; }.form-message.working { color:#6b60c8; }
footer { display:flex; justify-content:space-between; gap:15px; margin-top:auto; padding:18px 0 22px; color:#aaa6a3; border-top:1px solid rgba(226,222,215,.86); font-size:10px; }footer span:last-child { color:#77727e; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:800px) { .rail { width:76px; padding:26px 12px 20px; }.brand { justify-content:center; padding:0; }.brand>span:last-child,.rail-caption,.nav-btn>span:last-child,.help-card,.profile>span { display:none; }.side-nav { justify-items:center; }.nav-btn { width:44px; padding:12px; justify-content:center; }.workspace { width:calc(100vw - 76px); padding:0 30px; }.conversation { padding-top:52px; }.welcome { padding-left:93px; }.welcome-mark { width:66px; height:66px; }.top-actions .security-badge { display:none; } }
@media (max-width:590px) { .rail { display:none; }.workspace { width:100%; padding:0 18px; }.topbar { height:67px; }.conversation { padding:38px 0 30px; }.welcome { padding:0; }.welcome-mark { position:relative; width:58px; height:58px; margin-bottom:20px; }.welcome h1 { font-size:34px; }.intro { font-size:13px; }.privacy-note { align-items:flex-start; }.message-divider { margin:30px 0 14px; }.composer { padding:16px; }.composer-top { padding-bottom:14px; }.composer-top small { display:none; }.form-heading { display:grid; gap:4px; margin:17px 0 14px; }.form-heading small { display:none; }.fields { grid-template-columns:1fr; gap:9px; }.field>i { display:none; }.upload-label { margin-top:16px; }.drop-zone { min-height:100px; }.browse { display:none; }.send-row { align-items:flex-end; gap:8px; }.send-row p { max-width:150px; line-height:1.55; }footer { font-size:9px; }footer span:nth-child(2) { display:none; } }