/* ============================================================
   live.hexart.io — HEXART Assistant floating chat (chat.css)
   Self-contained widget styles, prefixed .hxchat — zero collisions
   with styles.css. Inherits the site palette via CSS variables and
   falls back to the HEXART brand values when loaded standalone.
   Performance: every animation runs on transform/opacity only
   (compositor path); the only idle animation is the FAB pulse ring
   and it stops while the panel is open / with reduced motion.
   ============================================================ */

.hxchat,
.hxchat *,
.hxchat *::before,
.hxchat *::after { box-sizing: border-box; }

.hxchat {
  /* local vars: site values when styles.css is present, brand fallbacks otherwise */
  --hx-bg:     var(--bg, #0e1116);
  --hx-ink:    var(--ink, #edeff3);
  --hx-muted:  var(--muted, #9fb0c8);
  --hx-line:   var(--line, rgba(150, 180, 230, .16));
  --hx-gold:   var(--gold, #e8c87a);
  --hx-gold-2: var(--gold-2, #ffb24d);
  --hx-font:   var(--font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  position: fixed;
  right: 18px;
  bottom: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;                      /* above .nav (50), below the GDPR cookie banner (70) */
  font-family: var(--hx-font);
  line-height: 1.5;
  color: var(--hx-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- launcher (FAB) ----------
   Celowo NIE dymek-emoji: kwadrat o dużym promieniu ze znakiem HEXART — ten sam
   język wizualny co panele aplikacji (ciemne szkło + złoty akcent), nie generyczny
   widget czatu. */
.hxchat-fab {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: var(--hx-gold);
  border: 1px solid rgba(232, 200, 122, .5);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(232, 200, 122, .14), rgba(232, 200, 122, 0) 60%),
    linear-gradient(180deg, rgba(22, 28, 40, .96), rgba(12, 16, 24, .96));
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 34px -12px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 26px -10px rgba(232, 200, 122, .45);
  transition: transform .25s, box-shadow .3s, border-color .3s;
}
.hxchat-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 200, 122, .9);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 34px -8px rgba(232, 200, 122, .65);
}
/* Launcher pokazuje TYLKO znak HEXART — zamykanie jest w nagłówku panelu, więc
   drugi „×" na dymku był zbędny (i przez specyficzność `.hxchat-fab span` (0,1,1)
   nadpisującą `.hxchat-fab-close{display:none}` (0,1,0) wisiał widoczny ZAWSZE,
   doklejony pod logo). Klik w launcher przełącza panel. */
.hxchat-fab span { pointer-events: none; display: grid; place-items: center; }
.hxchat-fab-open svg { width: 27px; height: 27px; display: block;
  filter: drop-shadow(0 0 9px rgba(232, 200, 122, .4)); }
/* otwarty panel: logo lekko przygaszone, żeby było widać, że to „przełącznik" */
.hxchat.is-open .hxchat-fab { opacity: .85; }

/* delikatny puls uwagi — tylko transform/opacity, gaśnie po otwarciu */
.hxchat-fab::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  border: 1px solid rgba(232, 200, 122, .5);
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  animation: hxPulse 3.6s ease-out infinite;
}
.hxchat.is-open .hxchat-fab::after { animation: none; }
@keyframes hxPulse {
  0%        { opacity: .55; transform: scale(.94); }
  55%, 100% { opacity: 0;   transform: scale(1.42); }
}

/* ---------- panel ---------- */
.hxchat-panel {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 72px;
  width: 360px;
  height: 520px;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  /* the widget is built as a bare <section> (for a11y/semantics), so it inherits
     the site's generic `section { padding / max-width / margin }` rule (styles.css)
     unless explicitly zeroed here — that rule alone caused the header to sit ~115px
     into the panel instead of at the top. Keep this widget fully self-contained. */
  padding: 0;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(232, 200, 122, .35);
  background: linear-gradient(180deg, rgba(20, 26, 42, .96), rgba(10, 13, 22, .97));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85), 0 0 44px -18px rgba(232, 200, 122, .35);
  /* closed state — reveal animates transform+opacity; visibility keeps it out
     of the a11y tree and hit-testing without any display/reflow churn */
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transform-origin: 100% 100%;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s ease, transform .32s cubic-bezier(.2, .9, .3, 1),
              visibility 0s linear .32s;
}
.hxchat.is-open .hxchat-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ---------- header ---------- */
.hxchat-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, .03);
}
.hxchat-ava {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--hx-gold);
  background: linear-gradient(150deg, rgba(232, 200, 122, .22), rgba(0, 230, 255, .10));
  border: 1px solid rgba(232, 200, 122, .4);
}
.hxchat-ava svg { width: 20px; height: 20px; display: block; }
.hxchat-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hxchat-name { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.hxchat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--hx-muted);
}
.hxchat-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ae6a0;
  box-shadow: 0 0 8px rgba(90, 230, 160, .8);
}
.hxchat.is-busy .hxchat-status i {
  background: var(--hx-gold);
  box-shadow: 0 0 8px rgba(232, 200, 122, .8);
}
.hxchat-status em { font-style: normal; }
.hxchat-x {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--hx-muted);
  background: transparent;
  transition: color .2s, background .2s;
}
.hxchat-x:hover { color: var(--hx-ink); background: rgba(255, 255, 255, .06); }

