:root{
      --brand-main:#AC1818;  /* główny */
      --brand-accent:#F6EA2A;/* akcent */
      --brand-alt:#7C1D1C;   /* hover */
      --brand-text:#0b1020;
      --brand-muted:#6b7280;
      --brand-border:#d1d5db;
      --brand-bg:#ffffff;

      /* n8n widget */
      --chat--color-primary: var(--brand-main);
      --chat--color-secondary: var(--brand-accent);
      --chat--color-white:#fff;
      --chat--color-dark:#111827;

      --chat--message--bot--background:#fff;
      --chat--message--bot--color:var(--brand-text);
      --chat--message--user--background:var(--brand-main);
      --chat--message--user--color:#fff;
      --chat--message--border-radius:18px;
      --chat--message-line-height:1.6;

      --chat--header--background: var(--brand-main);
      --chat--header--color:#fff;

      --chat--window--width:100%;
      --chat--window--height:100%;
      --chat--border-radius:18px;
      --chat--textarea--height:52px;
    }

    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ height:100%; margin:0; background:#fff; color:var(--brand-text); }
    body, input, button, label{ font-family:'Poppins','Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
    #n8n-chat, #n8n-chat *{ font-family:'Poppins','Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; }

    /* Launcher (prawy-dół) */
    #chat-launcher{
      position:fixed; right:20px; bottom:20px; z-index:10000;
      width:64px; height:64px; border-radius:50%;
      background:var(--brand-main); color:#fff; border:0;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 10px 24px rgba(0,0,0,.2);
      cursor:pointer; transition:background .15s ease;
      padding: 0;
    }
    #chat-launcher:hover{ background:var(--brand-alt); }
    #chat-launcher svg{ width:42px; height:42px; display:block; }

