/*
 * Painfinder widget styles. Used by PainfinderSession.jsx.
 *
 * All class names prefixed `gd-pf-` to avoid colliding with consumer
 * styles (apps/base admin SPA uses `dashboard.app.js` styles; the
 * standalone widget at painfinder.growdoo.net uses these alone).
 *
 * Tokens default to the design-system v1 values from
 * docs/DESIGN-SYSTEM.md. Consumers can override any of them on their
 * own root element. Falling back inside `var(--ds-token, fallback)`
 * keeps the standalone widget rendering when DS tokens.css isn't
 * loaded.
 */

.gd-pf-page {
  --gd-pf-rf-blue:    #174A91;
  --gd-pf-rf-orange:  #FF6E1D;
  --gd-pf-rf-teal:    #4ECDC4;
  --gd-pf-bg:         var(--bg, #F8F8F6);
  --gd-pf-surface:    var(--surface, #FFFFFF);
  --gd-pf-surface-tint: var(--surface-tint, #FAF8F4);
  --gd-pf-border:     var(--border, #E8E4DD);
  --gd-pf-border-strong: var(--border-strong, #D4CFC5);
  --gd-pf-ink:        var(--ink, #1A1A1A);
  --gd-pf-ink-soft:   var(--ink-soft, #4A4A4A);
  --gd-pf-ink-quiet:  var(--ink-quiet, #8A8580);
  --gd-pf-accent:     var(--accent, var(--gd-pf-rf-orange));
  --gd-pf-accent-tint: var(--accent-tint, #FFF5EE);
  --gd-pf-accent-ink: var(--accent-ink, #B8470F);
  --gd-pf-link:       var(--link, var(--gd-pf-rf-blue));
  --gd-pf-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --gd-pf-font-sans:  var(--font-sans, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif);
  --gd-pf-font-mono:  var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);

  background: var(--gd-pf-bg);
  color: var(--gd-pf-ink);
  font-family: var(--gd-pf-font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  min-width: 0;
}

.gd-pf-page * { box-sizing: border-box; }
.gd-pf-page h1,
.gd-pf-page h2,
.gd-pf-page h3,
.gd-pf-page h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--gd-pf-ink);
  margin: 0;
}
.gd-pf-page h4 { font-size: 16px; font-weight: 500; }
.gd-pf-page p { margin: 0 0 1em; }
.gd-pf-page p:last-child { margin-bottom: 0; }
.gd-pf-page a {
  color: var(--gd-pf-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gd-pf-page a:hover { border-bottom-color: currentColor; }
.gd-pf-quiet { color: var(--gd-pf-ink-quiet); }
.gd-pf-mono { font-family: var(--gd-pf-font-mono); }

.gd-pf-page.has-painfinder-max-height,
body.has-painfinder-max-height .gd-pf-page {
  max-height: var(--painfinder-max-height, 100vh);
  overflow: hidden;
}
body.has-painfinder-max-height .gd-pf-layout {
  height: calc(var(--painfinder-max-height, 100vh) - 65px);
}

/* ─── Top bar ─────────────────────────────────────────────────── */
.gd-pf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--gd-pf-border);
  background: var(--gd-pf-surface);
  gap: 24px;
  flex-shrink: 0;
}
.gd-pf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--gd-pf-ink);
}
.gd-pf-brand a {
  color: inherit;
  border: none;
  font-size: 18px;
}
.gd-pf-accent { color: var(--gd-pf-accent); }
.gd-pf-brand .gd-pf-quiet {
  color: var(--gd-pf-ink-quiet);
  font-weight: 400;
  font-size: 14px;
}
.gd-pf-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--gd-pf-ink-soft);
}
.gd-pf-step strong { color: var(--gd-pf-ink); font-weight: 600; }
.gd-pf-step-letters {
  display: inline-flex;
  gap: 6px;
  font-family: var(--gd-pf-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gd-pf-ink-quiet);
}
.gd-pf-step-letters span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--gd-pf-border);
  background: var(--gd-pf-surface);
}
.gd-pf-step-letters .gd-pf-step-active {
  background: var(--gd-pf-accent);
  border-color: var(--gd-pf-accent);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 800px) { .gd-pf-step { display: none; } }

.gd-pf-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ─── Timer ring ─────────────────────────────────────────────── */
.gd-pf-timer {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.gd-pf-timer svg {
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}
.gd-pf-ring-track {
  fill: none;
  stroke: var(--gd-pf-border);
  stroke-width: 3;
}
.gd-pf-ring-progress {
  fill: none;
  stroke: var(--gd-pf-rf-blue);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms var(--gd-pf-ease), stroke 200ms var(--gd-pf-ease);
}
.gd-pf-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--gd-pf-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--gd-pf-ink-soft);
  letter-spacing: -0.02em;
}
.gd-pf-timer--idle .gd-pf-ring-progress { stroke: var(--gd-pf-ink-quiet); }
.gd-pf-timer--warn .gd-pf-ring-progress { stroke: var(--gd-pf-accent); }
.gd-pf-timer--over .gd-pf-ring-progress { stroke: var(--gd-pf-accent-ink); }

/* ─── Language buttons ──────────────────────────────────────── */
.gd-pf-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gd-pf-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.gd-pf-lang button {
  background: transparent;
  border: 0;
  color: var(--gd-pf-ink-quiet);
  font: inherit;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.gd-pf-lang button:hover { color: var(--gd-pf-ink); }
.gd-pf-lang button.gd-pf-lang-active { color: var(--gd-pf-ink); font-weight: 600; }
.gd-pf-lang span { color: var(--gd-pf-border-strong); }

/* ─── Layout ──────────────────────────────────────────────────
   Two columns (main | sidebar). The main column is itself a vertical
   stack: scrollable message stream + always-visible input zone. The
   input zone is its own flex item below the stream, NOT a sticky
   overlay — that was the original vanilla widget's pattern but it
   meant text passed under the input bar with a thin gradient mask
   that read as "input over text" in some surfaces (Tim 2026-05-10
   kanban feedback). Splitting into a flex column guarantees the
   input is always cleanly below the messages.

   Flex (not grid) at every nesting level so child `flex: 1` +
   `min-height: 0` reliably propagates the available height down to
   the scrollable stream. CSS grid 1fr inside grid 1fr inside flex
   1fr is technically valid but produces inconsistent height
   propagation in Chromium when the host wraps the page in a
   non-fixed-height container (apps/base CompanyDetailPage uses
   calc(100vh - 280px), which works fine on its own but breaks the
   nested grid math). */
.gd-pf-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gd-pf-main {
  flex: 1;
  min-width: 0;
}
.gd-pf-dossier,
.gd-pf-kanban-meta {
  flex: 0 0 380px;
}
.gd-pf-page--kanban .gd-pf-kanban-meta { flex-basis: 280px; }
@media (max-width: 1000px) {
  .gd-pf-dossier { display: none; }
}

.gd-pf-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gd-pf-stream {
  flex: 1;
  overflow-y: auto;
  padding: 48px 0 24px;
  position: relative;
  min-height: 0;
}
.gd-pf-stream-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ─── Empty state ───────────────────────────────────────────── */
.gd-pf-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 32px 32px;
  text-align: center;
}
.gd-pf-empty-tag {
  display: inline-block;
  font-family: var(--gd-pf-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--gd-pf-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.gd-pf-empty h1 {
  font-size: 40px;
  margin-bottom: 16px;
}
.gd-pf-subhead {
  font-size: 18px;
  color: var(--gd-pf-ink-soft);
  max-width: 540px;
  margin: 0 auto 32px;
}
.gd-pf-value-strip {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: var(--gd-pf-ink-quiet);
  flex-wrap: wrap;
}
.gd-pf-value-key { color: var(--gd-pf-ink); font-weight: 600; }
.gd-pf-value-sep { color: var(--gd-pf-border-strong); }
.gd-pf-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.gd-pf-chips button {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--gd-pf-border-strong);
  border-radius: 18px;
  background: var(--gd-pf-surface);
  color: var(--gd-pf-ink-soft);
  cursor: pointer;
  transition: background 160ms var(--gd-pf-ease), border-color 160ms var(--gd-pf-ease), color 160ms var(--gd-pf-ease);
}
.gd-pf-chips button:hover {
  background: var(--gd-pf-surface-tint);
  border-color: var(--gd-pf-accent);
  color: var(--gd-pf-ink);
}

/* ─── Messages ──────────────────────────────────────────────── */
.gd-pf-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: gd-pf-fade-in 320ms var(--gd-pf-ease);
}
.gd-pf-msg-meta {
  font-family: var(--gd-pf-font-mono);
  font-size: 11px;
  color: var(--gd-pf-ink-quiet);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gd-pf-msg-body {
  font-size: 17px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.gd-pf-msg--ai .gd-pf-msg-body { color: var(--gd-pf-ink); }
.gd-pf-msg--user { align-items: flex-end; }
.gd-pf-msg--user .gd-pf-msg-meta { align-self: flex-end; }
.gd-pf-msg--user .gd-pf-msg-body {
  background: var(--gd-pf-accent-tint);
  border: 1px solid var(--gd-pf-border);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 80%;
  align-self: flex-end;
  color: var(--gd-pf-ink);
}
.gd-pf-msg--thinking .gd-pf-msg-body {
  color: var(--gd-pf-ink-quiet);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gd-pf-dots {
  display: inline-flex;
  gap: 4px;
}
.gd-pf-dots span {
  width: 6px;
  height: 6px;
  background: var(--gd-pf-ink-quiet);
  border-radius: 50%;
  animation: gd-pf-bounce 1.2s ease-in-out infinite;
}
.gd-pf-dots span:nth-child(2) { animation-delay: 0.15s; }
.gd-pf-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Input zone ──────────────────────────────────────────────
   Lives as its own grid row inside .gd-pf-main, below the scrollable
   stream. Solid background, no overlay. */
.gd-pf-input-zone {
  flex: 0 0 auto;
  background: var(--gd-pf-bg);
  padding: 16px 32px 24px;
  display: flex;
  justify-content: center;
  border-top: 1px solid transparent;
}
.gd-pf-page--kanban .gd-pf-input-zone {
  background: var(--gd-pf-surface);
  padding: 12px 16px 16px;
  border-top-color: var(--gd-pf-border);
}
.gd-pf-page--fitgap .gd-pf-input-zone {
  background: var(--gd-pf-surface);
  padding: 10px 14px 14px;
}
.gd-pf-textbox {
  display: flex;
  align-items: center;
  background: var(--gd-pf-surface);
  border: 1px solid var(--gd-pf-border-strong);
  border-radius: 14px;
  padding: 8px 8px 8px 24px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -20px rgba(23, 74, 145, 0.2);
  transition: border-color 200ms var(--gd-pf-ease), box-shadow 200ms var(--gd-pf-ease);
}
.gd-pf-textbox:focus-within {
  border-color: var(--gd-pf-accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -16px rgba(255, 110, 29, 0.35);
}
.gd-pf-textbox textarea {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  color: var(--gd-pf-ink);
  padding: 12px 0;
  resize: none;
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.4;
  min-height: 24px;
}
.gd-pf-textbox textarea::placeholder { color: var(--gd-pf-ink-quiet); }
.gd-pf-textbox button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--gd-pf-accent);
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms var(--gd-pf-ease), background 120ms var(--gd-pf-ease);
}
.gd-pf-textbox button:hover {
  background: var(--gd-pf-accent-ink);
  transform: translateX(2px);
}
.gd-pf-textbox button:disabled {
  background: var(--gd-pf-border-strong);
  cursor: not-allowed;
  transform: none;
}
.gd-pf-textbox button:focus-visible {
  outline: 2px solid var(--gd-pf-accent);
  outline-offset: 2px;
}

/* ─── Dossier sidebar ───────────────────────────────────────── */
.gd-pf-dossier {
  background: var(--gd-pf-surface-tint);
  border-left: 1px solid var(--gd-pf-border);
  overflow-y: auto;
  padding: 32px 28px;
}
.gd-pf-dossier h4 {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gd-pf-ink-quiet);
  font-weight: 600;
  margin-bottom: 16px;
}
.gd-pf-dossier-section { margin-bottom: 32px; }
.gd-pf-dossier-empty {
  font-size: 14px;
  color: var(--gd-pf-ink-quiet);
  line-height: 1.5;
}
.gd-pf-coverage {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.gd-pf-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--gd-pf-border);
  transition: background 400ms var(--gd-pf-ease);
}
.gd-pf-seg--done   { background: var(--gd-pf-rf-teal); }
.gd-pf-seg--active { background: var(--gd-pf-rf-blue); animation: gd-pf-pulse 2s ease-in-out infinite; }

.gd-pf-phase-pill {
  display: inline-block;
  font-family: var(--gd-pf-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gd-pf-ink-quiet);
  padding: 3px 8px;
  border: 1px solid var(--gd-pf-border);
  border-radius: 999px;
  background: var(--gd-pf-surface);
  margin-bottom: 24px;
}

/* ─── Handoff card ──────────────────────────────────────────── */
.gd-pf-handoff {
  max-width: 760px;
  margin: 16px auto 0;
  background: var(--gd-pf-surface);
  border: 1px solid var(--gd-pf-border);
  border-radius: 12px;
  padding: 18px 20px;
  animation: gd-pf-fade-in 400ms var(--gd-pf-ease);
}
.gd-pf-handoff-kicker {
  font-family: var(--gd-pf-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gd-pf-ink-quiet);
  margin-bottom: 6px;
}
.gd-pf-handoff h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--gd-pf-ink);
}
.gd-pf-handoff-lead {
  font-size: 14px;
  color: var(--gd-pf-ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.gd-pf-handoff-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gd-pf-handoff-btn {
  appearance: none;
  border: 1px solid var(--gd-pf-border-strong);
  background: var(--gd-pf-surface);
  color: var(--gd-pf-ink);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms var(--gd-pf-ease), background 120ms var(--gd-pf-ease), transform 120ms var(--gd-pf-ease);
  font-family: inherit;
}
.gd-pf-handoff-btn:hover { border-color: var(--gd-pf-ink); transform: translateY(-1px); }
.gd-pf-handoff-btn:focus-visible { outline: 2px solid var(--gd-pf-accent); outline-offset: 2px; }
.gd-pf-handoff-btn--primary {
  border-color: var(--gd-pf-rf-blue);
  background: var(--gd-pf-rf-blue);
  color: #fff;
}
.gd-pf-handoff-btn--primary:hover {
  background: #0F2B4E;
  border-color: #0F2B4E;
}
.gd-pf-handoff-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.gd-pf-handoff-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .gd-pf-handoff-form { grid-template-columns: 1fr; }
}
.gd-pf-handoff-form input {
  border: 1px solid var(--gd-pf-border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--gd-pf-ink);
  background: var(--gd-pf-surface);
  min-width: 0;
}
.gd-pf-handoff-form input:focus {
  outline: 2px solid var(--gd-pf-rf-blue);
  outline-offset: -1px;
  border-color: var(--gd-pf-rf-blue);
}
.gd-pf-handoff-status {
  font-size: 14px;
  color: var(--gd-pf-ink-soft);
  margin-top: 10px;
}
.gd-pf-status--success { color: #047857; }
.gd-pf-status--pending { color: var(--gd-pf-ink-quiet); font-style: italic; }
.gd-pf-status--error   { color: var(--gd-pf-accent-ink); }

/* ─── Animations ───────────────────────────────────────────── */
@keyframes gd-pf-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gd-pf-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes gd-pf-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ─── Embed mode tweaks ───────────────────────────────────── */
/* Kanban embed inside apps/base SPA: no top bar at all (parent SPA
   already shows the session header), tighter padding, and a right
   meta-panel with timer + lang + handoff CTA. */
.gd-pf-page--kanban .gd-pf-stream { padding: 24px 0 8px; }
.gd-pf-page--kanban .gd-pf-empty { padding: 32px 24px; }
.gd-pf-page--kanban .gd-pf-empty h1 { font-size: 26px; line-height: 1.2; }
.gd-pf-page--kanban .gd-pf-empty .gd-pf-subhead { font-size: 16px; }
.gd-pf-page--kanban .gd-pf-stream-inner { padding: 0 20px; gap: 24px; }
.gd-pf-page--kanban .gd-pf-msg-body { font-size: 15px; }
.gd-pf-page--fitgap .gd-pf-dossier,
.gd-pf-page--fitgap .gd-pf-kanban-meta { display: none; }

.gd-pf-page--fitgap .gd-pf-empty { padding: 24px 20px; }
.gd-pf-page--fitgap .gd-pf-stream { padding: 20px 0 8px; }

/* ─── Kanban meta panel ──────────────────────────────────────
   Right rail for the apps/base kanban embed. Stacks timer + lang
   switch on top, then the handoff CTA below — Tim's preferred shape
   per 2026-05-10 feedback ("rechterbalk te maken met daarin de
   talenswitch, de tijd en de CTA"). */
.gd-pf-kanban-meta {
  background: var(--gd-pf-surface-tint);
  border-left: 1px solid var(--gd-pf-border);
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gd-pf-kanban-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gd-pf-border);
}
.gd-pf-kanban-meta .gd-pf-timer--lg {
  width: 56px;
  height: 56px;
}
.gd-pf-kanban-meta .gd-pf-timer--lg svg {
  width: 56px;
  height: 56px;
}
.gd-pf-kanban-meta .gd-pf-timer--lg .gd-pf-ring-track,
.gd-pf-kanban-meta .gd-pf-timer--lg .gd-pf-ring-progress {
  /* Recompute r so the larger ring still fits in the viewBox. The
     viewBox stays 0 0 44 44 (for stroke-dasharray math compat) but
     CSS scales it 56/44 = 1.27x. */
}
.gd-pf-kanban-meta .gd-pf-timer--lg .gd-pf-ring-label {
  font-size: 11px;
}
.gd-pf-kanban-meta .gd-pf-lang button {
  font-size: 13px;
  padding: 5px 8px;
}
.gd-pf-kanban-meta .gd-pf-handoff {
  margin: 0;
  max-width: none;
  border: 1px solid var(--gd-pf-border);
  background: var(--gd-pf-surface);
  padding: 16px 16px 18px;
}
.gd-pf-kanban-meta .gd-pf-handoff h3 { font-size: 16px; }
.gd-pf-kanban-meta .gd-pf-handoff-lead { font-size: 13px; }
.gd-pf-kanban-meta .gd-pf-handoff-btn { font-size: 13px; padding: 9px 12px; }
/* Stack name + email on top of each other in the narrow sidebar. */
.gd-pf-kanban-meta .gd-pf-handoff-form {
  grid-template-columns: 1fr;
}