/* ═══════════════════════════════════════════════════════════════
   Provider IQ — Styles
   Matches AgoraIQ dashboard design system (Syne + DM Mono, dark)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page tabs ──────────────────────────────────────────────── */
.piq-tabs { display:flex; gap:2px; margin-bottom:24px; }
.piq-tab {
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-family:'Syne',sans-serif; font-size:12px;
  font-weight:700; cursor:pointer; padding:8px 16px;
  letter-spacing:.04em; text-transform:uppercase; transition:all .2s;
}
.piq-tab:hover { color:var(--text); }
.piq-tab.active { background:var(--bg3); border-bottom-color:var(--cyan); color:var(--cyan); }

/* ── Provider card (leaderboard row) ────────────────────────── */
.piq-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:16px 20px; margin-bottom:10px; cursor:pointer; transition:all .2s;
}
.piq-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-1px); }
.piq-card-head { display:flex; align-items:center; gap:16px; }
.piq-rank {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(167,139,250,.15));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--cyan); font-family:'DM Mono',monospace;
}
.piq-info { flex:1; min-width:0; }
.piq-name { font-weight:700; font-size:14px; color:var(--text); }
.piq-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.piq-stats {
  display:flex; gap:16px; font-size:11px; font-family:'DM Mono',monospace;
  color:var(--text); flex-shrink:0;
}
.piq-stats .lbl { color:var(--muted); }
.piq-ai-row { margin-top:10px; display:flex; align-items:center; gap:8px; }
.piq-ai-text { font-size:11px; color:var(--text); font-style:italic; flex:1; }

/* ── Pill / Badge ───────────────────────────────────────────── */
.piq-pill {
  display:inline-flex; align-items:center; gap:4px; border-radius:5px;
  padding:2px 8px; font-size:10px; font-family:'DM Mono',monospace;
  font-weight:500; letter-spacing:.05em; line-height:16px;
}

/* ── Metric card ────────────────────────────────────────────── */
.piq-metric {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; text-align:center;
}
.piq-metric-label { font-size:10px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; }
.piq-metric-value { font-size:22px; font-weight:800; font-family:'DM Mono',monospace; }
.piq-metric-sub { font-size:10px; color:var(--muted); margin-top:4px; }

/* ── Section card ───────────────────────────────────────────── */
.piq-section {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:18px 22px; margin-bottom:16px;
}
.piq-section-label {
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px;
}

/* ── Grid layouts ───────────────────────────────────────────── */
.piq-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.piq-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:768px) {
  .piq-grid-4 { grid-template-columns:repeat(2,1fr); }
  .piq-grid-3 { grid-template-columns:1fr; }
  .piq-card-head { flex-wrap:wrap; }
  .piq-stats { margin-top:8px; }
  .piq-detail-header { flex-direction:column; }
}
@media(max-width:480px) {
  .piq-grid-4 { grid-template-columns:1fr; }
}

/* ── Weight breakdown bar ───────────────────────────────────── */
.piq-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.piq-bar-label { width:140px; font-size:11px; color:var(--muted); flex-shrink:0; }
.piq-bar-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; flex:1; }
.piq-bar-fill { height:100%; border-radius:3px; transition:width 1s ease; }
.piq-bar-val { width:36px; font-size:11px; font-family:'DM Mono',monospace; text-align:right; }

/* ── Compare table ──────────────────────────────────────────── */
.piq-table { width:100%; border-collapse:collapse; font-size:12px; font-family:'DM Mono',monospace; }
.piq-table th {
  text-align:left; padding:8px 10px; color:var(--muted);
  border-bottom:1px solid var(--border); font-weight:600;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
}
.piq-table td { padding:8px 10px; border-bottom:1px solid rgba(30,34,53,.5); }
.piq-table tr { cursor:pointer; transition:background .15s; }
.piq-table tr:hover { background:var(--bg3); }
.piq-table .provider-name { font-weight:700; font-family:'Syne',sans-serif; }

/* ── Detail header ──────────────────────────────────────────── */
.piq-detail-header { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-bottom:20px; }
.piq-detail-info { flex:1; }
.piq-detail-name { font-size:20px; font-weight:800; margin-bottom:6px; }
.piq-detail-desc { font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.6; }
.piq-detail-badges { display:flex; gap:6px; flex-wrap:wrap; }
.piq-detail-pairs { display:flex; gap:6px; flex-wrap:wrap; }

/* ── Back button ────────────────────────────────────────────── */
.piq-back {
  background:none; border:none; color:var(--cyan); cursor:pointer;
  font-size:12px; font-family:'Syne',sans-serif; padding:0; margin-bottom:16px;
}
.piq-back:hover { text-decoration:underline; }

