/* ============================================================
   AI 天使 Orb — 全站共用的 AI 問答入口
   由後往前：光暈 → 翅膀 → 球體（磨砂金＋眼睛）→ 頭頂光環；標籤懸停時浮出。
   狀態：data-state="idle | open | thinking"，懸停／聚焦時翅膀張開。
   翅膀兩種畫法：data-wings="feather"（半透明羽翼＋金色細描邊）｜"line"（金色線稿）。
   淺色頁加 .ai-orb--on-light。所有動效都有 prefers-reduced-motion 降級。
   ============================================================ */

.ai-orb {
  --orb: 56px;
  --gold-hi: #FBE6C2;
  --gold: #D2A06E;
  --gold-lo: #9C6B42;
  --eye: #FFF8EE;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(var(--orb) * 2.4);
  height: calc(var(--orb) * 1.6);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text, #F7F7F7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ai-orb:focus-visible { outline: none; }
.ai-orb:focus-visible .ai-orb__body { box-shadow: 0 0 0 2px #141010, 0 0 0 3.5px var(--gold), inset -6px -8px 14px rgba(88, 52, 24, .38), inset 5px 6px 12px rgba(255, 240, 214, .32); }

/* 整體輕浮：球、翅膀、光環一起上下漂 */
.ai-orb__float { position: relative; display: grid; place-items: center; width: var(--orb); height: var(--orb); animation: orbFloat 4.2s ease-in-out infinite; }
@keyframes orbFloat { 50% { transform: translateY(-4px); } }

/* ---------- 光暈：深度靠光，不靠投影 ---------- */
.ai-orb__glow {
  position: absolute; inset: -55%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(210, 160, 110, .42) 0%, rgba(210, 160, 110, .14) 38%, transparent 64%);
  animation: orbBreathe 4.2s ease-in-out infinite;
}
@keyframes orbBreathe { 50% { transform: scale(1.08); opacity: .75; } }

/* ---------- 翅膀：左翼原圖，右翼鏡像；以翅根為軸扇動 ---------- */
.ai-orb__wing {
  position: absolute; z-index: 1; top: calc(var(--orb) * -.08); width: calc(var(--orb) * .92); height: calc(var(--orb) * .7); pointer-events: none;
}
.ai-orb__wing--l { right: calc(var(--orb) * .68); }
.ai-orb__wing--r { left: calc(var(--orb) * .68); transform: scaleX(-1); }
.ai-orb__wing svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 96% 56%; animation: orbFlap 3.2s ease-in-out infinite; transition: transform .45s var(--ease-power4, ease); }
@keyframes orbFlap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }

/* 羽翼：暖白半透明羽片＋金色細描邊 */
.ai-orb__feather { fill: rgba(255, 244, 228, .34); stroke: rgba(230, 188, 142, .85); stroke-width: .9; stroke-linejoin: round; }
.ai-orb__vein { fill: none; stroke: rgba(210, 160, 110, .55); stroke-width: .7; stroke-linecap: round; }
/* 線稿：只有金色弧線，呼應品牌的線稿語彙 */
.ai-orb__line { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; }
.ai-orb__line--soft { stroke: rgba(230, 188, 142, .6); stroke-width: 1; }
.ai-orb[data-wings="feather"] .ai-orb__wing--line,
.ai-orb[data-wings="line"] .ai-orb__wing--feather { display: none; }

/* ---------- 球體：磨砂香檳金 ---------- */
.ai-orb__body {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: var(--orb); height: var(--orb); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, var(--gold-hi) 0%, #EBC594 20%, var(--gold) 52%, #B5824F 80%, var(--gold-lo) 100%);
  box-shadow: inset -6px -8px 14px rgba(88, 52, 24, .38), inset 5px 6px 12px rgba(255, 240, 214, .32);
  transition: transform .45s var(--ease-power4, ease);
}
/* 磨砂顆粒：SVG 噪點疊在球面上 */
.ai-orb__body::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .38; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 左上柔光 */
.ai-orb__body::after { content: ''; position: absolute; left: 16%; top: 12%; width: 38%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 248, 234, .55), transparent); pointer-events: none; }

/* ---------- 眼睛 ---------- */
.ai-orb__eyes { position: relative; z-index: 1; display: flex; gap: calc(var(--orb) * .17); transition: transform .35s var(--ease-power4, ease); }
.ai-orb__eyes i {
  display: block; width: calc(var(--orb) * .13); height: calc(var(--orb) * .23); border-radius: 999px;
  background: var(--eye); box-shadow: 0 0 6px rgba(255, 248, 238, .75);
  transform-origin: 50% 60%; animation: orbBlink 5.6s infinite;
}
@keyframes orbBlink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }

/* ---------- 頭頂光環：取自品牌標誌「A 字＋金色光環」 ---------- */
.ai-orb__halo {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--orb) * -.2);
  width: calc(var(--orb) * .48); height: calc(var(--orb) * .13); margin-left: calc(var(--orb) * -.24);
  border: 1.5px solid #E6BC8E; border-radius: 50%;
  box-shadow: 0 0 8px rgba(230, 188, 142, .7), inset 0 0 4px rgba(230, 188, 142, .5);
  animation: orbHalo 4.2s ease-in-out infinite;
}
@keyframes orbHalo { 50% { transform: translateY(-2px); } }

