/* ============================================================================
   TENDER — Procurement Intelligence Dossier
   Warm paper / editorial aesthetic. Fraunces (display) · Hanken Grotesk (body)
   · JetBrains Mono (data). Mobile-first; desktop fills width via dense grids.
   ============================================================================ */
:root{
  /* palette matched to Galileo (apps/galileo) */
  --bg:#fafaf7; --bg-2:#f3f1ea;
  --surface:#ffffff; --surface-2:#f1efe8; --surface-3:#ebe8df;
  --ink:#0e1b1f; --ink-soft:#2d3b40; --muted:#8b9499;
  --line:#e6e3da; --line-soft:#efece4;
  --accent:#0f7466; --accent-deep:#0a5a4f; --accent-wash:#d8ece8;
  --gold:#ff7a2e; --green:#5a8f43; --green-wash:#e2efd9; --amber:#d8590f; --amber-wash:#ffe5d2;
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Outfit',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --r:16px; --r-sm:12px; --r-xs:8px;
  --shadow:0 1px 3px rgba(14,27,31,.04), 0 8px 22px rgba(14,27,31,.08);
  --shadow-sm:0 1px 2px rgba(14,27,31,.05);
  --nav-w:250px; --topbar-h:60px; --bottom-h:62px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--bg); font-size:15px; line-height:1.5;
  font-feature-settings:"tnum","ss01"; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(15,116,102,.05), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(255,122,46,.05), transparent 50%);
}
a{color:var(--accent-deep); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}

/* ---------- App shell ---------- */
.shell{position:relative; z-index:1; min-height:100vh}
@media (min-width:980px){ .shell{display:grid; grid-template-columns:var(--nav-w) 1fr} }

/* ---------- Sidebar (desktop) ---------- */
.sidebar{display:none}
@media (min-width:980px){
  .sidebar{
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
    border-right:1px solid var(--line); background:linear-gradient(180deg,var(--surface-2),var(--bg-2));
    padding:22px 16px; gap:6px;
  }
  .brand{display:flex; align-items:baseline; gap:9px; padding:4px 10px 18px; border-bottom:1px solid var(--line); margin-bottom:14px}
  .brand b{font-family:var(--f-display); font-weight:600; font-size:25px; letter-spacing:-.01em; font-optical-sizing:auto}
  .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); align-self:center}
  .brand small{margin-left:auto; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); align-self:center}
  .navlink{
    display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm);
    color:var(--ink-soft); font-weight:500; font-size:14.5px; transition:.15s;
  }
  .navlink:hover{background:var(--surface); color:var(--ink); text-decoration:none}
  .navlink .ic{width:19px; height:19px; flex:none; opacity:.7}
  .navlink.active{background:var(--ink); color:var(--surface)}
  .navlink.active .ic{opacity:1}
  .navlink .badge{margin-left:auto; font-family:var(--f-mono); font-size:11px; background:var(--surface-3); color:var(--ink-soft); padding:1px 7px; border-radius:20px}
  .navlink.active .badge{background:rgba(255,255,255,.16); color:#fff}
  .sidebar .navlink.nav-chat:not(.active) .ic{color:var(--accent); opacity:1}
  .sidebar .foot{margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); font-size:11px; color:var(--muted)}
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  height:var(--topbar-h); padding:0 16px; background:rgba(250,250,247,.86);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line);
}
.topbar .m-brand{display:flex; align-items:baseline; gap:7px; font-family:var(--f-display); font-weight:600; font-size:21px}
.topbar .m-brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent); align-self:center}
@media (min-width:980px){ .topbar .m-brand{display:none} }
.search{flex:1; max-width:520px; position:relative; margin-left:auto}
/* Mobile: the global search dominates the header & duplicates each list's own filter — hide it. */
@media (max-width:979px){ .topbar .search{display:none} .topbar{justify-content:space-between} }
.search input{
  width:100%; padding:9px 14px 9px 36px; border:1px solid var(--line); border-radius:30px;
  background:var(--surface); font-size:15px; color:var(--ink); transition:.15s;
}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted)}
.topbar .pill{display:none; font-size:11px; color:var(--muted); font-family:var(--f-mono); padding:5px 11px; border:1px solid var(--line); border-radius:30px; white-space:nowrap}
@media (min-width:720px){ .topbar .pill{display:inline} }

/* ---------- Main ---------- */
main{padding:22px 18px calc(var(--bottom-h) + 28px); max-width:1500px}
@media (min-width:980px){ main{padding:30px 36px 48px} }
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-head h1{font-family:var(--f-display); font-optical-sizing:auto; font-weight:550; font-size:clamp(27px,4.5vw,40px); letter-spacing:-.02em; line-height:1.02; margin:0}
.page-head .sub{color:var(--muted); font-size:13.5px; margin-top:5px; max-width:60ch}
.eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; margin-bottom:7px}

/* ---------- Section header ---------- */
.sec-head{display:flex; align-items:center; gap:12px; margin:8px 0 14px}
.sec-head h2{font-family:var(--f-display); font-weight:550; font-size:19px; margin:0; letter-spacing:-.01em; white-space:nowrap}
.sec-head .rule{flex:1; height:1px; background:var(--line)}
.sec-head a{font-size:12.5px; font-weight:600; white-space:nowrap}

/* ---------- KPI stat cards ---------- */
.stats{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:26px}
@media (min-width:720px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px 15px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.stat.green::before{background:var(--green)} .stat.gold::before{background:var(--gold)} .stat.ink::before{background:var(--ink)}
.stat .k{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat .v{font-family:var(--f-display); font-optical-sizing:auto; font-weight:560; font-size:clamp(26px,3.6vw,34px); line-height:1.05; margin-top:7px; letter-spacing:-.02em}
.stat .v small{font-size:14px; color:var(--ink-soft); font-family:var(--f-body); font-weight:600}
.stat .d{font-size:11.5px; color:var(--ink-soft); margin-top:5px; font-family:var(--f-mono)}
.stat .d .up{color:var(--green); font-weight:700}

/* ---------- Dashboard layout ---------- */
@media (min-width:1280px){ .dash{display:grid; grid-template-columns:1.55fr .9fr; gap:26px; align-items:start} }
.grid-side{display:grid; gap:22px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden}
.panel+.panel{margin-top:22px}
.panel .ph{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft)}
.panel .ph h3{font-family:var(--f-display); font-weight:550; font-size:16.5px; margin:0}
.panel .ph .tag{margin-left:auto}
.panel .pb{padding:6px 8px 8px}

/* ---------- Ranked Top-5 list ---------- */
.ranklist{display:flex; flex-direction:column}
.rankrow{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:12px 10px; border-radius:var(--r-sm); transition:.12s}
.rankrow+.rankrow{border-top:1px solid var(--line-soft)}
.rankrow:hover{background:var(--surface-2)}
.rankrow .rk{font-family:var(--f-display); font-weight:560; font-size:23px; color:var(--accent); text-align:center; line-height:1; font-optical-sizing:auto}
.rankrow .ti{min-width:0}
.rankrow .ti a{color:var(--ink); font-weight:600; font-size:14px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rankrow .ti a:hover{color:var(--accent-deep)}
.rankrow .mt{font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rankrow .amt{font-family:var(--f-mono); font-size:12.5px; font-weight:600; text-align:right; white-space:nowrap}
.rankrow .amt .sc{display:block; font-size:10px; color:var(--green); font-weight:700; margin-top:2px}

/* ---------- Filter toolbar ---------- */
.toolbar{
  position:sticky; top:var(--topbar-h); z-index:20; display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding:13px; margin-bottom:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
}
.toolbar .fsearch{flex:1 1 200px; position:relative; min-width:150px}
.toolbar .fsearch input{width:100%; padding:9px 12px 9px 32px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); font-size:14.5px; color:var(--ink)}
.toolbar .fsearch svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted)}
.toolbar select{
  appearance:none; padding:9px 30px 9px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238b9499' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;
  font-size:14px; color:var(--ink); cursor:pointer; font-family:inherit;
}
.toolbar select:focus,.toolbar .fsearch input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.toolbar .vtoggle{display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-left:auto}
.toolbar .vtoggle button{padding:8px 11px; background:var(--surface-2); border:none; cursor:pointer; color:var(--muted); display:flex; align-items:center}
.toolbar .vtoggle button.on{background:var(--ink); color:var(--surface)}
.toolbar .count{font-family:var(--f-mono); font-size:12px; color:var(--muted); padding:0 4px; white-space:nowrap}

