:root {
    --primary-color: #2088BC; /* Primary brand color */
    --secondary-color: #35910f; /* Darker variant of primary */
    --tertiary-color: #D31871;
    --footer-background: #333333;
    --toolbar-height: 60px; /* Parameterize the height of the toolbar */
    --toolbar-width: 60px; /* Parameterize the width of the toolbar in vertical position */
    --background-color: #f0f0f0; /* Softer light gray background color */
    --button-red-color: #da291c; /* Red color for end call button */
    --end-call-color: #cc0000; /* Red for end call button */
    --end-call-hover-color: #990000; /* Darker red for end call hover */
    --video-off-color: #cccccc; /* Light grey color for video off icon */
    --logout-color: #e69a0e; /* Red color for logout button */
    --highlight-color: #08D14B; /* Green for UI highlights */
    --toolbar-bg-color: rgba(0, 0, 0, 0.8); /* Background color for toolbar */
    --landscape-content-height: 100vh; /* Full viewport height for toolbar in landscape mode */
}

html, body {
    height: 100%;
    margin: 0; /* Remove default margin */
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color); /* Use the new background color */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
}

.wrapper {
    flex: 1; /* Allow the wrapper to grow and take available space */
    display: flex;
    flex-direction: column;
}

.banner {
    position: relative;
}

.banner-container {
    position: relative;
    background-color: white;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    display: none; /* Hide the banner image to show white background */
}

.logo-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.logo {
    height: 80%;
    max-height: 120px;
    width: auto;
    object-fit: contain;
    max-height: 60px;
    transition: max-height 0.3s ease;
}

.logo-mobile {
    display: none;
    max-height: 45px;
}

.divider {
    display: flex;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.divider.full-width {
    width: 100%;
    margin: 0;
    padding: 0;
}

.divider div {
    flex: 1;
}

.segment1 {
    background-color: var(--tertiary-color);
}

.segment2 {
    background-color: var(--primary-color);
}

.segment3 {
    background-color: var(--secondary-color);
}

header {
    color: white;
    padding: 0em;
    text-align: center;
}

main {
    flex: 1; /* Allow the main content to grow and take available space */
    align-self: start;
    display: flex;
    justify-content: center; /* Center content horizontally */
    width: 100%; /* Ensure the main div takes the full width of the page */
}

#content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    margin: 0 auto;
    /* margin-top: 25px; */ /* Adjust the value as needed */
}

#clientDropdown {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 400px;
    text-align: center;
}

#searchInput {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 100%; /* Ensure the input takes the full width of the container */
    box-sizing: border-box;
    margin-bottom: 10px; /* Add some space between the input and the options */
}

.options-container {
    display: none;
    position: absolute;
    top: 100%; /* Position it directly below the input box */
    left: 0;    /* Align with the left edge of the search-container */
    width: 100%; /* Match the width of the search-container */
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: white;
    z-index: 1000; /* Ensure it floats above other elements */
}

.option {
    padding: 10px;
    cursor: pointer;
}

.option:hover {
    background-color: #f0f0f0;
}

section {
    margin-bottom: 2em;
}

h1, h2 {
    margin: 0 0 0.5em;
}

#features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.feature {
    flex: 1 1 30%;
    margin: 10px;
    text-align: center;
}

.feature img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Modern responsive footer design */
footer {
    background-color: var(--footer-background);
    color: white;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px; /* Add top margin to separate from page content */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Prominent Need Help section */
.footer-help-section {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-help-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
}

.footer-help-button:hover {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(32, 136, 188, 0.3);
}

/* Footer content sections */
.footer-content {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 30px;
    align-items: start;
}

.footer-copyright {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    max-width: 300px;
}

.footer-links-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    padding: 2px 0;
}

.footer-link:hover {
    color: var(--primary-color);
}

/* Tablet layout - replaces @media (max-width: 992px) */
.tablet .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.tablet .footer-help-section {
    border-bottom: none; /* Remove border to prevent double line with copyright border-top */
}

.tablet .footer-copyright {
    grid-column: 1 / -1;
    text-align: center;
    max-width: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile layout - replaces @media (max-width: 768px) */
.phone .footer-container {
    padding: 25px 15px 20px 15px;
    gap: 20px;
}

.phone .footer-help-section {
    padding: 15px 0;
    border-bottom: none; /* Remove border to prevent double line effect */
}

.phone .footer-help-button {
    padding: 14px 35px;
    font-size: 17px;
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 0 auto;
}

.phone .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
}

.phone .footer-links-group {
    align-items: center;
}

.phone .footer-copyright {
    order: 3;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile landscape - more compact - replaces @media (max-width: 768px) and (orientation: landscape) and (max-height: 600px) */
.phone.landscape .footer-container {
    padding: 15px;
    gap: 15px;
}

.phone.landscape .footer-help-section {
    padding: 10px 0;
}

.phone.landscape .footer-help-button {
    padding: 10px 25px;
    font-size: 15px;
}

.phone.landscape .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.phone.landscape .footer-copyright {
    grid-column: 1 / -1;
    font-size: 12px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    background-color: transparent;
    table-layout: fixed; /* Ensure fixed table layout */
}

th, td {
    padding: 8px;
    text-align: left;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    width: auto;
}

th {
    background-color: #A9A9A9;
}

td:first-child {
    background-color: #F0F0F0;
}

#status-table th:nth-child(1),
#status-table td:nth-child(1) {
    width: 35%;
    width: 35%;
}

#status-table th:nth-child(2),
#status-table td:nth-child(2) {
    width: 55%;
}

#status-table th:nth-child(3),
#status-table td:nth-child(3) {
    width: 10%;
}

/* Global reusable header style */
.header-text {
    color: #53555b;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    padding-top: 1em;
    margin: 0;
    max-width: 80%;
}

/* Override for header-text within the header-container */
.header-container .header-text {
    padding-top: 0;
}

/* Header container styles */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    max-width: 1200px;
    margin: 10px auto;
    padding: 0.5em 0;
    position: relative;
}

/* Logo container styles */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-standard {
    height: 45px;
    width: auto;
}

/* User info and logout button styles */
.user-info {
    display: flex;
    align-items: center;
}

.username {
    margin-right: 10px;
    font-size: 16px;
    color: #53555b;
    font-weight: 500;
}

.btn-logout {
    background-color: var(--logout-color);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-logout:hover {
    background-color: darkorange;
}

/* Media query for mobile devices */
/* Phone devices - replaces @media (max-width: 768px) */
.phone .header-container {
    width: 95%;
    padding: 0.5em 0;
}

.phone .logo {
    display: none;
}

.phone .logo-mobile {
    display: block;
    max-height: 45px;
}

.phone .banner-container {
    height: 60px; /* Reduced from 80px */
    background-color: white;
    padding: 0.25em 0; /* Reduced padding */
}

.phone .banner-image {
    display: none;
}

/* Phone landscape - reduce header height further */
.phone.landscape .banner-container {
    height: 60px; /* Increased from 55px for better logo clearance */
    padding: 0.2em 0; /* Slightly more padding */
}

.phone.landscape .logo-mobile {
    max-height: 45px; /* Increased from 40px to match portrait mode */
}

.phone .button-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 85%;
    gap: 0px;
}

.phone .button-description {
    margin-left: 0;
    text-align: center;
}

.phone .search-container,
.phone .additional-inputs,
.phone .button-container {
    width: 85%; /* Set the width to 85% */
    margin: 0 auto; /* Center the elements */
}

/* Mobile specific styles are now handled by the toolbar classes */

/* Improve touchability for self view toggle buttons on mobile */
.phone #toggle-self-view {
    padding: 8px;  /* Increase padding for larger touch target */
    font-size: 22px;  /* Slightly larger icon */
}

.phone #show-self-view {
    padding: 12px;  /* Increase padding for larger touch target */
    font-size: 26px;  /* Slightly larger icon */
}

/* Ensure search-container inside dial-pad-pane fits properly on mobile */
.phone .dial-pad-pane .admin-dial-pad-controls .search-container {
    width: 90%;
    max-width: none;
}

/* Match phone input and call button width to search container on mobile */
.phone .dial-pad-pane .admin-dial-pad-controls #phone-number-input,
.phone .dial-pad-pane .admin-dial-pad-controls #call-button {
    width: 90%;
    max-width: none;
}

.button-container-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    width: 400px; /* Match the width of other elements */
    display: flex;
    justify-content: center;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    justify-content: center;
    text-align: center;
    justify-content: center;
    text-align: center;
}

.button {
    background-color: var(--primary-color);
    color: white;
    font-size: 24px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 200px;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: var(--secondary-color);
}

.button-description {
    font-size: 16px;
    color: #333;
    flex: 1;
    text-align: center;
}

/* Style for the Connect button */
#connectButton {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4em;    /* Increased font size */
    font-weight: bold;   /* Made the text bold */
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* Hover effect for the Connect button */
#connectButton:hover {
    background-color: var(--secondary-color);
}

/* Style for the login and register buttons */
.btn {
    background-color: var(--primary-color);
    color: white;
    font-size: 24px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 200px;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--secondary-color);
}

.search-container {
    position: relative;
}

.search-container,
.additional-inputs,
.button-container {
    width: 400px; /* Default desktop width */
    margin: 0 auto 20px auto; /* Center the elements with bottom margin */
}

/* Styles specific to dial-pad-pane search containers */
.dial-pad-pane .admin-dial-pad-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 15px 0 15px; /* Added top padding of 20px */
    box-sizing: border-box;
    margin-top: 10px; /* Additional spacing from the header */
}

.dial-pad-pane .admin-dial-pad-controls .search-container {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 15px auto;
    position: relative;
}

/* Ensure options-container width matches search container */
.dial-pad-pane .admin-dial-pad-controls .options-container {
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Style phone input and call button consistently */
.dial-pad-pane .admin-dial-pad-controls #phone-number-input,
.dial-pad-pane .admin-dial-pad-controls #call-button {
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    box-sizing: border-box;
    display: block;
}

.dial-pad-pane .admin-dial-pad-controls #call-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dial-pad-pane .admin-dial-pad-controls #call-button:hover {
    background-color: var(--secondary-color);
}

#clientSearchInput,
#departmentSearchInput {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 100%; /* Ensure the input takes the full width of the container */
    box-sizing: border-box;
}