/* ➜ Zielona kropka dostępności (badge) */
#chat-launcher::after{
  content:"";
  position:absolute;
  left:-0px;          /* zmień na right:-2px; jeśli ma być po prawej */
  bottom:-0px;
  width:16px; height:16px;
  border-radius:50%;
  background:#2ECC71;           /* zielony status (online) */
  border:2px solid #fff;        /* biały ring */
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  pointer-events:none;          /* nie blokuje kliknięcia w przycisk */
}

    /* Okno czatu */
    #chat-modal{
      position:fixed; right:20px; bottom:100px; z-index:9999;
      width:420px; max-width:calc(100% - 40px); height:640px;
      background:var(--brand-bg); border-radius:18px;
      box-shadow:0 20px 48px rgba(0,0,0,.24);
      display:none; flex-direction:column; overflow:hidden;
      border:1px solid #ececec;
    }

    /* Header Lex Bot */
    #chat-header{
      background:var(--brand-main); color:#fff;
      padding:8px 12px; min-height:60px;
      display:flex; align-items:center; justify-content:space-between;
    }
    #brand-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
    #chat-header .avatar{ width:36px; height:36px; border-radius:50%; background:#fff1; display:grid; place-items:center; border:2px solid #ffffff66; }
    #chat-header .avatar svg{ width:22px; height:22px; display:block; }
    #chat-header .meta{ display:flex; flex-direction:column; line-height:1.1; }
    #chat-header .bot-name{ font-family:"Segoe UI","Segoe UI Variable","Segoe UI Web",system-ui,-apple-system,Roboto,Arial,sans-serif; font-weight:700; font-size:16px; letter-spacing:.2px; }
    #chat-header .bot-sub{ font-family:"Segoe UI","Segoe UI Variable","Segoe UI Web",system-ui,-apple-system,Roboto,Arial,sans-serif; font-weight:400; font-size:12px; opacity:.95; display:flex; align-items:center; gap:6px; }
    #chat-header .online-dot{ width:10px; height:10px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 2px #ffffff55 inset; }

    /* Strzałka minimalizacji: jednolite, pełne kółko na hover/focus — bez obwódki */
    #chat-minimize{
      background: transparent; border: 0; color:#fff; cursor: pointer;
      width: 36px; height: 36px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      transition: background-color .15s ease, transform .05s ease;
      box-shadow: none;                     /* brak ringu */
    }

    #chat-minimize:hover{
      background: var(--brand-alt) !important;  /* pełne kółko, ciemnoczerwone */
      box-shadow: none !important;              /* zero obwódki */
    }

    #chat-minimize:focus-visible{
      outline: none;
      background: var(--brand-alt) !important;  /* też pełne kółko */
      box-shadow: none !important;              /* zero obwódki */
    }

    #chat-minimize:active{
      transform: translateY(1px);
    }

    #chat-minimize svg{
      width: 22px; height: 22px; display: block;
      pointer-events: none; /* klik trafia w button */
    }




    #chat-body{ flex:1; min-height:0; display:flex; }

    /* Formularz wstępny */
    #prechat-form{ width:100%; height:100%; padding:16px; overflow:auto; }
    form#prechat-form p.topnote{ margin:0 0 8px; font-size:13px; color:var(--brand-muted); }
    form#prechat-form .field{ margin-bottom:12px; }
    form#prechat-form .field label{ display:block; font-size:13px; margin-bottom:6px; color:#111; }
    form#prechat-form .field input[type="text"],
    form#prechat-form .field input[type="email"],
    form#prechat-form .field input[type="tel"]{
      width:100%; max-width:100%; height:44px; padding:10px 12px;
      border:1.5px solid var(--brand-border); border-radius:14px;
      font-size:14px; background:#fff; color:var(--brand-text);
      outline:none; transition:border-color .15s, box-shadow .15s;
    }
    form#prechat-form .field input::placeholder{ color:#9ca3af; }
    form#prechat-form .field input:focus{ border-color:var(--brand-main); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-main) 22%, transparent); }

    /* Checkbox – kwadrat 20x20, nieprzycinany, animowany */
    form#prechat-form .consent { display:flex; gap:12px; align-items:flex-start; font-size:13px; color:#333; }
    form#prechat-form .consent a { color: var(--brand-accent); text-decoration: underline; }

    form#prechat-form .consent input[type="checkbox"]{
      appearance: none; -webkit-appearance: none;
      width: 18px; height: 18px;
      flex: 0 0 20px; min-width:20px; min-height:20px;
      border: 2px solid var(--brand-border);
      border-radius: 2px;
      background: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      overflow: hidden;
      cursor: pointer; vertical-align: text-top;
      transition: border-color .2s, background-color .2s, box-shadow .2s, transform .08s;
      margin-top: 2px; padding: 0; line-height: 0;
    }
    form#prechat-form .consent input[type="checkbox"]::before{
      content: ""; width:12px; height:7px;
      border-left:3px solid #fff; border-bottom:3px solid #fff;
      transform: rotate(-45deg) scale(0); transform-origin:center;
      transition: transform .16s ease-in-out;
    }
    form#prechat-form .consent input[type="checkbox"]:hover { border-color: var(--brand-main); }
    form#prechat-form .consent input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(172,24,24,.18); border-color:var(--brand-main); }
    form#prechat-form .consent input[type="checkbox"]:checked{ background:var(--brand-main); border-color:var(--brand-main); }
    form#prechat-form .consent input[type="checkbox"]:checked::before{ transform: rotate(-45deg) scale(1); }
    form#prechat-form .consent input[type="checkbox"].invalid{ border-color:var(--brand-main); box-shadow:0 0 0 3px rgba(172,24,24,.18); }
    form#prechat-form .consent input[type="checkbox"]:disabled{ cursor:not-allowed; opacity:.6; }

    form#prechat-form .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
    form#prechat-form .btn{ padding:10px 14px; border-radius:14px; cursor:pointer; font-weight:700; border:1px solid var(--brand-main); background:var(--brand-main); color:#fff; transition:background .15s, border-color .15s; }
    form#prechat-form .btn:hover{ background:var(--brand-alt); border-color:var(--brand-alt); }
    form#prechat-form .note{ font-size:12px; color:var(--brand-muted); margin-top:10px; }
    form#prechat-form .error{ color:var(--brand-main); font-size:12px; margin-top:4px; display:none; }

    /* n8n mount */
    #chat-container{ width:100%; height:100%; display:none; }
    #n8n-chat{ width:100%; height:100%; }

    /* Kill-switch na ewentualny welcome z n8n */
    #n8n-chat [class*="welcome"],
    #n8n-chat [data-test-id*="welcome"],
    #n8n-chat [data-testid*="welcome"]{
      display:none !important; height:0 !important; padding:0 !important; margin:0 !important; visibility:hidden !important; opacity:0 !important;
    }

