/* Webfix — composer (tekstveld met gereedschapsbalk).
 *
 * Het "Wat doet uw bedrijf?"-blok uit de onboarding-flow, hier centraal zodat élke pagina hem kan
 * gebruiken: een omkaderd tekstvlak met onderin links optionele acties (bv. "+ Bestand") en rechts
 * de dicteerknop. Werkt samen met wf-dictation.js (data-wf-mic ... data-wf-mic-inline) en met
 * wf-composer.js voor het meegroeien van het tekstvlak.
 *
 * Gebruik:
 *   <div class="wf-composer">
 *     <textarea class="wf-ctext" id="…"></textarea>
 *     <div class="wf-ctools">
 *       <span></span>
 *       <div class="wf-ctools-r">
 *         <button class="wf-ctool round" data-wf-mic data-wf-mic-target="#…" data-wf-mic-inline …>
 *       </div>
 *     </div>
 *   </div>
 *
 * De kleur-/font-tokens komen uit de demoflow-designsystem als die geladen is; daarbuiten (bv. het
 * dashboard) vallen ze terug op de merkwaarden / het erfelijke lettertype.
 */

.wf-composer {
  border: 1.5px solid #E6EAF0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(1, 16, 61, .04);
  transition: border-color .2s, box-shadow .2s;
}
.wf-composer:focus-within { border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 4px rgba(50, 188, 238, .14); }
/* Grote schermen: 70% breedte i.p.v. de volle kolombreedte. */
@media (min-width: 992px) {
  .wf-composer { max-width: 70%; }
}

.wf-ctext {
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: none;
  overflow-y: hidden;          /* groeit mee via wf-composer.js */
  background: transparent;
  font-family: var(--font-body, inherit);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-heading, inherit);
  padding: 16px 20px 4px;
  min-height: 90px; /* 3 regels, op alle schermtypes gelijk (15px * 1.55 * 3 + 20px padding).
                       Groeit daarna automatisch mee via wf-composer.js. */
}
.wf-ctext::placeholder { color: var(--text-muted, #6b7280); }

/* Zonder knoppenrij (bijvoorbeeld het bio-veld in het auteursvenster): dan hoort de onderkant
   dezelfde lucht te hebben als de bovenkant, anders plakt de tekst tegen de rand. */
.wf-composer.-solo { max-width: 100%; }   /* zonder knoppenrij vult hij zijn kolom, net als een input */
.wf-composer.-solo .wf-ctext { padding-bottom: 16px; }

/* Compacte variant: zelfde composer, maar start op 1 regel (het mic-rijtje staat eronder). Groeit
   net zo goed mee met de inhoud. */
.wf-composer-sm { border-radius: 16px; }
.wf-composer-sm .wf-ctext { min-height: 24px; padding: 10px 14px 0; font-size: 14px; }
.wf-composer-sm .wf-ctools { padding: 2px 6px 5px; }
.wf-composer-sm .wf-ctool { height: 32px; }
.wf-composer-sm .wf-ctool.round { width: 32px; font-size: 14px; }

.wf-ctools { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; }
.wf-ctools-r { display: flex; align-items: center; gap: 4px; }

.wf-ctool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-family: var(--font-menu, inherit);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.wf-ctool.round { width: 38px; padding: 0; justify-content: center; font-size: 16px; }
.wf-ctool:hover { background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-pink, #da176c); }

/* Ronde verzendknop rechts in de balk (optioneel). */
.wf-csend {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--wf-pink, #da176c);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .15s;
  box-shadow: 0 6px 16px -6px rgba(218, 23, 108, .5);
}
.wf-csend:hover { background: var(--wf-green, #b0d136); color: #fff; }
.wf-csend:active { transform: translateY(1px); }

/* Bijlage-chip (bv. een geüploade brochure) onder het tekstvlak. */
.wf-brochure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 0;
  padding: 6px 8px 6px 12px;
  background: var(--wf-blue-50, rgba(50, 188, 238, .10));
  border: 1px solid #d6ecf7;
  border-radius: 9999px;
  font-family: var(--font-menu, inherit);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-heading, inherit);
  max-width: calc(100% - 20px);
}
.wf-brochure > i { color: var(--wf-pink, #da176c); flex: 0 0 auto; }
.wf-brochure .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-brochure .rm { border: none; background: transparent; color: var(--text-muted, #6b7280); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.wf-brochure .rm:hover { color: #dc3545; }

/* De dicteerbalk zit ín de composer: rustiger dan zijn standaardstijl. */
.wf-composer .wf-dictation-bar { background: #fff; border: 1.5px solid #E6EAF0; box-shadow: none; color: var(--text-heading, inherit); }

/* ── Donker (alleen relevant buiten de licht-only onboarding-flow, bv. het dashboard) ── */
:root[data-bs-theme="dark"] .wf-composer { background: #1c1f26; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-composer .wf-dictation-bar { background: #26282e; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-brochure { border-color: rgba(255, 255, 255, .12); }