/* Tyga Loading - Teams Join Modal CSS - Complete Teams Interface Replication */
/* Based on Microsoft Teams HTML structure and styling */
/* Scoped as tygaLoading to avoid breaking existing system */

/* CSS Variables - Teams Color Palette (Scoped to tygaLoading) */

hr {
  color: #000000 !important;
}

.tygaLoading {
  /* Teams Primary Colors */
  --teams-primary-blue: #5059C9;
  --teams-primary-orange: #FE7E00;
  --teams-secondary-blue: #7B83EB;
  --teams-light-blue: #8890ED;
  --teams-dark-blue: #4B53BC;
  
  /* Teams UI Colors */
  --teams-background: #000000;
  --teams-white: #ffffff;
  --teams-text-primary: #323130;
  --teams-text-secondary: #616161;
  --teams-border: #e1dfdd;
  --teams-disabled: #a19f9d;
  
  /* Teams Semantic Colors */
  --teams-success: #107c10;
  --teams-error: #d13438;
  --teams-warning: #ff8c00;
  
  /* Teams Spacing (8px grid system) */
  --teams-space-xs: 4px;
  --teams-space-sm: 8px;
  --teams-space-md: 16px;
  --teams-space-lg: 24px;
  --teams-space-xl: 32px;
  --teams-space-xxl: 48px;
  
  /* Teams Typography */
  --teams-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Web', sans-serif;
  --teams-font-size-sm: 12px;
  --teams-font-size-md: 14px;
  --teams-font-size-lg: 16px;
  --teams-font-size-xl: 20px;
  --teams-font-size-xxl: 24px;
  
  /* Teams Border Radius */
  --teams-radius-sm: 4px;
  --teams-radius-md: 8px;
  --teams-radius-lg: 12px;
  
  /* Teams Shadows */
  --teams-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --teams-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --teams-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Tyga Loading - Teams Join Modal Container */
.tygaLoading .teams-join-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--teams-background);
  font-family: var(--teams-font-family);
  font-size: var(--teams-font-size-md);
  line-height: 1.4286;
  z-index: 9999;
  display: none;
}

.tygaLoading .teams-join-modal.show {
  display: flex;
}

/* Main Container - Teams Flexbox Structure */
.tygaLoading .teams-join-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tygaLoading .teams-join-content {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  background: #000000;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

/* Left Side - Video Preview and Background Filters - NOW FULL BACKGROUND */
.tygaLoading .teams-video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  z-index: 1;
  overflow: hidden;
}

/* Top 1/3 - Video Preview - NOW FULL SCREEN BACKGROUND */
.tygaLoading .teams-video-preview-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  z-index: 1;
}

.tygaLoading .teams-video-preview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0px !important;
}

/* Bottom 2/3 - Background Filters - HIDDEN IN FULLSCREEN MODE */
.tygaLoading .teams-background-filters {
  display: none;
}

.tygaLoading .teams-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--teams-space-sm);
  margin-bottom: var(--teams-space-md);
  padding: var(--teams-space-sm) 0;
  border-bottom: 1px solid var(--teams-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tygaLoading .teams-filters-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tygaLoading .teams-filters-header .teams-accordion-icon {
  width: 16px;
  height: 16px;
  fill: var(--teams-text-secondary);
  transition: transform 0.2s ease;
}

.tygaLoading .teams-filters-header.expanded .teams-accordion-icon {
  transform: rotate(180deg);
}

.tygaLoading .teams-filters-title {
  font-size: var(--teams-font-size-md);
  font-weight: 600;
  color: var(--teams-text-primary);
  margin: 0;
  flex: 1;
}

/* Background Filters Content */
.tygaLoading .teams-filters-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tygaLoading .teams-filters-content.expanded {
  max-height: 400px; /* Adjust based on content */
}

.tygaLoading .teams-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--teams-space-xs);
}

