@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box; /* Global box-sizing */
}

html {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%; /* Added */
  min-height: 100%; /* Added */
  max-width: 100vw; /* Explicit viewport width constraint */
  overflow: hidden !important;
  overflow-x: hidden !important; /* Explicitly hide horizontal scroll */
  overscroll-behavior: contain !important; /* Affects x and y, should prevent pull-down */
  touch-action: none; /* Prevent default touch actions on html */
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box; /* Keep from previous */
  max-width: 100%; /* Keep from previous */
  margin: 0; /* Added */
  padding: 0; /* Added */
}

body {
  width: 100%;
  height: 100%;
  min-width: 100%; /* Added */
  min-height: 100%; /* Added */
  max-width: 100vw; /* Explicit viewport width constraint */
  margin: 0;
  overflow: hidden !important;
  overflow-x: hidden !important; /* Explicitly hide horizontal scroll */
  background-color: #111;
  color: white;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain !important; /* Reinforce */
  touch-action: none; /* Prevent default touch actions on body */
  box-sizing: border-box; /* Keep from previous */
  max-width: 100%; /* Keep from previous */
  word-break: break-word; /* Help prevent text overflow */
}

input {
  margin: auto;
  /* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}

canvas {
  width: 100%;
  height: 100%; /* Make canvas fill the aspect-ratio-constrained .canvas-container */
  display: block; 
  /* max-height: 100%; /* Removed as height: 100% of parent with AR should suffice */
}

#main-container {
  display: flex;
  width: 100%; /* Fill body */
  height: 100%; /* Fill body */
  box-sizing: border-box;
  overflow: hidden; /* Crucial: prevent content from making main-container scroll */
}

#peer-list-container {
  width: 20%;
  height: 100%;
  transition: width 0.3s;
  flex-direction: column;
  background-color: #f0f0f0;
  display: none;
  padding: 10px;
  color: #333333;
  box-sizing: border-box; /* Good practice */
}

#peer-list-container.visible {
  display: flex;
}

#peer-list-container [type="text"] {
  width: calc(100% - 20px); 
  box-sizing: border-box; 
  padding: 10px;
  margin: 0px; 
}

.peer-list-container * {
  color: inherit; /* Ensure all children inherit the color */
}

#peer-list-container-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:10px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.search-box {
  flex-shrink: 0;
  padding: 10px;
  background-color: #d0d0d0;
}

.peer-list {
  flex-grow: 1;
  overflow-y: auto; /* This element is meant to scroll vertically */
  padding: 10px; 
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-y; /* Explicitly enable vertical panning */
  box-sizing: border-box;
}

.peer-list ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ccc;
}

.peer-list li {
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
}

.peer_item{
  display: flex;
  align-items: center;
}

.peer_item_icon {
  flex-shrink: 0;
}

.peer_item_text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 20px;
}

/* --- Base Grid Container and Item Styles --- */
#grid-container {
  display: grid;
  width: 100%;
  height: 100%; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 350px)); 
  grid-auto-rows: minmax(150px, 220px); /* Capped max height */
  gap: 10px; 
  padding: 16px; 
  box-sizing: border-box;
  justify-items: center; 
  align-items: center;
  overflow: auto; /* This element is meant to scroll its content (both axes if needed) */
  position: relative; 
  transition: width 0.3s;
  flex-grow: 1;
  touch-action: pan-x pan-y; /* Explicitly enable panning */
  -webkit-overflow-scrolling: touch; 
}

.grid-item {
  width: 100%;
  height: 100%; /* Restoring to state after border re-add */
  min-height: 150px; /* Restoring to state after border re-add */
  /* aspect-ratio: 16 / 9; Removing this */
  /* max-width: 350px; Removing this */
  display: flex;
  justify-content: center; 
  align-items: center;    
  overflow: hidden;
  background-color: #111; 
  border-radius: 8px;
  border: 1px solid #333; 
  touch-action: manipulation;
}