.reset-icon {
    position: absolute;
    right: 10px;
    top: 42%; /* Adjusted from 50% to 42% */
    transform: translateY(-50%);
    cursor: pointer;
    color: grey;
    display: none; /* Initially hidden */
    font-size: 1.2em; /* Adjust the size of the icon */
    line-height: 1; /* Ensure the line-height does not affect vertical alignment */
}

.note {
  text-align: center;
  margin: 0px;
  padding-bottom: 10px;
}

/* Shared styling for all input fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Specific styling for MFA verification code input */
#mfa_code {
  width: 150px !important;
  max-width: 150px;
  text-align: center;
  font-size: 1.4em;
  letter-spacing: 0.2em;
  font-weight: 500;
  margin: 0 auto;
  display: block;
  text-transform: uppercase;
}

/* Center the additional inputs */
.additional-inputs input {
  margin-bottom: 10px; /* Space between the inputs */
}

/* Main Container - Following VideoCallSpecification.md */
#main-container {
  display: flex;
  height: 100vh; /* Fills entire viewport */
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  
  /* Default desktop layout - column with toolbar at bottom */
  flex-direction: column;
}

/* Content Area - Following VideoCallSpecification.md */
#content-area {
  display: flex;
  flex-direction: row; /* For side panes next to video-room */
  flex: 1 1 auto; /* Fills all remaining space after toolbar */
  justify-content: flex-start;
  align-items: stretch;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  
  /* No fixed height - let flex handle it */
  width: 100%;
  min-height: 0; /* Allow shrinking */
}

#video-room {
    width: 100%;
    height: 100%;
    flex: 1 1 auto; /* Fills available space in content area */
    position: relative;
    overflow: hidden !important;
    padding: 2px;
    box-sizing: border-box;
    margin: 0;
    
    /* Default grid layout for desktop/tablet */
    display: grid;
    gap: 1px;
    background-color: transparent;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, 1fr);
}

#self-view {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 200px;
    height: 150px;
    background-color: #1a1a1a;
    z-index: 10;
    overflow: hidden;
    border: 4px solid var(--primary-color);
    border-radius: 10px;
    cursor: grab;
    box-sizing: border-box;
    /* Hide by default - will be shown when video loads */
    display: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#self-view.touch-active {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.5) !important;
    cursor: grabbing !important;
    z-index: 20 !important; /* Ensure it's above everything else when dragging */
    transition: none !important; /* Disable transitions during dragging for responsiveness */
}

/* When using CSS positioning, add smooth transitions */
#self-view[class*="position-"] {
    transition: top 0.3s, left 0.3s, right 0.3s, bottom 0.3s, transform 0.3s;
}

/* But disable transitions when dragging for immediate response */
#self-view[data-is-dragging="true"] {
    transition: none !important;
}

#self-view video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#self-view .video-off-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--video-off-color);
    font-size: 7em; /* Increased from 5em to 7em for larger icon */
}

#self-view.video-off .video-off-icon {
    display: block;
}

#toggle-self-view {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 20;
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 5px;
}

#show-self-view {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    background-color: var(--primary-color);
    border-radius: 50%;
    padding: 10px;
}

.participant {
    position: relative;
    flex: 1 1 50%;
    width: 50%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 20px;
    margin: 0;
    border: 6px solid var(--secondary-color);
}

/* Add specific style for manager participants */
.participant.manager {
    border: 6px solid var(--tertiary-color);
}

/* Add specific style for guest participants */
.participant.guest {
    border: 6px solid var(--secondary-color);
}

.participant-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.participant-identity {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 20;
}

.participant .video-off-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--video-off-color);
    font-size: 7em; /* Increased from 5em to 7em for larger icon */
}

.participant.video-off .video-off-icon {
    display: block;
}

.participant .audio-off-icon {
    display: none;
    position: absolute;
    bottom: 5px;
    left: 5px; /* Move to the bottom left */
    color: var(--button-red-color);
    font-size: 4.5em; /* Increased from 3em to 4.5em for larger icon */
}

.participant.shift-audio-icon .audio-off-icon {
  left: auto;
  right: 5px;
}

/* ====================================================================
   VIDEO LAYOUT STYLES - Device Detection System
   
   These classes replace inline styles from videoLayout.js
   Device Classes Applied by JavaScript device-detector:
   - .phone.portrait, .phone.landscape, .phone.ios, .phone.android
   - .tablet.ios, .tablet.android
   - .desktop
   
   Participant Count Classes Applied by JavaScript:
   - .one-participant, .two-participants, .three-participants, etc.
   ==================================================================== */

/* ====================================================================
   BASE VIDEO ROOM STYLES - All Devices
   ==================================================================== */

/* Base video room container - Following VideoCallSpecification.md */
#video-room {
    width: 100%;
    height: 100%;
    flex: 1 1 auto; /* Fills available space within content area */
    position: relative;
    overflow: hidden !important;
    box-sizing: border-box;
    margin: 0;
    padding: 2px;
    
    /* Default grid layout for desktop/tablet */
    display: grid;
    gap: 1px;
    background-color: transparent;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, 1fr);
}

/* Ensure all participant videos use object-fit: contain */
.participant video,
.participant-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: auto !important;
    min-height: auto !important;
    background-color: #000 !important;
    transform: none !important;
}

/* ====================================================================
   PARTICIPANT COUNT LAYOUTS - Grid Systems
   ==================================================================== */

/* Single participant - fills entire video room */
#video-room.one-participant {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

#video-room.one-participant .participant {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-width: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Two participants */
#video-room.two-participants {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

#video-room.two-participants .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 2px;
}

/* Three participants - Different layouts for portrait vs landscape */
#video-room.three-participants {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "main main" "second third";
}

#video-room.three-participants .participant:nth-child(1) {
    grid-area: main;
}

#video-room.three-participants .participant:nth-child(2) {
    grid-area: second;
}

#video-room.three-participants .participant:nth-child(3) {
    grid-area: third;
}

#video-room.three-participants .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 2px;
}

/* Four participants - 2x2 grid */
#video-room.four-participants {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#video-room.four-participants .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 2px;
}

/* Five participants */
#video-room.five-participants {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "main second third" "main fourth fifth";
}

#video-room.five-participants .participant:nth-child(1) {
    grid-area: main;
}

#video-room.five-participants .participant:nth-child(2) {
    grid-area: second;
}

#video-room.five-participants .participant:nth-child(3) {
    grid-area: third;
}

#video-room.five-participants .participant:nth-child(4) {
    grid-area: fourth;
}

#video-room.five-participants .participant:nth-child(5) {
    grid-area: fifth;
}

#video-room.five-participants .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 2px;
}

/* Six participants */
#video-room.six-participants {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#video-room.six-participants .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 2px;
}

/* Multi-participant (7+) */
#video-room.multi-participant {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}

#video-room.multi-participant.large-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#video-room.multi-participant .participant {
    width: 100%;
    height: 100%;
    margin: 1px;
    padding: 0;
    border-width: 1px;
}

/* ====================================================================
   PHONE PORTRAIT LAYOUT - Column Layout
   ==================================================================== */

/* Phone portrait - use flex column layout instead of grid */
.phone.portrait #video-room {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important; /* Fills content area height */
    flex: 1 1 auto !important; /* Works with flex layout */
}

/* Single participant in phone portrait - fills available content area */
.phone.portrait #video-room.one-participant .participant {
    width: 100% !important;
    height: 100% !important; /* Fills video room height */
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important; /* Grows to fill video room */
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-width: 4px !important;
    position: relative !important;
}

/* Three participants mobile portrait - special grid layout */
.phone.portrait #video-room.three-participants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-areas: "main main" "second third" !important;
}

/* Five participants mobile portrait - special layout */
.phone.portrait #video-room.five-participants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    grid-template-areas: "main main" "second third" "fourth fifth" !important;
}

/* Six participants mobile portrait - 2x3 grid */
.phone.portrait #video-room.six-participants {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

/* ====================================================================
   PHONE LANDSCAPE LAYOUT - Row Layout
   ==================================================================== */

/* Phone landscape - use flex row layout for single participant */
.phone.landscape #video-room.one-participant {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    height: 100% !important; /* Fill content area, not full viewport */
    width: 100% !important;
}

.phone.landscape #video-room.one-participant .participant {
    width: 100% !important;
    height: 100% !important; /* Fill video room, not full viewport */
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-width: 4px !important;
    position: relative !important;
}

/* ====================================================================
   iOS SAFARI SPECIFIC FIXES
   ==================================================================== */

/* iPhone iOS specific fixes */
.phone.ios.portrait #video-room {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    height: calc(100svh - var(--toolbar-height)) !important;
}

.phone.ios.portrait #video-room.one-participant .participant {
    /* iOS Safari specific fixes - height handled by flex layout */
}

.phone.ios.landscape #video-room.one-participant {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
}

/* iPad iOS specific fixes */
.tablet.ios #video-room {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    /* Height handled by flex layout system */
}

.tablet.ios #video-room.one-participant .participant {
    /* iOS Safari specific fixes - height handled by flex layout */
}

/* ====================================================================
   DESKTOP LAYOUT - Grid System
   ==================================================================== */

/* Desktop uses the default grid layout defined above */
.desktop #video-room {
    display: grid !important;
}

.desktop #video-room.one-participant .participant {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-width: 4px !important;
}

/* Desktop three participants - different layout than mobile */
.desktop #video-room.three-participants {
    grid-template-areas: "main second" "main third" !important;
}

/* ====================================================================
   TABLET LAYOUT - Uses Desktop-style Column Layout
   ==================================================================== */

/* Tablets always use desktop-style grid layout */
.tablet #video-room {
    display: grid !important;
}

.tablet #video-room.one-participant .participant {
    /* Height handled by flex layout system */
}

/* Tablet three participants - same as desktop */
.tablet #video-room.three-participants {
    grid-template-areas: "main second" "main third" !important;
}

/* Base toolbar styles - shared properties across all modes */
#toolbar {
    display: flex;
    align-items: center;
    background-color: var(--toolbar-bg-color, rgba(0, 0, 0, 0.7));
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2);
    padding: 0 20px;
    border-radius: 8px; /* Add rounded corners to all toolbar states */
}

/* Toolbar button styles - shared across all modes */
#toolbar button {
    background: transparent;
    border: none;
    color: white;
    margin: 0 10px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s;
}

#toolbar button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Consistent toolbar icon styling */
#toolbar i {
  font-size: 24px;
  color: white;
  display: flex; /* Changed from inline-block to flex for better centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 40px; /* Increased from 24px to 40px */
  height: 40px; /* Increased from 24px to 40px */
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
  margin: 0 8px; /* Added horizontal margin to create spacing */
  background-color: transparent !important;
}

