/* ═══════════════ widget replica (from frontend/chat-widget.css) ═══════════════ */

.w-panel {
  position: relative; width: 380px; height: 610px;
  border-radius: 16px; background: #f3f3f3; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1);
  display: flex; flex-direction: column;
  font-family: var(--font); font-size: 14px; line-height: 1.5; color: #1f2227;
  text-align: left;
}

.w-gradient {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  background: linear-gradient(125.67deg, var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);
}
.w-gradient.chat-mode { height: 70px; }

.w-header {
  position: relative; z-index: 2; height: 70px; flex: 0 0 70px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px; color: #fff;
}
.w-logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.w-hbtns { margin-left: auto; display: flex; align-items: center; }
.w-hbtn { width: 32px; height: 32px; display: grid; place-items: center; }

.w-messages {
  position: relative; z-index: 1; flex: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 20px 16px;
  background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
}

/* bubbles */
.w-msg { max-width: 84%; font-size: 14px; }
.w-msg.user {
  align-self: flex-end; background: rgba(35, 44, 104, 0.1);
  border-radius: 8px; padding: 10px 12px; color: #232c68;
  line-height: 18px; text-align: right;
}
.w-msg.assistant, .w-msg.operator {
  align-self: flex-start; background: #fff; border-radius: 8px;
  padding: 13px 14px 11px; color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.w-msg.wide { max-width: 96%; }
.w-msg.operator { background: #f0fdf4; }
.w-name { font-size: 14px; font-weight: 700; color: #232c68; letter-spacing: -0.02em; }
.w-name.op { color: #059669; }
.w-msg p { line-height: 1.5; }
.w-msg strong { color: #232c68; } .w-msg.operator strong { color: #065f46; }
.w-msg em { font-style: normal; color: #232c68; font-weight: 600; }

/* typing dots */
.w-dots { display: flex; gap: 5px; padding: 4px 2px 6px; }
.w-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: #9ca3af;
  animation: w-bounce 1.4s infinite;
}
.w-dots span:nth-child(2) { animation-delay: 0.2s; }
.w-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes w-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-7px); }
}
/* typing bubbles / takeover cards live inside a .swap — their replacement
   crossfades into the same spot, so no display:none layout snap is needed */

/* products table */
.w-products {
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid #f3f4f6;
}
.w-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.w-ptable thead th {
  background: linear-gradient(135deg, #f8f9fa, #f3f4f6);
  border-bottom: 2px solid #e5e7eb;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b7280; text-align: left; padding: 8px 10px;
}
.w-ptable th:first-child { width: 64%; }
.w-prow td {
  padding: 7px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151;
  vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-prow td:first-child { display: flex; align-items: center; gap: 9px; }
.w-thumb { width: 32px; height: 32px; border-radius: 6px; flex: 0 0 32px; }
.th-1 { background: repeating-linear-gradient(90deg, #22335c 0 7px, #e8e2d4 7px 12px); }
.th-2 { background: repeating-linear-gradient(45deg, #d9c9a8 0 6px, #c2ab82 6px 10px, #e6dcc4 10px 15px); }
.th-3 { background: repeating-linear-gradient(-45deg, #2e6e6a 0 5px, #dfe9e5 5px 9px, #96bdb6 9px 13px); }
.w-pname {
  font-size: 13px; font-weight: 500; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-pexp td { padding: 0; background: #fafbfc; }
.w-pexp-inner { padding: 8px 12px 10px; border-bottom: 1px solid #f3f4f6; }
.w-sku { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; margin-bottom: 5px; }
.w-stock { color: #059669; font-weight: 600; }
.w-pdesc { font-size: 12.5px; line-height: 1.45; color: #4b5563; margin-bottom: 8px; }
.w-viewbtn {
  display: inline-block; background: #232c68; color: #fff;
  padding: 7px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}

/* night-chat time chip */
.w-time {
  align-self: center; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: #1f2937; color: #e5e7eb; border-radius: 999px; padding: 4px 13px;
}

/* quick replies */
.w-quickreplies {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  align-self: stretch; padding: 0 2px;
}
.w-qr {
  background: #1772e8; color: #fff; border-radius: 20px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 4px rgba(23, 114, 232, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: transform 0.2s ease, background 0.2s ease;
}
.w-qr:hover { background: #125be3; }

/* KB source chip */
.w-source {
  display: inline-block; align-self: flex-start;
  font-size: 11.5px; font-weight: 500; color: #1772e8;
  background: rgba(23, 114, 232, 0.08); border: 1px solid rgba(23, 114, 232, 0.2);
  padding: 4px 10px; border-radius: 6px;
}

/* lead form */
.w-leadform {
  align-self: stretch; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column; gap: 6px;
}
.w-lf-title { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.w-lf-label { font-size: 12px; font-weight: 500; color: #374151; }
.w-lf-input {
  border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 10px;
  font-size: 13.5px; color: #1f2227; min-height: 33px; margin-bottom: 4px;
  background: #fff;
}
.typefill {
  display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0;
  transition: max-width 1s steps(24, end);
}
.typefill.on { max-width: 100%; }
.w-lf-note { font-size: 10.5px; font-style: italic; color: #6b7280; margin: 2px 0 6px; }
.w-lf-submit {
  display: block; text-align: center; background: #232c68; color: #fff;
  padding: 9px; border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}

/* lead success — overlays the bottom of the message area so it takes no flow space */
.w-leadsuccess {
  position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 3;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 22px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.w-ls-title { font-size: 19px; font-weight: 600; color: #059669; }
.w-ls-sub { font-size: 13px; color: #4b5563; }

/* takeover */
.w-takeover {
  align-self: flex-start; max-width: 88%;
  background: #f5f9ff; border: 1px solid #e1ecff; border-radius: 8px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: #374151;
}
.w-tk-btns { display: flex; gap: 8px; }
.w-tk-yes {
  background: #1772e8; color: #fff; padding: 8px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.w-tk-no {
  background: #e5e5e5; color: #1c1c1c; padding: 8px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.w-tk-loading {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4b5563;
  flex-wrap: wrap;
}
.w-tk-bar {
  flex-basis: 100%; height: 3px; background: #e5e7eb; border-radius: 2px; overflow: hidden;
}
.w-tk-bar i { display: block; height: 100%; width: 100%; background: #1772e8; border-radius: 2px; }
.on > .w-tk-bar i, .w-tk-loading.on .w-tk-bar i { animation: w-shrink 8s linear forwards; }
@keyframes w-shrink { from { width: 100%; } to { width: 12%; } }

.w-spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(23, 114, 232, 0.25); border-top-color: #1772e8;
  animation: w-spin 1s linear infinite; display: inline-block; flex: 0 0 13px;
}
.w-spinner.dark { border-color: rgba(35, 44, 104, 0.2); border-top-color: #232c68; }
@keyframes w-spin { to { transform: rotate(360deg); } }

/* operator banner */
.w-operatorbanner {
  position: absolute; top: 70px; left: 0; right: 0; z-index: 5;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; font-size: 13.5px; padding: 11px 16px;
  display: flex; align-items: center; gap: 9px;
}
.w-operatorbanner[data-beat] { transform: translateY(-12px); }
.w-operatorbanner[data-beat].on { transform: none; }
.w-ob-icon { font-size: 16px; }
.w-panel:has(.w-operatorbanner.on) .w-messages { padding-top: 62px; transition: padding-top 0.4s var(--ease); }

/* input bar + footer */
.w-inputbar {
  position: relative; z-index: 1; flex: 0 0 78px;
  background: #fff; border-top: 1px solid rgba(35, 44, 104, 0.05);
  display: flex; align-items: center; padding: 0 14px;
}
.w-input {
  flex: 1; height: 50px; display: flex; align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0 44px 0 16px; font-size: 14px; color: #1f2227; opacity: 0.75;
}
.w-send {
  position: absolute; right: 22px; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer;
}
.w-footer {
  position: relative; z-index: 1; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-top: 1px solid rgba(35, 44, 104, 0.08);
  font-size: 11px; color: #6b7280;
}
.w-footer strong { margin-left: 3px; color: #374151; }