/* ==========================================================
   Legacy AI controlled 90% viewport fit + original pill restore
   Purpose:
   - preserve the original recommendation header/pill layout
   - prevent 100% browser clipping without requiring browser zoom
   - keep the roulette wheel visually stronger than a full 90% zoom
   ========================================================== */

html, body {
  overflow: hidden !important;
}

/* App shell: keep inside viewport with no top clipping */
body {
  margin: 0 !important;
  padding: 0 !important;
}

.app,
.app-shell,
.legacy-app,
.dashboard-shell,
.main-shell,
#app,
#legacyApp {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Slight global tightening, similar to the user's 90% browser zoom but not as aggressive */
.dashboard,
.dashboard-main,
.main-dashboard,
.content-area,
.main-content,
.page-content {
  box-sizing: border-box !important;
}

/* Restore the 3 recommendation pills above the tabs/content */
.session-summary-row,
.session-summary-strip,
.recommendation-summary-row,
.rec-summary-row,
.recommendation-pills-row,
.rec-pills-row,
#recommendationPills,
#sessionSummaryPills {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
}

/* Keep pill size clean and compact */
.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: 24px !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Recommendation box: restore normal top position and stop the green content box being jammed into the tabs */
.recommendation-toolbar,
.recommendation-topbar,
.rec-toolbar,
.rec-topbar,
.strategy-rec-toolbar,
.strategy-recommendation-toolbar,
.recommendation-header,
.recommendations-header,
.strategy-rec-header {
  display: block !important;
}

.recommendation-tabs,
.rec-tabs,
.strategy-tabs,
.tab-header,
.tabs-header {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

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

/* Session Controls: smaller buttons, two-row layout, no 3rd line */
.session-controls,
.session-controls-panel,
.session-controls-box {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  min-height: auto !important;
  max-height: 112px !important;
  overflow: hidden !important;
}

.session-controls button,
.session-controls .pill,
.session-controls .control-btn,
.session-controls .action-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.session-controls .button-group,
.session-controls .controls-right,
.session-controls .session-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  row-gap: 5px !important;
  align-content: center !important;
}

/* Slightly reduce dead vertical spacing across dashboard without changing logic */
.top-row,
.header-row,
.cards-row {
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.bottom-row,
.dashboard-bottom,
.roulette-bottom {
  margin-top: 8px !important;
}

/* Keep the wheel a little larger than the 90% browser zoom effect */
.roulette-wheel,
.wheel,
.wheel-wrap,
.wheel-container,
#rouletteWheel,
#wheelContainer {
  transform-origin: center center !important;
}

/* If wheel was shrunk by scaling CSS, counter it slightly */
@media (min-width: 1400px) and (min-height: 800px) {
  .roulette-wheel,
  .wheel,
  #rouletteWheel {
    scale: 1.06;
  }
}

/* At very short heights, be a little tighter so the bottom never clips */
@media (max-height: 850px) {
  .session-controls,
  .session-controls-panel,
  .session-controls-box {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .session-controls button,
  .session-controls .pill,
  .session-controls .control-btn,
  .session-controls .action-btn {
    height: 22px !important;
    min-height: 22px !important;
    padding: 3px 9px !important;
    font-size: 9.5px !important;
  }

  .session-summary-row,
  .session-summary-strip,
  .recommendation-summary-row,
  .rec-summary-row {
    margin-bottom: 5px !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>