/* ==========================================================
   Legacy AI final roulette dashboard balance pass
   Fixes:
   - roulette wheel slightly too large / clipping
   - recommendation tabs too large
   - strategy cards too bulky
   - session control buttons wrapping awkwardly
   - 3 pills touching recommendation tabs
   ========================================================== */

/* 1) Roulette wheel: reduce just enough to stop clipping */
.roulette-wheel,
.wheel,
.wheel-wrap,
.wheel-container,
#rouletteWheel,
#wheelContainer {
  scale: .96 !important;
  transform-origin: center center !important;
}

/* Override earlier wheel bump from viewport restore file */
@media (min-width: 1400px) and (min-height: 800px) {
  .roulette-wheel,
  .wheel,
  #rouletteWheel {
    scale: .96 !important;
  }
}

/* 2) Recommendation pill row: clean gap above tabs */
.session-summary-row,
.session-summary-strip,
.recommendation-summary-row,
.rec-summary-row,
.recommendation-pills-row,
.rec-pills-row,
#recommendationPills,
#sessionSummaryPills {
  gap: 10px !important;
  margin-bottom: 11px !important;
  align-items: center !important;
}

/* 3 pills slightly smaller so they breathe better */
.session-summary-row .pill,
.session-summary-strip .pill,
.recommendation-summary-row .pill,
.rec-summary-row .pill,
.recommendation-pills-row .pill,
.rec-pills-row .pill,
#recommendationPills .pill,
#sessionSummaryPills .pill,
.session-start-pill,
.top-strategy-pill,
.export-session-pill,
.export-session-summary,
#exportSessionSummary,
#exportSessionSummaryBtn {
  height: 22px !important;
  min-height: 22px !important;
  padding: 3px 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* 3) Recommendation tabs smaller */
.recommendation-tabs button,
.rec-tabs button,
.strategy-tabs button,
.tab-header button,
.tabs-header button,
.recommendation-tabs .tab,
.rec-tabs .tab,
.strategy-tabs .tab,
.tab-header .tab,
.tabs-header .tab {
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* More breathing room below tab row */
.recommendation-tabs,
.rec-tabs,
.strategy-tabs,
.tab-header,
.tabs-header {
  margin-bottom: 8px !important;
}

/* 4) Strategy recommendation cards: reduce inner bulk */
.strategy-card,
.recommendation-card,
.rec-card,
.strategy-recommendation-card,
.recommendation-item,
.strategy-item,
#strategyRecommendationList > div,
#recommendationsList > div {
  padding: 11px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 12px !important;
}

.strategy-card h3,
.recommendation-card h3,
.rec-card h3,
.strategy-recommendation-card h3,
.recommendation-item h3,
.strategy-item h3 {
  font-size: 15px !important;
  margin-bottom: 6px !important;
}

.strategy-card p,
.recommendation-card p,
.rec-card p,
.strategy-recommendation-card p,
.recommendation-item p,
.strategy-item p,
.strategy-card span,
.recommendation-card span,
.rec-card span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* Number chips inside recommendation cards */
.strategy-card .chip,
.recommendation-card .chip,
.rec-card .chip,
.strategy-recommendation-card .chip,
.recommendation-item .chip,
.strategy-item .chip {
  min-width: 22px !important;
  height: 22px !important;
  font-size: 9px !important;
  padding: 3px 6px !important;
}

/* 5) Session controls: compact enough to avoid 3-line stacking */
.session-controls,
.session-controls-panel,
.session-controls-box {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: auto !important;
}

.session-controls button,
.session-controls .pill,
.session-controls .control-btn,
.session-controls .action-btn {
  height: 23px !important;
  min-height: 23px !important;
  padding: 3px 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
}

.session-controls .button-group,
.session-controls .controls-right,
.session-controls .session-buttons {
  gap: 5px !important;
  row-gap: 4px !important;
  max-width: 260px !important;
  align-content: center !important;
}

/* Keep EXPORT/IMPORT on same row where possible */
.session-controls .button-group button,
.session-controls .controls-right button,
.session-controls .session-buttons button {
  flex: 0 0 auto !important;
}

/* 6) Keep recommendation panel visually stable */
.recommendation-box,
.recommendation-panel,
.strategy-recommendation-panel {
  padding-top: 8px !important;
}

.recommendation-content,
.rec-content,
.strategy-recommendation-content,
#strategyRecommendationList,
#recommendationsList {
  margin-top: 8px !important;
}

<style>

/* LEGACY AI GLOBAL SCROLLBAR */
::-webkit-scrollbar{
    width:10px;
    height:10px;
}
::-webkit-scrollbar-track{
    background:#120000;
    border-radius:10px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ff2a2a,#b30000);
    border-radius:10px;
    border:1px solid rgba(255,80,80,.35);
    box-shadow:0 0 10px rgba(255,0,0,.45);
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#ff4d4d,#d10000);
}

</style>