/* ═══════════════════════════════════════════════════════════
   SETTINGS · PERSONAL TAB
   ───────────────────────────────────────────────────────────
   個人化 tab 用的 capability rows（AI → 用途 view）— 用途 +
   icon + right-side picker。.picker-btn / .picker-menu /
   .picker-wrap 樣式定義在其他檔（共用 picker），這裡只擴充
   cap-row 的版面行為。
   從 settings.css 拆出（v46，2026-05-13）。
   ═══════════════════════════════════════════════════════════ */

.cap-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cap-row:last-child { border-bottom: none; }
.cap-row.disabled { opacity: 0.55; }
.cap-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.cap-body { flex: 1; min-width: 0; }
.cap-name { font-size: 13.5px; color: var(--text-primary); }
.cap-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.cap-row select, .cap-row > button, .cap-row > .pill { flex-shrink: 0; }
.cap-row select { min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); padding: 6px 10px; font-size: 12.5px; font-family: inherit; }
.cap-row select:focus { outline: none; border-color: var(--accent-ring); }

/* ═══════════════════════════════════════════════════════════
   📱 MOBILE — < 760px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Capability rows (用途) — picker 在窄畫面換行到下一列，icon+name 才有空間 */
  .cap-row { flex-wrap: wrap; gap: 8px 12px; }
  .cap-row .picker-wrap,
  .cap-row > .picker-wrap { flex: 1 1 100%; }
  .cap-row .picker-btn { width: 100%; justify-content: space-between; }
  .cap-row select { min-width: 0; width: 100%; }
}