/* Modal Styles - Material Design 3 */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Scrim */
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--md-sys-motion-easing-standard);
}

.modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.modal.hidden {
    display: none;
    /* Fallback */
}

.modal-content {
    background: var(--md-sys-color-surface-3);
    /* Surface Container High */
    padding: 24px;
    border-radius: 28px;
    /* Dialog token */
    width: 100%;
    max-width: 400px;
    box-shadow: var(--md-sys-elevation-level-3);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.2s var(--md-sys-motion-easing-standard);
    color: var(--md-sys-color-on-surface);
}

.modal:not(.hidden) .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-modal:hover {
    background-color: rgba(230, 225, 229, 0.08);
}

/* Paste List Items */
.paste-item {
    padding: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.paste-item:first-child {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.paste-item:hover {
    background: var(--md-sys-color-surface-4);
    /* Hover state */
}

.paste-item a {
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    font-weight: 500;
}

.small {
    padding: 4px 8px;
    font-size: 0.75rem;
    height: 32px;
    /* Taller touch target */
}

/* Scrollbar for lists */
#pastes-list::-webkit-scrollbar {
    width: 8px;
}

#pastes-list::-webkit-scrollbar-thumb {
    background-color: var(--md-sys-color-outline-variant);
    border-radius: 4px;
}