.grid-item-pinned {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Host camera frame rendered in the bottom right corner (Desktop/Default) */
.host {
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;       
  width: 100%;    
  z-index: 100;   
  pointer-events: none; 
  display: flex; 
  flex-direction: column; 
  align-items: center; /* Centers children horizontally */
  justify-content: flex-end; /* Align children (controls, self-view, status) to the bottom */
  padding: 0 16px 16px 16px; 
  box-sizing: border-box;
}

.host h4 {
  pointer-events: none;
  user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
}

/* CSS for auto-hiding controls */
@keyframes fadeOutControlsFinal {
  from { opacity: 0.2; } /* Changed from 0.15 to match .fading state */
  to   { opacity: 0; }
}

.host .controls {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  pointer-events: auto; /* This div and its children are interactive */
  background-color: rgba(13, 19, 31, 0.85); 
  backdrop-filter: blur(8px); 
  border-radius: 9999px; /* Changed to a large value for pill shape */
  padding: 0.25rem; /* Changed from 0.25rem 0.75rem to be uniform */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 
  box-sizing: border-box; 
  display: flex; 
  flex-direction: column; /* Stack button strip & sim message */
  align-items: center;    /* Center this stack horizontally */
  justify-content: flex-end; /* Changed from flex-start to align content to bottom */
  margin-top: 8px; 
  width: fit-content; /* Changed from width: 100% */
  max-height: 15vh; /* Added max-height for consistency */
  position: relative; /* For z-index stacking context */
  z-index: 2;         /* Ensure controls are above self-view overlay */
}

.host .controls.fading {
  opacity: 0.2; 
}

.host .controls.hidden {
  animation: fadeOutControlsFinal 2.5s ease-out forwards; 
  pointer-events: none; 
  /* opacity: 0; REMOVED - Rely on animation forwards fill-mode */
}

/* --- DESKTOP: Specific layouts for 1-8 peers --- */
/* (These apply on screens > 600px OR if .force-desktop-grid is active on mobile and not overridden by more specific mobile rules) */

#grid-container[data-peers="0"] { /* Host only */
  grid-template-columns: 1fr !important; 
  grid-auto-rows: minmax(150px, calc(100vh - 32px - 80px)); /* UNCHANGED - Retains calc for full height */
}

#grid-container[data-peers="1"] { /* 1 peer (2 attendees total) */
  grid-template-columns: 1fr !important; 
  grid-auto-rows: minmax(150px, calc(100vh - 32px - 80px)); /* UNCHANGED */
}

#grid-container[data-peers="2"] { /* 2 peers (3 attendees total) */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 240px); 
  justify-content: center; /* Added to center the two columns if viewport is wider */
}

#grid-container[data-peers="3"] { /* 3 peers (4 attendees total) - Pyramid */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-template-rows: repeat(2, minmax(150px, 200px)); 
  grid-template-areas: 
    "peer1 peer2"
    "peer3 peer3";
  justify-content: center; /* Added to center the grid area if viewport is wider */
  /* Note: items within pyramid areas also need to be considered for max width */
  /* .grid-item:nth-child(3) for peer3 might need max-width if it spans two 350px columns */
}
#grid-container[data-peers="3"] .grid-item:nth-child(1) { grid-area: peer1; }
#grid-container[data-peers="3"] .grid-item:nth-child(2) { grid-area: peer2; }
#grid-container[data-peers="3"] .grid-item:nth-child(3) { 
  grid-area: peer3;
  max-width: 75%; 
  justify-self: center;
}

#grid-container[data-peers="4"] { /* 4 peers (5 attendees total) - 2x2 */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 200px); 
  justify-content: center; /* Added */
}

#grid-container[data-peers="5"] { /* 5 peers (6 attendees total) - for 2x3 grid structure */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 180px); 
  justify-content: center; /* Added */
}

#grid-container[data-peers="6"] { /* 6 peers (7 attendees total) - 2x3 full */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 180px); 
  justify-content: center; /* Added */
}

#grid-container[data-peers="7"] { /* 7 peers (8 attendees total) - for 2x4 grid structure */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 170px); 
  justify-content: center; /* Added */
}

#grid-container[data-peers="8"] { /* 8 peers (9 attendees total) - 2x4 full */
  grid-template-columns: repeat(2, minmax(auto, 350px)); /* Changed from repeat(2, 1fr) */
  grid-auto-rows: minmax(150px, 170px); 
  justify-content: center; /* Added */
}

/* --- DESKTOP: Layout for 9-20 peers --- */
/* Corrected selector for 10-19 peers */
#grid-container[data-peers="9"],
#grid-container[data-peers="10"],
#grid-container[data-peers="11"],
#grid-container[data-peers="12"],
#grid-container[data-peers="13"],
#grid-container[data-peers="14"],
#grid-container[data-peers="15"],
#grid-container[data-peers="16"],
#grid-container[data-peers="17"],
#grid-container[data-peers="18"],
#grid-container[data-peers="19"],
#grid-container[data-peers="20"] {
  grid-template-columns: repeat(auto-fit, minmax(280px, 350px)); 
  grid-auto-rows: minmax(150px, 170px); /* Capped max height */
}


