/* ═══════════════════════════════════════════════════════════════
   SHIELD AI — Refinement layer (loads last)
   Minimal, additive. Keeps the ORIGINAL graphics, palette and fonts.
   Only two things live here:
     1. The chat composer fills the panel height (so the "chatbox"
        matches the map and is not a big empty box).
     2. The "Suggested briefs" chip row styling.
   No colour / font / shadow / radius redesign — those use the
   original tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Chat composer fills the panel height (chatbox ≈ map) ── */
body.app-page .chat-panel.prompt-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.app-page .chat-panel.prompt-panel #chat-thread:empty { display: none; }
body.app-page .chat-panel.prompt-panel .chat-compose {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
body.app-page .chat-compose textarea#chat-input {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: none; /* override the 320px cap so it fills the card height */
}
body.app-page .chat-compose textarea#chat-input:focus { min-height: 200px; }
body.app-page .chat-panel.prompt-panel .chat-actions { margin-top: 0; }

/* ── Suggested briefs (uses the original blue accent / fonts) ── */
.chat-suggest-label {
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 2px 0 0;
}
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.chat-suggestion {
  font: 500 12.5px/1.2 var(--font-body);
  color: var(--text-secondary);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}
.chat-suggestion:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* ── Selected-countries: grouped lists (Clicked + one per drawn shape) ── */
.selected-countries {
  flex-direction: column !important;
  align-items: stretch !important;
  max-height: 230px !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  overflow: hidden;
}
.selected-countries-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  flex: 0 0 auto;
}

/* Scroll area that holds every group. */
.selected-countries-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 180px;
  padding-right: 2px;
}

/* Each group: a titled section (Clicked, Rectangle 1, Circle 2, ...). */
.selected-countries-group { display: flex; flex-direction: column; gap: 6px; }
.selected-countries-grouptitle {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.selected-countries-groupcount {
  color: var(--accent);
  font-size: 11px;
}
.selected-countries-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.selected-countries-dot.dot-click {
  background: var(--accent);
  border: 1px solid var(--accent-hover);
}
.selected-countries-dot.dot-shape {
  background: transparent;
  border: 1.5px solid var(--warning);
}
.selected-countries-empty {
  margin: 0;
  font: 400 11.5px/1.3 var(--font-body);
  color: var(--text-tertiary);
  font-style: italic;
}

/* The pill list inside each group wraps freely. */
.selected-countries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
}
.selected-countries-list li {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font: 500 12px/1.25 var(--font-body);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Clicked → solid blue chip. */
.selected-countries-list li[data-source="click"] {
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--text-primary);
}
/* In a drawn shape → amber-outlined chip, visually distinct from click. */
.selected-countries-list li[data-source="shape"] {
  background: transparent;
  border: 1.5px solid var(--warning);
  color: var(--text-primary);
}

/* ── Intro body copy: justified everywhere, consistent widths ──
   The source list (block 06/07) was capped narrower than the body paragraphs,
   so entries wrapped early and looked ragged. Widen it to the same measure as
   the paragraphs and keep justification consistent across the whole intro. */
body.intro-page .intro-section-card p,
body.intro-page .intro-source-list,
body.intro-page .intro-source-list li {
  max-width: 100%;
}
body.intro-page .intro-source-list li {
  text-align: justify;
  text-justify: inter-word;
}
/* Justify the remaining multi-line body copy on the first page too. */
body.intro-page .intro-content > p,
body.intro-page .pipeline-node-text,
body.intro-page .intro-cta-inner p {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: center; /* keep the short trailing line tidy, not stretched */
}

/* Hero block centred as a whole. Widen the container so the one-line title
   (nowrap, up to ~1170px) is NOT clipped by the old 1040px cap — otherwise the
   title overflowed to the right while the shorter kicker/paragraph stayed
   centred inside 1040px, so they looked misaligned. With room for the title,
   the whole block centres on the viewport and everything lines up. */
body.intro-page .intro-content {
  text-align: center;
  max-width: min(96vw, 1400px);
  margin-left: auto;
  margin-right: auto;
}
/* Hero title on ONE line above the globe, LARGER and centred. Viewport-scaled
   so the full "SHIELD GEOPOLITICAL AI" always fits without wrapping. */
body.intro-page .intro-content h1 {
  white-space: nowrap;
  font-size: clamp(26px, 7.6vw, 108px);
  letter-spacing: 0.02em;
  line-height: 1.0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Kicker (eyebrow above the title) on ONE line, larger, centred. */
body.intro-page .intro-kicker {
  white-space: nowrap;
  font-size: clamp(11px, 2.1vw, 20px);
  letter-spacing: 0.18em;
  text-align: center;
}

/* Risk assessment: force scenario prose to use the full available panel width.
   This file loads last, so these rules intentionally override earlier card
   and paragraph constraints that made the web answer look like a half-page column. */
body.app-page #risk-assessment-panel,
body.app-page #risk-assessment-panel #scenario-risk-buckets,
body.app-page #risk-assessment-panel .risk-bucket-grid,
body.app-page #risk-assessment-panel .risk-bucket,
body.app-page #risk-assessment-panel .bucket-item,
body.app-page #risk-assessment-panel .scenario-narrative,
body.app-page #risk-assessment-panel .scenario-narrative p,
body.app-page #risk-assessment-panel .scenario-detail-grid,
body.app-page #risk-assessment-panel .scenario-detail,
body.app-page #risk-assessment-panel .complete-sources,
body.app-page #risk-assessment-panel .complete-sources-card {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
}

body.app-page #risk-assessment-panel .scenario-narrative {
  display: block !important;
  clear: both;
}

body.app-page #risk-assessment-panel .scenario-narrative p {
  display: block !important;
  margin: 0 0 12px;
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: normal;
  word-break: normal;
}

body.app-page #risk-assessment-panel .scenario-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}