/* ── Design tokens ────────────────────────────────────────────── */
:root {
  --canvas:    #EEF1F5;
  --surface:   #FFFFFF;
  --ink:       #15171C;
  --muted:     #586072;
  --hairline:  #E3E7ED;
  --analyst:   #2A3FB8;
  --contender: #C93B36;

  --font-sans:    'IBM Plex Sans',   -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk',   -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono',   'Courier New', monospace;

  --shadow-card: 0 1px 3px rgba(21,23,28,.05), 0 6px 20px rgba(21,23,28,.05);
  --radius-card: 12px;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* ── Site header ──────────────────────────────────────────────── */
.site-header {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 11px 20px;
  flex-wrap: wrap;
}

.site-header h1 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.team-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  white-space: nowrap;
}

.team-field input {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--canvas);
  color: var(--ink);
  width: 155px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.team-field input::placeholder { color: var(--muted); opacity: 0.6; }
.team-field input:focus { border-color: var(--ink); background: var(--surface); }

#start-over-btn {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

#start-over-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ── Tab bar (narrow screens only) ───────────────────────────── */
.tabs {
  display: none;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tab.active { color: var(--ink); }
.tab[data-panel="analyst"].active   { border-color: var(--analyst); }
.tab[data-panel="contender"].active { border-color: var(--contender); }

/* ── Idea card ────────────────────────────────────────────────── */
.idea-card {
  flex-shrink: 0;
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 20px 12px;
}

.idea-row {
  display: flex;
  gap: 10px 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.idea-row + .idea-row { margin-top: 10px; }

.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* All field labels: Mono uppercase */
.field-group label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.field-group input[type="text"] {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field-group input[type="text"]:focus {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(21,23,28,.07);
}

.field-idea     { flex: 2; min-width: 180px; }
.field-customer { flex: 1; min-width: 140px; }
.field-sdg      { flex: 1; min-width: 200px; }

.req { color: var(--contender); }

.input-error {
  border-color: var(--contender) !important;
  box-shadow: 0 0 0 3px rgba(201,59,54,.12) !important;
}

/* ── SDG pills ────────────────────────────────────────────────── */
.sdg-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 2px;
}

.sdg-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
  user-select: none;
  min-height: 32px;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}

.sdg-pill:hover { border-color: var(--ink); color: var(--ink); }

.sdg-pill:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.sdg-pill input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── Send-to-both button ──────────────────────────────────────── */
.idea-send { flex-shrink: 0; }

#send-both-btn {
  padding: 8px 22px;
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: opacity 0.15s;
}

#send-both-btn:hover:not(:disabled) { opacity: 0.82; }
#send-both-btn:disabled { opacity: 0.32; cursor: not-allowed; }

/* ── Two-panel grid ───────────────────────────────────────────── */
.panels {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 16px;
  overflow: hidden;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  align-self: stretch;
  min-height: 0;
}

/* ── Panel card ───────────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 0;
}

/* No thick coloured top border — accent lives on the header bottom rule only */

/* ── Panel header: eyebrow + name + 2 px accent rule ─────────── */
.panel-header {
  flex-shrink: 0;
  padding: 16px 18px 14px;
}

/* Eyebrow pseudo-elements */
.analyst-header::before,
.contender-header::before {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 5px;
}

.analyst-header::before  { content: "EVIDENCE"; color: var(--analyst); }
.contender-header::before { content: "RED TEAM"; color: var(--contender); }

/* 2 px accent rule under each panel header */
.analyst-header  { border-bottom: 2px solid var(--analyst); }
.contender-header { border-bottom: 2px solid var(--contender); }

.panel-header h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.panel-desc {
  font-size: 0.77rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}

/* ── Messages area ────────────────────────────────────────────── */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 8px;
  scroll-behavior: smooth;
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.5;
  text-align: center;
  padding: 36px 24px;
  line-height: 1.6;
}

/* ── Message fade-in ──────────────────────────────────────────── */
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Message layout ───────────────────────────────────────────── */
.message {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  animation: fadein 0.22s ease both;
}

.message.user      { align-items: flex-end; }
.message.assistant,
.message.error     { align-items: flex-start; }

/* ── Message bubbles ──────────────────────────────────────────── */
.message-bubble {
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: min(88%, 620px);
  border-radius: 10px;
  padding: 9px 13px;
}

/* User: small pill on canvas */
.message.user .message-bubble {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-bottom-right-radius: 3px;
}

/* Assistant: no bubble — text flows directly in the panel */
.message.assistant .message-bubble {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  color: var(--ink);
  word-break: break-word;
}

/* Error: red-tinted pill */
.message.error .message-bubble {
  background: #FBE8E6;
  border: 1px solid rgba(201,59,54,.25);
  color: var(--contender);
  font-size: 0.84rem;
}