/* ---------- Opportunity cards ---------- */
.cards{display:grid; gap:15px; grid-template-columns:1fr}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1480px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{
  position:relative; display:flex; flex-direction:column; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:15px 16px 14px; box-shadow:var(--shadow-sm);
  transition:.16s; border-left:3px solid var(--line); min-width:0; overflow:hidden;
}
.card *{min-width:0}
.card h4{overflow-wrap:anywhere}
.card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.card.v-cocok{border-left-color:var(--green)} .card.v-ragu{border-left-color:var(--amber)} .card.v-tidak{border-left-color:var(--line)}
.card .ctop{display:flex; align-items:center; gap:8px; justify-content:space-between}
.card .pagu{font-family:var(--f-mono); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--ink)}
.card h4{font-family:var(--f-display); font-optical-sizing:auto; font-weight:560; font-size:16px; line-height:1.22; margin:0; letter-spacing:-.01em}
.card h4 a{color:var(--ink)} .card h4 a:hover{color:var(--accent-deep)}
.card .inst{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:5px}
.card .inst svg{width:12px;height:12px;opacity:.6;flex:none}
.card .inst span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .inst.sub{font-size:11.5px; color:var(--muted); margin-top:-3px}
.card .sum{font-size:12.8px; color:var(--ink-soft); line-height:1.5}
.card .meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto; padding-top:4px}
.card .links{display:flex; gap:14px; padding-top:9px; margin-top:2px; border-top:1px solid var(--line-soft)}
.card .links a{font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px}
.card .links a.pdf{color:var(--accent)}

/* tags / badges */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:30px; background:var(--surface-3); color:var(--ink-soft); white-space:nowrap}
.tag.year{font-family:var(--f-mono); font-weight:500}
.score{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-weight:700; font-size:12.5px; padding:3px 9px 3px 8px; border-radius:30px}
.score::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.score.cocok{background:var(--green-wash); color:var(--green)}
.score.ragu{background:var(--amber-wash); color:var(--amber)}
.score.tidak{background:var(--surface-3); color:var(--muted)}

/* ---------- Table view ---------- */
.tablewrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:auto; box-shadow:var(--shadow-sm)}
table.dt{width:100%; border-collapse:collapse; font-size:13.5px; min-width:780px}
table.dt th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface-2); cursor:pointer; white-space:nowrap;
}
table.dt th:hover{color:var(--ink)}
table.dt th .ar{font-size:9px; color:var(--accent)}
table.dt td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.dt tr:last-child td{border-bottom:none}
table.dt tbody tr:hover{background:var(--surface-2)}
table.dt td.num{font-family:var(--f-mono); font-weight:600; text-align:right; white-space:nowrap}
table.dt td .tt{font-weight:600; color:var(--ink)} table.dt td .tt a{color:var(--ink)}
table.dt td .ii{font-size:11.5px; color:var(--muted)}

/* ---------- buttons / misc ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--ink); background:var(--ink); color:var(--surface); font-weight:600; font-size:14px; cursor:pointer; transition:.15s}
.btn:hover{background:var(--accent); border-color:var(--accent); text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn:disabled{opacity:.55; cursor:default}
.btn .ic{width:16px;height:16px}
.empty{text-align:center; color:var(--muted); padding:48px 20px; font-size:14px; border:1px dashed var(--line); border-radius:var(--r); background:var(--surface)}
.empty b{display:block; font-family:var(--f-display); font-size:18px; color:var(--ink-soft); margin-bottom:6px; font-weight:550}
.skel{height:150px; border-radius:var(--r); background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%); background-size:200% 100%; animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- category breakdown bars ---------- */
.bars{display:flex; flex-direction:column; gap:11px; padding:10px 6px}
.bar .lbl{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px}
.bar .lbl span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .lbl .n{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); font-weight:600; flex:none}
.bar .track{height:7px; border-radius:6px; background:var(--surface-3); overflow:hidden}
.bar .fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--gold))}

