/* 登入後的懸浮 AI 助手:右下角圓鈕(淺底黑星,依品牌規範「單色黑/淺底」),
   點擊展開對話面板,展開時圖示切換為 ✕。放在 #app 內 → 只在登入後出現。 */

/* 懸浮圓鈕 */
.ai-fab { position: fixed; right: 24px; bottom: 24px; z-index: 300; width: 54px; height: 54px; padding: 0; border: none; border-radius: 50%; background: oklch(0.95 0.005 190); box-shadow: 0 12px 30px rgba(0,0,0,.45); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease-out), box-shadow .2s; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.52); }
.ai-fab svg { display: block; }
/* 星 ↔ ✕ 疊放,用旋轉+淡入淡出絲滑交接(不用 display 瞬切) */
.ai-icon-star, .ai-icon-close { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; transition: opacity .26s var(--ease-out), transform .42s var(--ease-out); }
.ai-icon-star { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1); }
/* 星星中央疊反白「AI」字(依規範:Geist 12px 700) */
.ai-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: -.02em; color: #fff; pointer-events: none; }
.ai-icon-close { opacity: 0; transform: translate(-50%,-50%) rotate(-135deg) scale(.5); }
.ai-fab[aria-expanded="true"] .ai-icon-star { opacity: 0; transform: translate(-50%,-50%) rotate(135deg) scale(.5); }
.ai-fab[aria-expanded="true"] .ai-icon-close { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1); }

/* 對話面板:深色玻璃,與 app 主題一致;由圓鈕右下角展開 */
.ai-panel { position: fixed; right: 24px; bottom: 96px; z-index: 300; width: 372px; max-width: calc(100vw - 32px); height: 500px; max-height: calc(100vh - 140px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden; transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.ai-panel.open { opacity: 1; transform: none; pointer-events: auto; }

/* 面板頭部 */
.ai-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ai-badge { width: 32px; height: 32px; border-radius: 50%; background: oklch(0.95 0.005 190); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-badge svg { display: block; }
.ai-head .ai-title { font-weight: 600; font-size: 15px; letter-spacing: .01em; line-height: 1.2; }
.ai-head .ai-status { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 訊息區 */
.ai-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.62; word-break: break-word; }
.ai-msg.bot { align-self: flex-start; background: var(--glass-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); }
.ai-msg.me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 5px; }

/* 輸入列 */
.ai-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; }
.ai-foot input { flex: 1; min-width: 0; height: 42px; padding: 0 13px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 13.5px; outline: none; }
.ai-foot input:focus { border-color: var(--accent); }
.ai-send { width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 10px; background: var(--grad); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .18s; }
.ai-send:hover { filter: brightness(1.08); }
.ai-send svg { display: block; }

@media (max-width: 440px) {
  .ai-panel { right: 12px; left: 12px; width: auto; bottom: 88px; }
  .ai-fab { right: 16px; bottom: 16px; }
}