/* ─── Redwop AI Assistant — Frontend Chat UI v2.0 ──────────────────────────── */

/* ─── Reset scoped to widget ───────────────────────────────────────────────── */
.redwop-launcher *, .redwop-panel * {
    box-sizing:border-box; margin:0; padding:0; font-family:inherit;
    -webkit-tap-highlight-color:transparent;
}

/* ─── Launcher button ──────────────────────────────────────────────────────── */
.redwop-launcher {
    position:fixed; z-index:2147483640;
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    box-shadow:0 4px 20px rgba(0,0,0,.22);
    font-size:15px; font-weight:600; letter-spacing:.01em;
    outline:none;
}
.redwop-launcher:hover { transform:scale(1.06) !important; box-shadow:0 6px 28px rgba(0,0,0,.28); }
.redwop-launcher:active { transform:scale(.97) !important; }

/* Positions */
.redwop-launcher.bottom-right { bottom:24px; right:24px; }
.redwop-launcher.bottom-left  { bottom:24px; left:24px; }
.redwop-launcher.top-right    { top:24px;    right:24px; }
.redwop-launcher.top-left     { top:24px;    left:24px; }

/* Bubble style */
.redwop-launcher.style-bubble  {  height:60px; border-radius:50%; padding:20px;}
.redwop-launcher.style-text    { padding:12px 22px; border-radius:30px; }
.redwop-launcher.style-icon-text { padding:12px 22px; border-radius:30px; }

.redwop-launcher-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.redwop-launcher svg  { width:28px; height:28px; fill:currentColor; }
.redwop-launcher-label { font-size:14px; font-weight:600; }
/* Custom launcher image — fills the bubble, rounded */
.redwop-launcher-img {
    width:100%; height:100%;
    object-fit:contain; border-radius:inherit;
    display:block; pointer-events:none;
}
.redwop-launcher.style-bubble .redwop-launcher-icon { width:100%; height:100%; }
.redwop-launcher.style-bubble .redwop-launcher-img  { border-radius:initial; }
.redwop-unread-dot {
    position:absolute; top:-3px; right:-3px;
    width:14px; height:14px; border-radius:50%;
    background:#ef4444; border:2px solid #fff;
    animation:rw-pulse 1.6s ease-in-out infinite;
}
@keyframes rw-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.25);} }

/* ─── Panel ────────────────────────────────────────────────────────────────── */
.redwop-panel {
    position:fixed; z-index:2147483639;
    display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:0 12px 50px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.1);
    transform:scale(.92) translateY(14px); opacity:0;
    pointer-events:none;
    transition:transform .28s cubic-bezier(.34,1.4,.64,1), opacity .22s ease;
}
.redwop-panel.open {
    transform:scale(1) translateY(0); opacity:1; pointer-events:all;
}

/* Panel positions */
.redwop-panel.bottom-right { bottom:24px; right:24px; transform-origin:bottom right; }
.redwop-panel.bottom-left  { bottom:24px; left:24px;  transform-origin:bottom left; }
.redwop-panel.top-right    { top:24px;    right:24px; transform-origin:top right; }
.redwop-panel.top-left     { top:24px;    left:24px;  transform-origin:top left; }

.redwop-launcher.has-custom-icon {
    width: 140px !important;
    height: 140px !important;
}

/* Mobile full-screen */
@media(max-width:520px) {
    .redwop-panel { inset:0 !important; width:100% !important; height:100% !important; border-radius:0 !important; transform-origin:center bottom !important; }
    .redwop-launcher.bottom-right,
    .redwop-launcher.bottom-left  { bottom:16px; }
    .redwop-launcher.bottom-right { right:16px; }
    .redwop-launcher.bottom-left  { left:16px; }
    .redwop-launcher.has-custom-icon {
        width: 120px !important;
        height: 120px !important;
    }
}

.redwop-launcher.panel-open {
    display: none !important;
}

/* ─── Panel header ─────────────────────────────────────────────────────────── */
.redwop-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    flex-shrink:0;
}
.redwop-header-left  { display:flex; align-items:center; gap:12px; }
.redwop-avatar {
    width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:700; overflow:hidden; flex-shrink:0;
}
.redwop-avatar img { width:100%; height:100%; object-fit:cover; }
.redwop-header-title   { font-size:15px; font-weight:700; line-height:1.2; }
.redwop-header-subtitle{ font-size:12px; opacity:.82; margin-top:2px; }
.redwop-close-btn {
    background:rgba(255,255,255,.15); border:none; cursor:pointer;
    width:32px; height:32px; border-radius:50%;
    font-size:18px; display:flex; align-items:center; justify-content:center;
    color:inherit; transition:background .15s;
}
.redwop-close-btn:hover { background:rgba(255,255,255,.28); }