/* ---------- settings form ---------- */
.formcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; max-width:680px; box-shadow:var(--shadow-sm)}
.formcard label{display:block; margin-bottom:18px; font-weight:600; font-size:13.5px; color:var(--ink-soft)}
.formcard input,.formcard textarea{
  display:block; width:100%; margin-top:7px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:15px; font-family:inherit; color:var(--ink);
}
.formcard textarea{font-size:13.5px; line-height:1.5; resize:vertical}
.formcard input:focus,.formcard textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.formcard small{font-weight:400; color:var(--muted); font-size:12px}
#aistatus{font-size:13px; font-weight:600; margin-bottom:16px}
#setmsg,#proxymsg{font-size:13px; margin-top:10px; color:var(--ink-soft)}

/* ---------- live status strip (compact + dismissible) ---------- */
#statusbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bottom-h) + 10px); z-index:50;
  width:calc(100% - 24px); max-width:420px; background:var(--ink); color:#f3ece0; border-radius:14px;
  padding:9px 12px; box-shadow:0 14px 34px -14px rgba(0,0,0,.5); font-size:12.5px;
}
@media (min-width:980px){ #statusbar{bottom:20px; left:auto; right:24px; transform:none; max-width:360px} }
/* never let the live-crawl strip cover the chat screen */
body[data-page="asisten"] #statusbar{display:none!important}
#statusbar .st-head{font-weight:600; display:flex; gap:7px; align-items:center; padding-right:20px}
#statusbar .st-counts{font-family:var(--f-mono); font-size:10.5px; opacity:.7; margin-top:4px}
#statusbar .st-log{margin-top:5px; font-size:10.5px; opacity:.6; font-family:var(--f-mono); max-height:30px; overflow:hidden; line-height:1.45}
#statusbar .st-x{position:absolute; top:6px; right:8px; width:22px; height:22px; border:none; background:rgba(255,255,255,.12);
  color:#f3ece0; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center}

/* ---------- mobile bottom nav (5 slots: 4 primary + Lainnya; Asisten centered & coloured) ---------- */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; height:var(--bottom-h);
  background:rgba(250,250,247,.95); backdrop-filter:blur(14px) saturate(1.3); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a, .bottomnav .morebtn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:9.5px; font-weight:600; background:none; border:none; cursor:pointer;
  font-family:inherit; padding:0;
}
.bottomnav a .ic, .bottomnav .morebtn .ic{width:21px;height:21px}
.bottomnav a.active, .bottomnav .morebtn.active{color:var(--accent-deep)}
.bottomnav a:hover{text-decoration:none}
/* Asisten = prominent centered chip (coloured on desktop + mobile) */
.bottomnav a.nav-chat{position:relative}
.bottomnav a.nav-chat .ic{
  width:46px; height:46px; padding:11px; margin-top:-20px; border-radius:16px; color:#fff;
  background:var(--accent); box-shadow:0 8px 20px -6px var(--accent); border:3px solid var(--bg,#fafaf7);
}
.bottomnav a.nav-chat{color:var(--accent-deep)}
@media (min-width:980px){ .bottomnav{display:none} }

/* ---------- "Lainnya" sheet (overflow nav) ---------- */
.moresheet{position:fixed; inset:0; z-index:70}
.moresheet[hidden]{display:none}
.moresheet-bg{position:absolute; inset:0; background:rgba(20,18,14,.4); backdrop-filter:blur(2px)}
.moresheet-panel{position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:20px 20px 0 0;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -14px 40px -16px rgba(0,0,0,.4);
  animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.moresheet-grip{width:38px; height:4px; border-radius:3px; background:var(--line); margin:2px auto 14px}
.moresheet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.moresheet-grid a{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px; border-radius:14px;
  background:var(--surface-2); color:var(--ink-soft); font-size:11.5px; font-weight:600; text-align:center}
.moresheet-grid a .ic{width:22px; height:22px}
.moresheet-grid a.active{background:var(--accent); color:#fff}
@media (min-width:980px){ .moresheet{display:none!important} }

/* ---------- Asisten chat screen ---------- */
.chatwrap{display:flex; flex-direction:column; min-height:0}
.chatbar{display:flex; gap:8px; align-items:center; margin:0 0 12px; flex-wrap:wrap}
.chatbar .btn{padding:8px 12px; font-size:13px}
.chatbar .spacer{flex:1}
.sessions-drawer{max-height:0; overflow:hidden; transition:max-height .22s ease; margin-bottom:0}
.sessions-drawer.open{max-height:46vh; overflow-y:auto; margin-bottom:12px}
.session-pill{display:flex; align-items:center; gap:8px; padding:11px 12px; margin-bottom:7px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-2); cursor:pointer; font-size:13.5px}
.session-pill.active{border-color:var(--accent); background:var(--accent-wash)}
.session-pill .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.session-pill .x{border:none; background:none; color:var(--muted); cursor:pointer; font-size:15px; padding:2px 4px}
.typing-dots{display:inline-flex; gap:5px; align-items:center; padding:4px 2px}
.typing-dots i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.3s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}
.typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25; transform:scale(.85)}30%{opacity:1; transform:scale(1)}}
/* on mobile the chat fills the screen between topbar and bottom nav; input pinned */
@media (max-width:979px){
  body[data-page="asisten"] main{padding:12px 14px 0; display:flex; flex-direction:column;
    height:calc(100dvh - var(--topbar-h) - var(--bottom-h) - env(safe-area-inset-bottom))}
  body[data-page="asisten"] .page-head{margin-bottom:10px}
  body[data-page="asisten"] .page-head .sub{display:none}
  .asisten{display:flex; flex-direction:column; flex:1; min-height:0}
  .chatlog{flex:1; max-height:none; min-height:0}
  .chatform{position:sticky; bottom:0; background:var(--bg,#fafaf7); padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* ---------- mobile filter toolbar: compact, horizontal-scroll, less dominant ---------- */
@media (max-width:979px){
  .toolbar{gap:7px; padding:9px 0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .toolbar .fsearch{flex:1 0 60%}
  .toolbar select{flex:0 0 auto; font-size:13px; padding:8px 9px}
  .toolbar .count{order:5}
  .page-head h1{font-size:clamp(24px,7vw,30px)}
  .page-head .sub{font-size:12.5px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---- Asisten (chat) ---- */
.chatlog{display:flex;flex-direction:column;gap:10px;min-height:46vh;max-height:64vh;overflow:auto;
  padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
.msg{padding:10px 13px;border-radius:14px;max-width:82%;white-space:pre-wrap;line-height:1.5;font-size:14.5px}
.msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.chatform{display:flex;gap:8px;margin-top:12px}
.chatform input{flex:1;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:var(--f-body)}
.chatform input:focus{outline:none;border-color:var(--accent)}
.chatform .btn{padding:0 18px}

/* ---- pagination ---- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:18px 0 4px}
.pager .pg{padding:6px 11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:9px;font-size:13px;cursor:pointer;font-family:var(--f-body)}
.pager .pg.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .pg:disabled{opacity:.4;cursor:default}
.pager .gap{color:var(--muted);padding:0 2px}
.pager .pgmeta{color:var(--muted);font-size:12px;margin-left:8px}
/* ---- delete button on cards/rows ---- */
button.del{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;
  cursor:pointer;font-size:13px;padding:3px 8px;line-height:1}
button.del:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
button.del:disabled{opacity:.4;cursor:default}