/* ─────────── GLOBAL SAFETY NET ─────────── */
html,body{
  max-width:100%;
  overflow-x:hidden;          /* banish horizontal scroll */
}

#prejoinModal {
    transition: opacity 0.3s ease;
}
#prejoinModal.hidden {
    opacity: 0;
    pointer-events: none;
}

       .video-tile {
            aspect-ratio: 16/9;
            transition: all 0.2s ease;
        }
        .single-participant {
            width: 90vw;
            max-width: 1000px;
            height: calc(90vw * 9/16);
            max-height: calc(1000px * 9/16);
        }
        .grid-participant {
            width: 100%;
        }
        .active-speaker {
            box-shadow: 0 0 0 4px #3b82f6;
        }
        .raise-hand {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
		
		button#startScreenButton i.fa-window-maximize { color:#10b981 }   /* teal */

/* Add to your style.css */
.transcript-entry {
  transition: all 0.3s ease;
}

.transcript-entry:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

#transcriptPanel {
  backdrop-filter: blur(10px);
}

#liveCaptions {
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Speaking indicator for self */
#mic_me.animate-pulse {
  animation: pulse 1.5s infinite;
  color: #10B981 !important; /* Green color */
}

/* Hand raised for self */
#hand_me.text-yellow-400 {
  color: #F59E0B !important; /* Yellow color */
  animation: wave 1s infinite;
}

/* Pulse animation */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Wave animation */
@keyframes wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.hand-raised {
  animation: wave 1s infinite;
  color: #f59e0b !important;
}

.hidden {
  display: none;
}

.animate-spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.prose-invert ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
}

.prose-invert li {
  margin-bottom: 0.5rem;
}

/* Chat specific styles */
#chatMessages {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937;
}

#chatMessages::-webkit-scrollbar {
  width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
  background: #1f2937;
}

#chatMessages::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 3px;
}

#chatInput {
  min-height: 40px;
  max-height: 120px;
}



/* For main tiles */
#participantsList > div {
  position: relative;
  overflow: visible; /* Allow menu to show outside */
}

/* For search list items */
.participant-item {
  position: relative;
}

/* Menu styling for both */
.participant-menu {
  position: absolute;
  background: #1F2937;
  border: 1px solid #374151;
  /*border-radius: 0.375rem;*/
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 9999;
  min-width: 160px;
}

#participantsList > div .participant-menu{
   /* centred horizontally & vertically inside the tile */
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

/* Search list-specific menu positioning */
.participant-item .participant-menu {
  right: 0;
  top: 100%;
}


  /* participant tile skeleton */
  .participant-tile{
    @apply relative flex items-center justify-center rounded-lg overflow-hidden
           w-full h-48 sm:h-56 lg:h-64;          /* keeps your current sizing */
    background:linear-gradient(135deg,#0ea5e9,#2563eb); /* blue gradient */
  }

  /* centre portrait */
  #participantsList img{
    width:120px !important;                /* tweak to taste */
    height:120px !important;
    object-fit:cover;
    border-radius:50% !important;      /* circle */
    box-shadow:0 0 0 3px rgba(255,255,255,.15);
  }
  
  
  
  
  
    /* participants grid takes 100 % of the video area and never scrolls  */
  #participantsList{
    display:grid;                /* we’ll control the columns in JS   */
    gap:1rem;                    /* same as Tailwind’s gap-4           */
    width:100%;
    height:100%;
    overflow:hidden;             /* no scrollbars                      */
    grid-auto-rows:1fr;          /* every row stretches equally        */
  }
  /* column presets, switched by JS */
  #participantsList.cols-1{grid-template-columns:repeat(1,1fr)}
  #participantsList.cols-2{grid-template-columns:repeat(2,1fr)}
  #participantsList.cols-3{grid-template-columns:repeat(3,1fr)}
  #participantsList.cols-4{grid-template-columns:repeat(4,1fr)}

  /* mobile override: never more than 2 cols below 768 px */
  @media (max-width:767px){
    #participantsList.cols-3,
    #participantsList.cols-4{grid-template-columns:repeat(2,1fr)}
  }
  
  /* ---------- single-tile mode ---------- */
#participantsList.single-grid{         /* center the grid itself   */
  place-content:center;
}

