/* ============================================
   GOOGLE MEET 2024 DESIGN SYSTEM
   ============================================ */

/* AngularJS ng-cloak - Hide elements before Angular compiles */
[ng-cloak], .ng-cloak {
    display: none !important;
}

/* ✅ CRITICAL: Video call modal must be hidden by default */
.video-call-modal.gm-style[ng-cloak],
.video-call-modal.gm-style.ng-cloak,
.video-call-modal.gm-style.ng-hide,
.video-call-modal.gm-style.video-call-modal-minimize[ng-cloak],
.video-call-modal.gm-style.video-call-modal-minimize.ng-cloak,
.video-call-modal.gm-style.video-call-modal-minimize.ng-hide,
#videoCallModal[ng-cloak],
#videoCallModal.ng-cloak,
#videoCallModal.ng-hide {
    display: none !important;
}

/* ✅ CRITICAL: Screen-view must be hidden when showScreenView is false */
.video-call-modal.gm-style .screen-view.ng-hide,
.video-call-modal.gm-style .screen-view[ng-show]:not(.ng-hide):empty,
.video-call-modal.gm-style #screenView.ng-hide,
.screen-view.ng-hide,
#screenView.ng-hide {
    display: none !important;
}

/* Detailed video call modal must appear above gm-style video call modal */
#detailedVideoCall {
    z-index: 1000001 !important;
}

.modal.upcoming-appointment-window {
    z-index: 2000000001 !important;
}

.modal-backdrop.upcoming-appointment-backdrop {
    z-index: 2000000000 !important;
}

.upcoming-appointment-window .modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden;
}

:root {
    /* Background Colors */
    --gm-bg-primary: #1f1f1f;
    --gm-bg-secondary: #292929;
    --gm-bg-tertiary: #3c4043;
    --gm-bg-hover: #4a4d51;
    --gm-bg-active: #5f6368;

    /* Text Colors */
    --gm-text-primary: #ffffff;
    --gm-text-secondary: #9aa0a6;
    --gm-text-disabled: #5f6368;

    /* Accent Colors */
    --gm-accent-red: #ea4335;
    --gm-accent-red-hover: #d93025;
    --gm-accent-blue: #8ab4f8;
    --gm-accent-green: #81c995;

    /* Recording */
    --gm-recording-red: #f44336;
    --gm-recording-pulse: rgba(244, 67, 54, 0.4);

    /* Borders & Shadows */
    --gm-border-color: rgba(255, 255, 255, 0.1);
    --gm-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);

    /* Sizing */
    --gm-btn-size: 48px;
    --gm-btn-size-sm: 40px;
    --gm-border-radius: 24px;
    --gm-border-radius-video: 12px;
    --gm-gap: 8px;
    --gm-mobile-toolbar-offset: 0px;

    /* Transitions */
    --gm-transition: 200ms ease-in-out;
}

/* ============================================
   RECORDING INDICATOR - TOP LEFT PILL BADGE
   ============================================ */

.gm-recording-indicator {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    user-select: none;
}

.gm-recording-dot {
    width: 10px;
    height: 10px;
    background: var(--gm-recording-red);
    border-radius: 50%;
    animation: gm-pulse 1.5s infinite ease-in-out;
}

.gm-recording-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-text-primary);
    letter-spacing: 0.5px;
}

.gm-recording-fragments {
    font-size: 11px;
    color: var(--gm-text-secondary);
}

/* Recording States */
.gm-recording-stalled .gm-recording-dot {
    background: #ff9800;
    animation: gm-pulse-warning 1s infinite;
}

.gm-recording-stalled .gm-recording-text {
    color: #ff9800;
}

.gm-recording-stalled::after {
    content: ' - Yeniden başlatılıyor...';
    font-size: 11px;
    color: #ff9800;
}

.gm-recording-error .gm-recording-dot {
    background: var(--gm-accent-red);
    animation: none;
}

.gm-recording-error .gm-recording-text {
    color: var(--gm-accent-red);
}

.gm-recording-error::after {
    content: ' - Hata!';
    font-size: 11px;
    color: var(--gm-accent-red);
}

/* Pulse Animation */
@keyframes gm-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--gm-recording-pulse);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(244, 67, 54, 0);
    }
}

@keyframes gm-pulse-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ============================================
   CONTROL BAR - BOTTOM CENTER
   ============================================ */

.video-call-modal.gm-style .gm-control-bar,
.video-call-modal.gm-style #VideoCallBottom.gm-control-bar,
#VideoCallBottom.gm-control-bar {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: #3c4043 !important;
    border-radius: 28px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    z-index: 100 !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    justify-content: center !important;
    width: auto !important;
}

/* ✅ Respect ng-show/ng-hide for control bar */
.video-call-modal.gm-style .gm-control-bar.ng-hide,
.video-call-modal.gm-style #VideoCallBottom.ng-hide,
#VideoCallBottom.ng-hide {
    display: none !important;
}

.gm-control-bar-mobile {
    bottom: 10px !important;
    padding: 8px 12px !important;
}

.video-call-modal.gm-style .gm-control-group,
.gm-control-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    height: auto !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.video-call-modal.gm-style .gm-primary-controls,
.gm-primary-controls {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-right: 12px !important;
    margin-right: 0 !important;
}

/* Control Button Base */
.video-call-modal.gm-style .gm-control-btn,
.gm-control-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 200ms ease-in-out !important;
    color: #ffffff !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

.video-call-modal.gm-style .gm-control-btn:hover,
.gm-control-btn:hover {
    background: #4a4d51 !important;
}

.video-call-modal.gm-style .gm-control-btn:active,
.gm-control-btn:active {
    background: #5f6368 !important;
    transform: scale(0.95) !important;
}

.video-call-modal.gm-style .gm-control-btn img,
.gm-control-btn img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
}

.video-call-modal.gm-style .gm-control-btn i,
.gm-control-btn i {
    font-size: 20px !important;
    color: #ffffff !important;
}

/* Off State (Muted/Video Off) */
.video-call-modal.gm-style .gm-control-off,
.gm-control-off {
    background: #ea4335 !important;
}

.video-call-modal.gm-style .gm-control-off:hover,
.gm-control-off:hover {
    background: #d93025 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-screen-share-active,
.gm-control-btn.gm-screen-share-active {
    background: #1a73e8 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-screen-share-active:hover,
.gm-control-btn.gm-screen-share-active:hover {
    background: #1765cc !important;
}

/* End Call Button */
.video-call-modal.gm-style .gm-end-call-btn,
.gm-end-call-btn {
    background: #ea4335 !important;
    width: 56px !important;
    min-width: 56px !important;
    border-radius: 28px !important;
}

.video-call-modal.gm-style .gm-end-call-btn:hover,
.gm-end-call-btn:hover {
    background: #d93025 !important;
}

/* More Button */
.video-call-modal.gm-style .gm-more-btn,
.gm-more-btn {
    background: transparent !important;
}

/* ============================================
   MORE OPTIONS DROPDOWN MENU
   ============================================ */

.video-call-modal.gm-style .gm-more-menu,
.gm-more-menu {
    display: none !important;
    position: absolute !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    background: #292929 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 0 !important;
    z-index: 1000 !important;
}

.video-call-modal.gm-style .gm-more-menu.active,
.gm-more-menu.active {
    display: block !important;
}

.video-call-modal.gm-style .gm-menu-item,
.gm-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 14px !important;
    transition: 200ms ease-in-out !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
}

.video-call-modal.gm-style .gm-menu-item:hover,
.gm-menu-item:hover {
    background: #4a4d51 !important;
}

.video-call-modal.gm-style .gm-menu-item img,
.gm-menu-item img {
    width: 20px !important;
    height: 20px !important;
    filter: brightness(0) invert(0.7) !important;
}

.video-call-modal.gm-style .gm-menu-item:hover img,
.gm-menu-item:hover img {
    filter: brightness(0) invert(1) !important;
}

.video-call-modal.gm-style .gm-menu-divider,
.gm-menu-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 8px 0 !important;
}

/* ============================================
   VIDEO GRID - GOOGLE MEET STYLE
   ============================================ */

.gm-video-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: var(--gm-gap);
    padding: 8px;
    box-sizing: border-box;
}

/* Gallery Mode - Equal Tiles */
.gm-gallery-mode .gm-gallery-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gm-gap);
    height: 100%;
    align-content: center;
    padding: 60px 20px 100px;
}

/* Focus Mode - Main Video + Thumbnails */
.gm-focus-mode .gm-gallery-view {
    display: flex;
    gap: var(--gm-gap);
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.gm-focus-mode .gm-screen-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 100px;
}

/* Video Tile */
.gm-video-tile {
    position: relative;
    background: var(--gm-bg-secondary);
    border-radius: var(--gm-border-radius-video);
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--gm-transition);
    border: 3px solid transparent;
}

.gm-video-tile:hover {
    border-color: var(--gm-accent-blue);
}

.gm-video-tile video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--gm-border-radius-video);
}

/* Self Video - Floating Corner in Focus Mode */
.gm-focus-mode .gm-self-video {
    width: 180px;
    height: 135px;
    position: fixed;
    bottom: 100px;
    right: 20px;
    box-shadow: var(--gm-shadow);
    z-index: 50;
    aspect-ratio: auto;
}

/* Thumbnail in Gallery Top */
.gm-gallery-top .gm-video-tile {
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

/* Profile Avatar */
.gm-profile-tile {
    flex-direction: column;
    gap: 12px;
}

.gm-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gm-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-profile-avatar span {
    font-size: 32px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.gm-profile-large {
    width: 120px;
    height: 120px;
}

.gm-profile-large span {
    font-size: 48px;
}

/* Name Badge */
.gm-name-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.gm-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--gm-text-primary);
}

.gm-title {
    font-size: 11px;
    color: var(--gm-text-secondary);
}

/* ============================================
   INCOMING CALL SCREEN - GOOGLE MEET STYLE
   ============================================ */

