/*!
 * ai-search.css — AI 泊車及充電建議面板、地圖標註
 * 只使用既有 CSS 變數（--bg-soft --surface --surface-2 --line --line-strong --text
 * --text-2 --muted --muted-2 --accent --accent-2 --accent-soft --accent-line --r --r-lg），
 * 深色模式由主題變數自然支援，此檔不需另寫 [data-theme="dark"]。
 * 載入次序：style.css → flat-2d.css → risk-2d.css → ai-search.css → theme-auto.css
 */

/* ============ 地圖上的入口按鈕（右下，地圖縮放鍵之上、安全區之上） ============ */
.ai-fab{
  position:absolute;z-index:2400;right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(112px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:10px 15px;
  color:var(--on-accent,#fff);font:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;
  background:var(--accent);border:1px solid var(--accent-line);border-radius:999px;
  box-shadow:none;cursor:pointer;touch-action:manipulation;
  transition:right .18s var(--ease),background .16s var(--ease),transform .16s var(--ease);
}
.ai-fab:hover{background:var(--accent-2);transform:translateY(-1px)}
.ai-fab:active{transform:translateY(0)}
.ai-fab-ico{font-size:16px;line-height:1}
.ai-fab:focus-visible,.ai-submit:focus-visible,.ai-chip:focus-visible,.ai-pick:focus-visible,
.ai-close:focus-visible,.ai-key-save:focus-visible,.ai-key-clear:focus-visible,.ai-clear-pins:focus-visible{
  outline:3px solid var(--accent-2);outline-offset:2px;
}

/* ============ 面板（桌面：地圖右側浮動卡；手機：底部浮層） ============ */
.ai-sheet{
  position:absolute;z-index:5000;left:auto;right:14px;bottom:90px;
  width:min(420px,calc(100% - 28px));max-height:calc(100% - 160px);
  display:flex;flex-direction:column;overflow:hidden;
  color:var(--text);font-family:inherit;font-size:12.5px;line-height:1.5;
  background:var(--bg-soft);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:none;
  animation:ai-sheet-in .18s var(--ease);
}
.ai-sheet[hidden]{display:none!important}
@keyframes ai-sheet-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.ai-head{
  display:flex;align-items:flex-start;gap:10px;flex:0 0 auto;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface);
}
.ai-head-text{min-width:0;flex:1 1 auto}
.ai-head-text b{display:block;font-size:14px;font-weight:800;color:var(--text);letter-spacing:.01em}
.ai-head-text small{display:block;margin-top:3px;font-size:10.5px;line-height:1.45;color:var(--muted)}
.ai-close,.ai-key-open{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;
  font:inherit;font-size:22px;line-height:1;color:var(--text-2);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
}
.ai-key-open{font-size:18px;margin-inline-start:auto}
.ai-close:hover,.ai-key-open:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}

.ai-body{
  min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:grid;gap:10px;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));
  scrollbar-width:thin;
}