/* --- MOBILE OVERRIDES (max-width: 600px) --- */
@media (max-width: 600px) {
  /* Default mobile stacking (Force Desktop Grid OFF) */
  #grid-container:not(.force-desktop-grid) {
    grid-template-columns: 1fr !important; 
    grid-auto-rows: minmax(180px, auto) !important; 
    padding: 8px !important; 
    gap: 8px !important; 
  }

  /* Reset pyramid areas for default mobile stacking */
  #grid-container[data-peers="3"]:not(.force-desktop-grid) {
    grid-template-areas: unset !important;
  }
  #grid-container[data-peers="3"]:not(.force-desktop-grid) .grid-item {
    grid-area: auto !important;
    max-width: 100% !important; 
    justify-self: stretch !important;
  }

  /* Ensure other specific peer counts stack correctly in default mobile mode */
  #grid-container[data-peers="1"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="2"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="4"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="5"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="6"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="7"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="8"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="9"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers^="1"]:not(.force-desktop-grid) .grid-item,
  #grid-container[data-peers="20"]:not(.force-desktop-grid) .grid-item {
     max-width: 100% !important;
     height: auto !important; 
  }
  
  /* Fallback for .force-desktop-grid on mobile (toggle ON).
     Applies for data-peers = 0, 1, 2 (stacking them).
     Higher peer counts (3+) will be caught by more specific rules below. */
  #grid-container.force-desktop-grid {
    grid-template-columns: 1fr !important; 
    grid-auto-rows: minmax(180px, auto) !important;   
    padding: 8px !important;
    gap: 8px !important;
  }

  /* Specific layouts for .force-desktop-grid on mobile when peer count is 3+ */
  #grid-container.force-desktop-grid[data-peers="3"] { /* 4 attendees total - Pyramid */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, minmax(150px, calc((100vh - 32px - 10px - 80px) / 2))) !important;
    grid-template-areas: 
      "peer1 peer2"
      "peer3 peer3" !important;
  }
  
  #grid-container.force-desktop-grid[data-peers="4"] { /* 5 attendees - 2x2 */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 10px - 80px) / 2)) !important;
  }

  #grid-container.force-desktop-grid[data-peers="5"] { /* 6 attendees - for 2x3 */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 20px - 80px) / 3)) !important;
  }
  
  #grid-container.force-desktop-grid[data-peers="6"] { /* 7 attendees - 2x3 */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 20px - 80px) / 3)) !important; 
  }

  #grid-container.force-desktop-grid[data-peers="7"] { /* 8 attendees - for 2x4 */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 30px - 80px) / 4)) !important;
  }

  #grid-container.force-desktop-grid[data-peers="8"] { /* 9 attendees - 2x4 */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 30px - 80px) / 4)) !important; 
  }

  /* Specific override for data-peers=9 to 20 in forced mobile mode */
  #grid-container.force-desktop-grid[data-peers="9"],
  #grid-container.force-desktop-grid[data-peers="10"],
  #grid-container.force-desktop-grid[data-peers="11"],
  #grid-container.force-desktop-grid[data-peers="12"],
  #grid-container.force-desktop-grid[data-peers="13"],
  #grid-container.force-desktop-grid[data-peers="14"],
  #grid-container.force-desktop-grid[data-peers="15"],
  #grid-container.force-desktop-grid[data-peers="16"],
  #grid-container.force-desktop-grid[data-peers="17"],
  #grid-container.force-desktop-grid[data-peers="18"],
  #grid-container.force-desktop-grid[data-peers="19"],
  #grid-container.force-desktop-grid[data-peers="20"] {
    grid-template-columns: repeat(2, 1fr) !important; 
    grid-auto-rows: minmax(150px, calc((100vh - 32px - 30px - 80px) / 4)) !important;
  }
  
  .host { /* Adjust host preview on mobile */
    width: 25% !important;
    max-width: 120px !important; 
    bottom: 8px !important; 
    right: 8px !important; 
    z-index: 10; /* Ensure consistency */
  }

  /* Hide the top bar on mobile screens */
  /* .top-bar { display: none !important; } MOVED to general styles */

  /* Mobile-specific styling for the controls bar */
  .host .controls {
    position: fixed !important; 
    top: auto !important; 
    bottom: 0 !important;
    width: fit-content !important; /* Bar is as wide as its content */
    left: 50% !important;          /* Position its left edge at the center */
    transform: translateX(-50%) !important; /* Pull it back by half its own width */
    height: auto !important; /* Set height to auto for content-based sizing */
    max-height: 15vh !important; /* Added max-height to constrain adaptive height */
    padding: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    z-index: 101 !important;
    background-color: rgba(13, 19, 31, 0.85) !important; 
    box-sizing: border-box !important; 

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center content horizontally */
    justify-content: flex-end !important; /* Align content (button strip stack) to the bottom */
    overflow: hidden !important; /* Clip content if it tries to overflow the explicit height */
  }
} /* End of @media (max-width: 600px) */

