/* =========================================================
   JIPPIE CUSTOM UI
   One clean override layer for the exported site.
   The toolbar is intentionally laptop-first and deterministic.
   ========================================================= */

/* ---------- Shared / modals ---------- */
#homeSections{display:flex;flex-direction:column}
#homeSections>[data-home-section]{order:0}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,3,14,.78);backdrop-filter:blur(12px)}
.modal.open{display:flex}
.modalPanel{width:min(900px,100%);max-height:min(86vh,820px);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:linear-gradient(145deg,#211a3d,#120e25);box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 50px rgba(154,245,66,.08);display:flex;flex-direction:column;min-height:0}
.modalHead{display:flex;justify-content:space-between;gap:20px;padding:28px 30px 20px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.modalHead h3{font-size:32px;margin:5px 0 8px}
.modalHead p{margin:0;color:var(--muted);max-width:620px;line-height:1.5}
.eyebrow{font:800 10px ui-monospace,monospace;letter-spacing:.16em;color:var(--lime)}
.modalClose{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--fg);width:42px;height:42px;border-radius:50%;font-size:26px;cursor:pointer;flex:0 0 auto}
.modalClose:hover{border-color:var(--lime);color:var(--lime)}
.pickerTools{display:flex;gap:10px;flex-wrap:wrap;padding:18px 30px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.pickerTools input{flex:1 1 260px;width:auto}
.pickerTools .btn{padding:10px 16px}
.gamePickerList{padding:18px 30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:auto;min-height:0;max-height:55vh}
.gameToggle{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:14px;cursor:pointer;transition:.15s}
.gameToggle:hover{border-color:rgba(154,245,66,.45);transform:translateY(-1px)}
.gameToggle input{width:18px;height:18px;accent-color:var(--lime);flex:0 0 auto}
.gameToggle img{width:42px;height:42px;object-fit:cover;border-radius:10px}
.gameToggle span{font-weight:700;min-width:0}
.gameToggle small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.modalFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 30px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);flex:0 0 auto;background:linear-gradient(180deg,rgba(18,14,37,.94),rgba(18,14,37,1))}
.settingsScroll{padding:0;display:block;overflow:auto;min-height:0;flex:1 1 auto;max-height:430px;overscroll-behavior:contain}.settingsList{padding:20px 30px 10px;display:grid;gap:10px;overflow:visible;min-height:0;flex:none}
.settingRow{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:16px;cursor:grab}
.settingRow:active{cursor:grabbing}
.settingRow.dragging{opacity:.5;border-color:var(--lime)}
.dragHandle{font-size:20px;color:var(--muted)}
.settingInfo{flex:1;min-width:0}
.settingInfo b{display:block}
.settingInfo span{font-size:12px;color:var(--muted)}
.settingRow input{width:18px;height:18px;accent-color:var(--lime);cursor:pointer}
.settingRow.hiddenSection{opacity:.5}
.dailyCard{margin-top:22px;padding:20px;border:1px solid rgba(154,245,66,.22);background:linear-gradient(135deg,rgba(154,245,66,.08),rgba(255,62,181,.05));border-radius:22px;display:flex;align-items:center;gap:18px}
.dailyCard img{width:76px;height:76px;border-radius:16px;object-fit:cover}
.dailyCard .dailyInfo{flex:1;min-width:0}
.dailyCard h3{margin:3px 0 5px;font-size:24px}
.dailyCard p{margin:0;color:var(--muted);font-size:13px}

/* ---------- Game controls ---------- */
.barInner{width:min(1240px,calc(100vw - 96px));max-width:1240px;margin:0 auto;display:grid;grid-template-columns:560px minmax(0,1fr);column-gap:20px;align-items:start;box-sizing:border-box}
.barInner .chips{width:560px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,36px);grid-auto-flow:row;align-items:center;justify-content:stretch;gap:6px;overflow:hidden;box-sizing:border-box;min-width:0}
.barInner .chip{width:100%;height:36px;min-height:36px;max-height:36px;margin:0;padding:0 8px;box-sizing:border-box;white-space:nowrap;font-family:inherit;font-weight:400;font-size:13px}
.barInner .chip.active{font-weight:400}

