/* 首頁「分會會員總覽」的 AI 媒合（ai_box.html.j2 帶進來；2026-09-27）。
   互動程式 ai.js 跟專家名錄共用，這一份樣式是官網自己的：顏色、字型、按鈕沿用 site.css（紅色、米白、襯線標題）。
   兩種推薦的顏色只住這裡：找人幫忙＝分會紅、找合作＝青綠（跟 LINE 綠分得開）。ai.js 產生的卡片用到 .btn--gold、.card__tag，這裡補上。 */
:root{--ai-svc:var(--red);--ai-svc-soft:var(--red-soft);--ai-pt:#0F766E;--ai-pt-soft:#E3F6F3}

/* ── 表單卡片（放在會員總覽標題下面，取代原本的搜尋框） ── */
.ai-form{position:relative;width:100%;max-width:860px;margin:0 auto;background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:26px 28px 22px;
  border:1.5px solid var(--line);box-shadow:var(--shadow-lg);transition:border-color .2s,box-shadow .2s;scroll-margin-top:calc(var(--head-h) + 20px)}
.ai-form:focus-within{border-color:var(--red-line);box-shadow:var(--shadow-lg),0 0 0 5px var(--red-soft)}
.ai-form__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.ai-form__label{font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:.02em}
.ai-form__modes{display:flex;flex-wrap:wrap;gap:8px}
.ai-mode{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:700}
.ai-mode .ic{width:15px;height:15px}
.ai-mode--service{background:var(--ai-svc-soft);color:var(--ai-svc)}
.ai-mode--partner{background:var(--ai-pt-soft);color:var(--ai-pt)}
.ai-form textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;font:inherit;font-size:17px;line-height:1.7;resize:vertical;min-height:128px;color:var(--ink);background:var(--paper);transition:border-color .2s,background .2s}
.ai-form textarea:focus{outline:0;border-color:var(--red);background:#fff}
.ai-form textarea::placeholder{color:var(--faint)}
.ai-form__examples{display:grid;gap:8px;margin-top:14px}
.ai-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ai-ex__k{flex:none;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--ai-svc);background:var(--ai-svc-soft);border-radius:8px;padding:4px 9px}
.ai-ex__k--partner{color:var(--ai-pt);background:var(--ai-pt-soft)}
.ai-form__examples .chip{font:inherit;font-size:13.5px;padding:6px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:all .15s}
.ai-form__examples .chip:hover{background:var(--ai-svc-soft);border-color:var(--ai-svc)}
.ai-form__examples .chip--partner:hover{background:var(--ai-pt-soft);border-color:var(--ai-pt)}
.ai-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ai-form__go{margin-top:18px;width:100%;padding:16px;font-size:17.5px;letter-spacing:.04em}
.ai-form__go:disabled{opacity:.9;cursor:progress;transform:none}
.ai-form__trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px 0 0;padding:0;font-size:14px;color:var(--ink-2)}
.ai-form__trust li{display:inline-flex;align-items:center;gap:6px}
.ai-form__trust .ic{width:16px;height:16px;color:var(--line-green-deep);stroke-width:2.6}
.ai-form__note{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.6;text-align:center}