/* ===== WYŚLIJ: tylko ikonka (tło zawsze przezroczyste) ===== */
#n8n-chat .lex-send,
#n8n-chat .lex-send:hover,
#n8n-chat .lex-send.lex-active,
#n8n-chat .lex-send.lex-active:hover{
  background:#fff !important;            /* białe tło */
  border:1px solid #fff !important;      /* brak szarej obwódki */
  box-shadow:none !important;
}


/* szara ikonka gdy brak treści */
#n8n-chat .lex-send:not(.lex-active) svg,
#n8n-chat .lex-send:not(.lex-active) svg *{
  fill:#9ca3af !important;
  stroke:#9ca3af !important;
  transition: fill .15s ease, stroke .15s ease;
}

/* czerwona ikonka gdy jest treść */
#n8n-chat .lex-send.lex-active svg,
#n8n-chat .lex-send.lex-active svg *{
  fill: var(--brand-main) !important;
  stroke: var(--brand-main) !important;
}

/* ciemnoczerwona na hover */
#n8n-chat .lex-send.lex-active:hover svg,
#n8n-chat .lex-send.lex-active:hover svg *{
  fill: var(--brand-alt) !important;
  stroke: var(--brand-alt) !important;
}


/* ===== SPINACZ: tylko ikonka (tło zawsze przezroczyste) ===== */
#n8n-chat .lex-attach,
#n8n-chat .lex-attach:hover{
  background:#fff !important;           /* białe tło */
  border:1px solid #fff !important;     /* brak szarej obwódki */
  box-shadow:none !important;
}


/* czerwona ikonka spinacza */
#n8n-chat .lex-attach svg,
#n8n-chat .lex-attach svg *{
  fill: var(--brand-main) !important;
  stroke: var(--brand-main) !important;
  transition: fill .15s ease, stroke .15s ease;
}

/* ciemnoczerwona na hover */
#n88n-chat .lex-attach:hover svg,
#n8n-chat .lex-attach:hover svg *{
  fill: var(--brand-alt) !important;
  stroke: var(--brand-alt) !important;
}

/* ===== Załączniki (CHIP): czerwone pigułki z białą ikoną/nazwą/X ===== */
#n8n-chat .lex-file{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;         /* pełne zaokrąglenie */
  background: var(--brand-main) !important; /* czerwone tło */
  border: none !important;                  /* zero obwódek */
  box-shadow: none !important;
  white-space: nowrap !important;
}

/* biały tekst/nazwa pliku i linki w chipie */
#n8n-chat .lex-file,
#n8n-chat .lex-file a,
#n8n-chat .lex-file span,
#n8n-chat .lex-file div{
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
}

#n8n-chat .lex-file:hover{
  background: var(--brand-alt) !important;  /* ciemnoczerwony na hover */
}

/* biała ikonka pliku w chipie */
#n8n-chat .lex-file svg,
#n8n-chat .lex-file svg *{
  fill:#fff !important;
  stroke:#fff !important;
}

/* Przycisk X (usuń) – biała ikona, okrągły hover w ciemnej czerwieni */
#n8n-chat .lex-file .lex-file-remove{
  width:22px !important;
  height:22px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:50% !important;             /* okrągły hover */
  background:transparent !important;
  border:none !important;
  margin-left:4px !important;
  cursor:pointer !important;
}

#n8n-chat .lex-file .lex-file-remove:hover{
  background: var(--brand-alt) !important;   /* ciemnoczerwony bubble pod X */
}

#n8n-chat .lex-file .lex-file-remove svg,
#n8n-chat .lex-file .lex-file-remove svg *{
  fill:#fff !important;
  stroke:#fff !important;
}

    @media (max-height:750px){ #chat-modal{ height:80vh; } }