/* ===========================
   Prawdzik Chat – Ultra UI
   Colors: black / white / #1ea5dd
   =========================== */

:root {
  --ppc-blue: #1ea5dd;
  --ppc-blue-600: #1297d1;
  --ppc-blue-700: #0e86b9;
  --ppc-ink: #0b0b0b;
  --ppc-ink-2: #121212;
  --ppc-line: #e9eef3;
  --ppc-soft: #f6f8fa;
  --ppc-bg: #ffffff;
  --ppc-shadow: 0 16px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  --ppc-radius-xl: 16px;
  --ppc-radius-lg: 12px;
  --ppc-radius-md: 10px;
}

/* --- Existing bubble (kept) -------------------------------- */
.ppcb-bubble-label {
  position: fixed; right: 16px; bottom: calc(16px + clamp(56px, 4vw, 120px) + 12px); z-index: 9999;
  background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 20px rgba(30,165,221,.4);
  text-shadow: 0 0 6px rgba(30,165,221,.4), 0 0 12px rgba(30,165,221,.3), 0 0 18px rgba(30,165,221,.2);
  pointer-events: none; user-select: none;
}

.ppcb-bubble {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  width: clamp(56px, 4vw, 120px);
  height: clamp(56px, 4vw, 120px);
  border-radius: 50%;
  display: grid; place-items: center; background: #000; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  isolation: isolate;
}
.ppcb-bubble::before, .ppcb-bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); opacity: .8; transform: scale(1);
  animation: ppcb-pulse 2.2s ease-out infinite; z-index: -1;
}
.ppcb-bubble::after { border-width: 1.5px; opacity: .5; animation-delay: .9s; }
.ppcb-logo { width: 28px; height: 28px; object-fit: contain; user-select: none; pointer-events: none;
  filter: invert(52%) sepia(96%) saturate(530%) hue-rotate(162deg) brightness(98%) contrast(95%); }
.ppcb-bubble:hover { box-shadow:
  0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 6px rgba(30,165,221,.14); }
.ppcb-bubble:focus-visible { outline: 2px solid rgba(30,165,221,.9); outline-offset: 3px; }
.ppcb-bubble:active { transform: translateY(1px) scale(.98); }
@keyframes ppcb-pulse { 0%{transform:scale(1);opacity:.8}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0} }
@media (prefers-reduced-motion: reduce){ .ppcb-bubble::before,.ppcb-bubble::after{animation:none;opacity:.25} }

/* --- Panel -------------------------------------------------- */
#ppcb-panel {
  position: fixed; right: 16px; bottom: 88px; width: 380px; max-height: 72vh; z-index: 10000;
  display: none; flex-direction: column; border-radius: var(--ppc-radius-xl); overflow: hidden;
  background: color-mix(in oklab, var(--ppc-bg) 85%, white 15%);
  border: 1px solid var(--ppc-line); box-shadow: var(--ppc-shadow);
  backdrop-filter: saturate(150%) blur(10px);
}
@media (max-width: 480px) {
  #ppcb-panel { right: 8px; left: 8px; width: auto; bottom: 84px; }
}

/* --- Header ------------------------------------------------- */
#ppcb-header {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 12px 14px; position: relative;
  background:
    linear-gradient(180deg, rgba(30,165,221,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  border-bottom: 1px solid var(--ppc-line);
}
.ppcb-logo-sm {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.ppcb-logo-sm img { width: 18px; height: 18px; filter: invert(52%) sepia(96%) saturate(530%) hue-rotate(162deg) brightness(98%) contrast(95%); }

#ppcb-title {
  display: flex; flex-direction: column; line-height: 1.2;
}
#ppcb-title .name {
  font-weight: 700; letter-spacing: .2px; color: var(--ppc-ink); font-size: 14px;
}
@media (prefers-color-scheme: dark){ #ppcb-title .name{color:#464646} }
#ppcb-title .status {
  display: inline-flex; align-items: center; gap: 6px; color: #5e6a75; font-size: 12px;
}
#ppcb-title .status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #29c95a; box-shadow: 0 0 0 4px rgba(41,201,90,.15);
}

