/* Dialog case-study jako czatowe bąbelki (wariant „F+D" — zaakceptowany 15.07.2026).
   Farmaceuta = petrol (gradient, lewa), Pacjent = malina tint (prawa). Odstępstwo od
   brandbooka (malina jako kolor roli) — świadoma decyzja usera.

   DWA tory:
   1) FRONT — treść jest transformowana w single-case-study (PHP/DOMDocument) z surowych
      <p class="farmaceuta|pacjent"> do struktury .of-chat > .ofc-turn (awatar + nazwa +
      bąbelek + ogonek + animacja). Klasy z prefiksem .ofc-* — NIE .turn/.bubble (te są
      unscoped w article-styles.css i by kolidowały).
   2) EDYTOR Gutenberg — bez transformacji (PHP tam nie działa); stylujemy surowe
      p.farmaceuta/p.pacjent CSS-em (kolor + nazwa roli ::before), żeby redaktor widział
      podgląd. Scope .editor-styles-wrapper → tylko w edytorze, front tego nie łapie.

   Ładowany przez enqueue_block_assets (front + iframe edytora). Samowystarczalny:
   własne tokeny w :root, bo w edytorze home.css nie jest obecny. */

:root {
  --primary: #0d4b5c; --primary-2: #1d738b; --warn: #cc3266;
  --card: #ffffff; --ink: #0a2530; --ink-3: #7a8d95;
}

/* ── FRONT: .of-chat (po transformacji) ─────────────────────────────── */
.of-chat { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.of-chat .ofc-turn { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.of-chat .ofc-pharm { align-self: flex-start; }
.of-chat .ofc-pat { align-self: flex-end; flex-direction: row-reverse; }
.of-chat .ofc-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.of-chat .ofc-av svg { width: 18px; height: 18px; }
.of-chat .ofc-pharm .ofc-av { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.of-chat .ofc-pat .ofc-av { background: color-mix(in srgb, var(--warn) 14%, var(--card)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.of-chat .ofc-col { min-width: 0; display: flex; flex-direction: column; }
.of-chat .ofc-pat .ofc-col { align-items: flex-end; }
.of-chat .ofc-name { font-size: 11.5px; font-weight: 700; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .05em; }
.of-chat .ofc-pharm .ofc-name { color: var(--primary); }
.of-chat .ofc-pat .ofc-name { color: var(--warn); }
.of-chat .ofc-bubble { padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; }
.of-chat .ofc-pharm .ofc-bubble { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-bottom-left-radius: 5px; }
.of-chat .ofc-pat .ofc-bubble { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent); border-bottom-right-radius: 5px; }
.of-chat .ofc-bubble strong { font-weight: 700; }
.of-chat .ofc-bubble em { display: block; margin-top: 8px; padding-top: 8px; font-style: normal; font-size: 12.5px; line-height: 1.5; }
.of-chat .ofc-pharm .ofc-bubble em { color: rgba(255,255,255,.82); border-top: 1px dashed rgba(255,255,255,.28); }
.of-chat .ofc-pat .ofc-bubble em { color: var(--ink-3); border-top: 1px dashed color-mix(in srgb, var(--warn) 26%, transparent); }
/* animacja wejścia — tylko front */
@keyframes ofPop { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.of-chat .ofc-turn { animation: ofPop .5s cubic-bezier(.22,.9,.34,1) both; }
.of-chat .ofc-turn:nth-child(2) { animation-delay: .12s; }
.of-chat .ofc-turn:nth-child(3) { animation-delay: .24s; }
.of-chat .ofc-turn:nth-child(4) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .of-chat .ofc-turn { animation: none; } }

/* ── EDYTOR: surowe p.farmaceuta / p.pacjent (bez transformacji) ─────── */
.editor-styles-wrapper p.farmaceuta,
.editor-styles-wrapper p.pacjent {
  position: relative; max-width: 82%; padding: 12px 16px;
  border-radius: 18px; font-size: 14.5px; line-height: 1.5; margin: 16px 0;
}
.editor-styles-wrapper p.farmaceuta {
  margin-right: auto;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; border-bottom-left-radius: 5px;
}
.editor-styles-wrapper p.pacjent {
  margin-left: auto;
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  border-bottom-right-radius: 5px;
}
.editor-styles-wrapper p.farmaceuta::before,
.editor-styles-wrapper p.pacjent::before {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.editor-styles-wrapper p.farmaceuta::before { content: "Farmaceuta"; color: rgba(255,255,255,.9); }
.editor-styles-wrapper p.pacjent::before { content: "Pacjent"; color: var(--warn); }
.editor-styles-wrapper p.farmaceuta em,
.editor-styles-wrapper p.pacjent em {
  display: block; margin-top: 8px; padding-top: 8px; font-style: normal; font-size: 12.5px;
}
.editor-styles-wrapper p.farmaceuta em { color: rgba(255,255,255,.82); border-top: 1px dashed rgba(255,255,255,.28); }
.editor-styles-wrapper p.pacjent em { color: var(--ink-3); border-top: 1px dashed color-mix(in srgb, var(--warn) 26%, transparent); }