.tygaLoading .teams-filter-option {
  aspect-ratio: 16/9;
  border: 2px solid transparent;
  border-radius: var(--teams-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #e1e5e9;
}

/* Mobile Background Filters - Horizontal Scrolling */
@media (max-width: 800px) {
  .tygaLoading .teams-filters-grid {
    display: flex;
    flex-direction: row;
    gap: var(--teams-space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--teams-space-sm);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .tygaLoading .teams-filters-grid::-webkit-scrollbar {
    height: 4px;
  }
  
  .tygaLoading .teams-filters-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }
  
  .tygaLoading .teams-filters-grid::-webkit-scrollbar-thumb {
    background: var(--teams-primary-orange);
    border-radius: 2px;
  }
  
  .tygaLoading .teams-filters-grid::-webkit-scrollbar-thumb:hover {
    background: var(--teams-dark-blue);
  }
  
  .tygaLoading .teams-filter-option {
    flex: 0 0 auto;
    height: 50px;
    width: 89px; /* 16:9 aspect ratio for 50px height */
    aspect-ratio: 16/9;
    min-width: 89px;
  }
  
  .tygaLoading .teams-filter-label {
    font-size: 10px;
    padding: 2px 4px;
    line-height: 1.2;
    display: none;
  }
  
  .tygaLoading .teams-filter-none {
    height: 50px;
    width: 89px;
    min-width: 89px;
  }
  
  .tygaLoading .teams-filter-none-icon {
    width: 20px;
    height: 20px;
  }
}

.tygaLoading .teams-filter-option:hover {
  border-color: var(--teams-primary-orange);
  transform: scale(1.02);
}

.tygaLoading .teams-filter-option.selected {
  border-color: var(--teams-primary-orange);
  box-shadow: 0 0 0 2px rgba(80, 89, 201, 0.2);
}

.tygaLoading .teams-filter-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tygaLoading .teams-filter-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: var(--teams-space-sm);
  font-size: var(--teams-font-size-sm);
  text-align: center;
  display: none;
}

.tygaLoading .teams-filter-none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px dashed var(--teams-border);
}

.tygaLoading .teams-filter-none-icon {
  width: 24px;
  height: 24px;
  color: var(--teams-text-secondary);
}

/* Settings Button - Top Right Corner */
.tygaLoading .teams-settings-floating-button {
  position: fixed;
  top: var(--teams-space-lg);
  right: var(--teams-space-lg);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.tygaLoading .teams-settings-floating-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: rotate(90deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.tygaLoading .teams-settings-floating-button svg {
  width: 24px;
  height: 24px;
  fill: #323130;
}

/* Right Side - Controls and Settings - NOW CENTERED STANDALONE SECTION */
.tygaLoading .teams-controls-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  padding: var(--teams-space-xl);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--teams-radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  justify-content: space-between;
  max-width: 400px;
  max-height: 80vh;
  z-index: 10;
  min-width: 350px;
}

/* Video Overlay Toolbar */
.tygaLoading .teams-video-actions {
  position: absolute;
  bottom: var(--teams-space-md);
  left: var(--teams-space-md);
  right: var(--teams-space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--teams-radius-md);
  padding: var(--teams-space-sm);
  backdrop-filter: blur(10px);
}

.tygaLoading .teams-video-controls {
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
}

.tygaLoading .teams-camera-state {
  color: var(--teams-white);
  font-size: var(--teams-font-size-sm);
  margin-right: var(--teams-space-sm);
}

/* Teams Toggle Switch */
.tygaLoading .teams-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tygaLoading .teams-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tygaLoading .teams-switch-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--teams-space-xs);
}

.tygaLoading .teams-switch-indicator {
  width: 40px;
  height: 20px;
  background: var(--teams-disabled);
  border-radius: 10px;
  position: relative;
  transition: background-color 0.2s ease;
}

.tygaLoading .teams-switch input:checked + .teams-switch-label .teams-switch-indicator {
  background: var(--teams-primary-orange);
}

.tygaLoading .teams-switch-indicator::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--teams-white);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.tygaLoading .teams-switch input:checked + .teams-switch-label .teams-switch-indicator::after {
  transform: translateX(20px);
}

