/* Telegram Live Chat – widżet (samodzielny CSS, bez zależności od motywu/Tailwinda) */
#tgc-root {
  --tgc-primary: #1a1e29;
  --tgc-primary-text: #fff;
  --tgc-accent: #fbbc04;
  --tgc-accent-text: #1a1e29;
  --tgc-bottom: 24px;
  --tgc-side: 24px;
  --tgc-bg: #f4f5f7;
  --tgc-border: #e3e6eb;
  --tgc-muted: #6b7280;
  position: fixed;
  bottom: var(--tgc-bottom);
  z-index: 99990;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
}
#tgc-root.tgc-pos-right { right: var(--tgc-side); }
#tgc-root.tgc-pos-left { left: var(--tgc-side); }
#tgc-root *, #tgc-root *::before, #tgc-root *::after { box-sizing: border-box; }
#tgc-root [hidden] { display: none !important; }
#tgc-root button { font: inherit; cursor: pointer; margin: 0; }
#tgc-root input, #tgc-root textarea { font: inherit; margin: 0; }

/* Przycisk */
#tgc-root .tgc-launcher {
  position: relative;
  width: 60px; height: 60px;
  border: 0; border-radius: 50%;
  background: var(--tgc-accent); color: var(--tgc-accent-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 0;
}
#tgc-root .tgc-launcher:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(15, 23, 42, .34); }
#tgc-root .tgc-launcher:focus-visible { outline: 3px solid var(--tgc-primary); outline-offset: 3px; }
#tgc-root .tgc-ico-close { display: none; }
#tgc-root.tgc-open .tgc-ico-open { display: none; }
#tgc-root.tgc-open .tgc-ico-close { display: block; }
#tgc-root .tgc-launcher.tgc-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 var(--tgc-accent);
  animation: tgc-pulse 2s ease-out 3;
}
@keyframes tgc-pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 188, 4, .6); } 100% { box-shadow: 0 0 0 18px rgba(251, 188, 4, 0); } }

#tgc-root .tgc-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; border: 2px solid #fff;
  background: #e11d48; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Dymek zachęty */
#tgc-root .tgc-tooltip {
  position: absolute; bottom: 8px;
  width: max-content; max-width: 240px;
  background: #fff; color: #1f2937;
  font-size: 13.5px; font-weight: 500;
  padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  border: 1px solid var(--tgc-border);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  cursor: pointer;
}
#tgc-root.tgc-pos-right .tgc-tooltip { right: 74px; transform: translateX(10px); }
#tgc-root.tgc-pos-left .tgc-tooltip { left: 74px; transform: translateX(-10px); }
#tgc-root .tgc-tooltip.tgc-show { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* Okno */
#tgc-root .tgc-window {
  position: absolute; bottom: 76px;
  width: 370px; height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
#tgc-root.tgc-pos-right .tgc-window { right: 0; }
#tgc-root.tgc-pos-left .tgc-window { left: 0; }
#tgc-root .tgc-window.tgc-visible { opacity: 1; transform: translateY(0); }

#tgc-root .tgc-header {
  background: var(--tgc-primary); color: var(--tgc-primary-text);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 18px; flex: 0 0 auto;
}
#tgc-root .tgc-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#tgc-root .tgc-header-text strong { font-size: 15px; font-weight: 700; }
#tgc-root .tgc-header-text span { font-size: 12px; opacity: .8; margin-top: 1px; }
#tgc-root .tgc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tgc-accent); flex: 0 0 auto; }
#tgc-root .tgc-dot.tgc-online { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
#tgc-root .tgc-close {
  background: transparent; border: 0; color: inherit; opacity: .8;
  padding: 6px; border-radius: 8px; display: flex;
}
#tgc-root .tgc-close:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* Formularz startowy */
#tgc-root .tgc-prechat {
  flex: 1; overflow-y: auto; background: var(--tgc-bg);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
