/* Frontend palette. Layout and responsive behavior live in chat.css. */
:root {
  color-scheme: light;
  --green: #078443;
  --accent-hover: #066f38;
  --accent-soft: #eaf6ef;
  --text: #202124;
  --muted: #666b70;
  --line: #e8e9eb;
  --surface: #fff;
  --canvas: #ededed;
  --chrome: #f7f7f7;
  --danger: #be3737;
  color: var(--text);
  background: #e6e7e9;
}

/* Shared controls and readable supporting text. */
button, a, input, textarea, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline-color: var(--green);
}
input, textarea, select { accent-color: var(--green); }
.primary-button, .market-start, .conversation .composer .send-button {
  background: var(--green);
  color: #fff;
}
.secondary-button, .market-settings {
  background: #f0f1f2;
  color: #4e5359;
}
.primary-button, .secondary-button, .market-start, .market-settings,
.icon-button, .node-summary-row, .wx-settings-link, .story-choice {
  transition: background-color .15s, border-color .15s, color .15s;
}
.danger-button { background: #fff0ef; color: var(--danger); }
.field-note, .empty-list, .loading-text, .card-meta, .eyebrow,
.side-footer, .welcome-note, .item-copy p, .item-title time,
.message-name, .message-time, .message-usage, .start-model small,
.profile-person-copy p, .wx-settings-value, .wx-settings-note,
.wx-settings-person-copy > span, .wx-model-copy small,
.node-model small, .node-speed, .node-result-note, .node-url,
.node-detail-dialog .node-url, .node-summary-copy > span,
.node-guide-steps p, .node-guide-model small, .share-help,
.contribution-intro p, .contribution-note, .contribution-copy p,
.contribution-copy small, .profile-view > .contribution-note {
  color: var(--muted);
}
.field-note { font-size: 12px; line-height: 1.8; }
.text-button, .history-button, .node-guide-link, .latest-reply {
  color: var(--green);
}
.icon-button, .profile-back, .node-dialog .dialog-header .node-back {
  color: #4e5359;
}
.toast { background: #292b2ef2; }

/* Navigation, lists and market cards. */
.app, .conversation, .profile-view { background: var(--canvas); }
.sidebar { background: var(--chrome); border-color: var(--line); }
.search { background: #eaecee; color: var(--muted); border-radius: 6px; }
.search input { color: var(--text); }
.search input::placeholder { color: var(--muted); }
.search:focus-within { box-shadow: 0 0 0 2px #07844340; }
.add-button { background: #eaecee; }
.side-footer, .conversation-item, .card-row { border-color: var(--line); }
.conversation-item.selected { background: #e0e9e3; }
.status-dot { background: var(--green); }
.list-label { color: var(--muted); }
.me-menu { background: #edf2ef; color: #5f7065; }
.card-scopes { background: #eaecee; }
.card-scopes button { color: var(--muted); }
.card-scopes button.active {
  color: var(--green);
  background: #fff;
  box-shadow: 0 1px 3px #00000008;
}
.market-settings { color: #4e5359; }
.card-row p, .card-row .card-meta, .comment-head time { color: var(--muted); }
.setting-block, .market-comment { border-color: var(--line); }
.setting-block summary { color: #4e5359; }
.setting-block p, .market-comment p { color: #555e63; }
.personal-card { border-color: var(--line); background: #fff; }
.card-small-actions button { background: #f0f1f2; color: #4e5359; }
.card-small-actions button:first-child { background: var(--accent-soft); color: var(--green); }
.avatar-self { background: #dceee2; color: #32724d; }
.welcome { background: #f2f3f4; }
.welcome-orbit { border-color: #d7e4db; }
.welcome-orbit span { color: #5b8e70; }
.welcome-orbit i { background: #f2f3f4; color: #7c9d88; }
.welcome > p, .welcome-card p { color: var(--muted); }
.welcome-card { background: #fff; color: var(--text); border-color: var(--line); }
.welcome-card small { color: var(--green); }

/* Chat keeps the familiar white and green bubbles. */
.conversation .chat-header, .profile-page-header, .conversation-settings-header {
  background: var(--chrome);
  border-color: #dedfe1;
  color: var(--text);
}
.conversation .composer-wrap { background: var(--chrome); border-color: #dedfe1; }
.conversation .composer textarea { color: var(--text); box-shadow: inset 0 0 0 1px #00000003; }
.conversation .composer textarea:focus-visible { outline-offset: 0; outline-width: 1px; }
.bubble { color: var(--text); }
.message-story { color: #42494b; }
.message-status { background: #f8f9f9; border-color: #d9dee0; border-radius: 7px; }
.message-status > summary { color: #5c6469; margin: 0; }
.message-status[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.message-status .story-panel h3 { font-weight: 500; color: #434b50; }
.message-status .story-panel dl { color: #42494b; }
.message-status .story-panel dt { color: var(--muted); }
.message-choice-hint { color: #656b70; }
.message-story .story-choice {
  background: #fff;
  color: #326448;
  border-color: #d3dfd7;
  border-radius: 7px;
}
.message-story .choice-number { background: var(--accent-soft); color: var(--green); font-size: 11px; }
.message-story .story-choice:disabled { opacity: 1; background: #f5f6f6; color: #73787b; border-color: #dfe2e3; }
.message-story .story-choice:disabled .choice-number { background: #e6e9e8; color: #73787b; }
.message-story .story-choice.is-chosen { color: #266a43; background: #e6f3e9; border-color: #aecfb9; }
.message-story .story-choice.is-chosen .choice-number { background: #d3eadb; color: #266a43; }
.chat-error { color: #a23c30; background: #fff1ee; }

/* Clean white dialogs and consistent input fields. */
dialog { background: #fff; color: var(--text); border-color: #e0e2e4; box-shadow: 0 20px 65px #00000026; }
dialog::backdrop { background: #161a2066; backdrop-filter: none; }
.dialog-header, .dialog-footer { border-color: var(--line); }
.node-dialog .dialog-header, .node-dialog .dialog-footer { background: #fff; }
.card-dialog input:not([type=radio]), .card-dialog textarea,
.node-field input, .node-field select,
.share-dialog input, .share-dialog textarea, .share-dialog select {
  border-color: #d8dcdf;
  color: var(--text);
  background: #fff;
}
.card-dialog label > span, .card-dialog input::placeholder,
.card-dialog textarea::placeholder, .node-field input::placeholder,
.share-dialog input::placeholder, .share-dialog textarea::placeholder { color: var(--muted); }
.share-dialog :is(input, textarea, select):focus { border-color: var(--green); box-shadow: 0 0 0 3px #07844312; }
.ai-card-builder { background: #f5f8f6; border-color: #dde8e1; }
.draft-actions select { color: var(--text); border-color: #d8dcdf; }
.share-dialog { color: var(--text); }
.share-header p, .share-destination div span, .share-footer > p,
.share-body-heading span { color: var(--muted); }
.share-destination > a, .share-review-heading .text-button { color: var(--green); }
.share-board-icon { background: var(--accent-soft); color: var(--green); }
.share-job-panel { background: #f5f8f6; border-color: #dde8e1; }
.share-settings, .share-footer { border-color: var(--line); }
.card-dialog input[type=checkbox], .mode-select input, .node-check input, .start-model input { accent-color: var(--green); }
details summary, .node-guide-group summary { color: #555e63; }
.start-model, .existing-chat-list, .node-model-list, .node-model,
.node-card, .node-guide-group, .node-result-row { border-color: var(--line); }
.start-model:has(input:checked) { background: var(--accent-soft); border-color: var(--green); }
.existing-chat { background: #f5f8f6; border-color: var(--line); }
.existing-chat strong { color: var(--green); }
.existing-chat span, .confirm-dialog p, .detail-dialog p { color: var(--muted); }
.avatar-picker button.selected { border-color: var(--green); }
.conversation-settings-dialog { background: var(--canvas); }
.wx-settings-person, .wx-settings-row, .wx-settings-center { color: var(--text); }
.wx-settings-group > .wx-settings-row + .wx-settings-row::before { border-color: var(--line); }
.wx-settings-arrow { border-color: #b4b8bd; }
.wx-settings-check { border-color: var(--green); }
.wx-settings-danger { color: var(--danger); }
.wx-settings-accent { color: #526b95; }

/* Profile icons line up with both labels and inset separators. */
.profile-menu-row { gap: 12px; }
.profile-menu-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eaf6ef;
  color: var(--green);
}
.profile-menu-icon svg { width: 19px; height: 19px; stroke-width: 1.7; }
#profileCards .profile-menu-icon, #profileGuide .profile-menu-icon { background: #eaf1fb; color: #4572ae; }
#profileTasks .profile-menu-icon { background: #f0edfa; color: #7960a7; }
#profileContributions .profile-menu-icon { background: #fbf2df; color: #976917; }
#profileForumLink .profile-menu-icon, #profileAdmin .profile-menu-icon { background: #eff0f2; color: #636b75; }
.profile-view .wx-settings-group > .profile-menu-row + .profile-menu-row::before { left: 60px; }
.profile-view .profile-menu-row .wx-settings-value { font-variant-numeric: tabular-nums; }
.stat-box { border-color: var(--line); }
.stat-box span, .usage-model span { color: var(--muted); }
.stat-box strong { color: var(--green); font-variant-numeric: tabular-nums; }
.usage-model { border-color: var(--line); }

/* Node health uses the same color meanings throughout the app. */
.node-status-ok, .node-selection-mark.is-selected { background: #eaf6ef; color: #167242; }
.node-status-offline { background: #fff0ef; color: var(--danger); }
.node-status-pending, .node-status-paused, .node-selection-mark { background: #f0f1f2; color: #62686f; }
.node-status-queued { background: #fff5e1; color: #8c641b; }
.node-status-checking { background: #ecf3fd; color: #386cac; }
.node-cost-notice { background: #fffaef; border-color: #efdfb9; color: #805c23; }
.node-detection-title, .node-selection-summary { color: #42494f; }
.node-detection-progress { accent-color: var(--green); background: #edf0ef; }
.node-detection-progress::-webkit-progress-bar { background: #edf0ef; }
.node-detection-progress::-webkit-progress-value { background: var(--green); }
.node-detection-progress::-moz-progress-bar { background: var(--green); }
.node-result-filters { gap: 6px; }
.node-result-filters button { color: #60666c; background: #f1f2f3; border: 1px solid transparent; border-radius: 5px; }
.node-result-filters button.active { color: var(--green); background: var(--accent-soft); border-color: #bedbc9; }
.node-summary-row { color: var(--text); border-color: var(--line); }
.node-delete { color: var(--danger); border-color: var(--line); }
.node-detail-name { font-weight: 600; }

/* Contribution amounts stay prominent without overpowering the names. */
.contribution-row { border-color: var(--line); }
.contribution-rank { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.contribution-rank.is-top { height: 28px; border-radius: 8px; color: #93651d; background: #fbf1da; }
.contribution-row[data-rank="2"] .contribution-rank { color: #5b6c7e; background: #edf1f5; }
.contribution-row[data-rank="3"] .contribution-rank { color: #9a6646; background: #f7ede5; }
.contribution-name { color: var(--text); }
.contribution-total { color: var(--green); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.contribution-copy small { font-size: 12px; }
.contribution-row.is-self { background: #f6fbf8; }
.contribution-row.is-self .contribution-name { font-weight: 500; }

@media (hover: hover) {
  .primary-button:not(:disabled):hover, .market-start:not(:disabled):hover, .conversation .composer .send-button:not(:disabled):hover { background: var(--accent-hover); }
  .secondary-button:not(:disabled):hover, .market-settings:not(:disabled):hover { background: #e6e8ea; }
  .wx-settings-link:hover, .profile-menu-row:hover, .node-summary-row:hover { background: #f5f6f6; }
  .conversation-item:hover { background: #eaecee; }
  .conversation-item.selected:hover { background: #d9e4dd; }
  .message-story .story-choice:not(:disabled):hover { background: var(--accent-soft); border-color: #aacbb6; }
  .contribution-name:hover, .node-guide-link:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
}
.primary-button:not(:disabled):active, .market-start:not(:disabled):active, .conversation .composer .send-button:not(:disabled):active { background: #056633; }
.secondary-button:not(:disabled):active, .node-summary-row:active, .profile-menu-row:active { background: #e9ebed; }
.message-story .story-choice:not(:disabled):active { background: #e1efe6; border-color: #aacbb6; }

@media (min-width: 701px) {
  .rail { background: #292c30; color: #adb2b9; }
  .rail-button.active { background: #ffffff09; color: #57d590; }
  .brand-avatar { background: #dceee2; color: #32724d; }
}
@media (max-width: 700px) {
  .rail { background: #f7f7f7; border-color: #dedfe1; color: #6e747a; }
  .rail-button { border-radius: 6px; }
  .rail-button.active { color: var(--green); }
  .rail-button span { font-size: 11px; }
  .profile-view .wx-settings-group > .profile-menu-row + .profile-menu-row::before { left: 58px; }
}
@media (min-width: 1450px) {
  .app { border-color: #d9dcdf; box-shadow: 0 16px 65px #2024281a; }
}
@media (prefers-reduced-motion: reduce) {
  button, a { transition: none; }
}