.tygaLoading .teams-switch-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Video Action Buttons */
.tygaLoading .teams-video-action-buttons {
  display: flex;
  gap: var(--teams-space-xs);
}

.tygaLoading .teams-icon-button {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--teams-radius-sm);
  color: var(--teams-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.tygaLoading .teams-icon-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tygaLoading .teams-icon-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Right Column - Audio Options */
.tygaLoading .teams-audio-section {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  padding: var(--teams-space-xl);
  background: var(--teams-white);
}

/* Meeting Header */


.tygaLoading .teams-meeting-mainheader {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 5px; 
} 
.tygaLoading .teams-meeting-maintitle {
  font-size: 18px;
  font-weight: bold;
  color: var(--teams-text-primary);
  margin: 0;
} 
  


.tygaLoading .teams-meeting-header {
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
  margin-bottom: var(--teams-space-lg);
}

.tygaLoading .teams-meeting-icon {
  width: 24px;
  height: 24px;
  fill: #000000;
}

.tygaLoading .teams-meeting-title {
  font-size: var(--teams-font-size-lg);
  font-weight: 600;
  color: var(--teams-text-primary);
  margin: 0;
}

/* Username Input */
.tygaLoading .teams-username-section {
  margin-bottom: 5px;
  padding-right: 0px;
}

.tygaLoading .teams-username-input {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--teams-border);
  border-radius: var(--teams-radius-sm);
  font-size: var(--teams-font-size-md);
  font-family: var(--teams-font-family);
  background: var(--teams-white);
  color: black; /*var(--teams-text-primary);*/
  transition: border-color 0.2s ease;
}

.tygaLoading .teams-username-input:focus {
  outline: none;
  border-color: black; /* var(--teams-primary-orange); */
  box-shadow: 0 0 0 1px black; /*var(--teams-primary-orange);*/
}

.tygaLoading .teams-username-input::placeholder {
  color: var(--teams-text-secondary);
}

/* Error Message */
.tygaLoading .teams-error-message {
  display: none;
  background: var(--teams-error);
  color: var(--teams-white);
  padding: var(--teams-space-sm) var(--teams-space-md);
  border-radius: var(--teams-radius-sm);
  font-size: var(--teams-font-size-sm);
  margin-bottom: var(--teams-space-md);
  animation: teamsErrorSlideIn 0.3s ease-out;
}

.tygaLoading .teams-error-message.teams-error-show {
  display: block;
}

@keyframes teamsErrorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Audio Options Radio Group */
.tygaLoading .teams-audio-options {
  margin-bottom: var(--teams-space-xl);
}

.tygaLoading .teams-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--teams-space-md);
}

.tygaLoading .teams-radio-option {
  display: flex;
  align-items: flex-start;
  padding: var(--teams-space-md);
  border: 1px solid var(--teams-border);
  border-radius: var(--teams-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tygaLoading .teams-radio-option:hover {
  border-color: var(--teams-primary-orange);
  background: rgba(80, 89, 201, 0.05);
}

.tygaLoading .teams-radio-option.selected {
  border-color: var(--teams-primary-orange);
  background: rgba(80, 89, 201, 0.1);
}

.tygaLoading .teams-radio-option.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f8f8f8;
}

.tygaLoading .teams-radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tygaLoading .teams-radio-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--teams-border);
  border-radius: 50%;
  margin-right: var(--teams-space-md);
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.tygaLoading .teams-radio-option.selected .teams-radio-indicator {
  border-color: var(--teams-primary-orange);
}

.tygaLoading .teams-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--teams-primary-orange);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.tygaLoading .teams-radio-option.selected .teams-radio-indicator::after {
  transform: translate(-50%, -50%) scale(1);
}

.tygaLoading .teams-radio-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--teams-space-md);
}

.tygaLoading .teams-radio-icon {
  width: 32px;
  height: 32px;
  fill: var(--teams-primary-orange);
  flex-shrink: 0;
}