/* Hide the top bar on all screen sizes - Rule moved from mobile media query */
.top-bar {
  display: none !important;
}

/* Style for the simulation info message */
.simulation-info-message {
  color: #ffcc00; /* A warning-like yellow color */
  text-align: center;
  margin-top: 10px;
  font-size: 0.9em;
}

/* Optional: Styling for .test-button if you want to make them visually distinct */
/*
.test-button {
  border: 1px dashed orange !important;
}
*/

/* Rule to hide development-only buttons */
/*
.dev-tool-button {
  display: none !important;
}
*/

/* Style for video control buttons - harmonized with global.css sizing */
.video-control-button {
  touch-action: manipulation;
  flex-shrink: 0; 
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  position: relative; 
  width: 2.75rem !important;  /* Adjusted size */
  height: 2.75rem !important; /* Adjusted size */
  min-width: 2.75rem; /* Adjusted size */
  max-width: 2.75rem; /* Adjusted size */
  padding: 0 !important;     
  border: none; 
  overflow: hidden; 
  line-height: 1; 
  box-sizing: border-box !important; 
}

.video-control-button svg {
  width: 1.25rem; /* Adjusted SVG size */
  height: 1.25rem; /* Adjusted SVG size */
  display: block; 
}

/* Assuming .tooltip is styled elsewhere or needs to be added. 
   If tooltips are causing reflow, they should be styled like this: */
.video-control-button .tooltip {
  position: absolute;
  bottom: 100%; 
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px; 
  padding: 4px 8px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100; 
}

.video-control-button:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Styling for the container of video control buttons within the call UI */
.in-call-video-controls-container { 
  display: flex;
  flex-wrap: nowrap; 
  justify-content: flex-start; 
  align-items: center;
  gap: 8px; 
  width: fit-content;      /* Make the container only as wide as its content */
  max-width: 100%;         /* Prevent overflow if content is wider than parent */
  overflow-x: auto; 
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; 
  padding-top: 8px;        /* Changed from 4px to match L/R/B padding */
  padding-bottom: 8px; 
  padding-left: 8px;       /* Internal padding for the tray */
  padding-right: 8px;      /* Internal padding for the tray */
  box-sizing: border-box;  /* Include padding in width calculation */
  scrollbar-width: thin; 
  scrollbar-color: rgba(255,255,255,0.3) transparent; 
}

.in-call-video-controls-container::-webkit-scrollbar {
  height: 5px;
}

.in-call-video-controls-container::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.3);
  border-radius: 10px;
}

.hidden {
  display: none
}

.self-camera {
  width: 100%;
  height: 100%;
}

.floating-name {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 0;
  background-color: black;
  color: white;
}

.controls {
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
}

.device-selector {
  width: 200px;
}

.device-selector-wrapper {
  margin-bottom: 20px;
}

:disabled {
  cursor: default;
  background-color: dimgrey !important;
  color: linen !important;
  opacity: 1 !important;
}

select {
  color: black;
}

.canvas-container {
  position: relative;
  /* width: 100%; Removed to be driven by aspect ratio or fit */
  /* height: 100%; Removed to be driven by aspect ratio or fit */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  aspect-ratio: 16 / 9; /* Enforce 16:9 aspect ratio */
  max-width: 100%;      /* Ensure it fits within parent .grid-item width */
  max-height: 100%;     /* Ensure it fits within parent .grid-item height */
  width: auto;          /* Allow flexible sizing based on constraints and AR */
  height: auto;         /* Allow flexible sizing based on constraints and AR */
  /* overflow: hidden; /* Optional: if content might spill */
}

canvas { /* Styles for the actual canvas element */
  width: 100%;
  height: 100%; /* Make canvas fill the aspect-ratio-constrained .canvas-container */
  display: block; 
  /* max-height: 100%; /* Removed as height: 100% of parent with AR should suffice */
}

