/* =========================================================
   SETTINGS PANEL (iOS-style)
========================================================= */

.settings-panel {

    position: absolute;

    right:
        max(16px, env(safe-area-inset-right));

    bottom: 58px;

    z-index: 600;

    width: 232px;

    max-height: 300px;

    overflow: hidden;

    border-radius: 16px;

    background:
        rgba(22,22,24,.82);

    -webkit-backdrop-filter:
        blur(26px) saturate(1.5);

    backdrop-filter:
        blur(26px) saturate(1.5);

    box-shadow:
        0 16px 50px
        rgba(0,0,0,.55),
        0 2px 8px
        rgba(0,0,0,.3);

    border:
        1px solid
        rgba(255,255,255,.09);

    opacity: 1;

    transform-origin: bottom right;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .22s var(--ease),
        transform .22s var(--ease),
        visibility .22s var(--ease);

}


.settings-panel.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(6px)
        scale(.94);

}


.settings-view {

    max-height: 280px;

    overflow-y: auto;

}


.settings-view.hidden {

    display: none;

}


.settings-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 16px;

    font-size: 13px;

    font-weight: 500;

    color: #fff;

    cursor: pointer;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    transition:
        background .15s ease;

}


.settings-row:hover {

    background:
        rgba(255,255,255,.05);

}


.settings-row:last-child {

    border-bottom: none;

}


.settings-row:active {

    background:
        rgba(255,255,255,.08);

}


.settings-row-right {

    display: flex;

    align-items: center;

    gap: 4px;

    color:
        rgba(255,255,255,.55);

    max-width: 55%;

}


.settings-value {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   SETTINGS DIVIDER + TOGGLE ROWS
========================================================= */

.settings-divider {

    height: 8px;

    background: rgba(255,255,255,.03);

}


.settings-group-label {

    padding: 12px 16px 4px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;

    color: rgba(255,255,255,.4);

}


.settings-toggle-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 16px;

    font-size: 13px;

    font-weight: 500;

    color: #fff;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.settings-toggle-row:last-child {

    border-bottom: none;

}


.settings-toggle-row.hidden {

    display: none;

}


.toggle-switch {

    position: relative;

    width: 42px;

    height: 24px;

    flex-shrink: 0;

    border: 0;

    border-radius: 999px;

    background: rgba(255,255,255,.2);

    cursor: pointer;

    padding: 0;

    transition: background .18s ease;

}


.toggle-switch::after {

    content: '';

    position: absolute;

    top: 3px;

    left: 3px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #fff;

    transition: transform .18s ease;

}


.toggle-switch.active {

    background: var(--red);

}


.toggle-switch.active::after {

    transform: translateX(18px);

}