#toolbar i:hover {
  transform: scale(1.2);
  background-color: transparent !important;
}

#toolbar #toggle-video-button.video-off {
    background-color: rgba(255, 0, 0, 0.5);
}

/* Original end call button styles moved to clean rule below */

#toolbar #end-call-button:hover {
    background-color: var(--end-call-hover-color, #c0392b);
    transform: scale(1.05);
}

/* Desktop toolbar style */
#toolbar.toolbar-desktop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: var(--toolbar-height);
    flex-direction: row;
    justify-content: space-between;
    border-radius: 8px; /* Rounded corners on all sides */
}

/* Desktop toolbar specific icon styling */
#toolbar.toolbar-desktop .top-icons,
#toolbar.toolbar-desktop .bottom-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px; /* Added gap for consistent spacing */
}

/* Mobile portrait toolbar style */
#toolbar.toolbar-mobile-portrait {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: var(--toolbar-height);
    min-height: auto;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1001;
    border-radius: 8px; /* Rounded corners on all sides */
}

/* Mobile portrait toolbar specific icon styling */
#toolbar.toolbar-mobile-portrait .top-icons,
#toolbar.toolbar-mobile-portrait .bottom-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px; /* Added gap for consistent spacing */
}

/* Mobile landscape toolbar style */
#toolbar.toolbar-mobile-landscape {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--toolbar-width);
    height: var(--viewport-height, 100vh) !important; /* Ensure full height */
    min-height: var(--viewport-height, 100vh) !important; /* Override portrait constraints */
    max-height: var(--viewport-height, 100vh) !important; /* Lock to viewport height */
    max-width: var(--toolbar-width);
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
    padding: 5px 0;
    overflow: hidden; /* Prevent any overflow */
    border-radius: 8px; /* Rounded corners on all sides */
    /* Override any portrait styles */
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* Adjust spacing in the toolbar for landscape mode */
#toolbar.toolbar-mobile-landscape .top-icons,
#toolbar.toolbar-mobile-landscape .bottom-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    gap: 15px; /* Increased from 10px for more spacing between icons */
}

/* Optimized vertical distribution in landscape mode */
#toolbar.toolbar-mobile-landscape .top-icons {
    flex: 0 1 auto; /* Allow shrinking */
    max-height: 70%; /* Limit maximum height */
    overflow-y: auto; /* Allow scrolling if needed */
    justify-content: flex-start; /* Start from the top */
    padding-top: 10px;
}

#toolbar.toolbar-mobile-landscape .bottom-icons {
    flex: 0 0 auto; /* Don't grow or shrink */
    justify-content: flex-end; /* Push to the bottom */
    padding-bottom: 10px;
}

/* Make landscape mode icons more compact */
#toolbar.toolbar-mobile-landscape i {
    font-size: 20px; /* Slightly smaller font size */
    width: 40px; /* Match desktop width */
    height: 40px; /* Match desktop height */
    line-height: 40px; /* Match height for vertical centering */
    margin: 0; /* Remove margin since we're using gap */
}

/* End call button is always visible - no orientation-specific hiding */

/* Popup styles */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.popup-content h3 {
    margin-top: 0;
    color: var(--primary-color);
}

.popup-content input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.popup-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.popup-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.popup-buttons button:first-child {
    background-color: var(--primary-color);
    color: white;
}

.popup-buttons button:first-child:hover {
    background-color: var(--secondary-color);
}

.popup-buttons button:last-child {
    background-color: #ccc;
    color: black;
}

.popup-buttons button:last-child:hover {
    background-color: #999;
}

#camera-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

#close-popup-button {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
}

#close-popup-button:hover {
    background-color: var(--secondary-color);
}

#confirm-end-call-popup .popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

#confirm-end-call-popup .button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

#confirm-end-call-popup .transfer-button,
#confirm-end-call-popup .end-button,
#confirm-end-call-popup .cancel-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s;
}

#confirm-end-call-popup .transfer-button {
    background-color: #4a90e2;
    color: white;
}

#confirm-end-call-popup .transfer-button:hover {
    background-color: #357abd;
}

#confirm-end-call-popup .end-button {
    background-color: #e74c3c;
    color: white;
}

#confirm-end-call-popup .end-button:hover {
    background-color: #c0392b;
}

#confirm-end-call-popup .cancel-button {
    background-color: #95a5a6;
    color: white;
}

#confirm-end-call-popup .cancel-button:hover {
    background-color: #7f8c8d;
}

/* ====================================================================
   MOBILE LANDSCAPE POPUP OPTIMIZATIONS
   Following device-responsive design rules using device-detector classes
   ==================================================================== */

/* Mobile Landscape - Compact popup styling for limited vertical space */
.phone.landscape .popup-content {
    padding: 15px !important; /* Reduced from 2rem (32px) */
    max-width: 350px !important; /* Slightly smaller max-width */
    max-height: 80vh !important; /* Ensure it fits in landscape viewport */
    overflow-y: auto !important; /* Add scrolling if content is still too tall */
}

.phone.landscape .popup-content h2,
.phone.landscape .popup-content h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Reduced spacing */
    font-size: 1.1em !important; /* Smaller heading */
    line-height: 1.2 !important; /* Tighter line height */
}

.phone.landscape .popup-content p {
    margin-bottom: 12px !important; /* Reduced spacing */
    font-size: 0.9em !important; /* Smaller text */
    line-height: 1.3 !important;
}

/* Compact button layout for end call popup in landscape */
.phone.landscape #confirm-end-call-popup .popup-content {
    padding: 12px !important; /* Even more compact for this specific popup */
    max-height: 75vh !important;
}

.phone.landscape #confirm-end-call-popup .button-container {
    flex-direction: row !important; /* Horizontal layout to save vertical space */
    gap: 8px !important; /* Smaller gap between buttons */
    margin-top: 15px !important; /* Reduced top margin */
    flex-wrap: wrap !important; /* Allow wrapping if needed */
    justify-content: center !important;
}

.phone.landscape #confirm-end-call-popup .transfer-button,
.phone.landscape #confirm-end-call-popup .end-button,
.phone.landscape #confirm-end-call-popup .cancel-button {
    padding: 8px 16px !important; /* Smaller button padding */
    font-size: 14px !important; /* Smaller font */
    flex: 1 1 auto !important; /* Equal width buttons */
    min-width: 80px !important; /* Minimum button width */
    max-width: 120px !important; /* Maximum button width */
}

/* General popup button optimizations for landscape */
.phone.landscape .popup-buttons {
    margin-top: 15px !important; /* Reduced spacing */
    gap: 8px !important; /* Smaller gap */
    flex-wrap: wrap !important; /* Allow wrapping */
}

.phone.landscape .popup-buttons button {
    padding: 8px 16px !important; /* Smaller padding */
    font-size: 14px !important; /* Smaller font */
}

.phone.landscape #close-popup-button {
    padding: 8px 16px !important; /* Smaller padding */
    font-size: 18px !important; /* Reduced from 24px */
}

/* Input field optimizations for landscape popups */
.phone.landscape .popup-content input[type="email"] {
    padding: 8px !important; /* Reduced padding */
    margin: 8px 0 !important; /* Reduced margins */
    font-size: 14px !important; /* Smaller font */
}

.phone.landscape #camera-select {
    padding: 8px !important; /* Smaller padding */
    margin-bottom: 8px !important; /* Reduced margin */
}

/* SweetAlert2 customizations for mobile landscape */
.phone.landscape .swal2-popup {
    max-height: 80vh !important;
    padding: 1rem !important; /* Reduced from default */
    margin: 0.5rem !important;
}

.phone.landscape .swal2-title {
    font-size: 1.2em !important; /* Smaller title */
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
}

.phone.landscape .swal2-content {
    font-size: 0.9em !important; /* Smaller content text */
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.phone.landscape .swal2-actions {
    margin-top: 1rem !important; /* Reduced spacing */
    gap: 0.5rem !important; /* Smaller gap between buttons */
}

.phone.landscape .swal2-confirm,
.phone.landscape .swal2-cancel,
.phone.landscape .swal2-deny {
    padding: 0.5rem 1rem !important; /* Smaller button padding */
    font-size: 0.9em !important; /* Smaller button text */
    min-width: 80px !important; /* Ensure buttons aren't too narrow */
}

.phone.landscape .swal2-icon {
    width: 60px !important; /* Smaller icon */
    height: 60px !important;
    margin: 0.5rem auto 1rem !important; /* Reduced margins */
}

/* Special handling for SweetAlert2 with textarea (manager dialog) */
.phone.landscape .swal2-textarea {
    max-height: 60px !important; /* Limit textarea height */
    padding: 0.5rem !important;
    font-size: 0.9em !important;
    margin-bottom: 0.5rem !important;
}

/* iOS Safari specific optimizations for landscape popups */
.phone.ios.landscape .popup-content {
    max-height: calc(100svh - 40px) !important; /* Use safe area viewport height */
}

.phone.ios.landscape .swal2-popup {
    max-height: calc(100svh - 40px) !important;
}

/* Media query for screen widths below 768px */
@media (max-width: 768px) {
    .banner-container {
        height: 60px; /* Reduced from 80px */
        background-color: white;
        padding: 0.25em 0; /* Reduced padding */
    }

    .banner-image {
        display: none;
    }

    .logo {
        display: none;
    }

    .logo-mobile {
        display: block;
        max-height: 45px;
    }

    .button-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 85%;
        gap: 0px;
    }

    .button-description {
        margin-left: 0;
        text-align: center;
    }

    .search-container,
    .additional-inputs,
    .button-container {
        width: 85%; /* Set the width to 85% */
        margin: 0 auto; /* Center the elements */
    }

    /* Mobile specific styles are now handled by the toolbar classes */
    
    /* Improve touchability for self view toggle buttons on mobile */
    #toggle-self-view {
        padding: 8px;  /* Increase padding for larger touch target */
        font-size: 22px;  /* Slightly larger icon */
    }

    #show-self-view {
        padding: 12px;  /* Increase padding for larger touch target */
        font-size: 26px;  /* Slightly larger icon */
    }

    /* Ensure search-container inside dial-pad-pane fits properly on mobile */
    .dial-pad-pane .admin-dial-pad-controls .search-container {
        width: 90%;
        max-width: none;
    }
    
    /* Match phone input and call button width to search container on mobile */
    .dial-pad-pane .admin-dial-pad-controls #phone-number-input,
    .dial-pad-pane .admin-dial-pad-controls #call-button {
        width: 90%;
        max-width: none;
    }
}

