:root {
  --ink: #eef4e9;
  --muted: #9aa89d;
  --line: rgba(210, 233, 210, .14);
  --panel: rgba(12, 30, 27, .82);
  --panel-strong: rgba(17, 40, 35, .94);
  --accent: #e9ad5d;
  --accent-soft: #f6d397;
  --mint: #75d4a6;
  --danger: #ef8790;
  font-family: Georgia, "Noto Serif TC", "PMingLiU", serif;
  color: var(--ink);
  background: #071714;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 25% 0%, #123a31 0, transparent 29rem), linear-gradient(135deg, #071714, #0b211d 68%, #081512); }
button, textarea { font: inherit; }
input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; inset: auto; pointer-events: none; border-radius: 999px; filter: blur(60px); opacity: .18; }
.ambient-a { width: 22rem; height: 22rem; top: 10%; right: 12%; background: #b56632; }
.ambient-b { width: 18rem; height: 18rem; bottom: 5%; left: 30%; background: #208d6b; }
.shell { position: relative; width: min(1560px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: 20px 0 28px; }
.topbar { display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 0 4px 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; letter-spacing: .03em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent); color: var(--accent-soft); background: rgba(233, 173, 93, .08); font-weight: bold; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 1rem; }.brand small { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.top-status { display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: .82rem; }.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(117, 212, 166, .1); }
.account-menu { display: flex; align-items: center; gap: 7px; }.account-label { color: var(--accent-soft); font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }
.quiet-button, .icon-button { color: var(--muted); border: 1px solid var(--line); background: transparent; padding: 8px 11px; }.quiet-button:hover, .icon-button:hover { color: var(--accent-soft); border-color: var(--accent); }
.workspace { display: grid; grid-template-columns: 238px minmax(460px, 1fr) 254px; gap: 18px; padding-top: 20px; }
.sidebar, .conversation, .context-panel { min-width: 0; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(18px); }
.sidebar, .context-panel { align-self: start; padding: 18px; }.side-section + .side-section { margin-top: 26px; }.eyebrow { margin: 0 0 10px; color: var(--accent-soft); font-family: ui-monospace, Consolas, monospace; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.segmented button, .preset { color: var(--muted); border: 1px solid transparent; background: rgba(255,255,255,.025); padding: 9px; text-align: left; }.segmented button.selected, .preset.selected { color: var(--ink); border-color: rgba(233, 173, 93, .55); background: rgba(233, 173, 93, .1); }.hint { color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: .78rem; line-height: 1.6; }
.preset-list { display: grid; gap: 5px; }.preset span, .preset small { display: block; }.preset span { font-size: .92rem; }.preset small { margin-top: 3px; color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: .7rem; }
.usage-card { padding-top: 15px; border-top: 1px solid var(--line); }.task-card { padding-top: 15px; border-top: 1px solid var(--line); }.task-list { display: grid; gap: 7px; margin-top: 10px; }.task-item { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-size: .76rem; line-height: 1.45; }.task-status { color: var(--mint); font-family: ui-monospace, Consolas, monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }.usage-heading { display: flex; justify-content: space-between; align-items: start; }.icon-button { padding: 0 5px; border: 0; font-size: 1.1rem; }.usage-main { margin: 4px 0 0; font-size: 1.2rem; }.usage-link { display: inline-block; margin-top: 8px; color: var(--accent-soft); font-family: "Noto Sans TC", sans-serif; font-size: .76rem; }
.file-card { padding-top: 15px; border-top: 1px solid var(--line); }.file-input { width: 100%; margin-top: 8px; color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: .72rem; }.file-upload-button { width: 100%; margin-top: 8px; }.file-list { display: grid; gap: 6px; margin-top: 10px; }.file-item { display: flex; gap: 5px; align-items: center; min-width: 0; }.file-open, .file-remove { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-size: .7rem; }.file-open { min-width: 0; flex: 1; overflow: hidden; padding: 6px 7px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.file-remove { flex: none; padding: 6px; color: var(--danger); }
.conversation { display: flex; flex-direction: column; min-height: calc(100vh - 110px); background: linear-gradient(180deg, rgba(20, 48, 41, .9), rgba(9, 27, 24, .86)); }.conversation-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 28px 32px 23px; border-bottom: 1px solid var(--line); }.conversation h1 { max-width: 690px; margin: 0; font-size: clamp(1.4rem, 2.5vw, 2.15rem); line-height: 1.25; font-weight: normal; }.route-badge { flex: none; margin-top: 2px; padding: 5px 8px; border: 1px solid rgba(117, 212, 166, .5); color: var(--mint); font-family: ui-monospace, monospace; font-size: .7rem; }
.messages { flex: 1; padding: 28px 32px; overflow-y: auto; }.message { display: flex; gap: 11px; max-width: 860px; margin: 0 0 22px; }.message.user-message { flex-direction: row-reverse; margin-left: auto; }.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(233, 173, 93, .7); color: var(--accent-soft); font-family: ui-monospace, monospace; font-size: .72rem; }.user-message .avatar { border-color: rgba(117,212,166,.7); color: var(--mint); }.bubble { border: 1px solid var(--line); background: rgba(6, 17, 15, .48); padding: 12px 15px; font-family: "Noto Sans TC", sans-serif; font-size: .92rem; line-height: 1.75; white-space: pre-wrap; }.user-message .bubble { background: rgba(117, 212, 166, .075); }.bubble p { margin: 0 0 8px; }.bubble p:last-child { margin-bottom: 0; }.pending .bubble { color: var(--muted); font-style: italic; }
.composer { margin: 0 20px 20px; padding: 12px 14px 10px; border: 1px solid rgba(233,173,93,.36); background: rgba(5, 17, 14, .8); }.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,173,93,.1); }.composer textarea { display: block; width: 100%; min-height: 48px; max-height: 220px; resize: vertical; border: 0; outline: 0; color: var(--ink); background: transparent; font-family: "Noto Sans TC", sans-serif; font-size: .95rem; line-height: 1.6; }.composer textarea::placeholder { color: #72877d; }.composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 7px; }.composer-note { color: var(--muted); font-family: ui-monospace, monospace; font-size: .67rem; }.composer button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent); padding: 7px 11px; color: #162017; background: var(--accent); font-family: "Noto Sans TC", sans-serif; font-size: .82rem; font-weight: bold; }.composer button:disabled { opacity: .55; cursor: wait; }.composer kbd { padding: 1px 4px; border: 1px solid rgba(0,0,0,.22); font-family: ui-monospace, monospace; font-size: .64rem; }
.context-card { margin: 0 0 12px; padding: 13px; border-left: 2px solid var(--accent); background: rgba(0,0,0,.13); }.context-card p { margin: 0; color: #c8d1c8; font-family: "Noto Sans TC", sans-serif; font-size: .8rem; line-height: 1.7; }.context-card .context-label { margin-bottom: 5px; color: var(--accent-soft); font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .1em; }.muted-card { border-left-color: #59726a; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.identity-card { margin: 0; color: var(--ink); font-size: 1.05rem; }.auth-shell { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; padding: 24px; }.auth-card, .password-card { width: min(100%, 430px); border: 1px solid rgba(233,173,93,.4); background: rgba(12,30,27,.94); box-shadow: 0 22px 80px rgba(0,0,0,.38); padding: 34px; }.brand-lockup { display: flex; align-items: center; gap: 11px; }.brand-lockup strong, .brand-lockup small { display: block; }.brand-lockup small { color: var(--muted); font-size: .77rem; margin-top: 3px; }.auth-card > .eyebrow { margin-top: 34px; }.auth-card h1, .password-card h2 { margin: 0; font-size: 1.8rem; font-weight: normal; }.auth-copy { color: #c8d1c8; font-family: "Noto Sans TC", sans-serif; line-height: 1.75; }.auth-form, .password-card { display: grid; gap: 15px; }.auth-form label, .password-card label { display: grid; gap: 7px; color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: .82rem; }.auth-form input, .password-card input { width: 100%; border: 1px solid var(--line); padding: 11px 12px; color: var(--ink); background: rgba(0,0,0,.18); outline: none; }.auth-form input:focus, .password-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,173,93,.1); }.primary-button { border: 1px solid var(--accent); padding: 10px 14px; color: #162017; background: var(--accent); font-family: "Noto Sans TC", sans-serif; font-weight: bold; }.form-status { min-height: 1.3em; margin: 0; color: var(--mint); font-family: "Noto Sans TC", sans-serif; font-size: .82rem; }.form-status.is-error { color: var(--danger); }.auth-footnote { margin: 20px 0 0; color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: .72rem; line-height: 1.65; }.password-dialog { width: min(100% - 32px, 460px); padding: 0; border: 1px solid rgba(233,173,93,.5); background: transparent; color: var(--ink); }.password-dialog::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(5px); }.password-card { width: 100%; border: 0; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 1120px) { .workspace { grid-template-columns: 210px minmax(0, 1fr); }.context-panel { display: none; } }
@media (max-width: 720px) { .shell { width: min(100% - 18px, 1560px); padding-top: 9px; }.topbar { gap: 10px; padding-bottom: 10px; flex-wrap: wrap; }.top-status { display: none; }.account-menu { order: 3; width: 100%; }.quiet-button { margin-left: auto; }.workspace { display: block; padding-top: 10px; }.sidebar { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; margin-bottom: 10px; padding: 13px; }.side-section + .side-section { margin-top: 0; }.usage-card { grid-column: span 2; display: none; }.conversation { min-height: calc(100vh - 178px); }.conversation-head, .messages { padding-left: 17px; padding-right: 17px; }.conversation-head { padding-top: 21px; padding-bottom: 18px; }.conversation h1 { font-size: 1.35rem; }.messages { padding-top: 20px; }.composer { margin: 0 10px 10px; }.composer-note { display: none; }.auth-card { padding: 26px; } }

/* Warm, quiet workspace palette: intentionally closer to a document tool than an AI dashboard. */
:root { --ink: #24302c; --muted: #68736e; --line: #d9dfda; --panel: rgba(255,255,253,.92); --panel-strong: #ffffff; --accent: #1f6a55; --accent-soft: #1f6a55; --mint: #2f7a62; --danger: #b44747; color: var(--ink); background: #f6f4ee; }
body { background: radial-gradient(circle at 9% 0%, rgba(221, 234, 219, .72), transparent 31rem), radial-gradient(circle at 93% 7%, rgba(250, 232, 192, .54), transparent 27rem), #f6f4ee; }
.ambient { opacity: .12; filter: blur(82px); }.ambient-a { background: #e6c670; }.ambient-b { background: #93c5b1; }.paper-grain { position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(42, 57, 50, .12) .45px, transparent .7px); background-size: 7px 7px; mix-blend-mode: multiply; }
.shell { width: min(1440px, calc(100% - 44px)); }.topbar { border-color: var(--line); }.brand { color: var(--ink); }.brand-mark { border-color: #d0b567; color: #735d22; background: #fff8dc; }.brand small, .top-status, .account-label { color: var(--muted); }.pulse { background: var(--mint); box-shadow: 0 0 0 4px rgba(47,122,98,.11); }.quiet-button, .icon-button { color: #4e5c56; border-color: #ccd5cf; background: rgba(255,255,255,.56); border-radius: 7px; }.quiet-button:hover, .icon-button:hover { color: #145440; border-color: #8eb8a8; background: #f1f8f3; }
.bubu-presence { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(255px, 330px); align-items: center; gap: 17px; margin: 18px 0 0; padding: 12px 16px 12px 12px; border: 1px solid #dde2dd; border-radius: 12px; background: rgba(255,255,253,.84); box-shadow: 0 8px 28px rgba(48,64,55,.055); }.bubu-mascot { width: 76px; height: 76px; object-fit: cover; object-position: 50% 35%; border-radius: 10px; border: 1px solid #e7dfc9; background: #fffaf0; }.bubu-copy p:last-child { margin: 0; color: #4f5e57; font-family: "Noto Sans TC", sans-serif; font-size: .84rem; line-height: 1.65; }.model-control { display: grid; gap: 5px; color: #42524b; font-family: "Noto Sans TC", sans-serif; font-size: .78rem; }.model-control > span { color: #1f6a55; font-family: ui-monospace, Consolas, monospace; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }.model-control select { width: 100%; appearance: none; border: 1px solid #ccd8d1; border-radius: 7px; padding: 8px 10px; color: #3f5149; background: #f5f8f5; font: inherit; }.model-control select:disabled { opacity: 1; cursor: not-allowed; }.model-control small { color: #77827c; line-height: 1.45; }
.workspace { grid-template-columns: 238px minmax(460px, 1fr) 254px; }.sidebar, .conversation, .context-panel { border-color: var(--line); background: var(--panel); box-shadow: 0 7px 25px rgba(49, 62, 54, .045); backdrop-filter: none; }.sidebar, .context-panel { border-radius: 10px; }.conversation { background: rgba(255,255,253,.94); border-radius: 10px; }.conversation-head { border-color: var(--line); }.eyebrow, .context-card .context-label { color: #1f6a55; }.hint, .preset small, .composer-note { color: var(--muted); }.preset { color: #52615a; background: transparent; border-radius: 7px; }.segmented button.selected, .preset.selected { color: #213d32; border-color: #b6d4c6; background: #edf6f0; }.route-badge { color: #236a53; border-color: #aed1c0; background: #f2faf5; }.bubble { border-color: #dde2de; background: #fcfdfb; color: #33423b; }.user-message .bubble { background: #edf6f0; border-color: #c8ded2; }.avatar { border-color: #c6d4cc; color: #1f6a55; background: #f8fbf8; }.user-message .avatar { border-color: #afcfbf; color: #21634e; }.composer { border-color: #c9d8cf; border-radius: 9px; background: #fbfcfa; }.composer:focus-within { border-color: #81b49f; box-shadow: 0 0 0 3px rgba(47,122,98,.11); }.composer textarea { color: var(--ink); }.composer textarea::placeholder { color: #87938c; }.composer button, .primary-button { border-color: #1f6a55; color: #fff; background: #1f6a55; border-radius: 7px; }.composer button:hover, .primary-button:hover { background: #185842; }.context-card { border-left-color: #8ebda8; background: #f7faf7; }.context-card p { color: #526159; }.muted-card { border-left-color: #c5ccc7; }
.auth-card, .password-card { border-color: #d8ded8; background: rgba(255,255,253,.96); box-shadow: 0 22px 60px rgba(46,58,51,.12); border-radius: 14px; }.auth-copy { color: #536158; }.auth-form label, .password-card label, .auth-footnote { color: var(--muted); }.auth-form input, .password-card input { border-color: #ccd6cf; color: var(--ink); background: #fff; border-radius: 7px; }.auth-form input:focus, .password-card input:focus { border-color: #73aa94; box-shadow: 0 0 0 3px rgba(47,122,98,.1); }.auth-mascot { display: block; width: 104px; height: 104px; object-fit: cover; object-position: 50% 32%; margin: 24px auto -8px; border: 1px solid #e5ddc7; border-radius: 14px; background: #fffaf0; }
@media (max-width: 720px) { .shell { width: min(100% - 24px, 1440px); }.bubu-presence { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 10px; }.bubu-mascot { width: 54px; height: 54px; }.model-control { grid-column: 1 / -1; }.bubu-copy .eyebrow { margin-bottom: 4px; }.bubu-copy p:last-child { font-size: .76rem; }.workspace { display: block; }.sidebar, .conversation { border-radius: 9px; } }
.file-select { accent-color: var(--mint); flex: 0 0 auto; }