/* ---------- message log ---------- */
.hxchat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 200, 122, .35) transparent;
}
.hxchat-log::-webkit-scrollbar { width: 6px; }
.hxchat-log::-webkit-scrollbar-thumb { background: rgba(232, 200, 122, .3); border-radius: 3px; }
.hxchat-log::-webkit-scrollbar-track { background: transparent; }

.hxchat-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: .92rem;
  white-space: pre-wrap;             /* keeps bot newlines without any HTML */
  overflow-wrap: anywhere;
  word-break: break-word;
  animation: hxMsgIn .28s ease both; /* one-shot entrance, transform/opacity only */
}
@keyframes hxMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.hxchat-msg.from-user {
  align-self: flex-end;
  color: #1a1206;
  background: linear-gradient(180deg, #ffe1a0, #ffc04d);
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 18px -8px rgba(255, 184, 77, .55);
}
.hxchat-msg.from-bot {
  align-self: flex-start;
  color: var(--hx-ink);
  background: rgba(28, 36, 56, .85);
  border: 1px solid var(--hx-line);
  border-bottom-left-radius: 4px;
}
.hxchat-msg.from-bot a { color: var(--hx-gold); text-decoration: underline; }
.hxchat-msg.from-bot a:hover { color: var(--hx-gold-2); }

/* typing indicator (a bot bubble with 3 bouncing dots; removed when done,
   so the animation costs nothing outside an in-flight request) */
.hxchat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.hxchat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hx-muted);
  animation: hxDot 1.2s ease-in-out infinite;
}
.hxchat-typing i:nth-child(2) { animation-delay: .15s; }
.hxchat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hxDot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- composer ---------- */
.hxchat-form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 6px;
  border-top: 1px solid var(--hx-line);
}
.hxchat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--hx-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--hx-ink);
  font: inherit;
  font-size: .92rem;
  line-height: 1.4;
  padding: 9px 11px;
  min-height: 38px;
  max-height: 104px;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  /* Pasek przewijania W POLU WPISYWANIA wygląda jak suwak doklejony do inputu i
     psuje cały composer. Pole i tak rośnie samo (autoGrow) do 104 px, więc scroll
     jest potrzebny wyjątkowo rzadko — chowamy sam PASEK, zachowując przewijanie
     (kółkiem, klawiaturą, dotykiem). To kosmetyka paska, nie blokada dostępu. */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* starsze Edge */
}
.hxchat-input::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */
.hxchat-input::placeholder { color: var(--hx-muted); opacity: .8; }
.hxchat-input:focus {
  border-color: rgba(232, 200, 122, .6);
  box-shadow: 0 0 0 3px rgba(232, 200, 122, .14);
}
.hxchat-send {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #1a1206;
  background: linear-gradient(180deg, #ffe1a0, #ffc04d);
  box-shadow: 0 8px 20px -8px rgba(255, 184, 77, .6);
  transition: transform .2s, box-shadow .25s, opacity .2s;
}
.hxchat-send:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(255, 184, 77, .75); }
.hxchat-send svg { width: 17px; height: 17px; display: block; }
.hxchat-send:disabled,
.hxchat-input:disabled { opacity: .55; cursor: default; }
.hxchat-send:disabled { transform: none; }

/* GDPR mini-note under the composer */
.hxchat-gdpr {
  flex: none;
  margin: 0;
  padding: 0 14px 10px;
  font-size: .68rem;
  color: var(--hx-muted);
  opacity: .75;
}

