:root { --ru-topbar-h: 56px; }

#topMenuDialog {
    margin: 0 auto;
    margin-top: var(--ru-topbar-h);
    width: 75%;
    max-width: 1000px;
    transition: transform 0.25s ease-out;
}
#topMenuDialog .modal-content {
    max-height: calc(100dvh - var(--ru-topbar-h));
    max-height: calc(100vh - var(--ru-topbar-h)); /* fallback */
}
/* fullscreen behavior on small devices */
@media (max-width: 767.98px) {
    #topMenuDialog {
        width: 100%;
        height: calc(100dvh - var(--ru-topbar-h));
        height: calc(100vh - var(--ru-topbar-h)); /* fallback */
        margin-top: var(--ru-topbar-h);
        border-radius: 0;
    }
    #topMenuDialog .modal-content {
        height: 100%;
        border-radius: 0;
    }
}

/* Slide-down animation */
.modal.fade #topMenuDialog {
    transform: translateY(-10px);
}
.modal.show #topMenuDialog {
    transform: translateY(0);
}

/* Quick actions */
.ru-quick-actions .btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
}

/* Section titles */
.ru-section-title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
}

.modal-backdrop.show {
    opacity: .2;   /* lighter backdrop */
}

.bg-secondary-custom {
    --bs-secondary-rgb: 36, 36, 36; /* Equivalent to #2E2E2E */
    --bs-bg-opacity: 1; /* Adjust opacity globally if needed */
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
}
.icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Helps iOS Safari modal height + scrolling */
.modal {
    -webkit-overflow-scrolling: touch;
}
.modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Shared scanner container */
.scanner-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

/* Fixed height for mobile stability */
.scanner-wrap.scanner-mobile {
    height: 320px;          /* sweet spot for phones */
}

/* Desktop can be taller */
@media (min-width: 768px) {
    .scanner-wrap.scanner-mobile {
        height: 420px;
    }
}

/* Force video to behave */
.scanner-wrap video,
.scanner-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}