/* Reasoning per tier (docs/PLAN-2026-09-24-thinking-per-model.md 2.7): Settings → "Model & reasoning", the chat's
   Reasoning chip next to the model badge, and the admin page's model settings banner (owner decision 5).
   Only style.css's colour tokens are used, so the light and dark themes follow. */

/* ── Settings: the full-width block above "About you" / "System prompt" ── */
.model-reasoning-block {
  max-width: 1100px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  min-width: 0;
}

.model-reasoning-block .mr-field {
  margin-top: 12px;
}

.mr-label {
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

/* Default model for new chats: a segmented control (one button per tier, weakest first) */
.mr-seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.mr-seg-btn {
  min-width: 0;
  padding: 6px 16px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mr-seg-btn:last-child {
  border-right: 0;
}

.mr-seg-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.mr-seg-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.mr-seg-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}

.mr-seg-desc {
  margin: 6px 0 0;
}

/* Reasoning: one switch per tier */
.mr-tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 16px;
  align-items: start;              /* a disabled tier's note does not push its row-mates down */
}

.reasoning-tier-row {
  flex-wrap: wrap;
  min-width: 0;
  margin-top: 0;
}

.reasoning-tier-name {
  color: var(--text);
}

.reasoning-tier-row.is-disabled {
  cursor: not-allowed;
}

.reasoning-tier-row.is-disabled .reasoning-tier-name {
  color: var(--text-muted);
}

.reasoning-tier-note {
  flex-basis: 100%;
  padding-left: 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.reasoning-info {
  margin: 12px 0 6px;
}

/* Details: read-only effective settings per model */
.mr-details summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mr-details[open] summary {
  margin-bottom: 8px;
}

.mr-details-body {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.mr-detail {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.mr-detail-head {
  margin-bottom: 4px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mr-detail-head code {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.mr-detail-note {
  color: var(--warn-fg);
}

.mr-detail-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 2px;
}

.mr-detail-mode-name {
  min-width: 96px;
  font-weight: 600;
}

.mr-detail-values {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
}

.mr-detail-item strong {
  font-weight: 500;
  color: var(--text);
}

/* ── Chat: the Reasoning chip next to the model badge ── */
.topbar-model {
  gap: 6px;
}

.reasoning-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.reasoning-chip[hidden] {
  display: none;
}

.reasoning-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.reasoning-chip.is-on {
  border-color: var(--badge-blue);
  background: var(--badge-blue-bg);
  color: var(--link);
}

.reasoning-chip:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ── Admin: the model settings banner (hidden when model_settings.ok) ── */
.admin-settings-banner {
  max-width: 1100px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-settings-banner[hidden] {
  display: none;
}

.admin-settings-banner ul {
  margin: 6px 0;
  padding-left: 18px;
}

.admin-settings-banner code {
  font-size: 0.78rem;
}

.admin-settings-banner-models,
.admin-settings-banner-hint {
  margin-top: 6px;
}

/* ── Phones: the block stacks, the tier segments and switches wrap two per row, the chip keeps icon + state ── */
@media (max-width: 560px) {
  .model-reasoning-block {
    padding: 12px;
  }

  .mr-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mr-seg-btn {
    padding: 8px 6px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
  }

  .mr-seg-btn:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .mr-tier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mr-detail-mode-name {
    min-width: 0;
    flex-basis: 100%;
  }

  .reasoning-chip {
    padding: 4px 8px;
  }

  .reasoning-chip-label {
    display: none;
  }
}

/* Narrow phones: the badge + reasoning chip need the room, so the brand keeps its logo and drops the title and
   status line (at 360 px the title otherwise ran under the model badge; checked in a browser at 320-414 px). */
@media (max-width: 420px) {
  .topbar .brand > div {
    display: none;
  }
}

/* ── Chat: the reasoning line (reasoning-ui-1, owner 29-09) ──
   With Reasoning on, the model's reasoning is one compact line: a pulsing brain + "Thinking… 4s" while it reasons,
   "Thought for 6s" after, with a chevron. The text opens only on click (collapsed by default). Replaces style.css's
   bordered "Reasoning" box, which always showed the whole text; matches the "Answer activity" line below it. */
.reasoning {
  margin: 0 0 2px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.reasoning[hidden] {
  display: none;
}

.reasoning-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;                /* touch target, as the Answer activity line */
  padding: 0 6px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}

.reasoning-toggle:hover {
  color: var(--text);
}

.reasoning-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.reasoning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--badge-blue-bg);
  color: var(--link);
}

.reasoning-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.reasoning-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reasoning-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.reasoning-time:empty {
  display: none;
}

.reasoning-chevron::before {
  content: "›";
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.15s;
}

.reasoning-toggle[aria-expanded="true"] .reasoning-chevron::before {
  transform: rotate(90deg);
}

/* Live: the brain breathes and the words shimmer while the model reasons */
.reasoning.is-live .reasoning-icon {
  animation: reasoning-pulse 1.6s ease-in-out infinite;
}

.reasoning.is-live .reasoning-label {
  background: linear-gradient(90deg, var(--text-muted) 0%, var(--text) 50%, var(--text-muted) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reasoning-shimmer 2.2s linear infinite;
}

@keyframes reasoning-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--badge-blue-bg-hover); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px transparent; }
}

@keyframes reasoning-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Expanded: the reasoning text, quiet and scrollable, under a thin rule aligned with the brain */
.reasoning-body {
  max-height: min(50vh, 420px);
  overflow-y: auto;
  margin: 0 0 10px 12px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--border);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reasoning-body[hidden] {
  display: none;
}

/* The Answer activity line keeps its look; same weight as the reasoning line so the two read as one set */
.steps-strip > summary {
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .reasoning.is-live .reasoning-icon,
  .reasoning.is-live .reasoning-label {
    animation: none;
  }

  .reasoning.is-live .reasoning-label {
    background: none;
    color: inherit;
  }

  .reasoning-chevron::before,
  .reasoning-toggle {
    transition: none;
  }
}

/* site-scope-ui-1 (owner 30-09): a chat that answers only from named sites says so plainly. The banner sits at the top
   of the conversation (above the chat log, so it never scrolls away); the notice and the "From <site> · N sources" line
   sit under an answer. Theme tokens only (light and dark); long site names wrap, never a horizontal scroll. */
.site-scope-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: none;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: 8px 20px 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--badge-blue);
  border-radius: 10px;
  background: var(--badge-blue-bg);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.site-scope-banner[hidden] {
  display: none;
}

.site-scope-banner-icon {
  flex: none;
}

.site-scope-banner-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.msg.assistant .site-scope-notice,
.msg.assistant .site-scope-answer {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.msg.assistant .site-scope-notice {
  margin-top: 0.6rem;
  padding: 0.4rem 0.65rem;
  border-left: 3px solid var(--badge-blue);
  border-radius: 4px;
  background: var(--badge-blue-bg);
  color: var(--text);
  font-size: 0.88rem;
}

.msg.assistant .site-scope-answer {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}

@media (max-width: 560px) {
  .site-scope-banner {
    margin: 6px 12px 0;
    font-size: 0.875rem;
  }
}