#tgc-root .tgc-intro { margin: 0 0 4px; color: #374151; font-size: 13.5px; text-align: center; }
#tgc-root .tgc-field { display: flex; flex-direction: column; gap: 4px; }
#tgc-root .tgc-field span { font-size: 12px; font-weight: 600; color: #4b5563; }
#tgc-root .tgc-field em { color: #e11d48; font-style: normal; }
#tgc-root .tgc-field small { font-weight: 400; color: var(--tgc-muted); }
#tgc-root .tgc-field input, #tgc-root .tgc-emailcard input {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  background: #fff; color: #111827; font-size: 16px; line-height: 1.3; outline: none;
  box-shadow: none; height: auto;
}
#tgc-root .tgc-field input:focus, #tgc-root .tgc-emailcard input:focus { border-color: var(--tgc-primary); box-shadow: 0 0 0 3px rgba(26, 30, 41, .1); }
#tgc-root .tgc-btn {
  background: var(--tgc-primary); color: var(--tgc-primary-text);
  border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 600; font-size: 14px;
  transition: filter .15s ease;
}
#tgc-root .tgc-btn:hover { filter: brightness(1.15); }
#tgc-root .tgc-btn:disabled { opacity: .6; cursor: default; }
#tgc-root .tgc-btn-sm { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
#tgc-root .tgc-link { background: none; border: 0; color: var(--tgc-muted); font-size: 12.5px; text-decoration: underline; padding: 2px; }
#tgc-root .tgc-privacy { margin: 4px 0 0; font-size: 11px; color: #9ca3af; text-align: center; }
#tgc-root .tgc-privacy a { color: inherit; text-decoration: underline; }
#tgc-root .tgc-error { font-size: 12.5px; color: #be123c; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 8px; padding: 7px 10px; }

/* Wątek */
#tgc-root .tgc-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--tgc-bg); }
#tgc-root .tgc-messages {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 6px;
}
#tgc-root .tgc-msg {
  max-width: 82%; padding: 9px 12px; border-radius: 16px;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  font-size: 14px; position: relative;
}
#tgc-root .tgc-msg a { text-decoration: underline; font-weight: 500; }
#tgc-root .tgc-msg-in { align-self: flex-end; background: var(--tgc-primary); color: var(--tgc-primary-text); border-bottom-right-radius: 4px; }
#tgc-root .tgc-msg-in a { color: inherit; }
#tgc-root .tgc-msg-out { align-self: flex-start; background: #fff; border: 1px solid var(--tgc-border); border-bottom-left-radius: 4px; }
#tgc-root .tgc-msg-out a { color: #1d4ed8; }
#tgc-root .tgc-msg-sys {
  align-self: center; max-width: 92%; text-align: center; font-size: 12.5px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px;
}
#tgc-root .tgc-time { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; text-align: right; }
#tgc-root .tgc-msg-out .tgc-time { text-align: left; }
#tgc-root .tgc-msg.tgc-sending { opacity: .65; }
#tgc-root .tgc-msg.tgc-failed { background: #fee2e2; color: #991b1b; cursor: pointer; }
#tgc-root .tgc-day { align-self: center; font-size: 11px; color: #9ca3af; font-weight: 600; margin: 8px 0 2px; }

/* Szybkie pytania */
#tgc-root .tgc-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; justify-content: flex-end; }
#tgc-root .tgc-chip {
  background: #fff; border: 1px solid var(--tgc-primary); color: var(--tgc-primary);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; line-height: 1.2;
}
#tgc-root .tgc-chip:hover { background: var(--tgc-primary); color: var(--tgc-primary-text); }

/* Karta e-mail */
#tgc-root .tgc-emailcard {
  position: relative; margin: 0 12px 10px; padding: 12px 12px 12px 14px;
  background: #fff; border: 1px solid var(--tgc-border); border-left: 4px solid var(--tgc-accent);
  border-radius: 12px; box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
#tgc-root .tgc-emailcard p { margin: 0 22px 8px 0; font-size: 12.5px; color: #374151; }
#tgc-root .tgc-emailcard-row { display: flex; gap: 6px; }
#tgc-root .tgc-emailcard-row input { padding: 8px 10px; font-size: 16px; }
#tgc-root .tgc-emailcard-x {
  position: absolute; top: 4px; right: 6px; background: none; border: 0;
  font-size: 18px; color: #9ca3af; padding: 2px 6px; line-height: 1;
}
#tgc-root .tgc-emailcard .tgc-error { margin-top: 6px; }

/* Pole wiadomości */
#tgc-root .tgc-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; background: #fff; border-top: 1px solid var(--tgc-border);
}
#tgc-root .tgc-composer textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 12px;
  background: #f9fafb; color: #111827; font-size: 16px; line-height: 1.35; outline: none; box-shadow: none;
}
#tgc-root .tgc-composer textarea:focus { border-color: var(--tgc-primary); background: #fff; }
#tgc-root .tgc-send {
  width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 12px;
  background: var(--tgc-primary); color: var(--tgc-primary-text);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
#tgc-root .tgc-send:hover { filter: brightness(1.15); }
#tgc-root .tgc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
#tgc-root .tgc-footer { padding: 0 14px 10px; background: #fff; font-size: 11.5px; color: var(--tgc-muted); text-align: center; }
#tgc-root .tgc-footer:empty { display: none; }
#tgc-root .tgc-footer button { background: none; border: 0; padding: 0; color: var(--tgc-primary); text-decoration: underline; font-size: 11.5px; }

