:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #edf2fb;
  background: #080a10;
}

body { background: #080a10; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #77c4f5;
  outline-offset: 3px;
}

.app-shell { grid-template-columns: 286px minmax(0, 1fr); }
.sidebar {
  background: linear-gradient(155deg, #11151f 0%, #0a0d14 58%, #0d111a 100%);
  border-right: 1px solid #ffffff15;
  padding: 28px 18px 18px;
}
.sidebar-top { padding: 0 6px 31px; }
.identity { gap: 12px; }
.identity-mark {
  width: 39px;
  height: 39px;
  border: 1px solid #a9cfff55;
  border-radius: 13px;
  background: radial-gradient(circle at 30% 20%, #b6dfff, #536cd9 48%, #172549 100%);
  box-shadow: 0 0 28px #557dff55, inset 0 1px 1px #ffffff99;
  color: #fff;
  font-size: 22px;
}
.identity-type { display: flex; flex-direction: column; gap: 2px; }
.identity strong { color: #f8fbff; font-size: 16px; font-weight: 650; letter-spacing: .015em; }
.identity-sub { color: #717f9a; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.new-chat {
  background: linear-gradient(110deg, #eef7ff, #d6eaff);
  border: 1px solid #ffffffbd;
  border-radius: 13px;
  box-shadow: 0 10px 28px #01061160, inset 0 1px #fff;
  color: #111b2d;
  padding: 13px 14px;
  font-size: 13px;
}
.new-chat:hover { background: #fff; box-shadow: 0 0 28px #73adf44d; }
.new-chat>span:first-child { font-size: 20px; font-weight: 300; }
.new-plus { color: #637897; font-size: 16px; }
.side-kicker {
  margin: 31px 11px 8px;
  color: #56657d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sidebar-section-heading { margin: 0 11px 12px; color: #9ba7bc; font-size: 11px; letter-spacing: .07em; }
.sidebar-section-heading span:last-child { color: #66748d; }
.conversation-item.active { background: #ffffff12; }
.conversation-open { color: #aebbd0; }
.conversation-open:hover, .conversation-action:hover { color: #f5f9ff; }
.conversation-action { color: #6b7890; }
.conversation-action:hover { background: #ffffff1b; }
.conversation-empty { color: #627089; }
.usage-mini {
  background: #ffffff08;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  padding: 17px 15px;
}
.usage-mini>div:first-child { color: #9ca9be; }
.usage-mini strong { color: #f4f8ff; font-size: 21px; }
.usage-track { background: #ffffff16; }
.usage-track span { background: linear-gradient(90deg, #77a8ff, #9de0ff); box-shadow: 0 0 13px #73adff9c; }
.usage-mini small { color: #6f7d95; }
.access-trigger { color: #b9c7db; border: 1px solid transparent; }
.access-trigger:hover { background: #ffffff0c; border-color: #ffffff16; }
.access-icon { background: #5e8fc422; color: #9dccff; }
.side-footnote { color: #536078; font-size: 10px; letter-spacing: .04em; }

.main-area {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse 60% 65% at 80% 45%, #14213b 0%, transparent 67%),
    radial-gradient(ellipse 40% 48% at 25% 90%, #0c172c 0%, transparent 67%), #080b12;
}
.main-area::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 58% 48%, #000 0%, transparent 77%);
}
.topbar { height: 75px; padding: 0 34px; border-bottom: 1px solid #ffffff11; background: #080b10a1; backdrop-filter: blur(18px); }
.topbar-left { gap: 8px; }
.topbar-overline { color: #53617b; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.topbar-title { color: #cad5e6; font-size: 12px; max-width: 32vw; }
.topbar-right { gap: 12px; }
.live-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: #8ac9ff0b; border: 1px solid #91c6ff26; border-radius: 999px; color: #a9c8eb; font-size: 11px; }
.mode-dot { width: 6px; height: 6px; background: #7cdab5; box-shadow: 0 0 12px #7cdab5cc; }
.top-access { margin: 0; border: 1px solid #ffffff22; border-radius: 10px; color: #aebbd0; background: #ffffff06; padding: 8px 12px; }
.top-access:hover { color: #fff; background: #ffffff10; }
.access-primary { color: #e2f2ff; border-color: #9cceff4a; background: #769cf51c; }
.access-primary span { margin-left: 7px; }

.chat-surface:has(.empty-state:not([hidden])) { justify-content: center; gap: 18px; }
.chat-surface:has(.empty-state:not([hidden])) .chat-feed { overflow: visible; flex: 0 0 auto; }
.chat-surface:has(.empty-state:not([hidden])) .empty-state {
  width: min(100%, 1110px);
  min-height: 430px;
  margin: auto;
  padding: 25px 42px 0;
  display: flex;
  align-items: center;
  position: relative;
  text-align: left;
}
.hero-content { position: relative; z-index: 2; max-width: 660px; }
.empty-state .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: #9abde8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .21em;
}
.hero-spark { color: #a5dfff; text-shadow: 0 0 17px #a7dfff; font-size: 16px; }
.empty-state h1 {
  margin: 0 0 23px;
  font-size: clamp(49px, 5.7vw, 88px);
  line-height: 1.12;
  font-weight: 630;
  letter-spacing: -.065em;
  color: #f9fbff;
  text-wrap: balance;
}
.empty-state h1 span {
  background: linear-gradient(100deg, #fff 3%, #b7d3ff 43%, #88abf7 80%, #b7e8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.empty-state .hero-description { margin: 0; color: #94a3bd; font-size: 15px; line-height: 1.9; max-width: 530px; }
.hero-meta { display: flex; align-items: center; gap: 17px; margin-top: 27px; color: #8ea1bf; font-size: 11px; letter-spacing: .03em; }
.hero-meta strong { font-size: 15px; font-weight: 650; color: #e5f2ff; }
.hero-meta i { width: 1px; height: 15px; background: #8da4c649; }
.hero-actions { display: flex; align-items: center; gap: 19px; margin-top: 28px; }
.hero-explore {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  color: #d8eaff;
  background: #a0caff1e;
  border: 1px solid #b4d9ff60;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 0 28px #77b2ff1c, inset 0 1px #ffffff30;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.hero-explore:hover { transform: translateY(-2px); background: #9dc9ff30; box-shadow: 0 0 35px #77b2ff44; }
.hero-explore span { font-size: 17px; font-weight: 400; }
.hero-hint { color: #65758e; font-size: 11px; }

.hero-aura { position: absolute; width: 440px; height: 440px; right: 1%; top: 52%; transform: translateY(-50%); pointer-events: none; }
.hero-aura::before { content: ""; position: absolute; inset: 38px; border-radius: 50%; background: #385dca; filter: blur(85px); opacity: .35; }
.aura-core {
  position: absolute;
  inset: 81px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 23%, #ecf9ff 0%, #a3d8fb 8%, #4c89d6 22%, #273e88 51%, #101c3c 73%, #060d1d 93%);
  box-shadow: inset -30px -36px 56px #020815a8, inset 13px 13px 21px #ffffff4d,
    0 0 42px #7ebfff73, 0 0 112px #517dce55, 0 30px 75px #030713a8;
  animation: aura-breathe 8s ease-in-out infinite alternate;
}
.aura-core::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid #c6edff6e; box-shadow: 0 0 35px #a7e3ff91; }
.aura-orbit { position: absolute; inset: 36px; border: 1px solid #86acff35; border-radius: 50%; transform: rotate(-26deg) scaleY(.55); box-shadow: 0 0 24px #8ac6ff16; }
.aura-orbit-one { animation: orbit-one 15s linear infinite; }
.aura-orbit-two { inset: 9px; border-color: #99c5ff22; transform: rotate(36deg) scaleY(.68); animation: orbit-two 22s linear infinite; }
.aura-glint { position: absolute; width: 7px; height: 7px; right: 44px; top: 156px; border-radius: 50%; background: #e6f7ff; box-shadow: 0 0 18px 5px #9fdbffb2; }
@keyframes aura-breathe { to { transform: translateY(-8px) scale(1.03); filter: hue-rotate(9deg); } }
@keyframes orbit-one { to { transform: rotate(334deg) scaleY(.55); } }
@keyframes orbit-two { to { transform: rotate(-324deg) scaleY(.68); } }

.chat-surface:has(.empty-state:not([hidden])) .composer-dock { background: none; padding: 0 26px 20px; }
.composer-dock { background: linear-gradient(180deg, #0c101100, #090c13 18%); padding: 0 26px 19px; }
.composer {
  max-width: 840px;
  background: linear-gradient(145deg, #1c2331ed, #101722f5);
  border: 1px solid #8aa9d44d;
  border-radius: 21px;
  box-shadow: 0 20px 65px #02040b96, 0 0 30px #6ea8ff12, inset 0 1px #ffffff23;
  padding: 16px 16px 11px;
  backdrop-filter: blur(20px);
}
.composer:focus-within { border-color: #99c9ff9c; box-shadow: 0 18px 65px #02040b96, 0 0 32px #699deb33; }
.composer textarea { color: #eef5ff; background: transparent; min-height: 54px; font-size: 14px; }
.composer textarea::placeholder { color: #7f90a9; }
.composer-left { gap: 8px; }
.attach-button, .model-picker, .mode-picker { background: #ffffff09; border: 1px solid #ffffff1f; color: #b7c8df; border-radius: 9px; }
.attach-button:hover, .model-picker:hover { background: #ffffff17; border-color: #a7c8f266; color: #fff; }
.attach-button:disabled { background: #ffffff05; color: #65748a; }
.model-picker { max-width: 220px; font-weight: 650; }
.model-picker-icon { color: #b7dfff; text-shadow: 0 0 12px #9fd7ff; }
.mode-picker select { color: #b5c6dc; }
.mode-picker select option { color: #e9f1fc; background: #17202d; }
.mode-picker>span:last-child { color: #8699b3; }
.model-cost { color: #7f9cb9; font-size: 10px; white-space: nowrap; }
.model-cost.insufficient { color: #ffc793; }
.char-count { margin-left: auto; color: #62738b; }
.send-button { width: 35px; height: 35px; background: linear-gradient(135deg, #ddf3ff, #7ab3fa); color: #09192d; border-radius: 10px; box-shadow: 0 0 20px #74aefa43; }
.send-button:hover { background: #f4faff; }
.send-button:disabled { background: #3e4b60; color: #9baac1; box-shadow: none; }
.attachment-preview { background: #769fff16; border-color: #a7caff44; color: #a7b7cf; }
.attachment-preview span:first-child { color: #d9eafe; }
.attachment-preview button { color: #aab9cf; }
.quick-actions { max-width: 840px; gap: 9px; margin-top: 18px; }
.quick-actions button { background: #ffffff07; border: 1px solid #ffffff1e; color: #aab9d0; border-radius: 999px; padding: 9px 14px; transition: background .2s, border-color .2s; }
.quick-actions button span { color: #a4cfff; margin-right: 5px; }
.quick-actions button:hover { color: #fff; background: #80b7ff16; border-color: #91bfff74; }
.composer-note { color: #586982; font-size: 10px; letter-spacing: .015em; }

.messages { max-width: 900px; padding-top: 42px; }
.message-bubble { background: #202938; color: #e4edfa; border: 1px solid #ffffff12; }
.assistant-icon { background: linear-gradient(150deg, #8acaff, #3a5dc2 70%, #253266); box-shadow: 0 0 18px #7294ff70; }
.assistant-content { color: #dce6f5; }
.assistant-label { color: #92b5e7; }
.message.pending .assistant-content { color: #8194af; }
.message-copy { color: #7891b1; }
.message-copy:hover { color: #d9ecff; background: #ffffff11; }

.dialog-backdrop { grid-template-columns: minmax(0, 1fr); background: #03060dc9; backdrop-filter: blur(13px); }
.access-dialog, .model-dialog { min-width: 0; max-width: 100%; justify-self: center; background: linear-gradient(145deg, #1d2635f7, #111823fa); border: 1px solid #ffffff25; color: #eef4ff; box-shadow: 0 30px 120px #01030abd, 0 0 65px #668dcd24; }
.access-dialog { border-radius: 25px; padding: 32px; }
.model-dialog { width: min(100%, 690px); border-radius: 25px; padding: 29px; }
.dialog-mark { background: linear-gradient(145deg, #c9ecff, #7096ec 60%, #4152b9); color: #fff; box-shadow: 0 0 27px #80b5ff74; }
.dialog-eyebrow { color: #88b7ee; letter-spacing: .16em; }
.access-dialog h2, .model-dialog h2 { color: #f6faff; font-weight: 620; }
.dialog-intro, .model-dialog-note, .model-empty { color: #8899b1; }
.dialog-close { color: #9aaac1; }
.dialog-close:hover { color: #fff; }
.access-dialog form label, .lab-controls label { color: #a7bad4; }
.access-dialog form input, .lab-controls input, .model-dialog input[type=search] { background: #0d1420; color: #eff6ff; border: 1px solid #ffffff28; border-radius: 11px; }
.access-dialog form input:focus, .model-dialog input[type=search]:focus { border-color: #91c6ff9d; }
.redeem-button { background: linear-gradient(110deg, #b9dfff, #83aaf2); color: #0b1a31; }
.redeem-button:hover { background: #d6efff; }
.access-message { color: #ffb0a7; }
.access-message.success { color: #92e2c1; }
.demo-area { background: #ffffff0a; border-color: #ffffff21; }
.demo-area span, .lab-area { color: #8c9ab0; }
.demo-area code { color: #c1defa; }
.demo-area button, .lab-controls button { color: #d5e9ff; background: #6d9bd339; }
.lab-area p { color: #a7d7ff; }
.dialog-footer { border-color: #ffffff1b; color: #7b8ba3; }
.dialog-footer button { color: #ffafac; }
.model-count { color: #7e91ad; font-size: 12px; margin: -8px 0 19px; }
.provider-filters { min-width: 0; max-width: 100%; gap: 8px; padding: 17px 0 15px; }
.provider-filters button { color: #9badc6; background: #ffffff07; border-color: #ffffff21; }
.provider-filters button.active { color: #0a1930; background: #c1e3ff; border-color: #d9edff; }
.model-list { padding-right: 3px; }
.model-option { background: #ffffff08; border-color: #ffffff1f; color: #dce9fb; border-radius: 14px; padding: 13px 14px; }
.model-option:hover, .model-option.active { background: #7599d220; border-color: #a2cfff88; }
.provider-mark { color: #d2eaff; background: linear-gradient(140deg, #4674bd, #293652); border: 1px solid #ffffff1c; }
.model-option[data-provider="anthropic"] .provider-mark { background: linear-gradient(140deg, #b48b75, #5d4e50); }
.model-option[data-provider="gemini"] .provider-mark { background: linear-gradient(140deg, #638ee1, #5a4bab); }
.model-option[data-provider="xai"] .provider-mark { background: linear-gradient(140deg, #a3a9b4, #404751); }
.model-option[data-provider="ollama"] .provider-mark { background: linear-gradient(140deg, #59baa9, #275268); }
.model-option[data-provider="deepseek"] .provider-mark { background: linear-gradient(140deg, #4e82d5, #28457c); }
.model-option strong { color: #eaf2ff; font-size: 13px; }
.model-option small { color: #8297b4; }
.model-check { color: #b4d9ff; }
.model-option-pending { opacity: .63; cursor: default; }
.model-option-pending:hover { background: #ffffff08; border-color: #ffffff1f; }
.pending-badge { color: #8fa1bb; background: #ffffff0b; border: 1px solid #ffffff16; border-radius: 999px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
.provider-filters { scrollbar-width: none; }
.provider-filters::-webkit-scrollbar { display: none; }
.model-list { scrollbar-width: thin; scrollbar-color: #52647f transparent; }
.toast { color: #e9f3ff; background: #293e5b; border: 1px solid #9bc4ff4d; }

@media (max-width: 1100px) {
  .hero-aura { width: 330px; height: 330px; right: 0; opacity: .66; }
  .aura-core { inset: 64px; }
  .empty-state h1 { font-size: clamp(49px, 5.5vw, 69px); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { width: min(320px, 88vw); box-shadow: 18px 0 45px #02040fc4; }
  .main-area { height: 100dvh; }
  .topbar { height: 63px; padding: 0 17px; }
  .topbar-overline { display: none; }
  .topbar-title { display: block; max-width: 29vw; }
  .topbar-right { gap: 7px; }
  .live-indicator { padding: 7px 8px; }
  .chat-surface:has(.empty-state:not([hidden])) { justify-content: center; gap: 6px; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { min-height: 315px; padding: 18px 24px 0; }
  .hero-content { max-width: 100%; }
  .empty-state h1 { font-size: clamp(43px, 9vw, 65px); }
  .empty-state .hero-description { font-size: 13px; max-width: 430px; }
  .hero-aura { width: 250px; height: 250px; right: -65px; top: 33%; opacity: .23; }
  .aura-core { inset: 45px; }
  .hero-meta { margin-top: 18px; }
  .hero-actions { margin-top: 19px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding: 0 13px 14px; }
  .composer-dock { padding: 0 12px 12px; }
  .composer { padding: 12px 11px 8px; border-radius: 17px; }
  .quick-actions { gap: 7px; margin-top: 12px; }
  .quick-actions button { padding: 8px 11px; font-size: 11px; }
  .model-cost { display: none; }
  .char-count { display: none; }
  .access-dialog, .model-dialog { padding: 23px; }
  .messages { padding: 23px 17px 35px; }
  .icon-button { color: #c3d2e7; }
}
@media (max-width: 430px) {
  .topbar-right #mode-label { display: none; }
  .topbar-title { max-width: 30vw; }
  .empty-state h1 { font-size: 42px; }
  .empty-state .hero-eyebrow { font-size: 9px; }
  .hero-hint { display: none; }
  .hero-meta { gap: 10px; font-size: 10px; }
  .quick-actions button:nth-child(n+5) { display: none; }
  .model-picker { max-width: 150px; }
  .mode-picker { padding: 5px; }
  .mode-picker select { max-width: 85px; font-size: 11px; }
}
@media (max-height: 850px) and (min-width: 761px) {
  .chat-surface:has(.empty-state:not([hidden])) { gap: 4px; overflow-y: auto; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { min-height: 350px; padding-top: 7px; }
  .empty-state h1 { font-size: clamp(47px, 5.1vw, 72px); margin-bottom: 16px; }
  .empty-state .hero-description { line-height: 1.65; }
  .hero-meta { margin-top: 17px; }
  .hero-actions { margin-top: 18px; }
  .hero-aura { width: 340px; height: 340px; }
  .aura-core { inset: 64px; }
  .chat-surface:has(.empty-state:not([hidden])) .composer-dock { padding-bottom: 11px; }
  .quick-actions { margin-top: 10px; }
}
@media (max-height: 710px) {
  .chat-surface:has(.empty-state:not([hidden])) { justify-content: flex-start; overflow: auto; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { min-height: 330px; padding-top: 30px; }
  .hero-aura { width: 310px; height: 310px; }
  .aura-core { inset: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .aura-core, .aura-orbit { animation: none; }
  .hero-explore, .quick-actions button { transition: none; }
}