#ppcb-close {
  appearance: none; border: 0; background: transparent; color: #7b8794; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px; font-size: 22px; line-height: 1;
}
#ppcb-close:hover { background: var(--ppc-soft); color: #2a2f36; }

#ppcb-new-chat {
  appearance: none; border: 1px solid var(--ppc-line); background: var(--ppc-bg); color: var(--ppc-blue); cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; transition: all 0.15s ease;
}
#ppcb-new-chat:hover { 
  background: var(--ppc-blue); color: white; border-color: var(--ppc-blue); 
  box-shadow: 0 2px 8px rgba(30,165,221,0.3);
}
@media (prefers-color-scheme: dark){ #ppcb-close:hover{background: #151a20; color: #e6edf3; } }

/* --- Messages area ----------------------------------------- */
#ppcb-messages {
  flex: 1 1 auto; overflow: auto; padding: 14px 14px 8px;
  display: grid; align-content: start; gap: 10px; background: transparent;
  scroll-behavior: smooth;
}

/* Gradient edge mask for subtle fade top */
#ppcb-messages::before {
  content: ""; position: sticky; top: -14; height: 18px; margin: -14px -14px 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  #ppcb-messages::before { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); }
}

/* Scrollbar polish */
#ppcb-messages::-webkit-scrollbar { width: 10px; }
#ppcb-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 6px; }
@media (prefers-color-scheme: dark){
  #ppcb-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
}

/* --- Message bubble layout -------------------------------- */
.ppcb-rowmsg {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: end;
}
.ppcb-rowmsg.user { grid-template-columns: 1fr 28px; }
.ppcb-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ppc-soft); display: grid; place-items: center;
  border: 1px solid var(--ppc-line);
}
.ppcb-avatar img { width: 18px; height: 18px; object-fit: contain; filter: invert(52%) sepia(96%) saturate(530%) hue-rotate(162deg) brightness(98%) contrast(95%); }
@media (prefers-color-scheme: dark){ .ppcb-avatar{background:#12161b} }

.ppcb-bubble-msg {
  max-width: 92%; padding: 10px 12px; border-radius: 14px; position: relative; word-wrap: break-word;
  font-size: 14px; line-height: 1.4; letter-spacing: .1px;
}

.ppcb-bot .ppcb-bubble-msg {
  background: var(--ppc-soft); border: 1px solid var(--ppc-line); color: #101418;
}
.ppcb-user .ppcb-bubble-msg {
  background: #1ea5dd;
  color: #fff; border: 1px solid rgba(255,255,255,.1);
}

/* Bubble “tail” */
.ppcb-bot .ppcb-bubble-msg::after,
.ppcb-user .ppcb-bubble-msg::after {
  content: ""; position: absolute; bottom: -1; width: 12px; height: 12px;
}
.ppcb-bot .ppcb-bubble-msg::after {
  left: -1px; background: var(--ppc-soft); border-left: 1px solid var(--ppc-line); border-bottom: 1px solid var(--ppc-line);
  transform: translateY(0) rotate(89deg); border-bottom-left-radius: 2px;
}
.ppcb-user .ppcb-bubble-msg::after {
  right: -1px; 
  background: #1ea5dd;
  transform: translateY(0) rotate(89deg);
}

/* Timestamp */
.ppcb-time {
  font-size: 11px; opacity: .6; margin-top: 4px;
}

/* Typing indicator */
.ppcb-typing {
  display: inline-flex; gap: 6px; align-items: center;
}
.ppcb-dots { display: inline-flex; gap: 4px; }
.ppcb-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: #9aa7b3; opacity: .6; animation: ppcb-bounce 1.4s infinite;
}
.ppcb-dots i:nth-child(2){ animation-delay: .14s; }
.ppcb-dots i:nth-child(3){ animation-delay: .28s; }
@keyframes ppcb-bounce { 0%,80%,100%{ transform: translateY(0); opacity:.45 } 40%{ transform: translateY(-4px); opacity:1 } }

/* --- Suggestion chips ------------------------------------- */
.ppcb-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.ppcb-chip {
  font-size: 12px; padding: 6px 10px; border-radius: 999px; cursor: pointer; user-select: none;
  background: #eef6fb; color: #0d5682; border: 1px solid #d7ecf7; transition: transform .08s ease, box-shadow .2s ease;
}
.ppcb-chip:hover { box-shadow: 0 2px 8px rgba(30,165,221,.18); transform: translateY(-1px); }
@media (prefers-color-scheme: dark){
  .ppcb-chip { background: #0d1a21; color: #7fcff0; border-color: rgba(126,219,255,.18); }
}

/* --- Lead card (inline) ----------------------------------- */
#ppcb-lead {
  display: none; margin: 6px 2px 10px; padding: 12px; border-radius: var(--ppc-radius-lg);
  border: 1px dashed var(--ppc-blue); background: rgba(30,165,221,.06);
}
#ppcb-lead h4 { margin: 0 0 8px; font-size: 14px; }
.ppcb-row { display: flex; gap: 8px; margin-bottom: 8px; }
#ppcb-lead input, #ppcb-lead select {
  flex: 1; border: 1px solid var(--ppc-line); background: var(--ppc-bg); color: inherit;
  border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none;
}
#ppcb-submit {
  appearance: none; border: 0; background: var(--ppc-blue); color: #fff; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 10px 12px; width: 100%;
  box-shadow: 0 6px 16px rgba(30,165,221,.35);
}
#ppcb-submit:hover { background: var(--ppc-blue-600); }

