/* style.css — shared styles for Hypno University */
:root{
  --bg:#0f0e13; --panel:#18171f; --panel2:#1e1d26; --ink:#f6f5fb; --muted:#a9a6b6; --orchid:#a65acf; --pink:#ff3ea5; --border:rgba(255,255,255,0.12); --radius:16px; --radius-lg:22px; --shadow:0 14px 48px rgba(0,0,0,.35);
  /* card mode heights */
  --card-default-h: 260px;  /* fits header + nav + ~4 lines of dialogue */
  --card-dress-h: 68vh;     /* fixed dress-up height */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 15% 0%, #15131b, #0b0a0f);color:var(--ink);font:14px/1.45 Inter,system-ui,Segoe UI,Roboto,Arial}

/* Top logo */
.topbar{position:fixed;left:20px;top:16px;z-index:5}
.brandImg{height:41px;width:165px;display:block;object-fit:contain}
.debugWear{margin-top:6px;color:#cfcbe0;font-size:12px;opacity:.85}

/* Center content panel */
.stageWrap{position:fixed;left:50%;transform:translateX(-50%);top:20px;bottom:20px;width:min(840px,calc(100vw - 48px));}
.stage{height:100%;background:#1e1b23;border:1px solid rgba(255,255,255,0.08);border-radius:20px;box-shadow:0 14px 48px rgba(0,0,0,.35);overflow:hidden}
.stageHead{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.08);background:#26222d}
.tabbar{display:flex;gap:8px}
.tab{padding:6px 12px;border-radius:999px;background:#2b2633;border:1px solid rgba(255,255,255,0.10);font-size:12px;color:#eae6f8;cursor:pointer}
.tab i{margin-right:6px}
.tab.on{background:#7a3cff;border-color:#8e60ff;color:#fff}
.stageBody{padding:14px 16px;height:calc(100% - 46px);overflow:auto;background:#1d1a22}

/* Content rows (top-right action pill) */
.stageBody .rowItem{
  position: relative;
  padding: 16px 112px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stageBody .rowTitle{font-weight:700;margin:0 0 6px 0;color:#f3f1fa;line-height:1.2}
.stageBody .rowDesc{color:#b8b3c6;font-size:12px;margin:0}
.chip{font-size:11px;border:1px solid rgba(255,255,255,0.10);padding:3px 8px;border-radius:999px;color:#e6dcff;background:#2a2536}
.stageBody .rowItem .rewardBtn{
  position:absolute; top:12px; right:14px; margin:0;
  background:#7a3cff;border:1px solid #8e60ff;color:#fff;
  font-size:12px;padding:6px 12px;border-radius:12px;cursor:pointer;z-index:1;
}

/* Dialogue backdrop (dim center). Keep under cards (z=6) but above stage */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.25s;z-index:5}
.backdrop.on{opacity:1;pointer-events:auto}

/* User card (base) */
.userCard{
  position:fixed;left:20px;bottom:20px;width:360px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);z-index:6;overflow:visible;max-height:calc(100vh - 80px);
  transition: height .20s ease;
}
.userInner{
  position:relative;padding:14px 14px 12px 140px;border-bottom:1px solid var(--border);
  height:90px; /* fixed header height used by overlay math */
}
.uName{font-weight:800;font-size:18px;color:#f8f6ff;text-transform:lowercase}
.uStats{font-size:13px;color:#d9d6e3}
.uRew{font-size:13px;color:#ffd95e}
.gear{position:absolute;right:12px;top:12px;cursor:pointer;opacity:.85}
.menu{position:absolute;right:12px;top:38px;background:#221f2c;border:1px solid var(--border);border-radius:12px;display:none;flex-direction:column;overflow:hidden;z-index:10}
.menu button{padding:8px 12px;background:transparent;border:none;color:var(--ink);text-align:left;cursor:pointer}
.menu button:hover{background:#2e2a3a}
.navRow{display:flex;gap:8px;padding:10px 14px}
.navBtn{flex:0 0 auto;padding:8px 12px;border-radius:12px;background:#1f1b27;border:1px solid rgba(255,255,255,0.12);color:#efeafd;font-size:12px;cursor:pointer}
.navBtn.on{background:#2a2434;border-color:#6a5a8a}
/* Disable state for nav buttons during dialogue */
.navBtn.disabled,
.navBtn:disabled{opacity: .45;filter: saturate(.1);cursor: not-allowed;}
.dialogue{padding:10px 14px;color:#bdb9cb;min-height:52px}
.ctaRow{display:flex;gap:12px;padding:12px 14px}
.cta{flex:1;padding:12px 14px;border-radius:14px;background:#ff3ea5;border:none;color:#fff;font-weight:800;cursor:pointer}
.cta.alt{background:#2a2434;border:1px solid rgba(255,255,255,0.12);color:#efeafd}

/* ========= Layered avatar ========= */
.avatarBase{
  position:absolute;
  bottom:20px;
  left:-20px;
  width:150px;
  height:180px; /* JS uses this height in its math */
  pointer-events:none;
  z-index:1;
}
.avatarBase .layer{
  position:absolute;
  inset:0;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:contain !important;
  display:block;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background-color:transparent !important;
}

/* Overlay mode in Dress Up (avoid clipping by card)
   JS computes exact left/top; make sure no transforms interfere */
.avatarBase.overlay{
  position:fixed;
  left:0; top:0;
  z-index:10000;
  transform:none !important;
  bottom:auto !important;
}
.userCard.mode-login .avatarBase{ display:none !important; }

/* ===== Card Modes ===== */
.userCard.mode-default{
  height: var(--card-default-h);
  min-height: var(--card-default-h);
  max-height: var(--card-default-h);
  overflow: visible; /* allow in-card avatar to overflow */
}
.userCard.mode-profile{
  height: 55vh;
  min-height: 55vh;
  max-height: 55vh;
  overflow: visible; /* keep avatar from being clipped */
}
.userCard.mode-dress{
  height: var(--card-dress-h);
  min-height: var(--card-dress-h);
  max-height: var(--card-dress-h);
  overflow: hidden;            /* only dress-up should clip */
  display: flex;
  flex-direction: column;
}

/* Hide dialogue in Dress Up and Profile (dialogue is default-mode only) */
.userCard.mode-dress .dialogue,
.userCard.mode-profile .dialogue{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* ===== Dialogue UI ===== */
#dlgToggle, .dlgToggle{
  position:fixed;
  top:12px; right:16px;
  z-index:20;
  appearance:none;
  border:1px solid var(--border);
  background:#2b2633;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font:600 12px/1 Inter, system-ui, Segoe UI, Roboto, Arial;
  cursor:pointer;
  box-shadow:var(--shadow);
}
#dlgToggle:hover, .dlgToggle:hover{ background:#332d3b; }

/* Pink "Next" arrow button */
#dlgNext, .dlgNext{
  position:fixed;
  left:50%;
  bottom:180px;
  transform:translateX(-50%);
  width:64px; height:64px;
  display:none;
  align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--pink);
  color:#fff; border:0; cursor:pointer;
  z-index:30;
  box-shadow:none;
  transition:box-shadow .18s ease, transform .12s ease;
}
#dlgNext.on, .dlgNext.on{ display:flex; }
#dlgNext::after, .dlgNext::after{
  content:"\f061";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:28px;
  line-height:1;
}
#dlgNext:hover, .dlgNext:hover{
  box-shadow:0 18px 40px rgba(255,62,165,.35), 0 0 0 2px rgba(255,62,165,.65) inset;
  transform:translateX(-50%) translateY(-1px);
}

/* Speaking halo */
.userCard.speaking, .teach.speaking{
  box-shadow:0 0 0 2px rgba(255,62,165,.65), 0 0 24px rgba(255,62,165,.35);
  border-color:rgba(255,62,165,.55);
  animation:none !important;
}

/* ===== Profile Panel ===== */
.profilePanel{ display:none; padding:12px 14px 14px; }
.userCard.mode-profile .profilePanel{ display:block; }
.pfRow{ margin:8px 0 12px; }
.pfLabel{ font-weight:700; color:#eae6f8; margin-bottom:6px; }
.pfChips{ display:flex; gap:8px; flex-wrap:wrap; }
.pfChip{
  padding:7px 12px; border-radius:12px;
  background:#1f1b27; border:1px solid rgba(255,255,255,0.12);
  color:#efeafd; font-size:12px; cursor:pointer;
}
.pfChip.on{ background:#2a2434; border-color:#6a5a8a; }
.pfFaceWrap{ display:flex; align-items:center; gap:10px; }
.pfFaceBtn{
  padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background:#201c28; color:#eae6f8; cursor:pointer; font-size:12px;
}
.pfFacePreview{
  width:180px; height:110px; border-radius:12px;
  background:#2a2734 center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.12);
}
.pfSelectWrap{ display:flex; align-items:center; gap:10px; }
.pfSelBtn{
  padding:6px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:#201c28; color:#eae6f8; cursor:pointer; font-size:12px;
}
.pfSelectValue{
  min-width:160px; padding:8px 12px; border-radius:12px; text-align:center;
  background:#2a2734; border:1px solid rgba(255,255,255,0.12);
  color:#f3f1fa; font-weight:600;
}

/* Dress panel (unchanged) */
.dressPanel{display: flex;flex-direction: column;padding: 0 8px 10px 8px;height: 100%;flex: 1 1 auto;}
.dressTabs{display:flex;gap:0;padding:10px 14px 8px 14px;border-bottom:1px solid var(--border);}
.dressTab{appearance:none;background:transparent;border:0;color:#a9a6b6;font:600 13px/1.1 Inter, system-ui, Segoe UI, Roboto, Arial;padding:6px 0;cursor:pointer;position:relative;border-radius:0;}
.dressTab:not(:first-child){margin-left:16px;}
.dressTab:not(:first-child)::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:1px; height:12px;background:rgba(255,255,255,0.18);border-radius:1px;}
.dressTab.on{color:#fff;}
.dressTab.on::after{content:"";position:absolute;left:0; right:0;bottom:-9px;height:2px;background:var(--orchid);border-radius:2px;}
.dressList{flex: 1 1 auto;overflow: auto;position: relative;padding: 12px 6px 6px 6px;padding-right: 18px;}

/* Tiny pill */
.dressList .ms-thumb{
  position:absolute; right:8px; top:0;
  width:6px; height:28px;
  background:rgba(255,255,255,0.34);
  border-radius:999px;
  opacity:0; transition:opacity .2s ease;
  pointer-events:auto; z-index:2;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  cursor:grab;
}
.dressList .ms-thumb:active{ cursor:grabbing; }
.dressList.scrolling .ms-thumb,
.dressList:hover .ms-thumb{ opacity:.95; }

/* Item card */
.duItem{display:flex;gap:12px;align-items:center;background:#221e2b;border:1px solid var(--border);border-radius:14px;padding:10px 10px;margin-bottom:10px}
.duThumb{width:170px;height:98px;border-radius:10px;background:#2a2734 center/cover no-repeat;flex:0 0 auto;border:1px solid rgba(255,255,255,0.08);}
.duMeta{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.duTitle{font-weight:700}
.duState{font-size:12px;color:#a9a6b6}
.duActions{margin-top:6px}
.duBtn{padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:#1f1b27;color:#efeafd;font-size:12px;cursor:pointer}
.duBtn.primary{background:#7a3cff;border-color:#8e60ff;color:#fff}
.duBtn.ghost{background:#2a2434}
.duPrice{font-size:12px;color:#d9d6e3;margin-left:8px}

/* Teacher card */
.teach{
  position:fixed; right:20px; bottom:20px; width:360px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  z-index:6; overflow:visible;
  height: var(--card-default-h);
  min-height: var(--card-default-h);
  max-height: var(--card-default-h);
}
.teachInner{
  position:relative;
  padding:14px 140px 12px 14px;
  border-bottom:1px solid var(--border);
  height:90px;
  overflow:visible;
}
.teachPfpBig{
  position:absolute; right:0px; bottom:0;
  height:180px; width:150px;
  background:center bottom/contain no-repeat; pointer-events:none;
}
.teachName{ font-weight:800; font-size:18px; color:#f8f6ff; text-transform:none; }
.teachSub{ font-size:12px; color:var(--muted); }
.teachBody{
  padding:12px 14px; color:#cfcbe0;
  max-height: calc(var(--card-default-h) - 90px);
  overflow:auto;
}

/* ===== Courses: toolbar + rows ===== */
.courseToolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.08)}
.courseToolbar .chip{margin-right:8px;cursor:pointer}
.courseToolbar .chip.on{background:#7a3cff;border-color:#8e60ff;color:#fff}
.cta.small{padding:8px 12px;border-radius:12px;font-size:12px}

/* Keep small CTAs compact (no full-width flex) */
.cta.small{ flex:0 0 auto; width:auto; min-width:0; }
/* Buttons in the courses toolbar should never stretch */
.courseToolbar .cta{ flex:0 0 auto; }

/* Dialogue line labelling in Create form */
.dlgLineWrap{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.dlgLabel{ flex:0 0 78px; text-align:right; font-size:12px; color:var(--muted); opacity:.9; }

/* Reset absolute button positioning inside the courses toolbar (e.g., Create) */
.courseToolbar .rewardBtn{ position: static !important; top:auto !important; right:auto !important; margin-left:auto; }

/* Fix reward buttons inside course rows (don’t use absolute positioning) */
.stageBody .rowItem.courseRow .rowActions .rewardBtn{ position: static; }

/* Course toolbar buttons shouldn’t stretch full width */
.courseToolbar .cta,
.courseToolbar .cta.small{ flex: 0 0 auto; width: auto; }

/* Legacy cRow styles (kept if you still use them somewhere) */
.cRow{position:relative;padding-right:220px}
.cRow .cActions{position:absolute;right:14px;top:12px;display:flex;gap:8px}
.cAuthor a{color:#9cc2ff;text-decoration:none}

.levelBlock{margin:6px 0 16px}
.levelHead{font-weight:800;color:#e9e6f6;margin:10px 14px 6px}

/* Level grouping “box” (support .levelBox or .levelGroup) */
.levelBox,
.levelGroup{
  background:#221e2b;
  border:1px solid var(--border);
  border-radius:14px;
  margin:6px 14px 16px;
  overflow:hidden;
}
.levelBox .rowItem,
.levelGroup .rowItem{
  margin:0;
  padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.levelBox .rowItem:last-child,
.levelGroup .rowItem:last-child{ border-bottom:0; }
.levelBox .rowItem.courseRow,
.levelGroup .rowItem.courseRow{ display:flex; align-items:center; gap:12px; }
.levelBox .rowMore,
.levelGroup .rowMore{
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:center;
}
.levelBox .rowMore .cta.small,
.levelGroup .rowMore .cta.small{ min-width:120px; }

.rowMore{padding:8px 14px}

/* Course rows: flex so actions never overlap */
.stageBody .rowItem.courseRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 14px;
}
.stageBody .rowItem.courseRow .rowMain{ flex:1 1 auto; min-width:0; }
.stageBody .rowItem.courseRow .rowActions{ flex:0 0 auto; display:flex; gap:8px; }

/* FIX: course row buttons in normal flow */
.stageBody .rowItem.courseRow .rewardBtn{
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Course icons (list & detail) */
.rowIcon{
  width:40px; height:40px; flex:0 0 40px;
  border-radius:10px;
  background:#2a2734 center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.12);
}

/* Icon picker in Create */
.cIconPicker{ display:flex; gap:10px; flex-wrap:wrap; }
.iconPick{
  width:48px; height:48px; border-radius:12px;
  background:#2a2734 center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.12);
  cursor:pointer;
}
.iconPick.on{ outline:2px solid #8e60ff; }

/* Create Course — Day editor grouping */
.dayGroup{
  background:#221e2b;
  border:1px solid var(--border);
  border-radius:14px;
  margin:10px 0;
  padding:0;
}
.dayGroupInner{ padding:12px 14px; }
.dayGroupInner .pfRow{ margin:8px 0 12px; }

/* Create form inputs */
.input, .textarea, select.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:#1f1b27;color:#efeafd}
.textarea{resize:vertical}
.switch{display:flex;align-items:center;gap:8px}
.sep{border:0;border-top:1px solid rgba(255,255,255,0.08);margin:10px 0}

/* Player */
.coursePlay .cDay{border:1px solid var(--border);border-radius:14px;margin:10px 0;overflow:hidden;background:#221e2b}
.coursePlay .cDay.completed{opacity:.85}
.coursePlay .cDayHead{padding:12px 14px;font-weight:700;background:#2a2534}
.coursePlay .cDay.on .cDayHead{background:#7a3cff}
.coursePlay .cDayBody{padding:12px 14px}
.cMedia{ margin:6px 0 12px; }
/* Modern browsers */
.cMedia iframe,
.cMedia video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  border:0;
  border-radius:10px;
  background:#000;
}

/* --- Mini WYSIWYG --- */
.rtToolbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.rtBtn{
  appearance:none;border:1px solid rgba(255,255,255,0.18);background:#231f2b;color:#efeafd;
  border-radius:10px;padding:6px 10px;font:600 12px/1 Inter, system-ui;cursor:pointer
}
.rtBtn.on{background:#7a3cff;border-color:#8e60ff;color:#fff}
.rtArea{
  min-height:140px;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:#1f1b27;
  padding:10px 12px;color:#efeafd; outline:none; overflow:auto
}
.rtArea:empty:before{content:"Type your post…";color:#a9a6b6}


/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .cMedia{ position:relative; }
  .cMedia::before{
    content:"";
    display:block;
    padding-top:56.25%; /* 16:9 */
  }
  .cMedia > iframe,
  .cMedia > video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
}

.cText{margin-bottom:12px;color:#d2cfe0}
/* Only show the body for the active day */
.coursePlay .cDayBody{ display:none; }
.coursePlay .cDay.on .cDayBody{ display:block; }

/* Day card styling (if you use cDayCard container) */
.cDayCard{
  border:1px solid var(--border); border-radius:14px;
  background:#221e2b; overflow:hidden; margin:10px 0;
}
.cDayHead{ padding:10px 14px; font-weight:700; background:#2a2534; }

/* Pager layout & spacing */
.pager{
  display:flex;            /* ensure flex in all contexts */
  justify-content:center;
  gap:8px;                 /* space between page buttons */
  flex-wrap:wrap;          /* avoids squish on small screens */
}

/* Pager chip active state */
.pager .chip.on{
  background:#7a3cff;
  border-color:#8e60ff;
  color:#fff;
}

/* (optional) make pager chips obviously clickable */
.pager .chip{ cursor:pointer; }


/* Responsive */
@media (max-width:980px){
  .stageWrap{left:12px;right:12px;transform:none;width:auto}
  .userCard,.teach{width:calc(100% - 40px)}
  .teach{bottom:calc(20px + 220px)}
}
@media (max-width:560px){
  .stageBody .rowItem{ padding-right:20px; }
  .stageBody .rowItem .rewardBtn{ position:static; display:inline-flex; margin-top:10px; }
  .duThumb{width:120px;height:120px}
  #dlgNext, .dlgNext{ width:56px; height:56px; }
  #dlgNext::after, .dlgNext::after{ font-size:20px; }
}