/* report.css v23 — dynamic polish added
   - sticky + blurred toolbar with shadow on scroll
   - chart-card hover lift + soft gradient sheen
   - scroll-edge fades for chart area & AI pane
   - animated chat bubbles
   (All rules are scoped to #reports / no DOM changes)
*/

/* ==== Base (your original, unchanged) ==== */

.as-app #reports{
  display:flex; flex-direction:column; gap:12px;
  height:100%; padding:12px 18px 16px;
  background:#f8fafc; color:var(--ink); font-family:var(--font-ui);
  overflow:hidden;
}

/* toolbar (single row) */
.as-app #reports .rep-top.tbl-tools{
  display:grid; grid-template-columns:minmax(84px,auto) minmax(260px,1fr) auto auto;
  align-items:center; gap:12px;
  background:#fbfdff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:10px 12px; border-radius:var(--radius);
}
.as-app #reports .rep-top .lbl{font-weight:700;font-size:14px}
.as-app #reports #dash-pick.inp{min-width:260px}

/* chart area + AI card container */
.as-app #dash-area{ flex:1 1 auto; overflow-y:auto; padding-right:4px; }
.as-app #ai-pane.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column;
  max-height:36vh; overflow:hidden;
}

/* grid/cards */
.as-app #reports .chart-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 12px 6px; display:flex; flex-direction:column;
}
.as-app #reports .chart-box{ height:160px; }
.as-app #reports .chart-card canvas{ width:100% !important; height:100% !important; display:block; }
.as-app #reports .chart-card p{ margin-top:6px; font-size:13px; font-weight:700 }

/* AI thread: left/right bubbles */
#ai-scroll{
  flex:1 1 auto; overflow:auto; padding-right:6px;
  display:flex; flex-direction:column; gap:8px;
}
.req-bubble{ max-width:64%; font-size:14px; line-height:1.4; padding:8px 12px; border-radius:14px; }
.req-bubble.bot{
  align-self:flex-start; background:#f8fafc; border:1px solid #e5e7eb;
}
.req-bubble.me{
  align-self:flex-end; background:#e0f2fe; border:1px solid #bae6fd; color:#0f172a;
}
.req-bubble .ai-head{ font-weight:700; margin-bottom:6px; color:#0f172a; }
.req-bubble .ai-bullets{ margin:0; padding-left:18px; }
.req-bubble .ai-bullets li{ margin:4px 0 }

/* typing indicator */
.req-bubble .typing span{
  width:6px; height:6px; display:inline-block; margin-right:4px; border-radius:50%;
  background:#94a3b8; animation:dot 1s infinite ease-in-out;
}
.req-bubble .typing span:nth-child(2){animation-delay:.15s}
.req-bubble .typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* chat input bar */
#rq-wrap{
  position:sticky; bottom:0; left:0; right:0; display:flex; gap:8px; padding-top:10px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
#rq-input.inp{ flex:1 }

/* modal */
#rep-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:3000}
#rep-modal.show{display:flex}
#rep-modal .card{position:relative;background:#fff;border-radius:8px;padding:16px;max-width:720px;width:clamp(320px,72vw,720px)}
#rep-modal .close{all:unset;cursor:pointer;font-size:20px;position:absolute;top:8px;right:12px;color:#64748b}
#rep-modal table.mini{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px}
#rep-modal table.mini th,#rep-modal table.mini td{border:1px solid #e2e8f0;padding:4px;text-align:center}
#rep-modal table.mini thead{background:#f1f5f9}

/* scrollbars (module only) */
.as-app #dash-area::-webkit-scrollbar,
.as-app #ai-pane::-webkit-scrollbar{ width:6px }
.as-app #dash-area::-webkit-scrollbar-thumb,
.as-app #ai-pane::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px }

/* ==== Dynamic polish (append-only) ==== */

/* Sticky, blurred toolbar with shadow when the grid scrolls */
.as-app #reports .rep-top.tbl-tools{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(120%) blur(6px);
}
.as-app #reports.scrolled .rep-top.tbl-tools{
  box-shadow:0 10px 18px -16px rgba(2,6,23,.45);
}

/* Chart cards — lift + gentle sheen on hover */
.as-app #reports .chart-card{
  position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  background:
    radial-gradient(900px 420px at -10% -20%, rgba(14,165,233,.06), transparent 60%),
    var(--surface);
}
.as-app #reports .chart-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.05);
  border-color:color-mix(in srgb, var(--brand) 30%, var(--line));
}
.as-app #reports .chart-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0 70%, rgba(255,255,255,.5) 75%, transparent 82%);
  opacity:.0; transition:opacity .2s ease;
}
.as-app #reports .chart-card:hover::after{ opacity:.35 }

/* Scroll-edge fades (top/bottom) for the chart grid */
.as-app #dash-area{ position:relative }
.as-app #dash-area::before,
.as-app #dash-area::after{
  content:""; position:absolute; left:0; right:0; height:12px; pointer-events:none; transition:opacity .18s ease;
}
.as-app #dash-area::before{ top:0;  background:linear-gradient(to bottom, #f8fafc, rgba(248,250,252,0)); opacity:0 }
.as-app #dash-area::after { bottom:0;background:linear-gradient(to top,    #f8fafc, rgba(248,250,252,0)); opacity:1 }
.as-app #dash-area.scrolled::before{ opacity:1 }   /* show top fade once scrolled */
.as-app #dash-area.at-end::after   { opacity:0 }   /* hide bottom fade at end    */

/* The AI pane gets the same edge fades (attach class via JS) */
.as-app #ai-pane{ position:relative }
.as-app #ai-pane::before,
.as-app #ai-pane::after{
  content:""; position:absolute; left:0; right:0; height:10px; pointer-events:none; transition:opacity .18s ease;
}
.as-app #ai-pane::before{ top:48px; background:linear-gradient(to bottom,#ffffff,rgba(255,255,255,0)); opacity:0 } /* below input edge */
.as-app #ai-pane::after { bottom:0;  background:linear-gradient(to top,   #ffffff,rgba(255,255,255,0)); opacity:1 }
.as-app #ai-pane.scrolled::before{ opacity:1 }
.as-app #ai-pane.at-end::after   { opacity:0 }

/* Chat bubbles: subtle entrance animation */
@keyframes bubbleIn{ from{ transform:translateY(4px) scale(.98); opacity:.0 } to{ transform:none; opacity:1 } }
.req-bubble{ animation:bubbleIn .22s ease-out both }

/* Small screens: keep spacing tight */
@media (max-width:720px){
  .as-app #reports .chart-box{ height:140px }
}