/* ==========================================================================
   Czysta Forma — czat na żywo (okienko w prawym dolnym rogu strony)
   Korzysta z tokenów kolorów i fontów z site.css.
   ========================================================================== */

.cfc { --cfc-gap: 24px; --cfc-bottom: 24px; position: fixed; right: var(--cfc-gap); bottom: calc(var(--cfc-bottom) + env(safe-area-inset-bottom)); z-index: 95; font-family: var(--font-body); color: var(--text); transition: bottom .45s var(--ease); }
.cfc *, .cfc *::before, .cfc *::after { box-sizing: border-box; }
.cfc .ico { width: 22px; height: 22px; }

/* ---------- Przycisk ---------- */
.cfc-launcher { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; color: #fff; background: var(--grad); box-shadow: 0 18px 40px -14px rgba(74, 47, 208, .75), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .35s var(--ease-spring), border-radius .35s var(--ease), box-shadow .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.cfc-launcher:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 24px 50px -14px rgba(74, 47, 208, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cfc-launcher:active { transform: scale(.94); }
.cfc-launcher::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(123, 97, 255, .55); animation: cfcPulse 2.8s var(--ease) 2s 3; pointer-events: none; }
.cfc-launcher__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .45s var(--ease-spring), opacity .25s var(--ease); }
.cfc-launcher__icon .ico { width: 28px; height: 28px; }
.cfc-launcher__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.cfc.is-open { z-index: 250; }
.cfc.is-open .cfc-launcher { border-radius: 50%; }
.cfc.is-open .cfc-launcher__icon--chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.cfc.is-open .cfc-launcher__icon--close { opacity: 1; transform: none; }
.cfc-launcher__badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--red); color: #fff; font: 800 .75rem/1 var(--font-display); box-shadow: 0 0 0 3px var(--bg); animation: cfcPop .5s var(--ease-spring); }

@keyframes cfcPulse { 0% { box-shadow: 0 0 0 0 rgba(123, 97, 255, .55); } 80%, 100% { box-shadow: 0 0 0 18px rgba(123, 97, 255, 0); } }
@keyframes cfcPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Dymek zachęty ---------- */
.cfc-teaser { position: absolute; right: 0; bottom: calc(100% + 14px); width: max-content; max-width: min(290px, calc(100vw - 2 * var(--cfc-gap))); padding: 14px 40px 14px 16px; border-radius: 18px 18px 6px 18px; background: var(--surface); color: var(--text); font-size: .93rem; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-lg); border: 1px solid var(--line); cursor: pointer; transform-origin: bottom right; animation: cfcTeaser .55s var(--ease-spring) both; }
.cfc-teaser small { display: block; margin-bottom: 3px; color: var(--violet); font: 800 .7rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.cfc-teaser__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); transition: background-color .2s; }
.cfc-teaser__close:hover { background: var(--violet-50); color: var(--text); }
.cfc-teaser__close .ico { width: 14px; height: 14px; }
.cfc-teaser.is-out { animation: cfcTeaserOut .3s var(--ease) forwards; }
@keyframes cfcTeaser { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes cfcTeaserOut { to { opacity: 0; transform: translateY(6px) scale(.92); } }

/* ---------- Okno ---------- */
.cfc-panel { position: absolute; right: 0; bottom: calc(100% + 16px); display: flex; flex-direction: column; width: 384px; height: min(640px, calc(100vh - 140px)); height: min(640px, calc(100dvh - 140px)); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 40px 100px -30px rgba(30, 15, 100, .5), 0 12px 32px -16px rgba(21, 20, 27, .3); border: 1px solid rgba(232, 229, 243, .9); overflow: hidden; transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.94); transition: opacity .28s var(--ease), transform .45s var(--ease-spring), visibility 0s linear .45s; }
.cfc.is-open .cfc-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .5s var(--ease-spring), visibility 0s; }