/* focus ring (widget-scoped; matches the site's gold accent) */
.hxchat :focus-visible {
  outline: 2px solid rgba(232, 200, 122, .8);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- mobile: full-width bottom sheet ---------- */
@media (max-width: 480px) {
  .hxchat { right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .hxchat-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 76vh;
    height: min(84dvh, 640px);
    max-height: none;
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hxchat-input { font-size: 16px; }   /* prevents the iOS focus zoom */
}

/* ---------- zaczepka (dymek nad launcherem) ----------
   Pojawia się RAZ, po ~40 s czytania, znika sama po 9 s. Animacja wyłącznie na
   transform/opacity (kompozytor), więc nie rusza layoutu strony. */
.hxchat-teaser {
  position: absolute;
  right: 0;
  bottom: 68px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(272px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(232, 200, 122, .42);
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(232, 200, 122, .12), rgba(232, 200, 122, 0) 60%),
    linear-gradient(180deg, rgba(22, 28, 40, .97), rgba(12, 16, 24, .97));
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8), 0 0 24px -12px rgba(232, 200, 122, .5);
  color: var(--hx-ink);
  font-size: .84rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, .9, .34, 1);
}
.hxchat-teaser.is-in { opacity: 1; transform: translateY(0) scale(1); }
.hxchat-teaser:hover { border-color: rgba(232, 200, 122, .8); }
.hxchat-teaser-txt { flex: 1; }
.hxchat-teaser-x {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--hx-muted);
  font: inherit; font-size: 17px; line-height: 1;
  cursor: pointer;
}
.hxchat-teaser-x:hover { color: var(--hx-ink); background: rgba(255, 255, 255, .07); }
@media (max-width: 480px) { .hxchat-teaser { bottom: 64px; } }

/* ============================================================
   SYMLINKI — linki, które prowadzą po stronie
   Asystent linkuje do sekcji ([tekst](#id)); klik przewija i podświetla
   (deeplink.js). Wyglądem: nie „niebieski link z internetu", tylko złoty
   akcent aplikacji — czytelny w zdaniu, ale nienachalny.
   ============================================================ */
.hxchat-link {
  display: inline;
  padding: 0 1px;
  margin: 0;
  border: 0;
  border-bottom: 1px dashed rgba(232, 200, 122, .55);
  background: none;
  color: var(--hx-gold);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  transition: color .2s, border-color .2s, background-color .2s;
}
.hxchat-link::after { content: " ↗"; font-size: .8em; opacity: .55; letter-spacing: -.04em; }
.hxchat-link:hover {
  color: #fff;
  border-bottom-color: rgba(232, 200, 122, .95);
  background: rgba(232, 200, 122, .12);
}
.hxchat-link:focus-visible {
  outline: 2px solid rgba(232, 200, 122, .8);
  outline-offset: 2px;
}
.hxchat-a { color: var(--hx-gold); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- szybkie podpowiedzi (pod powitaniem) ---------- */
.hxchat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.hxchat-chip {
  border: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, .04);
  color: var(--hx-muted);
  font: inherit;
  font-size: .81rem;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.hxchat-chip:hover {
  color: var(--hx-ink);
  border-color: rgba(232, 200, 122, .6);
  background: rgba(232, 200, 122, .1);
  transform: translateY(-1px);
}
.hxchat-chip.is-lead { color: var(--hx-gold); border-color: rgba(232, 200, 122, .45); }

/* ---------- karta „zostaw kontakt" (CRM) ---------- */
.hxchat-lead {
  border: 1px solid rgba(232, 200, 122, .4);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 200, 122, .08), rgba(232, 200, 122, 0) 70%),
    rgba(255, 255, 255, .03);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hxchat-lead > b { font-size: .88rem; color: var(--hx-ink); }
.hxchat-lead-in {
  width: 100%;
  border: 1px solid var(--hx-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  color: var(--hx-ink);
  font: inherit;
  font-size: .88rem;
  padding: 8px 10px;
  outline: none;
  resize: none;
  transition: border-color .2s, box-shadow .2s;
}
.hxchat-lead-in:focus {
  border-color: rgba(232, 200, 122, .65);
  box-shadow: 0 0 0 3px rgba(232, 200, 122, .13);
}
.hxchat-lead-note { scrollbar-width: none; }
.hxchat-lead-note::-webkit-scrollbar { width: 0; display: none; }
.hxchat-lead-row { display: flex; align-items: center; gap: 10px; }
.hxchat-lead-go {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: #0e1116;
  background: linear-gradient(180deg, var(--hx-gold), var(--hx-gold-2));
  cursor: pointer;
  transition: transform .2s, filter .2s;
}
.hxchat-lead-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.hxchat-lead-go:disabled { opacity: .6; cursor: default; }
.hxchat-lead-msg { font-size: .8rem; color: var(--hx-muted); }

@media (max-width: 480px) {
  .hxchat-lead-in { font-size: 16px; }   /* bez zoomu na iOS */
}

/* ---------- reduced motion: states stay correct, motion goes away ---------- */
@media (prefers-reduced-motion: reduce) {
  .hxchat,
  .hxchat *,
  .hxchat *::before,
  .hxchat *::after {
    animation: none !important;
    transition: none !important;
  }
}