/* ========== BASE STYLES ========== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:sans-serif;text-align:center;background:url('BG - Blue-Wash.jpg') center/cover fixed;color:black;overflow-y:auto;overflow-x: auto;width:100vw;}
body.dark{background:url('BG - Dark-Wash.jpg') center/cover fixed;color:white}
body.dark #greetingScreen,
body.dark .dropdown-menu,
body.dark #chatBox,
body.dark #messageInput,
body.dark #chatNotice,
body.dark .participant-video{background-color:#222;color:white}


/* ========== AUTHENTICATION ========== */
body:not(.authenticated)#mainContent{display:none!important}

/* ========== GREETING SCREEN ========== */
#greetingScreen {background: rgba(255,255,255,0.95);padding: 20px 40px;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.2);max-width: 600px;text-align: center;}

/* ========== MAIN LAYOUT ========== */
#JoinGMeet {padding:5px;margin:0px;background-color:#D0E7F9;color:#72A0C1;font-size:.9em;font-weight: 750;text-align: center;text-decoration: none;width:100%;}
#JoinGMeet a {text-decoration:none;display:block;color:#72A0C1;transition: all 1s ease-in-out;}
#JoinGMeet a:hover {transform: translateX(10px);color: #2E5674;}

#mainContent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;          /* use % not vw to respect parent */
  height: calc(95vh - 30px);
  margin: 0;            /* remove left margin causing overflow */
  padding: 10px;        /* use padding instead of margin for inner spacing */
  background-color: transparent;
  position: relative;
  min-height: 700px;
  box-sizing: border-box; /* padding included in width calculation */
}

/* ── LEFT COLUMN (video) ── */
#videoContainer {
  flex: 1;              /* takes all remaining space after right column */
  min-width: 0;         /* flex item shrink fix — important! */
  aspect-ratio: 16 / 9;
  background-color: #72A0C1;
  border: 1px solid #444;
  box-sizing: border-box;
}

#videoContainer iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  display: block;
}
/*.videoContainerOverlay-text {position: absolute;bottom: 10px;left: 10px;color: white;font-size: 1em;font-weight: bold;text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);z-index:2;border:1px dashed red;pointer-events: auto;}
.videoContainerOverlay-text a {text-decoration: none;color: #FFF;pointer-events: auto;}*/

/* ── RIGHT COLUMN ── */
#othersContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
  flex-shrink: 0;
  width: 40%;           /* was 420px — now responsive % */
  min-width: 280px;     /* don't let it get too narrow */
  max-width: 420px;     /* don't let it get too wide */
}

/* ── ANNOUNCEMENTS ── */
#announcements {
  display: flex;
  position: relative;
  margin: 0 0 10px 0;
  width: 100%;          /* was 410px — fill parent */
  height: 120px;        /* height can stay fixed or use vh */
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px dashed red;
}

.announcementOverlay-text {
  position: absolute;
  bottom: 50px;
  left: 40%;            /* was 175px — now relative */
  color: white;
  font-size: 1.3em;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
}

.announcementOverlay-text a {
  text-decoration: none;
  color: #FFF;
}

/* ── RIGHT COLUMNS WRAPPER ── */
#rightColumnsWrapper {
  margin-left: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 50%;
  position: relative;
  margin-top: auto;
  width: 100%;          /* fill parent */
}

/* ── CHAT AREA ── */
#chatArea {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;              /* was 240px — now takes available space */
  min-width: 0;         /* flex shrink fix */
}

#chatBox {
  width: 100%;          /* was 240px — fill parent */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border: 1px solid #72A0C1;
  background-color: rgba(255,255,255,0.5);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
}

/* ── PARTICIPANTS ── */
#participantsBox {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 45%;           /* was 160px — now responsive */
  min-width: 120px;
  max-width: 160px;
}

/* ========== RIGHT PANEL ========== */
#rightPanel{display:flex;flex-direction:column;height:100%;width:330px;padding:0 0 10px 10px;overflow:hidden;position:relative}
#speakerVideo{position:relative;width:100%;height:257px;background-color:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top:1px solid #72A0C1}
#speakerVideo video{width:100%;height:100%;object-fit:cover}
#mainSpeakerName{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:bold;font-size:1em;color:white;pointer-events:none}

