:root { color-scheme: light; font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif; color: #173b2e; background: #e8f0e9; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-width: 320px; overflow: hidden; }
button, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
:is(button, textarea, select, summary):focus-visible { outline: 3px solid #75bd88; outline-offset: 3px; }

.workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr) 292px; width: 100%; height: 100vh; height: 100dvh; max-width: 1800px; margin: 0 auto; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; min-height: 0; padding: 28px 18px 22px; overflow-y: auto; color: #edf7ef; background: #173b2e; }
.brand { display: flex; align-items: center; gap: 12px; padding: 3px 8px 31px; }
.brand strong { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.04em; }
.brand > div > span { display: block; margin-top: 2px; color: #b3cfbd; font-size: 12px; }
.brand-mark { display: grid; gap: 3px; width: 33px; transform: skewY(-15deg); }
.brand-mark span { height: 6px; border-radius: 2px; background: #78bf8d; }
.brand-mark span:nth-child(2) { width: 76%; background: #b3dc9e; }
.brand-mark span:nth-child(3) { width: 53%; background: #d0e9bd; }
.new-conversation { width: 100%; padding: 11px 15px; border: 1px solid #6d9a77; border-radius: 8px; color: #fff; background: #285641; text-align: left; font-weight: 700; }
.new-conversation span { margin-right: 7px; font-size: 20px; line-height: 0; vertical-align: -1px; }
.new-conversation:hover { background: #34704f; }
.sidebar-section { margin-top: 39px; }
.sidebar-section h2, .sidebar-section label { display: block; margin: 0 8px 12px; color: #b3cfbd; font-size: 12px; font-weight: 600; }
.prompt-example { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-radius: 6px; color: #edf7ef; background: transparent; text-align: left; font-size: 14px; }
.prompt-example:hover, .prompt-example:focus-visible { background: #285641; }
.prompt-example span { color: #a9d89f; }
.source-section select, .model-section select { width: 100%; padding: 11px; border: 1px solid #688d72; border-radius: 7px; color: #fff; background: #234b38; font-size: 13px; }
.model-section { margin-top: 25px; }
.selection-status { min-height: 36px; margin: 10px 3px 0; color: #b7d0bc; font-size: 12px; line-height: 1.5; }
.sidebar-note { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 23px 8px 0; color: #b3cfbd; font-size: 12px; line-height: 1.5; }
.note-indicator { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #a3d995; }

.main-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #f8fbf7; }
.workspace-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 32px clamp(22px, 4vw, 58px) 22px; border-bottom: 1px solid #d8e7d8; }
.section-label { margin: 0 0 8px; color: #54735c; font-size: 12px; }
.workspace-header h1 { margin: 0; color: #193c2c; font-size: clamp(25px, 2.5vw, 37px); font-weight: 700; letter-spacing: -.05em; line-height: 1.2; }
.header-state { flex: none; padding: 6px 10px; border: 1px solid #bfdac4; border-radius: 20px; color: #286145; background: #e9f5e9; font-size: 12px; }
.path-strip { display: flex; align-items: center; gap: 8px; padding: 13px clamp(22px, 4vw, 58px); border-bottom: 1px solid #e0ebe0; color: #688470; font-size: 12px; white-space: nowrap; overflow-x: auto; }
.path-strip i { flex: 0 0 18px; height: 1px; background: #91b39a; position: relative; }
.path-strip i::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 4px solid #91b39a; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.history { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 15px; padding: 34px clamp(22px, 4vw, 58px) 40px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #a8c8ad transparent; }
.empty-state { margin: auto; max-width: 360px; text-align: center; color: #657e6a; }
.empty-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 19px; border: 1px solid #a8d0ac; border-radius: 17px; color: #397f50; background: #edf7ec; font-family: Georgia, serif; font-size: 47px; line-height: 1; }
.empty-state h2 { margin: 0 0 9px; color: #254a32; font-size: 22px; font-weight: 700; }
.empty-state p { margin: 0; font-size: 14px; line-height: 1.7; }
.empty-state .empty-hint { margin-top: 19px; color: #31794a; font-size: 13px; }
.message { max-width: min(84%, 620px); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-role { display: block; margin-bottom: 6px; color: #6b8771; font-size: 11px; font-weight: 700; }
.message-body { margin: 0; font-size: 14px; line-height: 1.7; }
.result-table { max-width: 100%; margin: 12px 0 0; }
.result-table figcaption { margin-bottom: 7px; color: #315c3d; font-size: 12px; font-weight: 700; }
.result-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #cfdfd0; border-radius: 7px; background: #fff; }
.result-table-wrap:focus-visible { outline: 3px solid #75bd88; outline-offset: 2px; }
.result-table-grid { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 12px; text-align: left; }
.result-table-grid th, .result-table-grid td { padding: 9px 11px; border-bottom: 1px solid #e4eee4; white-space: nowrap; }
.result-table-grid th { color: #345e3e; background: #edf6ed; font-weight: 700; }
.result-table-grid tbody tr:last-child td { border-bottom: 0; }
.table-next-page { margin-top: 8px; border: 1px solid #b9cfbb; border-radius: 7px; padding: 7px 12px; color: #315c3d; background: #f4faf4; cursor: pointer; }
.table-next-page:disabled { color: #748477; background: #f2f4f2; cursor: not-allowed; }
.message.user { align-self: flex-end; padding: 12px 17px; border-radius: 14px 14px 3px 14px; color: #fff; background: #286347; }
.message.user .message-role { color: #cce9d0; }
.message.assistant, .message.clarify, .message.error { align-self: flex-start; padding: 12px 0 12px 18px; border-left: 3px solid #68ad75; }
.message.clarify { border-color: #d69b45; }
.message.error { border-color: #c66565; color: #963a42; }
.composer-wrap { padding: 0 clamp(22px, 4vw, 58px) 26px; }
.composer { border: 1px solid #b5d0b9; border-radius: 13px; background: #fff; box-shadow: 0 7px 24px #315c370d; }
.composer:focus-within { border-color: #4c9563; box-shadow: 0 0 0 3px #78bc8529; }
.composer textarea { display: block; width: 100%; min-height: 75px; max-height: 24vh; resize: vertical; padding: 16px 18px 7px; border: 0; outline: 0; border-radius: 13px; color: #173b2e; background: transparent; font-size: 15px; line-height: 1.6; }
.composer textarea::placeholder { color: #829b86; }
.composer textarea:focus-visible { outline: 0; }
.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 9px 9px 18px; }
.composer-footer > span { color: #7d9681; font-size: 11px; }
.composer-footer button { flex: none; padding: 9px 15px; border: 0; border-radius: 7px; color: #fff; background: #286b43; font-size: 13px; font-weight: 700; }
.composer-footer button:hover { background: #1d5636; }
.composer-footer button span { margin-left: 8px; }
.composer-note { margin: 9px 2px 0; color: #829b86; font-size: 11px; }

.inspector { min-height: 0; padding: 35px 20px; overflow-y: auto; border-left: 1px solid #d5e4d6; background: #edf4ed; }
.inspector-heading h2 { margin: 0 0 5px; font-size: 17px; }
.inspector-heading p { margin: 0 0 30px; color: #728b76; font-size: 12px; line-height: 1.5; }
.decision-summary { padding: 0 0 22px; }
.decision-summary h3 { margin: 0 0 8px; color: #2a5739; font-size: 13px; }
.decision-summary p { margin: 0 0 12px; color: #426a4b; font-size: 12px; line-height: 1.6; }
.decision-summary ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: #56745a; font-size: 11px; line-height: 1.5; }
.decision-summary li { padding-left: 2px; overflow-wrap: anywhere; }
.trace-details { border-top: 1px solid #c9dccb; border-bottom: 1px solid #c9dccb; }
.trace-details summary { display: flex; justify-content: space-between; padding: 14px 0; color: #2a5739; font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; }
.trace-details summary::-webkit-details-marker { display: none; }
.trace-details summary span { transition: transform .2s ease; }
.trace-details[open] summary span { transform: rotate(180deg); }
.trace-details pre { max-height: 48vh; margin: 0 0 17px; padding: 13px; overflow: auto; border: 1px solid #d4e4d4; border-radius: 5px; color: #426a4b; background: #f9fcf9; font-family: Consolas, "Courier New", monospace; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.inspector-help { padding-top: 28px; }
.inspector-help h3 { margin: 0 0 9px; color: #3a6044; font-size: 13px; }
.inspector-help p { margin: 0; color: #728d77; font-size: 12px; line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, auto); }
  .sidebar { grid-row: 1 / 3; }
  .inspector { grid-column: 2; max-height: 175px; padding: 12px 28px 18px; border-left: 0; border-top: 1px solid #d5e4d6; }
  .inspector-heading { display: none; }
  .inspector-heading p { margin-bottom: 13px; }
  .inspector-help { display: none; }
  .trace-details pre { max-height: 100px; }
}
@media (max-width: 700px) {
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .sidebar { display: grid; grid-row: 1; grid-template-columns: 1fr auto; gap: 11px; padding: 17px 18px; }
  .brand { padding: 0; }
  .brand strong { font-size: 18px; }
  .brand > div > span { display: none; }
  .brand-mark { width: 25px; }
  .new-conversation { width: auto; padding: 8px 11px; font-size: 12px; }
  .sidebar-section:not(.source-section):not(.model-section), .sidebar-note { display: none; }
  .source-section, .model-section { grid-column: 1 / -1; margin: 0; }
  .source-section label, .model-section label { margin: 3px 0 7px; }
  .source-section select, .model-section select { max-width: 100%; }
  .selection-status { min-height: 0; margin: 6px 0 0; }
  .main-area { grid-row: 2; }
  .workspace-header { padding: 23px 20px 19px; }
  .workspace-header h1 { font-size: 26px; }
  .header-state { display: none; }
  .path-strip { gap: 6px; padding: 11px 20px; font-size: 11px; }
  .path-strip i { flex-basis: 12px; }
  .history { padding: 24px 20px; }
  .message { max-width: 95%; }
  .composer-wrap { padding: 0 17px 22px; }
  .inspector { grid-column: 1; grid-row: 3; max-height: 130px; padding: 7px 19px 11px; }
}
@media (prefers-reduced-motion: reduce) { .trace-details summary span { transition: none; } }