/* ============================================================================ Widget czatu na stronie (gość) — okrągła ikona (FAB) + lekki podpis + panel. Wstrzykiwany do przez /js/siteChat.js. Off Blazor (czysty DOM + SignalR). Motyw JASNY na sztywno (color-scheme: light) — strona jest jasna niezależnie od trybu OS; bez tego native

i tło robiły się ciemne (znany gotcha).
   Marka: niebieski rgb(43,120,219) — jak CTA „Umów rozmowę" w nawigacji.

Współpraca z przyciskiem „na górę" (.back-to-top: right:28px; bottom:15px,
   pojawia się po scrollu > ~90% wysokości ekranu): gdy strona jest przewinięta,
   dodajemy .is-scrolled → podpis się chowa, a kółko przesuwa w LEWO obok strzałki.
   ============================================================================ */

.ttchat {
    --ttchat-brand: rgb(43, 120, 219);
    --ttchat-brand-dark: rgb(31, 96, 180);
    --ttchat-surface: #ffffff;
    --ttchat-text: #1f2937;
    --ttchat-muted: #4b5563;
    --ttchat-admin-bg: #eef2f7;
    --ttchat-admin-fg: #1f2937;
    --ttchat-border: rgba(15, 23, 42, .10);
    --ttchat-shadow: 0 18px 48px rgba(15, 23, 42, .22);

color-scheme: light;               /* nie pozwól native kontrolkom pójść w dark */
    position: fixed;
    right: 26px;    /* +10% od rogu (24→26) — decyzja usera 2026-08-12 */
    bottom: 22px;   /* +10% (20→22) */
    z-index: 20000;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ttchat-text);
    animation: ttchat-enter .55s cubic-bezier(.22, 1, .36, 1) .4s both;
    /* Root NIE łapie myszy — łapią tylko realne kontrolki niżej. Bez tego niewidzialny
       prostokąt rootu (jego box zostaje w miejscu mimo transformu na wrapie) zasłaniał
       strzałkę „na górę" i nie dało się jej kliknąć. */
    pointer-events: none;
}

.ttchat__launcher-wrap,
.ttchat__panel { pointer-events: auto; }

.ttchat[hidden] { display: none !important; }

/* ---------- Launcher: okrągła ikona + lekki podpis ---------- */
.ttchat__launcher-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* Po scrollu kółko przesuwa się w lewo — wartość liczy JS (mierzy realną pozycję strzałki
   „na górę" i ustawia inline transform), więc zawsze ją mija. Tu tylko płynne przejście. */

.ttchat__launcher {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

/* Lekki podpis — biała pigułka, prawie czarny tekst (kontrast pewny na każdym tle).
   WIDOCZNY CAŁY CZAS (decyzja usera 2026-08-12), zwija się DOPIERO gdy pojawia się
   strzałka „na górę" (klasa .is-scrolled) — wtedy kółko odjeżdża w lewo, a podpis
   wraca po najechaniu (rozwija się w lewo, z dala od strzałki). */
.ttchat__caption {
    max-width: 240px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, .16);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .20);
    padding: .5rem .85rem;
    margin-right: 0;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease,
                padding .3s ease, margin .3s ease, border-width .3s ease;
}
/* Strzałka na ekranie → podpis zwinięty (zostaje samo kółko). */
.ttchat.is-scrolled .ttchat__caption {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -.6rem;   /* kasuje gap flexa, żeby kółko nie „odskakiwało" */
    border-width: 0;
}
/* ...ale hover na kółku zawsze go przywraca (reguła PO is-scrolled — wygrywa remisy). */
.ttchat__launcher-wrap:hover .ttchat__caption {
    max-width: 240px;
    opacity: 1;
    padding: .5rem .85rem;
    margin-right: 0;
    border-width: 1px;
}

/* Kółko z ikoną (+15%: 60→69px). „Oddychanie" (float) siedzi na CAŁYM launcherze
   (przycisk = chmurka + kółko), więc ruszają się RAZEM — nie na samym kółku.
   Celowo NIE na .ttchat__launcher-wrap: wrap dostaje inline transform z JS
   (przesuw przy scrollu), a animacja transformu by go nadpisała. */
.ttchat__launcher {
    animation: ttchat-float 3.1s ease-in-out 1.3s infinite;   /* tempo +10% (3.4→3.1 s) */
}
.ttchat__launcher:hover { animation-play-state: paused; }     /* na hover pauza w miejscu, bez skoku */