/* ── 結果：每一位標「能幫你處理」或「可以跟你合作」，卡片上緣用同一種顏色 ── */
.ai-result{max-width:900px;margin:36px auto 8px;scroll-margin-top:calc(var(--head-h) + 20px)}
.ai-result__head{text-align:center;margin-bottom:22px}
.ai-result__head h3{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.6vw,28px)}
.ai-result__summary{margin-top:10px;color:var(--muted);font-size:16px}
.ai-result__summary a{color:var(--red);font-weight:700}
.ai-list{display:grid;gap:18px}
.ai-card{display:grid;grid-template-columns:120px 1fr;gap:22px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--ai-svc);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);text-align:left}
.ai-card--partner{border-top-color:var(--ai-pt)}
.ai-card__img,.ai-card__mono{width:120px;height:120px;border-radius:18px;object-fit:cover}
.ai-card__mono{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--night),var(--night-2));color:#fff;font-family:var(--serif);font-size:48px;font-weight:900}
.ai-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ai-card .card__tag{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--stone);color:var(--ink-2);font-size:12.5px;font-weight:700}
.ai-kind{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.04em;line-height:1.6}
.ai-kind--service{background:var(--ai-svc-soft);color:var(--ai-svc)}
.ai-kind--partner{background:var(--ai-pt-soft);color:var(--ai-pt)}
.ai-card__name{font-family:var(--serif);font-size:22px;font-weight:900;margin-top:6px}
.ai-card__name small{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:500}
.ai-card__co{font-size:14px;color:var(--muted)}
.ai-card__why{margin-top:10px}
.ai-card__why b,.ai-card__step b{color:var(--red-deep)}
.ai-card--partner .ai-card__why b,.ai-card--partner .ai-card__step b{color:var(--ai-pt)}
.ai-card__step{margin-top:8px;font-size:15px;color:var(--ink-2);background:var(--stone);border-radius:10px;padding:8px 12px}
.ai-card--partner .ai-card__step{background:var(--ai-pt-soft)}
.ai-card__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ai-card .btn--gold{background:var(--red);color:#fff}                    /* ai.js 寫的是 btn--gold（專家名錄的金色），在官網換成分會紅 */
.ai-card .btn--gold:hover{background:var(--red-deep)}
.ai-copied{margin-top:10px;font-size:14.5px;font-weight:700;color:var(--line-green-deep)}
.ai-after{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:30px;text-align:center}
.ai-after p{width:100%;color:var(--muted)}
.ai-after .ai-copied{margin-top:0}

/* ── 等 AI 的時候：三張空卡片、標題一明一暗 ── */
.ai-card--ghost{border-top-color:var(--line)}
.ai-ghost{display:block;border-radius:8px;background:linear-gradient(90deg,#EFEAE3 25%,#F8F5F1 50%,#EFEAE3 75%);background-size:200% 100%;animation:ai-shimmer 1.3s linear infinite}
.ai-ghost--img{width:120px;height:120px;border-radius:18px}
.ai-ghost--tag{width:96px;height:22px;border-radius:999px}
.ai-ghost--title{width:42%;height:26px;margin-top:12px}
.ai-ghost--line{width:88%;height:14px;margin-top:12px}
.ai-ghost--short{width:60%}
@keyframes ai-shimmer{to{background-position:-200% 0}}
.ai-result.is-loading .ai-after{visibility:hidden}
.ai-result.is-loading [data-ai-title]{animation:ai-pulse 1.6s ease-in-out infinite}
@keyframes ai-pulse{50%{opacity:.5}}

/* 三種特殊情況的固定句子：身心狀況提醒先看醫師、緊急狀況給求助電話（不顯示 LINE 那一塊） */
.ai-note{display:block;max-width:680px;margin:0 auto 14px;padding:14px 18px;border-radius:14px;background:var(--stone);color:var(--ink);font-weight:600;line-height:1.8}
.ai-note--urgent{background:#FDECEC;border:1px solid #F4B4B4;font-size:1.05em}
.ai-result .ai-note a{color:#B42318;font-weight:800;text-decoration:underline}
.ai-result--urgent .ai-after{display:none}

/* 分類按鈕移到 AI 媒合下面：跟表單隔開一點 */
.dir-tools--ai{margin-top:34px}

@media (prefers-reduced-motion:reduce){
  .ai-ghost,.ai-result.is-loading [data-ai-title]{animation:none}
}
@media (max-width:760px){
  .ai-form{padding:18px 16px 16px;border-radius:var(--r-lg)}
  .ai-form__label{font-size:19px}
  .ai-form textarea{font-size:16.5px;min-height:118px;padding:13px 14px}
  .ai-form__examples .chip{font-size:13px}
  .ai-card{grid-template-columns:72px 1fr;gap:14px;padding:16px}
  .ai-card__img,.ai-card__mono,.ai-ghost--img{width:72px;height:72px;border-radius:14px}
  .ai-card__mono{font-size:30px}
  .ai-card__acts .btn{flex:1 1 auto}
}