:root {
  color-scheme: dark;
  --ws-bg: #0b0b0a;
  --ws-panel: #11110f;
  --ws-panel-raised: #171713;
  --ws-border: rgba(255,255,255,.085);
  --ws-text: #f4f2ec;
  --ws-muted: #a09e94;
  --ws-soft: #6f6d65;
  --ws-gold: #d4af37;
  --ws-gold-bright: #ead07b;
  --ws-green: #88bc91;
  --ws-red: #de8876;
  --ws-sans: 'Manrope', sans-serif;
  --ws-mono: 'DM Mono', monospace;
  font-family: var(--ws-sans);
  background: var(--ws-bg);
  color: var(--ws-text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.workspace-page { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 78% -12%, rgba(174,136,37,.11), transparent 42%), var(--ws-bg); }
body.workspace-page button, body.workspace-page input, body.workspace-page textarea { font: inherit; }
body.workspace-page button { color: inherit; }
body.workspace-page a { color: inherit; text-decoration: none; }
.workspace-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0,1fr); }
.workspace-sidebar { height: 100vh; min-height: 640px; position: sticky; top: 0; display: flex; flex-direction: column; padding: 23px 15px 14px; background: rgba(13,13,12,.92); border-right: 1px solid var(--ws-border); }
.workspace-brand, .mobile-brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.brand-mark { width: 26px; height: 27px; display: grid; place-items: center; clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(145deg,#f0dc8d,#a98120); color: #0b0b0a; font-size: 16px; font-weight: 800; }
.brand-muted { color: #a6a399; }
.new-session-button { margin-top: 35px; height: 43px; width: 100%; border: 1px solid rgba(212,175,55,.3); border-radius: 7px; background: linear-gradient(110deg,rgba(212,175,55,.13),rgba(212,175,55,.04)); display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; font-size: 11px!important; font-weight: 700!important; transition: background .2s,border-color .2s; }
.new-session-button:hover { border-color: rgba(212,175,55,.65); background: rgba(212,175,55,.17); }
.new-session-button:disabled { opacity: .45; cursor: not-allowed; }
.new-session-button>span { color: var(--ws-gold-bright); font-size: 18px; font-weight: 400; }
.sidebar-section-label { margin: 31px 9px 10px; font: 8px var(--ws-mono); letter-spacing: .15em; color: #716f66; }
.sidebar-session { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 5px; font-size: 10px; color: #d8d5ca; }
.active-session { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.055); }
.session-icon { color: var(--ws-gold); font-size: 16px; }
.session-live-dot { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--ws-green); box-shadow: 0 0 8px rgba(136,188,145,.65); }
.sidebar-spacer { flex: 1; min-height: 30px; }
.pilot-card { margin: 0 2px 14px; padding: 13px 12px 12px; border: 1px solid var(--ws-border); border-radius: 7px; background: linear-gradient(140deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.pilot-card-top { display: flex; align-items: center; gap: 7px; font: 8px var(--ws-mono); letter-spacing: .12em; color: #cac6b8; }
.pilot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ws-green); box-shadow: 0 0 8px rgba(136,188,145,.5); }
.pilot-card p { margin: 9px 0 11px; font-size: 10px; line-height: 1.65; color: var(--ws-muted); }
.pilot-card a { font-size: 9px; font-weight: 700; color: var(--ws-gold-bright); }
.pilot-card a span { margin-left: 4px; }
.sidebar-account { display: flex; align-items: center; gap: 9px; padding: 12px 5px 3px; border-top: 1px solid var(--ws-border); }
.account-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #282316; color: var(--ws-gold-bright); font-size: 12px; font-weight: 800; }
.account-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.account-copy strong { font-size: 9px; font-weight: 700; }
.account-copy small { color: var(--ws-soft); font-size: 8px; }
.icon-button { border: 0; background: transparent; color: #8e8b81!important; cursor: pointer; }
.sidebar-settings { padding: 5px; font-size: 15px!important; }
.workspace-main { min-width: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; }
.workspace-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 30px; border-bottom: 1px solid var(--ws-border); background: rgba(12,12,11,.6); }
.workspace-title-group, .header-controls { display: flex; align-items: center; gap: 13px; }
.workspace-kicker { color: #93804c; font: 8px var(--ws-mono); letter-spacing: .13em; }
.workspace-header h1 { margin: 4px 0 0; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.mobile-brand { display: none; }
.header-controls { gap: 16px; }
.workspace-model { height: 29px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--ws-border); border-radius: 5px; color: #b8b5a9; font-size: 9px; }
.model-spark { color: var(--ws-gold); font-size: 12px; }
.key-button { height: 30px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(212,175,55,.31); border-radius: 5px; background: rgba(212,175,55,.08); padding: 0 10px; color: #e8d894!important; cursor: pointer; font-size: 9px!important; font-weight: 700!important; }
.key-button:hover { background: rgba(212,175,55,.14); }
.key-indicator { width: 5px; height: 5px; border-radius: 50%; background: var(--ws-red); }
.key-indicator.key-saved { background: var(--ws-green); box-shadow: 0 0 8px rgba(136,188,145,.55); }
.header-home { color: #87847a!important; font-size: 9px; }
.header-home:hover { color: var(--ws-text)!important; }
.header-home span { margin-left: 3px; }
.conversation { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.conversation-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 50px 24px 24px; scrollbar-color: #38362f transparent; }
.welcome-state { width: min(100%,680px); margin: 19px auto 34px; text-align: center; animation: welcome-in .45s ease both; }
.welcome-emblem { position: relative; width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(212,175,55,.48); border-radius: 15px; background: radial-gradient(circle at 50% 100%,rgba(212,175,55,.18),transparent 70%),#15130e; transform: rotate(45deg); box-shadow: 0 0 34px rgba(212,175,55,.07); }
.welcome-emblem span { color: var(--ws-gold-bright); font-size: 20px; font-weight: 800; transform: rotate(-45deg); }
.welcome-emblem i { position: absolute; inset: -7px; border: 1px solid rgba(212,175,55,.16); border-radius: 18px; animation: emblem-pulse 3s ease-in-out infinite; }
.welcome-eyebrow { color: #a8904b; font: 8px var(--ws-mono); letter-spacing: .16em; }
.welcome-state h2 { margin: 15px 0 9px; font-size: clamp(26px,3vw,37px); line-height: 1.2; letter-spacing: -.055em; font-weight: 600; }
.welcome-state>p { max-width: 460px; margin: 0 auto; color: var(--ws-muted); font-size: 11px; line-height: 1.75; }
.suggestion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px auto 0; max-width: 590px; text-align: left; }
.suggestion-card { min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.085); border-radius: 7px; background: rgba(255,255,255,.022); cursor: pointer; text-align: left; transition: .18s ease; }
.suggestion-card:hover { border-color: rgba(212,175,55,.42); background: rgba(212,175,55,.055); transform: translateY(-1px); }
.suggestion-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 6px; background: rgba(212,175,55,.11); color: var(--ws-gold-bright); font-size: 15px; }
.suggestion-card>span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.suggestion-card strong { overflow: hidden; color: #e6e3d9; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-card small { color: #7c7970; font-size: 8px; }
.suggestion-arrow { color: #79766c; font-size: 11px; }
.welcome-note { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 20px; color: #78766d; font-size: 8px; }
.welcome-note span { width: 13px; height: 13px; display: inline-grid; place-items: center; border: 1px solid #65572d; border-radius: 50%; color: var(--ws-gold); font: 8px var(--ws-mono); }
.message-list { width: min(100%,780px); margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.message { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; align-items: start; animation: message-in .25s ease both; }
.message-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 10px; font-weight: 800; }
.message-user .message-avatar { background: #24231f; color: #cbc8be; }
.message-assistant .message-avatar { border: 1px solid rgba(212,175,55,.34); background: #19160e; color: var(--ws-gold-bright); }
.message-content { min-width: 0; padding: 3px 0; }
.message-label { margin: 0 0 6px; color: #77746c; font: 8px var(--ws-mono); letter-spacing: .1em; text-transform: uppercase; }
.message-text { margin: 0; color: #e9e7e0; font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-assistant .message-text { color: #dedcd3; }
.tool-steps { max-width: 100%; margin-top: 14px; border: 1px solid var(--ws-border); border-radius: 6px; background: rgba(255,255,255,.018); overflow: hidden; }
.tool-steps summary { display: flex; align-items: center; gap: 8px; padding: 9px 11px; color: #c2b378; cursor: pointer; list-style: none; font: 8px var(--ws-mono); letter-spacing: .05em; }
.tool-steps summary::-webkit-details-marker { display: none; }
.tool-steps summary:after { content: '＋'; margin-left: auto; color: #827d6c; }
.tool-steps[open] summary:after { content: '−'; }
.tool-step-list { margin: 0; padding: 0 11px 10px; list-style: none; }
.tool-step { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 7px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.055); }
.tool-step-number { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: rgba(136,188,145,.1); color: var(--ws-green); font: 8px var(--ws-mono); }
.tool-step-body { min-width: 0; }
.tool-step-title { color: #d9d6cb; font-size: 9px; font-weight: 700; }
.tool-step-output { margin: 4px 0 0; color: #89867b; font: 8px/1.6 var(--ws-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.working-card { width: min(100%,780px); display: flex; align-items: center; gap: 11px; margin: 2px auto 12px; padding: 12px; border: 1px solid rgba(212,175,55,.18); border-radius: 7px; background: rgba(212,175,55,.035); animation: message-in .2s ease both; }
.working-mark { display: flex; gap: 3px; align-items: center; height: 19px; }
.working-mark i { width: 4px; height: 7px; border-radius: 2px; background: var(--ws-gold); animation: working-wave .9s ease-in-out infinite alternate; }
.working-mark i:nth-child(2) { animation-delay: .2s; }.working-mark i:nth-child(3) { animation-delay: .4s; }
.working-card>span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.working-card strong { color: #e6d494; font-size: 9px; }
.working-card small { color: #8d897a; font-size: 8px; }
.working-label { color: #8c7940; font: 7px var(--ws-mono); letter-spacing: .1em; }
.composer-dock { flex: 0 0 auto; padding: 13px 24px 16px; border-top: 1px solid rgba(255,255,255,.045); background: linear-gradient(180deg,rgba(11,11,10,.7),#0b0b0a 28%); }
.composer-wrap { width: min(100%,780px); margin: 0 auto; }
.composer-hint { display: flex; align-items: center; gap: 7px; margin: 0 0 8px 2px; color: #77746b; font-size: 8px; }
.hint-dot { width: 5px; height: 5px; border-radius: 50%; background: #80ad85; }
.composer { border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #141411; box-shadow: 0 8px 34px rgba(0,0,0,.26); transition: border-color .2s,box-shadow .2s; }
.composer:focus-within { border-color: rgba(212,175,55,.45); box-shadow: 0 0 0 3px rgba(212,175,55,.055),0 8px 34px rgba(0,0,0,.26); }
.composer textarea { display: block; width: 100%; max-height: 180px; min-height: 50px; resize: none; outline: none; border: 0; padding: 15px 15px 5px; background: transparent; color: var(--ws-text); font-size: 11px!important; line-height: 1.6; }
.composer textarea::placeholder { color: #69675f; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 8px 14px; }
.composer-meta { color: #69675f; font-size: 7px; }.composer-meta span { margin: 0 4px; color: #49473f; }
.send-button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #8e742a; border-radius: 7px; background: linear-gradient(145deg,#e1c65d,#b88b2a); color: #17140b!important; cursor: pointer; font-size: 18px!important; font-weight: 600!important; transition: .18s ease; }
.send-button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.send-button:disabled { border-color: #39372f; background: #292821; color: #716e63!important; cursor: not-allowed; }
.composer-disclaimer { margin: 7px 0 0; text-align: center; color: #5e5c55; font-size: 7px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.key-dialog { width: min(100% - 30px,440px); max-width: 440px; padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #11110f; color: var(--ws-text); box-shadow: 0 30px 100px rgba(0,0,0,.68); }
.key-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(5px); }
.key-dialog-card { position: relative; padding: 28px; }
.dialog-close { position: absolute; top: 13px; right: 15px; width: 27px; height: 27px; border: 0; border-radius: 5px; background: transparent; color: #8e8b81!important; cursor: pointer; font-size: 20px!important; }
.dialog-close:hover { background: rgba(255,255,255,.06); color: white!important; }
.dialog-mark { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid rgba(212,175,55,.3); border-radius: 9px; background: rgba(212,175,55,.08); color: var(--ws-gold-bright); font-size: 15px; }
.dialog-eyebrow { color: #9c8544; font: 8px var(--ws-mono); letter-spacing: .15em; }
.key-dialog h2 { margin: 7px 0 8px; font-size: 21px; letter-spacing: -.04em; }
.dialog-description { margin: 0 0 20px; color: #9b988f; font-size: 10px; line-height: 1.7; }
.key-input-label { display: block; margin-bottom: 7px; color: #938f82; font: 8px var(--ws-mono); letter-spacing: .12em; }
.key-input-wrap { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: #0b0b0a; }
.key-input-wrap:focus-within { border-color: rgba(212,175,55,.55); }
.key-input-wrap input { flex: 1; min-width: 0; height: 42px; border: 0; outline: none; background: transparent; padding: 0 11px; color: var(--ws-text); font: 10px var(--ws-mono)!important; }
.key-input-wrap input::placeholder { color: #5e5b52; }
.show-key-button { margin-right: 5px; padding: 6px 7px; border: 0; border-radius: 4px; background: transparent; color: #a59f8a!important; cursor: pointer; font-size: 8px!important; }
.show-key-button:hover { background: rgba(255,255,255,.055); }
.key-storage-note { display: flex; gap: 7px; margin: 9px 0 14px; color: #77746b; font-size: 8px; line-height: 1.5; }
.key-error { margin: 0 0 12px; color: #ec9d89; font-size: 9px; }
.dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.dialog-save { height: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 6px; background: linear-gradient(110deg,#e3ca70,#b88c2b); color: #19150b!important; cursor: pointer; font-size: 10px!important; font-weight: 800!important; }
.dialog-save:hover { filter: brightness(1.08); }
.dialog-save span { font-size: 15px; }
.dialog-clear { padding: 6px; border: 0; background: transparent; color: #c07a69!important; cursor: pointer; font-size: 8px!important; }
.dialog-clear:hover { color: #e59581!important; }
.dialog-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--ws-border); color: #625f55; font: 7px var(--ws-mono); letter-spacing: .06em; }
.dialog-footer a { color: #d1b858; font: 8px var(--ws-sans); font-weight: 700; letter-spacing: 0; }
.dialog-footer a span { margin-left: 3px; }
.toast-region { position: fixed; z-index: 20; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; width: min(360px,calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(22,22,19,.98); box-shadow: 0 10px 35px rgba(0,0,0,.4); animation: toast-in .2s ease both; }
.toast-icon { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(222,136,118,.13); color: var(--ws-red); font-size: 10px; }
.toast-copy { flex: 1; color: #d8d4c9; font-size: 9px; line-height: 1.55; }
.toast-copy strong { display: block; margin-bottom: 2px; color: #eeeae1; font-size: 9px; }
.toast-action { padding: 0; border: 0; background: transparent; color: var(--ws-gold-bright)!important; cursor: pointer; font-size: 8px!important; font-weight: 700!important; }
.toast-dismiss { border: 0; background: transparent; color: #817d72!important; cursor: pointer; font-size: 13px!important; }
.toast-success .toast-icon { background: rgba(136,188,145,.13); color: var(--ws-green); }
.toast-success .toast-copy strong { color: #b4d8b7; }
@keyframes welcome-in { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:translateY(0) } }
@keyframes message-in { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:translateY(0) } }
@keyframes toast-in { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:translateY(0) } }
@keyframes emblem-pulse { 0%,100% { transform:scale(.94);opacity:.4 } 50% { transform:scale(1.06);opacity:1 } }
@keyframes working-wave { from { height:5px;opacity:.55 } to { height:16px;opacity:1 } }
@media (max-width: 900px) { .workspace-shell { grid-template-columns:220px minmax(0,1fr); }.workspace-header { padding:0 20px; }.header-controls { gap:9px; }.workspace-model { display:none; }.conversation-scroll { padding-top:38px; } }
@media (max-width: 680px) {
  .workspace-shell { display:block; }.workspace-sidebar { display:none; }.workspace-main { height:100dvh; min-height:560px; }.workspace-header { min-height:62px; padding:0 14px; }.mobile-brand { display:inline-flex; }.workspace-title-group { gap:10px; }.workspace-kicker { font-size:7px; }.workspace-header h1 { font-size:12px; }.header-controls { gap:8px; }.header-home { display:none; }.key-button { height:28px; padding:0 8px; font-size:8px!important; }
  .conversation-scroll { padding:32px 16px 18px; }.welcome-state { margin:10px auto 26px; }.welcome-emblem { width:43px;height:43px;margin-bottom:16px; }.welcome-state h2 { font-size:29px; }.welcome-state>p { max-width:350px;font-size:10px; }.suggestion-grid { grid-template-columns:1fr; gap:7px; margin-top:21px; }.suggestion-card { min-height:55px; }.welcome-note { align-items:flex-start; line-height:1.6; }
  .message-list { gap:22px; }.message { grid-template-columns:25px minmax(0,1fr); gap:9px; }.message-avatar { width:24px;height:24px; }.message-text { font-size:11px; }.working-card { gap:8px;padding:10px; }.working-label { display:none; }
  .composer-dock { padding:10px 12px max(12px,env(safe-area-inset-bottom)); }.composer-hint { font-size:7px; }.composer textarea { min-height:48px;padding:13px 12px 4px; }.composer-disclaimer { font-size:6px; }.key-dialog-card { padding:24px 20px 19px; }.dialog-footer { flex-direction:column; }.toast-region { right:12px;bottom:12px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }