:root { --ink:#1c2225; --muted:#747a77; --line:#e7e5df; --paper:#fbfaf7; --warm:#f4f1eb; --navy:#254456; --orange:#ef7654; --sage:#9aaf9f; --sidebar:310px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif; }
button,input,textarea { font:inherit; } button { border:0; cursor:pointer; } button:disabled { cursor:not-allowed; } svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:70px var(--sidebar) minmax(0,1fr); background:var(--paper); }
.rail { display:flex; flex-direction:column; align-items:center; background:#213f50; color:#d8e3e5; padding:21px 0 17px; z-index:4; }
.brand { display:grid; place-items:center; width:35px; height:35px; text-decoration:none; color:white; border:1px solid rgba(255,255,255,.28); border-radius:50%; margin-bottom:45px; }
.brand-mark { font:700 19px 'Playfair Display',serif; transform:translateY(-1px); }.rail-nav,.rail-bottom { display:flex; flex-direction:column; gap:11px; align-items:center; }.rail-bottom { margin-top:auto; }
.rail-button,.icon-button { display:grid; place-items:center; background:transparent; color:inherit; width:38px; height:38px; border-radius:10px; transition:.2s; }.rail-button:hover,.rail-button.active,.icon-button:hover { background:rgba(255,255,255,.12); color:#fff; }.rail-button svg { width:19px; }.profile { width:33px; height:33px; margin-top:8px; border-radius:50%; color:#1f3e4f; background:#e3b471; font-size:11px; font-weight:800; }
.sidebar { background:#f6f4ef; border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; transition:width .3s, padding .3s, opacity .2s; overflow:hidden; }.sidebar-head { height:112px; padding:27px 23px 14px 27px; display:flex; justify-content:space-between; align-items:start; }.eyebrow { margin:0 0 5px; font:500 10px 'DM Mono',"PingFang SC",monospace; letter-spacing:.11em; color:#818783; }.sidebar h1 { font:700 26px 'Playfair Display',serif; letter-spacing:-.04em; margin:0; }.sidebar .icon-button { color:#76807d; width:31px; height:31px; }.sidebar .icon-button:hover { background:#e8e6df; color:#293737; }
.new-chat { margin:0 20px 18px; min-height:48px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:#254456; border-radius:8px; font-size:12px; font-weight:700; box-shadow:0 2px 3px rgba(15,38,50,.16); }.new-chat:hover { background:#1d3747; }.new-chat kbd { font:400 10px 'DM Mono'; color:#bdd0d4; }
.search-wrap { position:relative; display:flex; align-items:center; margin:0 20px 23px; color:#929794; }.search-wrap svg { position:absolute; width:16px; left:12px; }.search-wrap input { width:100%; background:#efede8; border:1px solid transparent; outline:none; border-radius:7px; padding:10px 9px 10px 35px; font-size:11px; color:var(--ink); }.search-wrap input:focus { border-color:#c7cec8; background:#fff; }.search-wrap input::placeholder { color:#969b98; }
.conversations { overflow:auto; padding:0 12px; }.group-label { padding:0 10px 8px; font:500 9px 'DM Mono',"PingFang SC",monospace; letter-spacing:.1em; color:#929794; }.conversation { position:relative; width:100%; display:flex; align-items:center; gap:10px; text-align:left; padding:10px 10px; background:transparent; border-radius:7px; color:#565e5b; font-size:11px; margin-bottom:2px; }.conversation:hover,.conversation.active { background:#e9e8e2; color:#223b47; }.conversation::before { content:''; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#b2b8b3; }.conversation.active::before { background:var(--orange); }.conversation span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.conversation .delete-chat { margin-left:auto; opacity:0; width:19px; height:19px; color:#8d9490; background:transparent; padding:0; }.conversation:hover .delete-chat { opacity:1; }.conversation .delete-chat:hover { color:#be5d4c; }.conversation .delete-chat svg { width:15px; }.empty-search { padding:0 10px; color:#8b918e; font-size:11px; }
.sidebar-footer { margin-top:auto; padding:20px 24px; border-top:1px solid #e7e5df; display:flex; align-items:center; gap:7px; color:#8b918e; font-size:9px; }.status-dot { width:6px; height:6px; border-radius:50%; background:#8caf93; box-shadow:0 0 0 3px #e0eae1; }
.workspace { display:grid; grid-template-rows:73px minmax(0,1fr) auto; min-width:0; min-height:100vh; }.topbar { border-bottom:1px solid var(--line); height:73px; display:flex; align-items:center; justify-content:space-between; padding:0 35px 0 39px; }.crumb { font-size:12px; font-weight:700; display:flex; gap:9px; align-items:center; }.slash,.muted { color:#9ba09d; font-weight:500; }.top-actions { display:flex; align-items:center; gap:13px; }.model-menu-wrap { position:relative; }.model-button { display:flex; align-items:center; gap:8px; padding:8px 10px 8px 12px; color:#314a57; background:#eef1ed; border-radius:18px; font-size:10px; font-weight:800; }.model-button:hover { background:#e2e9e5; }.model-button svg { width:14px; }.model-dot { width:6px; height:6px; border-radius:50%; background:#80a58b; }.model-menu { position:absolute; top:42px; right:0; width:190px; padding:5px; display:none; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 30px rgba(35,45,40,.13); z-index:5; }.model-menu.open { display:block; }.model-menu button { width:100%; background:transparent; text-align:left; border-radius:6px; padding:9px; color:#2e3b3a; font-size:11px; font-weight:700; }.model-menu button:hover { background:#f2f3ef; }.model-menu small { display:block; color:#89908c; font-size:9px; font-weight:500; margin-top:2px; }.share { color:#68716d; }.share:hover { color:#254456; background:#eef1ed; }.mobile-menu { display:none; }
.chat-area { width:min(760px,calc(100% - 40px)); margin:0 auto; padding:43px 0 28px; overflow:auto; }.message { display:grid; grid-template-columns:35px 1fr; gap:16px; padding:14px 0 25px; }.avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; font-size:11px; font-weight:800; }.avatar.user { color:#173b4d; background:#d9e4df; }.avatar.bot { color:white; background:#254456; font:600 17px 'Playfair Display'; }.message-main { min-width:0; }.message-name { display:flex; align-items:baseline; gap:8px; margin:3px 0 8px; font-size:11px; font-weight:800; }.message-time { font:400 9px 'DM Mono',monospace; color:#9aa09c; }.message-content { max-width:655px; font-size:13px; line-height:1.75; color:#3c4643; white-space:pre-wrap; }.message-content strong { color:#293c40; }.typing { display:flex; gap:5px; align-items:center; height:28px; }.typing i { display:block; width:6px; height:6px; border-radius:50%; background:#a8b5ae; animation:bounce 1s infinite; }.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}@keyframes bounce{50%{transform:translateY(-4px);opacity:.45}}
.welcome { align-self:center; justify-self:center; width:min(650px,calc(100% - 36px)); padding:32px 0 52px; text-align:center; }.welcome-mark { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 19px; color:#ef7654; background:#fbeddf; border-radius:50%; font-size:19px; }.welcome h2 { margin:4px 0 9px; font:600 38px/1.1 'Playfair Display',"PingFang SC",serif; letter-spacing:-.045em; }.welcome-copy { margin:0 auto 35px; color:#747b77; font-size:13px; }.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; text-align:left; }.suggestion { min-height:118px; background:#fff; border:1px solid #e7e5df; border-radius:9px; padding:14px 13px; display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; align-items:start; color:#334244; transition:.2s; }.suggestion:hover { transform:translateY(-2px); border-color:#c8d3cb; box-shadow:0 8px 18px rgba(40,54,45,.07); }.suggestion-number { color:#c5aaa0; font:500 9px 'DM Mono'; }.suggestion strong { display:block; padding-top:1px; font-size:11px; }.suggestion small { display:block; margin-top:6px; color:#848b87; font-size:9px; line-height:1.4; }.suggestion svg { width:15px; color:#9ea8a1; margin-top:1px; }
.composer-zone { width:min(790px,calc(100% - 38px)); margin:0 auto; padding:0 0 15px; }.attachments { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 7px; }.attachment { background:#edf1ed; color:#486152; border-radius:5px; padding:5px 8px; font-size:10px; }.attachment button { margin-left:6px; background:transparent; color:#728077; padding:0; }.composer { min-height:62px; padding:9px 10px 9px 12px; display:flex; align-items:flex-end; gap:8px; background:#fff; border:1px solid #d9d8d3; border-radius:12px; box-shadow:0 6px 18px rgba(39,50,44,.06); transition:.2s; }.composer:focus-within { border-color:#9baea1; box-shadow:0 6px 18px rgba(39,50,44,.1); }.composer-icon,.voice-button { width:34px; height:34px; flex:0 0 34px; border-radius:8px; background:transparent; color:#7d8580; display:grid; place-items:center; }.composer-icon:hover,.voice-button:hover { color:#254456; background:#eef2ee; }.composer-icon svg,.voice-button svg { width:19px; }.voice-button.listening { color:#d8634b; background:#fbe9e4; }.composer textarea { min-height:32px; max-height:150px; flex:1; resize:none; border:0; outline:0; padding:7px 3px; color:#303a37; line-height:1.4; font-size:12px; background:transparent; }.composer textarea::placeholder { color:#a0a5a2; }.send-button { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:8px; color:#fff; background:#254456; }.send-button:hover { background:#173746; }.send-button:disabled { color:#b4bbb7; background:#e9ebe7; cursor:not-allowed; }.send-button svg { width:17px; }.disclaimer { text-align:center; margin:10px 0 0; color:#a0a4a1; font-size:9px; }.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:10px 15px; border-radius:7px; background:#223d4b; color:#fff; font-size:11px; box-shadow:0 8px 20px rgba(0,0,0,.14); transition:.25s; z-index:30; }.toast.show { opacity:1; transform:translate(-50%,0); }
.app-shell.collapsed { grid-template-columns:70px 0 minmax(0,1fr); }.app-shell.collapsed .sidebar { width:0; opacity:0; }.app-shell.collapsed .sidebar > * { visibility:hidden; }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:22px; background:rgba(24,34,37,.45); z-index:20; }.modal-backdrop[hidden] { display:none; }.settings-modal { width:min(530px,100%); max-height:calc(100vh - 44px); overflow:auto; padding:27px; border:1px solid rgba(255,255,255,.4); border-radius:14px; background:#fbfaf7; box-shadow:0 22px 55px rgba(22,32,35,.25); }.settings-header { display:flex; align-items:start; justify-content:space-between; gap:20px; }.settings-header h2 { margin:0; color:#263a41; font-size:24px; }.modal-close { width:34px; height:34px; color:#64706d; }.modal-close:hover { background:#ecece7; color:#263a41; }.settings-notice { margin:19px 0; padding:11px 13px; border-left:3px solid #e3b471; border-radius:5px; background:#f7f0e4; color:#675c49; font-size:11px; line-height:1.6; }.settings-form { display:grid; gap:15px; }.settings-form label { display:grid; gap:7px; color:#3b4946; font-size:12px; font-weight:700; }.settings-form input,.settings-form textarea { width:100%; border:1px solid #d8d9d3; border-radius:8px; outline:none; padding:10px 11px; color:#2d3836; background:#fff; font-size:12px; font-weight:500; }.settings-form textarea { resize:vertical; line-height:1.55; }.settings-form input:focus,.settings-form textarea:focus { border-color:#8fa99b; box-shadow:0 0 0 3px rgba(143,169,155,.16); }.optional { color:#8a918d; font-weight:500; }.settings-form small { color:#808782; font-size:10px; font-weight:500; line-height:1.45; }.secret-field { display:flex; gap:7px; }.secret-field input { min-width:0; }.secret-field button { flex:0 0 auto; padding:0 12px; border-radius:8px; color:#38525a; background:#edf1ed; font-size:11px; font-weight:700; }.secret-field button:hover { background:#e0e8e1; }.settings-help { margin:0; color:#79817d; font-size:10px; line-height:1.7; }.settings-error { margin:0; padding:9px 11px; border-radius:7px; background:#fbe9e4; color:#a64e3e; font-size:11px; line-height:1.5; }.settings-actions { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:4px; }.settings-actions-right { display:flex; gap:9px; }.secondary-button,.primary-button,.danger-button { min-height:38px; padding:0 15px; border-radius:8px; font-size:12px; font-weight:700; }.secondary-button { color:#56625e; background:#ecece7; }.secondary-button:hover { background:#e2e2dc; }.primary-button { color:#fff; background:#254456; }.primary-button:hover { background:#1d3747; }.danger-button { color:#aa5545; background:#f9ece8; }.danger-button:hover { background:#f5dfd8; }
@media(max-width:850px){ :root { --sidebar:270px; }.suggestions { grid-template-columns:1fr; }.suggestion { min-height:70px; }.welcome { align-self:start; padding-top:60px; }.welcome h2 { font-size:33px; } }
@media(max-width:650px){ .app-shell { display:block; }.rail { display:none; }.sidebar { position:fixed; inset:0 auto 0 0; width:min(85vw,310px); z-index:10; box-shadow:12px 0 30px rgba(0,0,0,.1); transform:translateX(-105%); transition:transform .25s; }.app-shell.menu-open .sidebar { transform:none; }.app-shell.collapsed .sidebar { width:min(85vw,310px); opacity:1; }.app-shell.collapsed .sidebar > * { visibility:visible; }.workspace { min-height:100vh; }.topbar { height:62px; padding:0 15px; }.mobile-menu { display:grid; color:#52605d; margin-right:2px; }.crumb { margin-right:auto; }.crumb .muted,.slash { display:none; }.top-actions { gap:3px; }.share { display:none; }.model-button { max-width:160px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; padding-left:9px; }.chat-area { width:calc(100% - 30px); padding-top:25px; }.welcome { padding:43px 0 35px; }.welcome-copy { max-width:280px; }.composer-zone { width:calc(100% - 24px); }.suggestions { gap:8px; }.sidebar-head { height:100px; }.settings-modal { padding:21px; }.settings-actions,.settings-actions-right { width:100%; flex-direction:column-reverse; }.secondary-button,.primary-button,.danger-button { width:100%; } }