/* -------- Layout skeleton ---------------------------------------- */

  /* Desktop: stretch each column to viewport minus nav/padding */
  .history-panel,
  .quote-panel {
    height: calc(100vh - 10rem);   /* 10 rem ≈ 4 rem nav + 6 rem padding/gap */
    flex-direction: column;
  }

  /* History rail — fixed 18 rem strip (toggle + scroll list) */
  .history-panel {
    flex: 0 0 18rem;
    display: flex;
  }

  /* History list fills the rail below the toggle */
  .history-box {
    flex: 1 1 auto;
    overflow-y: auto;              /* keeps neon-scrollbar styling */
  }

  /* Quote columns share all remaining width evenly */
  .quote-panel { flex: 1 1 0; display: flex; }
  .quote-box   {
    flex: 1 1 0;                  /* equal share (no 100 %)   */
    min-width: 0;                 /* prevent overflow         */
  }

  /* Optional gap between quote columns on wider screens */
  @media (min-width: 1024px) {
    .quote-panel { padding-right: 1rem; }
  }

  /* Keep optional columns hidden until JS shows them */
  .quote-panel.hidden { display: none !important; }

  /* Mobile: keep history rail scrollable */
  @media (max-width: 768px) {
    history-panel { height: calc(100vh - 10rem); }
    .quote-panel   { height: auto; }

    .quote-panel        { flex: 1 1 100%; }   /* stacked full-width */
    .quote-panel.hidden { display: none !important; }
  }

  /* -------- UI tweaks --------------------------------------------- */

/* Mobile-first: center the toggle */
 .compare-toggle {
   display: flex;
   justify-content: center;  /* phones/tablets */
   margin: 0 0 1rem 0;
 }

 /* Desktop override */
 @media (min-width: 1024px) {
   .compare-toggle {
     justify-content: center;
     margin-left: 0rem;          /* Appears Centered */
   }
 }

  /* Cap big JSON blocks and allow wrapping */
  .quote-box pre {
    max-height: 22rem;            /* inner scroll if very long   */
    overflow: auto;
    white-space: pre-wrap;        /* wrap long words / strings   */
  }

/* Make each quote-box a flex column so its children can stretch */
.quote-box {
  display: flex;
  flex-direction: column;
}

/* Small Spacing between history boxes */
#auditHistory {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Header / meta lines keep natural height, JSON block takes the rest */
.quote-box pre {
  flex: 1 1 auto;      /* stretch to fill available vertical space   */
  max-height: none;    /* remove the 22 rem cap                       */
  overflow: auto;      /* still scroll internally if content is huge */
  white-space: pre-wrap;
  word-break: break-word;
}

  /* grows to fill the quote column */
  .audit-json {
  flex: 1 1 auto;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background:linear-gradient(155deg, rgba(3, 18, 28, 0.68), rgba(2, 10, 20, 0.52));
  padding:.75rem;
  border-radius:12px;
  border:1px solid var(--pro-border-soft);
  box-shadow:0 12px 24px -16px rgba(0,0,0,0.7);
  backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.45));
  -webkit-backdrop-filter:blur(calc(var(--pro-glass-blur) * 0.45));
  }

/* === Inline Styles Moved to CSS === */
.accent-text { color: var(--accent); }
.user-btn { margin-left:.5rem; }