/* ============================================================
   liquid-admin.css — LIQUID GLASS layer for /admin + /console
   (load after compact-admin.css).  Frosted sidebar/topbar/modals,
   glass panels & KPIs, chat bubbles, notification badges.
   Blur limited to key surfaces; disabled on .lite. Additive.
   ============================================================ */

/* Living gradient backdrop */
body{position:relative}
body::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 45% at 8% 6%,   rgba(124,104,255,.14), transparent 62%),
    radial-gradient(40% 45% at 92% 14%, rgba(56,189,248,.11),  transparent 62%),
    radial-gradient(46% 50% at 55% 98%, rgba(52,211,153,.09),  transparent 62%),
    linear-gradient(180deg,#f5f6fb 0%,#f1f3fa 100%);
  animation:lqDrift 28s 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 chrome */
.sidebar{
  background:rgba(255,255,255,.68) !important;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-right:1px solid rgba(255,255,255,.7);
}
.topbar{
  background:rgba(255,255,255,.66) !important;
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.65);
}
.modal{
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.78);
  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)}

/* Glass panels / KPIs (no blur — fast) */
.panel,.card,.kpi,.summary-box{
  background:rgba(255,255,255,.76) !important;
  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);
}
.kpi{border-radius:13px}
.kpi:hover{box-shadow:0 6px 22px rgba(31,41,90,.10)}
.panel-head{background:rgba(255,255,255,.4)}

/* Nav — smooth pill highlight */
.nav-item{position:relative;transition:background .15s,color .15s}
.nav-item.on{
  background:linear-gradient(135deg, rgba(124,104,255,.16), rgba(124,104,255,.09));
  box-shadow:inset 0 0 0 1px rgba(124,104,255,.22);
}

/* Inputs */
input,select,textarea{
  background:rgba(255,255,255,.82);
  border-radius:11px;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand,#6b57ff) !important;
  box-shadow:0 0 0 3px rgba(107,87,255,.13);outline:none;
}

/* Buttons */
.btn-primary,.btn-amber{box-shadow:0 4px 14px rgba(107,87,255,.26), inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:scale(.98)}

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

/* ---------- Chat bubbles (complaint modal) ---------- */
.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:84%;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-me .msg-bubble{
  background:linear-gradient(140deg, rgba(124,104,255,.16), rgba(124,104,255,.08));
  border-radius:15px 5px 15px 15px;
}
.from-admin .msg-bubble{
  background:rgba(255,255,255,.88);
  border-radius:5px 15px 15px 15px;
}
.msg-meta{font-size:10.5px;color:#8b93ab;margin-bottom:4px;font-weight:600}
.msg-body{white-space:pre-wrap;word-break:break-word;color:#28304d}

/* ---------- 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;border-radius:999px;
  box-shadow:0 2px 8px rgba(239,68,68,.35);
  animation:pillPulse 1.8s ease-in-out infinite;
}
.nav-badge{
  margin-left:auto;min-width:19px;height:19px;line-height:19px;padding:0 5px;
  border-radius:999px;background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;font-size:10.5px;font-weight:800;text-align:center;
  box-shadow:0 2px 8px rgba(239,68,68,.4);
  animation:pillPulse 1.8s ease-in-out infinite;
}
.nav-item.has-new{
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.35);
  background:linear-gradient(135deg, rgba(239,68,68,.07), rgba(249,115,22,.05));
}
@keyframes pillPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.lite .unread-pill,.lite .nav-badge{animation:none}

/* Compact polish for the complaint editor modal */
.summary-box .summary-row{padding:5px 0}
.field label{margin-bottom:5px;font-weight:600;color:#3d4568}
.field{margin-bottom:12px}