:root {
  color-scheme: light;
  --ink: #14231e;
  --deep: #102e27;
  --deep-2: #194438;
  --paper: #f6f2e9;
  --paper-2: #ece6da;
  --card: #fffdf8;
  --line: #d7cfc0;
  --muted: #68736d;
  --signal: #dc7240;
  --lime: #c7db78;
  --blue: #315fce;
  --red: #a74336;
  --shadow: 0 22px 60px rgba(24, 42, 35, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 300px 1fr 300px;
  align-items: center; height: 72px; padding: 0 24px; color: #fbf7ed; background: rgba(16, 46, 39, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; font: 600 15px var(--serif); }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 17px/1 var(--serif); letter-spacing: .13em; }
.brand small { margin-top: 5px; color: #afbeb6; font: 8px/1 var(--mono); letter-spacing: .11em; }
.topbar-flow { display: flex; justify-content: center; align-items: center; gap: 10px; color: #bdc9c3; font: 10px var(--mono); letter-spacing: .08em; }
.topbar-flow i { width: 30px; height: 1px; background: rgba(255,255,255,.22); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.usage-pill, .account-button { min-height: 38px; border: 1px solid rgba(255,255,255,.2); color: #f8f4ea; background: rgba(255,255,255,.06); cursor: pointer; }
.usage-pill { padding: 6px 11px; text-align: right; }
.usage-pill span, .usage-pill b { display: block; }
.usage-pill span { color: #adc0b7; font: 8px var(--mono); letter-spacing: .08em; }
.usage-pill b { margin-top: 2px; font-size: 11px; }
.account-button { display: inline-flex; align-items: center; gap: 8px; max-width: 150px; padding: 0 12px; }
.account-button b { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.account-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8b06c; box-shadow: 0 0 0 4px rgba(200,176,108,.13); }
.account-button.logged-in .account-dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(199,219,120,.13); }

.app-shell { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: 100vh; padding-top: 72px; }
.agent-rail { position: fixed; inset: 72px auto 0 0; display: flex; flex-direction: column; width: 310px; padding: 24px 18px 18px; border-right: 1px solid var(--line); background: var(--paper-2); }
.eyebrow { margin: 0 0 8px; color: var(--signal); font: 700 9px var(--mono); letter-spacing: .15em; }
.rail-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rail-title h2 { margin: 0; font: 600 25px var(--serif); }
.rail-title span { color: var(--deep); font: 700 11px var(--mono); }
.rail-head > p:last-child { margin: 11px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.agent-search { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); background: rgba(255,253,248,.7); }
.agent-search svg { width: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.agent-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.agent-list { display: grid; gap: 7px; flex: 1; min-height: 0; margin-top: 12px; padding-right: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b8b09f transparent; }
.agent-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 62px; padding: 11px; border: 1px solid transparent; background: rgba(255,253,248,.62); }
.agent-item::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--agent-color, var(--deep-2)); opacity: .75; }
.agent-item.active { border-color: var(--agent-color, var(--deep-2)); background: var(--card); box-shadow: 4px 4px 0 rgba(24,68,56,.12); }
.agent-index { display: grid; width: 32px; height: 32px; place-items: center; color: var(--agent-color, var(--deep-2)); border: 1px solid currentColor; border-radius: 50%; font: 700 9px var(--mono); }
.agent-item b { display: block; overflow: hidden; margin: 1px 0 5px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.agent-item small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agent-skeleton { height: 62px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.8), rgba(255,255,255,.35)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.service-status { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--muted); font-size: 10px; }
.service-status i { width: 7px; height: 7px; border-radius: 50%; background: #d3b55f; box-shadow: 0 0 0 4px rgba(211,181,95,.13); }
.service-status.online i { background: #759447; box-shadow: 0 0 0 4px rgba(117,148,71,.13); }
.service-status.offline i { background: #c35f4f; box-shadow: 0 0 0 4px rgba(195,95,79,.13); }
.catalog-link { display: flex; justify-content: space-between; padding: 12px 2px 2px; color: var(--deep); border-top: 1px solid var(--line); font-size: 10px; text-decoration: none; }

.chat-main { grid-column: 2; width: min(100%, 1040px); min-height: calc(100vh - 72px); margin: 0 auto; padding: 32px 42px 48px; }
.chat-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.chat-toolbar h1 { margin: 0; font: 600 clamp(23px, 2.8vw, 34px)/1.15 var(--serif); letter-spacing: -.02em; }
.quiet-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); background: rgba(255,253,248,.7); cursor: pointer; }
.quiet-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.welcome { padding: 38px 0 10px; }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 32px; align-items: stretch; }
.welcome-copy-block { padding: 28px 0 20px; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--deep); border: 1px solid #bfc9a1; border-radius: 99px; background: #f0f2d8; font: 9px var(--mono); letter-spacing: .05em; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #708c40; }
.welcome h2 { max-width: 660px; margin: 20px 0 16px; font: 600 clamp(37px, 5.2vw, 66px)/1.02 var(--serif); letter-spacing: -.045em; }
.welcome-copy-block > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.route-card { display: grid; border: 1px solid var(--deep); background: var(--deep); box-shadow: 9px 9px 0 #d9d1c1; }
.route-card div { position: relative; display: grid; grid-template-columns: 42px 1fr; align-content: center; min-height: 106px; padding: 18px 20px; color: #f6f2e9; border-bottom: 1px solid rgba(255,255,255,.15); }
.route-card div:last-child { border-bottom: 0; }
.route-card span { grid-row: 1 / span 2; color: var(--lime); font: 12px var(--mono); }
.route-card b { font: 600 17px var(--serif); }
.route-card small { margin-top: 5px; color: #afbeb7; font-size: 10px; }
.suggestions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 26px; }
.suggestions button { position: relative; min-height: 104px; padding: 15px; text-align: left; border: 1px solid var(--line); background: rgba(255,253,248,.66); cursor: pointer; transition: transform .18s, background .18s, border-color .18s; }
.suggestions button:hover { transform: translateY(-3px); border-color: var(--deep-2); background: var(--card); }
.suggestions span, .suggestions b { display: block; }
.suggestions span { margin-bottom: 14px; color: var(--signal); font: 8px var(--mono); letter-spacing: .1em; }
.suggestions b { padding-right: 18px; font-size: 11px; line-height: 1.5; }
.suggestions i { position: absolute; right: 13px; bottom: 12px; font-style: normal; }

.conversation { padding: 28px 0 6px; }
.task-thread { animation: reveal .35s both; }
.demand-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: start; margin: 0 0 22px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 10px var(--mono); }
.user-avatar { color: var(--deep); border: 1px solid var(--deep); background: var(--paper); }
.demand-bubble { max-width: 760px; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); white-space: pre-wrap; font-size: 14px; line-height: 1.75; }
.thread-card { margin-left: 57px; border: 1px solid var(--line); background: var(--card); box-shadow: 8px 8px 0 var(--paper-2); }
.thread-head { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; color: #f8f3e8; background: var(--deep); }
.specialist-avatar { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: var(--agent-color, var(--deep-2)); font: 700 9px var(--mono); }
.specialist-copy small, .specialist-copy b { display: block; }
.specialist-copy small { margin-bottom: 4px; color: #afbeb7; font: 8px var(--mono); letter-spacing: .1em; }
.specialist-copy b { font: 600 17px var(--serif); }
.task-state { text-align: right; }
.task-state b, .task-state small { display: block; }
.task-state b { color: var(--lime); font-size: 10px; }
.task-state small { margin-top: 5px; color: #aebcb5; font: 9px var(--mono); }
.progress-track { grid-column: 1 / -1; height: 3px; margin-top: 2px; background: rgba(255,255,255,.14); }
.progress-track i { display: block; height: 100%; background: var(--lime); transition: width .4s; }
.chat-stream { display: grid; gap: 14px; padding: 20px 18px; }
.chat-message { display: flex; align-items: flex-start; gap: 9px; }
.chat-message.user { justify-content: flex-end; }
.mini-avatar { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--agent-color, var(--deep-2)); font: 700 7px var(--mono); }
.message-bubble { max-width: min(86%, 720px); padding: 13px 15px; border: 1px solid var(--line); background: #f8f4eb; }
.chat-message.user .message-bubble { border-color: #b8c8e8; background: #eef3ff; }
.message-label { display: block; margin-bottom: 7px; color: var(--signal); font: 700 8px var(--mono); letter-spacing: .1em; }
.message-bubble b { display: block; margin-bottom: 5px; color: var(--deep); font-size: 11px; }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.75; }
.message-report { display: block; margin: 9px 0 0 auto; padding: 7px 0 2px 14px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.message-report:hover,.message-report:focus-visible { color: var(--red); text-decoration: underline; }
.chat-message.final .message-bubble { max-width: 100%; border-color: #9faf75; background: #fafbea; }
.chat-message.preview .message-bubble { border-style: dashed; }
.waiting-panel { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line); background: #faf7f0; }
.thinking-mark { display: flex; gap: 4px; }
.thinking-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 1.1s infinite; }
.thinking-mark i:nth-child(2) { animation-delay: .15s; }
.thinking-mark i:nth-child(3) { animation-delay: .3s; }
.waiting-panel b, .waiting-panel span { display: block; }
.waiting-panel b { font-size: 11px; }
.waiting-panel span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.clarification-form { display: grid; gap: 10px; margin: 0 18px 18px; padding: 15px; border: 1px solid #b9c5a4; background: #f5f7e6; }
.clarification-form label { font: 700 9px var(--mono); letter-spacing: .08em; }
.clarification-form textarea { width: 100%; min-height: 104px; resize: vertical; padding: 12px; color: var(--ink); border: 1px solid var(--line); outline: none; background: var(--card); font-size: 13px; line-height: 1.65; }
.clarification-form textarea:focus { border-color: var(--deep-2); box-shadow: 0 0 0 3px rgba(25,68,56,.09); }
.clarification-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clarification-actions small { color: var(--muted); font-size: 9px; }
.subscription-gate { margin: 0 18px 18px; padding: 20px; color: #f8f3e8; background: var(--deep); }
.subscription-gate .gate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.subscription-gate .eyebrow { color: var(--lime); }
.subscription-gate h3 { margin: 0 0 7px; font: 600 21px var(--serif); }
.subscription-gate p { max-width: 650px; margin: 0; color: #b9c6c0; font-size: 11px; line-height: 1.65; }
.subscription-gate button { flex: 0 0 auto; }
.task-error { margin: 0 18px 18px; padding: 16px; border: 1px solid #d5a49d; background: #fff0ed; }
.task-error b { color: var(--red); font-size: 12px; }
.task-error p { margin: 7px 0 12px; font-size: 11px; line-height: 1.55; }
.completion-note { display: flex; justify-content: space-between; gap: 12px; margin: 0 18px 18px; padding: 13px 15px; border: 1px solid #bcc8a3; background: #f3f5df; font-size: 10px; }
.delivery-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 14px; align-items: center; margin: -7px 18px 18px; padding: 16px; border: 1px solid var(--deep); background: #fbfaf4; }
.delivery-icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--deep); border: 1px solid #aebba0; background: #eef1d8; }
.delivery-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.delivery-copy small, .delivery-copy b { display: block; }
.delivery-copy small { margin-bottom: 5px; color: var(--signal); font: 8px var(--mono); letter-spacing: .1em; }
.delivery-copy b { font: 600 16px var(--serif); }
.delivery-copy p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.delivery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.source-download, .deploy-action { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--deep); font-size: 10px; text-decoration: none; cursor: pointer; }
.source-download { color: #fff; background: var(--deep); }
.deploy-action { color: var(--deep); background: transparent; }

.composer-wrap { position: relative; margin-top: 26px; }
.composer { padding: 13px 15px 14px; border: 1px solid var(--deep); background: var(--card); box-shadow: 7px 7px 0 var(--paper-2); }
.composer-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font: 9px var(--mono); }
.auto-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--deep); }
.auto-badge i { width: 7px; height: 7px; border-radius: 50%; background: #789449; }
.composer textarea { display: block; width: 100%; min-height: 70px; max-height: 190px; padding: 9px 2px; resize: none; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 15px; line-height: 1.6; }
.composer textarea::placeholder { color: #9a9d96; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.composer-footer p { margin: 0; color: var(--muted); font-size: 9px; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--paper); font: 8px var(--mono); }
.composer-footer button, .primary-action, .subscription-gate button, .clarification-actions button, .pay-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 17px; color: #fff;
  border: 1px solid var(--deep); background: var(--deep); cursor: pointer; transition: transform .16s, opacity .16s;
}
.composer-footer button:hover, .primary-action:hover, .subscription-gate button:hover, .clarification-actions button:hover, .pay-button:hover { transform: translateY(-1px); }
.composer-footer button:disabled, .primary-action:disabled, .pay-button:disabled { opacity: .55; cursor: wait; transform: none; }
.composer-footer button svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.billing-note { margin: 13px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.6; text-align: center; }
.billing-note b { color: var(--deep); }

.modal { width: min(92vw, 520px); max-height: min(90vh, 820px); padding: 0; color: var(--ink); border: 0; background: transparent; overflow: visible; }
.modal.wide, .pro-modal, .account-modal, .deployment-modal { width: min(94vw, 720px); }
.modal::backdrop { background: rgba(9, 25, 20, .72); backdrop-filter: blur(8px); }
.modal-card { position: relative; max-height: min(90vh, 820px); padding: 30px; border: 1px solid var(--deep); background: var(--card); box-shadow: 12px 12px 0 rgba(199,219,120,.45); overflow-y: auto; }
.wide-card { padding: 34px; }
.modal-close { position: absolute; top: 14px; right: 15px; width: 34px; height: 34px; color: var(--deep); border: 1px solid var(--line); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.modal h2 { margin: 0; padding-right: 35px; font: 600 30px/1.1 var(--serif); }
.modal-copy { margin: 12px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tabs button { padding: 11px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.auth-tabs button.active { color: var(--deep); border-color: var(--deep); font-weight: 700; }
.auth-modal label { display: grid; gap: 7px; margin: 12px 0; }
.auth-modal label span { color: var(--muted); font-size: 10px; }
.auth-modal input { width: 100%; height: 48px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); outline: none; background: #fbf8f1; }
.auth-modal input:focus { border-color: var(--deep-2); box-shadow: 0 0 0 3px rgba(25,68,56,.09); }
.form-error { min-height: 18px; margin: 7px 0; color: var(--red); font-size: 10px; }
.auth-modal .primary-action { width: 100%; }
.auth-modal form > small { display: block; margin-top: 13px; color: var(--muted); font-size: 9px; text-align: center; }
.pro-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1px solid var(--line); }
.pro-points span { padding: 12px; border-right: 1px solid var(--line); font-size: 10px; text-align: center; }
.pro-points span:last-child { border-right: 0; }
.pro-offers { display: grid; gap: 12px; }
.pro-offer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); background: #faf7ef; }
.pro-offer h3 { margin: 0 0 6px; font: 600 20px var(--serif); }
.pro-offer p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.pro-offer .price { color: var(--deep); font: 700 21px var(--serif); text-align: right; }
.pro-offer .pay-button { grid-column: 2; min-width: 150px; }
.pay-button.alipay { color: #fff; border-color: #1677ff; background: #1677ff; }
.pay-button.paypal { color: #fff; border-color: #173f89; background: #173f89; }
.panel-loading { padding: 24px; color: var(--muted); border: 1px dashed var(--line); font-size: 11px; text-align: center; }
.payment-status { min-height: 18px; margin: 14px 0 0; color: var(--deep); font-size: 11px; }
.payment-status.error { color: var(--red); }
.payment-disclosure { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.manual-checkout { display: inline-flex; margin-top: 10px; padding: 10px 14px; color: #fff; background: var(--deep); text-decoration: none; }

.account-content { display: grid; gap: 15px; }
.profile-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; color: #fff; background: var(--deep); }
.profile-card h2 { padding: 0; font-size: 25px; }
.profile-card p { margin: 6px 0 0; color: #b7c5be; font-size: 10px; }
.membership-badge { padding: 7px 10px; color: var(--deep); border-radius: 99px; background: var(--lime); font: 700 10px var(--mono); }
.token-card { padding: 17px; border: 1px solid var(--line); background: #faf7ef; }
.token-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.token-card-head b { font: 600 18px var(--serif); }
.token-card-head span { color: var(--muted); font-size: 10px; }
.token-numbers { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--deep); font: 10px var(--mono); }
.token-track { height: 8px; margin-top: 8px; background: var(--paper-2); overflow: hidden; }
.token-track i { display: block; height: 100%; background: var(--blue); }
.token-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.account-link { display: inline-flex; align-items: center; justify-content: center; color: var(--deep); text-decoration: none; }
.account-link.danger { color: var(--red); }
.secondary-action, .text-action { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.text-action { color: var(--red); border-color: transparent; }
.task-history { border-top: 1px solid var(--line); }
.task-history h3 { margin: 17px 0 9px; font: 600 19px var(--serif); }
.history-list { display: grid; gap: 7px; }
.history-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px; text-align: left; border: 1px solid var(--line); background: #faf8f2; cursor: pointer; }
.history-item b, .history-item small { display: block; }
.history-item b { overflow: hidden; margin-bottom: 4px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.history-item small { color: var(--muted); font-size: 9px; }
.history-item > span { align-self: center; color: var(--signal); font: 9px var(--mono); }
.empty-copy { padding: 15px; color: var(--muted); border: 1px dashed var(--line); font-size: 11px; text-align: center; }

.deployment-task-summary { display: grid; gap: 4px; margin: -5px 0 18px; padding: 13px 15px; border-left: 3px solid var(--lime); background: var(--deep); color: #fff; }
.deployment-task-summary small { color: #b9c6c0; font: 8px var(--mono); letter-spacing: .1em; }
.deployment-task-summary b { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.deployment-grid { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 13px; }
.deployment-grid label { display: grid; gap: 7px; }
.deployment-grid label span { color: var(--muted); font-size: 10px; }
.deployment-grid input { width: 100%; height: 47px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); outline: none; background: #fbf8f1; }
.deployment-grid input:focus { border-color: var(--deep-2); box-shadow: 0 0 0 3px rgba(25,68,56,.09); }
.deployment-grid input:disabled { opacity: .65; }
.secret-notice { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 13px; color: var(--muted); border: 1px solid #c9cfb3; background: #f5f6e7; font-size: 9px; line-height: 1.55; }
.secret-notice svg { flex: 0 0 auto; width: 20px; fill: none; stroke: var(--deep); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.secret-notice b { color: var(--deep); }
.deployment-verification { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1px; margin-top: 12px; border: 1px solid #aebba0; background: #aebba0; }
.deployment-verification[hidden] { display: none; }
.deployment-verification > div { min-width: 0; padding: 11px 13px; background: #f3f5df; }
.deployment-verification small, .deployment-verification b, .deployment-verification code { display: block; }
.deployment-verification small { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.deployment-verification b, .deployment-verification code { overflow-wrap: anywhere; color: var(--deep); font: 10px var(--mono); }
.deployment-status { min-height: 18px; margin: 14px 0 0; color: var(--muted); font-size: 10px; }
.deployment-status[data-mode="success"] { color: #39704f; }
.deployment-status[data-mode="error"] { color: var(--red); }
.deployment-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--line); }
.test-connection-action { min-height: 42px; padding: 0 15px; color: var(--deep); border: 1px solid var(--deep); background: transparent; cursor: pointer; }
.test-connection-action:disabled, .deployment-actions button:disabled { opacity: .5; cursor: wait; }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; color: #fff; background: var(--deep); box-shadow: var(--shadow); font-size: 11px; line-height: 1.5; }
.toast.error { background: var(--red); }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 260px 1fr 260px; }
  .app-shell { grid-template-columns: 270px minmax(0,1fr); }
  .agent-rail { width: 270px; }
  .chat-main { padding-inline: 28px; }
  .suggestions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; height: 64px; padding: 0 16px; }
  .topbar-flow, .usage-pill { display: none !important; }
  .brand-mark { width: 38px; height: 38px; }
  .app-shell { display: block; padding-top: 64px; }
  .agent-rail { display: none; }
  .chat-main { width: 100%; padding: 24px 20px 40px; }
  .welcome-grid { grid-template-columns: 1fr; }
  .route-card { grid-template-columns: repeat(3, 1fr); }
  .route-card div { grid-template-columns: 1fr; min-height: 120px; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 0; }
  .route-card span { grid-row: auto; margin-bottom: 10px; }
  .thread-card { margin-left: 0; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 12px; }
  .brand small { display: none; }
  .account-button { max-width: 125px; padding-inline: 10px; }
  .chat-main { padding: 20px 14px 34px; }
  .chat-toolbar { align-items: center; }
  .chat-toolbar .eyebrow { display: none; }
  .chat-toolbar h1 { font-size: 22px; }
  .quiet-button { padding: 0 10px; font-size: 10px; }
  .welcome { padding-top: 24px; }
  .welcome-copy-block { padding-top: 8px; }
  .welcome h2 { font-size: 42px; }
  .welcome-copy-block > p { font-size: 12px; }
  .route-card { grid-template-columns: 1fr; }
  .route-card div { grid-template-columns: 38px 1fr; min-height: 88px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .route-card span { grid-row: 1 / span 2; margin: 0; }
  .suggestions { grid-template-columns: 1fr 1fr; }
  .suggestions button { min-height: 96px; }
  .demand-row { grid-template-columns: 36px minmax(0,1fr); gap: 9px; }
  .avatar { width: 36px; height: 36px; }
  .demand-bubble { padding: 13px; font-size: 12px; }
  .thread-head { grid-template-columns: 42px minmax(0,1fr); padding: 13px; }
  .specialist-avatar { width: 40px; height: 40px; }
  .task-state { grid-column: 1 / -1; display: flex; justify-content: space-between; text-align: left; }
  .chat-stream { padding: 14px 11px; }
  .message-bubble { max-width: calc(100% - 36px); padding: 11px 12px; }
  .subscription-gate { margin-inline: 11px; padding: 16px; }
  .subscription-gate .gate-top { display: grid; }
  .clarification-form, .task-error, .completion-note, .delivery-card { margin-inline: 11px; }
  .delivery-card { grid-template-columns: 42px minmax(0,1fr); }
  .delivery-icon { width: 42px; height: 42px; }
  .delivery-actions { grid-column: 1 / -1; justify-content: stretch; }
  .delivery-actions > * { flex: 1 1 130px; }
  .composer-footer p { display: none; }
  .composer-footer { justify-content: flex-end; }
  .composer-footer button { width: 100%; }
  .modal-card, .wide-card { padding: 25px 18px 20px; }
  .modal h2 { font-size: 26px; }
  .pro-points { grid-template-columns: 1fr; }
  .pro-points span { border-right: 0; border-bottom: 1px solid var(--line); }
  .pro-points span:last-child { border-bottom: 0; }
  .pro-offer { grid-template-columns: 1fr; }
  .pro-offer .price { text-align: left; }
  .pro-offer .pay-button { grid-column: 1; width: 100%; }
  .deployment-grid { grid-template-columns: 1fr; }
  .deployment-verification { grid-template-columns: 1fr; }
  .deployment-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .deployment-actions .primary-action { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .toast { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}