.cfc-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 14px 18px 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, rgba(123, 97, 255, .55) 0%, rgba(123, 97, 255, 0) 55%), radial-gradient(90% 120% at 100% 100%, rgba(66, 226, 211, .22) 0%, rgba(66, 226, 211, 0) 60%), var(--ink); flex: none; }
.cfc-head__avatar { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.cfc-head__avatar img { width: 30px; height: auto; }
.cfc-dot { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); background: var(--amber); }
.cfc-dot--online { background: #2BD98B; }
.cfc-dot--online::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #2BD98B; opacity: 0; animation: cfcRing 2.4s var(--ease) infinite; }
.cfc-dot--away { background: #9A97A8; }
@keyframes cfcRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.cfc-head__text { flex: 1; min-width: 0; }
.cfc-head__text strong { display: block; font: 800 1.05rem/1.2 var(--font-display); letter-spacing: -.01em; }
.cfc-head__status { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.cfc-head__btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: rgba(255, 255, 255, .85); transition: background-color .2s, color .2s; }
.cfc-head__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cfc-head__btn .ico { width: 20px; height: 20px; }
.cfc-head__btn--call { display: none; }

.cfc-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; background: linear-gradient(180deg, var(--violet-50) 0%, var(--bg) 140px); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.cfc-body::-webkit-scrollbar { width: 6px; }
.cfc-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* ---------- Wiadomości ---------- */
.cfc-msgs { display: flex; flex-direction: column; gap: 3px; }
.cfc-day { align-self: center; margin: 10px 0 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.cfc-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: cfcIn .45s var(--ease-spring) both; }
.cfc-row--me { justify-content: flex-end; }
.cfc-row + .cfc-row--first { margin-top: 10px; }
.cfc-row__ava { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); visibility: hidden; }
.cfc-row__ava img { width: 18px; height: auto; }
.cfc-row--last .cfc-row__ava { visibility: visible; }
.cfc-bubble { position: relative; max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: .94rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cfc-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cfc-row--them .cfc-bubble { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(21, 20, 27, .04); border-bottom-left-radius: 6px; }
.cfc-row--them:not(.cfc-row--last) .cfc-bubble { border-bottom-left-radius: 6px; }
.cfc-row--me .cfc-bubble { background: var(--grad); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 8px 20px -12px rgba(74, 47, 208, .8); }
.cfc-row.is-pending .cfc-bubble { opacity: .65; }
.cfc-row.is-failed .cfc-bubble { background: var(--red); box-shadow: none; }
.cfc-meta { display: flex; justify-content: flex-end; gap: 6px; margin: 2px 4px 6px; font-size: .7rem; color: var(--muted-2); }
.cfc-meta--them { justify-content: flex-start; margin-left: 40px; }
.cfc-meta button { color: var(--red-text); font-weight: 700; text-decoration: underline; }
.cfc-meta .ico { width: 14px; height: 14px; }
.cfc-meta--read { color: var(--violet); font-weight: 700; }
.cfc-system { align-self: center; max-width: 90%; margin: 8px 0; padding: 6px 12px; border-radius: 12px; background: rgba(91, 63, 227, .08); color: var(--muted); font-size: .78rem; text-align: center; }
@keyframes cfcIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Pisze… */
.cfc-typing { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; animation: cfcIn .35s var(--ease) both; }
.cfc-typing .cfc-row__ava { visibility: visible; }
.cfc-typing__dots { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); }
.cfc-typing__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-300); animation: cfcDot 1.2s ease-in-out infinite; }
.cfc-typing__dots i:nth-child(2) { animation-delay: .15s; }
.cfc-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cfcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Przykładowe pytania ---------- */
.cfc-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 14px 0 6px; }
.cfc-chip { max-width: 88%; padding: 9px 14px; border-radius: 16px 16px 6px 16px; border: 1.5px solid var(--violet-300); background: var(--surface); color: var(--violet-600); font-size: .88rem; font-weight: 700; line-height: 1.35; text-align: right; transition: background-color .2s, color .2s, transform .3s var(--ease-spring), border-color .2s; animation: cfcIn .5s var(--ease-spring) both; }
.cfc-chip:nth-child(2) { animation-delay: .06s; }
.cfc-chip:nth-child(3) { animation-delay: .12s; }
.cfc-chip:nth-child(4) { animation-delay: .18s; }
.cfc-chip:nth-child(5) { animation-delay: .24s; }
.cfc-chip:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateX(-3px); }

