/* Material edition: matte graphite, machined metal, and quiet typography. */
:root { background: #0a0b0c; color: #e7e7e4; }
body { background: #0a0b0c; }

/* Navigation is a flat rail instead of a stack of glossy cards. */
.sidebar { background: #101214; border-right: 1px solid #ffffff17; }
.sidebar::after { display: none; }
.sidebar-top { border-bottom-color: #ffffff18; }
.identity { gap: 10px; }
.identity-mark {
  width: 31px; height: 34px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.identity-mark::before { display: none; }
.identity-mark .brand-glyph { width: 25px; height: 25px; color: #e5e6e3; filter: none; }
.identity strong { color: #f0f0ed; font-size: 18px; font-weight: 550; letter-spacing: .005em; }
.identity-sub { color: #888d90; font-size: 8px; font-weight: 580; letter-spacing: .18em; }
.new-chat {
  min-height: 58px; padding: 10px 8px; gap: 11px;
  border: 0; border-top: 1px solid #ffffff1d; border-bottom: 1px solid #ffffff1d;
  border-radius: 0; background: transparent; box-shadow: none;
  transition: background .18s ease, border-color .18s ease;
}
.new-chat::before, .new-chat::after { display: none; }
.new-chat:hover { transform: none; background: #ffffff09; border-color: #ffffff3b; box-shadow: none; }
.new-chat-icon {
  width: 29px; height: 29px; border: 1px solid #ffffff47; border-radius: 3px;
  background: transparent; color: #dedfdd; box-shadow: none;
}
.new-chat-copy strong { color: #e3e4e1; font-size: 13px; font-weight: 570; letter-spacing: .01em; }
.new-chat-arrow { color: #989b9c; }
.side-kicker { color: #74797c; }
.sidebar-section-heading { color: #c5c7c5; }
.sidebar-section-heading span:last-child { border-color: #ffffff26; background: transparent; color: #a4a7a6; }
.conversation-empty, .conversation-empty .ui-icon { color: #828789; }
.conversation-item:hover { background: #ffffff08; }
.conversation-item.active { background: #ffffff0a; border-color: #ffffff20; border-left-color: #c6c8c6; }
.conversation-open { color: #bfc2c0; }
.conversation-glyph, .conversation-item.active .conversation-glyph { color: #aaadab; }
.conversation-action { color: #898d8e; }
.conversation-action:hover { border-color: #ffffff28; background: #ffffff0c; }

/* Access information sits on the same matte surface as the rest of the rail. */
.access-panel { border: 0; border-top: 1px solid #ffffff2a; border-radius: 0; background: transparent; box-shadow: none; }
.access-panel::before { display: none; }
.access-panel-head { padding: 15px 11px 0; color: #949a9c; }
.access-state { color: #8d9292; }
.access-state::before { background: #858b8b; box-shadow: none; }
.access-panel[data-active="true"] .access-state { color: #b9c2bc; }
.access-panel[data-active="true"] .access-state::before { background: #a2b5a8; box-shadow: none; }
.usage-mini { padding: 15px 11px 14px; background: transparent; }
.usage-heading-label { color: #a6abaa; }
.usage-mini strong { color: #e6e8e5; font-weight: 480; }
.usage-track { height: 2px; background: #ffffff23; }
.usage-track span { background: #c8cbc8; box-shadow: none; }
.usage-mini small { color: #868c8e; }
.access-trigger { padding: 10px 10px; border-top: 1px solid #ffffff1a; background: transparent; }
.access-trigger:hover { border-color: #ffffff27; background: #ffffff08; }
.access-icon { color: #b4babb; }
.access-copy strong { color: #d9dcda; font-weight: 580; }
.access-copy small, .access-chevron { color: #858b8d; }
.side-footnote { color: #676e70; }

/* Location and status read as typeset information, not illuminated controls. */
.topbar { background: #0c0e0f; border-bottom-color: #ffffff17; }
.topbar-location-icon { width: 20px; height: 22px; border: 0; border-radius: 0; background: transparent; color: #a6acab; }
.topbar-location-icon .ui-icon { width: 17px; height: 17px; }
.topbar-overline { color: #818889; }
.topbar-title { color: #e9eae8; font-size: 14px; font-weight: 560; }
.live-indicator { border-color: #ffffff24; background: transparent; color: #b7bcba; }
.mode-dot, body[data-mode="mock"] .mode-dot { background: #9da7a1; box-shadow: none; }
.top-access { border-color: #ffffff26; border-radius: 3px; background: transparent; color: #b6bbba; }
.top-access:hover { background: #ffffff0a; color: #f0f1ee; }
.access-primary { border-color: #ffffff55; background: transparent; color: #e0e2df; }

/* The product image is actual brushed metal; the page stops simulating shine. */
.main-area { background: #0a0b0c; }
.main-area::before { display: none; }
.chat-surface:has(.empty-state[hidden]) { background: #0a0b0c; }
.hero-art-image {
  background-image: url('/hero-titanium-v9.png'); background-position: center 48%;
  filter: brightness(.82) contrast(1.06) saturate(.16); animation: none;
}
.hero-art::after {
  background: linear-gradient(90deg, #0a0b0c 0%, #0a0b0cf0 29%, #0a0b0c8c 49%, transparent 78%),
    linear-gradient(0deg, #0a0b0c 0%, transparent 21%, transparent 85%, #0a0b0c38);
}
.hero-art-edge, .hero-art-label, .hero-art-coordinate { display: none; }
.chat-surface:has(.empty-state:not([hidden])) .empty-state { border-bottom-color: #ffffff1e; }
.empty-state .hero-eyebrow { color: #b9bdbb; font-weight: 660; }
.hero-spark { color: #c5c9c6; filter: none; }
.eyebrow-rule { background: #ffffff3b; }
.empty-state h1 { color: #f2f2ef; font-weight: 570; text-shadow: none; }
.empty-state h1 span { background: none; color: #aaaead; -webkit-text-fill-color: #aaaead; }
.empty-state .hero-description { color: #b1b5b3; text-shadow: none; }
.hero-explore {
  border: 1px solid #e0e2de; border-radius: 3px; background: #e0e2de; color: #17191a;
  box-shadow: none; transition: background .18s ease, border-color .18s ease;
}
.hero-explore:hover { background: #f5f6f3; border-color: #f5f6f3; color: #17191a; box-shadow: none; }
.hero-explore::after { display: none; }
.hero-hint, .hero-meta { color: #9ca2a0; }
.hero-meta strong { color: #e4e6e3; }
.hero-model-strip { border-top-color: #ffffff33; }
.hero-strip-heading { color: #b1b6b4; }
.strip-dot { background: #c2c9c3; box-shadow: none; }
.strip-rule { background: #ffffff43; }
.hero-model-pill {
  border-color: #ffffff32; border-radius: 3px; background: #17191bcc;
  color: #c4c9c6; backdrop-filter: none;
  transition: border-color .18s ease, background .18s ease;
}
.hero-model-pill:hover, .hero-model-pill[aria-pressed="true"] {
  border-color: #d3d7d3a8; background: #2a2d2d; color: #f2f3f0; transform: none;
}
.engine-index, .engine-arrow, .hero-model-pill[data-provider="ollama"] .engine-index { color: #b0b5b3; }

/* Controls keep one layer, one hairline, and no simulated depth. */
.composer {
  border: 1px solid #ffffff30; border-radius: 5px; background: #181a1c;
  box-shadow: none;
}
.composer:focus-within { border-color: #c6cbc885; box-shadow: 0 0 0 2px #ffffff0b; }
.composer textarea { color: #e7e9e6; }
.composer textarea::placeholder { color: #858b8b; }
.attach-button, .model-picker, .mode-picker { border-color: #ffffff26; border-radius: 3px; background: #ffffff06; color: #c2c7c4; }
.attach-button:hover, .model-picker:hover { border-color: #ffffff4d; background: #ffffff0e; color: #eceeeb; }
.attach-button:disabled { background: transparent; color: #818687; }
.model-picker-icon, .picker-chevron { color: #b6bbba; filter: none; }
.mode-picker select { color: #c3c7c5; }
.model-cost, .char-count, .composer-note { color: #828889; }
.send-button { border-radius: 3px; background: #e0e2de; color: #191b1c; box-shadow: none; }
.send-button:not(:disabled):hover { background: #f4f5f2; transform: none; box-shadow: none; }
.send-button:disabled { background: #373b3f; color: #a5abaa; }
.quick-actions button { border-color: #ffffff1e; border-radius: 3px; background: transparent; color: #a6acaa; }
.quick-actions button .ui-icon { color: #a6acaa; }
.quick-actions button:hover { border-color: #ffffff48; background: #ffffff08; color: #e5e7e4; }

/* Conversation and dialogs use the same material rules. */
.message-bubble { border-color: #ffffff27; border-radius: 4px; background: #292c2d; box-shadow: none; }
.message.assistant { border-color: #ffffff21; border-radius: 5px; background: #17191b; box-shadow: none; }
.assistant-icon { border-radius: 3px; background: #303437; color: #e5e7e4; box-shadow: none; }
.assistant-label { border-bottom-color: #ffffff1d; color: #c1c6c3; }
.assistant-content { color: #dce0dc; }
.message-copy { border-color: #ffffff28; border-radius: 3px; background: transparent; color: #aab0ad; }
.message-copy:hover { background: #ffffff0a; }
.access-dialog, .model-dialog { border-color: #ffffff2b; border-radius: 6px; background: #1a1c1e; box-shadow: 0 30px 85px #000c; }
.dialog-mark { border-radius: 3px; background: #34383a; color: #e3e5e2; box-shadow: none; }
.dialog-eyebrow { color: #a8afaa; }
.redeem-button { border-radius: 3px; background: #dfe1dd; color: #1a1d1e; }
.redeem-button:hover { background: #f5f6f3; }
.model-option, .provider-filters button, .provider-filters button.active { border-radius: 3px; }
.provider-filters button.active { background: #d7dad6; border-color: #d7dad6; color: #1c1e1f; }

@media (max-width: 760px) {
  .hero-art-image { background-position: 68% center; filter: brightness(.68) contrast(1.08) saturate(.1); }
  .hero-art::after { background: linear-gradient(0deg, #0a0b0c 0%, #0a0b0c8c 40%, #0a0b0c7a 75%, #0a0b0c9e), linear-gradient(90deg, #0a0b0cb8, transparent); }
  .topbar-title { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .new-chat, .hero-explore, .hero-model-pill { transition: none; }
}