/* userTile.css */

.user-tile {
  position: relative;
  width: 100%;
  min-height: 575px;
  background: #ffffff;
  border: 1px solid rgb(125, 125, 126);
  border-radius: 0px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1px; /* optional: bump this up for cleaner spacing */
}

.fy-tile {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #000; /* Solid black background */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0; /* no rounding */
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  touch-action: pan-y; /* allow vertical scrolling/swiping if needed */
}

.bluesky-icon-T {
  position: absolute;
  bottom: 8px;
  right: 8px; 
  
  overflow: hidden;
  width: 160px;
  height: 160px;
}

.bluesky-icon-T img {
  width: 32px;  
  object-fit: cover;
}

#blueskyBadgeT {
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 999;
  border-radius: 8px;
  padding: 4px;
}

#blueskyBadgeT img {
  height: 20px;
  width: auto;
  display: block;
  border: #FFFFFF;
  border-width: medium;
}

/* Make the card larger on tablet/desktop */
@media (min-width: 768px), screen and (min-width: 1024px) {

  .tile-banner-handle {
    left: 125 !important;
  }
  .objtile-image {
    height: 140px !important;      
  }

  .user-tile {
    max-width: 600px;
  }
  
  .fy-tile {
    max-width: 700px;
    margin: 0 auto; /* center horizontally on desktop */
  }

  .fy-info-block {
    width: 575 !important;    
  }
  .object-avatar {
    width: 54px !important;    
  }

  .fymuteToggleBtn {        
    left: 68% !important;
  }

  .tile-image img {
    height: 220px !important;
  }

  .avatar-circle {
    height: 100px !important;
    width: 100px !important;
  }

  .stat-box {
    height: 360px !important;
  }

  .tile-info {
    min-height: 140px;
  }
}

.dot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 8px;
}

.dot-grid-item {
  flex: 0 0 80px;  
  width: 80px;
  background: #f8f8f8;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  text-align: center;
}

.dot-grid-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.dot-label {
  line-height: 1.2;
  min-height: calc(1.2em * 2); /* exactly two lines of space */
  max-height: calc(1.2em * 2);
  display: -webkit-box;        /* enable clamping */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-size: 14px;      /* prevent overflow for long tokens */
}
.dot-grid + h3,
h3 {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 6px;
}