/* ============ 三個多選選項（大觸控目標） ============ */
.ai-chips{display:grid;gap:8px}
.ai-chip{
  display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 12px;
  text-align:start;font:inherit;font-size:12.5px;font-weight:650;line-height:1.4;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.ai-chip:hover{background:var(--surface-2);border-color:var(--accent-line);color:var(--text)}
.ai-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.ai-chip[disabled]{cursor:default;opacity:.6}
.ai-chip-ico{flex:0 0 auto;font-size:17px;line-height:1}
.ai-chip-text{min-width:0;flex:1 1 auto}
.ai-chip-mark{
  flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;
  font-size:12px;font-weight:800;color:transparent;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:7px;
}
.ai-chip[aria-pressed="true"] .ai-chip-mark{color:var(--on-accent,#fff);background:var(--accent);border-color:var(--accent)}
.ai-chip[aria-pressed="true"] .ai-chip-mark::before{content:'✓'}

/* ============ 上下文、設定、錯誤、主按鈕 ============ */
.ai-context{
  margin:0;padding:8px 10px;font-size:11px;line-height:1.55;color:var(--muted);word-break:break-all;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
}
.ai-settings{
  display:grid;gap:8px;padding:11px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);
}
.ai-settings[hidden]{display:none!important}
.ai-key-label{font-size:11.5px;font-weight:750;color:var(--text-2)}
.ai-key-input{
  width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:13px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:10px;
}
.ai-key-input::placeholder{color:var(--muted-2)}
.ai-key-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ai-key-actions{display:flex;gap:8px;flex-wrap:wrap}
.ai-key-save,.ai-key-clear,.ai-clear-pins{
  min-height:40px;padding:8px 13px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:9px;
}
.ai-key-save{color:var(--on-accent,#fff);background:var(--accent);border-color:var(--accent)}
.ai-key-save:hover{background:var(--accent-2)}
.ai-key-clear:hover,.ai-clear-pins:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.ai-key-hint,.ai-key-status{margin:0;font-size:10.5px;line-height:1.55;color:var(--muted)}
.ai-key-hint code{font-size:10px;padding:1px 4px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line)}
.ai-error{
  padding:9px 11px;font-size:11.5px;line-height:1.55;color:var(--danger);word-break:break-word;
  background:rgba(200,62,83,.1);border:1px solid rgba(200,62,83,.35);border-radius:10px;
}
.ai-error[hidden]{display:none!important}
.ai-submit{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:13.5px;font-weight:800;letter-spacing:.02em;
  color:var(--on-accent,#fff);cursor:pointer;background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-sm);
}
.ai-submit:hover:not(:disabled){background:var(--accent-2)}
.ai-submit:disabled{opacity:.5;cursor:default}
.ai-sheet.is-busy .ai-submit{cursor:progress}

/* ============ 結果區 ============ */
.ai-result{display:grid;gap:8px;padding-top:2px}
.ai-result[hidden]{display:none!important}
.ai-result-text{
  margin:0;padding:10px 12px;font-size:12.5px;line-height:1.75;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);white-space:pre-wrap;
}
.ai-pick-list{display:grid;gap:6px}
.ai-pick{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;
  width:100%;min-height:46px;padding:8px 10px;text-align:start;font:inherit;cursor:pointer;
  color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.ai-pick:hover,.ai-pick.is-active{background:var(--accent-soft);border-color:var(--accent-line)}
.ai-pick-ico{font-size:15px;line-height:1;text-align:center}
.ai-pick-main{min-width:0;display:grid;gap:1px}
.ai-pick-name{font-size:12px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-pick-reason{font-size:10.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-pick-price{font-size:11px;line-height:1.4;font-weight:700;color:var(--fuel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-pick-dist{font-size:11px;font-weight:750;color:var(--accent-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ai-note{margin:0;font-size:10.5px;line-height:1.5;color:var(--accent-2)}
.ai-note:empty{display:none}
.ai-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--muted-2)}
.ai-meta span:empty{display:none}
.ai-result-actions{display:flex;justify-content:flex-end}
.ai-disclaimer{margin:0;font-size:10px;line-height:1.5;color:var(--muted-2)}

/* ============ 地圖標註（AI 推薦編號釘） ============ */
.ai-pin{position:relative;width:32px;height:40px;display:grid;justify-items:center;align-items:start}
.ai-pin-num{
  position:relative;display:grid;place-items:center;width:30px;height:30px;
  font-size:13px;font-weight:800;line-height:1;color:var(--on-accent,#fff);
  background:var(--accent);border:2px solid #fff;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.ai-pin-num b{display:block;transform:rotate(45deg);font:inherit}
.ai-pin-num::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:ai-pin-pulse 2.2s ease-out infinite;
}
@keyframes ai-pin-pulse{0%{opacity:.75;transform:scale(.8)}70%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}

/* 左側結果卡片的 AI 推薦標記（best-effort；列表重繪後會消失） */
.ai-pick-badge{
  display:inline-flex;align-items:center;padding:2px 8px;margin:0 4px 4px 0;
  font-size:10px;font-weight:800;line-height:1.6;color:var(--on-accent,#fff);
  background:var(--accent);border-radius:999px;vertical-align:middle;
}
.card.ai-pick{outline:2px solid var(--accent);outline-offset:-2px;border-radius:11px}

/* ============ 手機／桌面版面 ============ */
@media(max-width:980px){
  .ai-fab{
    right:max(10px,env(safe-area-inset-right,0px));
    bottom:calc(112px + env(safe-area-inset-bottom,0px));
    min-height:44px;padding:9px 13px;font-size:12px;
  }
  .ai-sheet{
    position:fixed;left:0;right:0;bottom:0;width:auto;
    max-height:60vh;max-height:60dvh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    animation:ai-sheet-in-mobile .2s var(--ease);
  }
  .ai-head{padding:11px 13px 10px}
  .ai-head-text b{font-size:13.5px}
  .ai-body{padding:11px 13px calc(12px + env(safe-area-inset-bottom,0px));gap:9px}
  .ai-chip{min-height:50px;font-size:12.5px}
  .ai-submit{min-height:48px}
  .mapwrap.ai-open .ai-fab{display:none}
}
@keyframes ai-sheet-in-mobile{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:981px){
  .mapwrap.ai-open .ai-fab{right:calc(min(420px,100% - 28px) + 28px)}
}

/* ============ 減少動態效果 ============ */
@media(prefers-reduced-motion:reduce){
  .ai-sheet,.ai-pin-num::after{animation:none!important}
  .ai-fab,.ai-chip,.ai-pick,.ai-sheet{transition:none!important}
}