/* Full screen overlay for incoming call */
.video-call-modal.gm-style .gm-incoming-call {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 600;
    background: rgba(32, 33, 36, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* Safe area support for notched devices */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.video-call-modal.gm-style .gm-incoming-call.ng-hide {
    display: none !important;
}

/* Incoming call avatar */
.video-call-modal.gm-style .gm-incoming-avatar {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-modal.gm-style .gm-incoming-avatar .gm-avatar-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34a853 0%, #4285f4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
    box-shadow: 0 8px 32px rgba(52, 168, 83, 0.4);
    animation: gm-avatar-pulse 2s ease-in-out infinite;
}

@keyframes gm-avatar-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.video-call-modal.gm-style .gm-incoming-avatar .gm-avatar-circle span {
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
}

.video-call-modal.gm-style .gm-incoming-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(52, 168, 83, 0.5);
    animation: gm-incoming-pulse 1.5s ease-out infinite;
}

.video-call-modal.gm-style .gm-incoming-ring.gm-ring-2 {
    width: 130px;
    height: 130px;
    animation-delay: 0.3s;
}

@keyframes gm-incoming-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* Incoming call info */
.video-call-modal.gm-style .gm-incoming-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.video-call-modal.gm-style .gm-incoming-label {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.video-call-modal.gm-style .gm-incoming-name {
    font-size: 26px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.2px;
}

/* Incoming call action buttons */
.video-call-modal.gm-style .gm-incoming-actions {
    display: flex;
    gap: 24px;
    margin-top: 32px;
}

.video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn,
.video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn {
    min-width: 140px;
    height: auto;
    border-radius: 32px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 16px 28px;
}

.video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn {
    background: #ea4335;
    box-shadow: 0 4px 24px rgba(234, 67, 53, 0.5);
}

.video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn:hover {
    background: #d93025;
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(234, 67, 53, 0.6);
}

.video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn {
    background: #34a853;
    box-shadow: 0 4px 24px rgba(52, 168, 83, 0.5);
}

.video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn:hover {
    background: #2d9249;
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(52, 168, 83, 0.6);
}

.video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn svg,
.video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn svg {
    fill: #ffffff;
    width: 36px !important;
    height: 36px !important;
}

/* Button label text */
.video-call-modal.gm-style .gm-incoming-actions .gm-btn-label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.video-call-modal.gm-style .gm-btn-spinner {
    width: 36px;
    height: 36px;
}

.video-call-modal.gm-style .gm-btn-spinner svg {
    width: 100%;
    height: 100%;
}

.video-call-modal.gm-style .gm-btn-spinner circle {
    stroke: #ffffff;
}

/* Legacy support - hide old gm-call-actions if still in DOM */
.video-call-modal.gm-style .gm-call-actions {
    display: none !important;
}

/* Answer/Decline button base styles (for other contexts) */
.video-call-modal.gm-style .gm-answer-btn,
.gm-answer-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 36px !important;
    background: #34a853 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: 200ms ease-in-out !important;
}

.video-call-modal.gm-style .gm-answer-btn:hover,
.gm-answer-btn:hover {
    background: #2d9249 !important;
    transform: scale(1.02) !important;
}

.video-call-modal.gm-style .gm-answer-btn:disabled,
.gm-answer-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.video-call-modal.gm-style .gm-answer-btn svg,
.gm-answer-btn svg {
    fill: #ffffff !important;
}

.video-call-modal.gm-style .gm-decline-btn,
.gm-decline-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    background: #ea4335 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: 200ms ease-in-out !important;
}

.video-call-modal.gm-style .gm-decline-btn:hover,
.gm-decline-btn:hover {
    background: #d93025 !important;
    transform: scale(1.02) !important;
}

.video-call-modal.gm-style .gm-decline-btn svg,
.gm-decline-btn svg {
    fill: #ffffff !important;
}

/* ============================================
   MAIN MODAL UPDATES FOR GOOGLE MEET STYLE
   ============================================ */

.video-call-modal.gm-style {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--gm-bg-primary) !important;
    font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    /* Legacy .video-call-modal uses translateZ(0); that creates a containing block and can break
       fixed-position descendants when layout changes (e.g. screen share). Viewport-fixed toolbar
       needs no transform on this root. */
    -webkit-transform: none !important;
    transform: none !important;
}

/* ✅ CRITICAL: Respect ng-show/ng-hide - modal must be hidden when no call */
.video-call-modal.gm-style.ng-hide {
    display: none !important;
}

.video-call-modal.gm-style .video-call-wrapper {
    background: var(--gm-bg-primary);
    padding: 20px 20px 100px !important;
    box-sizing: border-box;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    overflow: hidden;
}

/* Hide debug controls */
.video-call-modal.gm-style #local-control,
.video-call-modal.gm-style #available-tracks,
.video-call-modal.gm-style #remote-video,
.video-call-modal.gm-style #remote-audio {
    display: none !important;
}

/* Top name bar for minimized view */
.video-call-modal.gm-style .video-call-modal-top-name {
    background: var(--gm-bg-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

/* ============================================
   VIDEO GRID OVERRIDES FOR GOOGLE MEET STYLE
   ============================================ */

/* Gallery View - Grid Layout like Google Meet */
.video-call-modal.gm-style .gallery-view {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    flex: 1 !important;
}

/* Video Containers - Rounded corners like Meet */
.video-call-modal.gm-style .video-call-user-container,
.video-call-modal.gm-style .video-call-self-container,
.video-call-modal.gm-style #selfVideoContainer,
.video-call-modal.gm-style #videoCallProfile,
.video-call-modal.gm-style #operVideoCallProfile {
    background: var(--gm-bg-secondary) !important;
    border-radius: var(--gm-border-radius-video) !important;
    border: 3px solid transparent !important;
    transition: var(--gm-transition);
    aspect-ratio: 16/9;
    overflow: hidden !important;
    min-height: 150px;
    max-height: 50vh;
    flex: 1 1 calc(50% - 16px) !important;
    min-width: 310px !important;
    max-width: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}

.video-call-modal.gm-style .video-call-user-container:hover,
.video-call-modal.gm-style .video-call-self-container:hover,
.video-call-modal.gm-style #selfVideoContainer:hover {
    border-color: var(--gm-accent-blue) !important;
}

/* Operatör görüntüsüzde veya ng-hide: base kuralları geçecek şekilde tamamen gizle, yer kaplamasın */
.video-call-modal.gm-style #selfVideoContainer.video-call-self-container--operator-no-video,
.video-call-modal.gm-style #selfVideoContainer.ng-hide,
.video-call-modal.gm-style .video-call-self-container.video-call-self-container--operator-no-video,
.video-call-modal.gm-style .video-call-self-container.ng-hide {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* ============================================
   ACTIVE SPEAKER INDICATOR - GREEN PULSING BORDER
   ============================================ */

/* Active speaker base styles */
.video-call-modal.gm-style .video-call-user-container.active-speaker,
.video-call-modal.gm-style .video-call-self-container.active-speaker,
.video-call-modal.gm-style #selfVideoContainer.active-speaker,
.video-call-user-container.active-speaker,
.video-call-self-container.active-speaker {
    --speaker-border-width: 3px;
    --speaker-intensity: 0.5;
    border-color: #34a853 !important;
    border-width: var(--speaker-border-width) !important;
    box-shadow:
        0 0 0 1px rgba(52, 168, 83, 0.3),
        0 0 calc(var(--speaker-intensity) * 20px) rgba(52, 168, 83, calc(var(--speaker-intensity) * 0.6)),
        inset 0 0 calc(var(--speaker-intensity) * 10px) rgba(52, 168, 83, calc(var(--speaker-intensity) * 0.1)) !important;
    animation: activeSpeakerPulse 1.5s ease-in-out infinite !important;
}

/* Keyframes for pulsing glow effect */
@keyframes activeSpeakerPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(52, 168, 83, 0.3),
            0 0 8px rgba(52, 168, 83, 0.4),
            0 0 16px rgba(52, 168, 83, 0.2);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(52, 168, 83, 0.5),
            0 0 16px rgba(52, 168, 83, 0.6),
            0 0 32px rgba(52, 168, 83, 0.3);
    }
}

/* High volume - faster pulse */
.video-call-modal.gm-style .video-call-user-container.active-speaker[style*="--speaker-intensity: 0.7"],
.video-call-modal.gm-style .video-call-user-container.active-speaker[style*="--speaker-intensity: 0.8"],
.video-call-modal.gm-style .video-call-user-container.active-speaker[style*="--speaker-intensity: 0.9"],
.video-call-modal.gm-style .video-call-user-container.active-speaker[style*="--speaker-intensity: 1"] {
    animation-duration: 0.8s !important;
}

/* Video elements - contain (görüntüler oranı bozulmadan kutuya sığsın) */
.video-call-modal.gm-style .video-call-wrapper video,
.video-call-modal.gm-style .gallery-view video,
.video-call-modal.gm-style .video-call-user-container video,
.video-call-modal.gm-style .video-call-self-container video,
.video-call-modal.gm-style #selfVideoContainer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: var(--gm-border-radius-video) !important;
    max-height: none !important;
    background: var(--gm-bg-secondary);
}

.video-call-modal.gm-style.video-call-modal-new .video-call-wrapper,
.video-call-modal.gm-style.video-call-modal-new .gallery-view,
.video-call-modal.gm-style.video-call-modal-new .screen-view,
.video-call-modal.gm-style.video-call-modal-new .video-call-user-container,
.video-call-modal.gm-style.video-call-modal-new .video-call-self-container,
.video-call-modal.gm-style.video-call-modal-new #selfVideoContainer,
.video-call-modal.gm-style.video-call-modal-new #screenView {
    filter: none !important;
    -webkit-filter: none !important;
}
.video-call-modal.gm-style.video-call-modal-new .video-call-wrapper video,
.video-call-modal.gm-style.video-call-modal-new .gallery-view video,
.video-call-modal.gm-style.video-call-modal-new .video-call-user-container video,
.video-call-modal.gm-style.video-call-modal-new .video-call-self-container video,
.video-call-modal.gm-style.video-call-modal-new #selfVideoContainer video,
.video-call-modal.gm-style.video-call-modal-new .screen-view video,
.video-call-modal.gm-style.video-call-modal-new .video-call-screen-container video {
    filter: none !important;
    -webkit-filter: none !important;
}