.single-tile{                          /* give the lone tile limits */
  width: 90vw;                         /* never wider than 90 %     */
  max-width: 1280px;                   /* cap on large desktops     */
  max-height: calc(100vh - 12rem);     /* 12 rem ≈ header+footer    */
}
  
  
  
  
  /* ---------- scrolling title when it overflows ---------- */
@keyframes marquee {
  0%   { transform: translateX(0);         }
  100% { transform: translateX(-100%);     }
}

.marquee {
  animation: marquee 15s linear infinite;
  /* a little breathing room so text leaves fully before looping */
  padding-right: 2rem;
}

/* Share Button Styles */
#shareDropdown {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Social Icons */
.fab, .fas {
  transition: transform 0.2s;
}


      button#startScreenButton i.fa-window-maximize { color:#10b981 }
	  
	    .participant-tile .video-container {
	  border: 1px solid #ffffff !important;
	  border-radius: 5px !important;
  }

      /* Mobile-specific styles */
      @media (max-width: 1024px) {
	  
	  #shareDropdown {
    position: fixed;
    bottom: 70px; /* Above mobile controls */
    right: 1rem;
    left: auto;
    width: auto;
    min-width: 200px;
  }
	  
	  .main-tile-div {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	  }
	  
        /* Hide desktop sidebar */
        aside {
          display: none;
        }
        
        /* Adjust header for mobile */
        header {
          padding: 0.75rem 1rem;
        }
        
        #meetingTitleWrapper {
          max-width: 60vw;
        }
		
		/* nothing wider than the phone */
  #videoGrid,
  #participantsList,
  .participant-tile,
  .mobile-bottom-tabs{
    max-width:100vw;
  }
        
        /* Make video grid full width */
        #videoGrid {
          padding: 0.5rem;
        }
        
        /* Mobile bottom tabs */
        .mobile-bottom-tabs {
          display: flex;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background: #1f2937;
          border-top: 1px solid #374151;
          z-index: 100;
		  width:100vw;              /* avoids the “100% + padding” overflow */
        }
        
        .mobile-tab {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 0;
          font-size: 0.75rem;
          color: #9ca3af;
        }
        
        .mobile-tab.active {
          color: #06b6d4;
        }
        
        .mobile-tab i {
          font-size: 1.25rem;
          margin-bottom: 0.25rem;
        }
        
        /* Hide desktop footer on mobile */
        footer {
          display: none;
        }
        
        /* Adjust chat/transcript panels for mobile */
        #chatInterface, #transcriptPanel, #searchParticipantsPanel {
          width: 100%;
          height: 70vh;
          bottom: 60px;
          border-radius: 0;
          border-top-left-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
        }
		
		/* side / pop-up panels: stay inside the phone even on 320 px devices */
  #chatInterface,
  #transcriptPanel,
  #searchParticipantsPanel,
  #mobileMoreMenu{
    max-width:calc(100vw - 1.5rem); /* keeps the 0-.75 rem side margin you use */
    right:0!important;
    left:auto!important;
  }

  /* Adjust video tiles for mobile */
  .participant-tile {
    height: auto;
    min-height: 150px;
    width: calc(50% - 0.5rem); /* 2 tiles per row with gap */
    aspect-ratio: 16/9; /* maintain aspect ratio */
  }

  /* keep overlays aligned with the new inner edge */
  .participant-tile .tile-label { left:1rem; }
  .participant-tile .tile-icons { right:1rem; }
  
  /* Mobile grid layout */
  #participantsList {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 180px); /* account for header and controls */
    overflow-y: auto; /* allow vertical scrolling */
  }
        
        #participantsList.cols-1,
        #participantsList.cols-3,
        #participantsList.cols-4 {
          grid-template-columns: repeat(1, 1fr);
        }
        
/* Single tile mode for mobile */
  /*.single-tile {
    width: 100%;
    height: calc(100vh - 180px);
    margin: 0 auto;
  }*/
  
  #participantsList.single-grid .single-tile {
	  width: 100%;
	  height: calc(100vh - 180px);
	  margin: 0 auto;
	}

  /* Ensure tiles don't grow too large */
  #participantsList.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Remove any hidden states for tiles */
  #participantsList > div {
    display: block !important;
  }
        
        /* More compact controls */
        #mobileControls {
          padding: 0.5rem;
        }
        
        /* Ellipsis menu for extra controls */
        .mobile-ellipsis-menu {
          position: absolute;
          bottom: 60px;
          right: 1rem;
          background: #1f2937;
          border-radius: 0.5rem;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          z-index: 110;
          padding: 0.5rem 0;
          min-width: 180px;
        }
        
        .mobile-ellipsis-menu button {
          width: 100%;
          text-align: left;
          padding: 0.75rem 1rem;
          color: #f3f4f6;
        }
        
        .mobile-ellipsis-menu button:hover {
          background: #374151;
        }
      }
	 