/* ---------- Karta kontaktu ---------- */
.cfc-contact { margin: 10px 0 6px 36px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: cfcIn .5s var(--ease-spring) both; }
.cfc-contact p { margin-bottom: 10px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.cfc-contact p b { color: var(--text); }
.cfc-contact input { width: 100%; height: 42px; margin-bottom: 8px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--bg); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.cfc-contact input:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px rgba(123, 97, 255, .15); }
.cfc-contact__row { display: flex; gap: 8px; }
.cfc-contact__row button { flex: 1; height: 40px; border-radius: 12px; font-weight: 800; font-size: .86rem; }
.cfc-contact__save { background: var(--ink); color: #fff; }
.cfc-contact__skip { color: var(--muted); }
.cfc-contact__err { margin: -2px 0 8px; color: var(--red-text); font-size: .8rem; }

/* ---------- Pole wiadomości ---------- */
.cfc-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 8px; background: var(--surface); border-top: 1px solid var(--line); }
.cfc-compose textarea { flex: 1; min-height: 46px; max-height: 120px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--bg); resize: none; font-size: 16px; line-height: 1.35; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.cfc-compose textarea::placeholder { color: var(--muted-2); }
.cfc-compose textarea:focus { outline: none; border-color: var(--violet-400); background: var(--surface); box-shadow: 0 0 0 4px rgba(123, 97, 255, .14); }
.cfc-send { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: var(--grad); box-shadow: var(--glow); transition: transform .3s var(--ease-spring), opacity .2s, filter .2s; }
.cfc-send:disabled { opacity: .35; box-shadow: none; filter: grayscale(.4); cursor: default; }
.cfc-send:not(:disabled):hover { transform: translateY(-2px) rotate(-8deg); }
.cfc-send:not(:disabled):active { transform: scale(.9); }
.cfc-foot { flex: none; padding: 0 14px 12px; background: var(--surface); color: var(--muted-2); font-size: .7rem; line-height: 1.4; text-align: center; }
.cfc-foot a { text-decoration: underline; text-underline-offset: 2px; }
.cfc-restart { display: flex; justify-content: center; margin: 12px 0 4px; }
.cfc-restart button { padding: 10px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 800; font-size: .88rem; }

/* ---------- Telefon ---------- */
@media (max-width: 760px) {
    .cfc { --cfc-gap: 14px; --cfc-bottom: 16px; }
    body:has(.mobile-bar.is-visible) .cfc { --cfc-bottom: 86px; }
    body.wizard-active .cfc:not(.is-open) { opacity: 0; pointer-events: none; transform: translateY(20px); }
    .cfc { transition: bottom .45s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
    .cfc-launcher { width: 58px; height: 58px; border-radius: 20px; }
    .cfc-panel { position: fixed; inset: 0; width: auto; height: 100vh; height: 100dvh; border-radius: 0; border: 0; transform-origin: bottom center; transform: translateY(40px); }
    .cfc.is-open .cfc-launcher { opacity: 0; pointer-events: none; }
    .cfc-head { padding: calc(14px + env(safe-area-inset-top)) 10px 14px 16px; }
    .cfc-head__btn--call { display: grid; }
    .cfc-compose { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .cfc-foot { display: none; }
    .cfc-bubble { max-width: 84%; }
}
html.cfc-lock, html.cfc-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .cfc *, .cfc *::before, .cfc *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media print { .cfc { display: none !important; } }