:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1015; color: #e9f0f0; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; cursor: pointer; }
.shell { max-width: 1440px; margin: auto; padding: 36px 34px 70px; }
header, .section-heading, .detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
header { margin-bottom: 31px; }
.capture-signal { display: flex; align-items: center; gap: 10px; margin: -12px 0 26px; padding: 12px 15px; border: 1px solid #30454b; border-radius: 10px; background: #152229; color: #c5d9dc; font-size: 13px; }
.signal-light { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #788d94; }
.capture-signal.active .signal-light { background: #69dfbc; box-shadow: 0 0 0 5px #69dfbc25; animation: signal-pulse 1s ease-in-out infinite; }
.capture-signal.answered .signal-light { background: #69dfbc; }
.capture-signal.error .signal-light { background: #ef9e9e; }
@keyframes signal-pulse { 50% { opacity: .4; box-shadow: 0 0 0 9px #69dfbc10; } }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .17em; color: #78d9c1; }
h1 { margin: 7px 0 6px; font-size: clamp(32px, 5vw, 48px); letter-spacing: -.055em; line-height: 1.08; }
h2 { margin: 0; letter-spacing: -.025em; }
.subtitle, p { color: #9ba9af; }
.subtitle { margin: 0; font-size: 15px; }
.live { display: flex; align-items: center; gap: 8px; border: 1px solid #27443f; background: #10241f; color: #a7e9d4; border-radius: 999px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.live.offline { background: #282019; color: #e9c599; border-color: #4c392b; }
.dot { width: 7px; height: 7px; background: #5ee2b3; border-radius: 50%; box-shadow: 0 0 0 3px #5ee2b320; }
.offline .dot { background: #e2a95e; }
.setup-details { margin-bottom: 18px; }
.setup-details > summary, .screenshot-details > summary { width: fit-content; cursor: pointer; color: #a9d8cc; font-size: 12px; font-weight: 700; }
.setup-details > summary { padding: 7px 0; }
.setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #29343b; padding: 1px; border-radius: 17px; overflow: hidden; margin-top: 10px; margin-bottom: 10px; }
.setup-step { display: flex; gap: 14px; background: #121b21; padding: 21px; min-width: 0; }
.step-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 7px; background: #25433d; color: #a6edd8; font-size: 13px; font-weight: 800; }
.setup-step > div { min-width: 0; }
.setup-step strong { display: block; font-size: 14px; }
.setup-step p { margin: 6px 0 14px; font-size: 12px; line-height: 1.55; }
.key-row { display: flex; gap: 7px; align-items: center; max-width: 100%; }
.key-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px; border-radius: 6px; background: #0a1115; color: #c8ddd7; font-size: 11px; }
.key-row input { min-width: 0; width: 100%; border: 1px solid #3a4b50; border-radius: 6px; background: #0a1115; color: #e9f0f0; padding: 9px; font: 12px ui-monospace, monospace; }
button.primary, button.secondary, .key-row button { border: 1px solid #3a6960; border-radius: 7px; padding: 8px 12px; background: #214b41; color: #dcfff2; font-size: 12px; font-weight: 700; }
.download { display: inline-block; border: 1px solid #3a6960; border-radius: 7px; padding: 8px 12px; background: #214b41; color: #dcfff2; font-size: 12px; font-weight: 700; text-decoration: none; }
button.secondary, .key-row button { background: #1b282d; color: #d6e5e3; border-color: #36484e; }
button:hover { filter: brightness(1.2); }
.small-status { display: block; color: #83a69d; font-size: 11px; margin-top: 10px; line-height: 1.4; }
.workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; }
aside, main { border: 1px solid #29343b; border-radius: 15px; background: #11191f; min-width: 0; }
aside { min-height: 520px; overflow: hidden; }
.section-heading { padding: 19px; align-items: center; border-bottom: 1px solid #29343b; }
.section-heading h2 { font-size: 15px; }
.section-heading span { color: #84969d; font-size: 12px; }
.history { max-height: 720px; overflow-y: auto; }
.history-item { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 13px 15px; border: 0; border-bottom: 1px solid #243038; color: inherit; background: transparent; }
.history-item:hover, .history-item.selected { background: #1b2b31; }
.history-item.selected { box-shadow: inset 3px 0 #67d9bb; }
.history-item img { width: 76px; height: 52px; object-fit: cover; border-radius: 5px; background: #030607; border: 1px solid #33434b; }
.history-content { min-width: 0; }
.history-content strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.38; font-weight: 600; }
.history-content small { display: block; margin-top: 6px; color: #80939c; font-size: 10px; }
main { min-height: 520px; }
.empty { display: flex; height: 100%; min-height: 520px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; background: #203c37; color: #9ae2d0; font-size: 26px; }
.empty h2 { font-size: 19px; }
.empty p { max-width: 340px; line-height: 1.6; font-size: 13px; }
.detail { padding: 23px; }
.detail-top { align-items: center; margin-bottom: 17px; }
.detail-top h2 { margin-top: 6px; font-size: 22px; }
.status { padding: 7px 10px; border-radius: 20px; background: #27353d; color: #b5cbd0; font-size: 11px; white-space: nowrap; }
.status.answered { background: #1b4236; color: #91ecc4; }
.status.error { background: #4b2828; color: #f4adad; }
.image-wrap { border-radius: 10px; border: 1px solid #34424a; background: #06090b; overflow: hidden; }
.image-wrap img { display: block; width: 100%; max-height: 510px; object-fit: contain; }
.answer-card { padding: 24px; border-radius: 10px; background: #17242a; border: 1px solid #2a4245; }
.answer { white-space: pre-wrap; font-size: 19px; line-height: 1.55; margin-top: 12px; overflow-wrap: anywhere; }
.answer.pending { color: #9eabb1; }
.screenshot-details { margin-top: 16px; }
.screenshot-details > summary { padding: 8px 0; }
.screenshot-details .image-wrap { margin-top: 9px; }
.vault { border-top: 1px solid #29343b; padding-bottom: 17px; }
.vault > p { margin: 14px 19px 12px; font-size: 12px; line-height: 1.5; }
.vault .section-heading { border-bottom: 0; padding-bottom: 0; }
.upload-label { display: inline-block; margin: 0 19px; border: 1px solid #3a6960; border-radius: 7px; padding: 8px 12px; background: #214b41; color: #dcfff2; font-size: 12px; font-weight: 700; cursor: pointer; }
#vault-upload { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vault .small-status { margin: 10px 19px; }
.vault-list { max-height: 300px; overflow-y: auto; }
.vault-file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 19px; border-top: 1px solid #243038; font-size: 12px; }
.vault-file span { min-width: 0; overflow-wrap: anywhere; }
.vault-file small { display: block; color: #80939c; margin-top: 3px; }
.vault-file button { border: 0; background: transparent; color: #d8a7a7; font-size: 11px; }
.conversation { margin-top: 20px; border-top: 1px solid #304149; padding-top: 20px; }
.conversation h3 { margin: 0 0 13px; font-size: 17px; }
.replies { display: grid; gap: 10px; }
.reply { border-radius: 10px; padding: 13px 15px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 13px; }
.reply.user { background: #1d3532; margin-left: 8%; }
.reply.assistant { background: #19272e; margin-right: 8%; }
.reply small { display: block; color: #93b5ae; font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; text-transform: uppercase; }
#reply-form { display: grid; gap: 9px; margin-top: 17px; }
#reply-form > label { font-size: 12px; color: #aebfc1; }
#reply-question { width: 100%; resize: vertical; min-height: 80px; border-radius: 8px; border: 1px solid #3a4b50; background: #0a1115; color: #e9f0f0; padding: 12px; font: inherit; font-size: 13px; }
.reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.check-label { display: flex; align-items: center; gap: 7px; color: #b6c9c7; font-size: 12px; }
.check-label input { accent-color: #71dfbc; }
.reply-actions button:disabled { opacity: .55; cursor: wait; }
.hidden { display: none !important; }
@media (max-width: 980px) { .setup { grid-template-columns: 1fr; } .workspace { grid-template-columns: 250px minmax(0, 1fr); } }
@media (max-width: 650px) { .shell { padding: 24px 14px 50px; } .workspace { grid-template-columns: 1fr; } main { order: -1; } aside { min-height: 0; } .history { max-height: 230px; } header { align-items: flex-start; } }