/*
 * reviq-renderers.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for the Rev Intel Assist renderer system.
 * Complements your existing ai-chat-ui.css — does not override it.
 *
 * All classes are namespaced with .riq- to avoid collisions.
 *
 * Assumes your drawer background is #0a0f1e (dark navy) and your
 * existing AI bubble uses rgba(30,33,58,0.6) with an indigo border.
 * These styles match that palette exactly.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --riq-bg-card:         rgba(24, 28, 48, 0.85);
  --riq-bg-card-inner:   rgba(255, 255, 255, 0.03);
  --riq-border:          rgba(255, 255, 255, 0.07);
  --riq-border-accent:   rgba(99, 88, 230, 0.35);

  --riq-text-primary:    rgba(255, 255, 255, 0.88);
  --riq-text-secondary:  rgba(255, 255, 255, 0.45);
  --riq-text-muted:      rgba(255, 255, 255, 0.25);

  /* Tier colours — ranking bars */
  --riq-strong:          #10b981;   /* emerald */
  --riq-strong-bg:       rgba(16, 185, 129, 0.12);
  --riq-strong-border:   rgba(16, 185, 129, 0.25);
  --riq-strong-text:     #6ee7b7;

  --riq-mid:             #6358e6;   /* indigo */
  --riq-mid-bg:          rgba(99, 88, 230, 0.12);
  --riq-mid-border:      rgba(99, 88, 230, 0.25);
  --riq-mid-text:        #a5a0f5;

  --riq-weak:            #ef4444;   /* red */
  --riq-weak-bg:         rgba(239, 68, 68, 0.12);
  --riq-weak-border:     rgba(239, 68, 68, 0.25);
  --riq-weak-text:       #fca5a5;

  /* Delta colours — comparison table */
  --riq-delta-pos:       #10b981;
  --riq-delta-pos-bg:    rgba(16, 185, 129, 0.08);
  --riq-delta-neg:       #ef4444;
  --riq-delta-neg-bg:    rgba(239, 68, 68, 0.08);

  /* Recommendation callout */
  --riq-rec-bg:          rgba(245, 158, 11, 0.08);
  --riq-rec-border:      rgba(245, 158, 11, 0.22);
  --riq-rec-text:        #fbbf24;
  --riq-rec-label:       rgba(251, 191, 36, 0.55);

  /* Insight callout */
  --riq-insight-bg:      rgba(99, 88, 230, 0.07);
  --riq-insight-border:  rgba(99, 88, 230, 0.22);
  --riq-insight-label:   rgba(165, 160, 245, 0.7);

  --riq-radius-card:     14px;
  --riq-radius-inner:    9px;
  --riq-radius-pill:     20px;

  --riq-font-mono:       'Space Mono', 'Courier New', monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BASE BUBBLE WRAPPER
   All renderer types share this outer shell.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-bubble {
  width: 100%;
  margin: 0;
  animation: riq-fade-in 0.22s ease both;
}

@keyframes riq-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.riq-card {
  background: var(--riq-bg-card);
  border: 0.5px solid var(--riq-border-accent);
  border-radius: var(--riq-radius-card);
  overflow: hidden;
}

/* Card header row (icon + title) */
.riq-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 0.5px solid var(--riq-border);
}

