:root { --bg: #0a0a0f; --panel: #101016; --panel-2: #15151d; --panel-3: #1c1c26; --text: #f6f3f1; --muted: #8f8d98; --subtle: #5d5c66; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.15); --accent: #ff5678; --accent-soft: rgba(255,86,120,.14); --accent-text: #ff7894; --shadow: 0 24px 80px rgba(0,0,0,.3); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Manrope', sans-serif; font-size: 13px; overflow: hidden; transition: background .3s, color .3s; }
button, textarea, input { font: inherit; }
button { border: 0; cursor: pointer; }
.app-noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); z-index: 5; }
.app-shell { display: flex; height: 100vh; position: relative; z-index: 1; }
.sidebar { width: 260px; flex: 0 0 260px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(12,12,17,.78); backdrop-filter: blur(22px); transition: transform .3s, background .3s; }
.sidebar-top { padding: 25px 16px 20px; border-bottom: 1px solid var(--line); }
.brand-row { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 9px; margin-bottom: 24px; }
.brand-mark { display: flex; gap: 2px; align-items: end; height: 20px; width: 21px; transform: skew(-16deg); }
.brand-mark span { display: block; width: 5px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 12px rgba(255,86,120,.5); }.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:19px}.brand-mark span:nth-child(3){height:15px}
.brand-name { font-weight: 800; letter-spacing: .21em; font-size: 15px; }.brand-dot { color: var(--accent); }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 7px; transition: .2s; }.icon-btn:hover { background: var(--panel-3); color: var(--text); }.icon-btn svg { width: 16px; height: 16px; }.sidebar-close { display: none; margin-left: auto; }
.new-chat-btn { height: 42px; display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: linear-gradient(100deg, var(--accent-soft), transparent); text-align: left; font-weight: 700; transition: .2s; }.new-chat-btn:hover { border-color: var(--accent); background: var(--accent-soft); }.new-chat-btn svg { width: 16px; color: var(--accent); }.new-chat-btn kbd { margin-left: auto; color: var(--subtle); font: 10px 'DM Mono', monospace; }
.history-area { flex: 1; overflow-y: auto; padding: 25px 12px; }.section-label { display: flex; justify-content: space-between; padding: 0 8px 11px; color: var(--subtle); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.history-list { display: grid; gap: 3px; }
.history-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 9px; color: var(--muted); border-radius: 7px; cursor: pointer; transition: .2s; }.history-item:hover, .history-item.active { background: var(--panel-2); color: var(--text); }.history-item.active:before { content:''; position:absolute; left:0; width:2px; height:16px; background:var(--accent); border-radius: 2px; }.history-item svg { width: 15px; color: var(--subtle); flex: 0 0 auto; }.history-item.active svg { color: var(--accent); }.history-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }.history-time { margin-left: auto; font: 10px 'DM Mono', monospace; color: var(--subtle); }.history-actions { display:none; margin-left:auto; gap:2px; }.history-item:hover .history-time { display:none; }.history-item:hover .history-actions { display:flex; }.history-actions button { color: var(--subtle); background:none; padding:2px; }.history-actions button:hover { color: var(--accent); }
.sidebar-bottom { padding: 14px 12px 18px; border-top: 1px solid var(--line); }.sidebar-link { width:100%; height:36px; display:flex; align-items:center; gap:10px; color:var(--muted); background:transparent; text-align:left; padding:0 8px; border-radius:6px; }.sidebar-link:hover { background:var(--panel-2); color:var(--text); }.sidebar-link svg { width:15px; }.link-hint { margin-left:auto; color:var(--subtle); font:10px 'DM Mono',monospace; }.status-card { display:flex; align-items:center; gap:9px; margin:15px 5px; padding:11px 10px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.025); }.status-orb { width:7px; height:7px; background:#78d19a; border-radius:50%; box-shadow:0 0 0 3px rgba(120,209,154,.12); }.status-card div { flex:1; display:grid; gap:3px; }.status-card strong { font-size:10px; font-weight:600; }.status-card small { color:var(--subtle); font:9px 'DM Mono',monospace; }.status-card > svg { width:14px; color:var(--subtle); }.profile-mini { display:flex; align-items:center; gap:9px; padding:9px 7px 0; }.avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; font-size:9px; font-weight:800; letter-spacing:.04em; }.avatar-pink { background:linear-gradient(135deg,#ff5678,#9048bb); }.profile-copy { display:grid; flex:1; gap:2px; }.profile-copy strong { font-size:11px; }.profile-copy small { color:var(--subtle); font-size:10px; }
.main-content { flex:1; min-width:0; display:flex; flex-direction:column; background: radial-gradient(ellipse 60% 40% at 55% 45%, rgba(255,86,120,.035), transparent 75%); }.topbar { height:78px; flex:0 0 78px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid var(--line); }.breadcrumb { display:flex; align-items:center; gap:9px; font-size:12px; }.breadcrumb svg { width:13px; color:var(--subtle); }.breadcrumb-muted { color:var(--subtle); }.top-actions { display:flex; align-items:center; gap:9px; }.theme-switcher { display:flex; gap:2px; padding:3px; margin-right:10px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }.theme-btn { display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:5px; color:var(--subtle); background:transparent; font-size:10px; }.theme-btn svg { width:13px; }.theme-btn.active, .theme-btn:hover { background:var(--panel-3); color:var(--text); }.login-btn, .signup-btn { height:32px; padding:0 12px; border-radius:6px; font-size:11px; font-weight:700; }.login-btn { color:var(--muted); background:transparent; }.login-btn:hover { color:var(--text); }.signup-btn { display:flex; align-items:center; gap:6px; color:#fff; background:var(--accent); box-shadow:0 5px 20px rgba(255,86,120,.18); }.signup-btn:hover { filter:brightness(1.08); }.signup-btn svg { width:13px; }.account-wrap { position:relative; }.account-btn { display:flex; gap:6px; align-items:center; background:transparent; color:var(--muted); }.account-btn svg { width:13px; }.account-menu { position:absolute; right:0; top:40px; min-width:190px; display:grid; gap:5px; padding:13px; z-index:10; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel-2); box-shadow:var(--shadow); }.account-menu strong { font-size:11px; margin-bottom:8px; }.menu-caption { color:var(--subtle); font:9px 'DM Mono',monospace; text-transform:uppercase; }.account-menu button { display:flex; align-items:center; gap:8px; color:var(--muted); background:transparent; border-top:1px solid var(--line); padding:10px 0 0; font-size:11px; text-align:left; }.account-menu button:hover { color:var(--accent-text); }.account-menu svg { width:14px; }.hidden { display:none !important; }.menu-toggle { display:none; }
.chat-stage { flex:1; min-height:0; overflow-y:auto; position:relative; }.welcome-view { min-height:100%; max-width:800px; margin:0 auto; padding:clamp(70px, 12vh, 135px) 32px 110px; }.eyebrow { display:flex; align-items:center; gap:8px; color:var(--accent-text); font:10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }.eyebrow-pulse { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }.welcome-view h1 { margin:20px 0 13px; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.045em; font-weight:700; }.welcome-view h1 em { color:var(--accent); font-style:normal; }.welcome-copy { color:var(--muted); font-size:14px; line-height:1.7; }.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:49px; }.suggestion-card { min-height:142px; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:17px; padding:17px; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); transition:transform .25s, border-color .25s, background .25s; }.suggestion-card:hover { transform:translateY(-3px); border-color:var(--line-strong); background:var(--panel-2); }.suggestion-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; }.suggestion-icon svg { width:15px; }.coral { background:rgba(255,86,120,.13); color:var(--accent); }.yellow { background:rgba(244,190,73,.13); color:#f4be49; }.blue { background:rgba(92,157,255,.13); color:#6aa4ff; }.suggestion-card > span:nth-child(2) { display:grid; gap:5px; }.suggestion-card strong { font-size:11px; }.suggestion-card small { color:var(--muted); font-size:10px; line-height:1.4; }.suggestion-arrow { position:absolute; right:15px; top:17px; width:14px; color:var(--subtle); }.welcome-note { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:38px; color:var(--subtle); font:10px 'DM Mono',monospace; }.welcome-note svg { width:12px; }.conversation { max-width:800px; margin:0 auto; padding:54px 32px 155px; }.message { display:flex; gap:13px; margin:0 0 30px; animation:rise .35s ease both; }.message.user { justify-content:flex-end; }.message.user .message-body { order:-1; }.message-avatar { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:8px; }.ai-avatar { background:var(--accent-soft); color:var(--accent); }.ai-avatar span { width:8px; height:8px; background:var(--accent); transform:rotate(45deg); }.message-content { max-width:calc(100% - 42px); }.message.user .message-content { max-width:78%; }.message-meta { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:var(--subtle); font:10px 'DM Mono',monospace; }.message.user .message-meta { justify-content:flex-end; }.message-text { color:var(--text); font-size:13px; line-height:1.75; }.message.user .message-text { padding:11px 14px; border:1px solid var(--line); border-radius:10px 3px 10px 10px; background:var(--panel-2); }.message-text p { margin:0 0 12px; }.message-text p:last-child { margin-bottom:0; }.message-text strong { color:var(--accent-text); font-weight:700; }.message-text code { font:11px 'DM Mono',monospace; color:#f6c5cd; background:rgba(255,255,255,.07); padding:2px 5px; border-radius:3px; }.message-text pre { position:relative; overflow:auto; padding:15px; margin:12px 0 2px; background:#08080c; border:1px solid var(--line); border-radius:7px; font:11px/1.7 'DM Mono',monospace; color:#c6ccd8; }.copy-code { position:absolute; top:8px; right:8px; color:var(--subtle); background:var(--panel-3); padding:5px; border-radius:4px; }.copy-code svg { width:13px; }.typing { display:flex; gap:4px; padding:12px 0; }.typing i { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:bounce 1s infinite; }.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.composer-wrap { position:absolute; bottom:0; left:0; right:0; padding:0 32px 21px; background:linear-gradient(transparent,var(--bg) 27%); }.composer { max-width:800px; margin:0 auto; padding:14px 14px 10px; border:1px solid var(--line-strong); border-radius:11px; background:rgba(18,18,25,.9); box-shadow:0 12px 50px rgba(0,0,0,.18); backdrop-filter:blur(16px); transition:border-color .2s; }.composer:focus-within { border-color:rgba(255,86,120,.5); }.composer textarea { display:block; width:100%; min-height:28px; max-height:120px; resize:none; outline:0; border:0; background:transparent; color:var(--text); line-height:1.5; font-size:13px; }.composer textarea::placeholder { color:var(--subtle); }.composer-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }.composer-tools { display:flex; align-items:center; gap:5px; }.tool-btn { display:grid; place-items:center; width:27px; height:27px; color:var(--subtle); background:transparent; border-radius:5px; }.tool-btn:hover { color:var(--text); background:var(--panel-3); }.tool-btn svg { width:15px; }.tool-divider { height:14px; width:1px; background:var(--line); margin:0 5px; }.model-label { display:flex; align-items:center; gap:6px; color:var(--subtle); font:10px 'DM Mono',monospace; }.model-dot { width:5px; height:5px; border-radius:50%; background:#78d19a; }.send-btn { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; color:#fff; background:var(--accent); transition:.2s; }.send-btn:hover { transform:translateY(-1px); filter:brightness(1.1); }.send-btn:disabled { opacity:.45; transform:none; }.send-btn svg { width:15px; }.composer-disclaimer { margin:9px 0 0; text-align:center; color:var(--subtle); font:9px 'DM Mono',monospace; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:30; display:flex; align-items:center; gap:7px; padding:10px 14px; color:var(--text); border:1px solid var(--line-strong); border-radius:7px; background:var(--panel-2); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; font-size:11px; }.toast.visible { opacity:1; transform:translate(-50%,0); }.toast svg { width:14px; color:#78d19a; }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; z-index:20; background:rgba(0,0,0,.62); backdrop-filter:blur(8px); }.modal { width:min(390px, calc(100% - 32px)); position:relative; padding:31px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); animation:modal-in .25s ease; }.modal-close { position:absolute; top:16px; right:16px; }.modal-kicker { color:var(--accent-text); font:9px 'DM Mono',monospace; letter-spacing:.12em; }.modal h2 { margin:15px 0 6px; font-size:28px; letter-spacing:-.04em; }.modal > p { margin:0 0 24px; color:var(--muted); font-size:12px; }.modal form { display:grid; gap:14px; }.modal label { display:grid; gap:7px; color:var(--muted); font-size:10px; }.modal input { height:40px; padding:0 11px; outline:0; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--text); }.modal input:focus { border-color:var(--accent); }.modal-submit { height:41px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:5px; border-radius:6px; color:#fff; background:var(--accent); font-size:11px; font-weight:700; }.modal-submit svg { width:14px; }.modal-foot { margin-top:20px; text-align:center; color:var(--subtle); font-size:10px; }.modal-foot button { color:var(--accent-text); background:transparent; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 0; border-top:1px solid var(--line); }.setting-row div { display:grid; gap:5px; }.setting-row strong { font-size:11px; }.setting-row small { color:var(--muted); font-size:10px; line-height:1.4; }.toggle { width:34px; height:20px; padding:3px; border-radius:20px; background:var(--panel-3); transition:.2s; }.toggle span { display:block; width:14px; height:14px; border-radius:50%; background:var(--subtle); transition:.2s; }.toggle.active { background:var(--accent); }.toggle.active span { transform:translateX(14px); background:white; }
body[data-theme="light"] { --bg:#f4f4f1; --panel:#fff; --panel-2:#f1f1ee; --panel-3:#e8e8e4; --text:#17171a; --muted:#68686f; --subtle:#a0a0a4; --line:rgba(23,23,26,.1); --line-strong:rgba(23,23,26,.17); --accent:#e54064; --accent-soft:rgba(229,64,100,.1); --accent-text:#d7375b; --shadow:0 24px 80px rgba(23,23,26,.13); }.light body { background:var(--bg); }.light .sidebar { background:rgba(250,250,247,.8); }.light .composer { background:rgba(255,255,255,.9); }.light .message-text pre { background:#202027; }
body[data-theme="pink"] { --bg:#160b12; --panel:#21101a; --panel-2:#2a1420; --panel-3:#37182a; --text:#fff4f6; --muted:#c0939f; --subtle:#8f5b69; --line:rgba(255,153,174,.15); --line-strong:rgba(255,153,174,.26); --accent:#ff4f81; --accent-soft:rgba(255,79,129,.17); --accent-text:#ff83a3; --shadow:0 24px 80px rgba(80,0,30,.4); }.pink body { background:var(--bg); }
@keyframes rise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } } @keyframes bounce { 0%,80%,100% { transform:translateY(0); opacity:.5; } 40% { transform:translateY(-4px); opacity:1; } } @keyframes modal-in { from { opacity:0; transform:scale(.97) translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width: 800px) { body { overflow:hidden; }.sidebar { position:fixed; inset:0 auto 0 0; z-index:15; transform:translateX(-100%); width:280px; background:var(--panel); box-shadow:var(--shadow); }.sidebar.open { transform:none; }.sidebar-close, .menu-toggle { display:grid; }.mobile-backdrop { position:fixed; inset:0; z-index:14; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.3s; }.mobile-backdrop.visible { opacity:1; pointer-events:auto; }.topbar { height:64px; flex-basis:64px; padding:0 16px; gap:12px; }.menu-toggle { flex:0 0 auto; }.breadcrumb { flex:1; min-width:0; }.breadcrumb-muted { display:none; }.top-actions { gap:3px; }.theme-switcher { margin:0 3px 0 0; }.theme-btn { padding:6px; }.theme-btn span { display:none; }.login-btn { display:none; }.signup-btn { padding:0 9px; }.welcome-view { padding:60px 20px 125px; }.welcome-view h1 { font-size:45px; }.welcome-copy { font-size:12px; }.desktop-only { display:none; }.suggestions { grid-template-columns:1fr; gap:7px; margin-top:34px; }.suggestion-card { min-height:66px; flex-direction:row; align-items:center; gap:11px; padding:13px; }.suggestion-card > span:nth-child(2) { gap:3px; }.suggestion-arrow { top:50%; transform:translateY(-50%); }.welcome-note { margin-top:25px; }.composer-wrap { padding:0 12px 13px; }.conversation { padding:32px 20px 150px; }.message.user .message-content { max-width:87%; } }
@media (max-width: 420px) { .theme-switcher { display:none; }.welcome-view h1 { font-size:40px; }.welcome-view { padding-top:48px; }.model-label { display:none; }.composer { padding:12px; } }

/* Elite rounded glass layer */
body { font-family: 'Nunito', sans-serif; letter-spacing: 0; }
body, button, textarea, input { border-radius: 18px; }
.app-shell { background: radial-gradient(circle at 70% 12%, var(--accent-soft), transparent 31%); }
.sidebar, .topbar, .composer, .suggestion-card, .status-card, .modal, .account-menu, .history-item, .new-chat-btn { border-radius: 20px; }
.sidebar { margin: 12px 0 12px 12px; height: calc(100vh - 24px); border: 1px solid var(--line); box-shadow: 0 20px 70px rgba(0,0,0,.22); }
.main-content { margin: 12px 12px 12px 10px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.topbar { height: 68px; flex-basis: 68px; margin: 0; padding: 0 28px; border: 0; border-bottom: 1px solid var(--line); }
.header-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .18em; }
.header-brand .brand-mark { transform: scale(.82) skew(-16deg); transform-origin: left center; margin-right: -2px; }
.header-brand strong { font-weight: 900; }
.header-new-chat { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 15px; color: var(--text); background: var(--accent-soft); border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 800; font-size: 11px; transition: .22s; }
.header-new-chat:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.header-new-chat svg { width: 14px; color: var(--accent); }.header-new-chat:hover svg { color: #fff; }
.breadcrumb { display: none; }
.top-actions { gap: 10px; }
.login-btn, .signup-btn { height: 38px; border-radius: 999px; padding: 0 16px; }
.signup-btn { box-shadow: 0 8px 22px var(--accent-soft); }
.icon-btn, .tool-btn { border-radius: 12px; }
.brand-row { padding: 0 12px; }.new-chat-btn { height: 46px; border-radius: 16px; }
.history-item { border-radius: 14px; padding: 12px 11px; }
.suggestion-card { box-shadow: 0 12px 35px rgba(0,0,0,.12); }.suggestion-icon { border-radius: 11px; }
.composer { border-radius: 24px; padding: 16px 16px 12px; box-shadow: 0 14px 50px rgba(0,0,0,.28); }
.send-btn { border-radius: 14px; width: 36px; height: 36px; }.tool-btn { width: 32px; height: 32px; }
.avatar { border-radius: 14px; }.message-avatar { border-radius: 12px; }.message.user .message-text { border-radius: 18px 6px 18px 18px; }
.modal { border-radius: 26px; padding: 32px; }.modal input { border-radius: 14px; height: 44px; }.modal-submit { border-radius: 14px; height: 46px; }.toggle { border-radius: 999px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 19px; background: var(--panel-2); border-radius: 14px; }.auth-tab { padding: 9px 5px; color: var(--muted); background: transparent; border-radius: 10px; font-size: 11px; font-weight: 800; }.auth-tab.active { color: var(--text); background: var(--panel-3); box-shadow: 0 4px 14px rgba(0,0,0,.12); }.forgot-link { justify-self: end; margin-top: -5px; color: var(--accent-text); background: transparent; font-size: 10px; }
.theme-heading { display:flex; justify-content:space-between; align-items:center; margin: 4px 0 11px; }.theme-heading strong { font-size: 12px; }.theme-heading span { color: var(--accent-text); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }.theme-option { position:relative; display:flex; align-items:center; gap:9px; padding:11px 10px; text-align:left; border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:16px; }.theme-option:hover, .theme-option.active { border-color:var(--accent); background:var(--accent-soft); }.theme-option > span:nth-child(2) { display:grid; gap:3px; }.theme-option strong { font-size:10px; }.theme-option small { color:var(--muted); font-size:9px; }.theme-option > svg { position:absolute; right:8px; top:8px; width:12px; color:var(--accent); opacity:0; }.theme-option.active > svg { opacity:1; }.theme-swatch { width:22px; height:22px; flex:0 0 22px; border-radius:8px; }.swatch-dark { background: linear-gradient(135deg,#101318,#697486); }.swatch-emerald { background: linear-gradient(135deg,#062b25,#5cf09f); }.swatch-purple { background: linear-gradient(135deg,#170b32,#a173ff); }.swatch-pink { background: linear-gradient(135deg,#321823,#f78da8); }
body[data-theme="dark"] { --bg:#0c0f13; --panel:#12161c; --panel-2:#181e26; --panel-3:#222a34; --text:#f2f5f5; --muted:#9ba5ae; --subtle:#63707b; --line:rgba(218,232,238,.1); --line-strong:rgba(218,232,238,.18); --accent:#9aaabc; --accent-soft:rgba(154,170,188,.14); --accent-text:#c5d1dc; --shadow:0 25px 80px rgba(0,0,0,.35); }
body[data-theme="emerald"] { --bg:#061512; --panel:#0b211c; --panel-2:#103027; --panel-3:#164337; --text:#eafff6; --muted:#96b9aa; --subtle:#568072; --line:rgba(120,255,193,.12); --line-strong:rgba(120,255,193,.23); --accent:#5cf09f; --accent-soft:rgba(92,240,159,.14); --accent-text:#79ffb1; --shadow:0 25px 80px rgba(0,30,19,.45); }
body[data-theme="purple"] { --bg:#10091b; --panel:#1b102a; --panel-2:#25163a; --panel-3:#34214d; --text:#f8f2ff; --muted:#b6a5ca; --subtle:#765f91; --line:rgba(202,158,255,.13); --line-strong:rgba(202,158,255,.25); --accent:#ae7aff; --accent-soft:rgba(174,122,255,.16); --accent-text:#c69cff; --shadow:0 25px 80px rgba(35,0,60,.45); }
body[data-theme="pink"] { --bg:#1c0f15; --panel:#291720; --panel-2:#36202a; --panel-3:#492934; --text:#fff4f6; --muted:#d1a9b2; --subtle:#986774; --line:rgba(255,173,191,.14); --line-strong:rgba(255,173,191,.25); --accent:#f78da8; --accent-soft:rgba(247,141,168,.16); --accent-text:#ffb3c5; --shadow:0 25px 80px rgba(75,10,30,.42); }
body[data-theme="emerald"] .status-orb { background: var(--accent); } body[data-theme="purple"] .status-orb { background: var(--accent); } body[data-theme="pink"] .status-orb { background: var(--accent); }
@media (max-width: 800px) { .sidebar { margin: 0; height: 100vh; border-radius: 0 24px 24px 0; }.main-content { margin: 0; border-radius: 0; border: 0; }.topbar { border-radius: 0; padding: 0 16px; }.header-brand { margin-right: auto; }.header-new-chat span { display: none; }.header-new-chat { width: 38px; justify-content: center; padding: 0; }.login-btn { display: none; }.signup-btn { padding: 0 13px; }.theme-grid { gap: 6px; } }

/* Layout and preference controls */
*, *::before, *::after { font-family: inherit; }
.main-content { position: relative; min-width: 0; overflow: hidden; }
.chat-stage { min-width: 0; width: 100%; }
.composer-wrap { position: absolute; left: 0; right: 0; width: auto; max-width: 100%; overflow: hidden; }
.sidebar { width: 260px; overflow: hidden; transition: width .3s ease, transform .3s ease, background .3s ease; }
.sidebar-collapse { display: grid; margin-left: auto; }.sidebar-collapse svg { width: 16px; }
.history-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 4px 18px; padding: 0 11px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 14px; color: var(--subtle); }.history-search:focus-within { border-color: var(--accent); color: var(--accent); }.history-search svg { width: 14px; flex: 0 0 auto; }.history-search input { min-width: 0; width: 100%; outline: 0; border: 0; background: transparent; color: var(--text); font-size: 11px; }.history-search input::placeholder { color: var(--subtle); }.empty-history { margin: 26px 8px; color: var(--subtle); font-size: 11px; text-align: center; }
.sidebar.collapsed { width: 78px; flex-basis: 78px; }.sidebar.collapsed .brand-name, .sidebar.collapsed .new-chat-btn span, .sidebar.collapsed .new-chat-btn kbd, .sidebar.collapsed .section-label, .sidebar.collapsed .history-search, .sidebar.collapsed .history-title, .sidebar.collapsed .history-time, .sidebar.collapsed .history-actions, .sidebar.collapsed .sidebar-link span, .sidebar.collapsed .status-card div, .sidebar.collapsed .status-card > svg, .sidebar.collapsed .profile-copy, .sidebar.collapsed #profileMenuBtn { display: none; }.sidebar.collapsed .brand-row { justify-content: center; padding: 0; }.sidebar.collapsed .sidebar-collapse { display: grid; margin-left: 0; }.sidebar.collapsed .new-chat-btn { justify-content: center; padding: 0; }.sidebar.collapsed .history-area { padding-left: 10px; padding-right: 10px; }.sidebar.collapsed .history-item { justify-content: center; padding: 12px 0; }.sidebar.collapsed .history-item.active:before { left: 0; }.sidebar.collapsed .sidebar-link { justify-content: center; padding: 0; }.sidebar.collapsed .status-card { justify-content: center; padding: 11px 0; margin-left: 5px; margin-right: 5px; }.sidebar.collapsed .profile-mini { justify-content: center; padding-left: 0; padding-right: 0; }.sidebar.collapsed .profile-mini .avatar { margin: auto; }
.font-setting { display: grid; gap: 10px; padding: 15px 0 17px; border-top: 1px solid var(--line); }.font-setting > div:first-child { display: grid; gap: 4px; }.font-setting strong { font-size: 11px; }.font-setting small { color: var(--muted); font-size: 10px; }.font-size-options { display: flex; gap: 5px; }.font-size-options button { flex: 1; padding: 8px 4px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; font-size: 10px; }.font-size-options button.active, .font-size-options button:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 800px) { .sidebar.collapsed { width: 280px; transform: translateX(-100%); }.sidebar.collapsed.open { transform: none; }.sidebar-collapse { display: none; }.composer-wrap { padding-left: 12px; padding-right: 12px; } }