/* Landscape mode content area positioning - VIDEO CHAT PAGES ONLY */
/* Phone landscape with height restrictions - replaces complex @media query */
.phone.landscape #main-container #content-area {
  position: fixed !important;
  left: var(--toolbar-width) !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  height: var(--landscape-content-height) !important;
  width: calc(100vw - var(--toolbar-width)) !important;
  overflow: hidden !important;
}

/* Ensure main container doesn't override content area - only for video chat pages */
.phone.landscape #main-container:has(#content-area) {
  flex-direction: row !important;
  position: static !important; /* Allow fixed elements to be positioned */
  overflow: hidden !important;
}

/* ====================================================================
   DEVICE-SPECIFIC MAIN CONTAINER LAYOUTS - Following VideoCallSpecification.md
   ==================================================================== */

/* Mobile Portrait - Toolbar at bottom, content area fills space above */
.phone.portrait #main-container {
  flex-direction: column !important; /* Toolbar at bottom */
}

.phone.portrait #content-area {
  flex: 1 1 auto !important; /* Fills all space above toolbar */
  width: 100% !important;
  height: auto !important; /* Let flex handle height */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important; /* Not fixed positioning */
}

/* Mobile Landscape - Toolbar on left, content area fills space to the right */
.phone.landscape #main-container {
  flex-direction: row !important; /* Toolbar on left side */
}

.phone.landscape #content-area {
  flex: 1 1 auto !important; /* Fills all space to right of toolbar */
  width: auto !important; /* Let flex handle width */
  height: 100% !important; /* Full height */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Video room sizing is now handled by device-detector classes in the VIDEO LAYOUT STYLES section */

/* When chat or dial pad is open, ensure they fit within content area */
.phone.portrait #content-area:has(.chat-pane[style*="display: flex"]) {
  flex-direction: column !important; /* Stack video room and pane vertically */
}

.phone.portrait #content-area:has(.chat-pane[style*="display: flex"]) #video-room,
.phone.portrait #content-area:has(.dial-pad-pane[style*="display: flex"]) #video-room {
  flex: 1 1 50% !important; /* Share space with pane */
}

.phone.portrait #content-area:has(.chat-pane[style*="display: flex"]) .chat-pane,
.phone.portrait #content-area:has(.dial-pad-pane[style*="display: flex"]) .dial-pad-pane {
  flex: 1 1 50% !important; /* Share space with video room */
}

/* Media query for mobile devices in portrait mode - VIDEO CHAT PAGES ONLY */
/* OLD MEDIA QUERY REMOVED - Portrait mode now handled by device detector classes (.phone.portrait) */

/* Media query for screen widths above 768px */
@media (min-width: 1200px) {
    #self-view {
        width: 15%; /* Reduced from 300px fixed width to 15% width */
        height: auto; /* Use auto height to maintain aspect ratio */
        max-width: 225px; /* Add a max-width to prevent it from becoming too large */
        aspect-ratio: 4 / 3; /* Maintain 4:3 aspect ratio */
    }
    
    /* Support for both panes open simultaneously - make them narrower */
    .chat-pane[style*="display: flex"] + .dial-pad-pane[style*="display: flex"],
    .dial-pad-pane[style*="display: flex"] + .chat-pane[style*="display: flex"] {
        /* Styles to apply when both panes are visible */
        border-left: 1px solid #ccc;
        width: 280px; /* Narrower when both are visible */
        min-width: 250px; 
        max-width: 300px;
        flex: 1 0 280px; /* Allow some growth */
    }
    
    /* Ensure content area properly distributes space when both panes are open */
    #content-area.both-panes-open {
        display: flex;
        flex-direction: row;
        justify-content: flex-end; /* Align panes to the right */
    }
    
    #content-area.both-panes-open #video-room {
        width: calc(100% - 560px); /* Default for two panes at 280px each */
        min-width: calc(100% - 600px); /* Minimum when panes are at max width */
        max-width: calc(100% - 500px); /* Maximum when panes are at min width */
        flex: 1 1 auto; /* Allow video room to fill available space */
    }
    
    #content-area.both-panes-open .chat-pane,
    #content-area.both-panes-open .dial-pad-pane {
        width: 280px;
        min-width: 250px;
        max-width: 300px;
        flex: 1 0 280px; /* Allow some growth but not shrinking */
    }
}

/* Chat pane styles - ensure mobile compatibility */
.chat-pane {
  display: none; /* Hidden by default */
  position: relative; /* Ensure it is positioned next to video-room */
  top: 0;
  right: 0;
  width: 350px; /* Default width */
  min-width: 300px; /* Minimum width */
  max-width: 400px; /* Maximum width */
  flex: 1 0 350px; /* Grow and don't shrink, basis at 350px */
  height: 100%; /* Full height of video-chat-container */
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  flex-direction: column;
  transition: right 0.3s, width 0.3s; /* Add transition for smooth opening/closing */
}

/* Ensure chat-pane display works correctly when toggled */
.chat-pane[style*="display: flex"] {
  display: flex !important; /* Force flex display when style contains display: flex */
}

/* Mobile-specific adjustments for chat pane */
@media (max-width: 768px) {
  .chat-pane[style*="display: flex"] {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    z-index: 1001 !important; /* Ensure it's above other elements */
  }
  
  /* Portrait mode styles now handled by device-detector classes (.phone.portrait) */
}

.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.chat-input button,
.chat-input i {
  padding: 10px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-input button:hover,
.chat-input i:hover {
  background-color: var(--secondary-color);
}

/* Dial pad styles */
.dial-pad-pane {
  display: none; /* Hidden by default */
  position: relative; /* Ensure it is positioned next to video-room */
  top: 0;
  right: 0;
  width: 350px; /* Default width */
  min-width: 300px; /* Minimum width */
  max-width: 400px; /* Maximum width */
  flex: 1 0 350px; /* Grow and don't shrink, basis at 350px */
  height: 100%; /* Full height of video-chat-container */
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  flex-direction: column;
  transition: right 0.3s, width 0.3s; /* Add transition for smooth opening/closing */
  overflow-y: auto; /* Enable scrolling if needed */
  padding-bottom: 20px; /* Add padding at bottom for better spacing */
}

.dial-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  padding: 20px 0;
  width: 100%;
}

.dial-pad-row {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  column-gap: 10px;
}

.dial-pad-button {
  width: 50px;
  height: 50px;
  font-size: 16px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
  -webkit-user-select: none;
  user-select: none;
}

.dial-pad-button span {
  font-size: 10px;
}

.dial-pad-button:hover {
  background-color: var(--secondary-color);
}

/* Generic pane header style used by both chat and dial pad */
.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: var(--primary-color);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  padding-right: 50px !important;
}

/* Generic header title style */
.pane-header h2 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 500;
}

/* Generic close button style - enhanced for better visibility and touch */
.pane-header i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.4em;
  background-color: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Hover and active states for better feedback */
.pane-header i:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
  color: #ff3b30; /* Add a vibrant red color on hover */
}

.pane-header i:active {
  background-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(0.95);
  color: #ff3b30;
}

/* Mobile-specific enhancements for touch using device detector classes */
.phone .chat-pane .pane-header i, 
.phone .dial-pad-pane .pane-header i {
  right: 10px;
  font-size: 1.2em;
  width: 28px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.25);
}

/* Add touch-specific active state for phones */
.phone .pane-header i:active {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Chat and dial pad adjustments for both orientations */
.portrait-mode .chat-pane[style*="display: flex"],
.portrait-mode .dial-pad-pane[style*="display: flex"] {
  width: 100%;
  height: 50%;
  position: relative;
}

.landscape-mode .chat-pane[style*="display: flex"],
.landscape-mode .dial-pad-pane[style*="display: flex"] {
  width: 350px;
  min-width: 280px; /* Smaller minimum for smaller screens */
  max-width: 40%; /* Limit maximum width on larger tablets */
  max-height: 100%;
  height: 100%;
  position: relative;
  flex: 1 0 auto;
}

/* MOBILE PHONE LANDSCAPE - Much smaller chat/dial panes */
.phone.landscape .chat-pane[style*="display: flex"],
.phone.landscape .dial-pad-pane[style*="display: flex"] {
  width: 200px !important; /* Much smaller for mobile landscape */
  min-width: 180px !important;
  max-width: 220px !important;
  max-height: 100%;
  height: 100%;
  position: relative;
  flex: 0 0 200px !important; /* Fixed width, no growing */
}

/* Layout adjustments when chat or dialpad is open */
.landscape-mode #content-area:has(.chat-pane[style*="display: flex"]) {
  display: flex !important;
  flex-direction: row !important;
}

.landscape-mode #content-area:has(.chat-pane[style*="display: flex"]) #video-room {
  width: calc(100% - 350px) !important;
  height: 100% !important;
}

/* MOBILE PHONE LANDSCAPE - Adjust video room for smaller chat pane */
.phone.landscape #content-area:has(.chat-pane[style*="display: flex"]) #video-room {
  width: calc(100% - 200px) !important; /* Account for smaller chat pane */
  height: 100% !important;
}

.portrait-mode #content-area:has(.chat-pane[style*="display: flex"]) {
  display: flex !important;
  flex-direction: column !important;
}

.portrait-mode #content-area:has(.chat-pane[style*="display: flex"]) #video-room {
  height: 50% !important;
  width: 100% !important;
}

/* Same for dial pad */
.landscape-mode #content-area:has(.dial-pad-pane[style*="display: flex"]) {
  display: flex !important;
  flex-direction: row !important;
}

.landscape-mode #content-area:has(.dial-pad-pane[style*="display: flex"]) #video-room {
  width: calc(100% - 350px) !important;
  height: 100% !important;
}

/* MOBILE PHONE LANDSCAPE - Adjust video room for smaller dial pad */
.phone.landscape #content-area:has(.dial-pad-pane[style*="display: flex"]) #video-room {
  width: calc(100% - 200px) !important; /* Account for smaller dial pad */
  height: 100% !important;
}

.portrait-mode #content-area:has(.dial-pad-pane[style*="display: flex"]) {
  display: flex !important;
  flex-direction: column !important;
}

.portrait-mode #content-area:has(.dial-pad-pane[style*="display: flex"]) #video-room {
  height: 50% !important;
  width: 100% !important;
}

