/* ============================================
   NOTIFICATION SETTINGS (дзвіночок у сайдбарі)
   ============================================ */

.gvp-notif-settings {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Бейдж-лічильник непоказаних сповіщень (тихий режим) */
.gvp-notif-settings__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px #0e0f16;
}

/* ---- Панель ----
   position: fixed — щоб не обрізалась `overflow: hidden` сайдбара.
   Точні координати виставляє JS по кнопці; тут — запасні значення. */
.gvp-notif-settings__panel {
    position: fixed;
    left: 78px;
    bottom: 1rem;
    width: 300px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
                0 10px 10px -5px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    color: #e2e8f0;
    animation: gvpNotifPanelIn 0.18s ease;
}

@keyframes gvpNotifPanelIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.gvp-notif-settings__panel[hidden] { display: none; }

.gvp-notif-settings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gvp-notif-settings__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f3f4f6;
}

.gvp-notif-settings__hint {
    margin: 0.4rem 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

/* ---- Перемикач вкл/викл ---- */
.gvp-notif-switch {
    display: inline-flex;
    cursor: pointer;
}
.gvp-notif-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.gvp-notif-switch__track {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #475569;
    position: relative;
    transition: background 0.2s ease;
}
.gvp-notif-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}
.gvp-notif-switch input:checked + .gvp-notif-switch__track {
    background: #a855f7;
}
.gvp-notif-switch input:checked + .gvp-notif-switch__track .gvp-notif-switch__thumb {
    transform: translateX(18px);
}
.gvp-notif-switch input:focus-visible + .gvp-notif-switch__track {
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5);
}

/* ---- Контроли (максимум / тривалість) ---- */
.gvp-notif-settings__controls[hidden] { display: none; }

.gvp-notif-settings__field {
    margin-bottom: 0.85rem;
}
.gvp-notif-settings__field > label {
    display: block;
    font-size: 0.75rem;
    color: #cbd5e1;
    margin-bottom: 0.35rem;
}
.gvp-notif-settings__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.gvp-notif-settings__row input[type="range"] {
    flex: 1;
    accent-color: #a855f7;
    cursor: pointer;
}
.gvp-notif-settings__out {
    min-width: 40px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f3f4f6;
    white-space: nowrap;
}

/* ---- Черга непоказаних ---- */
.gvp-notif-settings__queue {
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.65rem;
}
.gvp-notif-settings__queue[hidden] { display: none; }

.gvp-notif-settings__queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.gvp-notif-settings__clear {
    background: none;
    border: none;
    color: #a855f7;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
}
.gvp-notif-settings__clear:hover { color: #c598ef; }

.gvp-notif-settings__queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.gvp-notif-settings__queue-item {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
}
.gvp-notif-settings__queue-item--success { border-left-color: #10b981; }
.gvp-notif-settings__queue-item--error   { border-left-color: #ef4444; }
.gvp-notif-settings__queue-item--warning { border-left-color: #f59e0b; }
.gvp-notif-settings__queue-item--info     { border-left-color: #3b82f6; }

.gvp-notif-settings__queue-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #f3f4f6;
}
.gvp-notif-settings__queue-msg {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.35;
    word-wrap: break-word;
}

/* ---- Індикатор збереження ---- */
.gvp-notif-settings__saved {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.7rem;
    color: #10b981;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gvp-notif-settings__saved.is-visible { opacity: 1; }

/* На вузьких екранах панель не має вилазити за межі екрана */
@media (max-width: 768px) {
    .gvp-notif-settings__panel {
        width: min(300px, calc(100vw - 90px));
    }
}