/* ---------- 標籤：懸停時從左側浮出 ---------- */
.ai-orb__label {
  position: absolute; right: calc(100% - 6px); top: 50%; white-space: nowrap;
  padding: 7px 12px; border: 1px dashed rgba(210, 160, 110, .6); border-radius: 5px; background: #1F1917;
  font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--gold);
  opacity: 0; transform: translate(8px, -50%); transition: opacity .3s, transform .35s var(--ease-power4, ease); pointer-events: none;
}

/* ============ 狀態 ============ */
/* 懸停／聚焦：翅膀張開、扇得快一點，眼睛往上看，標籤浮出 */
.ai-orb:hover .ai-orb__wing svg, .ai-orb:focus-visible .ai-orb__wing svg, .ai-orb.is-hover .ai-orb__wing svg { animation: orbFlapUp 1s ease-in-out infinite; }
@keyframes orbFlapUp { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(24deg); } }
.ai-orb:hover .ai-orb__eyes, .ai-orb:focus-visible .ai-orb__eyes, .ai-orb.is-hover .ai-orb__eyes { transform: translateY(-2px); }
.ai-orb:hover .ai-orb__label, .ai-orb:focus-visible .ai-orb__label, .ai-orb.is-hover .ai-orb__label { opacity: 1; transform: translate(0, -50%); }
.ai-orb:hover .ai-orb__body, .ai-orb.is-hover .ai-orb__body { transform: scale(1.04); }

/* 面板打開：翅膀收攏貼著球身，眼睛變成笑眼 ^ ^ */
.ai-orb[data-state="open"] .ai-orb__wing svg { animation: none; transform: rotate(-30deg) scale(.68); opacity: .8; }
.ai-orb[data-state="open"] .ai-orb__eyes i {
  height: calc(var(--orb) * .11); width: calc(var(--orb) * .17); background: none; box-shadow: none; animation: none;
  border: 2.2px solid var(--eye); border-bottom: 0; border-radius: 999px 999px 0 0; filter: drop-shadow(0 0 3px rgba(255, 248, 238, .7));
}
.ai-orb[data-state="open"] .ai-orb__label { display: none; }

/* 回答中：眼睛變成跳動的點，翅膀小幅快振 */
.ai-orb[data-state="thinking"] .ai-orb__wing svg { animation: orbFlutter .32s ease-in-out infinite; }
@keyframes orbFlutter { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(10deg); } }
.ai-orb[data-state="thinking"] .ai-orb__eyes i { height: calc(var(--orb) * .12); width: calc(var(--orb) * .12); animation: orbDots .9s ease-in-out infinite; }
.ai-orb[data-state="thinking"] .ai-orb__eyes i:last-child { animation-delay: .18s; }
@keyframes orbDots { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } }
.ai-orb[data-state="thinking"] .ai-orb__glow { animation-duration: 1.2s; }

