/* ============================================
   Chabin Assistant — Widget Premium v2
   ============================================ */
:root {
  --ch-primary:  #e63946;
  --ch-text:     #ffffff;
  --ch-bg:       #ffffff;
  --ch-radius:   18px;
  --ch-shadow:   0 16px 48px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  --ch-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ch-dur:      .2s;
  --ch-ease:     cubic-bezier(.4,0,.2,1);
}

/* ── Kontener ── */
.chabin-widget {
  position: fixed;
  z-index: 2147483647;
  font-family: var(--ch-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.chabin-pos-bottom-right { bottom: 24px; right: 24px; }
.chabin-pos-bottom-left  { bottom: 24px; left:  24px; }

/* ── Toggle button ── */
.chabin-toggle {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #e63946;
  background: var(--chabin-primary, #e63946);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(230,57,70,.45);
  transition: transform var(--ch-dur) var(--ch-ease), box-shadow var(--ch-dur);
  position: relative;
}
.chabin-toggle:hover  { transform: scale(1.08); box-shadow: 0 10px 32px rgba(230,57,70,.55); }
.chabin-toggle:active { transform: scale(.94); }
.chabin-chat-icon  { width: 28px; height: 28px; fill: #fff; }
.chabin-avatar-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ── Dymek ── */
.chabin-bubble {
  position: absolute;
  bottom: calc(100% + 12px); right: 0;
  background: #fff;
  color: #1f2937;
  padding: 8px 14px;
  border-radius: 14px 14px 3px 14px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  animation: ch-bubble-in .4s var(--ch-ease) both;
  pointer-events: none;
}
.chabin-bubble::after {
  content:''; position:absolute; bottom:-5px; right:14px;
  width:10px; height:10px; background:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%);
}
@keyframes ch-bubble-in {
  from { opacity:0; transform:translateY(8px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Okno — WIĘKSZE NA DESKTOP ── */
.chabin-window {
  position: absolute;
  bottom: 76px; right: 0;
  width: 440px;
  height: 640px;
  display: flex;
  flex-direction: column;
  background: var(--ch-bg);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  border: 1px solid rgba(0,0,0,.06);
}
.chabin-window[hidden] { display: none !important; }
.chabin-window.chabin-open { animation: ch-win-open .24s var(--ch-ease) both; }
@keyframes ch-win-open {
  from { opacity:0; transform:scale(.9) translateY(14px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ── Header ── */
.chabin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: #e63946;
  background: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
  background: linear-gradient(135deg, var(--chabin-primary,#e63946) 0%, color-mix(in srgb, var(--chabin-primary,#e63946) 75%, #000) 100%);
  color: #fff;
  flex-shrink: 0;
  min-height: 66px;
}
.chabin-header-info  { display:flex; align-items:center; gap:11px; }
.chabin-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.chabin-header-name   { display:block; font-weight:700; font-size:15px; letter-spacing:-.2px; }
.chabin-header-status {
  font-size:11px; opacity:.9; margin-top:2px;
  display:flex; align-items:center; gap:5px;
}
.chabin-status-dot {
  width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 2px rgba(74,222,128,.3);
  animation:ch-pulse 2.2s infinite;
}
@keyframes ch-pulse {
  0%,100% { box-shadow:0 0 0 2px rgba(74,222,128,.3); }
  50%      { box-shadow:0 0 0 5px rgba(74,222,128,.1); }
}
.chabin-header-actions { display:flex; gap:6px; }
.chabin-btn-icon {
  background:rgba(255,255,255,.18); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ch-dur);
  flex-shrink:0; line-height:1;
}
.chabin-btn-icon:hover { background:rgba(255,255,255,.35); }

/* ── RODO ── */
.chabin-gdpr {
  background:#fffbeb; border-bottom:1px solid #fde68a;
  padding:6px 14px; font-size:11px; color:#78716c; flex-shrink:0;
}

/* ── Wiadomości ── */
.chabin-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}
.chabin-messages::-webkit-scrollbar { width:3px; }
.chabin-messages::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:3px; }

.chabin-msg {
  display:flex; align-items:flex-end; gap:8px;
  max-width:83%;
  animation:ch-msg-in .18s var(--ch-ease) both;
}
@keyframes ch-msg-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.chabin-msg--bot,.chabin-msg--system,.chabin-msg--consultant { align-self:flex-start; }
.chabin-msg--customer { align-self:flex-end; flex-direction:row-reverse; max-width:78%; }

.chabin-msg-avatar {
  width:28px; height:28px; border-radius:50%;
  background:#e63946; background:var(--chabin-primary,#e63946);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff;
  flex-shrink:0; overflow:hidden;
}
.chabin-msg-avatar img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.chabin-msg--consultant .chabin-msg-avatar { background:#3b82f6; }
.chabin-msg--system .chabin-msg-avatar { background:#9ca3af; }
.chabin-msg--customer .chabin-msg-avatar { background:#6b7280; }

.chabin-msg-bubble {
  padding:10px 14px;
  border-radius:16px 16px 16px 4px;
  background:#f1f3f5; color:#1f2937;
  font-size:14px; line-height:1.55;
  word-break:break-word;
}
.chabin-msg--customer .chabin-msg-bubble {
  background:#e63946; background:var(--chabin-primary,#e63946);
  color:#fff;
  border-radius:16px 16px 4px 16px;
}
.chabin-msg--consultant .chabin-msg-bubble { background:#e8f4fd; }
.chabin-msg--system .chabin-msg-bubble {
  background:#f3f4f6; color:#6b7280;
  font-size:12px; font-style:italic; border-radius:10px;
}
.chabin-msg-time { font-size:10px; color:#9ca3af; margin-top:3px; }

/* ── Pisanie ── */
.chabin-typing {
  padding:0 16px 8px;
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:#9ca3af; flex-shrink:0;
}
.chabin-typing[hidden] { display:none !important; }
.chabin-dots span {
  display:inline-block; width:6px; height:6px;
  border-radius:50%; background:#9ca3af;
  animation:ch-dot 1.3s infinite ease-in-out;
}
.chabin-dots span:nth-child(2) { animation-delay:.2s; }
.chabin-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes ch-dot {
  0%,60%,100% { transform:translateY(0); opacity:.35; }
  30% { transform:translateY(-5px); opacity:1; }
}

/* ── Szybkie przyciski — PREMIUM ── */
.chabin-quick-buttons {
  display:flex; flex-wrap:wrap; gap:7px;
  padding:12px 14px 8px;
  border-top:1px solid #f3f4f6;
  flex-shrink:0;
}
.chabin-quick-buttons[hidden] { display:none !important; }
.chabin-quick-btn {
  padding:8px 15px;
  border:1.5px solid #e63946; border:1.5px solid var(--chabin-primary,#e63946);
  border-radius:24px;
  background:transparent;
  color:#e63946; color:var(--chabin-primary,#e63946);
  font-size:12.5px; font-weight:600; font-family:var(--ch-font);
  cursor:pointer; white-space:nowrap;
  transition:all var(--ch-dur) var(--ch-ease);
  letter-spacing:-.1px;
}
.chabin-quick-btn:hover {
  background:#e63946; background:var(--chabin-primary,#e63946);
  color:#fff; transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(230,57,70,.3);
}
.chabin-quick-btn:active { transform:translateY(0); }

/* ── Formularze ── */
.chabin-form-area {
  padding:12px 14px; border-top:1px solid #f3f4f6;
  background:#fafafa; flex-shrink:0;
  display:flex; flex-direction:column; gap:8px;
}
.chabin-form-area[hidden] { display:none !important; }
.chabin-form-group label {
  font-size:10.5px; color:#6b7280; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; display:block;
}
.chabin-input {
  padding:9px 12px; border:1.5px solid #e5e7eb; border-radius:10px;
  font-size:13.5px; outline:none; font-family:var(--ch-font);
  transition:border-color var(--ch-dur), box-shadow var(--ch-dur);
  background:#fff; width:100%; box-sizing:border-box;
}
.chabin-input:focus {
  border-color:#e63946; border-color:var(--chabin-primary,#e63946);
  box-shadow:0 0 0 3px rgba(230,57,70,.1);
}
.chabin-btn {
  padding:9px 14px; border:none; border-radius:10px;
  cursor:pointer; font-size:13px; font-weight:600; font-family:var(--ch-font);
  transition:all var(--ch-dur); line-height:1.4;
}
.chabin-btn-primary {
  background:#e63946; background:var(--chabin-primary,#e63946);
  color:#fff; box-shadow:0 4px 12px rgba(230,57,70,.3);
}
.chabin-btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.chabin-btn-secondary { background:#f3f4f6; color:#374151; }
.chabin-btn-secondary:hover { background:#e5e7eb; }

/* ── Oceny ── */
.chabin-rating-title { font-size:14px; font-weight:600; text-align:center; color:#1f2937; margin:0 0 4px; }
.chabin-stars { display:flex; gap:8px; justify-content:center; }
.chabin-star {
  background:none; border:none; font-size:28px; color:#e5e7eb;
  cursor:pointer; line-height:1; transition:color var(--ch-dur), transform var(--ch-dur);
  padding:2px;
}
.chabin-stars:hover .chabin-star { color:#fbbf24; }
.chabin-star:hover ~ .chabin-star { color:#e5e7eb; }
.chabin-star.active { color:#f59e0b; }
.chabin-star:hover { transform:scale(1.2); }

/* ── Input area ── */
.chabin-input-area {
  display:flex; align-items:flex-end; gap:9px;
  padding:11px 14px;
  border-top:1px solid #f3f4f6; background:#fff; flex-shrink:0;
}
.chabin-textarea {
  flex:1; resize:none;
  border:1.5px solid #e5e7eb; border-radius:12px;
  padding:9px 13px; font-size:14px; font-family:var(--ch-font);
  outline:none; max-height:96px; overflow-y:auto;
  transition:border-color var(--ch-dur); line-height:1.5;
}
.chabin-textarea:focus { border-color:#e63946; border-color:var(--chabin-primary,#e63946); }
.chabin-textarea::placeholder { color:#9ca3af; }
.chabin-send-btn {
  width:40px; height:40px; border-radius:50%;
  background:#e63946; background:var(--chabin-primary,#e63946);
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform var(--ch-dur), box-shadow var(--ch-dur);
  box-shadow:0 4px 12px rgba(230,57,70,.35);
}
.chabin-send-btn:hover { transform:scale(1.08); box-shadow:0 6px 16px rgba(230,57,70,.45); }
.chabin-send-btn:active { transform:scale(.94); }
.chabin-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.chabin-send-btn svg { width:17px; height:17px; }

/* ── Karuzela produktów ── */
.chabin-carousel {
  display:flex; gap:9px; overflow-x:auto;
  padding:4px 2px 10px;
  align-self:flex-start; max-width:100%;
  scrollbar-width:thin;
}
.chabin-product-card {
  min-width:148px; max-width:148px;
  border:1px solid #e5e7eb; border-radius:12px;
  overflow:hidden; flex-shrink:0; background:#fff;
  transition:box-shadow var(--ch-dur), transform var(--ch-dur);
}
.chabin-product-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.1); transform:translateY(-2px); }
.chabin-product-img { width:100%; height:96px; object-fit:cover; }
.chabin-product-img-placeholder {
  width:100%; height:96px;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.chabin-product-info { padding:9px; }
.chabin-product-name {
  font-size:11.5px; font-weight:600; color:#1f2937; line-height:1.3; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.chabin-product-price { font-size:13.5px; font-weight:700; color:#e63946; color:var(--chabin-primary,#e63946); margin-bottom:7px; }
.chabin-product-see {
  display:block; text-align:center; text-decoration:none;
  padding:5px; border-radius:7px; font-size:11.5px; font-weight:600;
  background:#e63946; background:var(--chabin-primary,#e63946); color:#fff;
  transition:opacity var(--ch-dur);
}
.chabin-product-see:hover { opacity:.88; }

/* ── MOBILE ── */
@media (max-width: 600px) {
  .chabin-window {
    position:fixed; bottom:0; left:0; right:0;
    width:100%; height:72vh; max-height:72vh;
    border-radius:18px 18px 0 0;
    transform-origin:bottom center;
  }
  .chabin-toggle {
    position:fixed; bottom:18px; right:18px;
    left:auto;
  }
  .chabin-pos-bottom-left .chabin-toggle {
    right:auto; left:18px;
  }
}