.video-call-modal.gm-style.video-call-modal-new .gm-calling-overlay,
.video-call-modal.gm-style.video-call-modal-new .gm-incoming-call {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Screen View (Focus Mode) - Large main video */
.video-call-modal.gm-style .screen-view {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: calc(100% - 120px) !important;
    padding: 20px !important;
}

/* ✅ Screen-view ng-hide override - must come after display:flex rule */
.video-call-modal.gm-style .screen-view.ng-hide {
    display: none !important;
}

.video-call-modal.gm-style .screen-view > div,
.video-call-modal.gm-style .screen-view .video-call-user-container {
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    aspect-ratio: 16/9;
    background: var(--gm-bg-secondary) !important;
    border-radius: var(--gm-border-radius-video) !important;
}

.video-call-modal.gm-style .screen-view video {
    max-height: calc(100vh - 180px) !important;
    width: 100% !important;
    object-fit: contain !important;
    border-radius: var(--gm-border-radius-video) !important;
}

/* ✅ Local Screen Share Container - Visual indicator that you're sharing */
.video-call-modal.gm-style #localScreenShareContainer,
#localScreenShareContainer {
    position: relative;
    border: 2px solid #4285f4 !important; /* Google blue for "you are sharing" */
    background: var(--gm-bg-secondary) !important;
}

.video-call-modal.gm-style #localScreenShareContainer::before,
#localScreenShareContainer::before {
    content: 'Paylaşıyorsunuz';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    background: #4285f4;
    color: white;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
}

.video-call-modal.gm-style #localScreenShareContainer video,
#localScreenShareContainer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: var(--gm-border-radius-video) !important;
}

/* Screen share containers - object-fit contain for proper aspect ratio */
.video-call-modal.gm-style .video-call-screen-container,
.video-call-screen-container {
    position: relative;
    border: 1px solid rgba(66, 133, 244, 0.3);
}

.video-call-modal.gm-style .video-call-screen-container video,
.video-call-screen-container video {
    object-fit: contain !important; /* Screen shares should maintain aspect ratio */
}

/* Gallery Top (Thumbnails in focus mode) */
.video-call-modal.gm-style .gallery-view-top {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 0 20px !important;
    z-index: 1 !important;
}

.video-call-modal.gm-style .gallery-view-top > div {
    width: 160px !important;
    height: 90px;
    background: var(--gm-bg-secondary) !important;
    border-radius: var(--gm-border-radius-video);
    overflow: hidden;
}

.video-call-modal.gm-style .gallery-view-top video {
    max-height: 90px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Profile Card (when video is off) */
.video-call-modal.gm-style .video-call-profile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--gm-border-radius-video);
}

.video-call-modal.gm-style .video-call-profile span {
    font-size: 48px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.video-call-modal.gm-style .video-call-profile img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.video-call-modal.gm-style .video-call-connection-msg,
.video-call-modal.gm-style #videoCallConnectionMsgWrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}
.video-call-modal.gm-style .video-call-connection-msg-text {
    margin: 0;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Name Area - Modern pill style */
.video-call-modal.gm-style .video-call-name-area {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: auto;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 6px 12px;
    height: auto;
    z-index: 20; /* always above video element */
}

.video-call-modal.gm-style .video-call-name {
    background: transparent;
    padding: 0;
    border-radius: 0;
    height: auto;
}

.video-call-modal.gm-style .video-call-name span {
    font-size: 13px;
    font-weight: 500;
    color: var(--gm-text-primary);
}

.video-call-modal.gm-style .video-call-name-title {
    font-size: 11px;
    color: var(--gm-text-secondary);
    opacity: 1;
}

/* Appointment Duration - Modern style */
.video-call-modal.gm-style .video-call-appointment-duration {
    position: absolute;
    top: 20px;
    right: 120px; /* Moved left to not overlap with fullscreen action buttons */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--gm-text-primary);
    z-index: 99;
    /* Never inherit .video-call-modal-mobile-view tile hack (opacity:0) — appointment strip stays visible */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Recording badge — Meet pill (legacy block no longer applies inside .gm-style) */
.video-call-modal.gm-style .video-call-record {
    position: absolute;
    top: 20px;
    right: 16px;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--gm-text-primary);
    opacity: 1 !important;
    visibility: visible !important;
}

.video-call-modal.gm-style .video-call-record .video-call-record-circle {
    min-width: 8px;
    min-height: 8px;
    width: 8px;
    height: 8px;
    background-color: #e14d55;
    border-radius: 50%;
    display: block;
}

/* Full Screen Mode - Top Right Actions */
.video-call-modal.gm-style .gm-fullscreen-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.video-call-modal.gm-style .gm-fullscreen-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}

.video-call-modal.gm-style .gm-fullscreen-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.video-call-modal.gm-style .gm-fullscreen-action-btn.gm-close-btn:hover {
    background: var(--gm-accent-red);
}

