/* One palette and material system from the opening through every workspace. */
:root {
  color-scheme: dark;
  --night: #101114;
  --night-muted: #929a94;
  --forest: #84d5ab;
  --bg: var(--night);
  --surface: #1b1d24;
  --sidebar: #141518;
  --ink: #f0f2ef;
  --text: #c9ceca;
  --muted: #9ba39d;
  --line: #ffffff12;
  --accent: var(--forest);
  --accent-soft: #84d5ab12;
  --reading-width: 760px;
}

/* A quiet, dark navigation rail carries through every view. */
.sidebar { background: #141518; border-right: 1px solid #ffffff0c; color: #eff5f1; }
.brand-mark { color: #173524; background: linear-gradient(140deg,#fff,#a8cdb5); box-shadow: inset 0 1px 0 #fff,0 3px 15px #0003; }
.brand-en, .brand small { color: #94a39b; }
.sidebar .brand-en { display: inline; color: #a9dfbb; font-size: 11px; font-weight: 650; letter-spacing: 1.3px; }
.brand strong .name-font { font-size: 23px; letter-spacing: 0; }
.intro-brand .name-font { font-size: 24px; }
.answer-heading .name-font { font-size: 19px; }
.new-chat { background: #24262b; color: #f1f5f2; border: 1px solid #ffffff0c; box-shadow: none; }
.new-chat:hover { background: #303239; box-shadow: none; }
.key-hint { color: #96a49c; }
.nav-item { color: #a2aaa5; }
.nav-item:hover, .history-item:hover, .history-item.active { background: #ffffff07; color: #f1f5f2; }
.nav-item.active { background: #ffffff09; color: #f5faf6; }
.nav-dot { background: var(--forest); box-shadow: 0 0 8px #84d5ab55; }
.nav-count, .history-heading, .history-empty, .history-item, .history-day { color: #8c9690; }
.sidebar .icon-button:hover { background: #ffffff0b; color: #fff; }
.edition-card { border-color: #ffffff10; }
.edition-card strong { color: #bdcbc2; }
.edition-card small, .local-note { color: #92a097; }
.help-button { color: #99a39c; padding-bottom: 12px; }
.help-button:hover { color: #fff; }
.local-note { padding-top: 6px; }

/* A cinematic canvas surrounds the question, with no moving distractions. */
.workspace { position: relative; background: var(--night); color: var(--ink); }
.workspace .topbar { background: #101114; color: #cbd1cc; }
.workspace .breadcrumb { display: block; flex-shrink: 0; color: #b6e9c9; font-size: 15px; font-weight: 650; letter-spacing: 1.8px; }
.workspace .breadcrumb-divider { color: #405348; }
.workspace .service-status { color: #8d9991; }
.workspace .service-status:hover,
.workspace .icon-button:hover { background: #ffffff0b; color: #f5fff8; }
.chat-scroll { scrollbar-color: #35473d transparent; scroll-behavior: auto; }
/* The headline, question and useful prompts form one clear hierarchy. */
.welcome { width: 82%; max-width: 1400px; padding: 44px 0; container-type: inline-size; }
.welcome-header { position: relative; text-align: left; }
.welcome h2 { display: block; margin: 0; font-size: clamp(22px,8.1cqw,96px); font-weight: 600; line-height: 1.09; letter-spacing: -.045em; word-spacing: .08em; }
.welcome h2 > .welcome-lead, .welcome h2 > .welcome-location { display: block; color: #f1f2ef; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.welcome h2 > .welcome-location { margin-top: 5px; }
.location-prefix { color: inherit; }
.njfu-wordmark { display: inline; background: linear-gradient(120deg,#c0efb3 5%,#85dba5 45%,#52b98a 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; letter-spacing: -.025em; }
.welcome-location .location-prefix, .welcome-location .njfu-wordmark { margin: 0; font-size: inherit; line-height: inherit; }
.welcome-location .location-prefix { font-weight: inherit; }
.welcome-location .njfu-wordmark { font-size: 1.35em; line-height: 1; }
.campus-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin: 24px 0 0; color: #959b97; font-size: 15px; line-height: 1.6; }
.campus-caption strong { color: #dee3de; font-size: 22px; font-weight: 500; letter-spacing: 1px; }
.campus-caption > span { padding-left: 15px; border-left: 1px solid #ffffff26; }
.assistant-tagline { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.assistant-signature { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.signature-dash { color: #7f9787; }
.assistant-name {
  display: inline-block;
  font-size: clamp(21px,1.6em,28px); font-weight: 400; line-height: 1.2;
  letter-spacing: .05em; color: #c4edb0; transform: rotate(-4deg);
  text-shadow: 0 2px 14px #a4e69515;
}
.welcome-workspace { margin-top: 36px; }
#welcome-input { margin: 0 0 18px; }
.welcome .composer { padding: 24px 26px 18px; }
.welcome .composer textarea { min-height: 72px; font-size: 19px; }
.welcome .composer-toolbar { margin-top: 14px; }
.composer { position: relative; border: 1px solid #ffffff26; border-radius: 23px; background: #1a1c1f; box-shadow: 0 12px 40px #0000001a,inset 0 1px 0 #ffffff04; }
.composer:focus-within { border-color: #89bd9b90; box-shadow: 0 0 0 3px #84d5ab06,0 12px 40px #0000001a; }
.composer textarea { color: #f0f3ef; font-size: 16px; }
.composer textarea::placeholder { color: #9ca19e; }
.verify-control { color: #a0aaa3; font-size: 12px; padding-left: 0; }
.verify-control:hover { background: #ffffff08; }
.switch-track { background: #505451; }
.verify-control input:checked ~ .switch-track { background: #78c497; }
.input-count { color: #979e99; }
.send-button { width: 40px; height: 40px; background: #a4dfb5; color: #153522; border-radius: 50%; }
.send-button:hover:not(:disabled) { background: #c4f0cc; }
.send-button:disabled { background: #ffffff0d; color: #747d77; }
.welcome .text-button { color: #8c958e; font-size: 12px; }
.welcome .text-button:hover { color: #e2ebe4; }
.welcome .suggestions { gap: 12px; }
.welcome .suggestion-card { display: flex; flex-direction: row; align-items: center; min-height: 72px; gap: 12px; padding: 16px 18px; background: transparent; border: 1px solid #ffffff12; border-radius: 14px; }
.welcome .suggestion-card:hover { transform: translateY(-2px); border-color: #84d5ab38; background: #ffffff04; }
.suggestion-symbol { display: flex; flex-shrink: 0; color: #91ae9b; }
.suggestion-symbol svg { width: 18px; height: 18px; stroke-width: 1.4; }
.welcome .suggestion-question { padding: 0; color: #bdc5bf; font-size: 15px; line-height: 1.6; font-weight: 400; }
.welcome .suggestion-arrow { display: flex; position: static; flex-shrink: 0; margin-left: auto; color: #7f8a82; }
.welcome .suggestion-arrow svg { width: 13px; height: 13px; }
.welcome-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 0 2px; }
.welcome .browse-link { margin: 0; padding: 4px 0; color: #b3c5b9; font-size: 13px; }
.welcome .browse-link:hover { color: #d1edda; }
.shuffle-button { gap: 7px; }
.shuffle-button svg { width: 13px; height: 13px; }

/* Reading keeps a soft contrast on the charcoal canvas, with green accents. */
* { scrollbar-color: #3a4d41 transparent; }
::selection { background: #81d5a435; color: #fff; }
:focus-visible { outline-color: #84d5ab80; }
.skip-link { background: #c2eed0; color: #163323; }
.topbar { border-bottom: 1px solid #ffffff06; }
.icon-button, .text-button { color: #a3b7aa; }
.icon-button:hover, .text-button:hover { color: #f3faf5; }
.icon-button:hover { background: #ffffff09; }
.chat-view { position: relative; overflow: hidden; }
.welcome, .turn { animation: none; }
.welcome.welcome-ghost { position: absolute; z-index: 2; margin: 0; padding: 0; pointer-events: none; }
.composer-area { position: relative; z-index: 3; background: linear-gradient(#10111400,#101114 26%); }
.composer { max-width: var(--reading-width); transform-origin: top left; }
.composer textarea { caret-color: var(--forest); }
.composer-hint { color: #97afa0; }
.send-button.stopping { background: #a3e7bc; color: #183b27; }
.verify-control:has(input:focus-visible) { outline-color: #84d5ab80; }
.conversation { max-width: var(--reading-width); padding-top: 8px; }
.question-bubble { background: #222629; color: #e0f0e5; border: 1px solid #ffffff0b; }
.answer-heading { color: #eef7f1; letter-spacing: .2px; }
.assistant-mark { background: linear-gradient(145deg,#d4f3df,#82ba98); color: #1a3726; box-shadow: 0 2px 10px #0002; }
.answer-label, .source-strip-label { color: #929e96; }
.answer-body { color: #cbd2cc; line-height: 2; }
.answer-body h3, .answer-body h4, .answer-body strong { color: #f1f8f3; }
.answer-body blockquote { background: #84d5ab07; border-color: #64997a; color: #bad4c4; }
.answer-body code, .answer-body pre, .answer-body th { background: #ffffff07; color: #d8ecdf; }
.answer-body pre code { background: transparent; }
.citation { background: #84d5ab16; color: #a2e4bd; }
.citation:hover { background: #84d5ab2d; }
.pipeline { background: #ffffff04; border: 1px solid #ffffff0b; color: #a7c1b0; }
.pipeline-time, .pipeline summary:after { color: #94ad9e; }
.pipeline-running { background: #a0e3b9; box-shadow: 0 0 10px #84d5ab40; }
.step-check, .verification { color: #9cbcae; }
.verification.warning, .draft-label { color: #c9b78f; }
.source-card { border: 1px solid #ffffff0b; background: #ffffff04; }
.source-card:hover { background: #ffffff08; border-color: #84d5ab28; }
.source-number { background: #84d5ab12; color: #add6ba; }
.source-info strong { color: #d1e4d8; }
.source-info small, .source-card > svg { color: #9bb5a5; }
.icon-button.selected { background: #84d5ab17; color: #a2e4bd; }
.error-box { background: #d89b6510; color: #dfb789; border: 1px solid #d89b6526; }
.pending-hint { color: #a6beaf; }
.streaming:after { color: #a9edc0; }

/* Library, saved answers, and all dialogs use the same raised surfaces. */
.eyebrow, .section-heading p, .library-summary, .missing-note { color: #9aa79e; }
.edition-badge, .library-search { background: #ffffff06; color: #b7d1c1; }
.library-search { border-color: #ffffff0e; }
.library-search:focus-within { border-color: #79b48e; }
.library-search input::placeholder, .library-search svg, .search-shortcut { color: #9eb7a8; }
.filter-chip { color: #a9c1b2; }
.filter-chip:hover { background: #ffffff08; }
.filter-chip.active { background: #a0dfb4; color: #183b26; }
.document-card, .saved-card { background: #ffffff03; border-color: #ffffff10; }
.document-card:hover { background: #ffffff07; border-color: #84d5ab33; box-shadow: 0 6px 20px #0002; }
.document-symbol { background: #84d5ab0b; color: #b0dcbe; }
.document-details p, .saved-card p, .saved-card-bottom { color: #a2bcae; }
.document-match { color: #b4ccbe !important; }
mark { background: #84d5ab26; color: #c9f0d7; }
.empty-state { color: #9ebaa9; }
.empty-state > svg, .empty-state h3 { color: #c2dfcd; }
.empty-state button { background: #84d5ab16; color: #b3e8c5; }
.reader-dialog, .utility-dialog, .notice-dialog { background: #191c23; border-color: #ffffff1c; box-shadow: 0 24px 90px #0008; }
.reader-dialog::backdrop, .utility-dialog::backdrop, .notice-dialog::backdrop { background: #080b1280; }
.reader-header .icon-button, .utility-header .icon-button { background: #ffffff08; color: #b4ccbe; }
.reader-chunk { border-color: #ffffff12; background: #ffffff02; }
.reader-chunk.target { background: #84d5ab08; border-color: #7fc99845; }
.reader-chunk h3 { color: #a9c8b5; }
.reader-chunk.target h3 { color: #b6edc9; }
.reader-chunk p { color: #cbdfd3; }
.reader-note, .reader-footer, #utility-body { color: #a7c0b1; }
.help-row h3 { color: #e0f0e5; }
.help-row p, .help-row > svg { color: #a7bfaf; }
.dialog-input { background: #101319; border-color: #ffffff21; color: #e4f4e9; }
.secondary-button, .menu-action:hover { background: #ffffff08; color: #bdd8c8; }
.primary-button, .notice-actions .primary-button { background: #a0dfb4; color: #183b26; }
.danger-button { background: #e09991; color: #361c1c; }
.menu-action.danger { color: #eaa79e; }
.search-result { color: #c1decc; }
.search-result small { color: #9cb7a7; }
.toast { background: #252c3aee; border-color: #ffffff16; color: #e2f5e8; }
.notice-symbol { background: #84d5ab10; color: #b3e8c5; }
.notice-body, .notice-storage, .notice-version { color: #aac4b5; }
.notice-highlight { background: #84d5ab0a; border-color: #84d5ab26; color: #b2d3be; }
.notice-highlight strong, .notice-body section strong { color: #d8f1e1; }
.notice-body h3 { color: #e3f4e9; }
.notice-body h3 span { color: #99b8a4; }
.notice-footer { background: #191c23; }
.notice-acknowledgement { color: #bddbc8; }
.notice-acknowledgement input { accent-color: #84d5ab; }
.notice-actions .primary-button:disabled { background: #2e3442; color: #a0bbaa; }
.notice-paused, .noscript-message { background: var(--night); color: #e6f6eb; }
.notice-paused p { color: #a8c5b2; }

/* The opening reveal completes during the 4.2 second introduction. */
.intro-dialog { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: auto; background: #0b0c0f; color: #f3f8f4; color-scheme: dark; }
.intro-dialog[open] { display: flex; flex-direction: column; }
.intro-dialog::backdrop { background: #0b0c0f; }
.intro-dialog :focus-visible { outline-color: #84d5ab; }
.intro-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 79% 44%,#7b818d0e,transparent 52%); }
.intro-atmosphere:after { content: ''; position: absolute; left: 6%; right: 6%; top: 95px; height: 1px; background: linear-gradient(90deg,#ffffff25,#ffffff06); }
.intro-orbit { position: absolute; width: min(66vw,900px); aspect-ratio: 1; right: -16%; top: 15%; border: 1px solid #94c6a519; border-radius: 50%; box-shadow: 0 0 100px #69bc880b,inset 0 0 100px #69bc880b; transform: rotate(-30deg) scaleX(.72); }
.intro-orbit:before, .intro-orbit:after { content: ''; position: absolute; inset: 7%; border: 1px solid #94c6a512; border-radius: 50%; }
.intro-orbit:after { inset: 16%; }
.intro-top, .intro-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 20px; padding: 29px 6%; }
.intro-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.intro-brand > span:first-child { color: #c6eace; }
.intro-skip { display: flex; align-items: center; gap: 8px; padding: 10px 0 10px 12px; color: #b6cebf; font-size: 11px; }
.intro-skip svg { width: 13px; height: 13px; }
.intro-skip:hover { color: #fff; }
.intro-content { position: relative; z-index: 1; width: 88%; margin: auto; padding: 40px 0; }
.intro-dialog h2 { margin: 0; outline: none; font-size: clamp(22px,6.6vw,104px); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; word-spacing: .08em; }
.intro-lead { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: #eef5f0; }
.intro-line { display: block; overflow: hidden; padding-bottom: .06em; }
.intro-line > span { display: block; }
.intro-dialog[open]:not(.is-static) .intro-line > span { animation: intro-reveal 1s cubic-bezier(.16,1,.3,1) both; }
.intro-location { display: block; margin-top: 3px; color: #eef5f0; }
.intro-location .location-prefix, .intro-location .njfu-wordmark { display: inline; margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.intro-location .location-prefix { color: inherit; font-weight: inherit; }
.intro-location .njfu-wordmark { font-size: 1.35em; line-height: 1; letter-spacing: -.025em; }
#intro-description { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; margin: 36px 0 0; color: #d5e7dc; font-size: 15px; letter-spacing: .8px; }
.intro-dialog[open]:not(.is-static) .intro-location,
.intro-dialog[open]:not(.is-static) #intro-description { animation: intro-fade 1s .45s both; }
.intro-bottom { padding-top: 20px; padding-bottom: max(32px,env(safe-area-inset-bottom)); }
.intro-progress { width: 150px; min-width: 0; color: #93ad9c; font-size: 10px; letter-spacing: .4px; }
.intro-progress-track { display: block; height: 1px; margin-top: 12px; overflow: hidden; background: #ffffff18; }
.intro-progress-track i { display: block; height: 100%; background: #93d8aa; transform-origin: left; }
.intro-dialog[open]:not(.is-static) .intro-progress-track i { animation: intro-progress 4.2s linear both; }
.intro-dialog.is-manual .intro-progress-track { display: none; }
.intro-enter { display: flex; flex-shrink: 0; align-items: center; gap: 28px; min-height: 46px; padding: 12px 19px; border: 1px solid #ffffff23; border-radius: 100px; background: #ffffff07; color: #f4fbf6; font-size: 12px; white-space: nowrap; }
.intro-enter:hover { background: #b1e9c3; border-color: #b1e9c3; color: #193d28; }
.intro-enter svg { width: 16px; height: 16px; }
@keyframes intro-reveal { from { transform: translateY(110%); opacity: .1; } to { transform: translateY(0); opacity: 1; } }
@keyframes intro-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width:1600px) {
  :root { --reading-width: 840px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .welcome { width: calc(100% - 64px); }
  .welcome .suggestion-card { gap: 9px; padding: 14px 12px; }
  .welcome .suggestion-question { font-size: 13px; }
  .welcome .suggestion-arrow { display: none; }
}
@media (max-width:760px) {
  :root { --reading-width: 560px; }
  .sidebar { background: #141518f7; }
  .welcome { width: calc(100% - 44px); padding: 36px 0; }
  .welcome h2 { font-size: clamp(22px,8.1cqw,58px); }
  .campus-caption { margin-top: 22px; font-size: 13px; gap: 8px 12px; }
  .campus-caption strong { font-size: 19px; }
  .campus-caption > span { padding-left: 12px; }
  .welcome-workspace { margin-top: 30px; }
  .welcome .composer { padding: 20px 20px 14px; }
  .welcome .composer textarea { min-height: 62px; font-size: 17px; }
  .welcome .suggestions { gap: 9px; }
  .welcome .suggestion-card { min-height: 54px; padding: 13px 16px; gap: 13px; }
  .welcome .suggestion-question { font-size: 14px; }
  .intro-content { width: 88%; padding: 38px 0; }
  .intro-orbit { width: 95vw; right: -48%; top: 23%; }
  #intro-description { font-size: 14px; }
}
@media (max-width:430px) {
  .welcome { width: calc(100% - 36px); padding: 30px 0; }
  .campus-caption { align-items: baseline; gap: 4px 10px; font-size: 11px; }
  .campus-caption strong { font-size: 17px; }
  .campus-caption > span { padding-left: 10px; }
  .welcome-workspace { margin-top: 25px; }
  .welcome .composer { padding: 18px 16px 13px; border-radius: 19px; }
  .welcome .composer textarea { font-size: 16px; min-height: 56px; }
  .welcome .suggestion-card { gap: 10px; padding: 12px 13px; }
  .welcome .suggestion-question { font-size: 13px; }
  .welcome-footer { margin-top: 18px; }
  .intro-top { padding-top: 23px; }
  .intro-atmosphere:after { top: 82px; }
  .intro-enter { gap: 18px; }
  .intro-progress { width: 122px; }
}
@media (max-height:800px) and (min-width:761px) {
  .welcome { padding-top: 24px; padding-bottom: 24px; }
  .welcome h2 { font-size: clamp(22px,min(8.1cqw,10.8vh),100px); }
  .welcome-workspace { margin-top: 28px; }
}
@media (prefers-reduced-motion:reduce) {
  .intro-dialog *, .intro-dialog *:before, .intro-dialog *:after { animation: none !important; transition: none !important; }
}

.main-site-link {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  gap: 7px; min-height: 34px; padding: 6px 11px; border: 1px solid #a9dfbb25;
  border-radius: 8px; color: #b9d1c1; font-size: 12px; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.main-site-link svg { width: 15px; height: 15px; }
.main-site-link:hover { color: #e8f7ed; border-color: #a9dfbb55; background: #a9dfbb0a; }
@media (max-width:760px) {
  .main-site-link { min-height: 44px; padding-inline: 9px; font-size: 11px; }
}
@media (max-width:480px) {
  .topbar #status-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .workspace .topbar .service-status { width: 32px; justify-content: center; gap: 0; padding-inline: 6px; }
}