/* FILE: css/extras.css — skeletons, draw-in charts, bottom sheets, pull-to-refresh, WhatsApp bill (loaded after effects.css) */

html, body { overscroll-behavior-y: contain; }

/* ---------- Skeleton loaders ---------- */
.skeleton { position: relative; overflow: hidden; background: #e8edf3; border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer { to { transform: translateX(100%); } }
html.dark .skeleton { background: #1b2436; }
html.dark .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
tbody tr.sk-row, tbody tr.sk-row:hover { background: none !important; box-shadow: none !important; }

/* ---------- Sparklines / draw-in charts ---------- */
.fx-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: fxDraw 1.1s cubic-bezier(.65,0,.35,1) forwards; animation-delay: var(--d, 0s); }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }
.fx-area { opacity: 0; animation: fxFade .8s ease forwards; animation-delay: calc(var(--d, 0s) + .55s); }
@keyframes fxFade { to { opacity: 1; } }
.fx-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fxPop .35s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(var(--d, 0s) + .95s); }
@keyframes fxPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.fx-bar { transform-origin: left center; transform: scaleX(0); animation: fxBar .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes fxBar { to { transform: scaleX(1); } }
.no-anim .fx-draw { animation: none; stroke-dashoffset: 0; }
.no-anim .fx-area, .no-anim .fx-dot { animation: none; opacity: 1; }
html.dark .ch-hot { fill: #131b2c; }

/* ---------- Bottom sheets (mobile) ---------- */
.app-modal { opacity: 0; transition: opacity .25s ease; }
.app-modal.modal-open { opacity: 1; }
@media (max-width: 639px) {
  .app-modal { align-items: flex-end; }
  .app-modal .modal-panel {
    position: relative; width: 100%;
    transform: translateY(100%); opacity: 1;
    border-radius: 22px 22px 0 0;
    max-height: 90vh; max-height: 90dvh;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .34s cubic-bezier(.32,.72,0,1);
    will-change: transform;
    box-shadow: 0 -18px 50px -18px rgba(2,8,23,.5);
  }
  .app-modal.modal-open .modal-panel { transform: translateY(0); opacity: 1; }
  .app-modal .modal-panel::before {
    content: ""; position: absolute; z-index: 3; top: 6px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px; border-radius: 99px;
    background: #cbd5e1; pointer-events: none;
  }
  html.dark .app-modal .modal-panel::before { background: #3a4760; }
  #confirm-backdrop > div { animation: sheetUp .3s cubic-bezier(.32,.72,0,1); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Pull-to-refresh ---------- */
#ptr {
  position: fixed; z-index: 115; left: 50%; top: env(safe-area-inset-top, 0px);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #0D9488; opacity: 0; pointer-events: none;
  box-shadow: 0 6px 18px -4px rgba(15,23,42,.35);
  transform: translate(-50%, -50px);
}
html.dark #ptr { background: #1b2436; color: #5EEAD4; }
#ptr.spin svg { animation: spin .7s linear infinite; }

/* ---------- WhatsApp ---------- */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  color: #16a34a; background: rgba(34,197,94,.12);
  transition: transform .15s ease, background-color .15s ease;
}
.wa-btn:hover { background: rgba(34,197,94,.22); }
.wa-btn:active { transform: scale(.92); }
.wa-primary { background: linear-gradient(135deg, #25D366, #128C7E) !important; box-shadow: 0 8px 20px -8px rgba(18,140,126,.8); }
.wa-bubble {
  background: #dcf8c6; color: #0f172a; border-radius: 12px 12px 12px 2px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
html.dark .wa-bubble { background: #054640; color: #e5f5ef; }

@media (prefers-reduced-motion: reduce) {
  .fx-draw { animation: none; stroke-dashoffset: 0; }
  .fx-area, .fx-dot { animation: none; opacity: 1; }
  .fx-bar { animation: none; transform: none; }
  .skeleton::after { animation: none; }
  .app-modal .modal-panel { transition: none; }
}

/* ---------- Hamburger drawer (mobile) ---------- */
#menu-drawer-backdrop { opacity: 0; transition: opacity .25s ease; }
#menu-drawer.drawer-open #menu-drawer-backdrop { opacity: 1; }
.drawer-panel { transform: translateX(-100%); transition: transform .28s cubic-bezier(.32,.72,0,1); }
#menu-drawer.drawer-open .drawer-panel { transform: translateX(0); }

/* Drawer: let JS handle horizontal swipes, keep vertical scrolling native */
.drawer-panel { touch-action: pan-y; overscroll-behavior: contain; }
#menu-drawer-backdrop { touch-action: none; }