/* ============================================================
   能量管理小幫手 · 共用樣式（站內浮標 + 獨立助教頁）
   練息場正式視覺系統：品牌藍 #004D89 + 白底粉彩 + 有機圓角
   ============================================================ */
:root{
  /* 配色對齊首頁產品視覺系統（活潑藍＋綠橘紫），標題用無襯線、較輕快 */
  --sb-blue:#2F6BD8; --sb-blue-deep:#003D7C; --sb-blue-mid:#7CA8E8;
  --sb-blue-100:#EAF1FC; --sb-blue-200:#C5DBF7; --sb-blue-300:#A9C8F0;
  --sb-ink:#1A2230; --sb-ink-2:#5A6573; --sb-ink-3:#9AA3B0; --sb-line:rgba(20,34,56,.10);
  --sb-bg:#F6F8FB; --sb-orange:#FF8A33; --sb-green:#4CAF19; --sb-purple:#7A6BD8;
  --sb-pblue:#EAF1FC; --sb-ppeach:#FFE3CC;
  --sb-head:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;
  --sb-body:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
}
/* 章節標頭（挑助教頁，依後台設定分章節）*/
.spr-chtag{align-self:stretch;font-family:var(--sb-head);font-weight:800;font-size:13px;color:var(--sb-blue);letter-spacing:.04em;margin:4px 2px -2px;}

/* ---- 右下角浮標（fab 模式）---- */
.spr-fab{position:fixed;right:22px;bottom:22px;z-index:9000;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--sb-blue-200);border-radius:999px;padding:8px 18px 8px 8px;box-shadow:0 12px 30px rgba(3,38,57,.18);cursor:pointer;font-family:var(--sb-body);transition:transform .15s;}
.spr-fab:hover{transform:translateY(-2px);}
.spr-fab-dot{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#7fb0d8,var(--sb-blue));position:relative;flex-shrink:0;}
.spr-fab-dot::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;opacity:.9;top:12px;left:13px;box-shadow:13px 5px 0 -2px rgba(255,255,255,.75);}
.spr-fab-t{font-size:14px;font-weight:700;color:var(--sb-ink);line-height:1.2;}
.spr-fab-t small{display:block;color:var(--sb-ink-3);font-weight:400;font-size:11.5px;}
.spr-fab-pulse{width:9px;height:9px;border-radius:50%;background:var(--sb-orange);margin-left:-4px;align-self:flex-start;animation:sbpulse 1.9s infinite;}
@keyframes sbpulse{0%{box-shadow:0 0 0 0 rgba(255,153,37,.5)}70%{box-shadow:0 0 0 9px rgba(255,153,37,0)}100%{box-shadow:0 0 0 0 rgba(255,153,37,0)}}

/* ---- 容器：fab 用 scrim 覆蓋置中；page 用整頁置中 ---- */
.spr-scrim{display:none;position:fixed;inset:0;background:rgba(3,38,57,.5);z-index:9001;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.spr-scrim.on{display:flex;}
.spr-stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,var(--sb-pblue),var(--sb-bg) 60%);}