.ttchat__fab {
    flex-shrink: 0;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ttchat-brand), var(--ttchat-brand-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    box-shadow: 0 12px 28px rgba(43, 120, 219, .45);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.ttchat__launcher:hover .ttchat__fab {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 18px 36px rgba(43, 120, 219, .55);
}
.ttchat__launcher:active .ttchat__fab { transform: translateY(0) scale(1); }

/* Delikatny puls uwagi (kilka razy po wejściu, potem cisza). */
.ttchat__fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(43, 120, 219, .45);
    animation: ttchat-pulse 2.2s ease-out 1.3s 3;
}
@keyframes ttchat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(43, 120, 219, .45); }
    70%  { box-shadow: 0 0 0 16px rgba(43, 120, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 120, 219, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ttchat,
    .ttchat__launcher,
    .ttchat__fab,
    .ttchat__fab::after,
    .ttchat__msg { animation: none !important; }
}

@keyframes ttchat-enter {
    from { opacity: 0; transform: translateY(22px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ttchat-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5.75px); }   /* zakres +15% (5→5.75 px) */
}
@keyframes ttchat-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ttchat-badge-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Odznaka nieprzeczytanych (od admina) — na kółku. */
.ttchat__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ttchat-surface);
}
.ttchat[data-unread="true"] .ttchat__badge { display: inline-flex; animation: ttchat-badge-pop .3s ease; }

/* Gdy panel otwarty — chowamy launcher. */
.ttchat[data-open="true"] .ttchat__launcher-wrap { display: none; }

/* ---------- Panel rozmowy ---------- */
.ttchat__panel {
    display: none;
    flex-direction: column;
    width: min(92vw, 380px);
    height: min(70vh, 560px);
    background: var(--ttchat-surface);
    border: 1px solid var(--ttchat-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ttchat-shadow);
    animation: ttchat-pop .18s ease;
}
.ttchat[data-open="true"] .ttchat__panel { display: flex; }

@keyframes ttchat-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Nagłówek. */
.ttchat__header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--ttchat-brand), var(--ttchat-brand-dark));
    color: #fff;
}
.ttchat__avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.ttchat__titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ttchat__title { font-weight: 700; font-size: .98rem; }
.ttchat__subtitle { font-size: .78rem; opacity: .9; }
.ttchat__header-actions { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.ttchat__hbtn {
    border: none; background: rgba(255,255,255,.14); color: #fff;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: background .15s ease;
}
.ttchat__hbtn:hover { background: rgba(255,255,255,.3); }

/* Telefon w nagłówku — wyróżniony przycisk „Zadzwoń". */
.ttchat__callhead {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.14);
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 0 .6rem; height: 34px; border-radius: 9px;
    font-size: .82rem; font-weight: 600;
    transition: background .15s ease;
}
.ttchat__callhead:hover { background: rgba(255,255,255,.3); color: #fff; }

/* Lista wiadomości. */
.ttchat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background:
        radial-gradient(circle at 15% 0%, rgba(43,120,219,.05), transparent 40%),
        var(--ttchat-surface);
    scroll-behavior: smooth;
}

/* Empty state — prowadzi gościa (zasada UI: pusta lista nie jest pusta). */
.ttchat__empty {
    margin: auto;
    text-align: center;
    color: var(--ttchat-muted);
    padding: 1.5rem 1rem;
}
.ttchat__empty i { font-size: 2.2rem; color: var(--ttchat-brand); display: block; margin-bottom: .5rem; }
.ttchat__empty p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* Bąbelek wiadomości. */
.ttchat__msg {
    max-width: 82%;
    padding: .55rem .8rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
    animation: ttchat-msg-in .25s ease;
}
.ttchat__msg-time { display: block; font-size: .68rem; opacity: .7; margin-top: .2rem; }

/* Podpis nad odpowiedzią admina — gość widzi, z kim rozmawia. */
.ttchat__msg-author {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    margin-bottom: .15rem;
}

.ttchat__msg--visitor {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--ttchat-brand), var(--ttchat-brand-dark));
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ttchat__msg--admin {
    align-self: flex-start;
    background: var(--ttchat-admin-bg);
    color: var(--ttchat-admin-fg);
    border-bottom-left-radius: 4px;
}
.ttchat__msg--system {
    align-self: center;
    background: transparent;
    color: var(--ttchat-muted);
    font-size: .8rem;
    text-align: center;
    max-width: 90%;
}