.riq-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--riq-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Icon dots — coloured per type */
.riq-card-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.riq-icon--ranking        { background: var(--riq-mid); }
.riq-icon--comparison     { background: #0ea5e9; }
.riq-icon--recommendation { background: var(--riq-rec-text); }


/* ═══════════════════════════════════════════════════════════════════════════
   RENDERER 1 — RANKING
   Bar chart with score fill, colour tiers, rate + strategy in gutter.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-bar-chart {
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.riq-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Day / item label */
.riq-bar-label {
  font-size: 12.5px;
  color: var(--riq-text-secondary);
  width: 82px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Track */
.riq-bar-track {
  flex: 1;
  height: 30px;
  background: var(--riq-bg-card-inner);
  border: 0.5px solid var(--riq-border);
  border-radius: var(--riq-radius-inner);
  overflow: hidden;
}

/* Fill — width set inline by JS */
.riq-bar-fill {
  height: 100%;
  border-radius: var(--riq-radius-inner);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.riq-bar-fill.tier-strong {
  background: var(--riq-strong-bg);
  border: 0.5px solid var(--riq-strong-border);
}
.riq-bar-fill.tier-mid {
  background: var(--riq-mid-bg);
  border: 0.5px solid var(--riq-mid-border);
}
.riq-bar-fill.tier-weak {
  background: var(--riq-weak-bg);
  border: 0.5px solid var(--riq-weak-border);
}

/* Score label inside bar */
.riq-bar-score {
  font-family: var(--riq-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.tier-strong .riq-bar-score { color: var(--riq-strong-text); }
.tier-mid    .riq-bar-score { color: var(--riq-mid-text); }
.tier-weak   .riq-bar-score { color: var(--riq-weak-text); }

/* Strongest / Weakest badge inside bar */
.riq-rank-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--riq-radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.riq-rank-strong {
  background: rgba(16, 185, 129, 0.18);
  color: var(--riq-strong-text);
}
.riq-rank-weak {
  background: rgba(239, 68, 68, 0.18);
  color: var(--riq-weak-text);
}

/* Right gutter: rate + strategy */
.riq-bar-meta {
  width: 96px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.riq-bar-rate {
  font-family: var(--riq-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--riq-text-primary);
}
.riq-bar-strategy {
  font-size: 10px;
  color: var(--riq-text-muted);
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RENDERER 2 — COMPARISON TABLE
   Full table with delta-coloured cells and sticky first column.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-table-wrap {
  padding: 0 0 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.riq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.riq-th {
  padding: 9px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--riq-text-muted);
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 0.5px solid var(--riq-border);
  white-space: nowrap;
}

/* Left-border accent on first header column */
.riq-th:first-child {
  border-left: 2px solid var(--riq-mid);
  padding-left: 12px;
}

.riq-tr {
  transition: background 0.12s;
}
.riq-tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.riq-tr:not(:last-child) td {
  border-bottom: 0.5px solid var(--riq-border);
}

.riq-td {
  padding: 9px 14px;
  color: var(--riq-text-primary);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Label column (first col) */
.riq-td--label {
  font-weight: 500;
  color: var(--riq-text-primary);
  border-left: 2px solid rgba(99, 88, 230, 0.2);
  padding-left: 12px;
}

/* Delta-positive cells */
.riq-td.delta-pos {
  color: var(--riq-delta-pos);
  background: var(--riq-delta-pos-bg);
  font-family: var(--riq-font-mono);
  font-size: 11.5px;
}

/* Delta-negative cells */
.riq-td.delta-neg {
  color: var(--riq-delta-neg);
  background: var(--riq-delta-neg-bg);
  font-family: var(--riq-font-mono);
  font-size: 11.5px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RENDERER 3 — INSIGHT CALLOUT
   Post-divider section rendered as an amber/indigo tinted card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline insight block — used inside ranking/comparison/recommendation
   for the post-divider section */
.riq-insight-block {
  margin: 10px 14px 12px;
  padding: 12px 14px;
  background: var(--riq-insight-bg);
  border: 0.5px solid var(--riq-insight-border);
  border-left: 2px solid var(--riq-mid);
  border-radius: 0 var(--riq-radius-inner) var(--riq-radius-inner) 0;
  font-size: 13px;
  color: var(--riq-text-primary);
  line-height: 1.65;
}

/* Standalone insight callout — used in the "insight" responseType */
.riq-insight-callout {
  margin: 12px 14px;
  background: var(--riq-insight-bg);
  border: 0.5px solid var(--riq-insight-border);
  border-radius: var(--riq-radius-inner);
  overflow: hidden;
}

.riq-insight-callout-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--riq-insight-label);
  border-bottom: 0.5px solid var(--riq-insight-border);
}

/* Small square icon for callout label */
.riq-callout-icon {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--riq-mid);
  flex-shrink: 0;
}

.riq-insight-callout-body {
  padding: 10px 14px 12px;
  font-size: 13px;
  color: var(--riq-text-primary);
  line-height: 1.65;
}

/* Inner markdown elements inside insight blocks */
.riq-insight-block ul,
.riq-insight-callout-body ul {
  padding-left: 18px;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.riq-insight-block li,
.riq-insight-callout-body li {
  font-size: 12.5px;
  color: var(--riq-text-primary);
  line-height: 1.6;
}

.riq-insight-block strong,
.riq-insight-callout-body strong {
  color: #fff;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RENDERER 4 — RECOMMENDATION
   Rate callout chip + markdown body + action strip.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-rec-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 14px 4px;
  padding: 12px 16px;
  background: var(--riq-rec-bg);
  border: 0.5px solid var(--riq-rec-border);
  border-radius: var(--riq-radius-inner);
}

.riq-rec-callout-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--riq-rec-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.riq-rec-callout-value {
  font-family: var(--riq-font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--riq-rec-text);
  letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — MARKDOWN BODY
   Applies inside any renderer that renders body markdown.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-markdown-body,
.riq-markdown-fallback,
.riq-plain-body {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--riq-text-primary);
  line-height: 1.7;
}

/* Bold numbers rendered as chips */
.riq-markdown-body strong,
.riq-plain-body strong {
  background: rgba(99, 88, 230, 0.12);
  color: #fff;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Italic → indigo accent (matches your existing em style) */
.riq-markdown-body em,
.riq-plain-body em {
  color: #a5a0f5;
  font-style: normal;
}

/* Code */
.riq-markdown-body code,
.riq-plain-body code {
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--riq-font-mono);
  font-size: 12px;
}

/* Lists */
.riq-markdown-body ul,
.riq-plain-body ul {
  padding-left: 0;
  margin: 8px 0 0;
  list-style: none;
  border-left: 2px solid rgba(99, 88, 230, 0.3);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.riq-markdown-body ol,
.riq-plain-body ol {
  padding-left: 18px;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.riq-markdown-body li,
.riq-plain-body li {
  font-size: 13px;
  line-height: 1.6;
}

/* Paragraphs */
.riq-markdown-body p + p,
.riq-plain-body p + p {
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOLLOW-UP BUTTON STRIP (Renderer 4 + all types)
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-followup-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 14px;
  border-top: 0.5px solid var(--riq-border);
  margin-top: 4px;
}

.riq-followup-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--riq-radius-pill);
  padding: 6px 13px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.riq-followup-btn:hover {
  background: rgba(99, 88, 230, 0.12);
  border-color: rgba(99, 88, 230, 0.35);
  color: #a5a0f5;
}

.riq-followup-btn:active {
  transform: scale(0.97);
}


/* ═══════════════════════════════════════════════════════════════════════════
   USAGE BADGE
   Thin progress bar + token/tool metadata below the card.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-usage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 0 4px;
}

.riq-usage-bar-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.riq-usage-bar-fill {
  height: 100%;
  background: rgba(99, 88, 230, 0.45);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.riq-usage-text {
  font-size: 10px;
  color: var(--riq-text-muted);
  letter-spacing: 0.03em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLAIN BUBBLE
   Matches your existing ai-chat-ui.css bubble aesthetic exactly.
   Just adds the follow-up strip and usage badge.
   ═══════════════════════════════════════════════════════════════════════════ */

.riq-bubble--plain .riq-plain-body {
  background: rgba(30, 33, 58, 0.6);
  border: 0.5px solid rgba(99, 88, 230, 0.25);
  border-radius: var(--riq-radius-card);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TABLET ADJUSTMENTS (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .riq-bar-label    { width: 62px; font-size: 11.5px; }
  .riq-bar-meta     { width: 76px; }
  .riq-bar-rate     { font-size: 11px; }
  .riq-bar-strategy { display: none; }
  .riq-card-header  { padding: 10px 12px 8px; }
  .riq-bar-chart    { padding: 10px 12px 8px; }
  .riq-followup-strip { padding: 8px 12px 12px; }
  .riq-rec-callout-value { font-size: 18px; }
}