.video-call-modal.gm-style .gm-fullscreen-action-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Minimized View Adjustments */
.video-call-modal.gm-style.video-call-modal-minimize {
    width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 200px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ✅ CRITICAL: Minimized view must also respect ng-hide */
.video-call-modal.gm-style.video-call-modal-minimize.ng-hide {
    display: none !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-wrapper {
    padding: 0 !important;
    height: auto !important;
    max-height: 120px !important;
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .gallery-view {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    padding: 4px !important;
    box-sizing: border-box !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-user-container,
.video-call-modal.gm-style.video-call-modal-minimize .video-call-self-container,
.video-call-modal.gm-style.video-call-modal-minimize #selfVideoContainer {
    min-height: auto !important;
    max-height: 100px !important;
    aspect-ratio: 16/9 !important;
    width: auto !important;
    max-width: 130px !important;
    flex: 1 !important;
    border-radius: 8px !important;
    border: none !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .gallery-view video {
    max-height: 100px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

/* Hide controls in minimized view */
.video-call-modal.gm-style.video-call-modal-minimize .gm-control-bar,
.video-call-modal.gm-style.video-call-modal-minimize .gm-call-actions,
.video-call-modal.gm-style.video-call-modal-minimize .gm-incoming-call,
.video-call-modal.gm-style.video-call-modal-minimize .gm-calling-overlay,
.video-call-modal.gm-style.video-call-modal-minimize .gm-recording-indicator {
    display: none !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-settings-is-open,
.video-call-modal.gm-style.video-call-modal-minimize .gm-more-menu {
    position: absolute !important;
    bottom: 52px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 140px !important;
    max-width: calc(100% - 16px) !important;
    padding: 4px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    font-size: 11px !important;
    z-index: 1001 !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .gm-menu-item {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 11px !important;
}

/* Hide SELF video in minimized view - only show remote participant */
.video-call-modal.gm-style.video-call-modal-minimize .video-call-self-container,
.video-call-modal.gm-style.video-call-modal-minimize #selfVideoContainer,
.video-call-modal.gm-style.video-call-modal-minimize #videoCallProfile,
.video-call-modal.gm-style.video-call-modal-minimize #operVideoCallProfile {
    display: none !important;
}

/* Tablet Specific Overrides */
@media only screen and (max-width: 1024px) {
    .video-call-modal.gm-style .gallery-view {
        max-width: 100% !important;
        gap: 12px !important;
    }

    .video-call-modal.gm-style .video-call-user-container,
    .video-call-modal.gm-style .video-call-self-container,
    .video-call-modal.gm-style #selfVideoContainer {
        max-width: 100% !important;
    }
}

/* Mobile Specific Overrides */
@media only screen and (max-width: 768px) {
    .video-call-modal.gm-style .video-call-wrapper {
        padding: 20px 12px 100px !important;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
        justify-content: center !important;
    }

    .video-call-modal.gm-style .gallery-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    .video-call-modal.gm-style .video-call-user-container,
    .video-call-modal.gm-style .video-call-self-container,
    .video-call-modal.gm-style #selfVideoContainer {
        min-height: 120px !important;
        max-height: 35vh !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        cursor: pointer !important;
        /* ✅ Mobile touch handling for click-to-enlarge */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* ✅ Ensure video element doesn't block parent click */
    .video-call-modal.gm-style .video-call-user-container video,
    .video-call-modal.gm-style .video-call-self-container video {
        pointer-events: none !important;
    }

    /* ✅ Video should show fully without cropping on mobile */
    .video-call-modal.gm-style .gallery-view video,
    .video-call-modal.gm-style .video-call-user-container video,
    .video-call-modal.gm-style .video-call-self-container video,
    .video-call-modal.gm-style #selfVideoContainer video {
        object-fit: contain !important;
        background: transparent !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* ✅ Video containers should have position relative for proper stacking */
    .video-call-modal.gm-style .video-call-user-container,
    .video-call-modal.gm-style .video-call-self-container,
    .video-call-modal.gm-style #selfVideoContainer {
        position: relative !important;
    }

    .video-call-modal.gm-style .gallery-view-top {
        top: 10px !important;
        right: 10px !important;
    }

    .video-call-modal.gm-style .gallery-view-top > div {
        width: 100px !important;
        height: 60px !important;
    }

    .video-call-modal.gm-style .video-call-profile span {
        font-size: 32px !important;
    }

    .video-call-modal.gm-style .video-call-name-area {
        bottom: 8px !important;
        left: 8px !important;
        padding: 4px 8px !important;
    }

    .video-call-modal.gm-style .video-call-name span {
        font-size: 11px !important;
    }

    .video-call-modal.gm-style .video-call-appointment-duration {
        top: 10px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .video-call-modal.gm-style .video-call-record {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    /* Control bar - fixed at bottom on mobile with safe area support */
    .video-call-modal.gm-style .gm-control-bar {
        position: fixed !important;
        bottom: 15px !important;
        bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1000 !important;
    }

    /* ✅ Focus mode (screen-view) on mobile - full screen video */
    .video-call-modal.gm-style .screen-view {
        position: absolute !important;
        top: 120px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 100px !important;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        height: auto !important;
        padding: 10px !important;
        z-index: 50 !important;
        background: transparent !important;
    }

    /* ✅ Screen-view ng-hide override for mobile */
    .video-call-modal.gm-style .screen-view.ng-hide {
        display: none !important;
    }

    .video-call-modal.gm-style .screen-view > div,
    .video-call-modal.gm-style .screen-view .video-call-user-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        aspect-ratio: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .video-call-modal.gm-style .screen-view video {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
        pointer-events: none !important;
    }

    /* ✅ Visual hint that video is clickable - tap to exit focus mode */
    .video-call-modal.gm-style .screen-view .video-call-user-container::after {
        content: "Küçültmek için dokun" !important;
        position: absolute !important;
        bottom: 70px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        opacity: 0.8 !important;
        pointer-events: none !important;
    }

    /* Gallery thumbnails when in focus mode - top right on mobile */
    .video-call-modal.gm-style .gallery-view-top {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 100 !important;
    }

    .video-call-modal.gm-style .gallery-view-top > div {
        width: 80px !important;
        height: 60px !important;
        cursor: pointer !important;
    }

    /*
     * Odak modu + ekran paylaşımı yok (müşteri/operatör mobil): genel .gallery-view kuralları
     * küçük önizlemelere de %100 genişlik veriyordu; ana video ile üst üste biniyordu.
     * Önizlemeleri sağ üstte kompakt tut, ana alanı flex ile doldur.
     */
    .video-call-modal.gm-style:not(.customer-screen-share-active) .video-call-wrapper {
        position: relative !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top {
        position: absolute !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: min(calc(100% - 16px), 100vw - 16px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        align-content: flex-end !important;
        gap: 6px !important;
        row-gap: 6px !important;
        z-index: 70 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > .video-call-user-container,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > .video-call-self-container,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > #selfVideoContainer,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > #videoCallProfile,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > #operVideoCallProfile,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top > #videoCallConnectionMsgWrap {
        width: 92px !important;
        max-width: min(42vw, 140px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 52px !important;
        height: auto !important;
        flex: 0 0 auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;
    }

    .video-call-modal.gm-style:not(.customer-screen-share-active) .gallery-view.gallery-view-top video {
        max-height: 100% !important;
    }

    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 8px !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile > div,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile .video-call-user-container,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile .video-call-self-container,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile #selfVideoContainer,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile #videoCallProfile,
    .video-call-modal.gm-style:not(.customer-screen-share-active) .screen-view.screen-view-is-mobile #operVideoCallProfile {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: min(72vh, 100%) !important;
        flex: 1 1 auto !important;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media only screen and (max-width: 768px) {
    .gm-control-bar {
        padding: 8px 12px;
        gap: 8px;
        bottom: 10px;
    }

    .gm-control-btn {
        width: var(--gm-btn-size-sm);
        height: var(--gm-btn-size-sm);
    }

    .gm-control-btn img {
        width: 20px;
        height: 20px;
    }

    .gm-end-call-btn {
        width: 48px;
    }

    .gm-primary-controls {
        padding-right: 8px;
    }

    .gm-recording-indicator {
        top: 10px;
        left: 10px;
        padding: 6px 12px;
    }

    .gm-recording-text {
        font-size: 11px;
    }

    .gm-focus-mode .gm-self-video {
        width: 120px;
        height: 90px;
        bottom: 80px;
        right: 10px;
    }

    .gm-gallery-top .gm-video-tile {
        width: 100px;
        height: 75px;
    }

    .gm-gallery-mode .gm-gallery-view {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        padding: 50px 10px 80px;
    }

    .gm-more-menu {
        min-width: 180px;
    }

    .gm-menu-item {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media only screen and (max-width: 480px) {
    .video-call-modal.gm-style .gm-control-bar {
        width: calc(100% - 20px);
        justify-content: center;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .video-call-modal.gm-style .gm-control-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .video-call-modal.gm-style .video-call-wrapper {
        padding: 10px 8px 90px !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .video-call-modal.gm-style .gallery-view {
        gap: 8px !important;
        padding: 5px !important;
    }

    .video-call-modal.gm-style .video-call-user-container,
    .video-call-modal.gm-style .video-call-self-container,
    .video-call-modal.gm-style #selfVideoContainer {
        min-height: 100px !important;
        max-height: 25vh !important;
    }

    .gm-profile-avatar {
        width: 60px;
        height: 60px;
    }

    .gm-profile-avatar span {
        font-size: 24px;
    }
}

/* ============================================
   END OF GOOGLE MEET 2024 DESIGN SYSTEM
   ============================================ */

.modal-open .modal .model-close-button {
    color: white;
    position: absolute;
    margin-right: 10px;
    right: 0px;
    font-size: 10px !important;
    padding: 10px;
    z-index: 999999;
    cursor: pointer;
    top: 8px;
    background-color: red;
    border-radius: 10px;
}

.model-close-duplicate{
    color: white;
    position: absolute;
    margin-right: 10px;
    right: 0px;
    font-size: 10px !important;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    top: 8px;
    background-color: red;
    border-radius: 10px;
}

#close-button-detailed{
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#close-button-detailed:hover{
    background: #111 !important;
}
#detailCall {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    background-color: #0000003d;
    border-radius: 50%;
}
#detailCall:hover{
    background-color: #111;
}

#simpleCall {
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#simpleCall:hover{
    background: #111 !important;
}

#video-call .main-container {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 !important;
}

#video-call .main-container .remote-main-container {
    height: 100%;
    width: 100%;
    padding: 0;
}

#video-call .main-container .remote-main-container .videoContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#videoContainer{
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    height: 100vh;
    flex: 8;
}

.remotePerContainers {
    display: inline-flex;
}

#remotePerContainer0 {
    display: flex;
    justify-content: center;
    visibility: visible;
}

#video-call .main-container .remote-main-container i {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#answerCall {
    border-radius: 4px;
    color: #FFF;
    width: 50px;
    height: 50px;
    background: #5f9e73;
    font-size: 20px;
    z-index: 2;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    margin: 0 6px;
}

#answerCall:hover{
    background: #3ecc6a;
}


#answerCob {
    background-color: #20bd1e;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    /* bottom: 10%; */
    /* left: 60%; */
    margin-right: 10px;

    /* transform: translate(-50%, -50%); */
    opacity: 0.7;
    z-index: 999;
}

#answerMobile {
    background-color: #20bd1e;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    opacity: 0.7;
    z-index: 999;
}
.declineCall {
    -webkit-appearance: none;
    background-color: #c33232;
    border-radius: 4px;
    width: 50px;
    min-width: 50px;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px;
    height: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 250ms;
    font-weight: 300;
    font-size: 32px;
    outline: 0;
    border: 0;
    margin: 0 6px;
}

.declineCall:hover {
    background-color: #f30f0f;
}

#declineCob {
    background-color: #bd0808;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    transform: rotate(135deg);
    /* bottom: 10%; */
    /* left: 40%; */
    /* transform: translate(-50%, -50%); */
    opacity: 0.7;
    z-index: 999;

}

#declineMobile {
    background-color: #bd0808;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    transform: rotate(135deg);    opacity: 0.7;
    z-index: 999;
}
#minimizedView{
    height: 202px;
    width: 270px;
    border-radius: 5%;
    border-style : solid solid solid solid;
    border-color:  black;
    border: 1px;
}
#minimizedLocal{
    height: 100px;
    width: 100px;
    left: 160px;
    top: 160px;
    position: absolute;
    z-index: 2;
}
#minimize {
    background-color: #0000003d !important;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}
#minimize:hover {
    background: #111 !important;
}
#minimizeDetailed {
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#minimizeDetailed:hover {
    background: #111 !important;
}
#endcall:hover {
    opacity: 1 !important;
}

#video-call .main-container .video-container-local {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#video-call .main-container .video-container-local .local-video {
    height: 100%;
    width: 100%;
    position: relative;
}

#menu-control_customer {
    /* top: 5px; */
    /* font-size: 17px; */
    cursor: pointer;
    /* padding: 5px 5px; */
}
.callingUser {
    color: white;
    font-size: 0px;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    left: -50%;
    top: 80px;
    z-index: 999;
}
#callingUserName {
    bottom: 30%;
    left: 28%;
}
.blinky {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
#callReceivedLabel {
    bottom: 45%;
    left: 35%;

}
.callingUserL {
    font-size: 0px;
    color: white;
    position: relative;
    left: -19%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 999;
    top: 60px;
}
#video-call-img {
    position: absolute;
    display: block;
    width: 40%;
    opacity: 0.8;
    z-index: 0;
    transform: translate(75%, 7%);
}
.call_labels {
    left: 50%;
    position: absolute;
}
#pencilDropdown {
    padding: 2px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}
#tintDropdown {
    padding: 2px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}

#tintDropdown .dropdown-menu {
    left: -64px !important;
}


#locationDropdown {
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}
#sendSmsDetailedVideoCall{
    position: absolute;
    top: 8px;
    right: 132px;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 10px;
    color:white;
    background-color: #F8781C;
    border-radius: 10px;
}
#sendSmsDetailedVideoCall:hover{
    background-color: #005591;

}
#sendSmsVideoCall{
    position: absolute;
    top: 5px;
    right: 160px;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    background-color: #F8781C;
    border-radius: 10px;
}
#sendSmsVideoCall:hover{
    background-color: #005591;
}
#pointer {
    opacity: 0;
    width: 20px;
    z-index:10;
    height: 20px;
    background: #0009ff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
}


#pointerOperator {
    opacity: 0;
    width: 20px;
    z-index:10;
    height: 20px;
    background: #0009ff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#setPointer {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: white !important;
    background-color: #0000003d !important;
    border-radius: 50%;
}

#setPointerDetailed {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: white !important;
    background-color: #0000003d !important;
    border-radius: 50%;
}
#setPointer:hover{
    background: #111 !important;
}
#setPointerDetailed:hover{
    background: #111 !important;
}