/* Dymek-propozycja / potwierdzenie w strumieniu rozmowy („Zapamiętaj?", „Usunąć?"). */
.ttchat__prompt {
    background: #f1f5fb;
    border: 1px solid rgba(43, 120, 219, .18);
    border-radius: 12px;
    padding: .6rem .8rem;
    max-width: 92%;
    text-align: center;
    font-size: .82rem;
    line-height: 1.45;
}
.ttchat__prompt-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .55rem;
}
.ttchat__prompt-actions button {
    border: none;
    border-radius: 999px;
    padding: .38rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, transform .12s ease;
}
.ttchat__prompt-actions button:hover { transform: translateY(-1px); }
.ttchat__prompt-yes { background: linear-gradient(135deg, var(--ttchat-brand), var(--ttchat-brand-dark)); color: #fff; }
.ttchat__prompt-yes:hover { filter: brightness(1.08); }
.ttchat__prompt-no { background: #e5e9f0; color: #334155; }
.ttchat__prompt-no:hover { background: #d8dee8; }
.ttchat__prompt-danger { background: #dc3545; color: #fff; }
.ttchat__prompt-danger:hover { filter: brightness(1.08); }

/* Pasek statusu (łączenie / throttle). */
.ttchat__status {
    padding: .35rem .85rem;
    font-size: .78rem;
    text-align: center;
    color: var(--ttchat-muted);
    background: var(--ttchat-admin-bg);
    display: none;
}
.ttchat__status[data-show="true"] { display: block; }

/* Kompozytor. */
.ttchat__composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .6rem .7rem;
    border-top: 1px solid var(--ttchat-border);
    background: var(--ttchat-surface);
}
.ttchat__input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--ttchat-border);
    border-radius: 12px;
    padding: .55rem .7rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
    max-height: 120px;
    background: #fff;
    color: var(--ttchat-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ttchat__input::placeholder { color: #9ca3af; }
.ttchat__input:focus {
    border-color: var(--ttchat-brand);
    box-shadow: 0 0 0 3px rgba(43,120,219,.15);
}
.ttchat__send {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--ttchat-brand), var(--ttchat-brand-dark));
    color: #fff; font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s ease, opacity .15s ease;
}
.ttchat__send:hover { transform: scale(1.06); }
.ttchat__send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Stopka z telefonem (CTA „zadzwoń"). */
.ttchat__footer {
    padding: .5rem .85rem;
    border-top: 1px solid var(--ttchat-border);
    font-size: .8rem;
    text-align: center;
    color: var(--ttchat-muted);
    background: var(--ttchat-surface);
}
.ttchat__call {
    color: var(--ttchat-brand);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.ttchat__call:hover { text-decoration: underline; }

/* Zgoda „Zapamiętaj rozmowę" — domyślnie odznaczona: zamknięcie karty = przeglądarka
   zapomina wątek. Zaznaczenie przenosi tożsamość rozmowy do trwałej pamięci urządzenia. */
.ttchat__remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .4rem 0 0;
    font-size: .74rem;
    color: var(--ttchat-muted);
    cursor: pointer;
    user-select: none;
}
.ttchat__remember input {
    accent-color: var(--ttchat-brand);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.ttchat__remember:hover { color: var(--ttchat-text); }

/* ============================================================================
   PANCERZ KOLORÓW. app.css ma globalną regułę `p, span { color: var(--color-primary--grafit) }`
   (linia ~213) — koloruje KAŻDY span na stronie na grafit. W CSS bezpośrednia reguła na
   elemencie zawsze wygrywa z kolorem odziedziczonym po rodzicu, więc teksty widgetu
   (tytuł nagłówka, dymki, czasy — wszystko spany) robiły się ciemne na granatowym tle.
   Dlatego kolor stoi tu WPROST na każdym tekście — zero polegania na dziedziczeniu.
   ============================================================================ */
.ttchat__header,
.ttchat__header span,
.ttchat__header i,
.ttchat__header a { color: #ffffff; }

.ttchat__msg--visitor,
.ttchat__msg--visitor span { color: #ffffff; }

.ttchat__msg--admin,
.ttchat__msg--admin span { color: #1f2937; }
.ttchat__msg--admin .ttchat__msg-author { color: #64748b; }   /* wygrywa z pancerzem spanów */

.ttchat__msg--system,
.ttchat__msg--system span { color: #4b5563; }

.ttchat__prompt-yes, .ttchat__prompt-danger { color: #ffffff; }
.ttchat__prompt-no { color: #334155; }

.ttchat__send,
.ttchat__send i { color: #ffffff; }

.ttchat__empty p { color: #4b5563; }
.ttchat__footer, .ttchat__footer span { color: #4b5563; }
.ttchat__call, .ttchat__call i { color: var(--ttchat-brand); }
.ttchat__status span { color: var(--ttchat-muted); }

/* Na wąskich ekranach: panel niemal pełnoekranowy, podpis domyślnie schowany. */
@media (max-width: 480px) {
    .ttchat { right: 14px; bottom: 14px; }
    .ttchat__panel { width: min(94vw, 380px); height: min(78vh, 620px); }
    .ttchat__caption { display: none; }               /* na telefonie samo kółko */
    .ttchat__callhead span { display: none; }
}