/* ── Markdown styles inside assistant bubbles ─────────────────── */
.message.assistant .message-bubble p           { margin: 0 0 0.55em; }
.message.assistant .message-bubble p:last-child { margin-bottom: 0; }

/* Section headings use display font */
.message.assistant .message-bubble h1,
.message.assistant .message-bubble h2 {
  font-family: var(--font-display);
  font-size: 0.97em;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0.9em 0 0.28em;
}

.message.assistant .message-bubble h3,
.message.assistant .message-bubble h4 {
  font-family: var(--font-display);
  font-size: 0.91em;
  font-weight: 600;
  color: var(--ink);
  margin: 0.75em 0 0.2em;
}

.message.assistant .message-bubble ul,
.message.assistant .message-bubble ol  { margin: 0.2em 0 0.55em 1.3em; padding: 0; }
.message.assistant .message-bubble li  { margin-bottom: 0.2em; }
.message.assistant .message-bubble hr  { border: none; border-top: 1px solid var(--hairline); margin: 0.7em 0; }
.message.assistant .message-bubble em  { font-style: italic; }
.message.assistant .message-bubble strong { font-weight: 600; }

.message.assistant .message-bubble code {
  font-family: var(--font-mono);
  font-size: 0.83em;
  background: var(--canvas);
  padding: 1px 5px;
  border-radius: 3px;
}

.message.assistant .message-bubble pre {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0.4em 0;
}

.message.assistant .message-bubble pre code { background: none; padding: 0; }

/* ── Flag badges — Mono, tinted pills ────────────────────────── */
.flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 10px;
  vertical-align: middle;
  line-height: 1.75;
}

.flag-green  { background: #E5F3EB; color: #1C6B45; }
.flag-yellow { background: #FAF0D7; color: #8A5D00; }
.flag-red    { background: #FBE8E6; color: #A83734; }

/* ── Source pills ─────────────────────────────────────────────── */
.sources {
  margin-top: 9px;
  max-width: min(88%, 620px);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
}

.sources-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-right: 2px;
}

.sources a {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--analyst);
  padding: 2px 8px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  line-height: 1.75;
  transition: background 0.13s, border-color 0.13s;
}

.sources a:hover { background: var(--hairline); border-color: var(--muted); }

/* ── Loading bubble ───────────────────────────────────────────── */

/* Loading resets the transparent/no-border assistant style */
.message.loading .message-bubble {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  padding: 9px 13px;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 10px;
}

.spinner {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--hairline);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Follow-up input area ─────────────────────────────────────── */
.input-area {
  flex-shrink: 0;
  display: flex;
  gap: 7px;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

textarea {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.87rem;
  line-height: 1.5;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  resize: none;
  outline: none;
  overflow-y: hidden;
  color: var(--ink);
  background: var(--canvas);
  transition: border-color 0.15s, background 0.15s;
  min-height: 36px;
}

textarea::placeholder { color: var(--muted); opacity: 0.6; }
textarea:focus { border-color: var(--ink); background: var(--surface); }
textarea:disabled { opacity: 0.38; cursor: not-allowed; }

.send-btn {
  align-self: flex-end;
  padding: 7px 16px;
  border: none;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
  transition: opacity 0.15s;
}

.panel-analyst   .send-btn { background: var(--analyst); }
.panel-contender .send-btn { background: var(--contender); }

.send-btn:hover:not(:disabled) { opacity: 0.82; }
.send-btn:disabled { opacity: 0.32; cursor: not-allowed; }

/* ── View toggle ──────────────────────────────────────────────── */
.view-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.view-toggle-inner {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}

.view-btn {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 6px 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-btn + .view-btn { border-left: 1px solid var(--hairline); }

.view-btn.active {
  background: var(--ink);
  color: var(--surface);
}

.view-btn:hover:not(.active) {
  background: var(--canvas);
  color: var(--ink);
}

/* ── Views ────────────────────────────────────────────────────── */
.view { display: none; }

#view-bots.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#view-worksheet.active {
  display: block;
  flex: 1;
  overflow-y: auto;
}

/* ── Worksheet container ──────────────────────────────────────── */
.ws-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Worksheet cards ──────────────────────────────────────────── */
.ws-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ws-card-header {
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--hairline);
}

.ws-header-analyst  { border-bottom: 2px solid var(--analyst); }
.ws-header-contender { border-bottom: 2px solid var(--contender); }

.ws-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin-bottom: 5px;
}

.ws-eyebrow-analyst  { color: var(--analyst); }
.ws-eyebrow-contender { color: var(--contender); }