#coBrowsingButtons{
    width:180px;
    /* height:90px; */
    margin:0 auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    /* vertical-align: bottom; */
    /* bottom: 0; */
    /* position: fixed; */
}

#coBrowsingRequest{
    display:none;
    z-index: 10;
    width: 250px;
    border-radius: 10px;
    padding: 10px;
    color: white;
    /* height: 107px; */
    position: absolute;
    text-align: center;
    background-color: #40404080;
}

.coBrowsingView{
    border-radius: 10px;
    padding: 10px;
    color: white;
    /* height: 107px; */
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    /* background-color: #40404080; */
}

.cob-close-duplicate{
    color: white !important;
    position: absolute !important;
    margin-right: 10px !important;
    right: 10px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 10px !important;
    /* padding: 10px; */
    z-index: 10 !important;
    cursor: pointer !important;
    top: 4px !important;
    background-color: red !important;
    border-radius: 50% !important;
}
.minimizeCob {
    position: absolute !important;
    top: 4px !important;
    right: 49px !important;
    /* padding: 24px !important; */
    width: 25px !important;
    height: 25px !important;
    z-index: 10 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    background: lightsteelblue !important;
    background-color: #796e6e !important;
    border-radius: 50% !important;
    color: white !important;
}
.cobButtons{color:white;background: #40404099;width: 100%;height: 32px;left: 0;border-radius: 15px;top: 3px;z-index: 11;position: absolute;}

.play-pause{display:none;}
.play-pause .center{display:none;}

#joinedVideoContainerList {
    flex: 2;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    place-content: flex-end;
    gap: 10px;
    visibility: visible;
}

video {
    object-fit: contain;
}

.call-items {
    position: fixed;
    display: flex;
    z-index: 2;
}

.call-bottom-center-items {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.call-top-right-items {
    gap: 5px;
    top: 10px;
    right: 20px;
}

#hidevideo, #reconnect, #desktopShare, #mute {
    border-radius: 4px;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    color: #868686;
    font-size: 20px;
    z-index: 2;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    margin: 0 6px;
}

#desktopShare:hover, #reconnect:hover, #hidevideo:hover, .sendVideoCallButton:hover, #mute:hover {
    background-color: #43474a;
}

.sendVideoCallButton {
    width: 50px;
    height: 50px;
    background-color: #2d2d2d;;
    border-radius: 5px;
    color: #ffffff;
    font-size: 21px !important;
    text-align: center;
    padding: 13px 0;
}

.answer-call {
    overflow: scroll;
    position: absolute;
    color: #4a4a4a;
    max-width: 431px;
    width: 90%;
    z-index: 99999999;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 4px;
    max-height: 500px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
}

.answer-call-button {
    width: 100%;
    max-width: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5f9e73;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    font-weight: 600;
    padding: 0 20px 0 10px;
    outline: 0;
    border: 0;
    transition:0s none;
    -webkit-transition:0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
    height: 50px;
}

.answer-call-button:hover {
    background: #3ecc6a;
}

.waiting-call-button {
    width: 100%;
    max-width: 570px;
    display: flex;
    align-items: center;
    background: #888;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    justify-content: center;
    font-weight: 600;
    padding: 0 20px 0 10px;
    outline: 0;
    border: 0;
    cursor: wait;
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
    height: 50px;
}

.answer-call-button:focus,
.answer-call-button:active,
.call-items > button:active,
.call-items > button:focus,
.declineCall:focus,
.declineCall:active,
.waiting-call-button:focus,
.waiting-call-button:active {
    outline: 0;
    border: 0;
}

.video-container {
    background: #fff;
    border-radius: 4px;
    padding: 8px;
}

.detailed-upload-container {
    background: #fff;
    border-radius: 4px;
    margin-top: 4px;
}

.detailed-upload-header {
    height: 58px;
    border-bottom: 1px solid #f1f1f1;
    font-weight: 700;
    font-size: 20px;
    color: #1b3452;
    padding-left: 28px;
    display: flex;
    align-items: center;
}

.detailed-upload-content {
    padding: 18px 28px;
}

.videoControlContainer {
    width: 300px;
    margin: 0 auto;
    position: relative;
}

.videoControlContainer > video {
    background: #f1f1f1;
    width: 100%;
    border-radius: 4px;
    animation: play 2s ease infinite;
}

.video-control-icons {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
}

.video-control-item {
    width: 50px;
    height: 35px;
    background: #00000094;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    cursor: pointer;
}

.video-control-item:hover {
    background: #000;
}

@keyframes play {
    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 2px rgba(67, 220, 128, 0.4);
    }
    25% {
        box-shadow: 0 0 0 4px rgba(67, 220, 128, 0.4), 0 0 0 8px rgba(67, 220, 128, 0.2);
    }
    25% {
        box-shadow: 0 0 0 6px rgba(67, 220, 128, 0.4), 0 0 0 12px rgba(67, 220, 128, 0.2);
    }
}

.sendVideoCallForOp {
    margin: 0 6px;
}

.sendVideoCallForOpList {
    background: #2d2d2dba;
    border-radius: 4px;
    position: absolute;
    overflow-y: hidden;
    bottom: 66px;
    display: none;
    padding: 10px 12px;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
}

.sendVideoCallForOpList > ul {
    margin: 0;
    padding: 0;
}

.sendVideoCallForOpList > ul > span {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    color: #868686;
    padding: 0 10px;
    cursor: default;
}
.sendVideoCallForOpList > ul > li {
    color: #f1f1f1;
    text-transform: capitalize;
    list-style-type: none;
    padding: 8px 10px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
}

/*.sendVideoCallForOpList ul li:not(:last-child) {
    border-bottom: 1px solid #d9d9d9;
}*/

.sendVideoCallForOpList > ul > li:hover {
    background: #1b3452;
}

.videoCallRemoteStreamGuestName{
    width: 100%;
    position: absolute;
    left: 0;
    background: #40404073;
    color: white;
    text-align: center;
}

.change-devices {
    position: relative;
}

.change-devices > i {
    position: absolute;
    top: 7px;
    left: 7px;
}

.scrollable-right-panel-forms {
    display: block;
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 34px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) ;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.scrollable-right-panel-forms:hover, .scrollable-right-panel-forms:focus {
    border-color: rgb(156, 158, 160);
}
.scrollable-right-panel-forms:focus {
    box-shadow: rgba(153, 153, 153, 0.2) 0px 0px 0px 3px;
    outline: 0;
}

.pip-video-bar {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    background-color: #0000003d;
    border-radius: 4px;
    z-index: 10;
}

.pip-video-bar:hover {
    background: #000;
}

.video-send-modal-video-disabled {
    color: #4c4c4c;
}

.video-call-waiting {
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    color: #FFF;
    text-shadow: 1px 1px #0f0f0f5c;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
}

#fullConnected {
    visibility: visible;
}

.appointment-time-counter-videocall {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 55;
    margin: auto;
    width: max-content;
    height: max-content;
    color: #FFF;
    background: #bbb;
    border-radius: 4px;
    padding: 10px;
}

