/* SaraHome / 莎拉家 — Keyboard Shortcuts Help Modal
   對位 §R-N+4xxx+50 (2026-09-05, CEO verdict)

   對位 §R-N+288 brand refresh: 暖橙 + 藍 palette
   對位 §R-N+264 a11y: focus ring + ESC + click outside
*/

/* === §R-N+4xxx+54 (2026-09-05, Round 9) — Mobile Cmd+K FAB ===
   2026-09-13 P2-2 (L2 audit live E2E, 對位 §R-N+416 結構性反饋): mobile 完全 hide。
   根因 (3 重):
   1. 「⌘K」badge 係 desktop-ism — mobile 冇 keyboard, 對 L2 經紀 (唔係 power user) 係 noise
   2. 實測遮擋: FAB (48px circle) 坐喺 bottom nav 上方 16px, 正好蓋住 mobile search
      結果底部分頁「下一頁」按鈕 (audit-mobile-search.png 實拍) — 用戶撳唔到分頁
   3. 冗餘: mobile bottom nav 已有「搵樓」(public.search) 作為主 search entry
   Fix: 移除舊 `@media (max-width:768px){ .cmd-k-mobile-fab{ display:inline-flex } }`,
   保持 base rule `display:none` → 全 size 隱藏。Element 保留喺 DOM (fab-autohide.js
   照 run no-op, 0 JS 改動)。Desktop Cmd+K keyboard shortcut 不受影響 (唔經 FAB)。
   如果未來要還原 mobile search FAB: 加返 `@media (max-width:768px){ .cmd-k-mobile-fab{ display:inline-flex } }` + 處理分頁遮擋。 */
.cmd-k-mobile-fab {
    display: none; /* P2-2: 全 size 隱藏 (舊 mobile media query 已移除) */
    position: fixed;
    right: 16px;
    bottom: calc(var(--sarahome-mobile-nav-height, 66px) + 16px + env(safe-area-inset-bottom));
    z-index: 96;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sarahome-v3-color-primary, #2D7DD2);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(45, 125, 210, 0.35), 0 2px 4px rgba(45, 125, 210, 0.20);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cmd-k-mobile-fab:hover,
.cmd-k-mobile-fab:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(45, 125, 210, 0.45), 0 2px 6px rgba(45, 125, 210, 0.25);
}
.cmd-k-mobile-fab:active {
    transform: scale(0.96);
}
.cmd-k-mobile-fab-label {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--sarahome-v3-color-accent, #FF8C42);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.04em;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(255, 140, 66, 0.30);
}

/* P2-2 (2026-09-13): 舊 mobile media query 已移除 — FAB 全 size 隱藏
   (根因: ⌘K badge desktop-ism + 遮擋分頁「下一頁」+ bottom nav 已有「搵樓」)。
   對位 §R-N+138: 保留 base display:none, 唔需要 media query override。 */

body.kb-modal-open {
    overflow: hidden;
}

.kb-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: kb-fade-in 0.2s ease;
}

.kb-modal[hidden] {
    display: none;
}

@keyframes kb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.kb-card {
    position: relative;
    z-index: 1;
    background: var(--sarahome-v3-color-bg, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15, 23, 42, 0.06);
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    animation: kb-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kb-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.kb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.kb-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-text-primary, #0F172A);
}

.kb-title svg {
    color: #2D7DD2;
}

.kb-close {
    background: transparent;
    border: none;
    color: var(--sarahome-v3-color-text-secondary, #475569);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-close:hover {
    background: rgba(15, 23, 42, 0.06);
}

.kb-close:focus {
    outline: 2px solid #2D7DD2;
    outline-offset: 2px;
}

.kb-body {
    padding: 1rem 1.5rem;
}

.kb-group {
    margin-bottom: 1.5rem;
}

.kb-group:last-child {
    margin-bottom: 0;
}

.kb-group-title {
    margin: 0 0 0.625rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sarahome-v3-color-text-secondary, #475569);
}

.kb-list {
    margin: 0;
    display: grid;
    gap: 0.375rem;
}

.kb-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
}

.kb-row:hover {
    background: rgba(45, 125, 210, 0.04);
}

.kb-keys {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.kb-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4375rem;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-text-primary, #0F172A);
}

.kb-action {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sarahome-v3-color-text-primary, #0F172A);
}

.kb-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
    font-size: 0.75rem;
    color: var(--sarahome-v3-color-text-secondary, #475569);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.kb-footer kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Mobile: full-screen */
@media (max-width: 768px) {
    .kb-modal {
        padding: 0;
        align-items: stretch;
    }
    .kb-card {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .kb-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* §R-N+4xxx+70 (2026-09-06, Round 16) — FAB auto-hide transition
 *
 * 對位: 當 JS 偵測到 .saved-search-actions / .agent-listing-actions 同 FAB Y/X 重疊
 * → 加 .cmd-k-fab-hidden class → CSS fade out + visibility hidden (防 focus 陷阱)
 * → 當 blocker 離開 FAB area → 移除 class → fade in
 *
 * 對位 §R-N+62 KISS: 純 CSS transition + opacity + visibility, 0 JS animation
 * 對位 §R-N+264 a11y: aria-label preserved (只 hide 視覺)
 * 對位 §R-N+138 disk-truth: 0 layout shift (visibility + opacity, 唔用 display)
 */
.cmd-k-mobile-fab.cmd-k-fab-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.cmd-k-mobile-fab {
    /* Add transition for when class is removed (fade in) */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}