/* --- Input bar -------------------------------------------- */
#ppcb-inputbar {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
  padding: 10px; border-top: 1px solid var(--ppc-line); background: color-mix(in oklab, var(--ppc-bg) 94%, white 6%);
}
#ppcb-text {
  width: 100%; max-height: 140px; min-height: 42px; resize: none; overflow: auto;
  padding: 10px 12px; border-radius: var(--ppc-radius-md);
  border: 1px solid var(--ppc-line); background: var(--ppc-bg); color: inherit; font: inherit;
}
#ppcb-send {
  appearance: none; border: 0; background: #000; color: #fff; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
#ppcb-send svg { width: 18px; height: 18px; }
#ppcb-send:hover { background: var(--ppc-ink-2); }
#ppcb-send:disabled { opacity: .6; cursor: not-allowed; }

/* Chat-only typography reset (prevents global p { margin: 35px } from affecting bubbles) */
#ppcb-panel .ppcb-bubble-msg :where(p, ul, ol) {
  margin: 0 0 10px;      /* nicer default for chat */
  line-height: 1.5;
}

#ppcb-panel .ppcb-bubble-msg :where(p:last-child, ul:last-child, ol:last-child) {
  margin-bottom: 0;      /* remove trailing gap at end of message */
}

/* Lists from Markdown */
#ppcb-panel .ppcb-bubble-msg ul,
#ppcb-panel .ppcb-bubble-msg ol {
  padding-left: 1.15rem; /* indent bullets/numbers */
}

#ppcb-panel .ppcb-bubble-msg li {
  margin: 4px 0;         /* tighter list items */
}

/* Optional: headings that might appear */
#ppcb-panel .ppcb-bubble-msg :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 8px;
  line-height: 1.25;
  font-weight: 700;
  font-size: 14px;       /* keep headings compact inside a bubble */
}

/* Fallback if a global rule is still winning — turn this on only if needed */
#ppcb-panel .ppcb-bubble-msg p {
  margin: 0 0 0 0px !important;
}