@media only screen and (max-width: 1080px) {
    /* Legacy bar labels only; gm-style uses round icon buttons — do not shrink Meet toolbar */
    .video-call-modal:not(.gm-style) .video-call-bottom-item > span,
    .video-call-appointment-duration > span:first-of-type,
    .video-call-record{
        display: none !important;
    }

    .gallery-view-top-mobile {
        position: fixed;
        top: 10px;
        z-index: 1;
        left: 0;
    }

    .gallery-view-top-mobile .video-call-user-container,
    .gallery-view-top-mobile .video-call-self-container,
    .gallery-view-top-mobile .video-call-user-container:hover,
    .gallery-view-top-mobile .video-call-self-container:hover,
    .screen-view .video-call-user-container,
    .screen-view .video-call-self-container,
    .screen-view .video-call-user-container:hover,
    .screen-view .video-call-self-container:hover{
        border: none !important;
    }

    .video-call-modal:not(.gm-style) .video-call-bottom-mobile {
        position: fixed;
        bottom: 10px;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .screen-view video {
        width: 100% !important;
        height: 100% !important;
    }
    .screen-view-is-mobile {
        max-height: unset !important;
    }
    .video-call-modal-mobile {
        padding: 10px !important;
    }
    .screen-view-mobile .video-call-name-area {
        bottom: 60px !important;
    }
    .screen-view > div {
        background: none !important;
    }
    .video-call-wrapper-gallery-maximize-mobile .gallery-view {
        display: grid !important;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        height: 100%;
    }
    .video-call-wrapper-gallery-maximize-mobile .gallery-view video {
        position: absolute;
        height: 100% !important;
    }

    .video-call-settings-is-open {
        bottom: 42px !important;
    }
    .video-call-modal:not(.gm-style) .video-call-bottom-item {
        padding: 0 8px !important;
    }

    .video-call-modal:not(.gm-style) .video-call-bottom,
    .video-call-modal:not(.gm-style) .video-call-answer {
        gap: 10px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    /*.video-call-user-container, .video-call-self-container {*/
    /*    flex: 33%;*/
    /*}*/

    /*.gallery-view-top {*/
    /*    flex-wrap: nowrap !important;*/
    /*    position: fixed !important;*/
    /*    top: 10px;*/
    /*    z-index: 1;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*}*/

    /*.gallery-view {*/
    /*    flex-wrap: wrap;*/
    /*}*/

    /*.gallery-view-top .video-call-user-container, .gallery-view-top .video-call-self-container {*/
    /*    flex: unset;*/
    /*}*/

    /*.screen-view {*/
    /*    position: fixed;*/
    /*    left: 0;*/
    /*    top: 0;*/
    /*    width: 100%;*/
    /*}*/

    /*.screen-view .video-call-name-area {*/
    /*    bottom: 70px;*/
    /*}*/

    /*.video-call-bottom-list {*/
    /*    z-index: 1;*/
    /*    background: #00000085 !important;*/
    /*}*/
    /*.screen-view video {*/
    /*    max-height: 100vh !important;*/
    /*}*/
    /*.video-call-appointment-duration,*/
    /*.video-call-record,*/
    /*.gallery-view-top,*/
    /*.video-call-bottom {*/
    /*    position: absolute;*/
    /*    opacity: 0;*/
    /*}*/
    /*.video-call-modal-mobile-view {*/
    /*    position: unset;*/
    /*    opacity: 1;*/
    /*}*/
    /*.video-call-user-container:hover, .video-call-self-container:hover,*/
    /*.video-call-user-container, .video-call-self-container {*/
    /*    border: none !important;*/
    /*}*/
    /*.gallery-view video {*/
    /*    max-height: calc(100vh - 300px) !important;*/
    /*}*/

    /*.gallery-view-top video {*/
    /*    max-height: 112px !important;*/
    /*}*/
}

/* Gallery tile label hide hack — must NOT apply to appointment/recording strips (those reuse the same ng-class) */
.video-call-modal-mobile-view:not(.video-call-appointment-duration):not(.video-call-record) {
    position: absolute;
    opacity: 0;
    top: -106px;
    left: 0;
}
.video-call-modal-minimize .video-call-modal-mobile-view,
.video-call-wrapper-gallery-view-mobile .video-call-modal-mobile-view{
    position: unset !important;
    opacity: 1 !important;
}

/* Pre-gm modal shell — all in-app modals use .gm-style; keep rule for rare non-gm embeds only */
.video-call-modal:not(.gm-style) {
    display: flex;
    flex-direction: column;
    background: #202125;
    color: #FFF;
    height: 100%;
    width: 100vw;
    justify-content: space-between;
    padding: 20px;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0);
}

/* Ensure modal is hidden when ng-show evaluates to false */
.video-call-modal.ng-hide {
    display: none !important;
}

.video-call-modal:not(.gm-style).video-call-modal-minimize {
    padding: 20px !important;
    display: inline-table !important;
    width: 300px !important;
    height: auto !important;
    border-radius: 4px;
    top: unset;
    left: unset;
    bottom: 20px;
    right: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

/* Legacy flat toolbar — only when .gm-style is absent (all current modals use Meet + #VideoCallBottom overrides) */
.video-call-modal:not(.gm-style).video-call-modal-minimize .video-call-bottom-item {
    padding: 0 8px;
}

.video-call-modal:not(.gm-style).video-call-modal-minimize .video-call-bottom,
.video-call-modal:not(.gm-style).video-call-modal-minimize .video-call-answer {
    gap: 10px;
    height: 40px;
    min-height: 40px;
}

.video-call-modal:not(.gm-style).video-call-modal-minimize .video-call-bottom-item > img {
    width: 24px;
}

.video-call-modal:not(.gm-style) .video-call-bottom,
.video-call-modal:not(.gm-style) .video-call-answer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-height: 50px;
    margin-top: 20px;
    gap: 20px;
    user-select: none;
}

.video-call-modal:not(.gm-style) .video-call-bottom-list {
    background: #3c4042;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 4px;
}

.video-call-modal:not(.gm-style) .video-call-bottom-item {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 4px;
    position: relative;
    background: #3c4042;
    border: none;
}

.video-call-modal:not(.gm-style) .video-call-bottom-item:hover {
    background-color: #43474a;
}

.screen-view {
    height: 100%;
}

.screen-view > div {
    height: 100%;
}

.screen-view video {
    max-height: calc(100vh - 200px);
}

.video-call-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.video-call-wrapper video {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.gallery-view {
    display: flex;
    width: 100%;
    gap: 20px;
}

.gallery-view video {
    max-height: calc(100vh - 116px);
}

.video-call-user-container,
.video-call-self-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3c4042;
    border-radius: 4px;
    transition: 100ms all ease-in-out;
    border: 3px solid transparent;
}

.video-call-user-container:hover,
.video-call-self-container:hover {
    border: 3px solid #dec955;
}

.video-call-name-bar {
    position: relative;
    padding: 0 10px;
    height: 100%;
    display: flex;
    cursor: pointer;
    background: #00000085;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.video-call-name-bar-is-open,
.video-call-settings-is-open {
    display: none;
    position: absolute;
    min-width: 160px;
    overflow: auto;
    bottom: 32px;
    margin: auto;
    background: #00000085;
    border-radius: 4px;
    right: 0;
    padding: 4px;
}

.video-call-settings-is-open {
    bottom: 57px !important;
    left: 0;
}

.video-call-name-bar-is-open img,
.video-call-settings-is-open img {
    width: 24px;
}

.video-call-settings-is-open img {
    filter: brightness(0.5);
}

.video-call-name-bar-is-open > div,
.video-call-settings-is-open > div {
    padding: 6px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
}

.video-call-name-bar-is-open > div:hover {
    background: #00000085;
}

.video-call-settings-is-open > div:hover {
    background: #0000001f;
}

.video-call-settings-open-item {
    padding: 6px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #202125;
}

.video-call-name-area {
    position: absolute;
    bottom: 8px;
    display: flex;
    justify-content: center;
    height: 40px;
    border-radius: 22px;
    font-size: 12px;
    align-items: center;
    transition: all 250ms linear;
}

.video-call-detailed-bar,
.video-call-pointer {
    padding: 4px 10px;
    background: #00000085;
    margin-left: 6px;
    border-radius: 20px;
    cursor: pointer;
}

.video-call-detailed-bar img,
.video-call-pointer img {
    width: 20px;
}

.video-call-modal-minimize .video-call-name-area {
    display: none;
}

.gallery-view-top video {
    max-height: 112px;
}

.gallery-view-top {
    justify-content: center;
    margin-bottom: 20px;
    transition: all 250ms linear;
}

.gallery-view-top > div {
    width: auto;
    background: none !important;
}

.gallery-view-top .video-call-name-area {
    display: none;
}

.video-call-name {
    padding: 4px 10px;
    cursor: default;
    background: #00000085;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.video-call-name > .video-call-name-title {
    font-size: 10px;
    opacity: .7;
}

.video-call-name-bar > img {
    width: 17px;
}

.video-call-modal:not(.gm-style) .video-call-bottom-item > img {
    gap: 10px;
    width: 30px;
}

.video-call-modal:not(.gm-style) .video-call-bottom-item > span {
    margin-left: 10px;
}

.video-call-profile {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-profile-non-stream {
    min-height: 200px;
}

#videoCallConnectionMsgWrap.video-call-connection-msg .video-call-profile {
    align-items: center;
    justify-content: center;
    background: var(--gm-bg-secondary, #292929);
}
#videoCallConnectionMsgWrap .video-call-connection-msg-text {
    margin: 0;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gm-text-primary, #fff);
    text-align: center;
    max-width: 100%;
}

.video-call-modal-minimize .video-call-profile > img,
.video-call-modal-minimize .video-call-profile > span,
.video-call-modal-minimize .video-call-profile > .video-call-connect-spin {
    max-width: 70px !important;
    max-height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
}

.video-call-modal-minimize .video-call-profile-non-stream {
    min-height: 86px !important;
}

.video-call-modal-minimize .video-call-profile > span:first-letter {
    font-size: 30px !important;
}

.video-call-modal-minimize .video-call-profile > span {
    line-height: 70px !important;
}

.video-call-profile > img,
.video-call-profile > span,
.video-call-profile > .video-call-connect-spin {
    border-radius: 4px;
    max-width: 100px;
    width: auto;
    height: auto;
    max-height: 100px;
    min-width: 100px;
    min-height: 100px;
}

.video-call-profile > span {
    font-size: 0;
    display: inline-block;
    line-height: 100px;
    text-align: center;
    user-select: none;
    background: #96c9a5;
    color: #509f67;
    width: 100%;
    height: 100% ;
}

.video-call-profile > span:first-letter {
    font-size: 40px;
    font-weight: 700;
    user-select: none;
}

.video-call-connect-spin {
    background: #fff;
    user-select: none;
}

#detailed-video-container video {
    width: auto;
    height: 100%;
    border-radius: 8px;
}

.video-call-modal-top-name {
    margin-bottom: 20px;
}

.video-call-modal-top-item {
    cursor: pointer;
}

.video-call-modal-top-item img {
    width: 24px;
}

/* Legacy strips — do not compete with .video-call-modal.gm-style rules */
.video-call-modal:not(.gm-style) .video-call-appointment-duration,
.video-call-modal:not(.gm-style) .video-call-record {
    position: absolute;
    padding: 10px;
    top: 80px;
    z-index: 1;
    left: 0;
    background: #00000085;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    user-select: none;
}

.video-call-modal:not(.gm-style) .video-call-record {
    left: unset !important;
    right: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-call-modal:not(.gm-style) .video-call-record .video-call-record-circle {
    min-width: 8px;
    min-height: 8px;
    width: 8px;
    height: 8px;
    background-color: #e14d55;
    border-radius: 50%;
    display: block;
}

.video-call-modal-top-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.video-call-modal-minimize .gallery-view video {
    max-height: 86px !important;
}

.video-call-permission {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #00000069;
    z-index: 2;
    margin: auto;
    left: 0;
    justify-content: center;
    top: 0;
    display: flex;
    align-items: center;
}

.video-call-permission-modal {
    width: 300px;
    background: #fff;
    border-radius: 4px;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    max-height: 400px;
}

.video-call-permission-modal-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.video-call-permission-modal-content {
    flex: 1;
    color: #0f0f0f;
    overflow: auto;
    display: flex;
    align-items: center;
    text-align: center;
}

.video-call-modal video::-webkit-media-controls-play-button,
.video-call-modal video::-webkit-media-controls-pausebutton,
.video-call-modal video::-webkit-media-controls-timeline {
    display: none;
}

/*video::-webkit-media-controls-panel*/

/*video::-webkit-media-controls-play-button*/

/*video::-webkit-media-controls-volume-slider-container*/

/*video::-webkit-media-controls-volume-slider*/

/*video::-webkit-media-controls-mute-button*/

/*video::-webkit-media-controls-timeline*/

/*video::-webkit-media-controls-current-time-display*/

/*video::-webkit-full-page-media::-webkit-media-controls-panel*/

/*video::-webkit-media-controls-timeline-container*/

/*video::-webkit-media-controls-time-remaining-display*/

/*video::-webkit-media-controls-seek-back-button*/

/*video::-webkit-media-controls-seek-forward-button*/

/*video::-webkit-media-controls-fullscreen-button*/

/*video::-webkit-media-controls-rewind-button*/

/*video::-webkit-media-controls-return-to-realtime-button*/

/*video::-webkit-media-controls-toggle-closed-captions-button*/

/* ============================================
   GOOGLE MEET STYLE - STRONG OVERRIDES
   These override all legacy video call styles
   ============================================ */

/* Hide old control bar when using new gm-style */
.video-call-modal.gm-style .video-call-bottom,
.video-call-modal.gm-style .video-call-answer:not(.gm-call-actions) {
    display: none !important;
}

/* Force gm-control-bar to display properly */
.video-call-modal.gm-style #VideoCallBottom {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--gm-mobile-toolbar-offset, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(60, 64, 67, 0.95) !important;
    border-radius: 28px !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    flex-direction: row !important;
    box-sizing: border-box !important;
}

/* Legacy .video-call-bottom-list uses height:100%; avoid stretching when wrapper layout changes */
.video-call-modal.gm-style #VideoCallBottom .video-call-bottom-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.video-call-modal.gm-style.video-call-modal-mobile {
    --gm-mobile-toolbar-offset: 48px;
    height: 100dvh !important;
}