.barInner .barTools{width:100%;min-width:0;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.barInner .barToolsTop{width:100%;min-width:0;display:grid;grid-template-columns:150px 120px minmax(0,1fr);gap:8px;align-items:center;box-sizing:border-box}
.barInner .barToolsBottom{width:100%;min-width:0;display:grid;grid-template-columns:120px 120px 120px minmax(0,1fr);gap:8px;align-items:center;box-sizing:border-box}

.barInner .barToolsTop>* ,
.barInner .barToolsBottom>*{width:100%;min-width:0;height:36px;min-height:36px;max-height:36px;margin:0;padding:0 14px;box-sizing:border-box;white-space:nowrap;font-family:inherit}
.barInner .barToolsTop #sort{appearance:auto;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:var(--fg);border-radius:999px;box-shadow:none;cursor:pointer;outline:none;font-weight:400}
.barInner .barToolsTop #sort option{background:#000;color:#fff}
.barInner .barToolsTop #randomGame{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.06);color:var(--fg);box-shadow:none;font-weight:400}
.barInner .barToolsTop #search{display:block;width:100%;border-radius:999px}
.barInner .barToolsBottom .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.06);color:var(--fg);box-shadow:none;font-weight:400}
.barInner .barToolsBottom .btn:hover{transform:translateY(-1px);border-color:rgba(154,245,66,.5)}

.barInner .madeBy{display:flex;align-items:center;justify-content:center;width:100%;height:36px;min-height:36px;max-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;user-select:none;pointer-events:none;box-sizing:border-box}

/* Keep the site typography consistent. */
html,body,body *{font-family:"Space Grotesk",system-ui,sans-serif !important}

/* ---------- Laptop-only presentation ---------- */
#laptopOnlyNotice{display:none}