/* ====================================================================
 * CHAT LAYOUT CLASSES - DEVICE-RESPONSIVE DESIGN WITH DEVICE-DETECTOR
 * ====================================================================
 * These classes handle chat visibility states using device-detector.js classes
 * JavaScript should ONLY add/remove these classes, never set inline styles
 */

/* Base chat pane styling */
.chat-pane {
  display: none; /* Hidden by default */
}

/* Chat visible state - device agnostic */
.chat-pane.chat-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* PHONE PORTRAIT - Chat takes bottom 50% */
.phone.portrait #content-area.chat-open {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  box-sizing: border-box !important;
}

.phone.portrait #content-area.chat-open #video-room {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
}

.phone.portrait #content-area.chat-open .chat-pane.chat-visible {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
  border: 2px solid red; /* DEBUG: Visual indicator */
}

/* PHONE PORTRAIT - Chat closed - full video */
.phone.portrait #content-area.chat-closed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  max-height: calc(100vh - var(--toolbar-height)) !important;
  overflow: hidden !important;
  display: block !important;
}

.phone.portrait #content-area.chat-closed #video-room {
  height: 100% !important;
  width: 100% !important;
  flex: initial !important;
  max-height: none !important;
  min-height: auto !important;
}

/* More specific video room classes for better control */
.phone.portrait #video-room.chat-split-mode {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
}

/* ====================================================================
 * DIAL-PAD LAYOUT CLASSES - DEVICE-RESPONSIVE DESIGN WITH DEVICE-DETECTOR
 * ====================================================================
 * These classes handle dial-pad visibility states using device-detector.js classes
 * JavaScript should ONLY add/remove these classes, never set inline styles
 */

/* Base dial-pad pane styling - already defined above at line 2105 */

/* Dial-pad visible state - device agnostic */
.dial-pad-pane.dial-pad-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* PHONE PORTRAIT - Dial-pad takes bottom 50% */
.phone.portrait #content-area.dial-pad-open {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  box-sizing: border-box !important;
}

.phone.portrait #content-area.dial-pad-open #video-room {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
}

.phone.portrait #content-area.dial-pad-open .dial-pad-pane.dial-pad-visible {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
}

/* PHONE PORTRAIT - Dial-pad closed - full video */
.phone.portrait #content-area.dial-pad-closed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  max-height: calc(100vh - var(--toolbar-height)) !important;
  overflow: hidden !important;
  display: block !important;
}

.phone.portrait #content-area.dial-pad-closed #video-room {
  height: 100% !important;
  width: 100% !important;
  flex: initial !important;
  max-height: none !important;
  min-height: auto !important;
}

/* More specific video room classes for better control */
.phone.portrait #video-room.dial-pad-split-mode {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
}

/* ====================================================================
 * IPHONE-SPECIFIC DIAL-PAD LAYOUT CLASSES - iOS Safari Fixes
 * ====================================================================
 * These classes handle iPhone-specific dial-pad visibility and layout issues
 */

/* iPhone Portrait - Dial-pad takes bottom 50% with iOS Safari fixes */
.phone.ios.portrait #content-area.dial-pad-open {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  height: calc(100svh - var(--toolbar-height)) !important; /* Safe area viewport */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  box-sizing: border-box !important;
  -webkit-box-orient: vertical !important;
}

.phone.ios.portrait #content-area.dial-pad-open #video-room {
  -webkit-flex: 1 1 50% !important;
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
}

.phone.ios.portrait #content-area.dial-pad-open .dial-pad-pane.dial-pad-visible {
  -webkit-flex: 1 1 50% !important;
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
  /* iOS Safari specific fixes */
  -webkit-overflow-scrolling: touch !important;
  overflow-y: auto !important;
}

/* iPhone Portrait - Dial-pad closed - full video with iOS fixes */
.phone.ios.portrait #content-area.dial-pad-closed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  height: calc(100svh - var(--toolbar-height)) !important; /* Safe area viewport */
  max-height: calc(100svh - var(--toolbar-height)) !important;
  overflow: hidden !important;
  display: block !important;
}

.phone.ios.portrait #content-area.dial-pad-closed #video-room {
  height: 100% !important;
  width: 100% !important;
  flex: initial !important;
  max-height: none !important;
  min-height: auto !important;
}

/* iPhone video room split mode with iOS fixes */
.phone.ios.portrait #video-room.dial-pad-split-mode {
  -webkit-flex: 1 1 50% !important;
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
  -webkit-transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* ====================================================================
 * ANDROID-SPECIFIC DIAL-PAD LAYOUT CLASSES - Chrome Mobile Optimizations
 * ====================================================================
 * These classes handle Android-specific dial-pad visibility and layout
 */

/* Android Portrait - Dial-pad takes bottom 50% with Chrome optimizations */
.phone.android.portrait #content-area.dial-pad-open {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  box-sizing: border-box !important;
}

.phone.android.portrait #content-area.dial-pad-open #video-room {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
}

.phone.android.portrait #content-area.dial-pad-open .dial-pad-pane.dial-pad-visible {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
  /* Android Chrome optimizations */
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Android Portrait - Dial-pad closed - full video */
.phone.android.portrait #content-area.dial-pad-closed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--toolbar-height) !important;
  height: calc(100vh - var(--toolbar-height)) !important;
  max-height: calc(100vh - var(--toolbar-height)) !important;
  overflow: hidden !important;
  display: block !important;
}

.phone.android.portrait #content-area.dial-pad-closed #video-room {
  height: 100% !important;
  width: 100% !important;
  flex: initial !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Android video room split mode */
.phone.android.portrait #video-room.dial-pad-split-mode {
  flex: 1 1 50% !important;
  height: 50% !important;
  width: 100% !important;
  max-height: 50% !important;
  min-height: 50% !important;
  position: relative !important;
}

/* Note: Video room reset is handled by .phone.portrait #content-area.chat-closed #video-room rule above */

/* PHONE LANDSCAPE - Chat takes right side */
.phone.landscape #content-area.chat-open {
  display: flex !important;
  flex-direction: row !important;
}

.phone.landscape #content-area.chat-open #video-room {
  width: calc(100% - 200px) !important;
  height: 100% !important;
}

.phone.landscape #content-area.chat-open .chat-pane.chat-visible {
  width: 200px !important;
  min-width: 150px !important;
  max-width: 30% !important;
  height: 100% !important;
  flex: 0 0 200px !important;
}

/* TABLET AND DESKTOP - Chat takes right side */
.tablet #content-area.chat-open,
.desktop #content-area.chat-open {
  display: flex !important;
  flex-direction: row !important;
}

.tablet #content-area.chat-open #video-room,
.desktop #content-area.chat-open #video-room {
  width: calc(100% - 350px) !important;
  height: 100% !important;
}

.tablet #content-area.chat-open .chat-pane.chat-visible,
.desktop #content-area.chat-open .chat-pane.chat-visible {
  width: 350px !important;
  min-width: 280px !important;
  max-width: 40% !important;
  height: 100% !important;
  flex: 0 0 350px !important;
}

/* Portrait mode content positioning - toolbar is now controlled through classes */

/* Landscape mode content area positioning */

.landscape-mode #content-area {
  position: fixed !important;
  left: var(--toolbar-width) !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  height: var(--landscape-content-height) !important;
  width: calc(100vw - var(--toolbar-width)) !important;
  margin-left: 0 !important; /* Remove any margin */
  z-index: 999 !important;
  overflow: hidden !important;
}
  
/* Landscape mode content area positioning - toolbar styling is now controlled through classes */
@media (max-width: 768px) and (max-height: 450px) and (orientation: landscape) {
  /* Content area positioning in landscape mode */
  #content-area {
    position: fixed !important;
    left: var(--toolbar-width) !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: var(--landscape-content-height) !important;
    width: calc(100vw - var(--toolbar-width)) !important;
    overflow: hidden !important;
  }

  /* Ensure main container doesn't override content area */
  #main-container {
    flex-direction: row !important;
    position: static !important; /* Allow fixed elements to be positioned */
    overflow: hidden !important;
  }
}

/* End call button - clean, consistent styling across all orientations */
#toolbar #end-call-button {
    display: flex !important;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--end-call-color, #e74c3c);
    color: white;
    border: none;
    cursor: pointer;
    margin: 5px auto;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Phone button visibility control */
/* For guests - hidden by default */
#toolbar #toggle-dial-pad-button[data-user-type="guest"],
#toolbar i#toggle-dial-pad-button[data-user-type="guest"] {
  display: none !important;
}

/* For managers - always visible */
#toolbar #toggle-dial-pad-button[data-user-type="manager"],
#toolbar i#toggle-dial-pad-button[data-user-type="manager"] {
  display: flex !important;
}

/* Show guest phone button when call is active - more specific to override guest hidden rule */
#toolbar #toggle-dial-pad-button[data-user-type="guest"][data-call-active="true"],
#toolbar i#toggle-dial-pad-button[data-user-type="guest"][data-call-active="true"] {
  display: flex !important;
}

/* Fallback rule for any button with call active (lower specificity, should come last) */
#toolbar #toggle-dial-pad-button[data-call-active="true"] {
  display: flex !important;
}

/* MFA form container styling */
.main-container .form {
  max-width: 400px;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
}

/* MFA form elements */
.main-container .form div {
  margin-bottom: 1.5em;
  text-align: center;
}

.main-container .form label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 500;
  color: #333;
}

/* Center the verify button */
.main-container .form .btn {
  margin: 1em auto 0;
  display: block;
  min-width: 120px;
}

/* ====================================================================
   WAITING PAGE STYLES - Device Detection System
   
   Device Classes Applied by JavaScript:
   - .phone.portrait, .phone.landscape
   - .tablet (any orientation)  
   - .desktop (any orientation)
   ==================================================================== */

