/* ===== PC Shopper Chat (widget + admin) ===== */
/* Theme variables (fallbacks if Bootstrap vars missing) */
:root{
  --pcchat-primary: var(--bs-primary, #0d6efd);
  --pcchat-primary-contrast: #fff;
  --pcchat-bg: #fff;
  --pcchat-surface: #fff;
  --pcchat-elev: 0 12px 30px rgba(0,0,0,.15);
  --pcchat-border: #eee;
  --pcchat-muted: #6c757d;
  --pcchat-neutral: #f5f6f8;

  /* Layout tokens */
  --pcchat-radius: 14px;
  --pcchat-max-w: 420px;         /* desktop width */
  --pcchat-max-h: min(80vh, 680px);
  --pcchat-gap: 8px;
}

/* ---------- Reset helpers ---------- */
#pcchat *, #pcchat *::before, #pcchat *::after { box-sizing: border-box; }

/* ---------- Floating Action Button ---------- */
.pcchat-fab{
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0));
  bottom: max(12px, env(safe-area-inset-bottom, 0));
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1210; box-shadow: 0 10px 24px rgba(0,0,0,.2); padding: 0;
}
.pcchat-fab .icon{ font-size: 20px; line-height: 1; }

/* ---------- Panel container ---------- */
#pcchat{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0));
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  width: min(92vw, var(--pcchat-max-w));
  max-width: 92vw;
  z-index: 1200;
}
#pcchat.pcchat-collapsed{ display: none; }

/* Card as a column flexbox so the middle area grows/shrinks automatically */
#pcchat .pcchat-card{
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--pcchat-radius);
  overflow: hidden;
  box-shadow: var(--pcchat-elev);
  background: var(--pcchat-surface);
  width: 100%;
  max-height: var(--pcchat-max-h);
}

/* Header */
#pcchat .pcchat-close{ position:absolute; top:8px; right:8px; }
#pcchat .pcchat-header{
  position: relative;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--pcchat-border); background:var(--pcchat-surface);
}
#pcchat .pcchat-title{ font-weight:600; font-size:14px; color:#222; }
#pcchat .pcchat-sub{ font-size:12px; color: var(--pcchat-muted); }

/* ---------- Message list (flex child) ---------- */
#pcchat .pcchat-body{
  flex: 1 1 auto;
  min-height: 0; /* critical for proper flex scrolling */
  overflow-y: auto;
  padding: 12px;
  background: var(--pcchat-bg);
  scroll-behavior: smooth;
}
#pcchat .pcchat-msg{ display:flex; gap:var(--pcchat-gap); margin:8px 0; }
#pcchat .pcchat-msg.me{ justify-content:flex-end; }
#pcchat .pcchat-bubble{
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--pcchat-radius);
  background: var(--pcchat-neutral);
  border: 1px solid var(--pcchat-border);
  color: #222;
  word-break: break-word;
}
#pcchat .pcchat-msg.me .pcchat-bubble{
  background: var(--pcchat-primary);
  color: var(--pcchat-primary-contrast);
  border-color: transparent;
}
#pcchat .pcchat-bubble a{ color: inherit; text-decoration: underline; }
#pcchat .pcchat-meta{ font-size: 12px; opacity: .8; margin-bottom: 4px; }

/* ---------- Composer ---------- */
#pcchat .pcchat-footer{
  border-top: 1px solid var(--pcchat-border);
  padding: 10px;
  background: var(--pcchat-surface);
}
#pcchat .pcchat-actions{ display:flex; gap:8px; margin-top:8px; align-items:center; }
#pcchat .pcchat-small{ font-size:12px; color: var(--pcchat-muted); }

/* ---------- Scrollbar (nice but optional) ---------- */
#pcchat .pcchat-body::-webkit-scrollbar{ width: 10px; }
#pcchat .pcchat-body::-webkit-scrollbar-track{ background: transparent; }
#pcchat .pcchat-body::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px; }
#pcchat .pcchat-body:hover::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); }

/* ---------- Mobile-first responsiveness ---------- */
@media (max-width: 575.98px){
  .pcchat-fab{
    right: max(8px, env(safe-area-inset-right, 0));
    bottom: max(8px, env(safe-area-inset-bottom, 0));
  }
  #pcchat{
    inset: auto 0 0 0; /* stick to bottom on mobile */
    right: 0; left: 0; bottom: 0;
    width: 100%;
  }
  #pcchat .pcchat-card{
    max-height: calc(100svh - 88px - env(safe-area-inset-bottom, 0)); /* room for FAB & safe area */
    border-radius: 14px 14px 0 0;
  }
  #pcchat .pcchat-body{ padding: 12px; }
}

/* Short landscapes (e.g., iPhone landscape) — use nearly-full height */
@media (max-height: 420px) and (orientation: landscape){
  #pcchat .pcchat-card{ max-height: calc(100svh - 24px); }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px){
  :root{ --pcchat-max-w: 420px; --pcchat-max-h: min(80vh, 720px); }
  #pcchat{ right: calc(16px + env(safe-area-inset-right, 0)); bottom: calc(84px + env(safe-area-inset-bottom, 0)); }
}

/* Desktops and up */
@media (min-width: 992px){
  :root{ --pcchat-max-w: 440px; --pcchat-max-h: min(82vh, 760px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #pcchat .pcchat-body{ scroll-behavior: auto; }
}

/* ===================================================================== */
/* =============== Admin (UBold) chat message bubbles =================== */
/* ===================================================================== */
.conversation-list{ list-style:none; margin:0; padding:0; }
.conversation-list .ctext-wrap{
  background: var(--pcchat-neutral);
  border-radius: 10px;
  padding: 8px 12px;
  color: #222;
}
.conversation-list li.odd .ctext-wrap{
  background: var(--pcchat-primary);
  color: var(--pcchat-primary-contrast);
}
.conversation-list .ctext-wrap i{
  display:block; font-style:normal; font-weight:600; font-size:12px; opacity:.85; margin-bottom:2px;
}
.conversation-list .ctext-wrap a{ color: inherit; text-decoration: underline; }

/* (Optional) minimal non-widget fallback to match bubbles if CSS is isolated) */
.pcchat-body { padding:10px; }
.pcchat-msg { display:flex; margin:8px 0; }
.pcchat-msg .pcchat-bubble { max-width:80%; background:#f5f6f8; border-radius:14px; padding:8px 12px; color:#222; }
.pcchat-msg.me { justify-content:flex-end; }
.pcchat-msg.me .pcchat-bubble { background:#0d6efd; color:#fff; }
.pcchat-meta { font-size:12px; opacity:.8; margin-bottom:4px; }