.ws-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.ws-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Team meta row */
.ws-team-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.ws-meta-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.ws-meta-value {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── Worksheet fields ─────────────────────────────────────────── */
.ws-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-label {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.ws-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.ws-input {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}

.ws-input::placeholder { color: var(--muted); opacity: 0.6; }
.ws-input:focus { border-color: var(--ink); background: var(--surface); }

.ws-textarea {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  line-height: 1.6;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 64px;
  overflow-y: auto;
  transition: border-color 0.15s, background 0.15s;
}

.ws-textarea::placeholder { color: var(--muted); opacity: 0.6; }
.ws-textarea:focus { border-color: var(--ink); background: var(--surface); }

/* ── Option selector (Yes / Partly / No) ─────────────────────── */
.ws-option-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-opt-btn {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 16px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  min-height: 30px;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.ws-opt-btn:hover { border-color: var(--ink); color: var(--ink); }

.ws-opt-btn.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

/* ── Flag selectors (GREEN / YELLOW / RED) ────────────────────── */
.ws-flag-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-flag-btn {
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 11px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  min-height: 28px;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.ws-flag-btn.ws-flag-green:hover  { border-color: #A8D9BB; color: #1C6B45; }
.ws-flag-btn.ws-flag-yellow:hover { border-color: #E2C97E; color: #8A5D00; }
.ws-flag-btn.ws-flag-red:hover    { border-color: #F0BCBA; color: #A83734; }

.ws-flag-btn.ws-flag-green.selected  { background: #E5F3EB; border-color: #A8D9BB; color: #1C6B45; }
.ws-flag-btn.ws-flag-yellow.selected { background: #FAF0D7; border-color: #E2C97E; color: #8A5D00; }
.ws-flag-btn.ws-flag-red.selected    { background: #FBE8E6; border-color: #F0BCBA; color: #A83734; }

/* ── Criterion rows (Part B) ──────────────────────────────────── */
.ws-criteria-list {
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}

.ws-criterion-row {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 0 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.ws-criterion-row:last-child { border-bottom: none; }

.ws-criterion-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 3px;
  line-height: 1.4;
}

.ws-criterion-fields {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}

.ws-criterion-fields .ws-field:nth-child(2) { min-width: 108px; }

/* ── Worksheet actions bar ────────────────────────────────────── */
.ws-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.ws-export-btns {
  display: flex;
  gap: 8px;
}

.ws-action-btn {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 20px;
  background: var(--ink);
  color: var(--surface);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ws-action-btn:hover { opacity: 0.82; }

.ws-clear-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ws-clear-btn:hover { border-color: var(--contender); color: var(--contender); }

/* ── Analyst stepper ──────────────────────────────────────────── */

/* Override the transparent bubble style for stepper messages */
.message.assistant.stepper .message-bubble {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 14px 16px;
  border-radius: 10px;
  max-width: 100%;
}

.stepper-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}

.stepper-step {
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.75;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.stepper-step.active {
  background: var(--analyst);
  border-color: var(--analyst);
  color: var(--surface);
}

.stepper-step:hover:not(.active) {
  border-color: var(--analyst);
  color: var(--analyst);
}

.stepper-content {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
  min-height: 52px;
  margin-bottom: 14px;
  word-break: break-word;
}

.stepper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.stepper-btn {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-width: 76px;
  transition: background 0.13s, border-color 0.13s;
}

.stepper-btn:hover:not(:disabled) {
  background: var(--canvas);
  border-color: var(--ink);
}

.stepper-btn:disabled { opacity: 0.28; cursor: not-allowed; }

.stepper-counter {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  flex: 1;
  text-align: center;
}

/* ── Mobile (≤ 768px — phones and iPad portrait) ─────────────── */
@media (max-width: 768px) {
  body { height: auto; min-height: 100dvh; }

  .tabs { display: flex; }

  .idea-card { padding: 12px 14px 10px; }

  .idea-row,
  .idea-row.idea-bottom-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .field-idea, .field-customer, .field-sdg { min-width: 0; }

  .idea-send { width: 100%; }
  #send-both-btn { width: 100%; padding: 11px 20px; font-size: 0.92rem; }

  .sdg-pill { padding: 7px 13px; font-size: 0.7rem; min-height: 38px; }

  .panels {
    display: block;
    padding: 8px;
    height: 55vh;
    min-height: 320px;
    overflow: hidden;
  }

  .panel { display: none; height: 100%; border-radius: 8px; }
  .panel.active { display: flex; }

  .message-bubble { max-width: 96%; }
  .sources { max-width: 96%; }

  .team-field input { width: 120px; }

  /* Worksheet mobile */
  .ws-container { padding: 12px 12px 40px; gap: 12px; }

  .ws-criterion-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ws-criterion-fields {
    grid-template-columns: 1fr;
  }

  .ws-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ws-export-btns { flex-direction: column; }
  .ws-action-btn { width: 100%; text-align: center; }
  .ws-clear-btn  { text-align: center; }
}