/* ── Elite gate ─────────────────────────────────────────────── */
.piq-gate {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:40px 24px; text-align:center;
}
.piq-gate-icon { font-size:32px; margin-bottom:12px; }
.piq-gate-title { font-size:16px; font-weight:700; margin-bottom:6px; color:var(--text); }
.piq-gate-desc { font-size:12px; color:var(--muted); max-width:360px; margin:0 auto 20px; line-height:1.6; }
.piq-gate-btn {
  display:inline-block; background:var(--cyan); color:var(--bg);
  border:none; border-radius:8px; padding:10px 28px; font-weight:700;
  font-size:13px; text-decoration:none; cursor:pointer;
  font-family:'Syne',sans-serif;
}
.piq-gate-btn:hover { opacity:.9; }

.piq-upgrade-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(245,158,11,.08); color:var(--amber);
  border:1px solid rgba(245,158,11,.2); border-radius:6px;
  padding:4px 12px; font-size:10px; font-family:'DM Mono',monospace;
  font-weight:500; text-decoration:none; letter-spacing:.04em;
}
.piq-upgrade-cta:hover { background:rgba(245,158,11,.14); }

/* ── AI button ──────────────────────────────────────────────── */
.piq-ai-btn {
  background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.2);
  border-radius:6px; color:var(--cyan); font-size:10px; padding:4px 10px;
  cursor:pointer; font-family:'DM Mono',monospace; font-weight:500;
  transition:all .15s;
}
.piq-ai-btn:hover { background:rgba(0,212,255,.15); }
.piq-ai-btn:disabled { opacity:.5; cursor:wait; }
.piq-ai-btn.large { font-size:11px; padding:6px 14px; }

/* ── Loading / empty ────────────────────────────────────────── */
.piq-loading, .piq-empty, .piq-error {
  text-align:center; padding:40px; font-size:13px;
}
.piq-loading { color:var(--muted); }
.piq-empty { color:var(--muted); }
.piq-error { color:var(--red); }

/* ── Animation ──────────────────────────────────────────────── */
@keyframes piqFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.piq-fade { animation: piqFadeUp .35s ease both; }

/* ── AI Drawer ─────────────────────────────────────────────── */
.piq-drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:900;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.piq-drawer-overlay.open { opacity:1; pointer-events:auto; }

.piq-drawer {
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw;
  background:var(--bg2); border-left:1px solid var(--border);
  z-index:910; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:-8px 0 40px rgba(0,0,0,.5);
}
.piq-drawer.open { transform:translateX(0); }

.piq-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 16px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.piq-drawer-title {
  font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
  color:var(--cyan); text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:8px;
}
.piq-drawer-title .icon { font-size:16px; }
.piq-drawer-close {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--muted); font-size:16px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; font-family:sans-serif;
}
.piq-drawer-close:hover { color:var(--text); border-color:var(--muted); background:var(--bg3); }

.piq-drawer-provider {
  padding:16px 22px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.piq-drawer-provider-name {
  font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px;
}
.piq-drawer-provider-meta {
  display:flex; gap:12px; font-size:11px; font-family:'DM Mono',monospace;
  color:var(--muted); flex-wrap:wrap;
}
.piq-drawer-provider-meta .val { color:var(--text); font-weight:500; }

.piq-drawer-body {
  flex:1; overflow-y:auto; padding:22px;
}

.piq-drawer-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:40px 20px; color:var(--muted); font-size:12px;
}
@keyframes piqPulse {
  0%,100% { opacity:.3; } 50% { opacity:1; }
}
.piq-drawer-loading .pulse-ring {
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--cyan); opacity:.4;
  animation: piqPulse 1.5s ease-in-out infinite;
}
.piq-drawer-loading .pulse-text {
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.05em;
  animation: piqPulse 1.5s ease-in-out infinite;
}

.piq-drawer-insight {
  font-size:16px; color:var(--text); line-height:1.9;
  white-space:pre-wrap; animation: piqFadeUp .3s ease both;
}
.piq-drawer-insight .insight-label {
  font-size:9px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px;
  display:flex; align-items:center; gap:6px;
}
.piq-drawer-insight .insight-label .dot {
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
}
.piq-drawer-error {
  color:var(--red); font-size:12px; text-align:center; padding:20px;
}
.piq-drawer-actions {
  padding:16px 22px; border-top:1px solid var(--border); flex-shrink:0;
  display:flex; gap:8px;
}
.piq-drawer-retry {
  background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.2);
  border-radius:8px; color:var(--cyan); font-size:11px; padding:8px 16px;
  cursor:pointer; font-family:'DM Mono',monospace; font-weight:500;
  transition:all .15s; flex:1; text-align:center;
}
.piq-drawer-retry:hover { background:rgba(0,212,255,.15); }
.piq-drawer-powered {
  font-size:9px; color:var(--muted); text-align:center; padding:0 22px 14px;
  letter-spacing:.04em; flex-shrink:0;
}

@media(max-width:480px) {
  .piq-drawer { width:100vw; max-width:100vw; }
}