/* Telegram-like theme color */
:root{
  --wcpb-primary: #0088cc;
  --wcpb-bg: #ffffff;
  --wcpb-muted: #9aa4ae;
  --wcpb-radius: 14px;
  --wcpb-shadow: 0 10px 30px rgba(3,12,26,0.12);
}

/* Container */
#wc-perfume-bot{ position: fixed; bottom: 20px; left: 20px; z-index: 999999; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial; }
/* Floating round button */
#wcpb-toggle{
  width:56px;height:56px;border-radius:50%;border:none;background:var(--wcpb-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.18);cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s;
}
#wcpb-toggle:active{ transform: scale(.96); }
#wcpb-toggle svg{ display:block; }

/* Panel */
#wcpb-panel{
  width:360px; max-width:calc(100vw - 40px); height:520px; background:var(--wcpb-bg); border-radius:var(--wcpb-radius); box-shadow:var(--wcpb-shadow); overflow:hidden; display:flex; flex-direction:column; transform-origin:bottom left; transform: translateY(10px) scale(.98); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .22s;
}
#wcpb-panel.open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
#wcpb-header{ display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f1f3f5;background:linear-gradient(90deg, rgba(0,136,204,0.06), rgba(0,0,0,0)); }
.wcpb-title{ font-weight:600;color:#0b2b3b; }
#wcpb-close{ background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--wcpb-muted);padding:6px;border-radius:8px; }
#wcpb-close:hover{ background:rgba(0,0,0,0.04); color:#333; }

/* Messages area */
#wcpb-messages{ padding:16px; height:360px; overflow:auto; display:flex; flex-direction:column; gap:12px; background: #fbfdff; }
.wcpb-message{ max-width:85%; padding:10px 12px; border-radius:12px; line-height:1.3; box-shadow:0 2px 6px rgba(12,18,26,0.04); }
.wcpb-bot{ background: linear-gradient(180deg,#f4fbff,#ecf8ff); color:#053b4f; align-self:flex-start; border-top-left-radius:6px; }
.wcpb-user{ background: var(--wcpb-primary); color: #fff; align-self:flex-end; }

/* Actions */
#wcpb-actions{ padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start; border-top:1px solid #f1f3f5; }
.wcpb-btn{ background: #f1f5f8; color:#0b2b3b; padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:600; transition:transform .14s,box-shadow .14s; }
.wcpb-btn:active{ transform: translateY(1px) scale(.995); }
.wcpb-btn.primary{ background:var(--wcpb-primary); color:#fff; box-shadow: 0 6px 18px rgba(0,136,204,0.18); }
.wcpb-btn.ghost{ background:transparent;border:1px solid #e6eef6;color:var(--wcpb-primary); }

/* Thumbnails grid 2 columns */
.wcpb-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:6px 0; }
.wcpb-card{ background:#fff;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #f1f5f9; box-shadow: 0 6px 18px rgba(3,12,26,0.04); }
.wcpb-card img{ width:100%; height:110px; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.wcpb-card .title{ font-size:13px; color:#08303f; margin-bottom:6px; min-height:36px; }
.wcpb-card .price{ font-size:13px; color:#6b7a83; margin-bottom:8px; }
.wcpb-card .action{ width:100%; }
.wcpb-card .action a{ display:inline-block; width:100%; text-decoration:none; text-align:center; padding:8px 10px; border-radius:8px; background:#000; color:#fff; font-weight:700; }

/* Responsive tweaks */
@media (max-width:480px){
  #wc-perfume-bot{ left:12px; bottom:12px; }
  #wcpb-panel{ width:100%; left:0; right:0; bottom:80px; height:68vh; border-radius:12px 12px 0 0; max-width:100%; }
  .wcpb-card img{ height:100px; }
  .wcpb-title{ font-size:15px; }
  #wcpb-toggle{ width:52px;height:52px; }
}

/* small animations for buttons */
.wcpb-anim-press{ transform: translateY(2px) scale(.995); transition: transform .12s ease; }