.tygaLoading .teams-radio-text {
  flex: 1;
}

.tygaLoading .teams-radio-title {
  font-weight: 600;
  color: var(--teams-text-primary);
  margin: 0 0 var(--teams-space-xs) 0;
}

.tygaLoading .teams-radio-description {
  font-size: var(--teams-font-size-sm);
  color: var(--teams-text-secondary);
  margin: 0;
}

.tygaLoading .teams-radio-checkmark {
  width: 16px;
  height: 16px;
  fill: var(--teams-primary-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tygaLoading .teams-radio-option.selected .teams-radio-checkmark {
  opacity: 1;
}

/* Computer Audio Expanded Section */
.tygaLoading .teams-computer-audio-expanded {
  margin-top: var(--teams-space-md);
  padding-top: var(--teams-space-md);
  border-top: 1px solid var(--teams-border);
}

.tygaLoading .teams-customised-setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--teams-space-md);
}

.tygaLoading .teams-customised-title {
  font-size: var(--teams-font-size-sm);
  color: var(--teams-text-secondary);
  margin: 0;
}

.tygaLoading .teams-settings-button {
  background: none;
  border: none;
  color: var(--teams-text-secondary);
  cursor: pointer;
  padding: var(--teams-space-xs);
  border-radius: var(--teams-radius-sm);
  transition: background-color 0.2s ease;
}

.tygaLoading .teams-settings-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.tygaLoading .teams-settings-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Microphone Controls */
.tygaLoading .teams-mic-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--teams-space-md);
}

.tygaLoading .teams-mic-toggle {
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
}

.tygaLoading .teams-mic-state {
  font-size: var(--teams-font-size-sm);
  color: var(--teams-text-primary);
}

/* Speaker Controls */
.tygaLoading .teams-speaker-controls {
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
}

.tygaLoading .teams-speaker-button {
  background: none;
  border: none;
  color: var(--teams-text-secondary);
  cursor: pointer;
  padding: var(--teams-space-xs);
  border-radius: var(--teams-radius-sm);
  transition: background-color 0.2s ease;
}