/* Base waiting page styles - applies to all devices */
.waiting-page-main {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Combined text message - fixed size */
.waiting-message {
  flex-shrink: 0;
  text-align: center;
}

.waiting-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

/* Video container - flexible, takes remaining space */
.waiting-video-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Base video wrapper - works for most scenarios */
.video-wrapper {
  width: 100%;
  max-width: 800px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  aspect-ratio: 16/9;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Bottom section - End Call button */
.waiting-page-main .header-container {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0 !important; /* Remove bottom margin */
  padding-bottom: 0 !important; /* Remove bottom padding */
}

.waiting-page-main .end-call-button {
  background-color: var(--end-call-color);
  color: white;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3);
  margin-bottom: 0 !important; /* Remove bottom margin */
}

.waiting-page-main .end-call-button:hover {
  background-color: var(--end-call-hover-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.4);
}

/* ====================================================================
   DEVICE-SPECIFIC LAYOUTS
   ==================================================================== */

/* PHONE PORTRAIT - Standard column layout */
.phone.portrait .waiting-page-main {
  flex-direction: column !important;
  height: calc(100vh - 120px) !important;
  padding: 15px !important;
  gap: 15px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: relative !important;
}

/* iOS SAFARI SPECIFIC FIXES - iPhone Portrait */
.phone.portrait.ios .waiting-page-main {
  flex-direction: column !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  height: calc(100vh - 120px) !important;
  height: calc(100svh - 120px) !important; /* Safe area viewport height for iOS */
  padding: 15px !important;
  gap: 15px !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* iOS Video Container Fixes */
.phone.portrait.ios .waiting-video-container {
  -webkit-flex: 1 !important;
  flex: 1 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  /* Ensure minimum height for video container */
  min-height: 200px !important;
  max-height: 60vh !important;
}

/* iOS Video Wrapper Fixes */
.phone.portrait.ios .video-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  /* Use padding-bottom method for iOS Safari */
  height: 0 !important;
  padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
  aspect-ratio: unset !important; /* Disable aspect-ratio for iOS */
  /* Ensure proper sizing within flex container */
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* iOS iframe positioning - ensure video fills the wrapper */
.phone.portrait.ios .video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  object-fit: cover !important;
  -webkit-transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* EMERGENCY OVERRIDE - Force column layout for phone portrait */
body.phone.portrait .waiting-page-main,
html.phone.portrait .waiting-page-main,
.phone.portrait main .waiting-page-main,
.phone.portrait #content .waiting-page-main {
  flex-direction: column !important;
  display: flex !important;
  height: calc(100vh - 120px) !important;
  padding: 15px !important;
  gap: 15px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ULTRA EMERGENCY OVERRIDE - iOS Portrait specific */
body.phone.portrait.ios .waiting-page-main,
html.phone.portrait.ios .waiting-page-main,
.phone.portrait.ios main .waiting-page-main,
.phone.portrait.ios #content .waiting-page-main,
.ios.phone.portrait .waiting-page-main {
  flex-direction: column !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  height: calc(100vh - 120px) !important;
  height: calc(100svh - 120px) !important;
  padding: 15px !important;
  gap: 15px !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.phone.portrait .waiting-text {
  font-size: 20px !important;
}

.phone.portrait .waiting-video-container {
  padding: 0 10px !important;
}

.phone.portrait .video-wrapper {
  max-width: 100% !important;
}

.phone.portrait .waiting-page-main .end-call-button {
  font-size: 15px !important;
  padding: 10px 20px !important;
}

/* PHONE LANDSCAPE - Row layout with left column for text+button */
.phone.landscape .waiting-page-main {
  flex-direction: row;
  height: calc(100vh - 80px);
  padding: 10px;
  gap: 15px;
  align-items: stretch;
}

/* Hide top message in phone landscape */
.phone.landscape .waiting-message {
  display: none;
}

/* Show and style the landscape content column */
.phone.landscape .waiting-content-column {
  display: flex !important;
  flex: 0 0 30%;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding-right: 15px;
}

.phone.landscape .waiting-content-column .landscape-message {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.phone.landscape .waiting-content-column .end-call-button {
  font-size: 14px;
  padding: 10px 16px;
  align-self: center;
  min-width: 100px;
}

/* Center column for video in phone landscape */
.phone.landscape .waiting-video-container {
  flex: 1;
  padding: 0;
  min-width: 0;
}

.phone.landscape .video-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Force 16:9 aspect ratio */
  max-width: 100%;
  max-height: 100%;
}

/* Hide the regular header container in phone landscape */
.phone.landscape .waiting-page-main .header-container {
  display: none;
}

/* TABLET - Always use desktop-style column layout */
.tablet .waiting-page-main {
  flex-direction: column !important;
  height: calc(100vh - 180px) !important;
  padding: 20px !important;
  gap: 20px !important;
}

.tablet .video-wrapper {
  max-width: 800px !important;
}

/* DESKTOP - Standard column layout with full features */
.desktop .waiting-page-main {
  flex-direction: column;
  height: calc(100vh - 180px);
  padding: 20px;
  gap: 20px;
}

.desktop .video-wrapper {
  max-width: 800px;
}

/* Large desktop optimization */
.desktop .waiting-page-main {
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .desktop .waiting-page-main {
    padding: 30px;
    gap: 25px;
  }
  
  .desktop .video-wrapper {
    max-width: 900px;
  }
  
  .desktop .waiting-text {
    font-size: 28px;
  }
}

/* Timer styles (currently hidden) */
.waiting-timer {
  display: none;
}

#timer {
  font-weight: bold;
  color: #0078d7;
}

/* ====================================================================
   MAC SAFARI OPTIMIZATION - Similar fixes for Mac Safari
   ==================================================================== */

/* Mac Safari has similar webkit issues to iOS Safari, need similar fixes */
.desktop.macos .waiting-page-main,
.desktop.macos.no-touch .waiting-page-main {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  height: calc(100vh - 220px) !important; /* Even more conservative height */
  height: calc(100svh - 220px) !important;
  min-height: 500px !important; /* Ensure minimum space for all elements */
  box-sizing: border-box !important;
  overflow-y: auto !important; /* Allow scrolling instead of hidden */
  overflow-x: hidden !important;
  position: relative !important;
  padding: 15px !important; /* Slightly less padding */
  gap: 25px !important; /* Bigger gaps to separate elements clearly */
}

/* Mac Safari video container fixes - fully responsive, no fixed heights */
.desktop.macos .waiting-video-container,
.desktop.macos.no-touch .waiting-video-container {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 15px !important; /* Side padding for breathing room */
  margin: 0 0 15px 0 !important; /* Bottom margin for separation from button */
  width: 100% !important; /* Full width container */
  flex-shrink: 1 !important; /* Allow it to shrink when needed */
}

/* Mac Safari video wrapper - truly responsive padding-bottom method */
.desktop.macos .video-wrapper,
.desktop.macos.no-touch .video-wrapper {
  width: 100% !important;
  max-width: min(600px, 85vw) !important; /* Responsive max width */
  position: relative !important; /* Keep relative for iframe positioning */
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  height: 0 !important;
  padding-bottom: min(32%, 40vh) !important; /* Responsive ratio that shrinks with viewport */
  aspect-ratio: unset !important; /* Disable aspect-ratio for Safari */
  margin: 0 auto !important; /* Center horizontally */
  display: block !important; /* Ensure it's a block element in flow */
}

/* Mac Safari video iframe positioning */
.desktop.macos .video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  object-fit: cover !important;
}

/* Mac Safari header container - clean button, natural flow at bottom */
.desktop.macos .waiting-page-main .header-container,
.desktop.macos.no-touch .waiting-page-main .header-container {
  min-height: 70px !important; /* Reasonable height */
  padding: 20px 0 !important; /* Padding for button spacing */
  margin-top: 20px !important; /* Space above button */
  background-color: transparent !important; /* No background */
  width: 100% !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important; /* Don't let it shrink */
}

/* Mac Safari end call button */
.desktop.macos .waiting-page-main .end-call-button {
  padding: 15px 30px !important;
  z-index: 10 !important;
  min-width: 150px !important;
  white-space: nowrap !important;
  margin: 10px 0 !important;
}

/* Mac Safari text elements - clean without background box, natural flow */
.desktop.macos .waiting-message,
.desktop.macos.no-touch .waiting-message {
  text-align: center !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 15px 20px !important; /* Keep padding for spacing */
  margin-bottom: 30px !important; /* More separation from video */
  background-color: transparent !important; /* Remove background box */
  flex-shrink: 0 !important; /* Don't let it shrink */
  width: 100% !important; /* Full width to establish space */
}

.desktop.macos .waiting-text,
.desktop.macos.no-touch .waiting-text {
  font-size: 22px !important; /* Slightly smaller */
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Mac Safari timer - hide like other optimized layouts */
.desktop.macos .waiting-timer {
  display: none !important;
}

/* Mac Safari footer compaction - similar to iPad */
.desktop.macos footer {
  margin-top: 15px !important;
}

.desktop.macos .footer-container {
  padding: 20px 20px 15px 20px !important;
  gap: 15px !important;
}

.desktop.macos .footer-help-section {
  padding: 12px 0 !important;
}

.desktop.macos .footer-help-button {
  padding: 10px 25px !important;
  font-size: 15px !important;
}

/* Mac Safari responsive adjustments for smaller screens/windows */
@media (max-height: 800px) {
  .desktop.macos .video-wrapper,
  .desktop.macos.no-touch .video-wrapper {
    padding-bottom: min(28%, 35vh) !important; /* Even smaller for short screens */
    max-width: min(550px, 80vw) !important;
  }
  
  .desktop.macos .waiting-page-main,
  .desktop.macos.no-touch .waiting-page-main {
    gap: 15px !important; /* Tighter spacing */
  }
}

@media (max-height: 600px) {
  .desktop.macos .video-wrapper,
  .desktop.macos.no-touch .video-wrapper {
    padding-bottom: min(24%, 30vh) !important; /* Very compact for very short screens */
    max-width: min(500px, 75vw) !important;
  }
  
  .desktop.macos .waiting-page-main,
  .desktop.macos.no-touch .waiting-page-main {
    gap: 10px !important; /* Very tight spacing */
    padding: 10px !important;
  }
}

/* ====================================================================
   iPad FOOTER OPTIMIZATION - Make footer much more compact on iPad
   ==================================================================== */

/* Make footer much more compact on iPad to save space for content */
.tablet.apple.ios.ipad footer,
.ipad footer,
.tablet.ios footer {
  margin-top: 10px !important; /* Reduced from 40px */
}

.tablet.apple.ios.ipad .footer-container,
.ipad .footer-container,
.tablet.ios .footer-container {
  padding: 15px 20px 10px 20px !important; /* Much more compact */
  gap: 10px !important; /* Smaller gaps */
}

.tablet.apple.ios.ipad .footer-help-section,
.ipad .footer-help-section,
.tablet.ios .footer-help-section {
  padding: 8px 0 !important; /* Minimal padding */
}

.tablet.apple.ios.ipad .footer-help-button,
.ipad .footer-help-button,
.tablet.ios .footer-help-button {
  padding: 8px 20px !important; /* Smaller button */
  font-size: 14px !important;
}

.tablet.apple.ios.ipad .footer-content,
.ipad .footer-content,
.tablet.ios .footer-content {
  gap: 15px !important; /* Tighter spacing */
}

.tablet.apple.ios.ipad .footer-copyright,
.ipad .footer-copyright,
.tablet.ios .footer-copyright {
  font-size: 11px !important; /* Smaller text */
  margin-top: 5px !important;
  padding-top: 8px !important;
}

.tablet.apple.ios.ipad .footer-link,
.ipad .footer-link,
.tablet.ios .footer-link {
  font-size: 12px !important; /* Smaller links */
  padding: 1px 0 !important;
}

.tablet.apple.ios.ipad .footer-links-title,
.ipad .footer-links-title,
.tablet.ios .footer-links-title {
  font-size: 12px !important;
  margin-bottom: 3px !important;
}

/* ====================================================================
   iPad HEADER OPTIMIZATION - Make header shorter on iPad
   ==================================================================== */

/* Reduce header height on iPad to save vertical space */
.tablet.apple.ios.ipad header,
.ipad header,
.tablet.ios header {
  height: 80px !important; /* Reduced from default */
}

.tablet.apple.ios.ipad .banner-container,
.ipad .banner-container,
.tablet.ios .banner-container {
  height: 60px !important; /* Smaller banner */
}

.tablet.apple.ios.ipad .banner-image,
.ipad .banner-image,
.tablet.ios .banner-image {
  height: 60px !important; /* Match banner container */
  object-fit: cover !important;
}

.tablet.apple.ios.ipad .logo,
.ipad .logo,
.tablet.ios .logo {
  height: 40px !important; /* Smaller logo */
}

.tablet.apple.ios.ipad .divider,
.ipad .divider,
.tablet.ios .divider {
  height: 15px !important; /* Thinner divider */
}

/* ====================================================================
   iPad SPECIFIC FIXES - Enhanced Detection with Multiple Selectors
   ==================================================================== */

/* iPad Portrait Layout - Column layout */
.tablet.apple.ios.ipad.portrait .waiting-page-main,
.ipad.portrait .waiting-page-main,
.tablet.ios.portrait .waiting-page-main {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  height: calc(100vh - 140px) !important; /* More space with compact header+footer */
  height: calc(100svh - 140px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 15px !important;
  gap: 15px !important;
}

/* iPad Landscape Layout - Row layout with side-by-side video and button */
.tablet.apple.ios.ipad.landscape .waiting-page-main,
.ipad.landscape .waiting-page-main,
.tablet.ios.landscape .waiting-page-main {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  height: calc(100vh - 120px) !important; /* Maximum space for landscape layout */
  height: calc(100svh - 120px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 10px !important;
  gap: 10px !important;
}

/* Create a content row for video and button side-by-side in landscape */
.tablet.apple.ios.ipad.landscape .waiting-page-main::after {
  content: none !important; /* Remove debug badge for landscape layout */
}

/* Landscape: Make waiting message smaller and centered */
.tablet.apple.ios.ipad.landscape .waiting-message,
.ipad.landscape .waiting-message,
.tablet.ios.landscape .waiting-message {
  flex-shrink: 0 !important;
  text-align: center !important;
  margin-bottom: 5px !important;
  padding: 5px 15px !important;
}

.tablet.apple.ios.ipad.landscape .waiting-text,
.ipad.landscape .waiting-text,
.tablet.ios.landscape .waiting-text {
  font-size: 18px !important; /* Smaller for landscape */
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Landscape: Create centered content row with flexbox */
.tablet.apple.ios.ipad.landscape .waiting-video-container,
.ipad.landscape .waiting-video-container,
.tablet.ios.landscape .waiting-video-container {
  flex: 1 1 0% !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  gap: 30px !important; /* Space between video and button */
  padding: 0 20px !important;
  position: relative !important;
}

/* Landscape: Position header container (button) as flex item - no background panel */
.tablet.apple.ios.ipad.landscape .waiting-page-main .header-container,
.ipad.landscape .waiting-page-main .header-container,
.tablet.ios.landscape .waiting-page-main .header-container {
  position: static !important;
  transform: none !important;
  flex-shrink: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  width: auto !important; /* Let button size itself */
  min-height: auto !important;
  padding: 0 !important; /* Remove padding */
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  background: none !important; /* Remove background */
  border-radius: none !important; /* Remove border radius */
  box-shadow: none !important; /* Remove shadow */
  backdrop-filter: none !important; /* Remove blur */
  -webkit-backdrop-filter: none !important;
  align-self: center !important;
}

/* Landscape: Style the end call button for the side panel */
.tablet.apple.ios.ipad.landscape .waiting-page-main .end-call-button,
.ipad.landscape .waiting-page-main .end-call-button,
.tablet.ios.landscape .waiting-page-main .end-call-button {
  width: 100% !important;
  padding: 15px 20px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  margin: 10px 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background-color: var(--end-call-color) !important;
  color: white !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3) !important;
}

.tablet.apple.ios.ipad.landscape .waiting-page-main .end-call-button:hover,
.ipad.landscape .waiting-page-main .end-call-button:hover,
.tablet.ios.landscape .waiting-page-main .end-call-button:hover {
  background-color: var(--end-call-hover-color) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.4) !important;
}

/* Hide timer in landscape mode */
.tablet.apple.ios.ipad.landscape .waiting-timer,
.ipad.landscape .waiting-timer,
.tablet.ios.landscape .waiting-timer {
  display: none !important;
}

/* Fallback for any iPad without orientation detection */
.tablet.apple.ios.ipad .waiting-page-main,
.ipad .waiting-page-main,
.tablet.ios .waiting-page-main {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  height: calc(100vh - 140px) !important; /* Conservative fallback with compact header+footer */
  height: calc(100svh - 140px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 15px !important;
  gap: 15px !important;
}

/* iPad Video Container Fixes - Multiple selectors */
.tablet.apple.ios.ipad .waiting-video-container,
.ipad .waiting-video-container,
.tablet.ios .waiting-video-container {
  -webkit-flex: 1 1 0% !important;
  flex: 1 1 0% !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important; /* Remove horizontal padding to rely on main container padding */
  overflow: hidden !important;
  /* More flexible height constraints for better space utilization */
  min-height: 200px !important;
  max-height: none !important; /* Remove restrictive max-height */
  /* Ensure video container doesn't overlap other elements */
  position: relative !important;
  z-index: 1 !important;
}

/* iPad Portrait Video Wrapper */
.tablet.apple.ios.ipad.portrait .video-wrapper,
.ipad.portrait .video-wrapper,
.tablet.ios.portrait .video-wrapper {
  width: 100% !important;
  max-width: 700px !important; /* Slightly smaller than desktop */
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  height: 0 !important;
  padding-bottom: 42% !important; /* More conservative aspect ratio for iPad */
  aspect-ratio: unset !important; /* Disable aspect-ratio for iOS */
  flex-shrink: 1 !important; /* Allow shrinking within flex container */
  align-self: center !important;
  margin: 0 auto !important;
  max-width: min(700px, 85vw) !important;
  max-height: 45vh !important; /* More conservative initial max height */
}

/* iPad Landscape Video Wrapper - Optimized for side-by-side layout */
.tablet.apple.ios.ipad.landscape .video-wrapper,
.ipad.landscape .video-wrapper,
.tablet.ios.landscape .video-wrapper {
  width: 100% !important;
  max-width: 600px !important; /* Smaller to fit with button */
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  height: 0 !important;
  padding-bottom: 35% !important; /* More compact for landscape */
  aspect-ratio: unset !important;
  flex-shrink: 1 !important;
  align-self: center !important;
  margin: 0 !important; /* No auto margin, align to left */
  max-width: min(600px, 70vw) !important;
  max-height: 60vh !important;
}

/* Fallback iPad Video Wrapper */
.tablet.apple.ios.ipad .video-wrapper,
.ipad .video-wrapper,
.tablet.ios .video-wrapper {
  width: 100% !important;
  max-width: 700px !important; /* Slightly smaller than desktop */
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  /* Use padding-bottom method for iOS Safari on iPad */
  height: 0 !important;
  padding-bottom: 42% !important; /* More conservative aspect ratio for iPad */
  aspect-ratio: unset !important; /* Disable aspect-ratio for iOS */
  /* CRITICAL: Allow shrinking within flex container */
  flex-shrink: 1 !important; /* Changed from 0 to 1 to allow shrinking */
  align-self: center !important;
  margin: 0 auto !important;
  /* Add max constraints to prevent video from being too large */
  max-width: min(700px, 85vw) !important;
  /* Dynamically limit height based on available container space */
  max-height: 45vh !important; /* More conservative initial max height */
}

/* Adjust padding-bottom dynamically for smaller screens - Portrait */
@media (max-height: 900px) {
  .tablet.apple.ios.ipad.portrait .video-wrapper,
  .ipad.portrait .video-wrapper,
  .tablet.ios.portrait .video-wrapper {
    padding-bottom: 35% !important; /* Even more conservative */
    max-height: 40vh !important;
    max-width: min(600px, 80vw) !important;
  }
  
  .tablet.apple.ios.ipad.landscape .video-wrapper,
  .ipad.landscape .video-wrapper,
  .tablet.ios.landscape .video-wrapper {
    padding-bottom: 30% !important; /* More compact for landscape */
    max-height: 55vh !important;
    max-width: min(550px, 65vw) !important;
  }
}

@media (max-height: 700px) {
  .tablet.apple.ios.ipad.portrait .video-wrapper,
  .ipad.portrait .video-wrapper,
  .tablet.ios.portrait .video-wrapper {
    padding-bottom: 30% !important; /* Very conservative for limited height */
    max-height: 35vh !important;
    max-width: min(500px, 75vw) !important;
  }
  
  .tablet.apple.ios.ipad.landscape .video-wrapper,
  .ipad.landscape .video-wrapper,
  .tablet.ios.landscape .video-wrapper {
    padding-bottom: 25% !important; /* Very compact for landscape */
    max-height: 50vh !important;
    max-width: min(500px, 60vw) !important;
  }
}

/* Additional landscape-specific media queries */
@media (max-width: 1200px) {
  .tablet.apple.ios.ipad.landscape .waiting-video-container,
  .ipad.landscape .waiting-video-container,
  .tablet.ios.landscape .waiting-video-container {
    gap: 20px !important; /* Tighter spacing on smaller screens */
    padding: 0 15px !important;
  }
}

@media (max-width: 1000px) {
  .tablet.apple.ios.ipad.landscape .waiting-video-container,
  .ipad.landscape .waiting-video-container,
  .tablet.ios.landscape .waiting-video-container {
    gap: 15px !important;
  }
  
  .tablet.apple.ios.ipad.landscape .waiting-page-main .end-call-button,
  .ipad.landscape .waiting-page-main .end-call-button,
  .tablet.ios.landscape .waiting-page-main .end-call-button {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}

/* iPad iframe positioning - Multiple selectors */
.tablet.apple.ios.ipad .video-wrapper iframe,
.ipad .video-wrapper iframe,
.tablet.ios .video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  object-fit: cover !important;
  -webkit-transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* iPad header container - Multiple selectors */
.tablet.apple.ios.ipad .waiting-page-main .header-container,
.ipad .waiting-page-main .header-container,
.tablet.ios .waiting-page-main .header-container {
  flex-shrink: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  min-height: 80px !important; /* Increased from 60px */
  padding: 20px 0 !important; /* Increased padding */
  margin-top: auto !important; /* Push to bottom */
  box-sizing: border-box !important;
  /* Ensure button container is always visible and properly positioned */
  position: relative !important;
  z-index: 10 !important; /* Higher z-index than video */
  background-color: transparent !important;
  width: 100% !important;
}

/* iPad End Call button - Multiple selectors */
.tablet.apple.ios.ipad .waiting-page-main .end-call-button,
.ipad .waiting-page-main .end-call-button,
.tablet.ios .waiting-page-main .end-call-button {
  background-color: var(--end-call-color) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important; /* Slightly larger for iPad */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3) !important;
  margin: 0 !important;
  /* Ensure button is always visible */
  position: relative !important;
  z-index: 11 !important;
  min-width: 120px !important;
  white-space: nowrap !important;
}

.tablet.apple.ios.ipad .waiting-page-main .end-call-button:hover,
.ipad .waiting-page-main .end-call-button:hover,
.tablet.ios .waiting-page-main .end-call-button:hover {
  background-color: var(--end-call-hover-color) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.4) !important;
}

/* iPad waiting message - Multiple selectors */
.tablet.apple.ios.ipad .waiting-message,
.ipad .waiting-message,
.tablet.ios .waiting-message {
  flex-shrink: 0 !important;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  /* Prevent message from being too tall */
  max-height: 80px !important;
  overflow: hidden !important;
}

.tablet.apple.ios.ipad .waiting-text,
.ipad .waiting-text,
.tablet.ios .waiting-text {
  font-size: 20px !important; /* Slightly smaller */
  line-height: 1.2 !important; /* Tighter line height */
  margin: 0 !important;
}

/* Hide timer on iPad to save space - Multiple selectors */
.tablet.apple.ios.ipad .waiting-timer,
.ipad .waiting-timer,
.tablet.ios .waiting-timer {
  display: none !important;
}

/* Emergency fixes for common iPad Safari issues - Multiple selectors */
.tablet.apple.ios.ipad .waiting-page-main *,
.ipad .waiting-page-main *,
.tablet.ios .waiting-page-main * {
  box-sizing: border-box !important;
}

/* Ensure no elements have conflicting positioning - Multiple selectors */
.tablet.apple.ios.ipad .wrapper,
.tablet.apple.ios.ipad body,
.tablet.apple.ios.ipad html,
.ipad .wrapper,
.ipad body,
.ipad html,
.tablet.ios .wrapper,
.tablet.ios body,
.tablet.ios html {
  overflow-x: hidden !important;
}

/* Additional fallback for very specific iPad Safari versions */
@supports (-webkit-touch-callout: none) {
  .tablet.apple.ios.ipad .waiting-page-main,
  .ipad .waiting-page-main,
  .tablet.ios .waiting-page-main {
    height: calc(100vh - 200px) !important; /* Extra space for Safari UI */
  }
  
  .tablet.apple.ios.ipad .video-wrapper,
  .ipad .video-wrapper,
  .tablet.ios .video-wrapper {
    max-height: 40vh !important;
    padding-bottom: 35% !important;
  }
}

/* ====================================================================
   DEVICE DETECTION SYSTEM COMPLETE
   ==================================================================== */

/* ====================================================================
   RESPONSIVE LAYOUT CLASSES FOR DEVICE-AWARE VIDEO LAYOUT
   ==================================================================== */

/* Main container responsive classes */
#main-container.portrait-mode {
    height: var(--viewport-height, 100vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-container.landscape-mode {
    height: var(--viewport-height, 100vh);
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#main-container.desktop-mode {
    height: var(--viewport-height, 100vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Content area responsive classes */
.content-area-landscape {
    width: calc(100vw - var(--toolbar-width)) !important;
    height: var(--viewport-height, 100vh) !important;
    max-width: calc(100vw - var(--toolbar-width)) !important;
    max-height: var(--viewport-height, 100vh) !important;
    left: var(--toolbar-width) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    /* Override any portrait styles */
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    position: absolute !important;
}

.content-area-portrait {
    width: 100% !important;
    height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
    max-height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: var(--toolbar-height) !important;
    /* Reset landscape styles */
    margin-left: 0 !important;
    position: absolute !important;
}

.content-area-desktop {
    height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
    max-height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
}

/* Video room responsive classes */
.video-room-landscape {
    height: var(--viewport-height, 100vh) !important;
    max-height: var(--viewport-height, 100vh) !important;
    width: calc(100vw - var(--toolbar-width)) !important;
    max-width: calc(100vw - var(--toolbar-width)) !important;
    /* Override any portrait styles */
    min-height: var(--viewport-height, 100vh) !important;
}

.video-room-responsive {
    height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
    max-height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
    width: 100% !important;
    /* Reset landscape styles */
    min-height: calc(var(--viewport-height, 100vh) - var(--toolbar-height)) !important;
}

/* Layout ready class for video room */
.layout-ready {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Self-view visibility class */
.self-view-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
    position: absolute !important;
}

/* ====================================================================
 * INVITE GUEST POPUP STYLING - IMPROVED LAYOUT
 * ====================================================================
 * Fixes for width issues and button alignment in both standard and RVRS invite popups
 */

/* Override SweetAlert2 popup sizing for invite guest modal */
.invite-guest-popup .swal2-popup {
  width: 450px !important;
  max-width: 90vw !important;
  min-width: 320px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Ensure the container doesn't cause overflow */
.invite-guest-popup {
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

/* Form group styling */
.invite-guest-popup .form-group {
  margin-bottom: 15px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* Label styling */
.invite-guest-popup .form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

/* Input field styling - prevent overflow */
.invite-guest-popup .swal2-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
}

/* Select dropdown styling to match input fields */
.invite-guest-popup select.swal2-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 8px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  padding-right: 32px !important;
}

.invite-guest-popup select.swal2-input:focus {
  outline: none !important;
  border-color: #6c63ff !important;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.1) !important;
}

/* Email input specific styling */
.invite-guest-popup #swal-guest-email {
  background-color: #fff !important;
  color: #333 !important;
}

/* Share link input styling */
.invite-guest-popup #guest-call-link {
  background-color: #f8f9fa !important;
  color: #666 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
  cursor: text !important;
}

/* Flex container for share link and copy button */
.invite-guest-popup .form-group div[style*="display: flex"] {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Share link input in flex container */
.invite-guest-popup .form-group div[style*="display: flex"] #guest-call-link {
  flex: 1 !important;
  min-width: 0 !important; /* Allows the input to shrink */
  margin-right: 0 !important;
}

/* Copy button styling - match input height */
.invite-guest-popup #copy-guest-link {
  background-color: #28a745 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  height: 40px !important;
  min-width: 80px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.invite-guest-popup #copy-guest-link:hover {
  background-color: #218838 !important;
}

/* RVRS specific fields (if present) */
.invite-guest-popup #swal-caller-name,
.invite-guest-popup #swal-caller-company,
.invite-guest-popup #swal-caller-number {
  background-color: #fff !important;
  color: #333 !important;
}

.invite-guest-popup #swal-comments {
  background-color: #fff !important;
  color: #333 !important;
  resize: vertical !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 8px 12px !important;
  font-family: inherit !important;
}

/* Bottom buttons styling */
.invite-guest-popup .swal2-confirm {
  background-color: #6c63ff !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.invite-guest-popup .swal2-confirm:hover {
  background-color: #5a52d8 !important;
}

.invite-guest-popup .swal2-cancel {
  background-color: #6c757d !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.invite-guest-popup .swal2-cancel:hover {
  background-color: #5a6268 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .invite-guest-popup .swal2-popup {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 !important;
  }
  
  .invite-guest-popup .form-group div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .invite-guest-popup .form-group div[style*="display: flex"] #guest-call-link {
    flex: none !important;
    width: 100% !important;
  }
  
  .invite-guest-popup #copy-guest-link {
    width: 100% !important;
    min-width: auto !important;
  }
}

