/* Root variables */
:root {
  --lcw-green: #06C755;
  --lcw-dark: #1f2937;
  --lcw-light: #f3f4f6;
  --lcw-radius: 16px;
  --lcw-shadow: 0 10px 25px rgba(0,0,0,.18);
  --lcw-z: 9999;
}

.lcw-fab {
  position: fixed;
  bottom: 16px;
  z-index: var(--lcw-z);
  width: 56px; height: 56px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--lcw-green); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--lcw-shadow); transition: transform .12s ease, filter .12s ease; outline: none;
}
.lcw-fab:focus-visible { outline: 3px solid #a7f3d0; outline-offset: 2px; }
.lcw-fab:hover { transform: translateY(-1px); filter: brightness(1.04); }
.lcw-fab .lcw-fab-icon {
  width: 28px; height: 28px; display: inline-block;
  background: radial-gradient(circle at 12px 12px, #fff 0 13px, transparent 14px),
              radial-gradient(circle at 18px 12px, #fff 0 13px, transparent 14px),
              radial-gradient(circle at 24px 12px, #fff 0 13px, transparent 14px);
  border-radius: 6px;
}

/* Panel */
.lcw-panel {
  position: fixed;
  bottom: 84px;
  width: 360px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: var(--lcw-radius);
  box-shadow: var(--lcw-shadow); overflow: hidden; z-index: var(--lcw-z); display: none;
  animation: none;
}
.lcw-panel.open { display: block; animation: lcw-pop .14s ease-out; }
@keyframes lcw-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.lcw-header { background: var(--lcw-dark); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.lcw-logo { width: 24px; height: 24px; background: rgba(255,255,255,.12); border-radius: 6px; display: inline-block; }
.lcw-title { font-size: 15px; font-weight: 700; line-height: 1; }
.lcw-sub { font-size: 12px; opacity: .8; }
.lcw-close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 18px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.lcw-close:hover { background: rgba(255,255,255,.08); }

.lcw-body { padding: 14px; background: var(--lcw-light); }
.lcw-msgs { height: 260px; overflow: auto; padding: 4px; display: grid; gap: 8px; }
.lcw-bubble { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-break: break-word; }
.lcw-bubble.bot { background: #fff; border: 1px solid #e5e7eb; color: #111827; border-top-left-radius: 4px; }
.lcw-bubble.user { background: var(--lcw-green); color: #fff; margin-left: auto; border-top-right-radius: 4px; }

.lcw-promo { display: grid; gap: 10px; background: #fff; border: 1px dashed #d1fae5; padding: 12px; border-radius: 12px; }
.lcw-promo h4 { margin: 0; font-size: 14px; }
.lcw-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.lcw-btn { appearance: none; border: 0; border-radius: 12px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
.lcw-btn-primary { background: var(--lcw-green); color: #fff; }
.lcw-btn-light { background: #f9fafb; color: #111827; border: 1px solid #e5e7eb; }

.lcw-footer { padding: 10px 14px; background: #fff; display: grid; gap: 8px; border-top: 1px solid #f3f4f6; }
.lcw-helper { font-size: 12px; color: #6b7280; }

.lcw-qrcode { display: none; place-items: center; padding: 10px; }
.lcw-qrcode img { width: 160px; height: 160px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }

@media (max-width: 420px) {
  .lcw-body { padding: 12px; }
  .lcw-msgs { height: 220px; }
}