.video-call-modal.gm-style.video-call-modal-mobile .video-call-wrapper {
    height: 100dvh !important;
    max-height: 100dvh !important;
}

/* Control groups */
.video-call-modal.gm-style .gm-control-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

.video-call-modal.gm-style .gm-primary-controls {
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-right: 12px !important;
    margin-right: 4px !important;
}

/* Control buttons - Round Google Meet style */
.video-call-modal.gm-style .gm-control-btn,
.video-call-modal.gm-style button.gm-control-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background-color 150ms ease !important;
    position: relative !important;
    box-shadow: none !important;
}

.video-call-modal.gm-style .gm-control-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.video-call-modal.gm-style .gm-control-btn:active {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(0.95) !important;
}

/* ng-hide ezilmesin - display:flex !important ng-hide'ı eziyordu, bu kural sonra geldiği için geçerli olur */
.video-call-modal.gm-style .gm-control-btn.ng-hide,
.video-call-modal.gm-style #removeBgButton.ng-hide {
    display: none !important;
}

/* Button icons */
.video-call-modal.gm-style .gm-control-btn img {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.video-call-modal.gm-style .gm-control-btn i {
    font-size: 20px !important;
    color: #ffffff !important;
}

/* Off state (muted/camera off) - RED background */
.video-call-modal.gm-style .gm-control-btn.gm-control-off,
.video-call-modal.gm-style button.gm-control-btn.gm-control-off {
    background: #ea4335 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-control-off:hover {
    background: #d93025 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-screen-share-active,
.video-call-modal.gm-style button.gm-control-btn.gm-screen-share-active {
    background: #1a73e8 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-screen-share-active:hover,
.video-call-modal.gm-style button.gm-control-btn.gm-screen-share-active:hover {
    background: #1765cc !important;
}

/* End call button - Wider pill shape, RED */
.video-call-modal.gm-style .gm-control-btn.gm-end-call-btn,
.video-call-modal.gm-style button.gm-control-btn.gm-end-call-btn {
    width: 56px !important;
    max-width: 56px !important;
    border-radius: 28px !important;
    background: #ea4335 !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-end-call-btn:hover {
    background: #d93025 !important;
}

/* More menu button */
.video-call-modal.gm-style .gm-control-btn.gm-more-btn {
    background: transparent !important;
}

.video-call-modal.gm-style .gm-control-btn.gm-more-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menu */
.video-call-modal.gm-style .gm-more-menu {
    display: none !important;
    position: absolute !important;
    bottom: 64px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 240px !important;
    background: #292929 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 8px 0 !important;
    z-index: 1001 !important;
}

.video-call-modal.gm-style .gm-more-menu.active {
    display: block !important;
}

.video-call-modal.gm-style .gm-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: background-color 150ms ease !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
}

.video-call-modal.gm-style .gm-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.video-call-modal.gm-style .gm-menu-item img {
    width: 22px !important;
    height: 22px !important;
    filter: brightness(0) invert(0.8) !important;
    opacity: 1 !important;
}

.video-call-modal.gm-style .gm-menu-item:hover img {
    filter: brightness(0) invert(1) !important;
}

.video-call-modal.gm-style .gm-menu-divider {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 8px 16px !important;
}

/* Answer/Decline buttons */
.video-call-modal.gm-style .gm-call-actions {
    position: absolute !important;
    bottom: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 24px !important;
    z-index: 1000 !important;
}

.video-call-modal.gm-style .gm-answer-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 32px !important;
    background: #34a853 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 28px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    box-shadow: 0 4px 16px rgba(52, 168, 83, 0.3) !important;
}

.video-call-modal.gm-style .gm-answer-btn:hover {
    background: #2d9249 !important;
    transform: scale(1.02) !important;
}

.video-call-modal.gm-style .gm-answer-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.video-call-modal.gm-style .gm-answer-btn svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
}

.video-call-modal.gm-style .gm-decline-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 32px !important;
    background: #ea4335 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 28px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    box-shadow: 0 4px 16px rgba(234, 67, 53, 0.3) !important;
}

.video-call-modal.gm-style .gm-decline-btn:hover {
    background: #d93025 !important;
    transform: scale(1.02) !important;
}

.video-call-modal.gm-style .gm-decline-btn svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
}

/* Operator transfer button styling */
.video-call-modal.gm-style .sendVideoCallForOp {
    margin: 0 !important;
}

.video-call-modal.gm-style .sendVideoCallForOp .gm-control-btn {
    background: rgba(255, 255, 255, 0.1) !important;
}

.video-call-modal.gm-style .sendVideoCallForOp .gm-control-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.video-call-modal.gm-style .sendVideoCallForOpList {
    background: #292929 !important;
    border-radius: 12px !important;
    bottom: 60px !important;
    padding: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.video-call-modal.gm-style .sendVideoCallForOpList > ul > li {
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

.video-call-modal.gm-style .sendVideoCallForOpList > ul > li:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Recording indicator */
.video-call-modal.gm-style .gm-recording-indicator {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Modal background - position is set above, only override background color here */
.video-call-modal.gm-style {
    background: #1a1a1a !important;
}

/* Video wrapper - centered layout */
.video-call-modal.gm-style .video-call-wrapper {
    background: #1a1a1a !important;
    /* padding is set above, don't override here */
}

/* Gallery view - flexbox centered */
.video-call-modal.gm-style .gallery-view {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    flex: 1 !important;
}

/* Video containers - responsive size */
.video-call-modal.gm-style .video-call-self-container,
.video-call-modal.gm-style .video-call-user-container,
.video-call-modal.gm-style #selfVideoContainer,
.video-call-modal.gm-style #videoCallProfile {
    background: #292929 !important;
    border-radius: 16px !important;
    border: 3px solid transparent !important;
    overflow: hidden !important;
    aspect-ratio: 16/9 !important;
    transition: border-color 150ms ease !important;
    flex: 1 1 calc(50% - 16px) !important;
    min-width: 280px !important;
    max-width: 100% !important;
    max-height: 80vh;
    box-sizing: border-box !important;
}

.video-call-modal.gm-style .video-call-self-container:hover,
.video-call-modal.gm-style .video-call-user-container:hover,
.video-call-modal.gm-style #selfVideoContainer:hover {
    border-color: #8ab4f8 !important;
}

/* Videos - tüm video divlerinde contain */
.video-call-modal.gm-style .gallery-view video,
.video-call-modal.gm-style .video-call-wrapper video,
.video-call-modal.gm-style .video-call-user-container video,
.video-call-modal.gm-style .video-call-self-container video,
.video-call-modal.gm-style #selfVideoContainer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #292929 !important;
}

