/* ============================================================
   ACBIZ AI Universal Smart Search — Command Palette
   Header trigger, modal overlay, categorized results, AI answer
   panel, keyboard-nav states, loading/empty/error states.
   Matches the existing dashboard palette (see dashboard.css /
   components.css): #0f172a text, #64748b muted, #1d4ed8 accent,
   #e2e8f0 borders, 12-14px radii.
   ============================================================ */

/* ── Header trigger button ─────────────────────────────────── */
/* Bumped up from a cramped 200px/8px-padding gray pill to a proper,
   on-brand search bar: bigger footprint, an accent icon chip and an
   "AI" badge (matching the polish already used on the mobile bar
   below and the header's own PayFusion button) so it doesn't read as
   an afterthought squeezed in next to the header's other actions. */
.ss-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 14px 9px 9px;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    flex: 1 1 auto;
    min-width: 260px;
    max-width: 420px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.ss-trigger:hover, .ss-trigger:focus-visible {
    border-color: #c7d2fe;
    box-shadow: 0 6px 18px rgba(67,56,202,.14);
    outline: none;
}
.ss-trigger-icon-wrap {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    display: flex; align-items: center; justify-content: center;
}
.ss-trigger i.ss-trigger-icon { font-size: 14px; color: #4338ca; }
.ss-trigger-label {
    flex: 1; text-align: left; font-weight: 500; color: #475569;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-trigger-ai-badge {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #4338ca, #6366f1);
    padding: 3px 9px; border-radius: 99px;
}
.ss-trigger-kbd {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; color: #94a3b8;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 3px 7px;
}
.ss-trigger-mobile {
    display: none;
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #fff;
    align-items: center; justify-content: center;
    border: none; cursor: pointer; font-size: 15px;
    box-shadow: 0 4px 12px rgba(29,78,216,.28);
    flex-shrink: 0;
    transition: transform .1s;
}
.ss-trigger-mobile:active { transform: scale(.94); }

/* Raised from 860px to 980px since the trigger is now wider (up to
   420px) — on a medium laptop window that plus the hamburger, title,
   PayFusion button, cart, bell, and profile chip would otherwise
   start crowding/wrapping the header before this kicked in. */
@media (max-width: 980px) {
    .ss-trigger { display: none; }
    .ss-trigger-mobile { display: flex; }
}

/* Below 600px the header is already crowded (hamburger, title,
   PayFusion, cart, bell, profile), so a lone icon there — even
   enlarged — reads as "just another icon" rather than a search
   entry point. Instead we hide the header icon and surface Smart
   Search as its own full-width, unmissable bar under the header
   (see .ss-mobile-bar below) — the pattern most mobile apps use for
   a prominent search affordance. */
@media (max-width: 599px) {
    .ss-trigger-mobile { display: none; }
}

/* ── Full-width mobile search bar (phones, <600px) ─────────────── */
.ss-mobile-bar { display: none; }
@media (max-width: 599px) {
    .ss-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 16px 0;
        padding: 12px 14px;
        background: linear-gradient(135deg, #eef2ff, #f5f3ff);
        border: 1.5px solid #c7d2fe;
        border-radius: 12px;
        cursor: pointer;
        transition: transform .1s, border-color .15s;
    }
    .ss-mobile-bar:active { transform: scale(.98); border-color: #a5b4fc; }
    .ss-mobile-bar-icon { font-size: 14px; color: #4338ca; flex-shrink: 0; }
    .ss-mobile-bar-label {
        flex: 1; min-width: 0;
        font-size: 13.5px; font-weight: 600; color: #4338ca; opacity: .85;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ss-mobile-bar-badge {
        display: flex; align-items: center; gap: 4px; flex-shrink: 0;
        font-size: 10.5px; font-weight: 700; color: #fff;
        background: linear-gradient(135deg, #4338ca, #6366f1);
        padding: 3px 9px; border-radius: 99px;
    }
}

/* ── Overlay + palette ─────────────────────────────────────── */
.ss-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 10vh 16px 16px;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.ss-overlay.open { opacity: 1; pointer-events: auto; }

.ss-palette {
    width: 100%; max-width: 640px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 76vh;
    transform: translateY(-8px) scale(.98);
    transition: transform .15s ease;
}
.ss-overlay.open .ss-palette { transform: translateY(0) scale(1); }

/* ── Search input row ───────────────────────────────────────── */
.ss-input-row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.ss-input-row i.ss-search-icon { color: #94a3b8; font-size: 16px; }
.ss-input {
    flex: 1; border: none; outline: none;
    font-size: 16px; color: #0f172a; background: transparent;
    font-family: inherit;
}
.ss-input::placeholder { color: #94a3b8; }
.ss-input-spinner { display: none; color: #94a3b8; font-size: 14px; }
.ss-input-spinner.active { display: block; }
.ss-close-btn {
    border: none; background: #f1f5f9; color: #64748b;
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; flex-shrink: 0;
}

/* ── Scrollable results body ───────────────────────────────── */
.ss-body { overflow-y: auto; flex: 1; padding: 8px 0 12px; }

.ss-section { padding: 4px 0 10px; }
.ss-section-label {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 6px 18px;
}

.ss-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 18px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
}
.ss-item:hover, .ss-item.active {
    background: #f8faff;
    border-left-color: #1d4ed8;
}
.ss-item-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.ss-item-text { min-width: 0; flex: 1; }
.ss-item-title {
    font-size: 13.5px; font-weight: 600; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-item-title mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
.ss-item-sub {
    font-size: 12px; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-item-arrow { color: #cbd5e1; font-size: 11px; flex-shrink: 0; }

/* ── AI Answer panel ────────────────────────────────────────── */
.ss-ai-row {
    margin: 4px 14px 10px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
}
.ss-ai-row:hover { border-color: #c7d2fe; }
.ss-ai-row .ss-ai-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: #4338ca; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.ss-ai-row-text { flex: 1; min-width: 0; }
.ss-ai-row-title { font-size: 13px; font-weight: 700; color: #3730a3; }
.ss-ai-row-sub { font-size: 12px; color: #6366f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-ai-answer {
    margin: 4px 14px 10px;
    background: #f8faff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 14px 16px;
}
.ss-ai-answer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ss-ai-answer-head .ss-ai-icon { width: 24px; height: 24px; font-size: 11px; border-radius: 7px; background: #4338ca; color: #fff; display:flex;align-items:center;justify-content:center; }
.ss-ai-answer-head span { font-size: 12px; font-weight: 700; color: #4338ca; }
.ss-ai-answer-text { font-size: 13.5px; line-height: 1.55; color: #1e293b; white-space: pre-wrap; }
.ss-ai-answer-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #1d4ed8;
    text-decoration: none;
}
.ss-ai-answer-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }

/* Confirmation prompt reused inside an AI answer, mirroring the chat widget's own style */
.ss-confirm { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dbeafe; }
.ss-confirm-summary { font-size: 12.5px; color: #1e293b; margin-bottom: 8px; }
.ss-confirm-actions { display: flex; gap: 8px; }
.ss-confirm-btn { border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ss-confirm-btn.confirm { background: #1d4ed8; color: #fff; }
.ss-confirm-btn.cancel { background: #f1f5f9; color: #475569; }
.ss-confirm-result { font-size: 12.5px; font-weight: 600; }
.ss-confirm-result.done { color: #15803d; }
.ss-confirm-result.failed { color: #b91c1c; }

/* ── Empty / loading / error / no-results states ───────────── */
.ss-state {
    padding: 28px 18px;
    text-align: center;
    color: #94a3b8;
}
.ss-state i { font-size: 22px; margin-bottom: 8px; display: block; }
.ss-state-title { font-size: 13.5px; font-weight: 600; color: #475569; margin-bottom: 3px; }
.ss-state-sub { font-size: 12.5px; }

.ss-suggestions { padding: 6px 18px 4px; }
.ss-suggestions-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ss-suggestion-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px;
    font-size: 13px; color: #334155;
    cursor: pointer; border-radius: 8px;
}
.ss-suggestion-chip:hover { background: #f8fafc; }
.ss-suggestion-chip i { color: #94a3b8; font-size: 12px; width: 14px; }

/* ── Footer hint bar ────────────────────────────────────────── */
.ss-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 18px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px; color: #94a3b8;
    flex-shrink: 0;
}
.ss-footer-hints { display: flex; gap: 14px; }
.ss-footer-hints span { display: flex; align-items: center; gap: 5px; }
.ss-footer-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: #f1f5f9; border-radius: 4px; font-weight: 700; font-size: 10px; color: #64748b;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ss-overlay { padding: 0; align-items: stretch; }
    .ss-palette { max-width: none; height: 100%; max-height: none; border-radius: 0; }
    .ss-input { font-size: 16px; } /* prevents iOS zoom-on-focus */
    .ss-footer-hints span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-overlay, .ss-palette { transition: none; }
}