.tygaLoading .teams-speaker-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.tygaLoading .teams-speaker-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tygaLoading .teams-speaker-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Volume Slider */
.tygaLoading .teams-volume-slider {
  flex: 1;
  height: 4px;
  background: var(--teams-border);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.tygaLoading .teams-volume-track {
  height: 100%;
  background: var(--teams-primary-orange);
  border-radius: 2px;
  width: 50%;
  transition: width 0.2s ease;
}

.tygaLoading .teams-volume-thumb {
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  background: var(--teams-primary-orange);
  border: 2px solid var(--teams-white);
  border-radius: 50%;
  transform: translate(50%, -50%);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tygaLoading .teams-volume-thumb:hover {
  transform: translate(50%, -50%) scale(1.2);
}

/* Action Buttons */
.tygaLoading .teams-action-buttons {
  display: flex;
  gap: 10px;
  margin-top: var(--teams-space-lg);
  padding-top: 0px;
  margin-bottom: auto;
}

.tygaLoading .teams-button {
  padding: var(--teams-space-sm) var(--teams-space-lg);
  border: 1px solid var(--teams-border);
  border-radius: var(--teams-radius-sm);
  font-size: var(--teams-font-size-md);
  font-family: var(--teams-font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.tygaLoading .teams-button-secondary {
  background: var(--teams-error);
  color: var(--teams-white);
  border-color: var(--teams-error);
}

.tygaLoading .teams-button-secondary:hover {
  background: #b71c1c;
  border-color: #b71c1c;
}

.tygaLoading .teams-button-primary {
  background: black; /* var(--teams-primary-orange); */
  color: var(--teams-white);
  border-color: black; /* var(--teams-primary-orange); */
  flex: 1;
}

.tygaLoading .teams-button-primary:hover {
  background: #cccccc; /* var(--teams-dark-orange); */
  border-color: #cccccc; /* var(--teams-dark-orange); */
}

.tygaLoading .teams-button-primary:disabled {
  background: var(--teams-disabled);
  border-color: var(--teams-disabled);
  cursor: not-allowed;
}

/* Footer Links */
.tygaLoading .teams-footer-links {
  display: flex;
  gap: var(--teams-space-lg);
  justify-content: center;
  margin-top: auto;
  padding-top: var(--teams-space-lg);
  border-top: 1px solid var(--teams-border);
}

.tygaLoading .teams-footer-link {
  color: #000000;
  text-decoration: none;
  font-size: var(--teams-font-size-sm);
  transition: color 0.2s ease;
}

.tygaLoading .teams-footer-link:hover {
  color: var(--teams-dark-blue);
  text-decoration: underline;
}


/* MOBILE ONLY - Clean, Simple Design */
@media (max-width: 800px) {
  /* Full screen container */
  .tygaLoading .teams-join-content {
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    border-radius: 0;
  }
  
  /* Hide desktop features */
  .tygaLoading .teams-advanced-settings,
  .tygaLoading .teams-background-filters {
    display: none;
  }
  
  /* Video at top - 16:9 landscape, anchored to bottom */
  .tygaLoading .teams-video-section {
    height: 250px;
    flex: none;
    position: relative;
  }
  
  .tygaLoading .teams-video-preview-container {
    height: 250px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .tygaLoading .teams-video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
  }
  
  /* Form area - scrollable if needed */
  .tygaLoading .teams-controls-section {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
  }
  
  /* Clean typography */
  .tygaLoading .teams-meeting-maintitle {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .tygaLoading .teams-meeting-title {
    font-size: 14px;
  }
  
  /* Input field */
  .tygaLoading .teams-username-section {
    margin-bottom: 15px;
  }
  
  .tygaLoading .teams-username-input {
    height: 26px;
    font-size: 16px;
    padding: 4px;
  }
  
  /* Audio options */
  .tygaLoading .teams-audio-options {
    margin-bottom: 15px;
  }
  
  .tygaLoading .teams-radio-group {
    gap: 10px;
  }
  
  .tygaLoading .teams-radio-option {
    padding: 12px;
  }
  
  .tygaLoading .teams-radio-title {
    font-size: 14px;
  }
  
  .tygaLoading .teams-radio-description {
    font-size: 12px;
  }
  
  /* Buttons */
  .tygaLoading .teams-action-buttons {
    gap: 10px;
    margin: 15px 0;
  }
  
  .tygaLoading .teams-button {
    height: 44px;
    font-size: 14px;
  }
  
  /* Footer */
  .tygaLoading .teams-footer-links {
    padding: 15px 0;
    gap: 15px;
  }
  
  .tygaLoading .teams-footer-link {
    font-size: 12px;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  .tygaLoading .teams-join-content {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }
  
  .tygaLoading .teams-audio-section {
    padding: var(--teams-space-sm);
  }
  
  .tygaLoading .teams-meeting-title {
    font-size: var(--teams-font-size-md);
  }
  
  .tygaLoading .teams-video-section {
    min-height: 250px;
  }
  
  .tygaLoading .teams-video-preview-container {
    border-radius: 0;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 800px) and (orientation: landscape) {
  .tygaLoading .teams-join-content {
    flex-direction: row;
    width: 95vw;
    height: 90vh;
  }
  
  .tygaLoading .teams-video-section {
    flex: 1;
    min-height: auto;
  }
  
  .tygaLoading .teams-audio-section {
    flex: 0 0 350px;
    overflow-y: auto;
  }
  
  .tygaLoading .teams-video-preview-container {
    border-radius: 0px;
  }
}

/* Animation Classes */
.tygaLoading .teams-fade-in {
  animation: teamsFadeIn 0.3s ease-out;
}

.tygaLoading .teams-fade-out {
  animation: teamsFadeOut 0.3s ease-out;
}

@keyframes teamsFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes teamsFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Focus States for Accessibility */
.tygaLoading .teams-username-input:focus,
.tygaLoading .teams-button:focus,
.tygaLoading .teams-icon-button:focus,
.tygaLoading .teams-settings-button:focus {
  outline: 2px solid black; /*var(--teams-primary-orange); */
  outline-offset: 2px;
}

.tygaLoading .teams-radio-option:focus-within {
  outline: 2px solid var(--teams-primary-orange);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .tygaLoading {
    --teams-border: #000000;
    --teams-text-secondary: #000000;
  }
  
  .tygaLoading .teams-radio-option {
    border-width: 2px;
  }
  
  .tygaLoading .teams-button {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .tygaLoading * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Advanced Settings Accordion */
.tygaLoading .teams-advanced-settings {
  flex-shrink: 0;
  padding: 5px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--teams-border);
  z-index: 100000;
}

.tygaLoading .teams-advanced-settings .teams-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tygaLoading .teams-advanced-settings .teams-accordion-content.expanded {
  max-height: 500px;
  overflow: visible;
}

/* Background Filters Accordion */
.tygaLoading .teams-background-filters {
  flex-shrink: 0;
  padding: 5px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--teams-border);
  z-index: 100000;
  /* flex: 1; */
  /* background: #f8f9fa; */
}

.tygaLoading .teams-background-filters .teams-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tygaLoading .teams-background-filters .teams-accordion-content.expanded {
  max-height: 500px;
  overflow: visible;
}

.tygaLoading .teams-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
  padding: var(--teams-space-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tygaLoading .teams-accordion-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tygaLoading .teams-accordion-icon {
  width: 16px;
  height: 16px;
  fill: var(--teams-text-secondary);
  transition: transform 0.2s ease;
}

.tygaLoading .teams-accordion-header.expanded .teams-accordion-icon {
  transform: rotate(180deg);
}

.tygaLoading .teams-accordion-title {
  font-size: 11px; /* var(--teams-font-size-sm); */
  font-weight: 600;
  color: var(--teams-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tygaLoading .teams-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tygaLoading .teams-accordion-content.expanded {
  max-height: 300px; /* Adjust based on content */
}

/* Device Selection Dropdowns */
.tygaLoading .teams-device-selects {
  padding: var(--teams-space-md) 0;
}

.tygaLoading .teams-device-group {
  margin-bottom: 12px;
}

.tygaLoading .teams-device-label {
  display: flex;
  align-items: center;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #484644;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tygaLoading .teams-device-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  fill: currentColor;
}

.tygaLoading .teams-device-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  font-size: 11px !important;
  color: #323130;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tygaLoading .teams-device-select:hover {
  border-color: #5059C9;
  box-shadow: 0 0 0 1px rgba(80, 89, 201, 0.1);
}

.tygaLoading .teams-device-select:focus {
  outline: none;
  border-color: #5059C9;
  box-shadow: 0 0 0 2px rgba(80, 89, 201, 0.2);
}

/* Choices.js styling for Teams dropdowns */
.tygaLoading .teams-device-select.choices {
  margin-bottom: 0;
}


.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    font-size: 11px !important;
}

/* Choices.js dropdown styling - targeting the actual HTML structure */
.tygaLoading .choices .choices__inner.teams-device-select {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 6px 12px !important; /* Balanced padding top/bottom */
  min-height: 32px !important; /* Slightly larger for better text spacing */
  font-size: 11px !important; /* Readable font size */
  transition: all 0.2s ease !important;
  width: 100% !important; /* Ensure full width */
  box-sizing: border-box !important; /* Include padding in width calculation */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* More specific targeting based on actual HTML structure */
.tygaLoading .teams-device-selects .choices .choices__inner {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  font-size: 11px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Target all Choices.js dropdowns in the Teams modal */
.tygaLoading .choices[data-type="select-one"] .choices__inner {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  font-size: 11px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Force override with highest specificity */
body.tygaLoading .teams-advanced-settings .choices .choices__inner {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  min-height: 25px !important;
  font-size: 11px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.tygaLoading .teams-device-select.choices:hover .choices__inner {
  border-color: #5059C9;
  box-shadow: 0 0 0 1px rgba(80, 89, 201, 0.1);
}

.tygaLoading .teams-device-select.choices.is-focused .choices__inner {
  border-color: #5059C9;
  box-shadow: 0 0 0 2px rgba(80, 89, 201, 0.2);
}

.tygaLoading .teams-device-select.choices .choices__list--dropdown {
  border: 1px solid #5059C9;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10002;
}

.tygaLoading .teams-device-select.choices .choices__item--choice {
  padding: 8px 12px;
  font-size: 11px;
  color: #323130;
  border-bottom: 1px solid #f3f2f1;
}

.tygaLoading .teams-device-select.choices .choices__item--choice:hover {
  background: #f8f9fa;
}

.tygaLoading .teams-device-select.choices .choices__item--choice.is-highlighted {
  background: #5059C9;
  color: white;
}

/* Background Filter Modal - Standalone (Teams Style) */
.teams-filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  font-family: var(--teams-font-family);
}

.teams-filter-modal.show {
  display: flex;
}

.teams-filter-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.teams-filter-panel {
  background: var(--teams-white);
  border-radius: var(--teams-radius-lg);
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--teams-shadow-lg);
  overflow: hidden;
}

.teams-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--teams-space-lg);
  border-bottom: 1px solid var(--teams-border);
  flex-shrink: 0;
}

.teams-filter-header h3 {
  margin: 0;
  font-size: var(--teams-font-size-lg);
  font-weight: 600;
  color: var(--teams-text-primary);
}

.teams-filter-preview-section {
  flex-shrink: 0;
  height: 300px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.teams-filter-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teams-filter-options-section {
  flex: 1;
  padding: var(--teams-space-lg);
  overflow-y: auto;
  min-height: 200px;
}

.teams-filter-footer {
  display: flex;
  gap: var(--teams-space-md);
  justify-content: flex-end;
  padding: var(--teams-space-lg);
  border-top: 1px solid var(--teams-border);
  flex-shrink: 0;
}

/* Mobile responsive for filter modal */
@media (max-width: 600px) {
  .teams-filter-panel {
    width: 95vw;
    max-height: 90vh;
  }
  
  .teams-filter-preview-section {
    height: 200px;
  }
  
  .teams-filter-options-section {
    padding: var(--teams-space-md);
  }
  
  .teams-background-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Settings Modal - Combines Advanced Settings and Background Filters */
.tygaLoading .teams-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(8px);
}

.tygaLoading .teams-settings-modal.show {
  display: flex;
}

.tygaLoading .teams-settings-modal-content {
  background: var(--teams-white);
  border-radius: var(--teams-radius-lg);
  width: 700px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.tygaLoading .teams-settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--teams-space-lg);
  border-bottom: 1px solid var(--teams-border);
  flex-shrink: 0;
  background: #f8f9fa;
}

.tygaLoading .teams-settings-modal-header h3 {
  margin: 0;
  font-size: var(--teams-font-size-xl);
  font-weight: 600;
  color: var(--teams-text-primary);
  display: flex;
  align-items: center;
  gap: var(--teams-space-sm);
}

.tygaLoading .teams-settings-modal-header svg {
  width: 24px;
  height: 24px;
  fill: var(--teams-primary-orange);
}

.tygaLoading .teams-settings-modal-close {
  background: none;
  border: none;
  color: var(--teams-text-secondary);
  cursor: pointer;
  padding: var(--teams-space-sm);
  border-radius: var(--teams-radius-sm);
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tygaLoading .teams-settings-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--teams-text-primary);
}

.tygaLoading .teams-settings-modal-close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.tygaLoading .teams-settings-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--teams-space-lg);
}

.tygaLoading .teams-settings-section {
  margin-bottom: var(--teams-space-xl);
}

.tygaLoading .teams-settings-section:last-child {
  margin-bottom: 0;
}

.tygaLoading .teams-settings-section-title {
  font-size: var(--teams-font-size-lg);
  font-weight: 600;
  color: var(--teams-text-primary);
  margin: 0 0 var(--teams-space-md) 0;
  padding-bottom: var(--teams-space-sm);
  border-bottom: 2px solid var(--teams-primary-orange);
}

/* Background Filter Panel Styles */
.teams-background-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.teams-background-content {
  background: var(--teams-white);
  border-radius: var(--teams-radius-lg);
  padding: var(--teams-space-xl);
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--teams-shadow-lg);
}

.teams-background-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--teams-space-lg);
  padding-bottom: var(--teams-space-md);
  border-bottom: 1px solid var(--teams-border);
}

.teams-background-header h3 {
  margin: 0;
  font-size: var(--teams-font-size-lg);
  font-weight: 600;
  color: var(--teams-text-primary);
}

.teams-background-close {
  background: none;
  border: none;
  color: var(--teams-text-secondary);
  cursor: pointer;
  padding: var(--teams-space-xs);
  border-radius: var(--teams-radius-sm);
  transition: background-color 0.2s ease;
}

.teams-background-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.teams-background-close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.teams-background-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--teams-space-md);
  margin-bottom: var(--teams-space-xl);
}