/* Müşteri/uzak taraf görüntüsü - contain (yukarıdaki cover ezmesin) */
.video-call-modal.gm-style .video-call-user-container video {
    object-fit: contain !important;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
    .video-call-modal.gm-style #VideoCallBottom {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--gm-mobile-toolbar-offset, 0px)) !important;
        padding: 6px 12px !important;
        gap: 6px !important;
    }

    .video-call-modal.gm-style .gm-control-btn,
    .video-call-modal.gm-style button.gm-control-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }

    .video-call-modal.gm-style .gm-control-btn img {
        width: 20px !important;
        height: 20px !important;
    }

    .video-call-modal.gm-style .gm-control-btn.gm-end-call-btn {
        width: 48px !important;
        max-width: 48px !important;
    }

    .video-call-modal.gm-style .video-call-wrapper {
        padding: 60px 12px 100px !important;
    }

    .video-call-modal.gm-style .gallery-view {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .video-call-modal.gm-style .gm-call-actions {
        gap: 16px !important;
    }

    .video-call-modal.gm-style .gm-answer-btn,
    .video-call-modal.gm-style .gm-decline-btn {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
}

@media only screen and (min-width: 769px) {
    .video-call-modal.gm-style.screen-share-active .gallery-view:not(.gallery-view-top) {
        align-content: flex-start !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .video-call-modal.gm-style.screen-share-active .gallery-view:not(.gallery-view-top) #localScreenShareContainer,
    .video-call-modal.gm-style.screen-share-active .gallery-view:not(.gallery-view-top) .video-call-screen-container {
        order: 2 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: min(100%, 1200px) !important;
        min-height: 260px !important;
        max-height: min(50vh, 540px) !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
    }

    .video-call-modal.gm-style.screen-share-active .gallery-view:not(.gallery-view-top) > div:not(#localScreenShareContainer):not(.video-call-screen-container) {
        order: 1 !important;
        flex: 0 1 220px !important;
        width: 220px !important;
        min-width: 310px !important;
        max-width: calc(50% - 8px) !important;
        min-height: 96px !important;
        max-height: 150px !important;
        aspect-ratio: 16 / 9 !important;
    }

    .video-call-modal.gm-style.screen-share-active .gallery-view:not(.gallery-view-top) > div:not(#localScreenShareContainer):not(.video-call-screen-container) video {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}

/* ============================================
   CALLING OVERLAY - When waiting for answer
   Self video visible, top bar + bottom cancel
   ============================================ */

.video-call-modal.gm-style .gm-calling-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 500;
    pointer-events: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.video-call-modal.gm-style .gm-calling-overlay.ng-hide {
    display: none !important;
}

/* Top status bar */
.video-call-modal.gm-style .gm-calling-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: auto;
}

/* Pulsing dot indicator */
.video-call-modal.gm-style .gm-calling-pulse {
    width: 12px;
    height: 12px;
    background: #34a853;
    border-radius: 50%;
    animation: gm-pulse-call 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(52, 168, 83, 0.6);
}

@keyframes gm-pulse-call {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Calling text */
.video-call-modal.gm-style .gm-calling-text {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Animated dots */
.video-call-modal.gm-style .gm-calling-dots {
    display: inline-block;
    width: 24px;
    text-align: left;
}

.video-call-modal.gm-style .gm-calling-dots::after {
    content: '';
    animation: gm-dots 1.5s steps(4, end) infinite;
}

@keyframes gm-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

.video-call-modal.gm-style .gm-calling-connection-msg {
    margin: 0;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    pointer-events: auto;
}

/* Bottom section with cancel button */
.video-call-modal.gm-style .gm-calling-bottom {
    display: flex;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: auto;
}

/* Cancel call button */
.video-call-modal.gm-style .gm-cancel-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ea4335;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Google Sans', 'Roboto', sans-serif;
    box-shadow: 0 4px 16px rgba(234, 67, 53, 0.4);
}

.video-call-modal.gm-style .gm-cancel-call-btn:hover {
    background: #d93025;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(234, 67, 53, 0.5);
}

.video-call-modal.gm-style .gm-cancel-call-btn:active {
    transform: scale(0.97);
}

.video-call-modal.gm-style .gm-cancel-call-btn svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

/* Mobile responsive for calling/incoming screens */
@media (max-width: 480px) {
    /* Calling overlay - mobile */
    .video-call-modal.gm-style .gm-calling-topbar {
        padding: 12px 16px;
    }

    .video-call-modal.gm-style .gm-calling-text {
        font-size: 16px;
    }

    .video-call-modal.gm-style .gm-calling-pulse {
        width: 10px;
        height: 10px;
    }

    .video-call-modal.gm-style .gm-calling-bottom {
        padding: 16px;
    }

    .video-call-modal.gm-style .gm-cancel-call-btn {
        padding: 12px 28px;
        font-size: 14px;
    }

    /* Incoming call - mobile */
    .video-call-modal.gm-style .gm-incoming-avatar {
        width: 120px;
        height: 120px;
    }

    .video-call-modal.gm-style .gm-incoming-avatar .gm-avatar-circle {
        width: 72px;
        height: 72px;
    }

    .video-call-modal.gm-style .gm-incoming-avatar .gm-avatar-circle span {
        font-size: 28px;
    }

    .video-call-modal.gm-style .gm-incoming-name {
        font-size: 22px;
    }

    .video-call-modal.gm-style .gm-incoming-actions {
        gap: 16px;
    }

    .video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn,
    .video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn {
        min-width: 120px;
        padding: 14px 20px;
        gap: 6px;
    }

    .video-call-modal.gm-style .gm-incoming-actions .gm-decline-btn svg,
    .video-call-modal.gm-style .gm-incoming-actions .gm-answer-btn svg {
        width: 32px !important;
        height: 32px !important;
    }

    .video-call-modal.gm-style .gm-incoming-actions .gm-btn-label {
        font-size: 13px;
    }

    .video-call-modal.gm-style .gm-incoming-ring {
        width: 94px;
        height: 94px;
    }

    .video-call-modal.gm-style .gm-incoming-ring.gm-ring-2 {
        width: 112px;
        height: 112px;
    }
}

/* SVG icons in buttons should be white */
.video-call-modal.gm-style .gm-control-btn svg {
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
}

.video-call-modal.gm-style .gm-control-btn svg path {
    fill: #ffffff !important;
}

/* ============================================
   MINIMIZED VIEW OVERRIDES
   ============================================ */

/* Minimized view - smaller control bar */
.video-call-modal.gm-style.video-call-modal-minimize #VideoCallBottom {
    bottom: 8px !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    border-radius: 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Minimized view - smaller buttons (28px) */
.video-call-modal.gm-style.video-call-modal-minimize .gm-control-btn,
.video-call-modal.gm-style.video-call-modal-minimize button.gm-control-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
}

/* Minimized view - smaller icons */
.video-call-modal.gm-style.video-call-modal-minimize .gm-control-btn img {
    width: 14px !important;
    height: 14px !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .gm-control-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Minimized view - end call button slightly wider */
.video-call-modal.gm-style.video-call-modal-minimize .gm-control-btn.gm-end-call-btn {
    width: 32px !important;
    max-width: 32px !important;
    border-radius: 14px !important;
}

/* Minimized view - hide separator border */
.video-call-modal.gm-style.video-call-modal-minimize .gm-primary-controls {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* Minimized view - control groups */
.video-call-modal.gm-style.video-call-modal-minimize .gm-control-group {
    gap: 4px !important;
}

/* Minimized view - video takes full space */
.video-call-modal.gm-style.video-call-modal-minimize .video-call-wrapper {
    padding: 0 !important;
    max-height: 120px !important;
    overflow: hidden !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .gallery-view {
    gap: 4px !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: row !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-user-container,
.video-call-modal.gm-style.video-call-modal-minimize .video-call-self-container,
.video-call-modal.gm-style.video-call-modal-minimize #selfVideoContainer {
    border-radius: 8px !important;
    max-width: 130px !important;
    max-height: 100px !important;
    flex: 1 !important;
    border: none !important;
}

/* Minimized view - header with actions */
.video-call-modal.gm-style.video-call-modal-minimize .video-call-modal-top-name {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.video-call-modal.gm-style .gm-minimize-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-modal-top-item {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 150ms ease !important;
    padding: 0 !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-modal-top-item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.video-call-modal.gm-style.video-call-modal-minimize .video-call-modal-top-item img {
    width: 14px !important;
    height: 14px !important;
    filter: brightness(0) invert(1) !important;
}

/* Close button - red on hover */
.video-call-modal.gm-style.video-call-modal-minimize .gm-close-btn:hover {
    background: #ea4335 !important;
}

/* ============================================
   END OF GOOGLE MEET STYLE STRONG OVERRIDES
   ============================================ */

/* ============================================
   EXTRA SMALL PHONE OVERRIDES (<= 360px)
   - Keep bottom control bar on a single row
   - Shrink buttons/icons instead of wrapping
   ============================================ */
@media only screen and (max-width: 360px) {
    .video-call-modal.gm-style #VideoCallBottom {
        width: calc(100% - 16px) !important;
        padding: 6px 6px !important;
        gap: 4px !important;
    }

    .video-call-modal.gm-style #VideoCallBottom .gm-control-btn,
    .video-call-modal.gm-style #VideoCallBottom button.gm-control-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .video-call-modal.gm-style #VideoCallBottom .gm-control-btn img,
    .video-call-modal.gm-style #VideoCallBottom .gm-control-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .video-call-modal.gm-style #VideoCallBottom .gm-control-btn.gm-end-call-btn {
        width: 40px !important;
        max-width: 40px !important;
        border-radius: 20px !important;
    }
}

/* ============================================
   MOBILE SCREEN SHARE LAYOUT FIX
   - Keep focused screen + 2 thumbnails in flow
   - Prevent overlap caused by focus/grid toggles
   ============================================ */
@media only screen and (max-width: 768px) {
    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper {
        gap: 12px !important;
        min-height: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        order: 1 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 4px !important;
        z-index: 1 !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile > div,
    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile .video-call-user-container,
    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile .video-call-self-container,
    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile #selfVideoContainer,
    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile #videoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile #operVideoCallProfile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 180px !important;
        max-height: min(52vh, 340px) !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .screen-view.screen-view-is-mobile video {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        opacity: 1 !important;
        order: 2 !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(0, auto) !important;
        gap: 8px !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        overflow-x: hidden !important;
    }

    /* Thumbnail tiles: override global min-width (280–310px) + flex-basis so two columns always fit any phone width */
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top > div,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile > div,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view > div,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top .video-call-user-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top .video-call-self-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top #selfVideoContainer,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top #videoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top #operVideoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile .video-call-user-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile .video-call-self-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile #selfVideoContainer,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile #videoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile #operVideoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view .video-call-user-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view .video-call-self-container,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view #selfVideoContainer,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view #videoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view #operVideoCallProfile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        min-height: 84px !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        box-sizing: border-box !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top > div:only-child,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile > div:only-child,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view > div:only-child {
        grid-column: 1 / -1 !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top video,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top-mobile video,
    .video-call-modal.gm-style.customer-screen-share-active .gallery-view.gallery-view-top.video-call-modal-mobile-view video {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        gap: 10px !important;
        padding: 8px 4px !important;
        overflow: hidden !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view .video-call-user-container,
    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view .video-call-self-container,
    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view #selfVideoContainer,
    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view #videoCallProfile,
    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view #operVideoCallProfile {
        width: calc(50% - 10px) !important;
        min-width: 137px !important;
        max-width: 52% !important;
        min-height: 110px !important;
        max-height: min(24vh, 190px) !important;
        flex: 1 1 137px !important;
    }

    .video-call-modal.gm-style.customer-screen-share-active .video-call-wrapper.video-call-wrapper-gallery-maximize-mobile .gallery-view video {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}