:root { color-scheme: light; --ink:#292d2b; --muted:#858b82; --paper:#f8f9f4; --lime:#d6ed91; --line:#e5e9dd; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.48; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid #7f9f46; outline-offset:3px; }
.app-shell { height:100dvh; min-height:520px; display:flex; overflow:hidden; }
.sidebar { width:260px; flex:none; background:#24342d; color:#f7faef; padding:31px 20px 23px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 7px; }
.brand-mark { width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--lime); color:#24342d; }
.brand-mark.small { width:40px; height:40px; border-radius:12px; }
.brand strong { display:block; font-size:19px; letter-spacing:-.8px; line-height:1.1; }
.brand span { display:block; margin-top:5px; font-size:9px; font-weight:700; letter-spacing:1.7px; color:#9db0a2; }
.new-chat { height:46px; margin-top:44px; border:1px solid #61756a; border-radius:10px; color:#f7faef; background:#33493e; text-align:left; padding:0 13px; font-size:13px; font-weight:600; display:flex; gap:10px; align-items:center; transition:background .2s; }
.new-chat:hover { background:#40594c; }
.sidebar-section { margin-top:37px; }
.section-label, .header-label { color:#a3b3a5; font-weight:700; font-size:9px; letter-spacing:1.4px; }
.sidebar-current { background:#354a3e; margin-top:12px; padding:12px 10px; border-radius:9px; color:#e7f1e4; font-size:12px; display:flex; align-items:center; gap:10px; }
.sidebar-current span:nth-child(2) { flex:1; }
.current-dot, .status-dot { display:inline-block; width:6px; height:6px; background:#bada7b; border-radius:100%; }
.sidebar-bottom { margin-top:auto; padding:24px 12px 4px; border-top:1px solid #42584b; }
.sidebar-sparkle { color:var(--lime); font-size:24px; }
.sidebar-bottom p { font-family:'DM Serif Display',Georgia,serif; font-size:23px; line-height:1.2; margin:12px 0 17px; font-weight:400; }
.sidebar-bottom p strong { color:var(--lime); font-weight:400; font-style:italic; }
.chat-main { min-width:0; flex:1; display:flex; flex-direction:column; background:var(--paper); }
.chat-header { height:93px; flex:none; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 45px; background:rgba(255,255,255,.3); }
.header-label { color:#a1aa99; }
.chat-header h1 { font-size:16px; letter-spacing:-.25px; margin:6px 0 0; }
.chat-header h1 span { color:#a3bd69; font-size:13px; padding-left:4px; }
.header-actions { display:flex; gap:8px; align-items:center; }
.download, .mobile-new { height:37px; border:1px solid #dfe5d8; border-radius:9px; background:white; color:#657061; display:flex; align-items:center; gap:8px; padding:0 13px; font-size:11px; font-weight:600; }
.download:hover, .mobile-new:hover { background:#f3f7e9; }
.mobile-new { display:none; }
.conversation { overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; }
.welcome { margin:auto; padding:48px 24px 30px; text-align:center; width:min(100%,760px); }
.welcome-icon { margin:auto auto 27px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:22px; background:#e9f3d1; color:#5f7844; transform:rotate(-5deg); }
.welcome-kicker { color:#9aa58c; font-size:10px; font-weight:700; letter-spacing:2px; }
.welcome h2 { margin:13px 0 14px; font-family:'DM Serif Display',Georgia,serif; font-weight:400; letter-spacing:-1.7px; line-height:1.08; font-size:clamp(37px,4.7vw,58px); color:#27352d; }
.welcome h2 em { font-weight:400; color:#91ad65; }
.welcome > p { margin:0 auto; max-width:370px; color:#899387; font-size:13px; line-height:1.8; }
.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:42px auto 0; max-width:660px; text-align:left; }
.suggestions button { color:#8da768; background:#fff; border:1px solid #e7ebdf; border-radius:13px; padding:17px 16px; text-align:left; font-size:18px; transition:transform .18s,border-color .18s; }
.suggestions button:hover { border-color:#b9cf92; transform:translateY(-2px); }
.suggestions span, .suggestions small { display:block; }
.suggestions span { margin-top:14px; font-size:12px; font-weight:700; color:#3c493f; }
.suggestions small { font-size:10px; color:#a2aa9d; margin-top:6px; }
.messages { width:min(100%,850px); margin:0 auto; padding:36px 35px 24px; }
.message { display:flex; gap:14px; margin-bottom:30px; }
.avatar { width:34px; height:34px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.assistant .avatar { background:#e4efcf; color:#64814a; }
.user .avatar { background:#dbe5df; color:#51675a; }
.message-body { min-width:0; flex:1; padding-top:2px; }
.message-name { font-size:12px; font-weight:700; color:#536155; margin-bottom:9px; }
.message-content { overflow-wrap:anywhere; color:#3f4941; font-size:14px; line-height:1.8; }
.message-content > :first-child { margin-top:0; }
.message-content > :last-child { margin-bottom:0; }
.message-content p { margin:0 0 1em; }
.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6 { color:#283c2e; line-height:1.3; margin:1.25em 0 .55em; }
.message-content h1 { font-size:1.55em; }
.message-content h2 { font-size:1.35em; }
.message-content h3 { font-size:1.18em; }
.message-content h4, .message-content h5, .message-content h6 { font-size:1em; }
.message-content ul, .message-content ol { margin:.55em 0 1em; padding-left:1.6em; }
.message-content li + li { margin-top:.25em; }
.message-content li > p { margin:.3em 0; }
.message-content a { color:#4b743f; text-decoration:underline; text-underline-offset:3px; }
.message-content a:hover { color:#304e2b; }
.message-content :not(pre) > code { padding:.12em .35em; border-radius:4px; background:#e8ede3; color:#334c37; font-size:.92em; }
.message-content pre { margin:.8em 0 1em; padding:14px 16px; overflow-x:auto; border:1px solid #dce5d6; border-radius:10px; background:#eef3e9; color:#304332; font-size:12.5px; line-height:1.55; white-space:pre; overflow-wrap:normal; }
.message-content code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.message-content blockquote { margin:.8em 0; padding:.1em 0 .1em 1em; border-left:3px solid #b6ce91; color:#687767; }
.message-content table { display:block; width:max-content; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:.8em 0 1em; }
.message-content th, .message-content td { border:1px solid #dce5d6; padding:6px 10px; text-align:left; }
.message-content th { background:#eef3e9; font-weight:700; }
.message-content hr { border:0; border-top:1px solid #dce5d6; margin:1.25em 0; }
.message-content img { max-width:100%; height:auto; }
.message-content .katex { font-size:1em; }
.message-content .katex-display { max-width:100%; margin:.8em 0; padding:.15em 0; overflow-x:auto; overflow-y:hidden; }
.message-content .math-inline-display, .message-content eqn { display:block; max-width:100%; }
.message-content eq { display:inline; }
.message-content section.eqno { display:flex; align-items:center; gap:1em; }
.message-content section.eqno > eqn { flex:1; min-width:0; }
.message-content section.eqno > span { flex:none; }
.thinking { color:#a0aa9a; font-size:13px; }
.thinking span { animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.compose-wrap { width:min(100%,850px); margin:0 auto; padding:10px 35px 26px; }
.composer { display:flex; align-items:flex-end; gap:12px; padding:13px 13px 13px 18px; background:white; border:1px solid #e0e7d9; box-shadow:0 7px 30px #48613b0c; border-radius:14px; }
.composer:focus-within { border-color:#adca8c; }
.composer textarea { flex:1; resize:none; min-height:35px; max-height:150px; padding:8px 0; border:0; outline:none; background:transparent; color:#344135; font-size:13px; line-height:19px; }
.composer textarea::placeholder { color:#b1b9ae; }
.send { flex:none; height:36px; width:36px; border:0; border-radius:10px; background:#c9e484; color:#334930; display:flex; align-items:center; justify-content:center; }
.send:hover:not(:disabled) { background:#b9d975; }
.compose-footer { display:flex; justify-content:space-between; gap:10px; padding:12px 2px 0; color:#a6aea1; font-size:10px; }
.status-dot { margin-right:5px; }
.error { color:#ae554d; font-size:12px; line-height:1.5; }
.chat-error { margin:0 0 10px; }
@media (max-width:760px) {
  .sidebar { display:none; }
  .chat-header { height:76px; padding:0 20px; }
  .mobile-new { display:flex; }
  .compose-wrap { padding:10px 18px 19px; }
  .messages { padding:28px 20px 20px; }
  .suggestions { margin-top:30px; gap:8px; }
  .suggestions button { padding:13px 11px; }
  .suggestions span { font-size:11px; }
}
@media (max-width:480px) {
  .welcome { padding-top:25px; }
  .welcome-icon { margin-bottom:20px; }
  .welcome h2 { font-size:39px; }
  .suggestions { grid-template-columns:1fr; gap:7px; margin-top:25px; }
  .suggestions button { display:grid; grid-template-columns:26px 1fr; align-items:center; padding:10px 13px; }
  .suggestions span { margin:0; }
  .suggestions small { display:none; }
  .download span, .shortcut { display:none; }
  .download { padding:0 10px; }
  .compose-footer { font-size:9px; }
}