/* =============================================================================
   SudaHub redesign — Command palette (CLAUDE.md §5.6)
   Phase 6. Reuses the Sheet primitive (Phase 4) for its backdrop/open-close
   motion and desktop centred-modal behaviour; this file only styles the
   palette's own contents. A glass surface per §6 (one of the three allowed
   floating-chrome instances alongside the top bar and the ticker).
   ========================================================================== */

#command-palette.sheet {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top-color: var(--glass-border-top);
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
@supports not (backdrop-filter: blur(1px)) {
    #command-palette.sheet { background: var(--surface-overlay); }
}
/* A command palette reads near the top of the viewport, not dead-centre. */
@media (min-width: 768px) {
    #command-palette.sheet {
        top: 14vh;
        inset-block-end: auto;
        transform: translate(-50%, 0);
        max-width: 620px;
    }
    #command-palette.sheet.is-open { transform: translate(-50%, 0); }
}

.palette-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-block-end: 1px solid var(--line);
    flex-shrink: 0;
}
.palette-search-icon { color: var(--text-muted); flex-shrink: 0; }
.palette-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-brand);
    font-size: var(--fs-body-l);
    color: var(--text-primary);
}
[lang="ar"] .palette-input { font-family: var(--font-ar); }
.palette-input::placeholder { color: var(--text-muted); }

.palette-listbox {
    overflow-y: auto;
    padding: 8px;
    flex: 1;
}

.palette-group-label {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 10px 10px 6px;
    margin: 0;
}
[lang="en"] .palette-group-label { text-transform: uppercase; }
[lang="ar"] .palette-group-label { letter-spacing: 0; }

.palette-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    cursor: pointer;
}
.palette-option:hover, .palette-option.is-active { background: var(--surface-raised); }
.palette-option-type {
    flex-shrink: 0;
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    min-width: 64px;
    text-align: center;
}
[lang="en"] .palette-option-type { text-transform: uppercase; }
[lang="ar"] .palette-option-type { letter-spacing: 0; }
.palette-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette-option-title { font-size: var(--fs-body-s); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-option-subtitle { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.palette-empty { text-align: center; font-size: var(--fs-body-s); color: var(--text-muted); padding: 32px 16px; margin: 0; }