/* ==========================================================================
   code.css — de codepagina van een project (#/code/:projectId)
   --------------------------------------------------------------------------
   Drie kolommen: wat er is gepusht, één push of de assistent, en het gesprek
   erover. Prefix `cd-`.

   De balk bovenaan is `.pd-jump` uit projects.css — dezelfde balk als op de
   projectpagina en de documentatiepagina, want het is dezelfde balk.

   Geen enkele rauwe kleur: alles komt uit tokens.css. Het ontwerp bracht zijn
   eigen groen, drie Google-lettertypes en radii van 9 tot 13 pixels mee; die
   zijn vertaald naar wat er in dit huis staat. Een lettertype van een
   vreemde server is een afhankelijkheid, en die zijn hier nul.

   De omlijsting kwam er later bij, in dezelfde beweging als Berichten: rand
   tot rand, geen kaarten, haarlijnen tussen de kolommen. Wat het ontwerp met
   drie omlijstingen deed doet één streep hier ook.
   ========================================================================== */

/* Rand tot rand, net als Berichten. Drie kolommen die tot de zijkant
   doorlopen zijn geen kaarten die óp een blad liggen; ze zíjn het blad. De
   haarlijnen ertussen doen het werk dat drie omlijstingen deden. */
#code-page.page {
  max-width: none;
  padding: 0;
}

.cd { display: flex; flex-direction: column; }

/* De balk bovenaan loopt over de volle breedte, met een haarlijn eronder in
   plaats van lucht. `.pd-jump` zelf blijft ongemoeid: die staat ook op de
   project- en documentatiepagina, en dáár ligt hij nog wél op een blad. */
.cd-jump {
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

/* Drie kolommen passen pas als er echt plek voor is: 290 + 420 + 320 plus twee
   tussenruimtes is 1066, en daar komt de zijbalk van de app (244) en de marge
   van de pagina nog bij. Onder die grens wordt het gesprek een strook onder de
   twee, en onder 1100 staat alles onder elkaar. Zo valt er op 390 pixels
   niets buiten het scherm. */
.cd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  background: var(--surface-raised);
}

@media (min-width: 1101px) {
  .cd-grid { grid-template-columns: 290px minmax(0, 1fr); }
  .cd-talk { grid-column: 1 / -1; }
}

@media (min-width: 1360px) {
  .cd-grid { grid-template-columns: 290px minmax(420px, 1fr) 320px; }
  .cd-talk { grid-column: auto; }
}

/* Boven 1360 staat de pagina vast en schuiven alleen de drie kolommen zelf —
   dezelfde afspraak als op de documentatiepagina. Anders is de voetbalk van de
   assistent na de derde stap van het scherm af, en juist daar staat de knop
   die je verder brengt. */
@media (min-width: 1360px) {
  #code-page.page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
  }
  #code-page .cd { flex: 1; min-height: 0; }
  #code-page .cd-grid { flex: 1; min-height: 0; align-items: stretch; }

  /* Elk kind houdt zijn eigen hoogte; alleen de lijst mag de rest opeten. Deze
     regel staat er met opzet: zonder hem groeit de repositorykaart mee tot de
     kolom vol is. */
  #code-page .cd-rail { overflow: hidden; }
  #code-page .cd-rail > * { flex: none; }
  #code-page .cd-list { flex: 1; min-height: 0; overflow-y: auto; }

  #code-page .cd-main { min-height: 0; }
  #code-page .cd-wizard { flex: 1; min-height: 0; overflow-y: auto; }
  #code-page .cd-detail { flex: 1; min-height: 0; overflow-y: auto; }
  #code-page .cd-steps,
  #code-page .cd-foot { flex: none; }

  #code-page .cd-talk { min-height: 0; }
  #code-page .cd-talk__body { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ==========================================================================
   Links — de repository en wat eruit ging
   ========================================================================== */

.cd-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-raised);
}

/* De scheidingen. Alleen waar er ook echt een kolom naast staat: onder 1101
   staan ze onder elkaar, en dan is een streep aan de zijkant een streep naar
   niets. Deze regels staan ná de kolommen zelf, want een mediaquery telt niet
   mee voor specificiteit. */
@media (min-width: 1101px) {
  .cd-rail { border-right: 1px solid var(--border-subtle); }
}
@media (min-width: 1360px) {
  .cd-talk { border-left: 1px solid var(--border-subtle); }
}

.cd-rail__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.cd-repo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
}
.cd-repo--none { background: var(--surface-sunken); }

.cd-repo__top { display: flex; align-items: center; gap: var(--space-2); }

.cd-repo__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  color: var(--text-primary);
}