.pin-icon {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  opacity: 0.6;
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
  line-height: 1; /* Adjust as needed */
}

.grid-item:hover .pin-icon {
  visibility: visible;
}

/* Styles for the self-view area wrapper from Host.rs */
.self-view-area-wrapper {
  position: absolute; /* Take it out of the flex flow */
  bottom: 16px;       /* Position relative to .host padding-bottom */
  right: 16px;        /* Position relative to .host padding-right */
  min-height: 120px; 
  width: 160px;    
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  pointer-events: auto; 
  z-index: 1;         /* Below .controls if they overlap */
  /* background-color: rgba(0, 0, 255, 0.1); /* Blue tint for testing overlay */
}

/* Ensure the video element within the wrapper behaves well */
.self-view-area-wrapper .self-camera {
  max-width: 100%; /* Don't exceed wrapper width */
  max-height: calc(100% - 30px); /* Example: leave space for device selectors if they are ~30px tall */
  object-fit: cover; /* Or contain, depending on desired video scaling */
}

/* Minimal styling for DeviceSelector if needed within this context */
.self-view-area-wrapper .device-selector-wrapper {
  width: 100%; /* Make selectors take full width of the wrapper */
  margin-top: 4px; /* Space between video and selectors */
}

/* Styles for the Join Meeting Screen - Added for iOS Safari Support Patch */
.famechat-join-screen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative; /* Establish a stacking context */
  z-index: 1; /* Ensure it's above default static content if any layering confusion */
  pointer-events: auto; /* Explicitly ensure it and its children can receive events */
  /* Inherits background and text color from body via #main-container if not overridden by Tailwind on #main-container */
}

.famechat-join-message-area {
  text-align: center;
  margin-bottom: 2rem; /* 32px */
  color: inherit; /* Ensure text color is inherited if body has it set */
}

.famechat-join-message-area h1 {
  font-size: 2.25rem; /* Tailwind text-4xl approx */
  font-weight: bold;
  margin-bottom: 1rem; /* 16px */
  color: inherit;
}

.famechat-join-message-area p {
  font-size: 1.125rem; /* Tailwind text-lg approx */
  margin-bottom: 1rem;
  color: inherit;
}

.famechat-join-button {
  background-color: #4CAF50; /* A clear green, can be themed later */
  color: white;
  border: none;
  padding: 1rem 2rem; /* 16px 32px */
  font-size: 1.25rem; /* Tailwind text-xl approx */
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.famechat-join-button:hover {
  background-color: #45a049; /* Darker green */
}

.famechat-join-button:active {
  background-color: #3e8e41; /* Even darker green */
  transform: translateY(1px);
}

/* Ensure error message within join screen is visible and styled */
.famechat-join-message-area .error-message {
  color: #ff6b6b; /* A common error red */
  margin-top: 1rem;
  font-weight: bold;
}
/* End of Join Meeting Screen Styles */

/* Styles for the new Join Meeting screen wrapper */
.join-screen-fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Wrapper itself is non-interactive */
  z-index: 200; /* High z-index to ensure it's a top-level container for this view */
  background-color: #111; /* Match body background */
}

.join-screen-fixed-wrapper > .famechat-join-screen-container {
  pointer-events: auto; /* Make the actual content area interactive */
  /* .famechat-join-screen-container should retain its existing flex properties 
     for centering its own children (message area and button) */
}

/* iOS Safari touch-action fix for join button specifically */
.join-screen-fixed-wrapper,
.famechat-join-screen-container,
.famechat-join-button {
  /* Override parent touch-action for these specific elements */
  touch-action: auto !important;
  -webkit-touch-callout: none !important;
}

/* Additional iOS Safari workarounds */
.famechat-join-button {
  /* iOS needs these for proper button interaction */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  
  /* Ensure button is in its own layer for iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Force hardware acceleration */
  will-change: transform;
  
  /* iOS Safari click event fix */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* Ensure the button is truly interactive */
  pointer-events: auto !important;
  position: relative;
  z-index: 9999;
}

/* iOS-specific touch target enhancement */
@supports (-webkit-overflow-scrolling: touch) {
  .famechat-join-button {
    /* Invisible touch target extension for iOS */
    position: relative;
  }
  
  .famechat-join-button::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    pointer-events: none; /* Important: don't block the button itself */
  }
}

/* Force iOS to recognize this as a clickable element */
@media (pointer: coarse) {
  .famechat-join-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}