.spr-pop{background:#fff;width:100%;max-width:440px;height:min(80vh,660px);border-radius:24px;box-shadow:0 28px 80px rgba(3,38,57,.4);display:flex;flex-direction:column;overflow:hidden;font-family:var(--sb-body);animation:sbrise .26s ease;}
.spr-stage .spr-pop{box-shadow:0 24px 60px rgba(3,38,57,.18);}
@keyframes sbrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.spr-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--sb-line);}
.spr-ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 34% 30%,#7fb0d8,var(--sb-blue));position:relative;}
.spr-ava::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9;top:11px;left:12px;box-shadow:12px 4px 0 -2px rgba(255,255,255,.75);}
.spr-nm{font-family:var(--sb-head);font-weight:700;font-size:16px;color:var(--sb-ink);flex:1;line-height:1.2;}
.spr-nm small{display:block;font-family:var(--sb-body);font-weight:400;font-size:12px;color:var(--sb-ink-3);}
.spr-x{width:30px;height:30px;border-radius:50%;border:none;background:var(--sb-bg);cursor:pointer;font-size:14px;color:var(--sb-ink-2);flex-shrink:0;}
.spr-x.hide{display:none;}
.spr-back{background:none;border:none;cursor:pointer;font-size:20px;color:var(--sb-ink-2);padding:0 2px;display:none;}
.spr-back.on{display:block;}
.spr-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;background:var(--sb-bg);}
.spr-foot{border-top:1px solid var(--sb-line);padding:12px 14px;display:flex;gap:8px;background:#fff;}
.spr-foot.hide{display:none;}
.spr-foot input{flex:1;border:1px solid var(--sb-line);border-radius:999px;padding:11px 16px;font-family:inherit;font-size:14px;outline:none;}
.spr-foot input:focus{border-color:var(--sb-blue);}
.spr-send{border:none;background:var(--sb-blue);color:#fff;border-radius:999px;padding:0 18px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;}

/* ---- 對話泡泡 / 打字中 ---- */
.spr-bub{max-width:86%;padding:12px 16px;font-size:14.5px;line-height:1.72;border-radius:16px;white-space:pre-line;overflow-wrap:break-word;}
.spr-ai{align-self:flex-start;background:#fff;border:1px solid var(--sb-line);border-bottom-left-radius:4px;color:var(--sb-ink);}
.spr-me{align-self:flex-end;background:var(--sb-blue);color:#fff;border-bottom-right-radius:4px;}
/* AI 給選擇時：淺色可點膠囊 */
.spr-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:stretch;}
.spr-chip{background:var(--sb-blue-100);color:var(--sb-blue-deep);border:1px solid var(--sb-blue-200);border-radius:999px;padding:9px 15px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;}
.spr-chip:hover{background:var(--sb-blue-200);}
.spr-typing{align-self:flex-start;background:#fff;border:1px solid var(--sb-line);border-radius:16px;border-bottom-left-radius:4px;padding:14px 16px;display:flex;gap:5px;}
.spr-typing span{width:7px;height:7px;border-radius:50%;background:var(--sb-blue-mid);animation:sbtd 1.3s infinite;}
.spr-typing span:nth-child(2){animation-delay:.18s;} .spr-typing span:nth-child(3){animation-delay:.36s;}
@keyframes sbtd{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- 選項 / 助教卡 ---- */
.spr-opts{display:flex;flex-direction:column;gap:8px;align-self:stretch;}
.spr-opt{text-align:left;border:1.5px solid var(--sb-blue-200);background:#fff;color:var(--sb-blue);border-radius:14px;padding:12px 15px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .15s;}
.spr-opt:hover{background:var(--sb-pblue);}
.spr-opt .sub{display:block;font-weight:400;font-size:12.5px;color:var(--sb-ink-3);margin-top:2px;}
.spr-pick{border:1.5px solid var(--sb-line);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;background:#fff;transition:all .15s;width:100%;text-align:left;font-family:inherit;}
.spr-pick:hover{border-color:var(--sb-blue-300);background:var(--sb-pblue);}
.spr-pick.lock{opacity:.5;cursor:default;} .spr-pick.lock:hover{background:#fff;border-color:var(--sb-line);}
.spr-pick .pd{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;}
.spr-pick .pn{font-weight:700;font-size:14.5px;color:var(--sb-ink);} .spr-pick .ps{font-size:12.5px;color:var(--sb-ink-3);}
.spr-pick .pst{margin-left:auto;font-size:12px;font-weight:700;flex-shrink:0;}

/* ---- 能量計 / 金字塔 ---- */
.spr-gauge{align-self:stretch;background:#fff;border:1px solid var(--sb-line);border-radius:16px;padding:16px;}
.spr-gauge .big{font-family:var(--sb-head);font-weight:800;font-size:30px;}
.spr-gate{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;}
.spr-gate .gn{width:64px;color:var(--sb-ink-2);flex-shrink:0;}
.spr-gbar{flex:1;height:9px;border-radius:999px;background:var(--sb-blue-100);overflow:hidden;} .spr-gbar i{display:block;height:100%;border-radius:999px;}
/* ---- 理性金字塔（動態 1～5 層；曲線塔身、文字可超出塔邊）---- */
.spr-pyr{align-self:stretch;background:linear-gradient(180deg,#fcfdff,#f3f7fc);border:1px solid #e3ecf6;border-radius:20px;padding:20px 16px 18px;}
.spr-pyr .sp-cap{text-align:center;margin-bottom:6px;}
.spr-pyr .sp-t{font-family:"Songti TC","Noto Serif TC","Noto Serif CJK TC",serif;font-weight:700;font-size:15px;color:#1f4e8c;letter-spacing:3px;}
.spr-pyr .sp-s{font-family:"Songti TC","Noto Serif TC","Noto Serif CJK TC",serif;font-size:11.5px;color:#9aafc4;margin-top:6px;letter-spacing:.6px;}
.spr-pyr .sp-stage{position:relative;width:100%;max-width:360px;margin:0 auto;}
.spr-pyr .sp-stage svg{position:absolute;inset:0;width:100%;height:100%;}
.spr-pyr .sp-tier{position:absolute;left:0;right:0;text-align:center;line-height:1.28;transform:translateY(-50%);pointer-events:none;}
.spr-pyr .sp-evt{font-family:"Songti TC","Noto Serif TC","Noto Serif CJK TC",serif;font-size:13px;font-weight:700;letter-spacing:.3px;color:#1f4068;white-space:nowrap;}
.spr-pyr .sp-pct{font-family:"Songti TC","Noto Serif TC",serif;font-weight:800;margin-left:6px;color:#2f6bd8;}
.spr-pyr .sp-act{display:block;font-size:10.5px;margin-top:1px;color:#647c93;white-space:nowrap;}
.spr-pyr.filled .sp-tier{animation:sbpop .42s cubic-bezier(.22,.61,.36,1) both;}
.spr-pyr.filled .sp-tier:nth-of-type(1){animation-delay:.04s;}
.spr-pyr.filled .sp-tier:nth-of-type(2){animation-delay:.12s;}
.spr-pyr.filled .sp-tier:nth-of-type(3){animation-delay:.2s;}
.spr-pyr.filled .sp-tier:nth-of-type(4){animation-delay:.28s;}
.spr-pyr.filled .sp-tier:nth-of-type(5){animation-delay:.36s;}

/* ---- 超用 / 收斂提醒卡 ---- */
.spr-softstop{align-self:stretch;background:#eef4ff;border:1px solid #cfe0ff;border-radius:16px;padding:14px 15px;}
.spr-softstop h4{font-family:var(--sb-head);font-weight:800;font-size:14.5px;color:var(--sb-blue);margin-bottom:6px;}
.spr-softstop p{font-size:13px;color:var(--sb-ink-2);line-height:1.65;}
.spr-softstop .ssnote{font-size:11.5px;color:var(--sb-ink-3);margin-top:9px;line-height:1.55;}

/* ---- 「也可以直接打字」提示 ---- */
.spr-hint{align-self:flex-start;font-size:11.5px;color:var(--sb-ink-3);margin:1px 2px 2px;}

/* ---- 登入畫面（Phase 1 示意登入）---- */
.spr-login{align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:8px 2px;}
.spr-login h3{font-family:var(--sb-head);font-weight:800;font-size:19px;color:var(--sb-blue);}
.spr-login p{font-size:14px;color:var(--sb-ink-2);}
.spr-login input{border:1px solid var(--sb-line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14.5px;outline:none;}
.spr-login input:focus{border-color:var(--sb-blue);}
.spr-login .go{border:none;background:var(--sb-blue);color:#fff;border-radius:999px;padding:12px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;}
.spr-login .note{font-size:12px;color:var(--sb-ink-3);}

/* ---- 浮現動態 ---- */
.spr-bub,.spr-typing,.spr-gauge,.spr-pyr,.spr-login{animation:sbpop .38s cubic-bezier(.22,.61,.36,1) both;}
.spr-opts>*{animation:sbpop .4s cubic-bezier(.22,.61,.36,1) both;}
.spr-opts>*:nth-child(1){animation-delay:.05s;}.spr-opts>*:nth-child(2){animation-delay:.14s;}.spr-opts>*:nth-child(3){animation-delay:.23s;}.spr-opts>*:nth-child(4){animation-delay:.32s;}
@keyframes sbpop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---- RWD ---- */
@media(max-width:600px){
  .spr-pop{height:86vh;max-width:none;}
  .spr-stage{padding:0;} .spr-stage .spr-pop{height:100vh;border-radius:0;max-width:none;}
  .spr-fab .spr-fab-t{display:none;} .spr-fab{padding:8px;bottom:78px;right:16px;}
}
@media(prefers-reduced-motion:reduce){
  .spr-bub,.spr-typing,.spr-gauge,.spr-pyr,.spr-login,.spr-opts>*{animation:none!important;}
  .spr-body{scroll-behavior:auto;} .spr-fab-pulse{animation:none;}
}