/* Device-specific optimizations using device-detector classes */
.phone.portrait .invite-guest-popup .swal2-popup {
  width: 90vw !important;
  max-width: 90vw !important;
  padding: 15px !important;
}

.phone.landscape .invite-guest-popup .swal2-popup {
  width: 85vw !important;
  max-width: 400px !important;
  padding: 15px !important;
}

.phone.landscape .invite-guest-popup .form-group div[style*="display: flex"] {
  flex-direction: row !important;
  gap: 8px !important;
}

.phone.landscape .invite-guest-popup #copy-guest-link {
  min-width: 70px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* Tablet adjustments */
.tablet .invite-guest-popup .swal2-popup {
  width: 450px !important;
  max-width: 70vw !important;
}

/* Desktop adjustments */
.desktop .invite-guest-popup .swal2-popup {
  width: 450px !important;
  max-width: 500px !important;
}

/* ====================================================================
   DEBUG & EMERGENCY FALLBACK RULES FOR IPAD SAFARI LAYOUT
   ==================================================================== */

/* Debug indicators - DISABLED for clean interface */
/*
.desktop .waiting-page-main::before,
.macos .waiting-page-main::after,
.desktop.macos .waiting-page-main::before {
  display: none !important;
}
*/

/* Clean solution - rely only on UAParser.js device detection */