/* Mobile grid adjustments */
@media (max-width: 767px) {
  #participantsList {
    grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns */
    gap: 0.25rem !important; /* Reduce gap between tiles */
    padding: 0.25rem !important; /* Reduce padding */
  }
  
  .participant-tile {
    width: 100% !important; /* Fill available space */
    min-width: 0; /* Allow tiles to shrink */
    margin: 0 !important;
  }
  
  /* Ensure the grid container doesn't exceed viewport */
  #videoGrid {
    padding: 0.25rem !important;
    box-sizing: border-box;
  }
  
  /* Adjust tile content to fit better */
	#participantsList img {
	  width: 60px !important;
	  height: 60px !important;
	  margin-top:1em !important;
	}

}

  /* Adjust tile icons container */
  .tile-icons {
    top: 0.5rem !important;
    right: 0.5rem !important;
    gap: 0.25rem !important;
    flex-direction: row !important;
  }

  /* Make sure all tile icons are visible */
  .tile-icons .tile-icon-show {
    font-size: 0.9rem !important;
    color: white !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.25rem;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    /*display: flex !important;
    align-items: center;*/
    justify-content: center;
  }
  
.tile-label {
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  max-width: calc(100% - 1rem);
  box-sizing: border-box;
}

/* Mobile - single tile full width */
@media (max-width: 767px) {
  .single-tile .tile-label {
    width: calc(100% - 1rem);
    left: 0.5rem;
    right: 0.5rem;
  }
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .tile-label {
    padding: 0.5rem;
    bottom: 1rem;
  }
}

/*BORDER RADIUS*/
/* Add border radius to all video tiles */
.participant-tile {
  border-radius: 10px !important;
}

/* Ensure the video element inside also has rounded corners */
.participant-tile video {
  border-radius: 10px !important;
}

/* If you have any placeholder/fallback content */
.participant-tile .video-placeholder {
  border-radius: 10px !important;
}

/* For the single participant view */
.single-tile {
  border-radius: 10px !important;
}
/*END BORDER RADIUS*/


/*Styling for raised hand*/
#raiseHandCount, #mobileRaiseHandCount {
  transition: all 0.2s ease;
}

#raiseHandCount.hidden, #mobileRaiseHandCount.hidden {
  opacity: 0;
  transform: scale(0);
}

#raiseHandCount:not(.hidden), #mobileRaiseHandCount:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}
/*Styling for raised hand*/

#raisedHandFilterBtn.active {
  color: #f59e0b; /* yellow-400 */
}

/* ───── Make the lone tile span the full width on phones ───── */
@media (max-width: 767px) {

  /* 1 × 1 grid when there is only one tile */
  #participantsList > .participant-tile:only-child          { width: 100% !important; }
  #participantsList:has(> .participant-tile:only-child)     { grid-template-columns: 1fr !important; }

  /* keep the name‐label centred */
  #participantsList > .participant-tile:only-child .tile-label {
    left: .5rem; right: .5rem;
  }
}

.mobile-bottom-tabs {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-bottom-tabs.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.toat-div {
z-index: 99999 !important;
}

/* Add to your mobile styles */
@media (max-width: 1024px) {
  #recordingIndicator {
    top: 1rem;
    left: 1rem;
    padding: 0.5rem;
    font-size: 0.8rem;
	width: 50vw !important;
  }
}
</style>
<style>
/* Add these to your existing styles */
.loader {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #06b6d4;
  animation: spin 1s ease-in-out infinite;
}

.chat-loader,
.search-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.chat-loader .loader,
.search-loader .loader {
  margin-bottom: 1rem;
}