.teams-background-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--teams-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
  overflow: hidden;
  position: relative;
}

.teams-background-option:hover {
  border-color: var(--teams-primary-orange);
  background: rgba(80, 89, 201, 0.05);
}

.teams-background-option.selected {
  border-color: var(--teams-primary-orange);
  background: rgba(80, 89, 201, 0.1);
}

.teams-background-preview {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e1e5e9;
}

.teams-background-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teams-background-none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--teams-white);
  border: 2px dashed var(--teams-border);
  border-radius: var(--teams-radius-sm);
}

.teams-background-none svg {
  width: 24px;
  height: 24px;
  color: var(--teams-text-secondary);
}

.teams-background-blur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.teams-blur-circles {
  display: flex;
  gap: 8px;
}

.teams-blur-circle {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  filter: blur(2px);
}

.teams-background-label {
  display: none;
}

.teams-background-footer {
  display: flex;
  gap: var(--teams-space-md);
  justify-content: flex-end;
  padding-top: var(--teams-space-lg);
  border-top: 1px solid var(--teams-border);
}

/* Mobile responsive for settings modal */
@media (max-width: 600px) {
  .tygaLoading .teams-settings-floating-button {
    top: var(--teams-space-md);
    right: var(--teams-space-md);
    width: 44px;
    height: 44px;
  }

  .tygaLoading .teams-settings-floating-button svg {
    width: 20px;
    height: 20px;
  }

  .tygaLoading .teams-settings-modal-content {
    width: 95vw;
    max-height: 90vh;
  }

  .tygaLoading .teams-settings-modal-body {
    padding: var(--teams-space-md);
  }

  .tygaLoading .teams-settings-section {
    margin-bottom: var(--teams-space-lg);
  }
}

/* Mobile responsive for background panel */
@media (max-width: 600px) {
  .tygaLoading .teams-join-content {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }

  .tygaLoading .teams-audio-section {
    padding: var(--teams-space-sm);
  }

  .tygaLoading .teams-meeting-title {
    font-size: var(--teams-font-size-md);
  }

  .tygaLoading .teams-video-section {
    min-height: 250px;
  }

  .tygaLoading .teams-video-preview-container {
    border-radius: 0;
  }

  .teams-background-content {
    width: 95vw;
    padding: var(--teams-space-lg);
  }
  
  .teams-background-options {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--teams-space-sm);
  }
  
  .teams-background-preview {
    width: 80px;
    height: 48px;
  }
  
  .teams-background-footer {
    flex-direction: column;
  }
}

/* Print Styles */
@media print {
  .tygaLoading .teams-join-modal {
    display: none !important;
  }
}

/* Hide phone audio option since it's not implemented */
.tygaLoading .teams-radio-option[data-option="phone"] {
  display: none !important;
}