/**
 * COMPLETE OPTIMIZATION - Add this after best-practices-FINAL.css
 * Fixes: spacing, scrollbar styling, outer scroll prevention
 */

/* ============================================
   SPACING OPTIMIZATION - Maximize Textarea
   ============================================ */

/* Reduce tools spacing in zoomed cards */
.output-card.is-zoomed .edit-tools {
  margin: 6px 0 0 !important;
  padding: 8px 12px !important;
}

/* Reduce textarea margins */
.output-card.is-zoomed .edit-textarea {
  margin-top: 8px !important;
  min-height: 280px !important;
  max-height: 550px !important;
}

/* Reduce spacing between textarea and pills row */
.output-card.is-zoomed .card-insights-row {
  margin-top: 8px !important;
}

/* Minimal card-meta spacing */
.output-card.is-zoomed .card-meta {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* Reduce Best Practices panel spacing */
.output-card.is-zoomed .bp-panel {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* ============================================
   BEST PRACTICES SCROLLBAR - Match Card Style
   ============================================ */

/* Match OmniPostr scrollbar style exactly */
.bp-panel::-webkit-scrollbar {
  width: 10px; /* Same as card scrollbar */
}

.bp-panel::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
}

.bp-panel::-webkit-scrollbar-thumb {
  background-color: #1E88E5; /* OmniPostr blue (var(--blue)) */
  border-radius: 10px;
  border: 3px solid #ffffff; /* Clean inset look - matches card */
}

.bp-panel::-webkit-scrollbar-thumb:hover {
  background-color: #1565C0; /* Darker blue on hover (var(--blue-700)) */
}

/* Firefox */
.bp-panel {
  scrollbar-width: thin;
  scrollbar-color: #1E88E5 #ffffff;
}