.skeleton-item {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-line {
  height: 12px;
  margin-bottom: 6px;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 80%;
}

/* Modern content loader */
.content-loader {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.content-loader .row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Pulse animation for subtle loading */
@keyframes pulse-opacity {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.pulse-loading {
  animation: pulse-opacity 1.5s ease-in-out infinite;
}

@keyframes progress {
  0% { width: 0%; }
  70% { width: 100%; }
  100% { width: 100%; }
}

.animate-progress {
  animation: progress 3s ease-out forwards;
}

/* Registration Modal Styles */
#registrationModal input,
#registrationModal button {
  transition: all 0.2s ease;
}

#registrationModal input:focus {
  border-color: #06b6d4;
  outline: none;
}

@media (max-width: 640px) {
  #registrationModal {
    padding: 1rem;
  }
  
  #registrationModal .flex.space-x-4 {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  #registrationModal .flex.space-x-4 button {
    width: 100%;
  }
  
  #registrationModal .flex.justify-between {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  
  #registrationModal .flex.justify-between button {
    width: 100%;
  }
}

/* Custom tooltip styles */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  margin-bottom: 8px;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.animate-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}




.custom-zindex {
	z-index:999 !important;
}




/*START POLLS CSS*/
	/* Polls Modal */
	#pollsList {
		scrollbar-width: thin;
		scrollbar-color: #3DBCA5 #2D3748;
	}

	#pollsList::-webkit-scrollbar {
		width: 6px;
	}

	#pollsList::-webkit-scrollbar-track {
		background: #2D3748;
	}

	#pollsList::-webkit-scrollbar-thumb {
		background-color: #3DBCA5;
		border-radius: 6px;
	}

	/* Poll Options */
	.poll-option {
		transition: all 0.2s ease;
	}

	.poll-option:hover {
		transform: translateY(-2px);
	}

	/* Vote Progress Bar */
	.vote-progress {
		height: 8px;
		border-radius: 4px;
		overflow: hidden;
	}

	.vote-progress-bar {
		height: 100%;
		transition: width 0.5s ease;
	}

	/* Voters List */
	.voter-item {
		transition: background-color 0.2s ease;
	}

	.voter-item:hover {
		background-color: #4A5568;
	}

	/* Create Poll Form */
	#pollOptionsContainer .flex.items-center {
		transition: opacity 0.2s ease;
	}

	.remove-option {
		transition: color 0.2s ease;
	}

	/* Responsive adjustments */
	@media (max-width: 640px) {
		.poll-modal {
			width: 95%;
			height: 90vh;
		}
	}
	
	.poll-actions {
		display: flex;
    gap: 0.5rem;
	}

	.poll-actions.hidden {
		display: none;
	}

	[data-poll-id] {
		cursor: pointer;
	}

	.poll-actions button {
		padding: 0.25rem;
		border-radius: 0.25rem;
		transition: background-color 0.2s;
	}

	.poll-actions button:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}
	
	.poll-content:hover {
    text-decoration: underline;
}
.edit-poll-btn:hover, .delete-poll-btn:hover {
    transform: scale(1.1);
}

/* Add this to your stylesheet */
.poll-view-trigger {
    cursor: pointer;
    user-select: none;
}

.poll-actions {
    pointer-events: auto;
    z-index: 1;
    position: relative;
}

.edit-poll-btn, .delete-poll-btn {
    pointer-events: auto;
}

.progress-bar {
    transition: width 0.5s ease-in-out;
}

.result-item {
    transition: all 0.3s ease;
}

.vote-count {
    transition: all 0.3s ease;
}
/*END POLLS CSS*/


/*START NETWORK STATUS*/
/* Ensure the alert appears above everything */
#networkStatus {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2147483647; /* Always on top */
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  color: white;
  font-size: 0.875rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.network-error { background: #EF4444; } /* Red for errors */
.network-warning { background: #F59E0B; } /* Yellow for warnings */

#networkStatus.hidden {
  display: none;
}

/* Status colors */
.network-good { background: #10B981; color: white; }
.network-warning { background: #F59E0B; color: white; }
.network-error { background: #EF4444; color: white; }
/*END NETWORK STATUS*/


/*PAYMENT MODAL*/
/* Payment modal styles */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

#paymentStatus {
  transition: all 0.3s ease;
}

/* IntaSend button styles */
#payWithCardBtn {
  background: linear-gradient(135deg, #6772e5 0%, #5469d4 100%);
  transition: all 0.2s ease;
}

#payWithCardBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}