/* ═══════════════════════════════════════════════════════════
   المساعد — لوحة الأوامر (Ctrl+K)
   يتبع نفس لغة الواجهة الموجودة: كايرو، أزرق النظام، حواف 12-16px
   ═══════════════════════════════════════════════════════════ */

.asx-fab {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 22px;
    z-index: 1200;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37,99,235,.38);
    display: grid;
    place-items: center;
    transition: transform .15s, box-shadow .15s;
}

.asx-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(37,99,235,.46); }
.asx-fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }

/* ── Backdrop + panel ── */
.asx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    animation: asx-fade .14s ease-out;
}

@keyframes asx-fade { from { opacity: 0; } }

.asx-panel {
    width: min(640px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15,23,42,.35), 0 4px 12px rgba(15,23,42,.12);
    overflow: hidden;
    animation: asx-pop .16s cubic-bezier(.2,.9,.3,1);
}

@keyframes asx-pop { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

/* ── Search row ── */
.asx-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    flex: none;
}

.asx-search__icon { color: #94a3b8; font-size: 1.05rem; flex: none; }

.asx-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 1.02rem;
    color: #0f172a;
    background: transparent;
}

.asx-search__input::placeholder { color: #94a3b8; }

.asx-esc, .asx-foot kbd {
    font-family: inherit;
    font-size: .68rem;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 2px 6px;
    flex: none;
}

/* ── Results ── */
.asx-results { overflow-y: auto; padding: 8px; flex: 1; min-height: 0; overscroll-behavior: contain; }

.asx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: start;
    font: inherit;
    cursor: pointer;
    color: #0f172a;
}

.asx-item.is-active { background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }

.asx-item__icon {
    width: 34px; height: 34px; flex: none;
    border-radius: 9px;
    display: grid; place-items: center;
    background: #f1f5f9; color: #2563eb; font-size: .95rem;
}

.asx-item.is-active .asx-item__icon { background: #dbeafe; }

.asx-item__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.asx-item__title { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asx-item__group { font-size: .76rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asx-item__go { color: #cbd5e1; font-size: .85rem; flex: none; opacity: 0; }
.asx-item.is-active .asx-item__go { opacity: 1; color: #2563eb; }

/* ── Empty state ── */
.asx-empty { text-align: center; padding: 36px 20px; color: #64748b; }
.asx-empty__icon { font-size: 2rem; opacity: .35; display: block; margin-bottom: 10px; }
.asx-empty__title { font-weight: 600; color: #334155; margin-bottom: 4px; }
.asx-empty__hint { font-size: .82rem; }

/* ── Footer ── */
.asx-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: .74rem;
    color: #64748b;
    flex: none;
}

.asx-foot kbd { margin-inline-end: 3px; }
.asx-foot__count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    .asx-backdrop { padding: 6vh 10px 10px; }
    .asx-panel { max-height: 82vh; }
    .asx-fab { width: 46px; height: 46px; inset-block-end: 16px; inset-inline-start: 16px; }
    .asx-foot span:not(.asx-foot__count) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .asx-backdrop, .asx-panel { animation: none; }
    .asx-fab { transition: none; }
}
