/* V13: supplied architectural image, mineral surfaces and precise controls. */
:root { color-scheme: dark; background: #090d11; color: #ecf1f4; }
body, .main-area { background: #090d11; }
.sidebar { background: #0d1218; border-right: 1px solid #26313a; }
.sidebar-top { border-color: #2c3842; }
.identity-mark {
  width: 35px; height: 35px; border: 1px solid #98a9b663; border-radius: 7px;
  background: linear-gradient(135deg, #475869 0%, #1a2733 44%, #101820 100%);
  box-shadow: inset 0 1px #e8f3ff59, inset 0 -1px #0009, 0 8px 25px #0006;
}
.identity-mark .brand-glyph { width: 25px; height: 25px; color: #edf4f8; }
.identity strong { color: #f3f7f9; font-size: 17px; letter-spacing: -.035em; }
.identity-sub { color: #81909d; letter-spacing: .1em; }
.new-chat {
  min-height: 57px; border: 1px solid #5364748c; border-radius: 7px;
  background: linear-gradient(165deg, #1b2731 0%, #121b24 100%);
  box-shadow: inset 0 1px #ffffff17, 0 7px 20px #0004;
}
.new-chat:hover { border-color: #92a6b7; background: #202d38; }
.new-chat-icon { color: #e2edf5; }
.new-chat-copy strong { color: #eaf2f8; }
.side-kicker { color: #8a9aaa; }
.sidebar-section-heading { color: #d5dfe7; }
.conversation-empty { color: #8595a1; }
.access-panel {
  overflow: hidden; border: 1px solid #354450; border-radius: 8px;
  background: linear-gradient(150deg, #15212b, #101922 68%, #0c131a);
  box-shadow: inset 0 1px #d5e6f20e, 0 10px 25px #0003;
}
.access-panel-head { color: #9db0bf; }
.usage-mini strong { color: #e4edf3; }
.usage-track { height: 2px; background: #34434f; }
.usage-track span { background: #c5d9e8; }
.access-trigger { border-top: 1px solid #31404b; }
.access-trigger:hover { background: #ffffff0b; }
.access-icon { border: 1px solid #607489; border-radius: 5px; background: #1d2e3d; color: #d4e7f6; }
.access-copy small, .side-footnote { color: #7d8e9c; }
.topbar { background: #0a0e13; border-color: #24313a; }
.topbar-overline { color: #8799a8; }
.topbar-title { color: #e7eff5; }
.mode-dot, body[data-mode="mock"] .mode-dot { background: #a7c5d5; box-shadow: 0 0 8px #79accc80; }
.live-indicator { color: #a4b5c1; }
.access-primary { border-color: #718697; background: #1a2731; color: #edf4f8; }
.access-primary:hover { border-color: #b9cedd; background: #263746; }

.chat-surface:has(.empty-state:not([hidden])) {
  position: relative; isolation: isolate; overflow: auto; background: #090d11;
}
.chat-surface:has(.empty-state:not([hidden]))::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, #090d11c9 0%, #090d116b 43%, #090d110a 76%), url('/hero-sanctum-v13.png');
  background-position: center, right top; background-size: cover, auto 83%; background-repeat: no-repeat;
  opacity: .92; -webkit-mask-image: linear-gradient(#000 0%, #000 58%, transparent 91%);
  mask-image: linear-gradient(#000 0%, #000 58%, transparent 91%);
}
.chat-surface:has(.empty-state:not([hidden]))::after {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 73%; height: 1px;
  background: linear-gradient(90deg, transparent, #8199a252, transparent); pointer-events: none;
}
.chat-surface:has(.empty-state:not([hidden])) .empty-state {
  width: min(100%, 900px); padding-bottom: 29px;
}
.empty-state .hero-eyebrow {
  margin-bottom: 19px; color: #d0e0ec; font-size: 10px; font-weight: 620; letter-spacing: .15em;
  text-shadow: 0 2px 18px #000a;
}
.empty-state .hero-eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
  border-radius: 50%; background: #d5e9f7; box-shadow: 0 0 15px #d0ecffb8; vertical-align: 1px;
}
.empty-state .hero-eyebrow span { color: #91a6b5; }
.empty-state h1 {
  margin-bottom: 21px; color: #f6f9fb; font-size: clamp(48px, 4.7vw, 70px);
  font-weight: 600; line-height: 1.16; letter-spacing: -.065em;
  text-shadow: 0 8px 33px #02070bbd;
}
.empty-state h1 span { color: #c5d3dc; -webkit-text-fill-color: #c5d3dc; }
.empty-state .hero-description {
  color: #bac9d3; font-size: 14px; letter-spacing: .01em; text-shadow: 0 3px 18px #000e;
}
.hero-actions { margin-top: 24px; }
.hero-explore {
  min-height: 38px; padding: 9px 15px; border: 1px solid #8fa7b77a; border-radius: 5px;
  background: #17242dc7; box-shadow: inset 0 1px #ffffff13, 0 7px 22px #0004;
  color: #e4eff7; font-size: 11px; letter-spacing: .03em;
}
.hero-explore:hover { border-color: #c0d4e1; background: #293947; }
.chat-surface:has(.empty-state:not([hidden])) .composer { max-width: 800px; }
.composer {
  border: 1px solid #7893a4a6; border-radius: 13px;
  background: #121c25ef;
  box-shadow: inset 0 1px #e1f2ff2b, 0 25px 70px #0009, 0 0 45px #8aaec211;
}
.composer:focus-within { border-color: #b8d3e4; box-shadow: inset 0 1px #e1f2ff2b, 0 25px 70px #0009, 0 0 0 3px #8aacbd1c; }
.composer textarea { color: #eef5f9; }
.composer textarea::placeholder { color: #a7b7c4; }
.composer-controls { border-color: #3d4d59; }
.attach-button, .model-picker, .mode-picker, .mode-picker select { color: #bdccd7; }
.model-picker-icon { color: #c6dce8; }
.model-cost, .char-count { color: #8ca0af; }
.send-button { background: linear-gradient(145deg, #e4f0f8, #a8c0d2); color: #122331; box-shadow: inset 0 1px #fff9; }
.send-button:not(:disabled):hover { background: #f5fbff; }
.send-button:disabled { background: #3b4e5b; color: #94a9b7; }
.quick-actions { max-width: 800px; gap: 9px; margin-top: 22px; }
.quick-actions button {
  border-color: #4b5b67; border-radius: 5px; background: #111b24c9;
  box-shadow: inset 0 1px #ffffff0f; color: #c0ced8;
}
.quick-actions button:hover { border-color: #91a9ba; background: #253541; color: #f1f7fa; }
.quick-actions button .ui-icon { color: #a8c4d6; }
.composer-note { color: #8fa3af; text-shadow: 0 2px 12px #000b; }

.chat-surface:has(.empty-state[hidden]) { background: radial-gradient(ellipse at 50% -15%, #172633 0%, #090d11 55%); }
.chat-surface:has(.empty-state[hidden]) .composer-dock { border-color: #2f404d; background: #090d11e8; }
.message-bubble { border: 1px solid #475b6b; background: #1b2b38; color: #edf5f9; }
.message.assistant { border-color: #344756; }
.assistant-icon { border: 1px solid #617b8f; border-radius: 7px; background: #223543; color: #e4f1f9; }
.assistant-content { color: #dce7ee; }
.assistant-label { color: #a7bbca; }
.message-copy { color: #91a9b9; }
.message-copy:hover { background: #213440; color: #eef7fb; }
.conversation-item.active { background: #1b2b38; }
.conversation-open { color: #c4d2dc; }
.conversation-open:hover { color: #fff; }

.dialog-backdrop { background: #03070bce; backdrop-filter: blur(12px); }
.access-dialog, .model-dialog {
  border: 1px solid #6c8394; border-radius: 10px;
  background: linear-gradient(145deg, #17232e 0%, #111922 55%, #0d141b 100%);
  box-shadow: inset 0 1px #e0effa1c, 0 40px 100px #000c;
}
.dialog-mark { border: 1px solid #647d91; border-radius: 6px; background: #223746; }
.dialog-eyebrow { color: #a8bfce; }
.access-dialog h2, .model-dialog h2 { color: #f2f7fa; }
.dialog-intro, .model-count, .model-dialog-note, .model-empty { color: #a1b2bd; }
.dialog-close, .dialog-close:hover { color: #b8c9d4; }
.dialog-commands kbd { border-color: #556978; color: #a6b8c4; }
.access-dialog form label, .lab-controls label { color: #c0cfd8; }
.access-dialog form input, .lab-controls input, .model-dialog input[type=search] {
  border-color: #5e7282; border-radius: 5px; background: #0d161e; color: #eef5f9;
}
.access-dialog form input:focus, .model-dialog input[type=search]:focus { border-color: #b2cadb; }
.access-dialog .dialog-footer { border-color: #405362; color: #97aab7; }
.redeem-button { border-radius: 5px; background: linear-gradient(145deg, #e4f0f8, #aec5d5); color: #152633; }
.redeem-button:hover { background: #f1f8fd; }
.demo-area { border-color: #4b6473; background: #172834; }
.demo-area span, .lab-area { color: #b1c1cc; }
.demo-area code, .lab-area p { color: #d0e0e9; }
.demo-area button, .lab-controls button { background: #2c4556; color: #e4f0f8; }
.provider-filters { border-color: #475b69; }
.provider-filters button, .provider-filters button.active { color: #8ea4b2; }
.provider-filters button:hover { color: #e8f3f9; }
.provider-filters button.active { border-bottom-color: #c1d6e4; color: #ecf5fa; }
.model-list { scrollbar-color: #607889 transparent; }
.model-option { border-bottom-color: #3c4e5c; color: #d4e2eb; }
.model-option:hover, .model-option.active { border-color: #8199a9; background: #223441; }
.model-option.active { box-shadow: inset 2px 0 #c6dbe8; }
.model-option-pending:hover { border-color: #3c4e5c; background: transparent; }
.model-option .provider-mark, .model-option[data-provider] .provider-mark {
  border-color: #6b8597; border-radius: 5px; background: #253b4a; color: #dfedf5;
}
.model-option strong { color: #eaf3f8; }
.model-option small { color: #9eb3c0; }
.model-check { color: #cce1ef; }
.pending-badge { border-color: #607482; color: #a9bdc9; }
.toast { background: #1c3545; color: #eef7fb; box-shadow: 0 14px 42px #0008; }

@media (max-width: 900px) {
  .chat-surface:has(.empty-state:not([hidden]))::before {
    background-position: center, right top; background-size: cover, auto 70%; opacity: .75;
  }
  .empty-state h1 { font-size: clamp(45px, 6vw, 62px); }
}
@media (max-width: 760px) {
  .sidebar { background: #0d1218; }
  .chat-surface:has(.empty-state:not([hidden])) { padding: 34px 17px 24px; }
  .chat-surface:has(.empty-state:not([hidden]))::before {
    background-image: linear-gradient(180deg, #090d11ad, #090d1196 42%, #090d11ce 70%), url('/hero-sanctum-v13.png');
    background-position: center, 86% top; background-size: cover, auto 70%; opacity: .74;
  }
  .chat-surface:has(.empty-state:not([hidden]))::after { top: 78%; }
  .empty-state .hero-eyebrow { margin-bottom: 20px; font-size: 9px; }
  .empty-state h1 { font-size: clamp(35px, 8.5vw, 48px); line-height: 1.22; margin-bottom: 17px; }
  .empty-state .hero-description { max-width: 310px; margin: auto; font-size: 12px; }
  .hero-actions { margin-top: 20px; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { padding-bottom: 24px; }
  .composer { background: #121c25f5; }
  .quick-actions { gap: 7px; margin-top: 17px; }
  .quick-actions button { border-radius: 5px; }
}
@media (max-height: 750px) and (min-width: 761px) {
  .chat-surface:has(.empty-state:not([hidden])) { justify-content: flex-start; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { padding-top: 55px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding-bottom: 35px; }
}

/* Finish details: cold silver edges with restrained champagne accents. */
:root { --luxe-gold: #c9b391; --luxe-ink: #0d1217; --luxe-silver: #d8e2e9; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: #d5c2a5; outline-offset: 4px;
}
.ui-icon { stroke-width: 1.55; }
.sidebar { padding: 28px 18px 20px; background: linear-gradient(175deg, #11161c, #0b1016 62%); border-right-color: #cedee524; }
.sidebar-top { padding: 0 8px 27px; margin-bottom: 21px; border-bottom-color: #d9e4ec1c; }
.identity { gap: 12px; }
.identity-mark {
  width: 39px; height: 41px; border-radius: 9px; border-color: #b8c5cd66;
  background: linear-gradient(145deg, #65717b 0%, #303b44 17%, #16212a 46%, #0d151d 80%);
  box-shadow: inset 0 1px #f1f6fa55, inset 1px 0 #e2ecf619, 0 5px 14px #0005;
}
.identity-mark .brand-glyph { width: 26px; height: 26px; color: #e5e9ea; }
.identity strong { font-size: 18px; font-weight: 590; letter-spacing: .02em; }
.identity-sub { margin-top: 5px; font-size: 7px; letter-spacing: .14em; color: #a8b4be; }
.new-chat {
  position: relative; min-height: 60px; padding: 11px 13px; gap: 12px; border-radius: 8px;
  border-color: #b2bdc540; background: linear-gradient(155deg, #26313b 0%, #18222b 52%, #131c24);
  box-shadow: inset 0 1px #e9e2d026, 0 9px 22px #0004; transform: none;
}
.new-chat::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #d9c6a7a6, transparent); }
.new-chat-icon { width: 27px; height: 27px; border: 0; background: none; box-shadow: none; color: #dcc8a8; }
.new-chat-icon .ui-icon { width: 19px; height: 19px; }
.new-chat-copy strong { font-size: 13px; font-weight: 550; letter-spacing: .01em; }
.new-chat-arrow { width: 13px; height: 13px; color: #a3b3bf; }
.new-chat:hover { background: linear-gradient(155deg, #303d48, #1c2832); border-color: #d2c0a475; transform: translateY(-1px); }
.side-kicker { margin-top: 20px; font-size: 10px; color: #7f919e; }
.sidebar-section-heading { margin-top: 11px; margin-bottom: 16px; font-size: 12px; }
.sidebar-section-heading span:last-child { min-width: 18px; color: #a2b2bc; font-variant-numeric: tabular-nums; }
.conversation-empty { gap: 10px; padding: 11px 10px; color: #8e9eaa; font-size: 11px; }
.conversation-empty .ui-icon { width: 15px; height: 15px; color: #9cafa8; }
.conversation-item { border-radius: 7px; }
.conversation-item.active { background: #23313d; border-left-color: #bea98b; }
.conversation-open { font-size: 12px; }
.access-panel { position: relative; border-radius: 9px; border-color: #adbac331; background: linear-gradient(135deg, #202a33, #141e27 60%, #10171e); box-shadow: inset 0 1px #fff1, 0 12px 30px #0003; }
.access-panel::before { display: block; content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, #d2b9907d, transparent); }
.access-panel-head { padding: 16px 14px 0; font-size: 9px; letter-spacing: .11em; color: #c4b598; }
.access-state { font-size: 10px; color: #aab7c0; }
.usage-mini { padding: 20px 14px 17px; }
.usage-heading-label { font-size: 11px; color: #abbcc8; }
.usage-mini strong { font-size: 22px; font-weight: 450; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.usage-track { margin: 14px 0 12px; height: 2px; background: #485560; }
.usage-track span { background: linear-gradient(90deg, #8798a5, #d7c4a6); }
.usage-mini small { font-size: 10px; line-height: 1.6; color: #91a4b1; }
.access-trigger { min-height: 65px; padding: 12px 13px; border-top-color: #c1d1dc1a; border-radius: 0; }
.access-icon { width: 28px; height: 28px; border-radius: 7px; border-color: #c9b3914a; background: #d4bc9610; color: #d7c3a4; }
.access-icon .ui-icon { width: 18px; height: 18px; }
.access-copy strong { font-size: 12px; font-weight: 550; color: #e2e8ed; }
.access-copy small { margin-top: 4px; color: #91a2ae; font-size: 9px; }
.side-footnote { margin-top: 19px; font-size: 9px; letter-spacing: .03em; }
.topbar { padding: 0 31px; border-bottom-color: #bed0dc22; background: #0b1015f5; }
.topbar-context { flex-direction: row; align-items: center; gap: 14px; }
.topbar-overline { font-size: 9px; color: #94a4af; letter-spacing: .13em; }
.topbar-title { display: inline-flex; align-items: center; margin: 0; font-size: 12px; }
.topbar-title::before { content: "/"; margin-right: 14px; color: #62717d; font-weight: 400; }
.live-indicator { padding: 7px 10px; border: 1px solid #acbdc926; border-radius: 999px; font-size: 10px; background: #a9c3d306; }
.mode-dot, body[data-mode="mock"] .mode-dot { width: 4px; height: 4px; background: #c8d9df; box-shadow: 0 0 6px #a4c1d46b; }
.top-access { padding: 8px 12px; }
.access-primary { border-radius: 6px; border-color: #c9b39166; background: #ccb58d0a; color: #e3d6bf; }
.access-primary:hover { border-color: #d8c2a2aa; background: #c9b39118; }
.empty-state .hero-eyebrow { color: #decdb0; letter-spacing: .17em; }
.empty-state .hero-eyebrow::before { width: 4px; height: 4px; background: #e3d1b3; box-shadow: 0 0 12px #dec69e99; }
.empty-state .hero-eyebrow span { color: #adbbc6; }
.empty-state h1 { letter-spacing: -.06em; }
.empty-state h1 span { background: linear-gradient(110deg, #b2c3d1 20%, #d9dcda 55%, #c0ae94 88%); background-clip: text; -webkit-text-fill-color: transparent; }
.empty-state .hero-description { color: #c1ccd4; line-height: 1.8; }
.hero-explore { min-height: 40px; padding: 10px 17px; gap: 20px; border-color: #d0b89575; background: #151e25c4; color: #e9ddc9; border-radius: 6px; box-shadow: inset 0 1px #e4cda522, 0 6px 22px #0003; }
.hero-explore:hover { background: #293139; border-color: #dfc7a0c4; color: #fff1d8; }
.composer { padding: 20px 20px 14px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(135deg, #1a242ddf, #101921ef) padding-box, linear-gradient(135deg, #c2d2dc8a, #a0aeb63b 40%, #cab18a67 80%, #a2b6c875) border-box; box-shadow: inset 0 1px #e6e8e91a, 0 20px 64px #0008; backdrop-filter: blur(20px); }
.composer:focus-within { border-color: transparent; box-shadow: 0 0 0 1px #d3c3ab8a, 0 20px 64px #0008; }
.composer textarea { min-height: 68px; font-size: 15px; }
.composer textarea::placeholder { color: #9aafbe; }
.composer-controls { padding-top: 12px; border-color: #a6b9c626; }
.composer-left { gap: 7px; }
.attach-button, .model-picker, .mode-picker { min-height: 32px; padding: 6px 9px; border-radius: 6px; }
.attach-button { font-size: 11px; }
.model-picker { border: 1px solid #bdcbd32e; background: #a4bdce0a; font-size: 12px; gap: 8px; }
.model-picker-icon { width: 14px; height: 14px; color: #cdbb9c; }
.mode-picker { background: transparent; }
.mode-picker select { font-size: 11px; }
.model-cost, .char-count { font-size: 9px; color: #8da4b4; }
.send-button { width: 35px; height: 35px; border-radius: 9px; }
.send-button:disabled { background: #526473; color: #b2c0c9; box-shadow: inset 0 1px #d8e6f12b; }
.quick-actions { gap: 8px; }
.quick-actions button { min-height: 36px; padding: 8px 12px; border-radius: 7px; border-color: #b0c2cd30; background: #111a22b0; font-size: 11px; color: #bcccd6; box-shadow: inset 0 1px #d9e5ed09; }
.quick-actions button .ui-icon { width: 14px; height: 14px; color: #b8ad98; }
.quick-actions button:hover { transform: translateY(-2px); background: #24313b; border-color: #c9b3917a; }
.composer-note { margin-top: 17px; color: #8fa2b0; font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .new-chat, .hero-explore, .quick-actions button, .model-picker, .access-primary { transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
  .hero-content { animation: luxe-arrive .7s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes luxe-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) { .new-chat:hover, .quick-actions button:hover { transform: none; } }
@media (max-width: 760px) {
  .topbar { padding: 0 15px; }
  .topbar-context { gap: 0; }
  .topbar-title::before { display: none; }
  .live-indicator { display: none; }
  .top-access { padding: 7px 10px; }
  .composer { padding: 14px 12px 11px; }
  .composer textarea { min-height: 58px; font-size: 14px; }
  .composer-left { gap: 2px; }
  .attach-button, .model-picker, .mode-picker { padding: 6px; }
  .model-picker { gap: 5px; font-size: 11px; }
  .mode-picker select { font-size: 10px; }
  .quick-actions button { min-height: 35px; font-size: 10px; }
  .composer-note { font-size: 9px; }
}