/*
 * Kosmetyka — widżet czatu.
 * Motyw może dostosować położenie nad własnym paskiem CTA:
 *   --kos-chat-bottom  odstęp od dołu okna (domyślnie 18px)
 *   --kos-chat-side    odstęp od boku (domyślnie 18px)
 *   --kos-font         krój pisma (dziedziczony z motywu)
 * Kolory: --kos-chat-accent i --kos-chat-on ustawia wtyczka na #kos-chat (kontrast liczony automatycznie).
 * Warstwy: przycisk cookies (99998) i baner (99999) są nad czatem (99990) — zgoda nigdy nie jest zasłonięta.
 */
.kos-chat { --kos-chat-accent: #9a5f6f; --kos-chat-on: #fff; position: fixed; bottom: var(--kos-chat-bottom, 18px); z-index: 99990; font-family: var(--kos-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); font-size: 15px; line-height: 1.45; color: #2f2523; box-sizing: border-box; }
.kos-chat *, .kos-chat *::before, .kos-chat *::after { box-sizing: border-box; }
.kos-chat--right { right: var(--kos-chat-side, 18px); }
.kos-chat--left { left: var(--kos-chat-side, 18px); }
body.admin-bar .kos-chat__panel { max-height: calc(100vh - 96px - var(--kos-chat-bottom, 18px) - 32px); }

.kos-chat__fab { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--kos-chat-accent); color: var(--kos-chat-on); box-shadow: 0 6px 20px rgba(47, 37, 35, .28); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.kos-chat--right .kos-chat__fab { margin-left: auto; }
.kos-chat__fab:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47, 37, 35, .32); }
.kos-chat__fab:focus-visible, .kos-chat__close:focus-visible, .kos-chat__chip:focus-visible, .kos-chat__form button:focus-visible, .kos-chat__actions a:focus-visible, .kos-chat__note a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.kos-chat[data-open="1"] .kos-chat__fab { display: none; }

.kos-chat__panel { display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 32px - var(--kos-chat-bottom, 18px))); max-height: calc(100vh - 32px - var(--kos-chat-bottom, 18px)); background: #fff; border: 1px solid #eadfd6; border-radius: 16px; box-shadow: 0 16px 48px rgba(47, 37, 35, .28); overflow: hidden; }
.kos-chat__panel[hidden] { display: none; }

.kos-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--kos-chat-accent); color: var(--kos-chat-on); font-weight: 600; }
.kos-chat__close { width: 36px; height: 36px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.kos-chat__close:hover { background: rgba(255, 255, 255, .18); }

.kos-chat__actions { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f0e8e1; background: #fbf7f3; }
.kos-chat__actions:empty { display: none; }
.kos-chat__actions a { flex: 1; padding: 8px 10px; border: 1px solid #eadfd6; border-radius: 999px; background: #fff; color: #2f2523; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.kos-chat__actions a:hover { border-color: var(--kos-chat-accent); }

.kos-chat__log { flex: 1 1 auto; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.kos-chat__msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.kos-chat__msg a { color: inherit; text-decoration: underline; }
.kos-chat__msg--bot { align-self: flex-start; background: #f6efe9; color: #2f2523; border-bottom-left-radius: 4px; }
.kos-chat__msg--user { align-self: flex-end; background: var(--kos-chat-accent); color: var(--kos-chat-on); border-bottom-right-radius: 4px; }
.kos-chat__msg--typing { opacity: .6; animation: kos-chat-pulse 1s ease-in-out infinite; }
@keyframes kos-chat-pulse { 50% { opacity: .25; } }

.kos-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; max-height: 132px; overflow-y: auto; }
.kos-chat__chips:empty { display: none; }
.kos-chat__chip { margin: 0; padding: 7px 11px; border: 1px solid var(--kos-chat-accent); border-radius: 999px; background: #fff; color: #2f2523; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.kos-chat__chip:hover { background: #fbf1ef; }

.kos-chat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #f0e8e1; }
.kos-chat__form input[type="text"]:not(.kos-chat__hp) { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #d9cdc3; border-radius: 10px; background: #fff; color: #2f2523; font: inherit; font-size: 16px; /* 16px: iOS nie przybliża pola przy focusie */ }
.kos-chat__form input[type="text"]:not(.kos-chat__hp):focus { outline: 2px solid var(--kos-chat-accent); outline-offset: 0; border-color: var(--kos-chat-accent); }
.kos-chat__form button { margin: 0; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--kos-chat-accent); color: var(--kos-chat-on); font: inherit; font-weight: 600; cursor: pointer; }
.kos-chat__form button:disabled, .kos-chat__form input:disabled, .kos-chat__form input[readonly] { opacity: .6; cursor: default; }
.kos-chat__hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; opacity: 0; }
.kos-chat__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.kos-chat__note { margin: 0; padding: 6px 12px 10px; color: #5f544f; font-size: 11.5px; line-height: 1.4; }
.kos-chat__note a { color: inherit; text-decoration: underline; }

/* Telefon: okno na całą szerokość, nad paskiem przeglądarki */
@media (max-width: 480px) {
	.kos-chat--right { right: var(--kos-chat-side, 12px); }
	.kos-chat--left { left: var(--kos-chat-side, 12px); }
	.kos-chat__panel { width: calc(100vw - 24px); height: calc(100vh - 24px - var(--kos-chat-bottom, 18px)); height: calc(100dvh - 24px - var(--kos-chat-bottom, 18px)); }
}

@media (prefers-reduced-motion: reduce) {
	.kos-chat__fab { transition: none; }
	.kos-chat__fab:hover { transform: none; }
	.kos-chat__msg--typing { animation: none; }
}