/* 東方小助教｜全站浮動小工具
 * 由 build_assistant.py 產生，不要直接改這個檔，改 src/ 之後重跑。
 * 視覺沿用佳慧老師的原始設計，只做了「上站必要」的收斂。 */

/* 變數只掛在元件的兩個根上，不放 :root——避免污染全站 */
.xf-launcher, .xf-panel{
  --xf-gold:#F2B705; --xf-gold-soft:#FBE7A8;
  --xf-navy:#1F2A44;  --xf-navy-soft:#3B4A6B;
  --xf-cream:#FFF8E7; --xf-ink:#2B2118; --xf-ink-soft:#6B6055;
  --xf-leaf:#4CAF50;  --xf-leaf-soft:#E4F3E4; --xf-white:#FFFFFF;
  --xf-size:104px;    --xf-bottom:24px;
  /* 原本靠 html,body 那條規則帶下來的，剝掉之後要自己補，
     否則底下一堆 font-family:inherit 會繼承到主題的字體 */
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  box-sizing:border-box;
}
.xf-launcher *, .xf-panel *{ box-sizing:border-box; }

/* ---------- 浮動按鈕 ---------- */
  .xf-launcher{
    position:fixed;
    right:24px;
    bottom:24px;
    width:104px;
    height:104px;
    border:none;
    border-radius:50%;
    background:var(--xf-gold);
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 26px rgba(31,42,68,0.24), 0 3px 8px rgba(31,42,68,0.16);
    animation:xf-bob 3.2s ease-in-out infinite;
    z-index:9998;
  }
  .xf-launcher::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:3px solid var(--xf-gold);
    opacity:0.55;
    animation:xf-ring 2.6s ease-out infinite;
  }
  .xf-launcher img{
    width:92%;
    height:92%;
    object-fit:contain;
    pointer-events:none;
  }
  .xf-launcher .xf-dot{
    position:absolute;
    top:4px;
    right:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#E74C3C;
    border:3px solid var(--xf-white);
  }
  .xf-launcher:hover{filter:brightness(1.04);}
  .xf-launcher.xf-open{animation:none;}
  .xf-launcher.xf-open::before{display:none;}

  @keyframes xf-bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @keyframes xf-ring{
    0%{transform:scale(1);opacity:0.5;}
    100%{transform:scale(1.35);opacity:0;}
  }

  /* ---------- 聊天面板 ---------- */
  .xf-panel{
    position:fixed;
    right:24px;
    bottom:150px;
    width:336px;
    max-width:calc(100vw - 32px);
    height:560px;
    max-height:calc(100vh - 150px);
    background:var(--xf-cream);
    border-radius:22px 22px 18px 18px;
    box-shadow:0 20px 46px rgba(31,42,68,0.28);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:scale(0.92) translateY(14px);
    opacity:0;
    pointer-events:none;
    transition:transform .22s cubic-bezier(.34,1.4,.64,1), opacity .18s ease;
    z-index:9999;
  }
  .xf-panel.xf-visible{
    transform:scale(1) translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .xf-header{
    background:var(--xf-navy);
    color:var(--xf-white);
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  .xf-header .xf-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--xf-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
  }
  .xf-header .xf-avatar img{width:82%;height:82%;object-fit:contain;}
  .xf-header .xf-title{flex:1;min-width:0;}
  .xf-header .xf-name{font-size:15px;font-weight:600;}
  .xf-header .xf-tagline{font-size:11.5px;color:#C9D2E6;margin-top:2px;}
  .xf-header .xf-close{
    background:none;border:none;color:#C9D2E6;
    font-size:20px;line-height:1;cursor:pointer;
    padding:4px;
    border-radius:6px;
  }
  .xf-header .xf-close:hover{background:rgba(255,255,255,0.12);color:var(--xf-white);}
  .xf-header .xf-back{
    background:none;border:none;color:#C9D2E6;font-size:19px;cursor:pointer;
    padding:4px 6px;border-radius:6px;flex-shrink:0;display:none;
  }
  .xf-header .xf-back:hover{background:rgba(255,255,255,0.12);color:var(--xf-white);}

  /* ---------- 兩個視圖：介紹頁／對話頁 ---------- */
  .xf-view{display:none;flex:1;min-height:0;flex-direction:column;}
  .xf-view.xf-view-active{display:flex;}

  .xf-intro{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:20px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .xf-intro::-webkit-scrollbar{width:6px;}
  .xf-intro::-webkit-scrollbar-thumb{background:#E3D6AE;border-radius:6px;}

  .xf-hero{text-align:center;}
  .xf-hero .xf-hero-avatar{
    width:76px;height:76px;margin:0 auto 8px;border-radius:50%;
    background:var(--xf-gold);display:flex;align-items:center;justify-content:center;
  }
  .xf-hero .xf-hero-avatar img{width:88%;height:88%;object-fit:contain;}
  .xf-hero .xf-hero-avatar--wide{
    width:auto;height:auto;background:none;border-radius:0;margin-bottom:2px;
  }
  .xf-hero .xf-hero-avatar--wide img{width:auto;height:130px;max-width:100%;object-fit:contain;}
  .xf-hero h2{margin:0;font-size:17.5px;color:var(--xf-navy);}
  .xf-hero .xf-hero-sub{margin-top:4px;font-size:13px;color:var(--xf-ink-soft);}

  .xf-intro p{margin:0;font-size:13px;line-height:1.75;color:var(--xf-ink);}
  .xf-intro h3{margin:0 0 6px;font-size:13.5px;color:var(--xf-navy);}

  .xf-flow{
    font-size:12.5px;line-height:1.8;color:var(--xf-ink);
    background:var(--xf-white);border-radius:12px;padding:11px 13px;
    box-shadow:0 1px 2px rgba(31,42,68,0.07);
  }

  .xf-pillrow{display:flex;flex-wrap:wrap;gap:6px;}
  .xf-pill{
    font-size:12px;padding:5px 11px;border-radius:999px;
    background:var(--xf-leaf-soft);color:#2E6B31;border:1px solid #CFE8CF;
  }

  .xf-divider{height:1px;background:#EEE1C0;}

  .xf-escalate{background:var(--xf-navy);color:var(--xf-white);border-radius:14px;padding:13px 14px;}
  .xf-escalate-top{display:flex;align-items:center;gap:8px;}
  .xf-escalate-icon{width:46px;height:46px;object-fit:contain;flex-shrink:0;}
  .xf-escalate h3{color:var(--xf-gold-soft);margin:0;}
  .xf-escalate p{color:#DCE3F0;margin-top:8px;}
  .xf-escalate .xf-escalate-line{
    margin-top:9px;font-size:12.5px;color:var(--xf-gold-soft);font-weight:600;line-height:1.6;
  }

  .xf-brandline{text-align:center;padding-top:2px;}
  .xf-brandline .xf-brand-name{font-size:14.5px;font-weight:700;color:var(--xf-navy);}
  .xf-brandline .xf-brand-tag{font-size:11.5px;color:var(--xf-ink-soft);margin-top:2px;}

  .xf-cta{
    margin-top:2px;
    border:none;
    background:var(--xf-gold);
    color:var(--xf-navy);
    font-size:14px;
    font-weight:700;
    padding:13px 16px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(242,183,5,0.35);
  }
  .xf-cta:hover{filter:brightness(1.03);}
  .xf-cta:active{transform:scale(0.98);}

  .xf-body{
    flex:1;
    overflow-y:auto;
    padding:16px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .xf-body::-webkit-scrollbar{width:6px;}
  .xf-body::-webkit-scrollbar-thumb{background:#E3D6AE;border-radius:6px;}

  .xf-msg{
    display:flex;
    gap:8px;
    max-width:88%;
  }
  .xf-msg.xf-from-bot{align-self:flex-start;}
  .xf-msg.xf-from-user{align-self:flex-end;flex-direction:row-reverse;}
  .xf-msg .xf-bubble-avatar{
    width:48px;height:48px;border-radius:50%;
    background:var(--xf-gold);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    margin-top:2px;
    overflow:hidden;
  }
  .xf-msg .xf-bubble-avatar img{width:82%;height:82%;object-fit:contain;}
  .xf-bubble{
    font-size:13.5px;
    line-height:1.6;
    padding:9px 12px;
    border-radius:14px;
    white-space:pre-wrap;
    word-break:break-word;
  }
  .xf-from-bot .xf-bubble{
    background:var(--xf-white);
    color:var(--xf-ink);
    border-bottom-left-radius:4px;
    box-shadow:0 1px 2px rgba(31,42,68,0.08);
  }
  .xf-from-user .xf-bubble{
    background:var(--xf-navy);
    color:var(--xf-white);
    border-bottom-right-radius:4px;
  }

  .xf-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:2px 0 4px 56px;
  }
  .xf-chip{
    border:1.5px solid var(--xf-gold);
    background:var(--xf-white);
    color:var(--xf-navy);
    font-size:12.5px;
    padding:6px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease;
  }
  .xf-chip:hover{background:var(--xf-gold-soft);}
  .xf-chip:active{transform:scale(0.96);}

  .xf-quickrow{
    display:flex;
    gap:6px;
    padding:8px 12px 0;
    flex-shrink:0;
    overflow-x:auto;
  }
  .xf-quick-btn{
    flex:0 0 auto;
    font-size:12px;
    padding:6px 11px;
    border-radius:999px;
    border:1.5px solid var(--xf-navy-soft);
    background:var(--xf-white);
    color:var(--xf-navy);
    cursor:pointer;
    white-space:nowrap;
  }
  .xf-quick-btn:hover{background:var(--xf-cream);}
  .xf-quick-btn:active{transform:scale(0.96);}
  .xf-quick-btn--teacher{border-color:var(--xf-leaf);color:#2E6B31;}
  .xf-quick-btn--teacher:hover{background:var(--xf-leaf-soft);}

  .xf-footnote{
    font-size:11px;
    color:var(--xf-ink-soft);
    text-align:center;
    padding:6px 0 2px;
  }

  .xf-inputbar{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:var(--xf-white);
    border-top:1px solid #EEE3C8;
  }
  .xf-inputbar input{
    flex:1;
    border:1.5px solid #E7DCC0;
    border-radius:999px;
    padding:9px 14px;
    font-size:13.5px;
    outline:none;
    font-family:inherit;
    color: var(--xf-ink);
    background: var(--xf-cream);
  }
  .xf-inputbar input:focus{border-color:var(--xf-gold);}
  .xf-send{
    width:36px;height:36px;
    border-radius:50%;
    border:none;
    background:var(--xf-leaf);
    color:var(--xf-white);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .xf-send:hover{filter:brightness(1.06);}
  .xf-send svg{width:16px;height:16px;}

  @media (max-width:420px){
    .xf-panel{
      right:12px;
      left:12px;
      width:auto;
      bottom:126px;
    }
    .xf-launcher{right:16px;bottom:16px;width:92px;height:92px;}
  }


/* ── 上站用的收斂（預覽版沒有這些） ───────────────────────── */

/* 尺寸與位置改吃變數，好在有閱讀器的頁面整組縮小 */
.xf-launcher{ width:var(--xf-size); height:var(--xf-size); bottom:var(--xf-bottom); }
.xf-panel{
  bottom: calc(var(--xf-bottom) + var(--xf-size) + 22px);
  /* 100dvh 而不是 100vh：手機瀏覽器的工具列會把 vh 算進去，面板底部會被裁掉 */
  max-height: calc(100dvh - var(--xf-bottom) - var(--xf-size) - 40px);
}
@media (max-width:420px){
  .xf-launcher, .xf-panel{ --xf-size:92px; --xf-bottom:16px; }
}

/* 面板內容捲到底時不要把背後的講義一起捲走 */
.xf-steps, .xf-intro, .xf-body{ overscroll-behavior: contain; }

/* 有線上閱讀器的頁面：鈕縮小，並把分頁器右緣讓出來。
   ⚠️ .xuebar-nav 這條是覆蓋 xuebar-reader.php 的樣式，寫在這裡是刻意的：
   載入順序在後、又多一層 body.xb-has-reader 的特異性，所以閱讀器本身一個字都不用改
   （符合網站維運筆記第 7 條「新增優於覆寫」）。改分頁器版面時要一起看這裡。 */
body.xb-has-reader .xf-launcher{ --xf-size:64px; --xf-bottom:16px; }
body.xb-has-reader .xuebar-nav{ padding-right:88px; }   /* 64+16+8 */
@media (max-width:480px){
  body.xb-has-reader .xf-launcher{ --xf-size:56px; --xf-bottom:12px; }
  body.xb-has-reader .xuebar-nav{ padding-right:76px; }
}

/* 讀講義時關掉脈衝光環：全站永久跑的 infinite 動畫會干擾閱讀也吃電 */
body.xb-has-reader .xf-launcher::before{ animation:none; opacity:0.35; }

/* 閱讀器列印時本來就會顯示「不提供列印」，不能在那張稿上留一顆浮動鈕 */
@media print{ .xf-launcher, .xf-panel{ display:none !important; } }

@media (prefers-reduced-motion: reduce){
  .xf-launcher, .xf-launcher::before{ animation:none !important; }
  .xf-panel{ transition:none !important; }
}

/* 紅點看過就不再出現 */
.xf-launcher.xf-seen .xf-dot{ display:none; }