/* ============================================================================
   telefoonassistent.css, concept 1 (7 okt 2026). Ligt bovenop site.css en
   assistent.css; alleen wat die nog niet hebben. Rustiger dan de andere twee
   pagina's (Thijs: "deze pagina moet rustig ogen"): geen stroken, geen
   klikbare balken, alleen lucht, één gesprek en één scherm.
   Het gesprek in de kop is in beide kleurstanden donker, net als op de
   margeanalyse. Het scherm met cijfers is eruit (Thijs, 7 okt middag).
   ========================================================================== */

.ta { --ta-roest: #E8672C; --ta-tekst: #F3F2EF; --ta-stil: #8E939B; }

/* ---------- kop: "Ook na sluitingstijd" altijd op één regel (Thijs, 7 okt),
   dus de lettermaat volgt de breedte van de tekstkolom ---------- */
.pa-kop__tekst { container-type: inline-size; }
.pa-kop h1 { font-size: clamp(28px, 9.9cqi, 62px); }
.ta-heel { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1100px) {
  .pa-kop__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}

/* ---------- regels: alleen de zin, de grote kop is eruit (Thijs, 7 okt) ---------- */
.pa-kop2 .ta-zin {
  max-width: 38ch; margin: 0 auto; text-wrap: balance;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
}

/* ---------- kop: het gesprek dat één keer afspeelt ---------- */
.pa-filmkolom .ta-gesprek { width: 100%; }
.ta-gesprek {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  padding: 20px 20px 18px; border-radius: 26px; color: var(--ta-tekst);
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(232, 103, 44, .14), transparent 70%),
    #0b0d11;
  border: 1px solid var(--lijn-2);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--roest) 40%, transparent), var(--schaduw-3);
}
.ta-gesprek__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ta-gesprek__wie { display: grid; gap: 2px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.ta-gesprek__wie span { font-size: 12px; font-weight: 500; color: var(--ta-stil); }
.ta-gesprek__live {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #C9C6BF;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
}
.ta-gesprek__live i { width: 7px; height: 7px; border-radius: 50%; background: #5EC17F; }
.ta-gesprek.is-bezig .ta-gesprek__live i { animation: ta-adem 2.4s ease-in-out infinite; }
@keyframes ta-adem { 50% { opacity: .35; } }
@keyframes ta-in { from { opacity: 0; translate: 0 8px; } }

/* de beurten: vaste hoogte, onderaan uitgelijnd; oudere zinnen schuiven boven uit beeld */
.ta-beurten {
  height: 372px; margin: 0; padding: 0; list-style: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
}
.ta-beurt {
  max-width: 86%; padding: 9px 13px 10px; font-size: 14px; line-height: 1.45;
  border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
}
.ta-beurt b { display: block; font-size: 11px; font-weight: 650; letter-spacing: .02em; color: var(--ta-stil); margin-bottom: 1px; }
.ta-beurt--a { align-self: flex-start; background: rgba(232, 103, 44, .11); border-color: rgba(232, 103, 44, .26); }
.ta-beurt--a b { color: #F59A6B; }
.ta-beurt--b { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.ta-gesprek.speelt .ta-beurt:not(.is-er) { display: none; }
.ta-beurt.is-er { animation: ta-in .5s var(--veer) both; }

/* het briefje dat na het gesprek klaarstaat */
.ta-briefje {
  display: grid; gap: 4px; padding: 13px 15px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px; line-height: 1.4; color: #C9C6BF;
}
.ta-briefje__kop { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ta-stil); }
.ta-briefje b { font-size: 14.5px; font-weight: 650; color: var(--ta-tekst); }
.ta-gesprek.speelt .ta-briefje { visibility: hidden; }
.ta-gesprek.speelt .ta-briefje.is-er { visibility: visible; animation: ta-in .6s var(--veer) both; }
.ta-gesprek.zonder-overgang * { animation: none !important; }

.ta-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; line-height: 1.5;
  background: rgba(255, 255, 255, .07); color: #C9C6BF;
}
.ta-chip--lead { background: var(--ta-roest); color: #14181F; }
.ta-chip--spoed { background: rgba(232, 105, 92, .16); color: #F2857A; }
.ta-chip--afspraak { background: rgba(94, 193, 127, .14); color: #7FD39A; }

/* ---------- 2. wat hij kan: zes regels, geen kaarten ---------- */
.ta-kan {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px);
}
.ta-kan li { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--lijn-2); }
.ta-kan b { margin-top: 6px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; }
.ta-kan span:last-child { max-width: 32ch; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }

/* ---------- 3. de regels: twee regels naast elkaar, zelfde vorm als wat hij kan ---------- */
.ta-kan--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ta-kan--twee span:last-child { max-width: 44ch; }

/* ---------- 4. grenzen en de twee balken in één zone ---------- */
.ta-balken { margin-top: clamp(88px, 11vw, 150px); }

/* ---------- smaller ---------- */
@media (max-width: 900px) {
  .ta-kan { grid-template-columns: minmax(0, 1fr); }
  .ta-kan span:last-child { max-width: 46ch; }
}
@media (max-width: 760px) {
  .pa-filmkolom:has(.ta-gesprek) { width: min(400px, 100%); }
}
@media (max-width: 560px) {
  .ta-beurten { height: 340px; }
  .ta-beurt { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-beurt.is-er, .ta-briefje.is-er, .ta-gesprek__live i { animation: none !important; }
}
:root[data-beweging="stil"] .ta-beurt.is-er, :root[data-beweging="stil"] .ta-briefje.is-er,
:root[data-beweging="stil"] .ta-gesprek__live i { animation: none !important; }