/* ============================================================
   BizBot — App data-state primitives  (Pixel 2026-06-10; +empty L4 2026-06-14)
   Two theme-agnostic primitives for the data lifecycle of any app screen:
     • SKELETON — shimmer placeholders while data loads
         <div class="skel skel-row"></div>  (or skel-line/-card/-circle)
     • EMPTY — one designed empty/zero state (icon + title + body + CTA):
         <div class="app-empty">
           <div class="app-empty__icon"><svg…/></div>
           <p class="app-empty__title">No reviews yet</p>
           <p class="app-empty__body">Paste a review to draft an AI reply.</p>
           <div class="app-empty__cta"><button class="btn">…</button></div>
         </div>
   Both inherit the page's text color; tint the empty icon chip with
   --bb-empty-accent. App design-uplift L4 (flagged 16/16 verticals).
   ============================================================ */
.skel{position:relative;overflow:hidden;background:rgba(127,127,127,.14);border-radius:6px;color:transparent !important;pointer-events:none;user-select:none}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-100%);animation:skel-shimmer 1.4s ease-in-out infinite}
@keyframes skel-shimmer{100%{transform:translateX(100%)}}
.skel-line{display:block;height:.9em;margin:.4em 0;border-radius:4px}
.skel-row{display:block;height:48px;margin:10px 0;border-radius:10px}
.skel-card{display:block;height:120px;border-radius:14px}
.skel-circle{border-radius:50%}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* Empty / zero state — one shared component across all app screens. */
.app-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 24px}
.app-empty__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;margin-bottom:14px;background:rgba(127,127,127,.12);color:var(--bb-empty-accent,currentColor)}
.app-empty__icon svg,.app-empty__icon .bbi{width:26px;height:26px}
.app-empty__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.3}
.app-empty__body{margin:6px 0 0;font-size:.9rem;line-height:1.55;opacity:.66;max-width:44ch}
.app-empty__cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}