/* ================================================================
   COMMAND PALETTE
   ================================================================ */
.palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--byte-z-palette);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18vh;
}
.palette-backdrop[hidden] { display: none; }
.palette {
    width: min(560px, 90vw);
    background: rgba(20, 38, 46, 0.96);
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-lg);
    box-shadow: var(--byte-shadow-pop);
    overflow: hidden;
}
.palette__input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--byte-border);
}
.palette__input-wrap i { color: var(--byte-text-muted); font-size: 18px; }
.palette__input {
    flex: 1; background: transparent; border: 0; outline: 0;
    font-size: 15px; color: var(--byte-text);
}
.palette__input::placeholder { color: var(--byte-text-subtle); }
.palette__kbd {
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    color: var(--byte-text-subtle);
    border: 1px solid var(--byte-border-strong);
    border-radius: 4px;
    padding: 2px 6px;
}
.palette__list { max-height: 380px; overflow-y: auto; padding: 6px; }
.palette__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--byte-text-muted);
    font-size: 13px;
    cursor: pointer;
}
.palette__item i { font-size: 16px; color: var(--byte-text-subtle); }
.palette__item.active, .palette__item:hover {
    background: var(--byte-primary-soft);
    color: var(--byte-text);
}
.palette__item.active i { color: var(--byte-primary); }
.palette__empty {
    padding: 20px;
    text-align: center;
    color: var(--byte-text-subtle);
    font-size: 13px;
    font-style: italic;
}

/* ================================================================
   NOTIFICATIONS
   ================================================================ */
.notif-stack {
    position: fixed;
    top: calc(var(--byte-menubar-h) + 12px);
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: var(--byte-z-notif);
    pointer-events: none;
    max-width: 320px;
}
.notif {
    background: var(--byte-surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-md);
    box-shadow: var(--byte-shadow-pop);
    padding: 12px 14px;
    pointer-events: auto;
    animation: byte-notif-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.notif.removing { animation: byte-notif-out 0.25s forwards; }
.notif__icon { font-size: 18px; color: var(--byte-primary); flex-shrink: 0; margin-top: 1px; }
.notif__body { flex: 1; }
.notif__title { font-size: 13px; font-weight: 600; color: var(--byte-text); margin-bottom: 2px; }
.notif__text  { font-size: 12px; color: var(--byte-text-muted); line-height: 1.4; }
.notif__close {
    color: var(--byte-text-subtle);
    font-size: 14px;
    padding: 0;
    line-height: 1;
}
.notif__close:hover { color: var(--byte-text); }
@keyframes byte-notif-in  { from { transform: translateX(360px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes byte-notif-out { to   { transform: translateX(360px); opacity: 0; } }