:root {
  color-scheme:light; --ink:#14213a; --muted:#53647d; --line:#e0e6ef; --soft:#f5f7fb;
  --nav:#101b30; --blue:#2f61df; --blue-dark:#234fc4; --blue-soft:#eef3ff;
  --green:#116c57; --red:#9d3844; font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:#fff;
}
* {box-sizing:border-box}
body {margin:0}
button,input,textarea,select {font:inherit}
button {cursor:pointer}
button:disabled {opacity:.5;cursor:default}
button,a,input,textarea,select {outline-offset:3px}
:focus-visible {outline:3px solid #6c8dff}
[hidden] {display:none !important}
.sr-only,.skip-link:not(:focus) {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus {position:fixed;top:8px;left:8px;z-index:20;padding:8px 16px;background:white}
.shell {display:grid;grid-template-columns:246px minmax(0,1fr);height:100vh;height:100dvh}
.sidebar {min-height:0;display:flex;flex-direction:column;background:var(--nav);color:#d9e2ef;padding:20px 13px 12px}
.brand {display:flex;align-items:center;gap:10px;margin:0 7px 23px;color:#fff;font-size:18px;letter-spacing:-.025em;font-weight:750}
.brand-mark,.agent-mark {display:grid;place-items:center;flex:none;color:white;background:linear-gradient(145deg,#7797ff,#3163e3 58%,#2447b2);box-shadow:inset 0 1px 0 #ffffff4d,0 4px 12px #2447b22e}
.brand-mark {width:33px;height:33px;border-radius:10px}
.create,.nav-queue,.nav-item,.logout,.close-menu,.mobile-menu,.mobile-tabs button,.choice,.notice button,.dialog-top button {border:0;background:transparent;color:inherit}
.create,.nav-queue {display:flex;align-items:center;gap:9px;width:100%;min-height:41px;text-align:left;font-weight:650;border-radius:9px;padding:8px 12px}
.create {background:#ffffff0f;color:white;border:1px solid #ffffff26}
.create span {font-size:19px;line-height:1}
.create:hover,.nav-queue:hover,.nav-item:hover {background:#ffffff15}
.nav-queue {margin:8px 0 3px;justify-content:space-between}
.nav-queue.current,.nav-item.current {background:#263756;color:white}
.count {border-radius:6px;background:#334561;min-width:22px;text-align:center;font-size:12px}
.nav-scroll {min-height:0;overflow:auto;flex:1}
.nav-section h2 {margin:21px 9px 6px;color:#94a3b8;font-size:11px;font-weight:650}
.nav-item {display:block;width:100%;padding:8px 10px;border-radius:8px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-item.store::before {content:"◇";color:#9db6ff;margin-right:9px}
.nav-item.project::before {content:"▱";color:#a8bbeb;margin-right:9px}
.nav-item.chat.current {box-shadow:inset 2px 0 #90a8ff}
.nav-note {margin:5px 10px;color:#96a5ba;font-size:12px}
.account {margin:14px 1px 0;padding:14px 5px 0;border-top:1px solid #ffffff24;display:flex;align-items:center;gap:9px}
.avatar {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;color:#234fc4;background:#e2eaff;font-weight:700;flex:none}
#username {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout {margin-left:auto;font-size:12px;color:#c4d2e5;padding:6px}
.main {min-width:0;min-height:0;display:flex;flex-direction:column}
.topbar {min-height:66px;display:flex;gap:12px;align-items:center;padding:10px 24px;border-bottom:1px solid var(--line)}
.top-copy {min-width:0}
.top-copy h1,.top-copy p {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.top-copy h1 {font-size:16px;letter-spacing:-.015em}
.top-copy p {color:var(--muted);font-size:12px}
.back-project {display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0;border:0;background:none;color:var(--blue-dark);font-size:12px;text-align:left}
.back-project:hover {text-decoration:underline}
.mobile-menu,.close-menu,.mobile-tabs,.nav-shade {display:none}
.bench {min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.chat-pane,.result-pane {min-width:0;min-height:0;display:flex;flex-direction:column}
.chat-pane {border-right:1px solid var(--line)}
.message-scroll,.result-scroll,.queue-page {min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}
.message-scroll {padding:26px clamp(15px,2.2vw,40px)}
.messages {display:grid;gap:21px;max-width:730px;margin:auto}
.message {min-width:0;display:flex;align-items:flex-start;gap:10px}
.agent-mark {width:29px;height:29px;border-radius:9px}
.message-copy {min-width:0}
.message-copy b {font-size:12px}
.message-copy p,.draft-body,.card-note {margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.message.owner {justify-content:flex-end}
.message.owner .message-copy {max-width:88%;padding:9px 13px;background:var(--blue);color:white;border-radius:13px 4px 13px 13px}
.message.owner .message-copy b {color:#e1eaff}
.message.owner p {margin-top:2px}
.welcome {padding:clamp(32px,9vh,90px) 0 24px}
.welcome .brand-mark {width:42px;height:42px;font-size:21px;margin-bottom:16px}
.welcome h2,.queue-title {margin:0;font-size:clamp(21px,2.2vw,31px);line-height:1.18;letter-spacing:-.035em}
.welcome p,.empty-copy {color:var(--muted);margin:8px 0}
.wait {padding:5px 20px;color:var(--muted);font-size:12px}
.compose {display:flex;align-items:flex-end;gap:8px;margin:12px clamp(12px,2vw,30px) 18px;padding:7px;border:1px solid #c9d4e4;border-radius:13px;background:white;box-shadow:0 3px 12px #14213a09}
.compose:focus-within {border-color:#7e9afe;box-shadow:0 0 0 2px #2f61df13}
.compose textarea {flex:1;min-width:0;min-height:42px;max-height:160px;border:0;resize:vertical;padding:5px 7px;color:var(--ink);background:transparent}
.compose textarea:focus {outline:none}
.send {border:0;width:38px;height:38px;flex:none;border-radius:9px;background:var(--blue);color:white;font-size:23px;font-weight:700}
.result-pane {background:var(--soft)}
.pane-heading {display:flex;gap:9px;align-items:center;padding:18px clamp(15px,2vw,28px) 10px}
.pane-heading h2 {font-size:14px;margin:0}
.pane-mark {color:var(--blue)}
.result-scroll {padding:8px clamp(12px,1.7vw,26px) 24px}
.result-scroll>.empty-copy {margin:10px 0}
.draft {background:white;border:1px solid var(--line);border-radius:14px;padding:clamp(14px,1.6vw,24px);box-shadow:0 3px 12px #14213a06}
.draft-controls {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.draft-controls select {font-size:12px;border:1px solid var(--line);background:white;border-radius:7px;padding:6px;max-width:100%;color:var(--ink)}
.status {padding:4px 8px;border-radius:6px;font-size:12px;background:#edf0f6;color:var(--muted)}
.status.approved {color:var(--green);background:#e6f5ef}
.status.pending {color:#855511;background:#fff2db}
.draft h3 {margin:16px 0 10px;line-height:1.25;font-size:20px;overflow-wrap:anywhere}
.draft-body {margin:0;color:#334158}
.cards {display:grid;gap:9px;margin:16px 0}
.product-card {min-width:0;padding:13px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;overflow-wrap:anywhere}
.product-card h4 {margin:0 0 7px;font-size:12px;color:var(--muted)}
.product-card .product-name {display:block;font-size:15px}
.product-card.proposal {border-color:#b9cbfa;background:#f3f6ff}
.card-note {font-size:13px;color:var(--muted)}
.source-link {color:var(--blue-dark);text-underline-offset:2px;overflow-wrap:anywhere}
.actions {display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.primary,.secondary {min-height:38px;border-radius:9px;padding:8px 13px;font-weight:650;font-size:13px}
.primary {background:var(--blue);color:white;border:1px solid var(--blue)}
.primary:hover:not(:disabled),.send:hover:not(:disabled) {background:var(--blue-dark)}
.secondary {background:white;color:var(--ink);border:1px solid #cad5e5}
.approved-note {margin:12px 0 0;color:var(--green);font-size:13px}
.queue-page {background:var(--soft);padding:25px clamp(16px,4vw,70px)}
.queue-list {max-width:820px;margin:auto;display:grid;gap:10px}
.queue-row {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;background:white;border:1px solid var(--line);border-radius:11px;color:var(--ink);padding:14px 16px;text-align:left}
.queue-row:hover,.choice:hover,.secondary:hover {background:#f4f7ff}
.queue-row b,.queue-row small {display:block;overflow-wrap:anywhere}
.queue-row small {color:var(--muted);margin-top:3px}
.project-inner {width:min(100%,820px);margin:auto}
.project-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.project-top h2 {margin:0;font-size:17px}
.project-field {min-width:0;border:1px solid var(--line);border-radius:9px;padding:6px 10px 10px;margin:4px 0}
.project-field legend {padding:0 4px;font-size:13px;font-weight:650}
#project-checks {max-height:min(34vh,280px);overflow:auto}
.project-group {margin:9px 0 2px;color:var(--muted);font-size:12px}
.dialog-form .project-option {display:flex;align-items:flex-start;gap:9px;padding:7px 3px;font-weight:400;overflow-wrap:anywhere;cursor:pointer}
.dialog-form .project-option input {width:17px;height:17px;min-height:0;margin:2px 0 0;padding:0;flex:none;accent-color:var(--blue)}
.notice {padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--red);background:#fff1f2;overflow-wrap:anywhere}
.notice button {font-weight:650;text-decoration:underline}
dialog {border:1px solid var(--line);border-radius:16px;padding:19px;width:min(380px,calc(100% - 28px));color:var(--ink);box-shadow:0 18px 60px #14213a30}
dialog::backdrop {background:#14213a65}
.dialog-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dialog-top h2 {font-size:19px;margin:0}
.dialog-top button,.close-menu {min-width:36px;min-height:36px;border-radius:7px;font-size:23px}
.choices,.dialog-form,.login-form {display:grid;gap:9px}
.choice {display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-align:left}
.choice span {color:var(--blue)}
.dialog-form input,.dialog-form select,.login-form input {width:100%;min-height:42px;border:1px solid #c7d1e1;border-radius:8px;padding:8px 10px;background:white;color:var(--ink)}
.dialog-form label,.login-form label {font-size:13px;font-weight:650}
.dialog-form .primary {margin-top:5px}
.dialog-error,.login-error {color:var(--red);overflow-wrap:anywhere}
.login-page {min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:var(--soft)}
.login-box {width:min(100%,370px);background:white;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 12px 35px #14213a0d}
.login-brand {color:var(--ink);margin:0 0 24px}
.login-box h1 {margin:0 0 16px;font-size:24px;letter-spacing:-.03em}
.login-error:empty {display:none}
.login-form input+.primary,.login-form input+label {margin-top:7px}
@media (max-width:1050px) and (min-width:761px) {
  .shell {grid-template-columns:196px minmax(0,1fr)}
  .bench {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
@media (max-width:760px) {
  .shell {display:block}
  .main {height:100%}
  .sidebar {display:none;position:fixed;inset:0 auto 0 0;width:min(290px,85vw);z-index:11}
  .shell.nav-open .sidebar {display:flex}
  .nav-shade:not([hidden]) {display:block;position:fixed;inset:0;border:0;background:#0e193c6e;z-index:10}
  .close-menu {display:block;margin-left:auto;color:#d7e1f0}
  .mobile-menu {display:block;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:17px}
  .topbar {min-height:56px;padding:8px 12px}
  .mobile-tabs:not([hidden]) {display:flex;border-bottom:1px solid var(--line)}
  .mobile-tabs button {flex:1;padding:10px 4px;color:var(--muted);font-weight:650}
  .mobile-tabs button[aria-pressed=true] {color:var(--blue-dark);box-shadow:inset 0 -2px var(--blue)}
  .bench {display:flex}
  .chat-pane,.result-pane {width:100%;border:none}
  .result-pane {display:none}
  .bench.show-result .chat-pane {display:none}
  .bench.show-result .result-pane {display:flex}
  .message-scroll {padding:19px 14px}
  .compose {margin:8px 10px max(10px,env(safe-area-inset-bottom))}
  .compose textarea,.dialog-form input,.dialog-form select,.login-form input {font-size:16px}
}