/* Editorial edition: the product interface carries the visual identity. */
:root { color-scheme: dark; background: #0e1011; color: #efefea; }
body { background: #0e1011; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #d4dfc3; outline-offset: 3px; }
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: #151718; border-right: 1px solid #303332; padding: 28px 18px 19px; }
.sidebar::after { display: none; }
.sidebar-top { padding: 0 7px 26px; margin: 0 0 18px; border-color: #343736; }
.identity { gap: 11px; }
.identity-mark { width: 28px; height: 30px; }
.identity-mark .brand-glyph { width: 25px; height: 25px; color: #e6e8df; }
.identity strong { font-size: 17px; font-weight: 600; letter-spacing: -.04em; }
.identity-sub { margin-top: 3px; font-size: 8px; font-weight: 600; letter-spacing: .13em; color: #777e7b; }
.new-chat { min-height: 52px; margin: 0 0 22px; padding: 7px 8px; border: 1px solid #393d3a; border-radius: 5px; background: #1b1e1d; }
.new-chat:hover { background: #242826; border-color: #667068; }
.new-chat-icon { width: 25px; height: 25px; border: 0; background: transparent; color: #dce3d7; }
.new-chat-copy strong { font-size: 12px; font-weight: 560; color: #e8eae4; }
.new-chat-arrow { width: 12px; height: 12px; color: #929b92; }
.side-kicker { margin: 17px 10px 8px; font-size: 9px; letter-spacing: .06em; color: #737c76; }
.sidebar-section-heading { margin: 0 10px 12px; color: #d1d5cf; font-size: 11px; font-weight: 530; letter-spacing: 0; }
.sidebar-section-heading span:last-child { border: 0; color: #7f8981; font-size: 10px; }
.conversation-empty { padding: 9px 10px; font-size: 11px; color: #747d77; }
.conversation-empty .ui-icon { width: 13px; height: 13px; }
.conversation-item { border-radius: 4px; }
.conversation-item.active { background: #242826; border-color: transparent; }
.conversation-open { color: #b7beb7; font-size: 12px; }
.conversation-open:hover { color: #fff; }
.sidebar-bottom { padding: 0; }
.access-panel { border-color: #383c39; }
.access-panel-head { padding: 14px 9px 0; font-size: 9px; letter-spacing: .08em; }
.access-state { font-size: 10px; letter-spacing: 0; }
.usage-mini { padding: 14px 9px 13px; margin: 0; }
.usage-heading-label { font-size: 11px; }
.usage-mini strong { font-size: 18px; }
.usage-track { margin: 12px 0 9px; height: 1px; }
.usage-mini small { font-size: 10px; }
.access-trigger { padding: 11px 8px; }
.access-icon { width: 22px; height: 22px; }
.access-copy strong { font-size: 11px; }
.access-copy small { font-size: 9px; }
.side-footnote { margin: 16px 8px 0; font-size: 9px; color: #68716a; }

.main-area { background: #0e1011; }
.main-area::before { display: none; }
.topbar { height: 66px; padding: 0 39px; background: #0e1011; border-bottom: 1px solid #292d2a; }
.topbar-location-icon { display: none; }
.topbar-overline { color: #777e79; font-size: 9px; font-weight: 550; letter-spacing: .08em; }
.topbar-title { margin-top: 3px; color: #e6e9e3; font-size: 12px; font-weight: 570; }
.live-indicator { padding: 5px 10px; border: 0; border-radius: 0; background: transparent; color: #9da89e; font-size: 10px; }
.mode-dot, body[data-mode="mock"] .mode-dot { width: 5px; height: 5px; background: #adbba8; }
.top-access { margin-left: 0; padding: 8px 10px; border: 0; border-radius: 3px; background: transparent; color: #aeb7ae; font-size: 11px; }
.top-access:hover { background: #ffffff0b; color: #fff; }
.access-primary { margin-left: 8px; border: 1px solid #555d55; color: #e5ebe1; }

.chat-surface:has(.empty-state:not([hidden])) { justify-content: center; gap: 0; }
.chat-surface:has(.empty-state:not([hidden])) .chat-feed { flex: 0 0 auto; width: 100%; overflow: visible; }
.chat-surface:has(.empty-state:not([hidden])) .empty-state {
  width: min(100%, 1090px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start; column-gap: clamp(40px, 5vw, 110px); margin: 0 auto 32px;
  padding: 0 34px; border: 0; overflow: visible; text-align: left;
}
.hero-content { max-width: none; padding: 0; }
.hero-art { display: none; }
.empty-state .hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; color: #a5afa6; font-size: 10px; font-weight: 540; letter-spacing: .06em; }
.eyebrow-line { display: inline-block; width: 16px; height: 1px; background: #b5c2ae; }
.eyebrow-rule { width: 1px; height: 12px; margin: 0 1px; background: #4b534c; }
.empty-state h1 { margin: 0 0 25px; color: #f2f4ee; font-size: clamp(48px, 5.15vw, 74px); font-weight: 535; letter-spacing: -.065em; line-height: 1.18; white-space: nowrap; text-shadow: none; }
.empty-state h1 span { color: #aeb8aa; -webkit-text-fill-color: #aeb8aa; }
.empty-state .hero-description { margin: 0; color: #a4ada5; font-size: 14px; line-height: 1.8; text-shadow: none; }
.hero-actions { align-items: center; gap: 23px; margin-top: 30px; }
.hero-explore { padding: 0 0 7px; gap: 24px; border: 0; border-bottom: 1px solid #9fae9d; border-radius: 0; background: transparent; box-shadow: none; color: #e7ede3; font-size: 12px; font-weight: 560; }
.hero-explore:hover { border-color: #e7ede3; background: transparent; color: #fff; }
.hero-explore .ui-icon { width: 12px; height: 12px; }
.hero-hint { color: #747e75; font-size: 10px; }
.hero-meta { margin-top: 41px; gap: 16px; color: #8a948a; font-size: 10px; letter-spacing: 0; }
.hero-meta strong { margin-right: 3px; color: #d6dfd3; font-size: 14px; font-weight: 570; }
.hero-meta i { height: 12px; background: #3b433c; }

.hero-model-strip { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; min-width: 0; margin-top: 0; padding-top: 0; border-top: 0; }
.hero-strip-heading { display: flex; align-items: center; gap: 9px; padding: 0 0 18px; color: #a5ada4; font-size: 10px; font-weight: 540; letter-spacing: .02em; border-bottom: 1px solid #505751; }
.hero-strip-heading span:last-child { color: #6e796f; font-size: 9px; letter-spacing: .1em; }
.strip-rule { width: 18px; background: #596359; }
.hero-model-pills { display: flex; flex-direction: column; gap: 0; margin: 0; overflow: visible; }
.hero-model-pill { width: 100%; display: flex; justify-content: flex-start; gap: 13px; min-height: 57px; padding: 0 5px; border: 0; border-bottom: 1px solid #333a34; border-radius: 0; background: transparent; color: #d3dbd1; font-size: 12px; font-weight: 520; text-align: left; }
.hero-model-pill:hover, .hero-model-pill[aria-pressed="true"] { border-color: #748575; background: #1a201b; color: #f6faf3; }
.hero-model-pill[aria-pressed="true"] { box-shadow: inset 2px 0 #a9c1a4; }
.engine-index, .hero-model-pill[data-provider="ollama"] .engine-index { width: 22px; color: #748374; font-size: 10px; font-weight: 520; }
.engine-arrow { width: 13px; height: 13px; margin-left: auto; color: #8c9c89; }
.hero-model-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 18px; padding: 0 4px; border: 0; background: transparent; color: #a1afa0; font-size: 11px; text-align: left; }
.hero-model-all:hover { color: #f0f6ec; }
.hero-model-all .ui-icon { width: 12px; height: 12px; }

.chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding: 0 32px; }
.composer-dock { background: #0e1011; }
.composer { max-width: 1022px; padding: 19px 20px 14px; border: 1px solid #4e574f; border-radius: 5px; background: #171a18; box-shadow: none; }
.composer:focus-within { border-color: #a2b7a0; box-shadow: 0 0 0 3px #adbdab12; }
.composer textarea { min-height: 62px; font-size: 15px; color: #edf1eb; }
.composer textarea::placeholder { color: #899489; }
.composer-controls { border-top: 1px solid #303830; padding-top: 12px; }
.attach-button, .model-picker, .mode-picker { border: 0; border-radius: 3px; background: transparent; color: #b1bdb0; }
.attach-button:hover, .model-picker:hover, .mode-picker:hover { background: #ffffff0d; color: #eef4e9; }
.model-picker { padding: 7px 9px; }
.model-picker-icon { color: #b4c4ae; }
.mode-picker { padding: 7px 8px; }
.mode-picker select { color: #b1bdb0; font-weight: 540; }
.model-cost, .char-count { color: #69766c; font-size: 10px; }
.send-button { width: 34px; height: 34px; border-radius: 3px; background: #d9e1d4; color: #1a211b; }
.send-button:not(:disabled):hover { background: #f0f5e8; }
.send-button:disabled { background: #354039; color: #879489; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 1022px); max-width: 1022px; margin: 30px auto 0; border-top: 1px solid #353d36; }
.quick-actions button { display: flex; justify-content: flex-start; min-height: 46px; padding: 0 13px; border: 0; border-bottom: 1px solid #353d36; border-radius: 0; background: transparent; color: #a5afa4; font-size: 11px; font-weight: 500; text-align: left; }
.quick-actions button:nth-child(3n+1) { padding-left: 1px; }
.quick-actions button:hover { background: #ffffff07; color: #eef2e9; }
.quick-actions button .ui-icon { width: 14px; height: 14px; color: #839583; }
.composer-note { max-width: 1022px; margin: 13px auto 0; color: #68746a; font-size: 10px; }
.chat-surface:has(.empty-state[hidden]) { background: #0e1011; }
.chat-surface:has(.empty-state[hidden]) .composer-dock { padding-top: 14px; border-top: 1px solid #2c322c; }
.message-bubble { background: #202621; color: #e9eee8; }
.message.assistant { background: transparent; border-color: #343e35; }
.assistant-icon { background: #283229; }

.dialog-backdrop { background: #050805c7; }
.access-dialog, .model-dialog { border: 1px solid #5b665b; border-radius: 6px; background: #171b18; box-shadow: 0 30px 90px #000b; }
.dialog-mark { background: #283229; }
.dialog-eyebrow { color: #9cae9b; }
.redeem-button { background: #d9e1d4; color: #1a211b; }
.redeem-button:hover { background: #f0f5e8; }
.provider-filters button.active { background: #d9e1d4; border-color: #d9e1d4; color: #1a211b; }
.access-dialog h2, .model-dialog h2 { color: #edf1e9; font-weight: 570; letter-spacing: -.045em; }
.dialog-intro, .model-count, .model-dialog-note, .model-empty { color: #929d92; }
.dialog-close, .dialog-close:hover { color: #a8b4a7; }
.dialog-commands kbd { border-color: #464f46; border-radius: 3px; background: transparent; color: #8c9a8b; }
.access-dialog form label, .lab-controls label { color: #adb9aa; }
.access-dialog form input, .lab-controls input, .model-dialog input[type=search] { border: 1px solid #444e43; border-radius: 3px; background: #101411; color: #edf3e9; }
.access-dialog form input:focus, .model-dialog input[type=search]:focus { border-color: #b2c7aa; }
.access-dialog .dialog-footer { border-color: #3a423a; color: #8a9589; }
.demo-area { background: #202720; border-color: #3c483b; }
.demo-area span, .lab-area { color: #a1aca0; }
.demo-area code, .lab-area p { color: #c4d3bd; }
.demo-area button, .lab-controls button { background: #354336; color: #e1eadc; }
.model-dialog { width: min(100%, 730px); padding: 29px 31px; }
.model-dialog-header h2 { margin-bottom: 18px; font-size: 28px; }
.model-count { font-size: 11px; }
.provider-filters { gap: 0; padding: 15px 0 10px; border-bottom: 1px solid #3d473d; }
.provider-filters button, .provider-filters button.active { margin-right: 17px; padding: 3px 0 9px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: #879587; font-size: 11px; }
.provider-filters button:hover { color: #e4ede1; }
.provider-filters button.active { border-bottom-color: #d9e3d3; color: #e7eee2; }
.model-list { scrollbar-color: #536353 transparent; }
.model-option { min-height: 62px; gap: 14px; margin: 0; padding: 11px 7px; border: 0; border-bottom: 1px solid #394339; border-radius: 0; background: transparent; color: #d4dfd2; }
.model-option:hover, .model-option.active { border-color: #6f846e; background: #202921; }
.model-option.active { box-shadow: inset 2px 0 #a9c1a4; }
.model-option-pending { opacity: .58; }
.model-option-pending:hover { border-color: #394339; background: transparent; }
.model-option .provider-mark, .model-option[data-provider] .provider-mark { width: 30px; height: 30px; border: 1px solid #687b67; border-radius: 3px; background: #242e25; box-shadow: none; color: #d9e6d4; font-size: 14px; font-weight: 550; }
.model-option:not(.model-option-pending) .provider-mark::after { display: none; }
.model-option strong { color: #e2eae0; font-size: 13px; font-weight: 570; }
.model-option small { color: #899a88; font-size: 10px; }
.model-check { color: #bacdb4; }
.pending-badge { padding: 4px 6px; border: 1px solid #485548; border-radius: 3px; background: transparent; color: #a1b09f; font-size: 9px; }
.model-dialog-note { margin-top: 17px; font-size: 10px; }

@media (max-width: 1130px) {
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; }
  .empty-state h1 { font-size: clamp(48px, 5.3vw, 66px); }
}
@media (max-width: 900px) {
  .chat-surface:has(.empty-state:not([hidden])) { justify-content: flex-start; overflow-y: auto; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { width: min(100%, 700px); grid-template-columns: 1fr; gap: 35px; padding: 52px 27px 0; margin: 0 auto 24px; }
  .hero-content { padding: 0; }
  .empty-state h1 { font-size: clamp(49px, 7vw, 68px); }
  .hero-meta { margin-top: 25px; }
  .hero-model-strip { max-width: none; }
  .hero-model-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .hero-model-pill { min-height: 49px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding: 0 27px 24px; }
}
@media (max-width: 760px) {
  .sidebar { width: min(290px, 85vw); padding: 24px 18px 17px; }
  .topbar { height: 61px; padding: 0 16px; }
  .topbar-title { font-size: 12px; }
  .topbar-right { gap: 4px; }
  .top-access { padding: 7px 8px; font-size: 10px; }
  .access-primary { margin-left: 1px; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { gap: 25px; padding: 38px 23px 0; margin-bottom: 20px; }
  .empty-state .hero-eyebrow { margin-bottom: 20px; font-size: 9px; }
  .empty-state h1 { font-size: clamp(42px, 9vw, 59px); margin-bottom: 17px; }
  .empty-state .hero-description { font-size: 12px; }
  .hero-actions { margin-top: 20px; }
  .hero-hint { display: none; }
  .hero-meta { margin-top: 23px; }
  .hero-strip-heading { padding-bottom: 11px; }
  .hero-model-pills { column-gap: 10px; }
  .hero-model-pill { gap: 6px; min-height: 43px; padding: 0 3px; font-size: 10px; }
  .hero-model-all { margin-top: 14px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding: 0 14px 17px; }
  .composer { padding: 12px 12px 10px; }
  .composer textarea { min-height: 50px; font-size: 13px; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 17px; }
  .quick-actions button { min-height: 38px; font-size: 10px; }
  .quick-actions button:nth-child(3n+1) { padding-left: 13px; }
  .quick-actions button:nth-child(2n+1) { padding-left: 1px; }
  .composer-note { margin-top: 10px; font-size: 9px; }
}
@media (max-width: 420px) {
  .empty-state h1 { font-size: 40px; }
  .hero-model-pill .engine-index { display: none; }
  .hero-strip-heading span:last-child { display: none; }
  .model-cost { display: none; }
  .quick-actions button:nth-child(n+5) { display: none; }
}
@media (max-height: 780px) and (min-width: 901px) {
  .chat-surface:has(.empty-state:not([hidden])) { justify-content: flex-start; overflow-y: auto; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { margin-top: 55px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding-bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-model-pill, .new-chat { transition: none; }
}