:root { --ink:#252721; --muted:#72746c; --paper:#f5f1e8; --card:#fbfaf5; --line:#ded9cb; --accent:#dc5a35; --sage:#6b8370; --shadow:0 18px 55px rgba(49,45,34,.08); }
* { box-sizing:border-box; } html,body { height:100%; overflow:hidden; } body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"Source Han Sans SC", sans-serif; } button,textarea { font:inherit; } button { cursor:pointer; } .paper-noise { position:fixed; inset:0; pointer-events:none; opacity:.13; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); }
.app-shell { height:100dvh; max-width:1500px; margin:auto; display:grid; grid-template-columns:290px minmax(0,1fr); position:relative; overflow:hidden; } .sidebar { border-right:1px solid var(--line); padding:30px 20px 22px; display:flex; flex-direction:column; min-height:0; } .brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px; font:700 25px "Noto Serif SC",serif; letter-spacing:-2px; padding-left:6px; } .brand-mark { width:31px; height:31px; display:grid; place-items:center; color:#fff; background:var(--accent); border-radius:50%; font-family:Georgia; font-size:22px; }
.new-chat { border:1px solid var(--ink); background:transparent; margin:38px 0 8px; height:44px; border-radius:3px; text-align:left; padding:0 13px; font-weight:600; transition:.2s; } .new-chat:hover { background:var(--ink); color:#fff; transform:translateY(-1px); }.clear-history { border:0; background:transparent; color:var(--muted); padding:7px 4px 22px; text-align:left; font-size:11px; text-decoration:underline; text-underline-offset:3px; }.clear-history:hover { color:var(--accent); }.side-label,.eyebrow { color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }.side-label { padding:0 7px 10px; }.conversation-list { overflow:auto; display:flex; flex-direction:column; gap:3px; }.conversation-item { border:0; background:transparent; color:#5f615a; text-align:left; padding:9px 8px; border-radius:4px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.conversation-item:hover,.conversation-item.active { background:#e8e4d9; color:var(--ink); }.privacy-note { border-top:1px solid var(--line); margin-top:auto; padding:17px 6px 0; display:flex; gap:9px; color:var(--muted); font-size:11px; line-height:1.55; }.privacy-note span:first-child { color:var(--sage); }.privacy-note p { margin:0; }
.workspace { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; min-height:0; height:100dvh; }.topbar { min-height:105px; padding:25px 48px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.topbar-title { display:flex; align-items:center; gap:14px; min-width:0; }.topbar h1 { margin:5px 0 0; font:600 22px "Noto Serif SC",serif; letter-spacing:-1px; }.sidebar-toggle,.sidebar-backdrop { display:none; }.model-status { font:11px "DM Mono",monospace; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; }.model-status i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--sage); box-shadow:0 0 0 4px rgba(107,131,112,.12); }.messages { overflow:auto; min-height:0; padding:46px max(7vw,48px); overscroll-behavior:contain; }.welcome { max-width:690px; margin:12vh auto 0; animation:appear .7s ease both; }.welcome-orb { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#e8b54f; color:#fff; font:36px Georgia; margin-bottom:25px; box-shadow:6px 7px 0 #efd9a3; }.welcome h2 { font:600 clamp(31px,4vw,49px) "Noto Serif SC",serif; letter-spacing:-3px; margin:10px 0 14px; }.welcome>p:not(.eyebrow) { color:var(--muted); max-width:490px; line-height:1.8; margin:0; }.suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }.suggestions button { border:1px solid var(--line); color:#4c4e48; background:rgba(255,255,255,.32); padding:9px 13px; border-radius:20px; font-size:12px; transition:.2s; }.suggestions button:hover { border-color:var(--accent); color:var(--accent); }
.message { max-width:760px; margin:0 auto 30px; animation:rise .35s ease both; }.message-meta { display:flex; gap:9px; align-items:center; color:var(--muted); font:11px "DM Mono",monospace; margin-bottom:9px; }.message-meta .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }.message.assistant .dot { background:var(--sage); }.message-content { white-space:pre-wrap; font-size:15px; line-height:1.83; }.message.user .message-content { padding:16px 19px; background:#e9e5da; border-radius:2px 15px 15px 15px; }.message.assistant .message-content { font-size:16px; }.message-content img { display:block; max-width:260px; max-height:220px; object-fit:cover; border-radius:7px; margin:10px 0; }.doc-pill { display:inline-flex; gap:8px; align-items:center; padding:7px 10px; margin:0 5px 6px 0; border:1px solid #d1cbbb; border-radius:4px; background:#f7f5ee; color:#5d6058; font:11px "DM Mono",monospace; }.thinking { margin:0 0 15px; border-left:2px solid #bdc9b7; padding:4px 0 4px 13px; color:#697067; font-size:13px; line-height:1.7; }.thinking summary { cursor:pointer; color:var(--sage); font:500 11px "DM Mono",monospace; letter-spacing:.04em; }.thinking div { margin-top:8px; white-space:pre-wrap; }
.message { max-width:760px; margin:0 auto 30px; animation:rise .35s ease both; }.message-meta { display:flex; gap:9px; align-items:center; color:var(--muted); font:11px "DM Mono",monospace; margin-bottom:9px; }.message-meta .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }.message.assistant .dot { background:var(--sage); }.message-content { white-space:pre-wrap; font-size:15px; line-height:1.83; }.message.user .message-content { padding:16px 19px; background:#e9e5da; border-radius:2px 15px 15px 15px; }.message.assistant .message-content { font-size:16px; }.message-content img { display:block; max-width:260px; max-height:220px; object-fit:cover; border-radius:7px; margin:10px 0; }.doc-pill { display:inline-flex; gap:8px; align-items:center; padding:7px 10px; margin:0 5px 6px 0; border:1px solid #d1cbbb; border-radius:4px; background:#f7f5ee; color:#5d6058; font:11px "DM Mono",monospace; }.thinking { margin:0 0 15px; border-left:2px solid #bdc9b7; padding:4px 0 4px 13px; color:#697067; font-size:13px; line-height:1.7; }.thinking summary { cursor:pointer; color:var(--sage); font:500 11px "DM Mono",monospace; letter-spacing:.04em; }.thinking div { margin-top:8px; white-space:pre-wrap; }.markdown-body { white-space:normal; overflow-wrap:anywhere; }.markdown-body > :first-child { margin-top:0; }.markdown-body > :last-child { margin-bottom:0; }.markdown-body h1,.markdown-body h2,.markdown-body h3 { font-family:"Noto Serif SC",serif; letter-spacing:-.5px; line-height:1.35; margin:1.25em 0 .55em; }.markdown-body h1 { font-size:1.5em; }.markdown-body h2 { font-size:1.28em; }.markdown-body h3 { font-size:1.08em; }.markdown-body p { margin:.65em 0; }.markdown-body ul,.markdown-body ol { padding-left:1.55em; margin:.65em 0; }.markdown-body blockquote { margin:.8em 0; padding:.1em 1em; color:#66695f; border-left:3px solid #bdc9b7; background:#f3f1e9; }.markdown-body code { font:12px "DM Mono",monospace; padding:.15em .35em; background:#ece9df; border-radius:3px; }.markdown-body pre { overflow:auto; padding:13px 15px; background:#292b27; color:#edf0e9; border-radius:5px; line-height:1.65; }.markdown-body pre code { padding:0; background:transparent; color:inherit; }.markdown-body table { display:block; overflow:auto; width:max-content; max-width:100%; border-collapse:collapse; margin:1em 0; font-size:.88em; }.markdown-body th,.markdown-body td { padding:7px 10px; border:1px solid #d8d3c6; text-align:left; }.markdown-body th { background:#ece9df; }.markdown-body a { color:#a84228; text-decoration-color:#d7a093; text-underline-offset:3px; }
.composer-zone { padding:0 max(7vw,48px) 23px; background:linear-gradient(transparent,var(--paper) 23%); }.attachment-tray { max-width:760px; margin:auto; display:flex; gap:7px; flex-wrap:wrap; min-height:0; }.attachment-card { border:1px solid var(--line); background:var(--card); padding:6px 8px; border-radius:5px; font-size:11px; display:flex; align-items:center; gap:7px; }.attachment-card button { border:0; background:none; color:var(--muted); padding:0; font-size:15px; }.composer { max-width:760px; min-height:65px; margin:8px auto 0; background:var(--card); border:1px solid #c9c2b2; box-shadow:var(--shadow); display:flex; align-items:center; border-radius:4px; padding:9px 10px; }.composer:focus-within { border-color:var(--ink); }.upload-button { width:34px; height:36px; display:grid; place-items:center; flex:0 0 auto; color:var(--muted); cursor:pointer; transition:color .2s,transform .2s; }.upload-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.upload-button:hover { color:var(--accent); transform:translateY(-1px); }.upload-button input { display:none; } textarea { flex:1; resize:none; border:0; outline:0; background:transparent; color:var(--ink); line-height:1.5; padding:8px 4px; max-height:160px; }.send-button { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border:0; color:white; background:var(--accent); border-radius:50%; box-shadow:0 3px 9px rgba(220,90,53,.24); transition:background .2s,transform .2s,box-shadow .2s; }.send-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }.send-button:hover { background:#bd4528; transform:translateY(-1px); box-shadow:0 5px 12px rgba(220,90,53,.3); }.send-button:disabled { opacity:.45; cursor:wait; transform:none; box-shadow:none; }.composer-help { max-width:760px; margin:8px auto 0; color:#99998f; font:10px "DM Mono",monospace; }
@keyframes appear { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }@keyframes rise {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:700px) { .app-shell{grid-template-columns:1fr}.sidebar{position:absolute;z-index:3;inset:0 auto 0 0;width:min(84vw,320px);padding:24px 20px 20px;background:var(--paper);box-shadow:18px 0 38px rgba(49,45,34,.14);transform:translateX(-105%);transition:transform .22s ease}.app-shell.sidebar-open .sidebar{transform:translateX(0)}.sidebar-backdrop{position:absolute;z-index:2;inset:0;border:0;background:rgba(37,39,33,.32);opacity:0;pointer-events:none;transition:opacity .22s ease}.app-shell.sidebar-open .sidebar-backdrop{display:block;opacity:1;pointer-events:auto}.sidebar-toggle{display:grid;place-content:center;gap:4px;flex:0 0 auto;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--card)}.sidebar-toggle span{display:block;width:16px;height:1px;background:var(--ink)}.topbar{min-height:76px;padding:17px 20px}.topbar h1{font-size:18px}.model-status{max-width:115px;text-align:right;line-height:1.5}.messages{padding:28px 20px}.welcome{margin:7vh auto 0}.composer-zone{padding:0 14px 15px}.message-content{font-size:14px}.message.assistant .message-content{font-size:15px} }