.tile-header {
  height: 30px; /*  hard-coded fixed height */
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px; /*  adjust padding: no vertical padding */
  font-weight: bold;
  font-size: 16px; /*  slightly smaller font to fit cleanly */
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  box-sizing: border-box;
}
.tile-banner-handle {
  position: absolute;
  bottom: 6px;
  left: 100px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.tile-banner-title {
  position: absolute;
  top: 45px;
  left: 4px;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  /*background: rgba(0, 0, 0, 0.4);*/
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 0;
  /*text-shadow: 1px 1px 3px rgba(0,0,0,0.7);*/
}
.tile-info-title {
  position: relative;    
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  /*background: rgba(0, 0, 0, 0.4);*/  
  border-radius: 6px;
  z-index: 0;
  /*text-shadow: 1px 1px 3px rgba(0,0,0,0.7);*/
  margin-bottom: 6px;
}
.tile-hp {
  font-size: 14px;
}

.tile-image {
  position: relative; 
}

.objtile-image {
  height: 120px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.objtile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.objtile-image .tile-id-label {
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 7px;
  font-size: 10px;
  font-style: italic;
  border-radius: 3px;
  z-index: 100;

}

.avatar-circle {
  position: absolute;
  bottom: 4px;
  left: 4px;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 80px;
  height: 80px;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-header-right {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

.tile-header-left {
  position: absolute;
  top: 45px;
  right: 6px;
  z-index: 2;
}
.report-header-right {
  position: absolute;
  top: 88px;
  right: 6px;
  z-index: 10;
}

.report-button {
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
  opacity: 0.8;
}

.report-button:hover {
  background-color: rgba(255, 100, 100, 0.9);
}

.report-button img.report-icon {
  width: 20px !important;
  height: 20px !important;  
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.report-button:hover img.report-icon {
  opacity: 1;
}
.objreport-header-right {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.objreport-button {
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
  opacity: 0.8;
}

.objreport-button:hover {
  background-color: rgba(255, 100, 100, 0.9);
}

.objreport-button img.report-icon {
  width: 24px !important;
  height: 24px !important;  
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.objreport-button:hover img.report-icon {
  opacity: 1;
}


.dm-button-header {
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  padding: 6px 6px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  transition: background 0.2s ease;
}

.dm-button:hover {
  background-color: rgba(255, 255, 255, 1);
}
.config-button-header {
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  padding: 3px 8px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  transition: background 0.2s ease;
}
.config-button-header:hover {
  color: white;
}

.date-row {
  display: flex;
  justify-content: space-between; 
  font-size: 14px; 
  background-color:#ffffff;
  color: #333;
  position: relative; /* keep this relative to container flow */
}

.objtile-info {
  position: relative;
  background-color: #ffffff;
  padding: 6px 6px;
  font-size: 13px;
  color: #222;  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Segoe UI', sans-serif;
  min-height: 154px;
  margin-top: 10px;
}
.spark-info {
  position: relative;
  background-color: #ffffff;
   padding: 0 6px 44px;  
  font-size: 13px;
  color: #222;  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Segoe UI', sans-serif;
  min-height: 200px;
  margin-top: 10px;
}

.tile-maplink {
  position: absolute;          /* ⬅ anchor to .spark-info */
  right: 10px;                 /* bottom-right corner */
  bottom: 4px;
  font-size: 12px;
  z-index: 1;                  /* sit on top just in case */
}

.tile-maplink a {
  color: #0077cc;
  text-decoration: underline;
  font-weight: bold;
}

.tile-maplink a:hover {
  color: #004c99;
}

.fytile-maplink {
  font-size: 13px;
  margin-bottom: 2px;
}

.fytile-maplink a {
  color: #0077cc;
  text-decoration: underline;
  font-weight: bold;
}

.fytile-maplink a:hover {
  color: #004c99;
}


.tile-links {
  display: flex;
  justify-content: center;
  align-items: center; /* ← vertically centers items */
  gap: 20px;
  min-height: 40px; /* or whatever height looks good */
  background: #ebebeb;
  padding: 2px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tile-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0px;
  font-size: 11px;
  color: #222;  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;
  min-height: 110px;
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 6px;
  font-size: 11px;
  color: #222;  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;
  min-height: 89px;
  position: relative;
}
.info-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  border-top: #94c1f1;
  border-top-width: thin;
  border-top-style: inset;
}

.info-left {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tile-info .info-line.location {
  font-size: 15px;
  font-weight: bold;
  color: #0635E7;
  margin: 6px;
}

.tile-info .info-line.joined {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: #666;
}
.info-line-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 6px;
}

.badge-left,
.badge-right {
  font-weight: 600;
  font-size: 13px;  
  padding: 6px 10px;
  border-radius: 8px;  
  white-space: nowrap;
}

.badge-left {
  color: #0875E8;
}

.badge-right {
  color: #D64545;
}

.data-link {
  cursor: pointer;
  font-weight: 500;
  color: #0635E7;
  transition: all 0.2s ease;
  display: inline-block;
}


.data-link:hover {
  transform: translateY(-2px) scale(1.03);
  color: #021dbf;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.data-link:active {
  transform: scale(0.95);
  color: #000;
}
.tile-joined {
  display: flex;
  justify-content: center;
  font-size: 10px;
  font-style: italic;
  padding-left: 2px;
}

.ghost-summary {
  background: #ffffff;
  left: 100px;
  padding: 12px;
  font-size: 13px;
  color: #333;
  border-bottom: 2px dashed #ccc;
}
.tile-boxes {
  position: relative; /* <-- NEW!! make it a positioning context */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0px 8px 8px 12px;
  background: #ffffff;
  font-size: 12px;
  color: #222;
}

.tile-box {
  width: 45%;
  height: 75px;
  background: #3d3c3b;
  margin: 6px 0;
  padding: 6px;
  border-radius: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tile-box img {
  width: 36px;
  
}
.stat-box {
  display: flex;
  flex-wrap: nowrap;              /* no wrapping */
  overflow-x: auto;               /* enable horizontal scroll */
  overflow-y: hidden;             /* disable vertical scroll */
  scroll-snap-type: x mandatory;  /* clean swipe snapping */
  scroll-behavior: smooth;        /* smooth scrolling */
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */ 
  background: #3d3c3b;
  height: 280px;
  gap: 2px;
  margin-bottom: 0px;
  scrollbar-width: thin;         /* Firefox */
  scrollbar-color: #888 transparent;
}

.stat-box::-webkit-scrollbar {
  height: 8px;                    /* horizontal scrollbar */
}

.stat-box::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.stat-box::after {
  content: "";
  flex: 0 0 auto;
}
.stat-box img, .stat-box video{
  flex: 0 0 auto;  
  max-height: 100%;
  max-width: 100%;
}

.stat-image-wrapper {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 100%; /* or fixed width if needed for consistent snapping */
  position: relative;
}

.stat-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;  
}

.media-click-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
}

/* Optional: improve video transition */
.stat-video::-webkit-media-controls {
  display: none !important;
}

.stat-image-label {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  z-index: 11; /* One layer above the overlay if needed */
}

.stat-icon {
  width: 16px;
  height: 16px;
}

.stat-date {
  font-weight: bold;
}

.video-container,
.video-thumb-wrapper {
  width: 100%;
  height: 100%;
  display: block;
}

.video-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.swipe-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.play-icon {
  width: 64px;
  height: 64px;
}
.ghostclaim-box {
  display: flex;
  flex-wrap: nowrap; /*  important! no wrapping */
  overflow-x: auto; /*  allow left-right scroll */
  overflow-y: hidden; /* disables vertical scroll */	
  scroll-snap-type: x mandatory; /*  (optional) makes swipe "snap" cleanly */
  background: #C6CCCF;
  height: 280px; /* your stat-box fixed height */
  gap: 2px;
  margin-bottom: 25px;
}
.ghostclaim-box::after {
  content: "";
  flex: 0 0 auto;
}

.tile-power {
  background: #fff3e0;
  padding: 10px 14px;
  font-size: 13px;
  color: #222;
  border-top: 2px solid #fbc02d;
}

.power-title {
  color: #0875E8;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 6px;
}

.tile-Links a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

.tile-Links a:hover {
  text-decoration: underline;
}

.tile-Links img{
  width: 38px;	
}

.badge-area {
  height: 40px;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: #E8EDF4;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-area a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

.badge-area a:hover {
  text-decoration: underline;
}

.badge-area img{
  width: 32px;	
}

.mission-Links {
  height: 40px;
  display: flex;
  justify-content: space-around;
  padding: 5px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mission-Links a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

.mission-Links a:hover {
  text-decoration: underline;
}

.mission-Links img{
  width: 32px;	
}

.tile-actions {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: #fce788;
   text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tile-actions a {
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
  font-size: 12px;
}

.tile-actions a:hover {
  text-decoration: underline;
}
.tile-footer {
  text-align: center;
  font-size: 11px;
  padding-top: 8px;
  color: #555;
  padding-bottom: 10px;
  height: 100%;
}

.tile-scroll-container {
    display: flex;
    max-height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden !important;
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 10px;
    height: 100vh;
    background: transparent;
    background-size: cover;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}
.tile-scroll-container > div {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-height: 100vh;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    scrollbar-width: auto;
}

#tilecontainer.tile-scroll-container {
  min-height: 100vh;
  height: auto;
  flex-grow: 1;
  overflow-y: auto;
}



.user-tile-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 43px 10px 10px 10px;
  box-sizing: border-box;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: visible; /* ⬅️ allows tile to grow naturally */
  touch-action: pan-y;  /* ⬅️ good for mobile, keeps vertical scroll clean */
}


.scroll-snap-child {
  scroll-snap-align: start;
  flex-shrink: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.snap-tile {
  scroll-snap-align: start;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.highlight {
  border: 2px solid #00bfff;
  box-shadow: 0 0 12px #00bfff;
  transition: all 0.3s ease-in-out;
}

.tile-form {
  display: flex;
  width: 98%;
  flex-direction: column;
  padding: 8px; 
  overflow-y: auto; /* allow vertical scrolling if needed */
  max-height: 100%; /*  don't overflow drawer */
  box-sizing: border-box;	
}

.tile-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  padding-bottom: 2px; /* space between input and line */
  
}

.tile-form-group label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.profile-form-group.row-2-col {
  display: flex;
  gap: 24px; /* space between columns */
}

.profile-form-group .half-width {
  flex: 1 1 0;
}

.profile-form-group .half-width:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.tile-form-input {
  width: 100%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  box-sizing: border-box;
}
.tile-form-textarea {
  width: 100%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  box-sizing: border-box;
  resize: none; /* Disable resizing */
}
.tile-form-input:focus,
.tile-form-textarea:focus {
  border-color: #007bff;
  outline: none;
}


.tile-form-input:focus,
.tile-form textarea:focus {
  border-color: #007bff;
  outline: none;
}

.tile-form-actions {
  margin-top: 20px;
}

.tile-form-submit {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.tile-form-submit:hover {
  background-color: #0056b3;
}

.row-2-col {
  display: flex;
  flex-direction: row;  
}

.half-width {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.third-width {
  flex: 0 0 33%;
  display: flex;
  flex-direction: column;
}

.two-thirds-width {
  flex: 0 0 67%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* optional, to center checkboxes nicely */
}

.checkbox-group {
  margin-bottom: 8px;
}
#formDrawer {
  position: absolute; /* <-- change from fixed to absolute */
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px; /* collapsed */
  max-height: 600px; /* Same as .stat-box height */	
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: height 0.3s ease;
  z-index: 1000;
  border-top-left-radius: 10px;   
  border-top-right-radius: 10px; 
}

#formTab {
  height: 35px;
  background: #007bff;
  color: white;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  border-top-left-radius: 10px;   
  border-top-right-radius: 10px; 
}

#formContent {
  padding: 16px;
}
.stat-image-wrapper {
  position: relative; /*  Important: so label can position inside */
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.feedback {
  display: inline-block;  
  font-size: 14px;
  font-weight: bold;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

/*.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}*/

.icon-button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
  display: inline-block;
}

.icon-button:hover {
  transform: scale(1.05);
}

.icon-button:active {
  transform: scale(0.95);
}

.follow-icon {
  height: 160px;
  width: auto;
  display: block;
  pointer-events: none;
}
.connected-banner {
  font-size: 1rem;
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.follow-button {
  background-color: #c00;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.follow-button:hover {
  background-color: #a00;
}

.follow-meta {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 1rem;
  text-align: left;
}

/* Media Grid Styling*/

.edit-media-scroll-window {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: #f9f9f9;
  scroll-snap-type: x mandatory;  
}

.edit-media-grid {
  display: grid;
  grid-auto-flow: column; /* columns first */
  grid-template-rows: repeat(3, 1fr); /* two rows */
  grid-auto-columns: 65px; /* or 140px, etc */
  gap: 1px;
  margin-bottom: 2px;
  min-height: 180px;
}
.edit-registry-grid {
  display: grid;
  grid-auto-flow: column; /* columns first */
  grid-template-rows: repeat(2, 1fr); /* two rows */
  grid-auto-columns: 68px; /* or 140px, etc */
  gap: 1px;
  margin-bottom: 2px;
  min-height: 137px;
}
.edit-spark-grid {
  display: grid;
  grid-auto-flow: column; /* columns first */
  grid-template-rows: repeat(1, 1fr); /* two rows */
  grid-auto-columns: 116px; /* or 140px, etc */
  gap: 1px;
  margin-bottom: 2px;
  min-height: 115px;
}
.edit-user-grid {
  display: grid;
  grid-auto-flow: column; /* columns first */
  grid-template-rows: repeat(3, 1fr); /* two rows */
  grid-auto-columns: 85px; /* or 140px, etc */
  gap: 1px;
  margin-bottom: 2px;
  min-height: 254px;
}
.edit-media-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8f8f8;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  scroll-snap-align: start;
}

.edit-media-thumb {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.edit-media-thumb img,
.edit-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  display: block;
}

/* Media Grid Styling for Object tiles*/

.obj-media-scroll-window {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: #f9f9f9;
  scroll-snap-type: x mandatory;  
}

.obj-media-grid {
  display: grid;
  grid-auto-flow: column; /* columns first */
  grid-template-rows: repeat(1, 1fr); /* two rows */
  grid-auto-columns: 100px; /* or 140px, etc */
  gap: 1px;
  margin-bottom: 2px;
  min-height: 100px;
}

.obj-media-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8f8f8;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  scroll-snap-align: start;
}

.obj-media-thumb {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.obj-media-thumb img,
.obj-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  display: block;
}
.edit-media-thumb img,
.edit-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  display: block;
}

/* Overlay play button for videos */
.edit-media-thumb.video .play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.play-icon {
  width: 36px;
  height: 36px;
}
.end-of-media-msg {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 16px 0;
  font-size: 14px;
}
.media-feed-label {
  position: absolute;
  bottom: 1px;
  left: 1px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 6px;
  pointer-events: none;
  font-weight: 500;
  white-space: nowrap;
}

.links-group-section {
margin: 16px 0px 6px 0px;
gap: 8px;
display: flex;
}
.eplinks-group-row {
gap: 8px;
display: flex;
margin-bottom: 29px;
min-height: 50px;
justify-content: center;   /* Center horizontally */
align-items: center;       /* Center vertically (optional) */
}

.sm-tag {
  background: none !important;
  border: none;
  box-shadow: none;
  padding: 4px;
}

.sm-tag img {
  border-radius: 6px;
  transition: none;
}

.sm-tag a {
  background: none;
  padding: 0;
  box-shadow: none;
}

.sm-tag:hover {
  background: none;
  transform: none;
}

.bio {
  margin: 0px 0px 4px 0px;
  padding: 2px 2px;  
  font-size: 13px;
  line-height: 1.4;
  color: #222;
  height: 36px;
  flex-grow: 1;
}

.bio-text .full-text {
  display: none;
}

.bio-text.expanded .full-text {
  display: block;
}

.bio-text.expanded .short-text {
  display: none;
}

.bio-text .short-text,
.bio-text .full-text {
  transition: opacity 0.2s ease;
}
/* let the bio flex item actually shrink and wrap */
.bio {
  min-width: 0;          /* critical in flex layouts */
  overflow: hidden;      /* keep content inside the box */
  flex: 1 1 auto;        /* explicit flex shorthand */
  white-space: normal;   /* allow wrapping */
  overflow-wrap: anywhere; /* modern wrap for long tokens */
  word-break: break-word;  /* fallback for older browsers */
  hyphens: auto;           /* nicer wrapping for long words */
}

/* make sure inner wrappers also wrap correctly */
.bio-text,
.bio-text .short-text,
.bio-text .full-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* optional: tidy 2-line clamp for the short version (keeps height clean) */
.bio-text .short-text {
  display: -webkit-box;
  
  overflow: hidden;
}

/* if you ever expand the bio, let it grow naturally */
.bio-text.expanded { max-height: none; }

/* keep your existing .tile-info + .bio rules */
/* ensure .tile-info is a flex column (you already have this) */
.tile-info {
  display: flex;
  flex-direction: column;
  /* keep your existing props */
}

/* make the link pin to the bottom-right */
.tile-info .live-stream-link {
  /* push it to the bottom of the column */
  margin-top: auto;
  /* right/bottom spacing */
  margin-right: 2px;
  margin-bottom: 2px;

  align-self: flex-end;         /* right align in the row */
  display: inline-flex;
  gap: 6px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;

  background: #f8fafc;          /* light pill */
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease, transform .04s ease;
}

.tile-info .live-stream-link:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.tile-info .live-stream-link:active {
  transform: translateY(1px);
}


.read-more-link {
  font-size: 13px;
  color: #0077cc;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 6px;
}

.read-more-link.bottom-link {
  margin-top: 6px;
}

  #scrollcontainer {
    max-height: 96vh; /* Limit height so scrolling is required */
    overflow-y: auto; /* Enable vertical scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
    scroll-snap-type: y mandatory;
  }

  #tilelist {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #tilelist > div {
  scroll-snap-align: start;
}

/* ========== FYTILE ACTION STACK ========== */
#actionStack.fytile-mode {
  position: absolute;
  right: 1px;
  top: 60%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  padding: 4px 0px;
  border-radius: 13px;  
  gap: 12px;
}

.fytile-actionbtn {
  width: 40px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
  gap: 4px;
}

.fytile-actionbtn img {
  width: 24px;
  object-fit: contain;
}

.fytile-actionbtn:hover {
  transform: scale(1.20);
  cursor: pointer;
}

.fytile-actionbtn.pulsing {
  animation: fytilePulse 2s ease-in-out infinite;
}

.fytile-label {
  font-size: 0.65rem;
  color: #ffffff;
  line-height: 1.1;
  text-align: center;
  margin: 2px 0 0 0;
  height: 12px;
}

.fytile-like-count {
  font-weight: normal;
}

@keyframes fytilePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Avatar image */
.fytile-avatar {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50% !important;
  border: 2px solid transparent;
  display: block;
  transition: transform 0.2s ease;
}

.fytile-avatar.followed {
  border-color: #2e90fa;
}

/* Follow button */
.fytile-follow-btn {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 18px;
  padding: 0;
  text-align: center;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 5;
  background-color: red;
}

.fytile-follow-btn:hover {
  transform: translateX(-50%) scale(1.1);
}

/* Avatar + Follow container */
.fytile-connection-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fy-tile-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin-bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: #000; /* match the tile for clean fullscreen look */
  flex-direction: column;
}
.fy-tile-media-container {
  width: 100vw;      /* or 100% if inside a card/modal */
  height: 100vh;     /* or whatever fits your layout */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; 
}

/* Make the video fill the width, aspect-ratio auto, and center it vertically */
.fy-tile-media-container video {
  width: 100vw;          /* Fills the width of the viewport/container */
  height: auto;          /* Keeps aspect ratio */
  max-height: 100vh;     /* Ensures it doesn't overflow vertically */
  object-fit: contain;   /* or cover, see below */
  display: block;
  margin: 0 auto;
  inset: 0;
  background: #000;
}
/* Make the video fill the width, aspect-ratio auto, and center it vertically */
.fy-tile-media-container img {
  width: 100vw;          /* Fills the width of the viewport/container */
  height: auto;          /* Keeps aspect ratio */
  max-height: 100vh;     /* Ensures it doesn't overflow vertically */
  object-fit: contain;   /* or cover, see below */
  display: block;
  margin: 0 auto;
  background: #000;
}
/* === FY TILE LABEL (TOP-LEFT ID) === */
.fy-id-label {
  position: absolute;
  top: 55px;
  left: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}

/* === FY REPORT BUTTON CONTAINER (TOP-RIGHT) === */
.fy-report-header {
  position: absolute;
  top: 75px;
  right: 10px;
  z-index: 10;
}

/* === FY REPORT ICON === */
.fy-report-icon {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fy-report-icon:hover {
  opacity: 1;
  transform: scale(1.2);
  cursor: pointer;
}

/* === FY ACTION STACK === */
#actionStack.fy-action-stack {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  padding: 6px 0;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 12px;
}

.fymuteToggleBtn {
  position: absolute;
  bottom: 20%;
  left:75%;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 6px;
  font-size: 20px;
  z-index:10;              /* sit above the video/controls */
  pointer-events:auto;  
  display: none; /* ✅ start hidden */
  width: 50px;
  height: 50px;
}


.fymuteToggleBtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.fy-info-block {
  position: absolute;
  bottom: 110px;
  left: 6px;
  width: 300px;
 /* background-color: rgba(0, 0, 0, 0.65);*/
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  z-index: 5;
  font-size: 14px;
  line-height: 1.4;
}

.fy-info-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}

.fy-info-date {
  font-style: italic;
  margin-bottom: 6px;
}

.fy-info-description .short-text,
.fy-info-description .full-text {
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
}

.fy-info-description .full-text {
  display: none;
}

.fy-info-description.expanded .short-text {
  display: none;
}

.fy-info-description.expanded .full-text {
  display: block;
}

.toggle-text-link {
  display: inline-block;
  margin-left: 4px;
  color: #075de3;
  text-decoration: underline;
  cursor: pointer;
}
.object-avatar {
  width: 45px;  
  border-radius: 50%;
  object-fit: cover; 
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  display: block;
  margin-bottom: 6px;
}
.fy-info-title {
  font-size: 15px;
  font-style: italic;
  color: #eee;
  margin-bottom: 6px;
  line-height: 1.4;
}
.fyaction-label {
  font-size: 0.65rem;
  color: #ffffff;
  line-height: 1.1;
  text-align: center;
  margin: 2px 0 0 0;
  height: 12px;
}

@keyframes pulseGlow {
  0%   { filter: drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
  50%  { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
  100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
}

.live-overlay {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 95%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  z-index: 2;
  height: auto;               /* Allow it to expand */
  overflow: visible;          /* Prevent clipping */
  padding: 10px 0;            /* Optional: breathing room */
}

.live-icon {
  width: 100px !important;
  height: 100px !important;
  margin-right: 15px;
}

.live-text {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 1px 1px 5px #000;
  /*animation: pulseText 1.5s infinite;*/
}

@keyframes pulseText {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.live-alert-corner {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}

.inc-alert-icon {
  width: 48px !important;
  height: 48px !important;
  right: 10px !important;
  object-fit: contain !important;
  position: absolute;
  bottom: 1px;
}

/* Pulse animation (already defined in your system, but just in case) */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 6px rgba(255, 0, 0, 0.2); transform: scale(1); }
  50%  { box-shadow: 0 0 12px rgba(255, 0, 0, 0.6); transform: scale(1.05); }
  100% { box-shadow: 0 0 6px rgba(255, 0, 0, 0.2); transform: scale(1); }
}

.inc-pulse {
  animation: pulseGlow 1.2s infinite;
}
.inc-pulse img {
  animation: pulseGlow 1.2s infinite;
}
.media-meta-overlay {
  position: absolute;
  bottom: 0px; /* push it above the action stack */
  left: 10px;
  color: white;
  font-size: 14px;
  max-width: 80%;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  background-color: rgba(0, 0, 0, 0.25);
  padding: 5px 10px 5px 5px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.media-meta-date {
  font-weight: 400;
  margin-bottom: 2px;
}

.media-meta-desc {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.3;
  white-space: pre-wrap;
}

#mediaModal.is-video .media-meta-overlay {
  bottom: 85px; /* raise it when controls are visible */
}
.event-meta {
  font-size: 0.9em;
  color: #ddd;
  margin-bottom: 0.75rem;
  line-height: 1.4em;
}

.event-meta{
  margin-bottom: 0.4em;
  color: #333;
}
.event-location {
  margin-bottom: 0.4em;
  color: #000
}
.event-special {
  margin-bottom: 0.4em;
  color: #333
}
.event-meta strong {
  color: #333;
  font-weight: 600;
  margin-right: 4px;
}

.event-meta .duration {
  font-style: italic;
  color: #aaa;
  font-size: 0.85em;
}

.event-virtual {
  margin-bottom: 0.4em;
}

.virtual-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;   
  padding: 2px 10px;
  font-size: 12px;
  color: #2252f1;
  font-style: normal;
  transition: background 0.2s ease;
}

.virtual-badge:hover {
 background: var(--resist-blue-hover, #aabaf3);
}

.virtual-badge img {  
  width: 32px; 
}

.event-datetime-float {
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 2;
}

.event-date-time {
  font-weight: normal;
  font-size: 0.9em;
  color: #444;
}

.event-datebox .duration {
  font-style: italic;
  font-weight: normal;
  color: #666;
  font-size: 0.85em;
}
.event-time {
  font-weight: 500;
  color: #444;
  margin-left: 6px;
  font-size: 0.9em;
}

.event-datebox .duration {
  font-style: italic;
  font-weight: normal;
  color: #666;
  font-size: 0.85em;
  margin-left: 6px;
}
.event-datebox {
   background-color: rgba(255, 255, 255, 0.90);
  color: #111;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 0.95em;
  font-weight: bold;
  line-height: 1.4em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.event-date-icon,
.event-time-icon {
  font-size: 1em;
  margin-right: 2px;
}

.event-time {
  font-weight: 500;
  color: #444;
  font-size: 0.9em;
}

.event-datebox .duration {
  font-style: italic;
  font-weight: normal;
  color: #666;
  font-size: 0.85em;
}
.event-source-logo {
  margin: 0px 0 8px 0;
  text-align: left;
}

.event-source-logo img {
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}
.volunteer-toggle-buttons {
  display: flex;
  justify-content: center;
  gap: 12px; /* space between buttons */
  margin: 15px 0;
  flex-wrap: wrap; /* Optional: allows wrapping on small screens */
}

.volunteer-toggle-btn {
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.volunteer-toggle-btn :hover {
 background: var(--resist-blue-hover, #aabaf3);
 color: #fff;
}
.volunteer-toggle-btn.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.volunteer-thankyou {
  display: none; /* This will be toggled dynamically via JS */
  background-color: #e6f9e6;
  color: #333;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.volunteer-thankyou img {
  float: right;
  width: 60px;
  height: auto;
  margin-left: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.gotit-text {
  display: inline-block;
  font-weight: bold;
  color: #4CAF50;
}

.pulseOnce {
  animation: pulseOnce 1s ease-in-out;
}

@keyframes pulseOnce {
  0% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.act-confirmation {  
  text-align: center;
  margin-top: 8px;
}

.gotit-text {
  font-weight: bold;
  color: #2e7d32; /* dark green */
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* pulse animation */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.pulse {
  animation-name: pulse;
}

.act-petition-link-wrap {
  margin-top: 8px;
  text-align: left; /* or center/right if needed */
}

.act-petition-link-wrap .action-icon-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #0077cc;
  text-decoration: underline;
  cursor: pointer;
}

.act-petition-link-wrap .action-icon-button:hover {
  color: #005fa3;
}
.registry-tile-label {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  background: rgb(243 5 5 / 50%);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
  max-width: 90%;
  z-index: 2;
  position: absolute;
  bottom: 4;
  left: 2;
  
}

.registry-tile-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: #ffd6d6;
  display: block;
  margin-top: 2px;
  word-break: break-word;
}
.registry-info {
  position: relative;
  background-color: #ffffff;
  padding: 6px 6px;
  font-size: 13px;
  color: #222;  
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Segoe UI', sans-serif;
  min-height: 210px; 
}

.registry-intel-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.registry-intel-box {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.registry-intel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.registry-intel-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #444;
}

.registry-intel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registry-intel-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.registry-intel-input {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}

.registry-intel-charcount {
  font-size: 12px;
  color: #666;
  text-align: right;
}

.registry-intel-submit {
  background: #900;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.registry-tile-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;  
}

.registry-avatar-col {
  flex: 0 0 90px;
}

.registry-face-img {
  height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.registry-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}



.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.clickable-row:hover {
  background-color: #f5f5f5;
}
.fktype-icon-link {
  display: inline-block;
  text-decoration: none;
}

.fktype-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.add-intel-button {
  background-color: var(--resist-blue-dark);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: fit-content;
  margin-left: auto; /* This pushes it to the right */
  margin-right: 12px;
}
.drawer-tabs-header {
  display: flex; gap: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 15px;
}
.drawer-tab-btn {
  background: none; border: none; padding: 8px 16px; font-weight: bold; cursor: pointer; border-radius: 6px 6px 0 0;
}
.drawer-tab-btn.active { background: #007bff; color: #fff; }
.drawer-section { display: block; }
.drawer-section.hidden { display: none; }

.watch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  cursor: pointer; 
  margin-left: 8px;
}

.watch-toggle input {
  cursor: pointer;
}
.tile-joined { 
  display: flex; 
  flex-direction: column; 
}
.watch-wrap { 
  margin-top: 6px; 
}
.tracking-green { color: green; }
.tracking-red   { color: red; }


/* ===== Wallet (epw-*) — kept as-is ===== *//* ===== Wallet (epw-*) — kept as-is ===== */
.epw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.epw-card{border:1px solid #e5e7eb;border-radius:10px;padding:8px;background:#fff}
.epw-kpi{font-size:24px;font-weight:700}
.epw-sub{color:#6b7280;font-size:12px}
.epw-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.epw-btn{padding:4px 8px;border-radius:8px;border:1px solid #111;background:#111;color:#fff;text-decoration:none;cursor:pointer;font-size:13px;margin-top:4px}
.epw-btn--light{background:#fff;color:#111}
.epw-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.epw-table th,.epw-table td{border:1px solid #e5e7eb;padding:6px 8px;text-align:left;vertical-align:top}
.epw-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #e5e7eb;background:#f9fafb}
.epw-muted{color:#6b7280}
.epw-ok{color:#065f46}
.epw-bad{color:#991b1b}
.epw-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.epw-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.epw-row-between{display:flex;justify-content:space-between;align-items:center}
.epw-input{padding:8px;border:1px solid #e5e7eb;border-radius:8px}
.epw-input--sm{width:80px}
.epw-select{padding:6px;border:1px solid #e5e7eb;border-radius:8px}
.epw-section{margin-top:12px}
.epw-h4{margin:0 0 8px;font-size:16px;font-weight:600}
.epw-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999}
.epw-modal.hidden{display:none}
.epw-modal__card{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:16px;min-width:320px;max-width:92vw}

/* ================= Wallet v2 (scoped) — consolidated ================= */

/* Top grid: always two columns, centered contents */
#walletTab .epw2-topGrid{
  display:grid;
  grid-template-columns:1fr 1fr; /* force two columns, even on small screens */
  gap:12px;
  text-align:center;
}
#walletTab .epw2-topGrid .epw-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
}
/* Center small horizontal rows within those cards */
#walletTab .epw2-topGrid .epw-row,
#walletTab .epw2-topGrid .epw2-buyRow,
#walletTab .epw2-topGrid .epw2-earnRow{
  justify-content:center;
}

/* KPI sizes */
#walletTab .epw2-kpi-gap-sm{margin-bottom:8px;margin-top:4px}
#walletTab .epw2-kpiXL{
  font-size:clamp(18px,5.5vw,22px);
  font-weight:600;
  line-height:1.1;
  margin:6px 0 12px;
}
#walletTab .epw2-kpiLG{
  font-size:clamp(18px,4.8vw,18px);
  font-weight:700;
  line-height:1.1;
}

/* Buy panel (inline version) */
#walletTab .epw2-buyPanel{padding:0;border:none}
#walletTab .epw2-buyRow{display:flex;gap:8px;align-items:center}
#walletTab .epw2-buyQty{width:80px}
#walletTab .epw2-buyHint{margin:45px 0 8px}
/* Keep compact buy input tidy while centered (legacy inline input) */
#walletTab .epw2-topGrid #qty.epw-input--sm{width:80px;min-width:80px}

/* Subscription row */
#walletTab .epw2-subscribeBlock{margin-top:14px}
#walletTab .epw2-subRow{display:flex;align-items:center;gap:8px}
#walletTab .epw2-subIconLink{display:inline-flex;align-items:center}
#walletTab .epw2-subIcon{width:32px;height:32px;cursor:pointer;transition:transform .15s ease}
#walletTab .epw2-subIconLink:hover .epw2-subIcon{transform:scale(1.05)}
#walletTab .epw2-subIconLink:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:6px}
#walletTab .epw2-manageBtn{padding:4px 8px;font-size:12px}
#walletTab .epw2-subscribeLink{font-size:13px}
#walletTab .epw2-hiddenBadge{display:none}
#walletTab .epw2-subControls{margin-top:8px}
#walletTab .epw2-subGap{margin:0 0 6px}
#walletTab .epw2-supportSelect{margin-bottom:8px}
#walletTab .epw2-subNote{margin:0 0 8px}

/* Monetization button */
#walletTab .epw2-joinBtn{display:inline-flex;align-items:center;gap:6px}
#walletTab .epw2-joinBtn .spinner{display:none;margin-left:2px}

/* Two-column mini stats (available / pending) */
#walletTab .epw2-twoCol{
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin:4px 0 12px;
}
#walletTab .epw2-cell{flex:1 1 0;text-align:center;min-width:0}
#walletTab .epw2-cellLabel{font-size:12px;margin-top:2px}

/* Payout form (no forced display so JS can toggle) */
#walletTab .epw2-payoutWrap{margin-top:6px}
#walletTab .epw2-payoutLabel{font-size:12px;color:#6b7280;margin-bottom:4px}
#walletTab .epw2-payoutRow{display:flex;align-items:flex-end;gap:8px;margin-bottom:8px;justify-content:center}
#walletTab .epw2-payoutField{flex:1}
#walletTab .epw2-payoutInput{max-width:100px}
#walletTab .epw2-payoutMsg{min-height:18px;font-size:12px}
#walletTab .epw2-payoutMsg--ok{color:#059669}
#walletTab .epw2-payoutMsg--error{color:#b91c1c}

/* History card */
#walletTab .epw2-historyCard{margin-top:12px}
#walletTab .epw2-historyHeader{display:flex;align-items:center;justify-content:space-between}
#walletTab .epw2-historyTitle{margin:0}
#walletTab .epw2-historyToggle{font-size:13px}
#walletTab .epw2-historyWrap{margin-top:10px}
#walletTab .epw2-filterRow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
#walletTab .epw2-historySubhead{margin:14px 0 6px}

/* Tighten things slightly on very small screens */
@media (max-width:420px){
  #walletTab .epw2-topGrid{gap:10px;text-align:center}
  #walletTab .epw2-twoCol{gap:10px}
  #walletTab .epw2-kpiLG{font-size:20px}
}

/* ==== Wallet modals (scoped) ==== */
#walletTab .epw2-modal.hidden{display:none}
#walletTab .epw2-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-start;justify-content:center;z-index:9999;
  --epw2-modal-top:30vh;
  padding-top:var(--epw2-modal-top);
}
#walletTab .epw2-modalCard{
  background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);
  width:min(92vw,420px);padding:14px;
  max-height:calc(100vh - var(--epw2-modal-top) - 24px);
  overflow-y:auto;
}
#walletTab .epw2-modalHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#walletTab .epw2-modalTitle{margin:0;font-size:16px;font-weight:600}
#walletTab .epw2-modalClose{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}
#walletTab .epw2-modalBody{display:grid;gap:8px}
#walletTab .epw2-modalFooter{display:flex;justify-content:center;margin-top:10px}
#walletTab .epw2-modalNote{color:#6b7280;font-size:12px;margin:0 0 4px}
#walletTab .epw2-label{display:block;font-size:12px;color:#6b7280;margin-bottom:4px}
#walletTab .epw2-inlineRow{display:flex;gap:8px;align-items:center}
#walletTab .epw2-buyQty{width:120px;min-width:100px} /* modal quantity input */
#walletTab .epw2-portalHint{font-size:12px;color:#6b7280}

/* Buy modal layout tweaks */
#walletTab .epw2-rowFields{
  display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin-top:6px
}
#walletTab .epw2-col{min-width:150px;text-align:left}
#walletTab #buyQty.epw2-buyQtyInput{width:120px}
#walletTab .epw2-buySupportSelect{min-width:140px}
#walletTab .epw2-modalActions{margin-top:12px;display:flex;justify-content:center}

/* Buy modal intro blurb */
#walletTab .epw2-modalIntro{
  margin-top:6px;padding:10px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;
  font-size:12px;color:#374151;line-height:1.45;text-align:left
}
/* Slightly reduce the offset on short viewports */
@media (max-height:700px){ #walletTab .epw2-modal{ --epw2-modal-top:18vh } }
@media (max-height:540px){ #walletTab .epw2-modal{ --epw2-modal-top:10vh } }

/* Misc */
.EP-group-submit{display:flex;align-items:center;justify-content:center;margin-bottom:10px}

/* Logout link under the drawer handle */
.ep-logout{
  display:none; /* hidden until drawer is open */
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  margin:12px 0 0 0;justify-content:center;font-size:14px
}
  .actdash-btn-right{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:8px 12px; border:1px solid #cbd5e1; border-radius:10px;
    background:#fff; cursor:pointer;
    margin-left:auto;           /* flex containers */
    float:right;                /* non-flex containers */
  }
  .actdash-btn-right:hover{ background:#f8fafc; }


/* --- LIVE state --- */
.avatar-circle.is-live{
  border-color: #ff4b4b;
  overflow: hidden;           /* let the ring glow extend beyond the circle */
  box-shadow: 0 0 0 0 rgba(255,75,75,.55);
  animation: liveRing 1.8s ease-out infinite;
  position: absolute;          /* ensure it still anchors bottom-left */
  z-index: 2;                  /* keep above banner content */
}
@keyframes liveRing {
  0%   { box-shadow: 0 0 0 0   rgba(255,75,75,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,75,75,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,75,75,0); }
}
@media (prefers-reduced-motion: reduce){
  .avatar-circle.is-live{ animation: none; box-shadow: 0 0 0 0 rgba(255,75,75,0.35); }
}

/* Live badge: sits on the top-right quadrant of the avatar */
.avatar-circle .live-badge{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;

  /* show PNG as-is (no masking) */
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.avatar-circle .live-badge img{
  display: block;
  width: 28px;      /* tweak as needed */
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.avatar-wrap{
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 100px;
  height: 100px;
  z-index: 2; /* above banner */
}
.live-badge-outer{
  position: absolute;
  top: 47px;                  /* sits OUTSIDE the circle */
  left: 90px;
  z-index: 3;
  display: block;
  line-height: 0;              /* tighter click target */
}
.live-badge-outer img{
  display: block;
  width: 58px;                 /* larger badge */
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

@keyframes liveBadge{
  0%   { box-shadow: 0 0 0 0   rgba(255,75,75,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255,75,75,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,75,75,0); }
}
@media (prefers-reduced-motion: reduce){
  .avatar-circle .live-badge::before{ animation: none; }
}

/* Desktop hover nicety */
@media (hover:hover){
  .avatar-circle.is-live:hover{
    filter: saturate(1.05);
  }
}
/* Live row inside an incident tile */
.live-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  margin-top: 8px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
}

.live-mini {
  position: relative;
  flex: 0 0 100px;       /* width of each mini player */  
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  text-decoration: none;
}

.live-mini .live-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.live-mini .live-label {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  font: 700 11px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: rgba(220,38,38,.95);
  color: rgb(255,255,255);
  border-radius: 6px;
  letter-spacing: .02em;
}

.live-mini .live-pulse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(220,38,38);
  box-shadow: 0 0 0 0 rgba(220,38,38,.7);
  animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0   rgba(220,38,38,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0   rgba(220,38,38,0); }
}

/* optional: small scrollbar styling */
.live-strip::-webkit-scrollbar       { height: 6px; }
.live-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 6px; }

.object-avatar-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* this ensures the whole thing behaves like your old inline avatar */
  position: relative;
}
/* status sits in normal flow (no overlap), centered */
.fy-status-icon{
  position: static;          /* <- key change: not absolute */
  text-align: center;
  pointer-events: none;
  line-height: 1;
  margin-bottom: 4px;        /* little space before the avatar */
}

.fy-status-label{
  font-size: .75rem;
  font-weight: 700;
  color: #bbb;              /* double ## for CFML */
  letter-spacing: .05em;
  margin-bottom: 4px;
}

/* bigger icon */
.fy-live-icon{
  width: 34px;
  height: 34px;
  vertical-align: middle;
  filter: none;
}

/* keep your pulse */
.fy-live-icon.pulse{ animation: fyPulse 1.3s infinite; }
@keyframes fyPulse{
  0%   { box-shadow: 0 0 0 0 rgba(230,0,45,.6); border-radius: 50%; }
  70%  { box-shadow: 0 0 0 12px rgba(230,0,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,0,45,0); }
}

  /* ---- LIVE overlay CTA ---- */
  .fy-live-join{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.06em;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 80%);
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
    pointer-events:none;
  }  
  .fy-live-join a{
    pointer-events:auto; background:rgba(230,0,45,.9); padding:.45rem .75rem; border-radius:.5rem;
    color:#fff; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  #mediaWrapper { position: relative; } /* if not already */
.media-del-btn-modal{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: rgba(200,0,0,.85);
  color: #fff;
  cursor: pointer;
}
.media-del-btn-modal:hover{ background: rgba(160,0,0,.9); }
/* ===== Base layout & typography ===== */
/* ===== Base layout & typography ===== */
.help-resist{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:#111}
.help-wrap{max-width:1100px; margin:0 auto; padding:16px}

/* Top bar */
.help-topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 12px; border-bottom:1px solid #eee}
.help-topbar .title{font-weight:800; letter-spacing:.2px}
.help-topbar .links{display:flex; gap:10px; flex-wrap:wrap}
.help-topbar a{color:#06f; text-decoration:none}
.help-topbar a:hover{text-decoration:underline}

/* ===== Grid: sidebar (nav) + main (desktop) ===== */
.help-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  grid-template-areas: "nav main";
  gap:20px;
  margin-top:16px;
}
.help-nav{ grid-area: nav; position:sticky; top:12px; align-self:start; border:1px solid #eee; border-radius:12px; padding:12px; background:#fff }
.help-nav h4{ margin:0 0 8px; font-size:14px; color:#444 }
.help-nav a{ display:block; padding:6px 6px; border-radius:8px; color:#222; text-decoration:none }
.help-nav a:hover{ background:#f7f7f7 }
.help-grid > main{ grid-area: main }

/* Sections */
.help-section{ padding:10px 2px; border-top:1px solid #f2f2f2; margin-top:14px; scroll-margin-top:72px }
.help-section:first-of-type{ border-top:none }
.help-section h2{ margin:0 0 8px; font-size:20px; line-height:1.25 }
.help-kicker{ margin:0 0 8px; color:#444 }
.help-bullets{ margin:8px 0 0 0; padding-left:18px }
.help-bullets li{ margin:6px 0 }
.help-callout{ background:#f9fbff; border:1px solid #e8f0fe; padding:12px; border-radius:10px }
.help-badge{ display:inline-block; font-size:12px; background:#111; color:#fff; padding:2px 8px; border-radius:999px; vertical-align:middle }

/* Buttons */
.help-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 }
.btn{ appearance:none; border:1px solid #ddd; background:#f7f7f7; padding:9px 12px; border-radius:10px; font-weight:700; cursor:pointer; text-decoration:none; color:#111 }
.btn:hover{ background:#f0f0f0 }
.btn-primary{ background:#111; color:#fff; border-color:#111 }

/* Icons inside H2s */
.helpicon{ width:20px; height:20px; vertical-align:-4px; margin-right:6px; border-radius:4px }

/* ===== Mobile: nav goes ON TOP as a pill bar ===== */
@media (max-width: 980px){
  .help-grid{
    grid-template-columns:1fr;                /* single column */
    grid-template-areas:
      "nav"
      "main";                                 /* nav above content */
    gap:12px;
  }
  .help-nav{
    position:sticky; top:0; z-index:5;        /* keep visible as you scroll */
    border-radius:12px;
    padding:10px 10px 8px;
    /* turn into horizontal pill bar */
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .help-nav h4{ font-size:13px; margin:0 0 6px }
  .help-nav a{
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:8px; margin-bottom:8px;
    padding:7px 10px;
    border:1px solid #eee; border-radius:999px;
    background:#fff;
  }
  .help-nav a:hover{ background:#f7f7f7 }
  .help-section{ scroll-margin-top:96px }     /* extra offset for sticky pill bar */
}

/* Very small phones: slightly denser spacing */
@media (max-width: 420px){
  .help-wrap{ padding:12px }
  .help-section h2{ font-size:18px }
  .btn{ width:100%; justify-content:center }
}