/* ========== PARTICIPANT STATUS ========== */
#participantStatusRow{display:flex;justify-content:space-between;align-items:center;font-size:1rem;margin:8px 0}
.participant-left,.participant-right{display:flex;align-items:center;gap:5px}
.participant-icons span{cursor:pointer;padding:6px;color:gray;transition:all .3s ease}
.participant-icons .active{color:limegreen}

/* ========== CHAT INTERFACE ========== */
#chatBox{position: relative;overflow: visible;flex:1;display:flex;flex-direction:column;border:1px solid #72A0C1;background-color:rgba(255,255,255,0.5);overflow:hidden;border-top-left-radius: 5px;border-top-right-radius: 5px;}
#chatMessages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:12px;gap:10px;scroll-behavior:smooth;max-height: 100%;margin-top:5px;}
.chat-message{max-width:80%;padding:4px 12px;border-radius:12px;line-height:1.2;word-wrap:break-word;margin:4px 0}
.chat-message.self{align-self:flex-end;background-color:#e7faff;color:black;text-align:left;border-top-right-radius:2px; border:1px solid #72A0C1}
.chat-message.other{align-self:flex-start;background-color:#e7faff;color:black;text-align:left;border-top-left-radius:2px; border:1px solid #72A0C1}
.chat-message.system{align-self:center;background:none;border:none;font-style:italic;font-size:.65em;color:#999;text-align:center;box-shadow: none;display:block}
.timestamp{font-size:.65em;color:#999;margin-bottom:1px;display:block}
#chatInput{display:flex;flex-direction:column;gap:5px;margin-top:10px; margin-bottom: 10px;}
#messageInput{padding:8px;border:1px solid #444;border-radius:6px;width:100%}
.emoji-picker{display:flex;justify-content:space-between;font-size:15px;}
.emoji-group{display:flex;gap:3px;cursor:pointer}

/* ========== SETTINGS DROPDOWN ========== */
#settings{padding:5px;font-size:12px;text-align:right;width:100%}
.dropdown{position:relative;margin-bottom:1px;display:inline-block;text-align:right}
.dropdown-menu{display:none;flex-direction:column;position:absolute;top:-350%;right:0;background:white;border:1px solid #ccc;border-radius:6px;padding:4px;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.1);width:120px;margin-bottom:20px;}
.dropdown-menu label{display:flex;justify-content:flex-end;font-size:.9em;padding:2px}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:flex}

/* ========== LEAVE BUTTON ========== */
#leaveBtn{background-color:#2E5674;padding:10px 20px;font-size:14px;cursor:pointer;color:white;font-weight:bold;border:none;border-radius:6px;width:100%;transition: all 1s ease-in-out;}
#leaveBtn:hover{background-color:#d21305;}

/* ========== STATUS MESSAGE & NOTICE ========== */
#statusMessage {display: none;position: fixed;top: 0;width: 100%;padding: 10px;text-align: center;background-color: #D0E7F9;color: #0F4C81;font-weight: bold;  z-index: 1000;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
body.dark #statusMessage{background-color:#0F4C81;color:#D0E7F9}
#chatNotice{background-color:#f0f8ff;padding:6px 4px;font-size:.65em;font-style:italic;border-bottom:1px solid #72A0C1;margin:0}
.emphasis{font-weight:bold;color:#FF0000}

/* ========== PARTICIPANT COLUMN ========== */
#videoGridPanel{flex:1;width:100%;overflow-y:auto;background-color: rgba(255,255,255,0.5);display:flex;flex-wrap:wrap;align-content:flex-start;border: 1px solid #CCC;}

.participant-video{width:100%;display:flex;font-size:.85em;color:#2E5674;overflow:hidden;position: relative;margin:0px 5px 5px 5px;padding-top: 5px;	padding-bottom: 20px;border-bottom: 1px solid #CCC;}

.status-btn{background-color:transparent;padding:2px 3px;border:1px;border-radius:4px;cursor:pointer;margin-left:3px;transition:background-color .2s ease,color .2s ease}
.status-btn:hover{background-color:#f2f2f2}
.status-btn.active-afk,.status-btn.active-brb{background-color:#fff8c4;color:#444}
.status-btn.active-here{background-color:#39FF14;color:black}
.status-line{font-size:.5em;color:#AAA;margin-bottom:2px}

#currentlyJoined {margin: 15px auto;bottom: 10px;left: 0;width: 100%;color: #000;font-family: 'Segoe UI', sans-serif;font-weight: 300;text-align: center;  padding: 10px;}

#dhammapadaQuote{font-size:1.3em;padding:1em;text-align:center;line-height:1.3;color:#72A0C1;font-family:'Dancing Script',cursive;font-weight:300;margin:0;opacity:1;transition:opacity 1s ease}

#socials {direction:flex;flex-direction:column;justify-content:flex-end;border-top: 1px solid #72A0C1;font-size: 1em;text-align: center;padding: 5px;margin: auto 0 0 0;color: #72A0C1;}
#socialsText{font-size:.6em;color:#72A0C1}

.chat-message .message-content strong {font-weight: 500;font-size: 0.85em;color: #e91e63;font-family: 'Segoe UI', sans-serif;text-transform: uppercase;}
.chat-message .message-content {font-family: 'Helvetica', sans-serif;font-size: 0.8em;font-weight: 200;}

#googleMeetDiscuss{background-color:transparent;padding:8px 10px;font-size:.6em;}

#videoContainer {position: relative;min-width: 70%} /*DON'T MOVE*/
#videoContainer iframe {width: 100%;height: 100%;border: none;pointer-events: none;z-index: 1;position: relative;} /*DON'T MOVE*/

#pinnedMessagesContainer {position: absolute;top: 117px;left: 0;right: 0;max-height: 30px;background-color: #f5fbff;border-bottom: 1px solid #72A0C1;margin-bottom: 5px;transition: max-height 0.3s ease;cursor: pointer;overflow: hidden;display: flex;flex-direction: column;z-index:999;}
#pinnedMessagesContainer:hover {max-height: 300px;}
#pinnedMessages {overflow-y: auto;flex-grow: 1;padding: 8px 10px;display: flex;flex-direction: column;gap: 6px;font-size: 0.75em;color: #333;text-align: left;  max-height: 350px;}
#pinnedHeader {font-weight: bold;font-size: 0.8em;color: #507FA3;padding: 6px 10px;background-color: #e6f2f9;border-bottom: 1px solid #72A0C1;}
#pinnedMessages p {margin: 4px 0;line-height: 1.3;	}
.pinned-message {background-color: #ffffff;border: 1px solid #c3d8e8;padding: 6px 10px;border-radius: 4px;position: relative;}
.pinned-message .unpin {position: absolute;top: 4px;right: 6px;font-size: 0.8em;cursor: pointer;color: #888;}

/*@media (max-width: 700px) {
  body.mobile { overflow-x: hidden;}
  body.mobile #mainContent {display: flex;flex-direction: column;width: 100%;height: auto;margin: 0;top: 0;transform: none;}

  /* 1. Status Message 
  body.mobile #statusMessage {order: 1;position: static;margin: 0;padding: 12px;width: 100%;box-sizing: border-box;}

  /* 2. Video Container (YouTube) 
  body.mobile #videoContainer {order: 2;width: 100%;height: 300px;margin-bottom: 3px;}
  body.mobile #videoOverlay {position: relative !important;display: block !important;background-color: #e6f2f9;color: #0F4C81;font-size: 0.75em;text-align: center;  padding: 8px 15px;border-top: 1px solid #72A0C1;width: 100%;box-sizing: border-box;border-radius: 0;box-shadow: none;z-index: 0 !important;margin-top:5px;}
  body.mobile #videoOverlay a {color: #e91e63;font-weight: bold;text-decoration: none;}

  /* 3. Settings 
  body.mobile #settings {order: 4;width: 100%;text-align: center;padding: 5px 0;margin-bottom: 3px;}

  /* 4. Chat box (messages + emoji + input) 
  body.mobile #chatBox {order: 5;width: 100%;height: auto;flex: none;margin-top: 10px;}
  body.mobile #chatMessages {max-height: 500px;overflow-y: auto;}
  body.mobile #chatInput {padding: 10px;}

  /* 5. Participant video grid (scrollable horizontally) 
  body.mobile #videoGridPanel {order: 6;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;gap: 8px;width: 100%;height: 90px;margin: 10px 0;display: flex;    padding: 10px 5px;}
  body.mobile .participant-video {min-width: 120px;height: 70px;flex: 0 0 auto;font-size: 0.75em;}
  body.mobile .participant-video video {height: 100%;object-fit: cover;}

  /* 6. Post-it Questions 
  body.mobile #postItQs {order: 7;width: 100%;max-height: 250px;overflow-y: auto;padding: 10px 5px;}
  body.mobile .post-it {width: 100%;font-size: 0.8em;padding: 20px 15px 15px;}
  body.mobile #postItNavigation {flex-direction: column;gap: 6px;}

  /* 7. Disclaimer Drawer (pull-up) 
  body.mobile #disclaimerDrawer {order: 8;position: static !important;transform: none !important;width: 100% !important;height: auto;font-size: 0.6em;    border-radius: 12px;box-shadow: none;margin: 10px 0;}
  body.mobile #disclaimerDrawer:hover {transform: none;}
  body.mobile #disclaimerDrawer .label {border-radius: 12px 12px 0 0;font-size: 0.75em;}
  body.mobile #disclaimerDrawer .content {padding: 10px 12px;}
  body.mobile #dhammapadaQuote {display: none !important;}
}*/

#UserMe {padding: 7px 10px 5px 7px;font-size: 0.8em;font-weight: bold;border: 1px solid #CCC;border-top-left-radius:5px;border-top-right-radius:5px; background-color: rgba(245, 251, 255,0.9);box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);align-items: center;}
#statusDropdownContainer {margin-bottom: 10px;}
#statusDropdownContainer select {width: 100%;padding: 5px;font-size: 0.8em;}
#profileRow {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;}
#userPhoto {width: 30px;height: 30px;border-radius: 50%;object-fit: cover;background-color: #eee;}
#userDetails {display: flex;flex-direction: column;}
#userNameDisplay {font-weight: bold;}
#userRoleStatus {font-size: 0.8em;color: gray;padding-top: 0px;width: 100%;}

#statusMessageBox label {display: block;margin-bottom: 5px;}
#statusMessageInput {width: 100%;height: 50px;padding: 5px;resize: none;font-size: 0.85em;}
#statusRow {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;}

.quicksand {font-family: 'Quicksand', sans-serif;}

#RetreatsContainer {width: 180px; margin: 0 10px 13px 10px; border-top-right-radius: 10px; border-top-left-radius: 10px;}
#RetreatsImageContainer {border-top-right-radius: 10px;border-top-left-radius: 10px;background-image: url("Retreats-01.png");background-size: cover;  background-position: center;width: 100%;aspect-ratio: 3 / 2;}
#RetreatsImage {width: 100%; height: auto; display: block; src:"Retreats-01.png"}
#RetreatsSchedule {height: 30px;background-color: #72A0C1;margin: 0;line-height: 30px;text-align: center;font-size: 14px;font-weight: bold;}
#RetreatsSchedule a {color: white;text-decoration: none;font-weight: bold;}
#RetreatsSchedule a:hover {text-decoration: none;color: white;font-size: larger;}
#RetreatsTagLine {font-size: .8em; margin: 0; background-color: #92c0e1; color: #FFF; padding:10px 5px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px}

#curly-brace-box {font-size: .8em;}

/*#userNameDisplay.has-status::after {content: "💬";margin-left: 6px;font-size: 0.9em;}
#userNameDisplay[title] {cursor: help;}*/

.mental-ping {align-items: center;text-align: center;padding: 10px 0 10px 0;border: none;border-radius: 999px;margin-bottom: 10px;width: 100%;font-size: 1.1em;font-weight: bold;color: #3f6b8b;font-family: 'Caveat', cursive;background-color:#FFF;border:1px solid #EEE}
.mental-ping:hover .text{transform: scale(1.06);}
.mental-ping .text {display: inline-block;transition: transform 1s;}

.dhamma-popup {position: absolute;top: 105px;left: 160px;width: 240px;background: rgba(255,255,255,.80);border: 1px solid #ddd;border-radius: 12px;padding: 12px 16px;  box-shadow: 0 8px 20px rgba(0,0,0,0.15);font-size: .9em;line-height: 1.2;z-index: 1000;animation: fadeIn 0.5s ease-in-out;transition: transform 0.6s;color: #333;}
.dhamma-popup .source {font-size: .7em;color: #3f6b8b;margin-top: 8px;}
.dhamma-popup .close-popup {position: absolute;top: 6px;right: 10px;cursor: pointer;font-weight: bold;color: #999;}

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

#disclaimerDrawer {position: fixed;bottom: 0;left: 0;width: 280px;height: 120px;transform: translate(-180px, 97px);background-color: #E0F7FA;color: #444;	font-size: 0.6em;text-align: left;border-top-right-radius: 10px;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 1.1s ease-in-out;z-index: 100;cursor: pointer;border: 1px solid #FFF;}
#disclaimerDrawer:hover {transform: translate(0, 0);}
#disclaimerDrawer .label {font-weight: bold;color: #FFF;padding:5px 8px 7px 7px;background-color: #e91e63;text-align: right;}
#disclaimerDrawer .content {padding: 11px 12px;display: block;line-height: 1.4;}
.red-bold, b.red-bold {color: #C62828;font-weight: bold;}

#scheduleDrawer {position: fixed;bottom: 0;left: 0px;transform: translate(0%, 117px);width:200px;height: 140px;background-color: #E0F7FA;color: #444;  border-top-right-radius: 10px;box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 1.1s ease-in-out;z-index: 98;cursor: pointer;  border: 1px solid #FFF;}
#scheduleDrawer:hover {transform: translate(0, 0);}
#scheduleDrawer .label {font-weight: bold;color: #FFF;padding:3px 4px 7px 0px;margin-bottom: 10px;background-color: #3f6b8b;text-align: right;font-size: 0.6em;}
#scheduleDrawer .content {font-size: 0.6em;margin: 10px 16px;text-align: left;height: 100%;overflow-y: auto;}
#scheduleDrawer li {text-align: left;padding-left:20px;}

#gentleDisclaimerDrawer {position: fixed;bottom: 0;left: 0px;transform:translate(0%, 128px);width:320px;height: 151px;background-color: #E0F7FA;color: #444;  border-top-right-radius: 10px;box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 1.1s ease-in-out;z-index: 97;cursor: pointer;  border: 1px solid #FFF;}
#gentleDisclaimerDrawer:hover {transform: translate(0, 0);}
#gentleDisclaimerDrawer .label {font-weight: bold;color: #FFF;padding:3px 4px 7px 0px;background-color: #3f6b8b;text-align: right;font-size: 0.6em;}
#gentleDisclaimerDrawer .content {font-size: 0.6em;margin: 10px 12px;text-align: left;height: 100%;overflow-y: auto;}

#notesDrawer {position: fixed;bottom: 0;left: 0px;transform:translate(0%, 274px);width:395px;height: 297px;background-color: #E0F7FA;color: #444;  border-top-right-radius: 10px;box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);overflow: hidden;transition: transform 1s ease-in-out;z-index: 96;cursor: pointer;  border: 1px solid #FFF;}
#notesDrawer:hover {transform: translate(0, 0);}
#notesDrawer .label {font-weight: bold;color: #FFF;padding:3px 6px 7px 0px;background-color: #3f6b8b;text-align: right;font-size: 0.6em;}
#notesDrawer .content {font-size: 0.6em;margin: 10px 14px;text-align: left;height: 100%;overflow-y: auto;}

#emailLink {color: #0077cc;text-decoration: underline;cursor: pointer;font-size: 1em;}

#popupBoxFeedback {display: none;position: absolute;width: 300px;height: auto;bottom: 10px;left: 300px;background: #E0F7FA;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);padding: 16px;z-index: 9999;transition: opacity 0.3s ease;border:1px solid #FFF;}
#popupBoxFeedback h3 {margin-top: 0;font-size: 1em;}
#popupBoxFeedback label {display: block;margin-top: 10px;font-size: 0.85em;}
#popupBoxFeedback input,
#popupBoxFeedback textarea {width: 100%;padding: 6px;margin-top: 4px;font-size: 0.9em;border-radius: 4px;border: 1px solid #ccc;}
#popupBoxFeedback.visible {display: block;}
#popupBoxFeedback button {margin-top: 12px;background: #3f6b8b;color: white;padding: 8px 12px;border: none;border-radius: 5px;cursor: pointer;}
#popupBoxFeedback .close-btn {position: absolute;top: 6px;right: 10px;font-size: 18px;color: #888;cursor: pointer;}

/* TRBL */