/* ─── Body ─────────────────────────────────────────────────────────────────── */
.redwop-body {
    flex:1; display:flex; flex-direction:column; overflow:hidden;
    background:inherit;
}

/* ─── Welcome ──────────────────────────────────────────────────────────────── */
.redwop-welcome {
    padding:20px 16px 0;
    flex-shrink:0;
}
.redwop-welcome-title {
    font-size:17px; font-weight:700; margin-bottom:6px;
}
.redwop-welcome-subtitle {
    font-size:13px; opacity:.72; line-height:1.5;
}

/* ─── Quick replies — sticky section above composer ────────────────────────── */
.redwop-qr-section {
    flex-shrink:0;
    border-top:1px solid rgba(0,0,0,.07);
    background:inherit;
}
.redwop-qr-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 14px 4px;
    cursor:pointer; user-select:none;
}
.redwop-qr-label {
    font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; opacity:.55;
}
.redwop-qr-toggle {
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer;
    padding:2px; opacity:.55; color:inherit;
    transition:opacity .15s, transform .2s;
    line-height:1;
}
.redwop-qr-toggle:hover { opacity:1; }
.redwop-quick-replies {
    padding:6px 14px 12px; display:flex; flex-wrap:wrap; gap:7px;
    transition:max-height .22s ease, opacity .18s ease;
    max-height:160px; overflow:hidden; opacity:1;
}
/* Collapsed state */
.redwop-qr-section.collapsed .redwop-quick-replies {
    max-height:0; opacity:0; padding-bottom:0;
}
.redwop-qr-btn {
    padding:7px 14px; font-size:12.5px; font-weight:600;
    border-radius:20px; border:2px solid currentColor;
    cursor:pointer; background:transparent;
    transition:background .15s, color .15s;
    white-space:nowrap; line-height:1.3;
}
.redwop-qr-btn:hover { filter:brightness(.93); }

/* ─── Messages ─────────────────────────────────────────────────────────────── */
.redwop-messages {
    flex:1; overflow-y:auto; padding:12px 16px;
    display:flex; flex-direction:column; gap:10px;
    scroll-behavior:smooth;
}
.redwop-messages::-webkit-scrollbar { width:4px; }
.redwop-messages::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

.redwop-msg {
    display:flex; gap:8px; align-items:flex-end; max-width:88%;
    animation:rw-msgIn .22s ease both;
}
@keyframes rw-msgIn { from{opacity:0;transform:translateY(8px);} }
.redwop-msg.bot  { align-self:flex-start; }
.redwop-msg.user { align-self:flex-end; flex-direction:row-reverse; }

.redwop-msg-avatar {
    width:28px; height:28px; border-radius:50%;
    background:rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0;
}
.redwop-msg-bubble {
    padding:10px 14px; border-radius:18px;
    font-size:13.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
    max-width:100%;
}
.redwop-msg.bot  .redwop-msg-bubble { border-bottom-left-radius:4px;  }
.redwop-msg.user .redwop-msg-bubble { border-bottom-right-radius:4px; }

.redwop-msg-time { font-size:10px; opacity:.5; margin-top:3px; text-align:right; }

/* ─── Typing indicator ─────────────────────────────────────────────────────── */
.redwop-typing {
    display:none; align-items:center; gap:8px;
    padding:0 16px 8px; font-size:12px; opacity:.6;
}
.redwop-typing.visible { display:flex; }
.redwop-typing-dots { display:flex; gap:4px; }
.redwop-typing-dots span {
    width:7px; height:7px; border-radius:50%;
    background:currentColor; opacity:.4;
    animation:rw-dot 1.2s ease-in-out infinite;
}
.redwop-typing-dots span:nth-child(2) { animation-delay:.2s; }
.redwop-typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes rw-dot { 0%,80%,100%{transform:scale(.6);opacity:.3;} 40%{transform:scale(1);opacity:1;} }

/* ─── Product section (dismissible strip) ───────────────────────────────────── */
.redwop-product-section {
    flex-shrink:0;
    border-top:1px solid rgba(0,0,0,.06);
    background:inherit;
    animation:rw-msgIn .2s ease both;
}
.redwop-product-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 14px 4px;
}
.redwop-product-bar-label {
    font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; opacity:.55;
}
.redwop-product-dismiss {
    background:none; border:none; cursor:pointer;
    font-size:18px; line-height:1; opacity:.4; color:inherit; padding:0 2px;
    transition:opacity .15s;
}
.redwop-product-dismiss:hover { opacity:.85; }

/* ─── Product cards ─────────────────────────────────────────────────────────── */
.redwop-product-cards {
    display:flex; gap:10px; padding:4px 14px 12px;
    overflow-x:auto; flex-shrink:0;
}
.redwop-product-cards::-webkit-scrollbar { height:3px; }
.redwop-product-cards::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }

.redwop-product-card {
    flex-shrink:0; width:160px; border-radius:12px;
    border:1.5px solid rgba(0,0,0,.09);
    overflow:hidden; cursor:pointer; text-decoration:none;
    transition:transform .2s, box-shadow .2s;
    background:#fff; display:block;
}
.redwop-product-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.11); }
.redwop-product-img {
    width:100%; height:90px;
    background:#f1f5f9; display:flex; align-items:center; justify-content:center;
    border-radius:10px 10px 0 0; overflow:hidden;
}
.redwop-product-img img { width:100%; height:100%; object-fit:cover; display:block; }
.redwop-product-img-placeholder { font-size:28px; }
.redwop-product-info { padding:8px 10px 10px; }
.redwop-product-name  { font-size:12px; font-weight:700; line-height:1.3; color:#0f172a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.redwop-product-sku   { font-size:10px; color:#94a3b8; margin-top:2px; }
.redwop-product-price { font-size:12.5px; font-weight:700; margin-top:4px; }
.redwop-product-cta   { display:inline-block; padding:5px 10px; margin-top:7px; text-align:center; border-radius:6px; font-size:11px; font-weight:600; border:none; cursor:pointer; text-decoration:none; }

/* ─── Lead form ────────────────────────────────────────────────────────────── */
.redwop-lead-form {
    display:none; flex-direction:column; gap:8px;
    padding:12px 16px; overflow-y:auto; max-height:360px;
}
.redwop-lead-form.visible { display:flex; }
.redwop-lead-form-title { font-size:14px; font-weight:700; margin-bottom:4px; }
.redwop-lead-input {
    padding:9px 12px; border-radius:8px; border:1.5px solid rgba(0,0,0,.12);
    font-size:13px; background:#fff; color:#0f172a;
    width:100%; outline:none;
    transition:border-color .15s;
}
.redwop-lead-input:focus { border-color:var(--rw-accent-clr, #2563eb); }
.redwop-lead-submit {
    padding:10px; border-radius:8px; border:none; cursor:pointer;
    font-size:14px; font-weight:700; margin-top:4px; transition:filter .15s;
}
.redwop-lead-submit:hover { filter:brightness(.92); }
.redwop-lead-cancel { text-align:center; font-size:12px; cursor:pointer; opacity:.6; margin-top:2px; }
.redwop-lead-cancel:hover { opacity:1; }

/* ─── Composer ─────────────────────────────────────────────────────────────── */
.redwop-composer {
    display:flex; align-items:center; gap:8px;
    padding:10px 12px;
    border-top:1px solid rgba(0,0,0,.07); flex-shrink:0;
}
.redwop-input-field {
    flex:1; padding:9px 14px; border-radius:24px;
    border:1.5px solid rgba(0,0,0,.1); font-size:13.5px;
    outline:none; background:#fff; transition:border-color .15s;
}
.redwop-input-field:focus { border-color:rgba(0,0,0,.25); }
.redwop-send-btn {
    width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform .15s, filter .15s; font-size:18px;
}
.redwop-send-btn:hover  { filter:brightness(.9); }
.redwop-send-btn:active { transform:scale(.92); }

/* ─── WhatsApp button ──────────────────────────────────────────────────────── */
.redwop-wa-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 12px 10px; padding:10px 16px;
    background:#25d366; color:#fff;
    border-radius:10px; text-decoration:none; font-size:13px; font-weight:600;
    transition:background .15s; flex-shrink:0;
}
.redwop-wa-btn:hover { background:#1ebe5d; color:#fff; }
.redwop-wa-icon { width:20px; height:20px; fill:#fff; }

/* WhatsApp outside (standalone floating button) */
.redwop-wa-float {
    position:fixed; z-index:2147483638;
    width:54px; height:54px; border-radius:50%;
    background:#25d366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 18px rgba(37,211,102,.45);
    text-decoration:none;
    transition:transform .2s, box-shadow .2s;
}
.redwop-wa-float:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,211,102,.55); }
.redwop-wa-float svg { width:30px; height:30px; fill:#fff; }

/* Position float beside launcher */
.redwop-wa-float.bottom-right { bottom:96px; right:26px; }
.redwop-wa-float.bottom-left  { bottom:96px; left:26px; }

/* ─── Footer note ──────────────────────────────────────────────────────────── */
.redwop-footer-note {
    text-align:center; font-size:10.5px; opacity:.45;
    padding:4px 0 8px; flex-shrink:0;
}

/* ─── Link in bot messages ─────────────────────────────────────────────────── */
.redwop-msg-bubble a { text-decoration:underline; opacity:.85; }