/* 阿輝 AI 聊天室 — 沿用站方視覺：主藍 #0071dc、強調黃 #ffc221、深藍 #031f42 */
.odr-ai-root{
  --blue:#0071dc; --blue-dk:#005cb4; --navy:#031f42; --amber:#ffc221;
  --ink:#19222d; --ink-soft:#5c6672; --ink-faint:#8a939e;
  --bg:#f6f8fa; --surface:#fff; --rule:#e3e8ee; --rule-soft:#eef2f6;
  --user-bg:#0071dc; --user-ink:#fff;
  font-family:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  color:var(--ink); display:flex; gap:0; background:var(--surface); position:relative;
  border:1px solid var(--rule); border-radius:10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(3,31,66,.05),0 12px 32px -20px rgba(3,31,66,.25);
}
.odr-ai-root *,.odr-ai-root *::before,.odr-ai-root *::after{box-sizing:border-box}
/* 主題會對 button 下 font-size/padding，容器內一律歸零重來 */
.odr-ai-root button{margin:0; padding:0; border:0; background:none;
  font-family:inherit; letter-spacing:0; text-transform:none; -webkit-appearance:none; appearance:none}

/* ── 側欄：對話清單 ── */
.oai-side{width:236px; flex:0 0 236px; border-right:1px solid var(--rule);
  background:var(--bg); display:flex; flex-direction:column}
.oai-side-hd{padding:14px 14px 10px; border-bottom:1px solid var(--rule-soft)}
/* 主題有 button:not(...){font-size:16px} 這類高特異性規則，會蓋掉單一 class；
   一律用 .odr-ai-root 前綴提高特異性，並改用 flex 置中而非靠 line-height。 */
.odr-ai-root .oai-new{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:40px; padding:0 12px;
  border:1px solid var(--blue); background:var(--blue); color:#fff;
  font-family:inherit; font-size:14px; font-weight:600; line-height:1;
  border-radius:7px; cursor:pointer; text-align:center; box-sizing:border-box}
.odr-ai-root .oai-new:hover{background:var(--blue-dk)}
.oai-new:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.oai-list{flex:1; overflow-y:auto; padding:8px}
.odr-ai-root .oai-conv{display:block; width:100%; text-align:left; border:0; background:none;
  padding:9px 10px; border-radius:6px; cursor:pointer; box-sizing:border-box;
  font-family:inherit; font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-soft)}
.oai-conv:hover{background:var(--rule-soft); color:var(--ink)}
.oai-conv[aria-current="true"]{background:#e7f1fd; color:var(--blue); font-weight:600}
.oai-conv small{display:block; color:var(--ink-faint); font-size:11.5px; margin-top:2px; font-weight:400}
.oai-empty{padding:16px 12px; color:var(--ink-faint); font-size:13px; line-height:1.6}

/* ── 主區 ── */
.oai-main{flex:1; min-width:0; display:flex; flex-direction:column}
.oai-log{flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:18px; scroll-behavior:smooth}

.oai-hello{margin:auto; text-align:center; max-width:440px; color:var(--ink-soft)}
.oai-hello h3{margin:0 0 8px; font-size:19px; color:var(--ink)}
.oai-hello p{margin:0 0 18px; font-size:14px; line-height:1.7}
.oai-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.odr-ai-root .oai-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:0 14px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-soft);
  border-radius:17px; font-family:inherit; font-size:13px; font-weight:400;
  line-height:1; cursor:pointer; white-space:nowrap; box-sizing:border-box}
.odr-ai-root .oai-chip:hover{border-color:var(--blue); color:var(--blue)}

.oai-msg{display:flex; gap:11px; max-width:100%}
.oai-msg.me{flex-direction:row-reverse}
.oai-av{flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.oai-msg.me .oai-av{background:var(--blue)}
.oai-bubble{max-width:min(760px,82%); padding:12px 15px; border-radius:12px;
  background:var(--bg); font-size:15px; line-height:1.85; overflow-wrap:anywhere}
.oai-msg.me .oai-bubble{background:var(--user-bg); color:var(--user-ink)}
.oai-bubble>*:first-child{margin-top:0}
.oai-bubble>*:last-child{margin-bottom:0}
.oai-bubble h3,.oai-bubble h4{margin:16px 0 7px; font-size:15px; line-height:1.5}
.oai-bubble p{margin:0 0 11px}
.oai-bubble ul,.oai-bubble ol{margin:0 0 11px; padding-left:1.45em}
.oai-bubble li{margin-bottom:5px}
.oai-bubble hr{border:0; border-top:1px solid var(--rule); margin:14px 0}
.oai-bubble code{background:rgba(3,31,66,.07); padding:1px 5px; border-radius:4px;
  font-family:ui-monospace,Menlo,monospace; font-size:.9em}
.oai-bubble strong{font-weight:700}
/* 具體參數：你的 prompt 要求強制引用數值，讓它們一眼可見 */
.oai-bubble mark.p{background:#fff4d6; box-shadow:inset 0 -2px 0 var(--amber);
  color:var(--ink); padding:0 3px; border-radius:3px;
  font-family:ui-monospace,Menlo,monospace; font-size:.93em}

.oai-src{margin-top:9px; padding-top:8px; border-top:1px dashed var(--rule); font-size:12px; color:var(--ink-faint)}
.oai-src b{color:var(--ink-soft); font-weight:600}

.oai-dots{display:inline-flex; gap:4px; padding:3px 0}
.oai-dots i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:oai-b 1.3s infinite}
.oai-dots i:nth-child(2){animation-delay:.18s}
.oai-dots i:nth-child(3){animation-delay:.36s}
@keyframes oai-b{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.oai-dots i{animation:none;opacity:.5}}