@media(max-width:1199px){
  html,body{min-height:100%;overflow:hidden}
  body>*:not(#laptopOnlyNotice){display:none !important}
  #laptopOnlyNotice{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:24px;background:#100d22;color:#f8f5ff}
  .laptopNoticePanel{width:min(560px,100%);padding:38px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:linear-gradient(145deg,#211a3d,#120e25);text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 50px rgba(154,245,66,.08)}
  .laptopNoticeEyebrow{margin:0 0 10px;color:#9af542;font-size:12px;font-weight:800;letter-spacing:.16em}
  .laptopNoticePanel h2{margin:0 0 12px;font-size:clamp(30px,6vw,48px)}
  .laptopNoticePanel p:last-child{margin:0;color:#b8aec9;line-height:1.6}
}

/* Modal sizing on smaller screens. The main site itself is intentionally hidden there. */
@media(max-width:700px){
  .gamePickerList{grid-template-columns:1fr;padding:15px}
  .modalHead,.modalFoot,.pickerTools,.settingsList{padding-left:18px;padding-right:18px}
  .modalHead h3{font-size:26px}
}

/* =========================================================
   FINAL TOOLBAR LOCK — single deterministic desktop layout
   ========================================================= */
.bar#categories .barInner{
  width:min(1240px,calc(100vw - 96px)) !important;
  max-width:1240px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:560px minmax(0,1fr) !important;
  column-gap:20px !important;
  align-items:start !important;
}
.bar#categories .chips{
  width:560px !important;
  min-width:560px !important;
  max-width:560px !important;
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,36px) !important;
  grid-auto-flow:row !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.bar#categories .chips .chip{
  display:flex !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 8px !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.bar#categories .barTools{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.bar#categories .barToolsTop{
  display:grid !important;
  grid-template-columns:150px 120px minmax(0,1fr) !important;
  gap:8px !important;
  width:100% !important;
}
.bar#categories .barToolsBottom{
  display:grid !important;
  grid-template-columns:120px 120px 120px minmax(0,1fr) !important;
  gap:8px !important;
  width:100% !important;
}
.bar#categories .barToolsTop > *,
.bar#categories .barToolsBottom > *{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}


/* Exact category geometry fallback */
.bar#categories .chips{display:grid !important;grid-template-columns:repeat(6,1fr) !important;grid-template-rows:repeat(2,36px) !important;column-gap:8px !important;row-gap:8px !important;}
.bar#categories .chips > .chipPair{grid-column:span 1 !important;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:8px !important;width:100% !important;min-width:0 !important;}

/* Papa Louie icon selector */
.papaLouieIconSetting{margin:0 30px 20px;padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:18px}
.papaLouieIconSettingHead b{display:block}
.papaLouieIconSettingHead span{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.papaLouieIconChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.papaLouieIconChoice{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:14px;cursor:pointer}
.papaLouieIconChoice:hover{border-color:rgba(154,245,66,.45)}
.papaLouieIconChoice input{width:17px;height:17px;accent-color:var(--lime);flex:0 0 auto}
.papaLouieIconChoice img{width:42px;height:42px;object-fit:cover;border-radius:10px;flex:0 0 42px}
.papaLouieIconChoice span{font-size:12px;font-weight:700;overflow-wrap:anywhere}
@media (max-width:700px){.papaLouieIconChoices{grid-template-columns:1fr}.papaLouieIconSetting{margin-left:20px;margin-right:20px}}

/* =========================================================
   OFFLINE + SETTINGS
   ========================================================= */
.jippieOfflineNotice{
  position:fixed;
  left:0;right:0;top:0;
  z-index:95;
  padding:12px 18px;
  background:rgba(16,13,34,.96);
  border-bottom:1px solid rgba(154,245,66,.24);
  box-shadow:0 10px 35px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
}
.jippieOfflineNotice[hidden]{display:none}
.jippieOfflineInner{
  width:min(1050px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
}
.jippieOfflineIcon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(154,245,66,.12);
  color:var(--lime);
  font-size:25px;font-weight:900;
  flex:0 0 auto;
}
.jippieOfflineText{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.jippieOfflineText strong{font-size:15px;color:#fff}
.jippieOfflineText span{font-size:12px;color:var(--muted)}
.settingsExtras{padding:10px 30px 20px}
.settingsExtras .papaLouieIconSetting{margin:0 0 14px}
.settingsActions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.dangerBtn{border-color:rgba(255,80,100,.28)!important;color:#ff9aa7!important}
@media(max-width:700px){
  .jippieOfflineInner{align-items:flex-start;flex-wrap:wrap}
  .jippieOfflineText{min-width:calc(100% - 58px)}
  .jippieOfflineInner .btn{margin-left:54px}
  .settingsExtras{padding-left:20px;padding-right:20px}
}

/* Settings icon chooser: always part of the original Settings modal, never a floating popup. */
#settingsModal .papaLouieIconSetting,
#settingsModal .papaLouieIconSettingHead,
#settingsModal .papaLouieIconChoices,
#settingsModal .papaLouieIconChoice,
#settingsModal .settingsActions{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  animation:none !important;
  float:none !important;
}
#settingsModal .papaLouieIconSetting{display:block !important;width:auto !important;max-width:none !important;}
#settingsModal .papaLouieIconChoices{display:grid !important;}
#settingsModal .settingsActions{display:flex !important;}

/* Settings extras are part of the original modal flow and only appear when scrolled down. */
#settingsModal .settingsScroll{position:static !important;inset:auto !important;transform:none !important;}
#settingsModal .settingsExtras,#settingsModal .papaLouieIconSetting,#settingsModal .settingsActions{position:static !important;inset:auto !important;transform:none !important;animation:none !important;float:none !important;will-change:auto !important;}
#settingsModal .settingsExtras{display:block !important;}


/* Settings modal: the content itself is the only scroll area. */
#settingsModal .settingsPanel{max-height:min(86vh,820px) !important;min-height:0 !important;}
#settingsModal .settingsScroll{height:auto !important;max-height:none !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;display:block !important;flex:1 1 auto !important;scrollbar-width:thin !important;overscroll-behavior:contain !important;}
#settingsModal .settingsList{padding-bottom:18px !important;}
#settingsModal .settingsExtras{padding-top:0 !important;}
#settingsModal .papaLouieIconSetting{margin:0 0 14px !important;padding:0 !important;background:transparent !important;border:0 !important;}
#settingsModal .papaLouieIconSettingRow{width:100% !important;display:flex !important;align-items:center !important;gap:12px !important;padding:12px !important;border:1px solid rgba(255,255,255,.10) !important;background:rgba(255,255,255,.035) !important;border-radius:14px !important;color:var(--fg) !important;text-align:left !important;cursor:pointer !important;}
#settingsModal .papaLouieIconSettingRow:hover{border-color:rgba(154,245,66,.45) !important;}
#settingsModal .papaLouieIconSettingRow>img{width:42px !important;height:42px !important;object-fit:cover !important;border-radius:10px !important;flex:0 0 42px !important;}
#settingsModal .papaLouieIconSettingText{display:flex !important;flex-direction:column !important;gap:3px !important;flex:1 !important;min-width:0 !important;}
#settingsModal .papaLouieIconSettingText b{font-size:13px !important;}
#settingsModal .papaLouieIconSettingText small{font-size:11px !important;color:var(--muted) !important;}
#settingsModal .papaLouieIconArrow{font-size:26px !important;color:var(--muted) !important;transition:transform .15s ease,color .15s ease !important;}
#settingsModal .papaLouieIconSettingRow.open .papaLouieIconArrow{transform:rotate(90deg) !important;color:var(--lime) !important;}
#settingsModal .papaLouieIconChoices[hidden]{display:none !important;}
#settingsModal .papaLouieIconChoices{padding:10px !important;margin-top:8px !important;grid-template-columns:1fr !important;background:rgba(0,0,0,.12) !important;border-radius:14px !important;}
#settingsModal .papaLouieIconChoice{padding:9px !important;}
#settingsModal .settingsActions{margin-bottom:8px !important;}
#settingsModal .settingsList{min-height:430px !important;box-sizing:border-box !important;}
#settingsModal .settingsList::before{content:'Homepage Settings';display:block;font-size:12px;font-weight:800;color:#fff;margin:0 0 2px 2px;}
#settingsModal .settingsExtras::before{content:'Other Settings';display:block;font-size:12px;font-weight:800;color:#fff;margin:0 0 10px 2px;}

/* Final stability pass: keep Papa Louie icon controls compact and inside the Settings modal. */
#settingsModal .papaLouieIconSettingRow{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:66px !important;
  max-height:66px !important;
  overflow:hidden !important;
}
#settingsModal .papaLouieIconSettingRow img{
  display:block !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:cover !important;
  object-position:center !important;
  flex:0 0 42px !important;
}
#settingsModal .papaLouieIconSettingText{overflow:hidden !important;}
#settingsModal .papaLouieIconSettingText b,
#settingsModal .papaLouieIconSettingText small{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#settingsModal .papaLouieIconChoices{box-sizing:border-box !important;overflow:hidden !important;}
#settingsModal .papaLouieIconChoice{box-sizing:border-box !important;min-width:0 !important;overflow:hidden !important;}

/* Final Jippie AI layout: three clean columns, with the model controls in the left column. */
@media(min-width:701px){
  .app-window-content{
    display:grid !important;
    grid-template-columns:250px minmax(0,1fr) 330px !important;
    grid-template-rows:minmax(0,1fr) !important;
    height:calc(100vh - 58px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .main-column{
    grid-column:1 / 3 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:250px minmax(0,1fr) !important;
    grid-template-rows:auto auto minmax(0,1fr) auto !important;
    border:0 !important;
    background:transparent !important;
  }
  .main-column h1,
  .main-column .jippieAiHeading{
    grid-column:2 !important;
    grid-row:1 !important;
    height:74px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 28px !important;
    border-bottom:1px solid var(--j-border) !important;
  }
  .main-column > #model-select{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start !important;
    margin:22px 18px 0 !important;
    width:calc(100% - 36px) !important;
    height:42px !important;
  }
  .main-column > #model-info{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:4px 18px 0 !important;
    width:auto !important;
  }
  .main-column > #resource-warning{
    grid-column:1 !important;
    grid-row:3 !important;
    align-self:end !important;
    margin:18px !important;
  }
  .main-column > #top-status-container{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:10px 28px 0 !important;
    min-height:28px !important;
  }
  .main-column > #output{
    grid-column:2 !important;
    grid-row:3 !important;
    align-self:stretch !important;
    min-height:0 !important;
    height:auto !important;
    margin:10px 28px 10px !important;
    overflow-y:auto !important;
  }
  .main-column > #chat-form{
    grid-column:2 !important;
    grid-row:4 !important;
    align-self:end !important;
    margin:0 28px 18px 110px !important;
    width:auto !important;
  }
  .main-column > .button-container{
    position:absolute !important;
    left:268px !important;
    bottom:31px !important;
    margin:0 !important;
    z-index:10 !important;
  }
  .sidebar-column{
    grid-column:3 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    padding:22px !important;
    border-left:1px solid var(--j-border) !important;
    border-right:0 !important;
  }
  .jippie-ai-logo{width:40px !important;height:40px !important;}
  .jippie-ai-title strong{font-size:24px !important;}
}