/* ============ 淺色頁（融資申請） ============ */
.ai-orb--on-light .ai-orb__glow { background: radial-gradient(circle, rgba(169, 118, 74, .3) 0%, rgba(169, 118, 74, .1) 38%, transparent 64%); }
.ai-orb--on-light .ai-orb__feather { fill: rgba(210, 160, 110, .2); stroke: #A9764A; }
.ai-orb--on-light .ai-orb__vein { stroke: rgba(169, 118, 74, .6); }
.ai-orb--on-light .ai-orb__line { stroke: #A9764A; }
.ai-orb--on-light .ai-orb__line--soft { stroke: rgba(169, 118, 74, .55); }
.ai-orb--on-light .ai-orb__body { box-shadow: inset -6px -8px 14px rgba(88, 52, 24, .42), inset 5px 6px 12px rgba(255, 240, 214, .3), 0 0 0 1px rgba(156, 107, 66, .35); }
.ai-orb--on-light .ai-orb__halo { border-color: #A9764A; box-shadow: 0 0 6px rgba(169, 118, 74, .45); }

/* ============ 減少動效：保留靜態造型 ============ */
@media (prefers-reduced-motion: reduce) {
  .ai-orb__float, .ai-orb__glow, .ai-orb__halo, .ai-orb__eyes i, .ai-orb__wing svg { animation: none !important; }
  .ai-orb__body, .ai-orb__eyes, .ai-orb__label, .ai-orb__wing svg { transition: none; }
}
.ai-orb.is-still .ai-orb__float, .ai-orb.is-still .ai-orb__glow, .ai-orb.is-still .ai-orb__halo,
.ai-orb.is-still .ai-orb__eyes i, .ai-orb.is-still .ai-orb__wing svg { animation: none !important; }

/* ============================================================
   全站懸浮（js/ai-orb.js）
   ============================================================ */
.ai-orb--fixed {
  position: fixed; z-index: 78;
  right: clamp(4px, 1.2vw, 16px);
  bottom: calc(clamp(6px, 1.2vw, 14px) + var(--orb-lift, 0px));
  transition: bottom .3s var(--ease-power4, ease);
}
@media (max-width: 560px) { .ai-orb--fixed { --orb: 48px; right: 0; } }
/* 被 Orb 取代的舊按鈕（保留在 DOM 讓原頁面邏輯照常運作） */
.ai-orb-retired { display: none !important; }

/* 原頁面面板改為浮在 Orb 上方 */
.aipanel, .ai-panel { right: clamp(12px, 2vw, 24px) !important; bottom: calc(var(--orb-lift, 0px) + 104px) !important; }
@media (max-width: 1240px) { .ra-ai { bottom: calc(var(--orb-lift, 0px) + 104px) !important; } }
@media (max-width: 560px) { .aipanel, .ai-panel { bottom: calc(var(--orb-lift, 0px) + 88px) !important; } }

/* ---------- 通用面板 ---------- */
.ai-orb-panel {
  position: fixed; z-index: 79; right: clamp(12px, 2vw, 24px); bottom: calc(var(--orb-lift, 0px) + 104px);
  width: min(370px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - var(--orb-lift, 0px) - 150px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px dashed rgba(210, 160, 110, .6); border-radius: 0;
  background: radial-gradient(90% 60% at 100% 100%, rgba(210, 160, 110, .1), transparent 70%), linear-gradient(170deg, rgba(36, 28, 26, .98), rgba(22, 18, 16, .99));
  color: var(--c-text, #F7F7F7);
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .25s, transform .3s var(--ease-power4, ease);
}
.ai-orb-panel.is-open { opacity: 1; transform: none; }
.ai-orb-panel[hidden] { display: none; }
@media (max-width: 560px) { .ai-orb-panel { bottom: calc(var(--orb-lift, 0px) + 88px); } }
.ai-orb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px dashed var(--line-on-dark, rgba(247, 247, 247, .22)); }
.ai-orb-panel__head b { display: block; font-size: 14px; font-weight: 500; }
.ai-orb-panel__head span { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .04em; color: rgba(247, 247, 247, .5); }
.ai-orb-panel__head button { width: 28px; height: 28px; border-radius: 4px; font-size: 18px; color: rgba(247, 247, 247, .6); transition: color .2s, background-color .2s; }
.ai-orb-panel__head button:hover { color: var(--c-text, #F7F7F7); background: rgba(247, 247, 247, .06); }
.ai-orb-panel__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; scrollbar-width: thin; scrollbar-color: rgba(210, 160, 110, .35) transparent; }
.ai-orb-msg { align-self: flex-start; max-width: 88%; padding: 10px 12px; border-radius: 10px 10px 10px 3px; background: rgba(247, 247, 247, .06); font-size: 13.5px; line-height: 1.75; color: rgba(247, 247, 247, .85); }
.ai-orb-msg.is-me { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: rgba(210, 160, 110, .16); color: var(--c-text, #F7F7F7); }
.ai-orb-msg.is-typing:empty::after { content: '· · ·'; font-family: var(--mono, monospace); letter-spacing: .2em; color: var(--c-accent, #D2A06E); animation: orbType 1s steps(3) infinite; }
@keyframes orbType { 0% { opacity: .35; } 50% { opacity: 1; } }
.ai-orb-qs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ai-orb-qs button { padding: 6px 10px; border: 1px dashed rgba(210, 160, 110, .45); border-radius: 999px; font-size: 12px; color: rgba(247, 247, 247, .78); transition: border-color .2s, color .2s; }
.ai-orb-qs button:hover, .ai-orb-qs button:focus-visible { border-color: var(--c-accent, #D2A06E); color: var(--c-accent, #D2A06E); }
.ai-orb-panel__form { display: flex; gap: 8px; padding: 12px 16px 6px; border-top: 1px dashed var(--line-on-dark, rgba(247, 247, 247, .22)); }
.ai-orb-panel__form .input { flex: 1; min-width: 0; }
.ai-orb-panel__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 5px; background: var(--c-accent, #D2A06E); color: #16120F; font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; transition: background-color .2s; }
.ai-orb-panel__btn:hover { background: #E0B384; }
.ai-orb-panel__link { font-size: 13px; color: rgba(247, 247, 247, .6); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; }
.ai-orb-panel__link:hover { color: var(--c-accent, #D2A06E); }
.ai-orb-panel__note { padding: 4px 16px 12px; font-family: var(--mono, monospace); font-size: 10.5px; color: rgba(247, 247, 247, .42); }

/* 訪客門控 */
.ai-orb-gate { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 20px; }
.ai-orb-gate__k { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--c-accent, #D2A06E); }
.ai-orb-gate__t { font-size: 19px; font-weight: 400; line-height: 1.45; }
.ai-orb-gate__p { font-size: 13.5px; line-height: 1.8; color: rgba(247, 247, 247, .68); }
.ai-orb-gate__ops { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .ai-orb--fixed, .ai-orb-panel { transition: none; }
  .ai-orb-msg.is-typing:empty::after { animation: none; }
}

/* 面板內的讀屏專用標籤：不依賴各頁是否載入 club.css 的 .sr-only */
.ai-orb-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