.cd-repo__names { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cd-repo__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-repo__branch {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-repo__synced { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.cd-new { width: 100%; }

.cd-rail__eyebrow { display: flex; align-items: center; gap: var(--space-2); }

.cd-eyebrow__text {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.cd-eyebrow__rule { flex: 1; height: 1px; background: var(--border-subtle); }

.cd-rail__none { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.cd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.cd-push {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cd-push:hover { background: var(--surface-hover); }
.cd-push:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* De open push draagt het streepje in de kleur van zijn project — dezelfde
   markering als een kaartje van jou op het bord. */
.cd-push--on {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--cd-accent, var(--accent));
}

.cd-push__head { display: flex; align-items: center; gap: var(--space-2); }

.cd-push__title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-push--on .cd-push__title { font-weight: 700; }

.cd-push__meta { display: flex; align-items: center; gap: var(--space-2); }

.cd-push__who {
  flex: 1;
  min-width: 0;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-hash {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  flex: none;
}

/* Erbij en eraf. Dit zijn getallen met een teken ervoor, geen tekst die kleur
   draagt om mooi te zijn: het plus- en het minteken staan er ook, dus de
   betekenis hangt niet aan de kleur alleen.

   `--good-ink` en `--critical-ink`, niet `--text-success`/`--text-danger`: die
   eerste twee zijn de inkten van het palet, gekozen om leesbaar te zijn op een
   vlak. `--text-success` wijst in donker naar `--status-good`, en dat is een
   vlakkleur — gemeten kwam hij op 4,48:1 op `--surface-raised`, twee honderdsten
   onder de grens. Dat is precies het soort ding dat je met het oog niet ziet. */
.cd-adds { flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--good-ink); }
.cd-dels { flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--critical-ink); }

/* ==========================================================================
   Midden
   ========================================================================== */

.cd-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-raised);
  overflow: hidden;
}

.cd-empty { border: none; }

/* De kolom mag meegroeien, de inhoud niet: het ontwerp kapt hem af op 720
   pixels en laat hem links staan. Gemeten zonder die grens liep de
   bestandenkaart op een scherm van 2100 breed door tot 1206 pixels, met paden
   die aan de rechterkant in het niets eindigden.

   Geen `margin-inline: auto` erbij — het ontwerp centreert niet, en op een
   flexitem zet dat bovendien het uitrekken uit (zie CLAUDE.md). */
.cd-detail {
  max-width: calc(720px + var(--space-5) * 2);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cd-detail__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.cd-detail__who { font-size: var(--text-xs); color: var(--text-muted); }

.cd-detail__new { margin-left: auto; }

.cd-detail__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

/* Met opzet krapper dan de 720 pixels hierboven. Het ontwerp geeft de
   samenvatting de volle kolombreedte, en dat is bij 14px zo'n negentig tekens
   per regel — je oog vindt het begin van de volgende regel dan niet meer
   terug. De kaart eronder loopt wél door tot 720; een alinea die korter
   eindigt dan een tabel is gewone typografie. */
.cd-detail__summary {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.cd-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.cd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 30px;
  padding: 3px var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.cd-chip--link:hover { border-color: var(--accent); color: var(--text-primary); }
.cd-chip--link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cd-chip--pick { cursor: pointer; }
.cd-chip--pick:hover { border-color: var(--accent); color: var(--text-primary); }
.cd-chip--pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cd-chip--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.cd-chip__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cd-chip__code { font-family: var(--font-mono); font-size: var(--text-2xs); flex: none; }

/* ---- de bestandenlijst ---------------------------------------------------- */

.cd-files {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cd-files__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}

.cd-files__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cd-files__head .cd-files__label:first-of-type { flex: 1; }

.cd-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.cd-file:last-child { border-bottom: none; }

.cd-file--pick { cursor: pointer; }
.cd-file--pick:hover { background: var(--surface-hover); }
.cd-file--off .cd-file__path { color: var(--text-muted); text-decoration: line-through; }

.cd-file__path {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vier wassingen voor wát een bestand is: code, opmaak, tekst, en de rest. */
.cd-tag {
  flex: none;
  min-width: 38px;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-align: center;
}
.cd-tag--info { background: var(--info-bg);    color: var(--info-ink); }
.cd-tag--warn { background: var(--warning-bg); color: var(--warning-ink); }
.cd-tag--good { background: var(--good-bg);    color: var(--good-ink); }
.cd-tag--flat { background: var(--neutral-bg); color: var(--neutral-ink); }

.cd-check { width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }

.cd-tally {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.cd-tally strong { color: var(--text-primary); font-size: var(--text-md); }

.cd-none { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* ==========================================================================
   De assistent
   ========================================================================== */

.cd-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.cd-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.cd-step:hover { border-color: var(--accent); color: var(--text-primary); }
.cd-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cd-step--done { color: var(--text-secondary); }
.cd-step--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

.cd-step__mark {
  width: 19px;
  height: 19px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
}
.cd-step--on .cd-step__mark   { background: var(--accent); color: var(--accent-ink); }
.cd-step--done .cd-step__mark { background: var(--accent); color: var(--accent-ink); }

.cd-step__tick { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; }

.cd-wizard { padding: var(--space-5); }
.cd-wizard__inner { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-4); }

.cd-h { margin: 0; font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-tight); }

.cd-lead {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
/* De kop en de zin eronder horen bij elkaar; de rest van de stap staat verder
   weg. Zonder dit staat alles op dezelfde afstand en leest de stap als een lijst. */
.cd-h + .cd-lead { margin-top: calc(var(--space-4) * -1 + var(--space-1)); }

/* ---- 1 · de bron ---------------------------------------------------------- */

.cd-sources { display: flex; flex-direction: column; gap: var(--space-3); }

.cd-source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  cursor: pointer;
}
.cd-source:hover { border-color: var(--accent); }
.cd-source:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.cd-source--on { border-color: var(--accent); background: var(--accent-soft); }

.cd-source__radio { margin-top: var(--space-2); flex: none; accent-color: var(--accent); }

.cd-source__tag {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.cd-source__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-source__title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); }
.cd-source__body { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); }

.cd-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  text-align: center;
  cursor: pointer;
}
.cd-drop:hover,
.cd-drop--over { border-color: var(--accent); }
.cd-drop:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.cd-drop__title { font-size: var(--text-md); font-weight: 700; color: var(--accent-soft-ink); }
.cd-drop__hint { font-size: var(--text-sm); color: var(--text-muted); }
.cd-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cd-patch {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  resize: vertical;
}
.cd-patch:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }

/* ---- 3 · de velden -------------------------------------------------------- */

.cd-field { display: flex; flex-direction: column; gap: var(--space-2); }

.cd-field__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cd-field__input,
.cd-field__area {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-md);
}
.cd-field__input { height: 38px; font-weight: 600; }
.cd-field__area { line-height: var(--leading-normal); resize: vertical; }
.cd-field__input:focus-visible,
.cd-field__area:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }

.cd-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.cd-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.cd-toggle:hover { border-color: var(--accent); }
.cd-toggle:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---- 4 · nakijken --------------------------------------------------------- */

.cd-checks { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }

.cd-checkrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.cd-checkrow:last-child { border-bottom: none; }

.cd-checkrow__mark {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cd-checkrow__mark--running { background: var(--neutral-bg); color: var(--neutral-ink); }
.cd-checkrow__mark--passed  { background: var(--good-bg);    color: var(--good-ink); }
.cd-checkrow__mark--missing { background: var(--warning-bg); color: var(--warning-ink); }

.cd-checkrow__icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.cd-checkrow__label { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; }

.cd-checkrow__state { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.cd-checkrow__state--passed  { color: var(--good-ink); }
.cd-checkrow__state--missing { color: var(--warning-ink); }

.cd-reviewers { display: flex; flex-direction: column; gap: var(--space-2); }

.cd-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cd-actions__hint { font-size: var(--text-sm); color: var(--text-muted); }

.cd-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.cd-done__badge { font-weight: 700; }

.cd-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.cd-foot__hint {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Rechts — praten over deze push
   ========================================================================== */

.cd-talk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-raised);
  overflow: hidden;
}

.cd-talk__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.cd-talk__title { flex: 1; min-width: 0; font-size: var(--text-md); font-weight: 700; }

.cd-talk__all {
  flex: none;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-link);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}
.cd-talk__all:hover { text-decoration: underline; }
.cd-talk__all:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.cd-talk__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cd-say { display: flex; gap: var(--space-3); }
.cd-say__text { flex: 1; min-width: 0; }
.cd-say__top { display: flex; align-items: baseline; gap: var(--space-2); }
.cd-say__who { font-size: var(--text-xs); font-weight: 700; }
.cd-say__at { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }

.cd-say__body {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.cd-composer {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Het veld, het gezicht en de verstuurknop staan in één omlijnd vlak. Dat is
   wat het ontwerp doet en het scheelt een rand: zonder dit vlak heeft het veld
   een eigen kader en hangen de knoppen er los onder, alsof ze bij iets anders
   horen. De rand zit dus hier, en het veld daarbinnen is kaal. */
.cd-composer__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

/* De ring hoort om het vlak, want dat is de rand die je ziet. `:has()` en niet
   `:focus-within`: die laatste vuurt ook als de verstuurknop focus krijgt, en
   dan staan er twee ringen om elkaar heen. */
.cd-composer__box:has(.cd-say__input:focus-visible) {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.cd-say__input {
  width: 100%;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
}
.cd-say__input:focus-visible { outline: none; }

.cd-composer__foot { display: flex; align-items: center; gap: var(--space-2); }
.cd-send { margin-left: auto; }