/* Telefon – pełny ekran */
@media (max-width: 640px) {
  #tgc-root.tgc-open { inset: 0; }
  #tgc-root .tgc-window {
    position: fixed; inset: 0; width: 100%; height: 100%; max-height: none;
    height: 100dvh; border-radius: 0; bottom: 0;
  }
  #tgc-root.tgc-open .tgc-launcher { display: none; }
  #tgc-root .tgc-launcher { width: 56px; height: 56px; }
  #tgc-root .tgc-tooltip { max-width: 200px; }
  #tgc-root.tgc-pos-right .tgc-tooltip { right: 68px; }
  #tgc-root.tgc-pos-left .tgc-tooltip { left: 68px; }
}


/* Automatyczne odpowiedzi – „pisze…” */
#tgc-root .tgc-typing { display: flex; gap: 4px; align-self: flex-start; margin: 0 14px 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--tgc-border); border-radius: 14px; width: max-content; }
#tgc-root .tgc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: tgc-dot 1s infinite ease-in-out; }
#tgc-root .tgc-typing span:nth-child(2) { animation-delay: .15s; }
#tgc-root .tgc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tgc-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
#tgc-root .tgc-msg-sys.tgc-note { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

/* Blokada pola (poza godzinami – najpierw e-mail) */
#tgc-root .tgc-composer.tgc-locked textarea { background: #f3f4f6; cursor: not-allowed; }
#tgc-root .tgc-composer.tgc-locked .tgc-send { opacity: .4; cursor: not-allowed; }
#tgc-root .tgc-quick.tgc-locked { opacity: .5; pointer-events: none; }

/* Czat osadzony – shortcode [tg_czat] */
#tgc-root.tgc-embedded { position: relative; bottom: auto; right: auto; left: auto; z-index: 1; width: 100%; max-width: 100%; margin: 0 0 1.5em; }
#tgc-root.tgc-embedded .tgc-window {
  position: relative; bottom: auto; right: auto; left: auto; width: 100%; height: var(--tgc-embed-h, 540px); max-height: none;
  opacity: 1; transform: none; box-shadow: 0 6px 30px rgba(15, 23, 42, .12); border: 1px solid var(--tgc-border);
}
#tgc-root .tgc-tabs { display: flex; background: var(--tgc-primary); padding: 0 12px; gap: 4px; flex: 0 0 auto; }
#tgc-root .tgc-tab {
  flex: 1; background: transparent; border: 0; color: var(--tgc-primary-text); opacity: .7;
  padding: 10px 8px; font-size: 13.5px; font-weight: 600; border-bottom: 3px solid transparent; border-radius: 0;
}
#tgc-root .tgc-tab:hover { opacity: 1; }
#tgc-root .tgc-tab.tgc-tab-active { opacity: 1; border-bottom-color: var(--tgc-accent); }
#tgc-root .tgc-embed-intro { margin: 0; padding: 10px 16px; font-size: 12.5px; color: #4b5563; background: #fff; border-bottom: 1px solid var(--tgc-border); }
#tgc-root .tgc-mailform { justify-content: flex-start; }
#tgc-root .tgc-mailform textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
  color: #111827; font-size: 16px; line-height: 1.4; resize: vertical; min-height: 110px; outline: none; box-shadow: none;
}
#tgc-root .tgc-mailform textarea:focus { border-color: var(--tgc-primary); }
@media (max-width: 640px) {
  #tgc-root.tgc-embedded.tgc-open { inset: auto; }
  #tgc-root.tgc-embedded .tgc-window { position: relative; inset: auto; height: var(--tgc-embed-h, 540px); border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #tgc-root * { transition: none !important; animation: none !important; }
}

/* --- 2.2: status na przycisku + ukrywanie dymka na telefonie --- */
#tgc-root .tgc-launcher-dot {
  position: absolute; bottom: 3px; right: 3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #34d399; border: 2px solid #fff;
  opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s;
}
#tgc-root.tgc-is-online .tgc-launcher-dot { opacity: 1; transform: scale(1); }
#tgc-root.tgc-open .tgc-launcher-dot { opacity: 0; }

/* Motyw ma własny przycisk czatu (np. dolna belka) – na telefonie bez pływającego dymka.
   Okno czatu działa dalej: otwierają je przyciski z atrybutem data-tgc-open. */
@media (max-width: 767px) {
  #tgc-root.tgc-nolauncher-m .tgc-launcher,
  #tgc-root.tgc-nolauncher-m .tgc-tooltip { display: none !important; }
  #tgc-root.tgc-nolauncher-m:not(.tgc-open) { pointer-events: none; }
}