/* ── 輸入區 ── */
.oai-foot{border-top:1px solid var(--rule); padding:12px 16px 14px; background:var(--surface)}
.oai-quota{display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:12px; color:var(--ink-faint)}
.oai-bar{flex:1; max-width:190px; height:5px; background:var(--rule-soft); border-radius:3px; overflow:hidden}
.oai-bar i{display:block; height:100%; background:var(--blue); border-radius:3px; transition:width .3s}
.oai-bar.warn i{background:var(--amber)}
.oai-bar.crit i{background:#d63638}
.oai-form{display:flex; gap:9px; align-items:flex-end}
.odr-ai-root .oai-ta{flex:1; min-width:0; resize:none; box-sizing:border-box;
  border:1px solid var(--rule); border-radius:9px; padding:11px 13px;
  font-family:inherit; font-size:15px; line-height:1.6; color:var(--ink);
  max-height:150px; min-height:46px; height:46px; background:var(--surface)}
.oai-ta:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,220,.13)}
.odr-ai-root .oai-send{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; height:46px; padding:0 22px;
  border:0; background:var(--blue); color:#fff; border-radius:9px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1;
  cursor:pointer; box-sizing:border-box}
.odr-ai-root .oai-send:hover:not(:disabled){background:var(--blue-dk)}
.odr-ai-root .oai-send:disabled{background:var(--rule); color:var(--ink-faint); cursor:not-allowed}
.oai-send:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.oai-warn{margin:9px 0 0; padding:11px 13px; background:#fff8e6; border:1px solid var(--amber);
  border-radius:8px; font-size:13.5px; line-height:1.7; color:#6b4d00}
.oai-warn a{color:var(--blue-dk)}

/* ── 未登入 / 未訂閱 ── */
.odr-ai-notice{border:1px solid var(--rule,#e3e8ee); border-radius:10px; padding:26px;
  font-family:"Noto Sans TC",sans-serif; background:#f6f8fa; line-height:1.85}
.odr-ai-notice ol{margin:10px 0 0; padding-left:1.4em}
.odr-ai-btn{display:inline-block; background:#0071dc; color:#fff !important; padding:10px 22px;
  border-radius:7px; text-decoration:none; font-weight:600; margin-top:6px}
.odr-ai-sub{font-size:13.5px; color:#5c6672; margin-top:10px}

@media (max-width:860px){
  .odr-ai-root{flex-direction:column}
  .oai-side{width:auto; flex:0 0 auto; border-right:0; border-bottom:1px solid var(--rule); max-height:172px}
  .oai-log{padding:16px 14px}
  .oai-bubble{max-width:88%}
}

/* ── 頂欄：目前這段對話 + 匯出 ── */
.oai-top{display:flex; align-items:center; gap:12px; padding:9px 16px;
  border-bottom:1px solid var(--rule); background:var(--surface)}
/* display:flex 的優先權會蓋過 hidden 屬性的 UA 樣式，
   不補這條，還沒有對話時匯出鈕就先冒出來，按下去只會得到一份空檔 */
.odr-ai-root .oai-top[hidden]{display:none}
.oai-top-t{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oai-top-acts{flex:0 0 auto; display:flex; gap:8px}
.odr-ai-root .oai-exp{
  display:inline-flex; align-items:center; min-height:30px; padding:0 11px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-soft);
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1;
  border-radius:7px; cursor:pointer; white-space:nowrap}
.odr-ai-root .oai-exp:hover:not(:disabled){border-color:var(--blue); color:var(--blue)}
.odr-ai-root .oai-exp:disabled,.odr-ai-root .oai-exp[aria-disabled="true"]{
  color:var(--ink-faint); border-color:var(--rule-soft); cursor:not-allowed}
/* PDF 鈕在能直接下載時是 <a>，要跟 button 對齊 */
.odr-ai-root a.oai-exp{text-decoration:none}
.oai-tip{align-self:center; margin-right:2px; font-size:12px; color:var(--ink-faint); white-space:nowrap}
.oai-tip[hidden]{display:none}
@media (max-width:600px){.oai-tip{display:none}}
.oai-exp:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
@media (max-width:600px){.oai-top-t{display:none}}

/* ── 匯出面板：蓋在聊天視窗上，所有操作都在頁面內完成 ── */
.oai-sheet{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  background:var(--surface); border-radius:10px}
.oai-sheet-hd{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--ink)}
.oai-sheet-hd>strong{flex:1; min-width:0; font-weight:700}
.oai-sheet-acts{display:flex; gap:8px}
.odr-ai-root .oai-sheet-b,.odr-ai-root .oai-sheet-x{
  display:inline-flex; align-items:center; min-height:32px; padding:0 13px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-soft);
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1;
  border-radius:7px; cursor:pointer; white-space:nowrap}
.odr-ai-root .oai-sheet-b:hover,.odr-ai-root .oai-sheet-x:hover{border-color:var(--blue); color:var(--blue)}
.odr-ai-root .oai-sheet-b.is-main{background:var(--blue); border-color:var(--blue); color:#fff}
.odr-ai-root .oai-sheet-b.is-main:hover{background:var(--blue-dk); border-color:var(--blue-dk); color:#fff}
.oai-sheet-bd{flex:1; min-height:0; display:flex; flex-direction:column; padding:14px}
.oai-sheet-hint{font-size:13.5px; line-height:1.85; color:var(--ink-soft); margin:0 0 12px}
.oai-sheet-hint strong{color:var(--ink); font-weight:700}
.oai-sheet-note{color:var(--ink-faint); font-size:12.5px}
.oai-sheet-ta{flex:1; min-height:0; width:100%; border:1px solid var(--rule); border-radius:8px;
  resize:none; padding:12px; background:var(--bg); color:var(--ink);
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.7}
.oai-sheet-ta:focus{outline:none; border-color:var(--blue)}

/* ── 列印：只印那份對話，網站其他東西全部藏起來 ── */
#oai-print{display:none}
@media print{
  body > *:not(#oai-print){display:none !important}
  #oai-print{display:block !important; color:#111; background:#fff;
    font-family:"Noto Sans TC",-apple-system,"PingFang TC",sans-serif}
  @page{margin:16mm 14mm}
  #oai-print .oai-pr-hd{border-bottom:2px solid #111; padding-bottom:9px; margin-bottom:18px}
  #oai-print h1{font-size:19pt; line-height:1.35; margin:0 0 5px; font-weight:800}
  #oai-print .oai-pr-hd p{font-size:8.5pt; color:#555; margin:0}
  #oai-print article{margin:0 0 15px; padding-bottom:13px; border-bottom:1px solid #ddd}
  /* 問題很短，讓它跟答案開頭留在同一頁；長答案就讓它自然跨頁，
     整段 avoid 反而會把長答案整個推到下一頁、留一大片空白 */
  #oai-print .oai-pr-q{page-break-inside:avoid; break-inside:avoid;
    page-break-after:avoid; break-after:avoid; border-bottom:0; padding-bottom:0; margin-bottom:9px}
  #oai-print h2{font-size:9pt; letter-spacing:.1em; color:#666; font-weight:700; margin:0 0 5px}
  #oai-print .oai-pr-body{font-size:10.5pt; line-height:1.75}
  #oai-print .oai-pr-q .oai-pr-body{font-size:12pt; font-weight:700; line-height:1.6}
  #oai-print .oai-pr-body p{margin:0 0 7px}
  #oai-print .oai-pr-body ul,#oai-print .oai-pr-body ol{margin:0 0 7px; padding-left:1.5em}
  #oai-print .oai-pr-body li{margin-bottom:3px}
  #oai-print .oai-pr-body h4{font-size:11pt; font-weight:700; margin:11px 0 5px}
  #oai-print .oai-pr-body hr{border:0; border-top:1px solid #ddd; margin:10px 0}
  #oai-print .oai-pr-body code{font-family:ui-monospace,Menlo,monospace; font-size:.92em}
  /* 螢幕上的螢光筆在紙上會變成一塊灰，改用粗體 */
  #oai-print mark.p{background:none; box-shadow:none; padding:0; font-weight:700; color:#111}
  #oai-print .oai-pr-src{font-size:8pt; color:#666; margin:7px 0 0}
  #oai-print a{color:#111; text-decoration:underline}
}