/* ═══════════════════════════════════════════════════════════════════════════
   agent-reliability.css — F19 Reliability & Consensus Layer
   AlphaVault Agent Builder — Extension Pack II
   Version : 1.0.0

   COMPONENTS :
     §1  CSS Variables & Reset
     §2  Inline Badge (dans les messages chat)
     §3  Panel Overlay & Container (slide-in)
     §4  Panel Header & Score Gauge
     §5  Check Rows Grid
     §6  Issues Sections
     §7  Unsourced Claims Section
     §8  Divergences Section
     §9  Manual Override Section
     §10 Dark Mode Overrides
     §11 Animations & Transitions
     §12 Responsive
═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   §1 — CSS VARIABLES & RESET
═══════════════════════════════════════════════════════════════════════════ */

:root {
    --rel-verified      : #10b981;
    --rel-reviewed      : #3b82f6;
    --rel-low-conf      : #f59e0b;
    --rel-unreliable    : #ef4444;
  
    --rel-verified-bg   : rgba(16, 185, 129, 0.10);
    --rel-reviewed-bg   : rgba(59, 130, 246, 0.10);
    --rel-low-conf-bg   : rgba(245, 158, 11, 0.10);
    --rel-unreliable-bg : rgba(239,  68,  68, 0.10);
  
    --rel-verified-bd   : rgba(16, 185, 129, 0.25);
    --rel-reviewed-bd   : rgba(59, 130, 246, 0.25);
    --rel-low-conf-bd   : rgba(245, 158, 11, 0.25);
    --rel-unreliable-bd : rgba(239,  68,  68, 0.25);
  
    --rel-surface       : #ffffff;
    --rel-surface-2     : #f8fafc;
    --rel-border        : rgba(0, 0, 0, 0.07);
    --rel-text          : #1e293b;
    --rel-text-muted    : #64748b;
    --rel-shadow        : 0 24px 64px rgba(0, 0, 0, 0.18),
                          0  4px 16px rgba(0, 0, 0, 0.08);
  
    --rel-radius-sm     : 8px;
    --rel-radius-md     : 12px;
    --rel-radius-lg     : 20px;
    --rel-radius-xl     : 24px;
  
    --rel-font          : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rel-mono          : 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  
    --rel-transition    : 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --rel-transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §2 — INLINE BADGE (affiché dans chaque message du chat)
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-badge-wrapper {
    margin-top     : 10px;
    display        : flex;
  }
  
  .rel-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 6px 12px;
    border-radius  : var(--rel-radius-md);
    border         : 1.5px solid transparent;
    cursor         : pointer;
    font-family    : var(--rel-font);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.2px;
    user-select    : none;
    transition     : transform var(--rel-transition),
                     box-shadow var(--rel-transition),
                     opacity    var(--rel-transition);
    max-width      : 320px;
    position       : relative;
    overflow       : hidden;
  }
  
  .rel-badge:hover {
    transform  : translateY(-1px);
    box-shadow : 0 4px 16px rgba(0, 0, 0, 0.12);
  }
  
  .rel-badge:active {
    transform  : translateY(0);
  }
  
  /* ── Verdict-specific badge colors ── */
  .rel-badge--verified {
    background   : var(--rel-verified-bg);
    border-color : var(--rel-verified-bd);
    color        : var(--rel-verified);
  }
  
  .rel-badge--reviewed {
    background   : var(--rel-reviewed-bg);
    border-color : var(--rel-reviewed-bd);
    color        : var(--rel-reviewed);
  }
  
  .rel-badge--low-confidence {
    background   : var(--rel-low-conf-bg);
    border-color : var(--rel-low-conf-bd);
    color        : var(--rel-low-conf);
  }
  
  .rel-badge--unreliable {
    background   : var(--rel-unreliable-bg);
    border-color : var(--rel-unreliable-bd);
    color        : var(--rel-unreliable);
  }
  
  /* ── Badge sub-elements ── */
  .rel-badge__icon {
    font-size   : 15px;
    flex-shrink : 0;
    line-height : 1;
  }
  
  .rel-badge__content {
    display        : flex;
    flex-direction : column;
    gap            : 3px;
    flex           : 1;
    min-width      : 0;
  }
  
  .rel-badge__label {
    font-size   : 11px;
    font-weight : 800;
    white-space : nowrap;
    overflow    : hidden;
    text-overflow: ellipsis;
  }
  
  .rel-badge__bar {
    width         : 80px;
    height        : 3px;
    background    : rgba(0, 0, 0, 0.08);
    border-radius : 10px;
    overflow      : hidden;
  }
  
  .rel-badge__bar-fill {
    height        : 100%;
    border-radius : 10px;
    transition    : width 0.8s ease;
  }
  
  .rel-badge__score {
    font-size   : 15px;
    font-weight : 900;
    line-height : 1;
    flex-shrink : 0;
  }
  
  .rel-badge__issues {
    font-size      : 10px;
    font-weight    : 700;
    padding        : 1px 6px;
    border-radius  : 20px;
    background     : rgba(239, 68, 68, 0.15);
    color          : #ef4444;
    white-space    : nowrap;
    flex-shrink    : 0;
  }
  
  .rel-badge__blocked {
    font-size      : 10px;
    font-weight    : 700;
    padding        : 1px 6px;
    border-radius  : 20px;
    background     : rgba(239, 68, 68, 0.20);
    color          : #ef4444;
    white-space    : nowrap;
    flex-shrink    : 0;
    animation      : rel-pulse 1.6s ease infinite;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §3 — PANEL OVERLAY & CONTAINER
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-panel-overlay {
    position       : fixed;
    inset          : 0;
    z-index        : 10010;
    background     : rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    opacity        : 0;
    pointer-events : none;
    transition     : opacity var(--rel-transition-slow);
  }
  
  .rel-panel-overlay--visible {
    opacity        : 1;
    pointer-events : auto;
  }
  
  .rel-panel-container {
    position       : fixed;
    top            : 0;
    right          : 0;
    bottom         : 0;
    z-index        : 10011;
    width          : 480px;
    max-width      : 100vw;
    background     : var(--rel-surface);
    box-shadow     : var(--rel-shadow);
    overflow-y     : auto;
    overflow-x     : hidden;
    transform      : translateX(100%);
    transition     : transform var(--rel-transition-slow);
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.25) transparent;
  }
  
  .rel-panel-container::-webkit-scrollbar {
    width : 5px;
  }
  
  .rel-panel-container::-webkit-scrollbar-thumb {
    background    : rgba(99, 102, 241, 0.25);
    border-radius : 10px;
  }
  
  .rel-panel-container--open {
    transform : translateX(0);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §4 — PANEL HEADER & SCORE GAUGE
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-panel {
    display        : flex;
    flex-direction : column;
    min-height     : 100%;
    font-family    : var(--rel-font);
    color          : var(--rel-text);
  }
  
  /* ── Panel Header ── */
  .rel-panel__header {
    display        : flex;
    align-items    : center;
    gap            : 12px;
    padding        : 20px 20px 18px;
    background     : linear-gradient(135deg,
                       rgba(99, 102, 241, 0.06),
                       rgba(16, 185, 129, 0.04));
    border-bottom  : 1.5px solid var(--rel-border);
    position       : sticky;
    top            : 0;
    z-index        : 5;
    backdrop-filter: blur(12px);
    flex-shrink    : 0;
  }
  
  .rel-panel__header-left {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex        : 1;
    min-width   : 0;
  }
  
  .rel-panel__emoji {
    font-size   : 24px;
    line-height : 1;
    flex-shrink : 0;
  }
  
  .rel-panel__title {
    font-size   : 15px;
    font-weight : 800;
    color       : var(--rel-text);
    display     : block;
    line-height : 1.3;
  }
  
  .rel-panel__subtitle {
    font-size   : 11px;
    font-weight : 500;
    color       : var(--rel-text-muted);
    display     : block;
    margin-top  : 2px;
  }
  
  .rel-panel__close {
    width          : 32px;
    height         : 32px;
    border         : none;
    background     : rgba(100, 116, 139, 0.10);
    border-radius  : var(--rel-radius-sm);
    cursor         : pointer;
    font-size      : 14px;
    color          : var(--rel-text-muted);
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : background var(--rel-transition),
                     color      var(--rel-transition);
    flex-shrink    : 0;
    line-height    : 1;
  }
  
  .rel-panel__close:hover {
    background : rgba(239, 68, 68, 0.12);
    color      : #ef4444;
  }
  
  /* ── Gauge Section ── */
  .rel-panel__gauge-section {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    padding        : 24px 20px 16px;
    background     : linear-gradient(180deg,
                       rgba(99, 102, 241, 0.04) 0%,
                       transparent 100%);
    border-bottom  : 1px solid var(--rel-border);
  }
  
  .rel-gauge {
    width  : 160px;
    height : 100px;
  }
  
  .rel-gauge__svg {
    width  : 100%;
    height : 100%;
  }
  
  .rel-panel__verdict-label {
    font-size   : 14px;
    font-weight : 800;
    margin-top  : 6px;
    letter-spacing: 0.3px;
  }
  
  .rel-panel__action-label {
    font-size   : 11px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    margin-top  : 4px;
    text-align  : center;
    line-height : 1.5;
  }
  
  /* ── 4 Checks Grid ── */
  .rel-panel__checks-grid {
    display        : flex;
    flex-direction : column;
    gap            : 0;
    border-bottom  : 1px solid var(--rel-border);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §5 — CHECK ROWS
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-check-row {
    display      : flex;
    align-items  : flex-start;
    gap          : 12px;
    padding      : 14px 20px;
    border-bottom: 1px solid var(--rel-border);
    transition   : background var(--rel-transition);
  }
  
  .rel-check-row:last-child {
    border-bottom : none;
  }
  
  .rel-check-row:hover {
    background : rgba(99, 102, 241, 0.03);
  }
  
  .rel-check-row--skipped {
    opacity : 0.55;
  }
  
  .rel-check-row__icon {
    font-size   : 18px;
    line-height : 1;
    flex-shrink : 0;
    margin-top  : 1px;
    width       : 24px;
    text-align  : center;
  }
  
  .rel-check-row__content {
    flex       : 1;
    min-width  : 0;
  }
  
  .rel-check-row__top {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    margin-bottom   : 6px;
  }
  
  .rel-check-row__label {
    font-size   : 12px;
    font-weight : 700;
    color       : var(--rel-text);
    line-height : 1.4;
  }
  
  .rel-check-row__score {
    font-size   : 13px;
    font-weight : 900;
    flex-shrink : 0;
    font-family : var(--rel-mono);
  }
  
  .rel-check-row__bar-track {
    width         : 100%;
    height        : 5px;
    background    : rgba(0, 0, 0, 0.06);
    border-radius : 10px;
    overflow      : hidden;
  }
  
  .rel-check-row__bar-fill {
    height        : 100%;
    border-radius : 10px;
    transition    : width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .rel-check-row__count {
    font-size  : 10px;
    font-weight: 600;
    color      : var(--rel-text-muted);
    margin-top : 5px;
  }
  
  .rel-check-row__skipped-label {
    font-size   : 10px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    font-style  : italic;
    margin-top  : 5px;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §6 — PANEL SECTIONS & ISSUES
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-panel__section {
    padding       : 18px 20px;
    border-bottom : 1px solid var(--rel-border);
  }
  
  .rel-panel__section:last-child {
    border-bottom : none;
  }
  
  .rel-panel__section--success {
    background : rgba(16, 185, 129, 0.04);
  }
  
  .rel-panel__section--override {
    background : rgba(99, 102, 241, 0.04);
  }
  
  .rel-panel__section-title {
    font-size      : 12px;
    font-weight    : 800;
    color          : var(--rel-text);
    text-transform : uppercase;
    letter-spacing : 0.6px;
    display        : flex;
    align-items    : center;
    gap            : 8px;
    margin-bottom  : 12px;
  }
  
  .rel-panel__section-count {
    font-size      : 10px;
    font-weight    : 700;
    padding        : 2px 8px;
    border-radius  : 20px;
    background     : rgba(100, 116, 139, 0.12);
    color          : var(--rel-text-muted);
    text-transform : none;
    letter-spacing : 0;
  }
  
  .rel-panel__section-text {
    font-size   : 12px;
    color       : var(--rel-text-muted);
    line-height : 1.6;
    margin      : 0 0 12px;
  }
  
  .rel-panel__more {
    font-size   : 11px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    margin-top  : 8px;
    font-style  : italic;
    text-align  : center;
  }
  
  /* ── Issues Groups ── */
  .rel-issues-group {
    margin-bottom : 14px;
  }
  
  .rel-issues-group:last-child {
    margin-bottom : 0;
  }
  
  .rel-issues-group__label {
    font-size      : 10px;
    font-weight    : 800;
    text-transform : uppercase;
    letter-spacing : 0.8px;
    margin-bottom  : 8px;
    display        : flex;
    align-items    : center;
    gap            : 5px;
  }
  
  .rel-issues-group__label--critical {
    color : #ef4444;
  }
  
  .rel-issues-group__label--warning {
    color : #f59e0b;
  }
  
  /* ── Individual Issue Items ── */
  .rel-issue-item {
    padding       : 10px 12px;
    border-radius : var(--rel-radius-sm);
    margin-bottom : 6px;
    border-left   : 3px solid transparent;
    background    : rgba(0, 0, 0, 0.02);
    transition    : background var(--rel-transition);
  }
  
  .rel-issue-item:last-child {
    margin-bottom : 0;
  }
  
  .rel-issue-item:hover {
    background : rgba(0, 0, 0, 0.04);
  }
  
  .rel-issue-item--critical {
    border-left-color : #ef4444;
    background        : rgba(239, 68, 68, 0.04);
  }
  
  .rel-issue-item--warning {
    border-left-color : #f59e0b;
    background        : rgba(245, 158, 11, 0.04);
  }
  
  .rel-issue-item--info {
    border-left-color : #64748b;
    background        : rgba(100, 116, 139, 0.04);
  }
  
  .rel-issue-item__header {
    display     : flex;
    align-items : center;
    gap         : 7px;
    margin-bottom: 5px;
  }
  
  .rel-issue-item__badge {
    font-size      : 9px;
    font-weight    : 800;
    text-transform : uppercase;
    letter-spacing : 0.6px;
    padding        : 1px 6px;
    border-radius  : 20px;
  }
  
  .rel-issue-item__badge--critical {
    background : rgba(239,  68,  68, 0.15);
    color      : #ef4444;
  }
  
  .rel-issue-item__badge--warning {
    background : rgba(245, 158, 11, 0.15);
    color      : #f59e0b;
  }
  
  .rel-issue-item__badge--info {
    background : rgba(100, 116, 139, 0.12);
    color      : #64748b;
  }
  
  .rel-issue-item__check {
    font-size   : 10px;
    font-weight : 600;
    color       : var(--rel-text-muted);
  }
  
  .rel-issue-item__desc {
    font-size   : 12px;
    color       : var(--rel-text);
    line-height : 1.5;
  }
  
  .rel-issue-item__suggestion {
    font-size   : 11px;
    color       : var(--rel-text-muted);
    margin-top  : 5px;
    line-height : 1.5;
    font-style  : italic;
  }
  
  /* ── Details/Summary (Info issues) ── */
  .rel-issues-details {
    margin-top : 8px;
  }
  
  .rel-issues-details__summary {
    font-size   : 11px;
    font-weight : 700;
    color       : var(--rel-text-muted);
    cursor      : pointer;
    padding     : 6px 0;
    user-select : none;
    list-style  : none;
    display     : flex;
    align-items : center;
    gap         : 6px;
  }
  
  .rel-issues-details__summary::-webkit-details-marker {
    display : none;
  }
  
  .rel-issues-details__summary::before {
    content       : '▸';
    transition    : transform var(--rel-transition);
    display       : inline-block;
    font-size     : 10px;
  }
  
  details[open] .rel-issues-details__summary::before {
    transform : rotate(90deg);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §7 — UNSOURCED CLAIMS SECTION
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-unsourced-list {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
  }
  
  .rel-unsourced-item {
    padding       : 10px 12px;
    border-radius : var(--rel-radius-sm);
    background    : rgba(245, 158, 11, 0.05);
    border        : 1px solid rgba(245, 158, 11, 0.15);
    transition    : background var(--rel-transition);
  }
  
  .rel-unsourced-item:hover {
    background : rgba(245, 158, 11, 0.08);
  }
  
  .rel-unsourced-item__text {
    font-size   : 12px;
    font-weight : 600;
    color       : var(--rel-text);
    line-height : 1.5;
    margin-bottom: 4px;
    font-style  : italic;
  }
  
  .rel-unsourced-item__type {
    font-size   : 10px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    margin-bottom: 4px;
    text-transform: capitalize;
  }
  
  .rel-unsourced-item__tip {
    font-size   : 11px;
    color       : #f59e0b;
    font-weight : 600;
    line-height : 1.4;
    margin-top  : 5px;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §8 — DIVERGENCES SECTION
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-divergences-list {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
  }
  
  .rel-divergence-item {
    padding       : 12px 14px;
    border-radius : var(--rel-radius-sm);
    background    : rgba(0, 0, 0, 0.02);
    border-left   : 3px solid transparent;
    transition    : background var(--rel-transition);
  }
  
  .rel-divergence-item:hover {
    background : rgba(0, 0, 0, 0.04);
  }
  
  .rel-divergence-item__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    margin-bottom   : 8px;
  }
  
  .rel-divergence-item__type {
    font-size   : 12px;
    font-weight : 800;
    color       : var(--rel-text);
    text-transform: capitalize;
  }
  
  .rel-divergence-item__delta {
    font-size   : 11px;
    font-weight : 800;
    font-family : var(--rel-mono);
    flex-shrink : 0;
  }
  
  .rel-divergence-item__values {
    display   : flex;
    gap       : 16px;
    flex-wrap : wrap;
  }
  
  .rel-divergence-item__primary,
  .rel-divergence-item__validator {
    font-size   : 11px;
    font-weight : 600;
    color       : var(--rel-text-muted);
  }
  
  .rel-divergence-item__primary strong,
  .rel-divergence-item__validator strong {
    color     : var(--rel-text);
    font-family: var(--rel-mono);
  }
  
  .rel-divergence-item__reason {
    font-size   : 11px;
    color       : var(--rel-text-muted);
    font-style  : italic;
    margin-top  : 6px;
    line-height : 1.5;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §9 — MANUAL OVERRIDE SECTION
  ═══════════════════════════════════════════════════════════════════════════ */
  
  .rel-override-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    width          : 100%;
    padding        : 12px 20px;
    margin-top     : 12px;
    border         : 2px solid rgba(16, 185, 129, 0.35);
    border-radius  : var(--rel-radius-md);
    background     : rgba(16, 185, 129, 0.07);
    color          : #059669;
    font-size      : 13px;
    font-weight    : 800;
    font-family    : var(--rel-font);
    cursor         : pointer;
    transition     : all var(--rel-transition);
    letter-spacing : 0.2px;
  }
  
  .rel-override-btn:hover {
    background   : rgba(16, 185, 129, 0.14);
    border-color : rgba(16, 185, 129, 0.55);
    box-shadow   : 0 4px 16px rgba(16, 185, 129, 0.20);
    transform    : translateY(-1px);
  }
  
  .rel-override-btn:active {
    transform : translateY(0);
  }
  
  /* ── Panel Footer ── */
  .rel-panel__footer {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    padding         : 14px 20px;
    border-top      : 1px solid var(--rel-border);
    background      : var(--rel-surface-2);
    flex-shrink     : 0;
    margin-top      : auto;
  }
  
  .rel-panel__footer-id {
    font-size   : 10px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    font-family : var(--rel-mono);
    overflow    : hidden;
    text-overflow: ellipsis;
    white-space : nowrap;
  }
  
  .rel-panel__footer-time {
    font-size   : 10px;
    font-weight : 600;
    color       : var(--rel-text-muted);
    white-space : nowrap;
    flex-shrink : 0;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §10 — DARK MODE
  ═══════════════════════════════════════════════════════════════════════════ */
  
  body.dark-mode {
    --rel-surface    : #0f172a;
    --rel-surface-2  : #1e293b;
    --rel-border     : rgba(255, 255, 255, 0.07);
    --rel-text       : #e2e8f0;
    --rel-text-muted : #64748b;
    --rel-shadow     : 0 24px 64px rgba(0, 0, 0, 0.50),
                       0  4px 16px rgba(0, 0, 0, 0.30);
  }
  
  body.dark-mode .rel-panel-overlay {
    background : rgba(2, 6, 23, 0.75);
  }
  
  body.dark-mode .rel-panel__header {
    background : linear-gradient(135deg,
                   rgba(99, 102, 241, 0.10),
                   rgba(16, 185, 129, 0.06));
  }
  
  body.dark-mode .rel-panel__gauge-section {
    background : linear-gradient(180deg,
                   rgba(99, 102, 241, 0.07) 0%,
                   transparent 100%);
  }
  
  body.dark-mode .rel-badge__bar {
    background : rgba(255, 255, 255, 0.08);
  }
  
  body.dark-mode .rel-check-row:hover,
  body.dark-mode .rel-issue-item:hover,
  body.dark-mode .rel-unsourced-item:hover {
    background : rgba(255, 255, 255, 0.03);
  }
  
  body.dark-mode .rel-check-row__bar-track {
    background : rgba(255, 255, 255, 0.06);
  }
  
  body.dark-mode .rel-issue-item {
    background : rgba(255, 255, 255, 0.02);
  }
  
  body.dark-mode .rel-issue-item--critical {
    background : rgba(239, 68,  68, 0.07);
  }
  
  body.dark-mode .rel-issue-item--warning {
    background : rgba(245, 158, 11, 0.07);
  }
  
  body.dark-mode .rel-issue-item--info {
    background : rgba(100, 116, 139, 0.07);
  }
  
  body.dark-mode .rel-unsourced-item {
    background   : rgba(245, 158, 11, 0.07);
    border-color : rgba(245, 158, 11, 0.20);
  }
  
  body.dark-mode .rel-divergence-item {
    background : rgba(255, 255, 255, 0.02);
  }
  
  body.dark-mode .rel-divergence-item:hover {
    background : rgba(255, 255, 255, 0.04);
  }
  
  body.dark-mode .rel-override-btn {
    color      : #10b981;
    background : rgba(16, 185, 129, 0.10);
  }
  
  body.dark-mode .rel-override-btn:hover {
    background : rgba(16, 185, 129, 0.18);
  }
  
  body.dark-mode .rel-panel__section--success {
    background : rgba(16, 185, 129, 0.07);
  }
  
  body.dark-mode .rel-panel__section--override {
    background : rgba(99, 102, 241, 0.07);
  }
  
  body.dark-mode .rel-panel__close:hover {
    background : rgba(239, 68, 68, 0.18);
  }
  
  /* Verified badge — dark mode */
  body.dark-mode .rel-badge--verified {
    background   : rgba(16, 185, 129, 0.14);
    border-color : rgba(16, 185, 129, 0.30);
  }
  
  /* Reviewed badge — dark mode */
  body.dark-mode .rel-badge--reviewed {
    background   : rgba(59, 130, 246, 0.14);
    border-color : rgba(59, 130, 246, 0.30);
  }
  
  /* Low confidence badge — dark mode */
  body.dark-mode .rel-badge--low-confidence {
    background   : rgba(245, 158, 11, 0.14);
    border-color : rgba(245, 158, 11, 0.30);
  }
  
  /* Unreliable badge — dark mode */
  body.dark-mode .rel-badge--unreliable {
    background   : rgba(239, 68, 68, 0.14);
    border-color : rgba(239, 68, 68, 0.30);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════
     §11 — ANIMATIONS & TRANSITIONS
  ═══════════════════════════════════════════════════════════════════════════ */
  
  @keyframes rel-pulse {
    0%, 100% { opacity: 1;    }
    50%       { opacity: 0.55; }
  }
  
  @keyframes rel-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  
  @keyframes rel-bar-grow {
    from { width: 0%; }
  }
  
  @keyframes rel-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
  }
  
  /* ── Apply animation when panel opens ── */
  .rel-panel-container--open .rel-panel__section {
    animation : rel-fade-in 0.30s ease both;
  }
  
  .rel-panel-container--open .rel-panel__section:nth-child(1) { animation-delay: 0.05s; }
  .rel-panel-container--open .rel-panel__section:nth-child(2) { animation-delay: 0.10s; }
  .rel-panel-container--open .rel-panel__section:nth-child(3) { animation-delay: 0.15s; }
  .rel-panel-container--open .rel-panel__section:nth-child(4) { animation-delay: 0.20s; }
  .rel-panel-container--open .rel-panel__section:nth-child(5) { animation-delay: 0.25s; }
  
  .rel-panel-container--open .rel-check-row {
    animation : rel-fade-in 0.28s ease both;
  }
  
  .rel-panel-container--open .rel-check-row:nth-child(1) { animation-delay: 0.08s; }
  .rel-panel-container--open .rel-check-row:nth-child(2) { animation-delay: 0.12s; }
  .rel-panel-container--open .rel-check-row:nth-child(3) { animation-delay: 0.16s; }
  .rel-panel-container--open .rel-check-row:nth-child(4) { animation-delay: 0.20s; }
  
  /* ── Score gauge SVG animation ── */
  .rel-gauge__svg path:nth-child(3) {
    animation : rel-fade-in 0.6s ease 0.2s both;
  }
  
  /* ══════════════════════════════════════════════════════════════════════════
     §12 — RESPONSIVE
  ══════════════════════════════════════════════════════════════════════════ */
  
  @media (max-width: 768px) {
    .rel-panel-container {
      width : 100vw;
    }
  
    .rel-badge {
      max-width : 100%;
    }
  
    .rel-panel__gauge-section {
      padding : 16px 16px 12px;
    }
  
    .rel-gauge {
      width  : 130px;
      height : 82px;
    }
  
    .rel-panel__checks-grid {
      padding : 0;
    }
  
    .rel-check-row {
      padding : 12px 16px;
    }
  
    .rel-panel__section {
      padding : 14px 16px;
    }
  
    .rel-divergence-item__values {
      flex-direction : column;
      gap            : 4px;
    }
  }
  
  @media (max-width: 480px) {
    .rel-panel__header {
      padding : 16px 14px;
    }
  
    .rel-panel__title {
      font-size : 14px;
    }
  
    .rel-panel__subtitle {
      font-size : 10px;
    }
  
    .rel-override-btn {
      font-size : 12px;
      padding   : 10px 14px;
    }
  }