/* ============================================================
   liquid.css — LIQUID GLASS layer (storefront · load after compact.css)
   Smooth frosted-glass surfaces · living gradient backdrop ·
   polished chat bubbles · notification badges.
   Blur is applied ONLY to the few surfaces where it pays off
   (header, drawers, modals) and is fully disabled on .lite
   devices — so it stays FAST.  Purely additive — delete to revert.
   ============================================================ */

/* ---------- Living gradient backdrop (GPU-cheap, one layer) ---------- */
body{position:relative}
body::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 45% at 12% 8%,  rgba(124,104,255,.16), transparent 62%),
    radial-gradient(40% 45% at 88% 12%, rgba(56,189,248,.13),  transparent 62%),
    radial-gradient(46% 50% at 50% 96%, rgba(244,114,182,.10), transparent 62%),
    linear-gradient(180deg,#f6f7fc 0%,#f2f4fb 100%);
  animation:lqDrift 26s ease-in-out infinite alternate;
}
@keyframes lqDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(2.5%,-2%,0) scale(1.05)}
}
.lite body::before{animation:none;transform:none}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---------- Frosted surfaces ---------- */
.hdr{
  background:rgba(255,255,255,.66) !important;
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 24px rgba(31,41,90,.06);
}
.drawer{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-left:1px solid rgba(255,255,255,.7);
  box-shadow:-12px 0 48px rgba(31,41,90,.14);
}
.modal{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 64px rgba(31,41,90,.20), inset 0 1px 0 rgba(255,255,255,.85);
}
.overlay{background:rgba(30,36,66,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Cards & panels — translucent glass WITHOUT blur (fast to paint) */
.card,.order-card,.panel,.summary-box{
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(31,41,90,.06), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:14px;
}
.pgrid .card:hover{box-shadow:0 8px 26px rgba(31,41,90,.11)}

/* Inputs — soft inset glass */
.field input,.field select,.field textarea,.search-box input,.search-box select,.cmp-reply-in{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field textarea:focus,.search-box input:focus,.cmp-reply-in:focus{
  border-color:var(--brand,#6b57ff);
  box-shadow:0 0 0 3px rgba(107,87,255,.14);
  outline:none;
}
.subnav{background:rgba(255,255,255,.5)}
.subnav-inner a{background:rgba(255,255,255,.75);border-color:rgba(148,163,184,.3)}

/* Buttons — smooth, subtle sheen */
.btn{transition:filter .15s, box-shadow .18s, transform .12s}
.btn-amber,.btn-primary{box-shadow:0 4px 14px rgba(107,87,255,.28), inset 0 1px 0 rgba(255,255,255,.28)}
.btn-amber:active,.btn-primary:active{transform:scale(.98)}

/* Slim elegant scrollbars */
.chat-scroll::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:5px}
.chat-scroll::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{background:rgba(107,87,255,.30);border-radius:99px}
.chat-scroll{scrollbar-width:thin;scroll-behavior:smooth}

/* ---------- Chat / complaint thread bubbles ---------- */
.msg-row{display:flex;margin-bottom:10px;animation:msgIn .22s ease both}
.msg-row.from-me{justify-content:flex-end}
.msg-row.from-admin{justify-content:flex-start}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lite .msg-row{animation:none}

.msg-bubble{
  max-width:82%;padding:9px 13px 10px;font-size:13px;line-height:1.45;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 4px rgba(31,41,90,.07), inset 0 1px 0 rgba(255,255,255,.7);
}
.from-admin .msg-bubble{
  background:linear-gradient(140deg, rgba(124,104,255,.14), rgba(124,104,255,.07));
  border-radius:5px 15px 15px 15px;
}
.from-me .msg-bubble{
  background:rgba(255,255,255,.85);
  border-radius:15px 5px 15px 15px;
}
.msg-meta{font-size:10.5px;color:#8b93ab;margin-bottom:4px;font-weight:600;letter-spacing:.01em}
.msg-body{white-space:pre-wrap;word-break:break-word;color:#28304d}

.chat-composer{display:flex;gap:8px;margin-top:8px}
.chat-composer .cmp-reply-in{flex:1;padding:11px 14px;font-size:13.5px;min-height:44px}

/* Complaint wizard bot bubbles get matching glass */
.cw-bot > div:last-child, .summary-box{border-radius:5px 15px 15px 15px}

/* ---------- Notification badges ---------- */
.unread-pill{
  display:inline-block;margin-left:7px;padding:2px 8px;vertical-align:1px;
  background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.02em;border-radius:999px;
  box-shadow:0 2px 8px rgba(239,68,68,.35);
  animation:pillPulse 1.8s ease-in-out infinite;
}
@keyframes pillPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.lite .unread-pill{animation:none}

/* red dot + count injected by boost.js on header/bottom-nav buttons */
.nav-dot{
  position:absolute;top:-3px;right:-7px;min-width:16px;height:16px;line-height:16px;
  padding:0 4px;border-radius:999px;background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;font-size:9.5px;font-weight:800;text-align:center;
  box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(239,68,68,.4);
  animation:pillPulse 1.8s ease-in-out infinite;
}
.lite .nav-dot{animation:none}

/* ---------- Compact padding polish on the complaint UIs ---------- */
.order-card{padding:15px 16px}
.modal-head{padding-bottom:4px}
.modal-body{padding-top:10px}
@media (max-width:760px){
  .msg-bubble{max-width:90%}
  .order-card{padding:13px 12px}
}