/* styles.css */
/* ALL YOUR ORIGINAL CSS STYLES WITH RELATIVE PATHS */

:root { --header-h: 90px; } /* Removed --vvb calculation: using fixed position is the modern standard */




@media (max-width: 900px){
  :root { --header-h: 105px; } /* match your mobile logo */
}



/* Dynamic viewport */
/* Stable root sizing to avoid fixed-bottom drift when Safari UI collapses */
html {
  height: -webkit-fill-available;                  /* iOS Safari */
}
body {
  min-height: 100svh;                              /* “small” vh = stable */
  min-height: -webkit-fill-available;              /* fallback for older iOS */
  height: auto;
  overscroll-behavior: contain;
}
/***** Dynamic viewport (E N D)****/


/* Global styles */
body {
    font-family: 'Segoe UI Historic', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; /*Color original era #f0f2f5*/
}

/* ---------- NEW: prevent pre-JS flash ---------- */
.login-form{ display:none; }   /* hidden until JS decides */
.mobile-nav{ display:none; }   /* idem */

/* Auth-only UI: hidden until a valid session */
.profile-controls,
#staticButton-insideHeaven,
#logoutBtn,
.post-form,
.feed,
.right-sidebar,
#firstBouquetText { display: none; }
.mobile-nav{ display:none;  } /* inline-flex / grid are fine too */

/* ---------- NEW block ends ---------- */


/* ===== Utility: quickly hide any element ===== */
.hidden {
    display: none !important;
}
/*************quickly hide any element (E N D)****/


/* Static buttons:
- #staticButton-insideHeaven stays fixed (Your Heaven)
- #staticButton is placed by .profile-controls */
#staticButton-insideHeaven {
  position: fixed;
  left: 20px;
  top: 245px !important; /* keep below the profile pill on tablets */
  z-index: 1000;
}

#staticButton {
  position: static !important;
  left: auto !important;
  top: auto !important;
}

/* Header styles */
.header {
    background-color: #ffffff; /*Color original era #e6e9f0*/
    color: #3b5998;
    padding: 0.5rem; /* Added some padding for better spacing */
    text-align: center;
    position: fixed;
    top: 0;
    left: 0; /* Changed to 0 for consistency */
    width: 100%;
    z-index: 1000;
    font-size: 14px;
    height: var(--header-h); /* set via CSS variable */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-evenly; /* Space between logo and buttons */
    align-items: center; /* Center items vertically */
    padding: 5px; /* Add some padding */
}     

.header h1 {
    flex: 1; /* Allow title to take available space */
    text-align: center; /* Center the title text */
    margin: 0; /* Remove default margin */
}

.header button {
    margin: 0 5px; /* Space between buttons */
}

/* Login and post forms */
.login-form, .post-form {
    margin: 9rem auto 0;
    padding: 2rem;
    top: 10em; /* Aligns it to the top of the viewport */
    background-color: white;
    border-radius: 5px;
    width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* LOGO FACE en el "Header" — scale by height, keep aspect ratio */
/* LOGO FACE base — neutral; sizes are set by media queries below */
.logo-Face {
  height: auto;
  width: auto;
  max-height: none;
  max-width: none;
  object-fit: contain;
  margin-left: -12px;
  margin-top: 0px;
  display: inline-block;
}

.logo-container {
    flex: 0; /* Keep the logo fixed to the left */
}                

/* Feed and posts */
.feed {
    margin: 0rem auto;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-sizing: border-box;
    width: 95%;
    max-width: 700px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow-x: hidden; /* ⛔ Prevents side scrolling */
}

.post {
    border: 1px solid #ccc; /* Light border around each post */
    border-radius: 10px; /* Rounded corners */
    padding: 15px; /* Padding inside the post */
    margin: 10px auto; /* Center the post and add margin */
    margin-bottom: 20px;
    background-color: #f9f9f9; /* Light background for posts */
    width: 100%; /* Set to desired width, e.g., 350px or a percentage */
    max-width: 400px; /* Set a maximum width */
    border: 1px solid #ccc; /* Optional: Add border for visual separation */
    overflow: hidden; /* Prevent overflow */
    position: relative; /* Added for positioning overlays */
    box-sizing: border-box;
    word-wrap: break-word;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comment-on-post {
    margin-top: 2px; /* Space above the comment */
    padding: 5px; /* Add some padding */
    border-radius: 3px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Background color for comments */
    word-wrap: break-word; /* Ensure long words break */
}

.post img, .post video {
    max-width: 100%; /* Ensure media fits within the post */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Rounded corners for media */
    display: block; /* Ensure the media elements are block-level */
}

.post .media-container {
    width: 100%; /* Ensure it takes the full width of the post */
    position: relative; /* Ensure overlays are positioned correctly */
}

/* Buttons */
button { 
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners for buttons */
    padding: 5px 10px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
}

button:hover {
    background-color: #d1d6dc; /* Darker shade on hover */
}

input[type="text"] {
    width: 100%; /* Full width for comment input */
    padding: 8px; /* Padding inside input */
    margin-top: 5px; /* Space above the input */
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px; /* Rounded corners */
}

/* Boton de NOMBRE de USUARIO */
.special-button { 
    background-color: #f0f7f200; /* Custom background color */
    color: rgb(6, 6, 6);
    padding: 0rem 0rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 0;
    
    /* Custom font styles */
    font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
    font-size: 16px; /* Change to your desired font size */
    font-weight: bold; /* Change to your desired font weight */
    font-style: normal; /* Change to italic if desired */
}

.special-button:hover {
    background-color: #a8acb332; /* Custom hover color */
}

/* Rotulo para GIORGIO'S HEAVEN */
.insideHeaven-button {
    background-color: #f0f7f200; /* Custom background color */
    color: rgb(6, 6, 6);
    padding: 0rem 0rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 0;
    
    /* Custom font styles */
    font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
    font-size: 16px; /* Change to your desired font size */
    font-weight: bold; /* Change to your desired font weight */
    font-style: normal; /* Change to italic if desired */
}

.header-buttons button {
    background-color: #ffffff; /* Button color */
    color: #3b5998;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.insideHeaven-button:hover {
    background-color: #a8acb332; /* Custom hover color */
}

.header-buttons button:hover {
    background-color: #f1f2f6; /* Darker shade for hover effect */
}

/* AVATAR global */
.avatar {
    width: 25px; /* Set the desired width */
    height: 25px; /* Set the desired height */
    border-radius: 50%; /* Makes the image circular */
    margin-right: 8px; /* Spacing between the image and text */
    vertical-align: middle; /* Aligns the image vertically with the text */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    overflow: hidden; /* Ensures any overflow is hidden */
}

.avatar-miniature {
    border-radius: 50%; /* Makes the avatar circular */
    width: 25px; /* Width of the miniature */
    height: 25px; /* Height of the miniature */
    margin-bottom: 10px; /* Space below the avatar */
}

/* Make every miniature avatar show a pointer on hover */
.post .avatar-miniature{
  cursor: pointer;
}

.welcome-text h3 {
    font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font */
    font-size: 24px; /* Adjust the size as needed */
    color: #9a9da1; /* Change to your desired color */
    text-align: center;      /* Center the text */
    margin-bottom: 0px;     /* Add some space below the heading */
    font-weight: bold;       /* Make the text bold */
    text-transform: none; /* Transform the text to uppercase */
}

/* BOUQUET SECTION */
/* Mobile instructions: visible under header; never intercept taps */
.first-bouquet-text {
    position: relative;        /* was: sticky */
    top: auto;                 /* let JS control show/hide; no sticky box */
    right: auto;
    margin: 8px 12px 6px;      /* normal flow; no giant left margin */
    width: auto;
    z-index: 900;              /* below modals, above feed content */
    padding: 10px;
    color: #202021;
    text-align: right;

    /* Custom font styles */
    font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
    font-size: 16px; /* Change to your desired font size */
    font-weight: bold; /* Change to your desired font weight */
    font-style: normal; /* Change to italic if desired */

    pointer-events: none;      /* text never blocks taps */

  }

/* Instructions Bouquete buttons- CONTAINER */
.INSTRUCTIONS-bouquet-button-container {
    display: none;
    position: fixed; /* Keep the container fixed */
    top: calc(var(--header-h, 64px) + 56px); /* same visual spot under header */
    right: 20px; /* Adjust the horizontal position */
    z-index: 1000; /* Ensure it overlays other content */
    margin-top: 20px; /* Space between bouquet text and buttons */
    justify-content: center;
    background-color: #f5f5f5; /*Usar este primero #f5f5f5 **** Color original era #f0f2f5*/

    /* Keep its hitbox compact so it can't overlay the feed */
    pointer-events: auto;
}

/* Bouquete Buttons */
.INSTRUCTIONS-bouquet-small-button {
    background-color: #f5f5f5; /*Color original era #f0f2f5*/
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 5px; /* Reduce padding for a tighter look */
    margin: 2px; /* Adjust this value to control the space between buttons */
}

/* Size of the BOUQUETS images */
.INSTRUCTIONS-bouquet-small-button img {
    width: 40px; /* Size of the button image */
    height: 40px; /* Size of the button image */
    background-color: #f5f5f5; /*Color original era #f0f2f5*/
    transition: transform 0.9s; /* Smooth transition for scaling */
}

.INSTRUCTIONS-bouquet-small-button:hover {
    background-color: #a8acb332; /* Darker shade for hover effect */
    transform: scale(1.2); /* Scale down to 90% of the original size */
}

.Bouquet-Post-button-container {
    display: flex;
    justify-content: space-between; /* Adjust alignment */
    margin-bottom: 10px; /* Space above Like and Comment buttons */
}

.buquet-post-action-button {
    margin-right: 12px; /* Space between buttons */
    margin-left: 10px; /* Space between buttons */
    background-color: #f9f9f9; /* Button background color */
    color: #9a9da1; /* Button text color */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners for buttons */
    cursor: pointer; /* Pointer cursor on hover */
}

.buquet-post-action-button:hover {
    background-color: #a8acb332; /* Darker shade for hover effect */
}

.overlay-image {
    position: absolute;
    z-index: 10; /* Ensure the overlay is above the media */
}

/* Modal Dialog BOX for adding bouquet "YES" and "NO" */
.modal-bouquet {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    justify-content: center; /* Center the content */
    align-items: center;
}

.modal-bouquet-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

/* Payment Modal Styles */
.payment-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1002; /* Sit on top, above other modals */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    justify-content: center; /* Center the content */
    align-items: center;
}

.payment-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 350px;
}

.payment-modal-content h3 {
    margin-bottom: 20px;
}

.payment-modal-content .input-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.payment-modal-content .input-row input {
    width: 70px;
    padding: 5px;
    text-align: center;
    font-size: 16px;
}

.payment-modal-content .input-row span {
    align-self: center;
}

.payment-modal-content .expiration-date {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.payment-modal-content .expiration-date input {
    width: 50px;
    padding: 5px;
    text-align: center;
    font-size: 16px;
}

.payment-modal-content .expiration-date span {
    margin: 0 5px;
    font-size: 18px;
}

.payment-modal-content .cvv-input {
    width: 80px;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 15px;
}

.payment-modal-content .button-row {
    margin-top: 20px;
}

.payment-modal-content .button-row button {
    margin: 0 10px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

.payment-modal-content .button-row button:hover {
    background-color: #0056b3;
}

/* GIVERS List Styles */
.givers-list {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    z-index: 1000;
}

.givers-list h3 {
    margin-top: 5;
    font-size: 14px;
    text-align: left;
}

.giver-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.giver-item:hover {
    background-color: #f1f1f1;
}

.giver-item img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.giver-name {
    font-size: 12px;
    color: #333;
}
/* ***** END OF CSS for GIVERS List***** */

/* === Profile-popover (click any avatar) ============================== */
.profile-popover{
  position:absolute;              /* pins next to the clicked avatar */
  background:#fff;
  padding:12px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transform-origin:top left;      /* for the flip-card entrance */
  animation:flipIn .35s ease forwards;
  z-index:1200;                   /* above normal content */
}
/* avatar inside the card */
.profile-popover img{
  width:120px;
  height:120px;
  border-radius:6px;
  object-fit:cover;
  display:block;
}
/* close “×” button */
.profile-popover .close-popover{
  position:absolute;
  top:6px; right:8px;
  background:transparent;
  border:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
/* Safari (iOS/iPadOS) sometimes clips inline‐block buttons at 22 px font size */
.profile-popover .close-popover{
  line-height: 22px;  /* ensure full height so the glyph isn’t cropped */
}

.profile-popover .close-popover{
  color:#333;            /* always dark so it shows on white */
}
/* ——— tiny “Change picture” button inside the pop-over ——— */
.profile-popover .change-btn{
  display:block;
  margin:6px auto 0;
  padding:4px 10px;
  font-size:13px;
  border:1px solid #1877f2;
  border-radius:4px;
  background:#1877f2;
  color:#fff;
  cursor:pointer;
}
.profile-popover .change-btn:hover{ background:#0b64d9; }

.scroll-arrow img{
  width:22px; height:22px;
  pointer-events:none;       /* so the whole button is clickable */
}


/* sweet card-flip entrance */
@keyframes flipIn{
  0%{ transform:rotateX(90deg) scale(.5); opacity:0; }
  100%{ transform:rotateX(0deg)  scale(1); opacity:1; }
}
/* ===========Profile-popover (E N D)================================== */
/* ==================================================================== */


/* 🌸 Bouquet Overlays for Posts */
.bouquet-overlay-container {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  padding-left: 6px;
}

/* Rail: sits between frame and album */
.bouquet-layer{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap:6px 8px;                 /* tighter, lush */
  padding:10px 12px;
  margin:6px 0 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) inset, 0 2px 8px rgba(0,0,0,0.06);
  align-items:center;
  justify-items:center;
  pointer-events:none;         /* keeps clicks on the media/lightbox */
}

/* Each bouquet icon */
.bouquet-overlay{
  width:34px;
  height:34px;
  object-fit:contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)) saturate(1.05);
  transform: translateY(0) scale(1);
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
  opacity: 1;
}

/* Freshly-added bouquet: subtle pop-in */
.bouquet-overlay.bouquet-new{
  animation: bouquet-pop 220ms ease-out forwards, bouquet-glow 900ms ease-out;
}

@keyframes bouquet-pop{
  0%   { transform: translateY(6px) scale(.82); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bouquet-glow{
  0%   { filter: drop-shadow(0 0 0 rgba(255,180,0,.0)) saturate(1.1); }
  30%  { filter: drop-shadow(0 0 8px rgba(255,180,0,.45)) saturate(1.15); }
  100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)) saturate(1.05); }
}

/* Slightly larger on narrow screens for “lush” feel */
@media (max-width: 480px){
  .bouquet-overlay{ width:38px; height:38px; }
  .bouquet-layer{ gap:6px 6px; padding:12px; }
}

/******************Bouquet Overlays for Posts END******************************/

.post img,
.post video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ✨ Username button container inside each post */
.user-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/********************************************************************/
/* ✨ Username text styled as a button (non-clickable for now) */
.username-button {
    font-family: 'Segoe UI Historic', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: rgb(6, 6, 6);
    background-color: transparent;
    border: none;
    cursor: default;
    padding: 0;
}

/********** Inline GIVERS list for each post ********/
.post-givers-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    text-align: left;
}
/********** Inline GIVERS list for each post END ********/

/* === iOS anti-zoom: keep login inputs ≥16 px ========== */
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
    font-size: 17px;      /* 16 is the minimum; 17 looks a bit crisper */
}
/* === iOS anti-zoom - END ========== */

/* === ************Logout icon – desktop defaults **********=== */
.logout-button {
  background:#fff;
  border:none;
  padding:0rem;
  cursor:pointer;

  /* NEW – always fixed in the same spot */
  position:fixed;
  top:6px;
  right:12px;
  z-index:1100;        /* stays above header content */
}
.logout-button:hover { background:#f1f2f6; }

/* === ************Logout icon – E N D **********=== */

/* Login & sign-up inputs: thin text */
.login-form input{
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;        /* normal */
}



/* ===============================================
   RESPONSIVE TWEAKS – added 2025‑06‑09 (Georgia)
   Keeps header icons horizontal & hides fixed
   buttons / instructions on small screens
   =============================================== */


   /* Bouquet instructions – mobile layout (visible & below header) */
  .first-bouquet-text {
    position: relative;       /* stays in flow, can layer above others */
    z-index: 900;             /* above the static avatar buttons */
    margin: 110px auto 4px;   /* 110 px = header (90) + breathing room */
    width: 92%;
    text-align: left;
    display: block !important;  /* override inline 'display:none' */
  }

  .INSTRUCTIONS-bouquet-button-container {
    position: relative;
    z-index: 900;
    width: 100%;
    margin: 6px auto 18px;
    justify-content: center;
    flex-wrap: wrap;
    display: flex !important;    /* override inline 'display:none' */
  }

/* =======================SIDE BAR================================
   FIX: 2025-06-11  –  Bouquet instructions in right bar
   ============================================================== */
:root {
  --sidebar-width: 320px;   /* tweak at will */
}

/* Right-hand sidebar container – anchors everything */
.right-sidebar {
  position: fixed;
  top: 110px;              /* below the 90 px header + 20 px gap */
  right: 10px;
  width: var(--sidebar-width);
  z-index: 1000;           /* stays above posts */

  /* NEW – make every child stack full-width */
  display: flex;
  flex-direction: column;

  /*container ignores taps*/
  pointer-events: none;
}

.right-sidebar *{
  pointer-events: auto;
}


/* Sidebar container sticks under the header as you scroll */
.sidebar-sticky {
  position: sticky;
  top: 16px;           /* space from the top while pinned */
  align-self: start;   /* helps in CSS grid layouts */
  height: fit-content; /* avoid stretching the column height */
}

/* Every direct child stacks at full width inside the sidebar */
.right-sidebar > * { flex: 0 0 100%; }


/****** === Bouquet INSTRUCTIONS pill – steady blur *****============= */
.first-bouquet-text {
    background-color: rgba(245,245,245,0.92);   /* matches layout */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    /* ✨ prepare for scroll glow */
    transition: box-shadow 0.25s ease, filter 0.25s ease;
}
/****** === Bouquet INSTRUCTIONS pill – steady blur -  E N D *****============= */

/* === Glow while scrolling ================================== */
.first-bouquet-text.scroll-active {
    filter: brightness(1.05) saturate(1.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}
/* === Glow while scrolling - E N D================================== */

/* =====================================================================
   2025-06-15 • 10 px breathing room for the Instructions pill
   Applies to all screens so you always see the rounded right edge.
   ===================================================================== */

/* ❶  GLOBAL default — inline-block so pill hugs text */
body .first-bouquet-text {
    display: inline-block;              /* shrink to content + padding   */
    max-width: calc(100% - 20px);       /* never touch viewport edges    */
    margin: 0 10px 2px 10px;            /* top 0 | right 10 | bottom 2 | left 10 */
}

/* ❷  Desktop / tablet sidebar — equal side margins inside sidebar      */
.right-sidebar .first-bouquet-text {
    width: auto !important;             /* override earlier 100 % or 92 % */
    margin: 0 10px 8px 10px !important; /* top 0 | right 10 | bottom 8 | left 10 */
}
/* ❶  GLOBAL default — E N D */


/* Feed shifts left so it doesn't hide behind sidebar
   ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .feed { margin-right: calc(var(--sidebar-width) + 30px); }
}

/* NEW: mid-width laptops (768 – 1023 px)  */
@media (min-width: 768px) and (max-width: 1023px) {
  .feed {
    margin-right: calc(var(--sidebar-width) + 30px);
    width: auto;                 /* ← override the old 95 % */
    max-width: calc(100% - var(--sidebar-width) - 40px); /* respect sidebar */
  }

      .feed{
      margin-right: calc(var(--sidebar-width) + 20px);  /* room for new sidebar */
      max-width: calc(100% - var(--sidebar-width) - 40px); /* always visible */
  }


}

/*  NARROW WIDESCREEN – shrink sidebar so it never overlaps feed  */
@media (max-width: 1200px) {
  :root { --sidebar-width: 260px; }   /* was 320 */
}

/*  ULTRA-NARROW WIDESCREEN – even slimmer (optional)  */
/* =======================================================================
   2025-06-15  FINAL TABLET LANDSCAPE FIX  –  bouquet bar locked to ONE row
   Replaces the former @media (max-width: 1024px) rule
   ======================================================================= */
@media screen and (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {

  /* keep sidebar wide enough on iPads */
  :root { --sidebar-width: 300px; }   /* roomy bar, was in old block */

  /* 🎯 five-icon bouquet bar */
  .right-sidebar .INSTRUCTIONS-bouquet-button-container {
      display: grid !important;             /* beats old flex */
      grid-auto-flow: column;               /* single horizontal track */
      grid-template-columns: repeat(5, 40px);
      grid-auto-rows: 40px;
      gap: 4px;
      width: max-content;
      margin: 0 auto;
  }

  /* 🚫 prevent icons from stretching & wrapping */
  .right-sidebar .INSTRUCTIONS-bouquet-button-container
  .INSTRUCTIONS-bouquet-small-button {
      width: 40px !important;
      height: 40px !important;
      margin: 0 !important;
      padding: 0 !important;
  }
}
/* ===== END 2025-06-15 tablet landscape bouquet fix ==================== */



/* Bouquet instructions inside sidebar */
.right-sidebar .first-bouquet-text {
  /* —— override global sticky settings —— */
  position: static;     /* was: sticky */
  top: auto;            /* clear old offset */
  margin: 0 0 8px 0;    /* normal spacing under header */
  width: 100%;          /* span full sidebar */

  /* —— keep typography —— */
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

@media (min-width: 1025px) {          /* ← NEW wrapper */
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;   /* NEW – occupy full sidebar width */

  /* —— override the old fixed positioning —— */
  position: static;   /* was: fixed */
  top: auto;
  right: auto;
  margin: 0;          /* let the sidebar’s normal spacing take over */

    }
}

/* Givers list now lives below instructions */
.right-sidebar .givers-list {
  position: static;
  margin-top: 18px;
}

/*****  TABLETS & SMALL LAPTOPS  (≤ 992 px)  *******───────────── */
@media (max-width: 992px) {

  /* Keep the header itself on one line */
  .header {
    flex-wrap: nowrap;
    justify-content: flex-start;  /* logo + nav row left-aligned */
  }

  /* Optional: shrink or hide the big title to free space */
  .header h1 {
    font-size: 16px;     /* ↓ smaller text */
    margin: 0 8px 0 0;   /* tiny gap after logo */
    white-space: nowrap; /* don’t break */
  }

  /* Nav row stays horizontal & scrollable */
  .header-buttons {
    flex: 1 1 auto;      /* grow to fill remaining width */
    display: flex;
    flex-wrap: nowrap;   /* never wrap */
    overflow-x: auto;    /* enables side-scroll if cramped */
    gap: 8px;

    padding-right: 160px;   /* ⬅ NEW – width of the logout icon + gap */
    margin: 0;           /* kill old 10% + 550 px margins */
    white-space: nowrap; /* keep buttons on one visual line */
  }

  /* Prevent buttons from flex-shrinking below icon width */
  .header-buttons button { flex: 0 0 auto; }


  /* ---- Header navigation row --------------------------------- */
  /* Optional: tiny scrollbar so users know they can swipe/scroll */
  .header-buttons::-webkit-scrollbar       { height: 6px; }
  .header-buttons::-webkit-scrollbar-thumb { background:#ccc;border-radius:3px; }

  /******* KEEP THIS JUST IN CASE WE NEED IT LATER ON ***********/
  /* ---- Two fixed avatar buttons (left side) ------------------ */
  /* They block the feed on narrow screens, so hide them */
  /** #staticButton, **/
  /** #staticButton-insideHeaven { **/
  /**   display: none;  **/
  /*  }  **/
  /******* END ***********/


  /* ---- Bouquet “Instructions” overlay ------------------------ */
  /* Let them flow naturally instead of fixed in top‑right corner */
  .first-bouquet-text
   {
    position: static;   /* exits fixed / sticky mode          */
    margin: 10px 0 0;   /* simple spacing above feed          */
    right: auto; top: auto; margin-left: 0;
  }

  /* ---- Optional: hide the side Givers list IN PHONES AND TABLETS------------------- */
  /* Uncomment if 300 px panel feels cramped below 992 px*/
  /*.givers-list { display:none; }*/
  
}


/******  UNIVERSAL NAV FIX  – applies to every width ≤ 1400 px
    Keeps header nav icons on ONE horizontal row        *******/
@media (max-width: 1920px) {

  .header {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .header h1 {
    font-size: 18px;
    margin: 0 8px 0 0;
    white-space: nowrap;
  }
  @media (max-width: 1024px) { .header h1 { font-size: 16px; } }
  @media (max-width: 820px)  { .header h1 { display: none;   } }

  .header-buttons {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px;
    margin: 0 !important;
    white-space: nowrap;
  }

  .header-buttons button { flex: 0 0 auto; }
}
/********** UNIVERSAL NAV FIX -----E N D *********/


/*  MID-WIDTH (tablet landscape & narrow laptops) – move avatar buttons bottom-left  */
/*  HIDE static avatar buttons on every screen ≤ 1200 px  */
@media (max-width: 767px) {
  #staticButton,
  #staticButton-insideHeaven {
    display: none !important;   /* beats any inline JS styles */
  }
}
/********** (tablet landscape & narrow laptops) -----E N D *********/


/*****************************************************************/
/* ------------------ Phones / narrow tablets ------------------ */
@media (max-width: 768px) {

  /* === ❶  Sticky sidebar under the header ==================== */
  .right-sidebar {
    position: sticky;
    top: 110px;            /* header(90) + 20 px gap */
    width: 100%;
    margin: 0 auto;
    z-index: 999;
    pointer-events: none;
  }

  /* === NEW: tighter Create-post spacing on phones ============= */
  .post-form {
      margin: 6rem auto 0;      /* was 9rem globally */
  }

  /* === ❷  Feed: full width, starts *below* bouquet bar ======= */
  .feed {
    margin-right: 0;
    margin-top: 95px;     /* header 90 + text ~20 + buttons 40 + 5px */
  }

  /* === ❸  Hide big title & avatar buttons on phones ========= */
  .header h1 { display: none; }
  #staticButton,
  #staticButton-insideHeaven { display: none; }

  /* === ❹  Hide “List of GIVERS” panel on phones ============== */
  body .givers-list { display: none !important; }   /* beats inline JS */

  /* === ❺  Instruction text (left-aligned) ==================== */
  .right-sidebar .first-bouquet-text {
    margin: 0 0 2px 10px;   /* left 10 px, tiny gap below */
  }

  /* === ❻  Five-icon bouquet row (one line, left) ============= */
  .right-sidebar .INSTRUCTIONS-bouquet-button-container {
    /* kill the old fixed offset that pushed it down */
    position: relative;      /* was fixed in global rule      */
    top: 0 !important;       /* ← overrides old top:135px     */
    right: auto !important;  /* clear old right:20px          */

    width: max-content;      /* shrink to icon width          */
    margin: 0 0 10px 10px;   /* tight under the text          */

    display: flex !important;
    justify-content: flex-start;
    flex-wrap: nowrap;       /* never wrap on phones          */
  }

  /* Disable sticky on small screens so it doesn’t fight the layout */
  .sidebar-sticky {
    position: static;
    top: auto;
  }

    /* ❶  Move sidebar up … */
    .right-sidebar { top: 90px; }
    /* ❷  Kill gap … */
    .right-sidebar .first-bouquet-text { margin: 0 10px 0 10px !important; }
    /* ❸  Pull button row … */
    .right-sidebar .INSTRUCTIONS-bouquet-button-container { margin: 0 0 8px 10px !important; }
    /* ❹  Re-calc feed offset----TO MOVE THE "FEED" up and down … */
    .feed { margin-top: 25px !important; }

    /* ▶ Reserve 70 px on the right so nav buttons never slide under Logout */
  .header {
      overflow: hidden;      /* clip anything that still tries */
  }

    /* === Curtain under the fixed Logout icon =================== */
  .header::after{
      content:"";
      position:absolute;
      top:0;
      right:0;
      width:80px;          /* 40-px icon + ~40-px cushion   */
      height:100%;
      background:#ffffff;  /* same as header background     */
      pointer-events:none; /* let taps go through            */
      z-index:1000;        /* below Logout (1100)            */
  }

}

/* === Hide-on-scroll helper (phones only) ========================= */
.hidden-on-scroll{
    opacity:0;                 /* fade out */
    pointer-events:none;       /* ignore taps */
    transition:opacity .35s ease;
}
/* ------------------ Phones / narrow tablets — END ------------ */



/***************************************************************/
/* === iPad Landscape hot-fix – keep 5 bouquets on one row === */
@media (max-width: 1024px) {
  body .right-sidebar .INSTRUCTIONS-bouquet-button-container {
      display: grid !important;          /* strongest override */
      grid-template-columns: repeat(5, 1fr); /* 5 equal slots */
      grid-auto-rows: 40px;              /* lock height */
      gap: 4px;
      width: max-content;
  }
}

/* =====================================================================
   2025-06-16 • Bouquet-button PILL – fits icons exactly
   ===================================================================== */
body .INSTRUCTIONS-bouquet-button-container,
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
    /* Pill look (keep from Option B) */
    background-color: rgba(245,245,245,0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    /* Tight fit */
    display: inline-flex !important;    /* hug content               */
    width: max-content !important;
    padding: 2px;                       /* just enough to show curve */
    gap: 0;                             /* no gaps from flex         */
}

body .INSTRUCTIONS-bouquet-button-container
.INSTRUCTIONS-bouquet-small-button {
    margin: 0 !important;               /* abolish per-icon margins  */
}

/* =======================================================================
   2025-06-16 • Bouquet button PILL — flush-fit version
   ✦ Lighter original grey (#F5F5F5 ≈ rgba(245,245,245,0.92))
   ✦ Pill height 44 px  (40 px icon + 2 px cushion top & bottom)
   ✦ No side padding  ▶  pill left/right edges align with icons
   ======================================================================= */

/* 1️⃣  Pill container — applies everywhere (sidebar + phone) */
body .INSTRUCTIONS-bouquet-button-container,
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
    /* —— Visual style —— */
    background-color: rgba(245,245,245,0.92) !important;  /* original grey */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    /* —— Geometry —— */
    display: inline-flex !important;      /* shrink-wrap to icons            */
    align-items: center !important;       /* vertical centring               */
    width: max-content !important;        /* width = icons only              */
    padding: 2px 0 !important;            /* 2 px top/bottom, 0 sides        */
    height: auto !important;              /* auto = 44 px (40 + 2 + 2)       */
    gap: 0;                               /* no flex gaps                    */
    overflow: hidden;                     /* trims rounded ends flush        */
}

/* 2️⃣  Each bouquet button inside the pill */
body .INSTRUCTIONS-bouquet-button-container
       .INSTRUCTIONS-bouquet-small-button,
.right-sidebar .INSTRUCTIONS-bouquet-button-container
       .INSTRUCTIONS-bouquet-small-button {
    /* remove original 5 px padding so squares align */
    padding: 0 !important;
    margin: 0 !important;

    /* lock each grey square to 40 × 40 px */
    width: 40px !important;
    height: 40px !important;
    box-sizing: border-box;
}

/* You can fine-tune the curve thickness by changing the top/bottom
   padding (currently 2 px).  Increase for a fatter pill, set to 1 px
   for slimmer edges. */
/******************************************************/


/******* 🗑 Delete-post trash-can **********/
.delete-post-btn{
  background:transparent;
  border:none;
  padding:4px;
  cursor:pointer;
  position:absolute;
  top:8px;
  right:8px;
}

/* Darken only while .pressed is set in JS */
.delete-post-btn.pressed{
  filter:brightness(0.8);
}

/* Extra hover for real mice only */
@media (hover:hover) and (pointer:fine){
  .delete-post-btn:hover{ filter:brightness(0.8); }
}
/******* 🗑 Delete-post trash-can  (END) **********/


/************ iOS/Android: prevent sticky tap-highlight on action buttons */
.delete-post-btn,
.like-btn,             /* we'll add these class names in JS below */
.comment-btn{
  -webkit-tap-highlight-color: transparent;   /* kills grey flash */
}
/************ iOS/Android: prevent sticky tap-highlight on action buttons (E N D)****/


/********* --- tiny confirm modal ------------------------------------ */
.confirm-modal{
  display:none;                      /* hidden by default      */
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  align-items:center; justify-content:center;
  z-index:2000;
}
.confirm-box{
  background:#fff; padding:16px 20px;
  border-radius:10px; width:260px;
  font:16px/1.4 "Segoe UI",sans-serif;
  text-align:center;
}
.confirm-actions{ margin-top:14px; display:flex; gap:12px; justify-content:center }
.confirm-actions button{
  flex:1 1 0; padding:6px 0; border:none; border-radius:6px;
  background:#007bff; color:#fff; font-size:15px;
}
.confirm-actions button:last-child{ background:#aaa }
.confirm-actions button:active{ opacity:.7 }        /* quick tap flash */

/********* --- tiny confirm modal (E N D)------------------------------------ */

/* ==============================================================
   FINAL LOCK – Logout icon & nav-row buffer (added 2025-06-19)
   Guarantees:
     • Logout button is always fixed top-right on EVERY width
     • Nav-row can never scroll past the icon
   ============================================================== */

/* 1️⃣  Logout button – strongest override */
.logout-button{
    position:fixed !important;
    top:6px !important;
    right:12px !important;
    z-index:1100 !important;     /* above header & nav row */
}

/* 2️⃣  Nav row buffer – phones & tablets (≤ 992 px) */
@media (max-width: 992px){
    .header-buttons{
        padding-right:72px !important;   /* 40 px icon + 32 px gap   */
    }
}

/* ===========================================================
   LOGIN-/SIGN-UP  mini-layout (added 2025-06-27)
   -----------------------------------------------------------
   • Stacks every label/input together (.auth-field)
   • Keeps the two “forgot …” links on one tidy line
   • Puts Login + Create buttons on one row, right-aligned
   • Adds blue + grey button palettes you can reuse everywhere
   =========================================================== */
.auth-field{
    display:flex;
    flex-direction:column;
    margin-bottom:12px;
}
.auth-field label{ margin-bottom:4px; font-weight:600; }
.auth-field input{
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}
.link-row{
    display:flex;
    justify-content:space-between;   /* puts each link at an edge */
    margin-bottom:16px;
    font-size:0.9rem;
}
.link-row a{
    text-decoration:none;
    color:#007bff;
}
.link-row a:hover{ text-decoration:underline; }

.btn-row{
    display:flex;
    gap:12px;
    justify-content:flex-end;        /* buttons hug the right side */
}

/* Re-usable button palettes
   (keeps global “button { … }” for generic default)            */
.btn-primary{
    background:#007bff;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
}
.btn-secondary{
    background:#6c757d;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:4px;
    cursor:pointer;
}
.btn-primary:hover   { background:#0056b3; }
.btn-secondary:hover { background:#545b62; }
/* ===================LOGIN-/SIGN-UP  mini-layout  (E N D)======================================== */

/*****************************************************************/
/* ===== Pre-login: default-hidden fixed avatar buttons ========= */
#staticButton,
#staticButton-insideHeaven {
    display: none;             /* CSS default = hidden */
}
/* They’re shown later via showUserInterface() with inline style */


/* ===== Pre-login: (E N D))========= */
/*****************************************************************/


/* Tiny inline error text */
.error-text{
  color:#dc3545;
  font-size:0.85rem;
  margin-top:4px;
}

.input-error{ 
  border:1px solid #dc3545 !important; }

/* === FINAL OVERRIDE: show fixed avatar buttons on tablets ============ */
@media (min-width: 768px) and (max-width: 1024px) {
#staticButton-insideHeaven {
  left: 10px !important;
  top: 245px !important;       /* below the profile pill */
  z-index: 900 !important;     /* under .profile-controls (1300) */
  transform: scale(0.85);
}

}
/* ===================================================================== */

  /* universal tiny avatar */
#avatar,
.avatar,
.avatar-miniature {
  width : 40px;          /* or 25px if you prefer smaller */
  height: 40px;
  border-radius: 50%;
  object-fit: cover;     /* crop instead of stretching */
}

/* --------------------------------------------------
   PHONE bottom-nav (keeps ALL buttons, with arrows)
   -------------------------------------------------- */
@media (max-width: 767px){

  /* sticky header stays, we’re only styling the bottom nav */
.mobile-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;

  /* Always kiss the device edge; content clears the home-indicator */
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);

  /* Normalize bar height (no double-count). Chrome will feel less tall too. */
  height: 56px;

  background: #fff;
  border-top: 1px solid #ccc;
  display: flex; align-items: center;
  z-index: 1100;

  /* movement handled via iOS-only override; keep base neutral */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);         /* composite the bar; avoids tiny desyncs */
  contain: layout paint;            /* isolate layout/paint for stability */
  }

  .header-buttons{
    flex:1 1 auto; display:flex; overflow-x:auto;
    scroll-behavior:smooth;             /* finger glide */
  }
  .header-buttons::-webkit-scrollbar{ display:none; } /* hide chrome */

  .feed{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); }    /* keeps posts above bar */

  /* arrows overlay at the hard edges */
  .scroll-arrow{
    flex:0 0 48px; height:48px; margin:0;
    background:#fff; border:none; font-size:22px; color:#666;
    display:flex; align-items:center; justify-content:center;
  }
  .scroll-arrow:active{ filter:brightness(.9); }   /* ripple */

}

.scroll-arrow img{ pointer-events:none; }  /* whole button stays clickable */


@media (max-width:767px){
  .header .header-buttons{ display:none; }
}


/* === Altar frames – square container (v3) ============================= */
.frame-wrapper {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;      /* perfect square */
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
}

/* neutral matte + soft blur halo */
.frame-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
background:#7c543c;      /* slightly darker grey  */
  filter:blur(15px);       /* stronger, softer halo */
  transform: scale(1.05);   /* spill a bit past the edge for softness */
  z-index: 0;
  pointer-events: none;
}

/* ornate PNG frame */
.frame-wrapper::after {
  z-index: 3;               /* always on top */
}

/* media itself */
.frame-wrapper img,
.frame-wrapper video{
    position: absolute;
    top: 50%;
    left: 50%;
    width:  auto;
    height: auto;
    max-width:  100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: 50% 50%;
    margin: auto;
    border-radius: 8px;
    z-index: 1;
    /* NEW — tell browsers “give me all touch events, don’t scroll” */
    touch-action:none;
}

/* === Mobile fine-tune: full-width square & flex-centred === */
@media (max-width: 767px){
  .frame-wrapper{
    width: 100%;           /* fill the card */
    max-width: none;       /* override 600 px cap */
    display:flex;          /* ↓ centres child before JS runs */
    align-items:center;
    justify-content:center;
  }
}

/* Fallback for older Safari / Edge (no aspect-ratio) */
@supports not (aspect-ratio: 1 / 1) {
  .frame-wrapper::before {
    content: '';
    float: left;
    padding-top: 100%;     /* 1 : 1 square */
  }
  .frame-wrapper::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* One ::after rule per frame */
.frame-lyla::after,
.frame-monarchy::after,
.frame-old-new-york::after, /* <-- ALL LOWERCASE, HYPHENS */
.frame-royal::after,
.frame-victorian::after,
.frame-waldorf-astoria::after, /* <-- ALL LOWERCASE, HYPHENS */
.frame-comodore::after,
.frame-kennedy::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.frame-lyla::after            { background-image: url('/images/frames/lyla.png'); }
.frame-monarchy::after        { background-image: url('/images/frames/monarchy.png'); }
.frame-old-new-york::after    { background-image: url('/images/frames/old-new-york.png'); } /* <-- ALL LOWERCASE, HYPHENS */
.frame-royal::after           { background-image: url('/images/frames/royal.png'); }
.frame-victorian::after       { background-image: url('/images/frames/victorian.png'); }
.frame-waldorf-astoria::after { background-image: url('/images/frames/waldorf-astoria.png'); } /* <-- ALL LOWERCASE, HYPHENS */
.frame-comodore::after        { background-image: url('/images/frames/comodore.png'); }
.frame-kennedy::after         { background-image: url('/images/frames/kennedy.png'); }

/* keep the ornate PNG above the media */
.frame-wrapper::after {
  z-index: 3;   /* > image (1) > blur layer (0) */
}

/* Images become free-floating when zoomable */
.frame-wrapper img{
  position:absolute;
  top:50%; left:50%;       /* centre reference for translate() */
  transform:translate(-50%, -50%) scale(1);
  transform-origin:center;
}

/***************************************************/
/* ===== Altar 2.0 — Album strip look & feel ===== */
.album-strip {
position: relative;
display: flex;
align-items: center;
gap: 12px;
overflow-x: auto;
padding: 10px 12px;
min-height: 110px;
border-radius: 14px;
background: rgba(14,16,20,0.65);
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 8px 20px rgba(0,0,0,0.28);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* subtle “flip-flop” sheen */
.album-strip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
background-size: 200% 100%;
pointer-events: none;
opacity: .25;
animation: albumSheen 8s linear infinite;
border-radius: inherit;
}
@keyframes albumSheen {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* hide heavy scrollbars while keeping accessibility */
.album-strip::-webkit-scrollbar { height: 8px; }
.album-strip::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 10px;
}
.album-strip { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* Each thumbnail holder */
.album-thumb {
position: relative;
flex: 0 0 auto;
width: 120px;
height: 82px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
overflow: hidden;
display: grid;
place-items: center;
transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.album-thumb:hover {
transform: translateY(-1px);
filter: brightness(1.25);
border-color: rgba(255,255,255,0.22);
}

/* Real media inside thumb */
.album-thumb img,
.album-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Ghost placeholders when empty (teach side-scroll) */
.album-thumb.ghost {
background:
radial-gradient(120px 60px at 40% 30%, rgba(255,255,255,0.08), transparent 60%),
rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.18);
}

/* Delete pill (owner only) */
.album-del {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,0.55);
color: #fff;
font-weight: 700;
cursor: pointer;
line-height: 22px;
display: grid;
place-items: center;
}

/* +Add CTA inside strip */
.album-add-btn {
order: -1; /* 👈 move to the beginning */
flex: 0 0 auto;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06);
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.album-add-btn:hover {
filter: brightness(1.2);
border-color: rgba(255,255,255,0.26);
}
/* ===== Altar 2.0 — Album strip look & feel (E N D)===== */
/***************************************************/

/* =====================================================================
   Fix #2 — LIGHTBOX (Album) visuals
   ===================================================================== */
.mohe-lightbox-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  /* hidden by default so it can't intercept taps */
  display: none;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  z-index: 3000; /* above everything */
}
.mohe-lightbox-content{
  max-width: 92vw;
  max-height: 90vh;
}
.mohe-lightbox-media{
  display: block;
  max-width: 92vw;
  max-height: 90vh;
}
.mohe-lightbox-close{
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 40px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.mohe-lightbox-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
}
.mohe-lightbox-arrow.mohe-left { left: 12px; }
.mohe-lightbox-arrow.mohe-right{ right: 12px; }

/* ==============Fix #2 — LIGHTBOX (Album) visuals (E N D)============== */
/* ===================================================================== */

/* =====================================================================
   Fix #2.1 — Lightbox animation + swipe helpers
   ===================================================================== */
.mohe-lightbox-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  /* hidden by default so it can't intercept taps */
  display: none;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;                       /* fade-in */
  transition: opacity .18s ease-out;
}
.mohe-lightbox-backdrop.show{
  /* only when shown, it should exist and accept input */
  display: flex;
  pointer-events: auto;
  opacity: 1;
}
.mohe-lightbox-content{
  max-width: 92vw;
  max-height: 90vh;
  transform: scale(.985);            /* small scale-in */
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
  will-change: transform, opacity;
}
.mohe-lightbox-backdrop.show .mohe-lightbox-content{
  transform: scale(1);
  opacity: 1;
}
.mohe-lightbox-media{
  display: block;
  max-width: 92vw;
  max-height: 90vh;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;               /* allow vertical scroll intent */
}
.mohe-lightbox-close{
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 40px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.mohe-lightbox-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
}
.mohe-lightbox-arrow.mohe-left { left: 12px; }
.mohe-lightbox-arrow.mohe-right{ right: 12px; }

/* Swipe feedback: turn off transitions while finger is down */
.mohe-swipe-active .mohe-lightbox-content{
  transition: none !important;
}

/* ====Fix #2.1 — Lightbox animation + swipe helpers (E N D)============ */
/* ===================================================================== */

/* =====================================================================
   Fix #3 — Album upload progress chip
   ===================================================================== */
.album-upload-chip{
  position: absolute;                /* anchored to the .album-strip */
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #fff;
  background: rgba(25,28,35,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  pointer-events: none;              /* never block clicks */
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.album-upload-chip.show{ opacity: 1; transform: translateY(0); }
.album-upload-chip .label{ opacity:.9; letter-spacing:.2px; }
.album-upload-chip .pct{ font-weight:800; }
.album-upload-chip .rail{
  width: 120px; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.12);
}
.album-upload-chip .bar{
  width: 0%; height: 100%;
  background: rgba(255,255,255,0.85);
  transition: width .15s linear;
}
.album-upload-chip.ok{ background: rgba(21,108,43,0.78); }
.album-upload-chip.err{ background: rgba(138,28,28,0.80); }

/* (already present) .album-strip is position:relative; we rely on that */

/* ====Fix #3 — Album upload progress chip (E N D)============ */
/* ===================================================================== */


/* =========================================================
   Album thumb removal — 120ms dissolve
   ========================================================= */
.album-strip .album-thumb{
  transition: opacity .12s ease, transform .12s ease;
}
.album-strip .album-thumb.mohe-removing{
  opacity: 0;
  transform: scale(.92);
  filter: saturate(.6);
}
.album-strip.mohe-busy{
  pointer-events: none;  /* avoid double taps while removing */
}
/* ====Album thumb removal — 120ms dissolve (E N D)============ */
/* ===================================================================== */


/* =========================================================
   Bouquets should render above the ornate frame
   ========================================================= */
.frame-wrapper .bouquet-overlay{
  position: absolute;
  z-index: 5;            /* higher than .frame-wrapper::after (z:3) */
  pointer-events: none;  /* decorative; don’t block taps */
}
/* ====Bouquets should render above the ornate frame (E N D)============ */
/* ***********************************************************************/

/* =========================================================
/* ===== Bouquets rail (between frame and album) ===== */
/*========================================================= */

.bouquet-layer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;      /* row/column spacing */
  margin: 12px 0 8px; /* space away from frame above, album below */
  position: static !important; /* never overlay floating controls */
}

/* Reset any legacy absolute styles on images */
.bouquet-layer .bouquet-overlay{
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: none;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  transform: none !important;
}
/* ====Bouquets rail (between frame and album) (E N D)============ */
/* *********************************************************/

/* *********************************************************/
/* Hide any accidental bouquet icons dropped inside the frame */
.media-container > img[src*="Bouquet"] {
  display: none !important;
}
/* ====Hide any accidental bouquet icons (E N D)============ */
/* *********************************************************/


/* ================= Feed Switch ================= */
.feed-switch {
  display:flex; gap:8px; margin:8px 0 14px;
}
.feed-tab {
  border:1px solid #60a5fa; color:#0b66ff; border-radius:999px; padding:6px 12px; 
  background:#dbeafe; font-size:14px; cursor:pointer;
}
.feed-tab.active { background:#4CAF50; color:#fff; border-color:#0b66ff; }
.feed-tab:focus { outline:2px solid #a7c4ff; outline-offset:2px; }

/* ============Feed Switch (E N D)======================== */
/* *********************************************************/

/* ---------- Visibility badge ---------- */
.post.post-item{ position: relative; } /* safe even if already present */
/* Flowing badge under username (no overlay) */
.visibility-badge{
  position: static;               /* ← no absolute */
  font-size: .85rem; line-height:1;
  padding: 3px 8px; border-radius: 999px;
  background:#eef2ff; color:#4338ca; /* indigo vibe */
  border:1px solid #e5e7eb;
  display:inline-flex; align-items:center; gap:6px;
  margin: 4px 0 8px 0;           /* space around the chip */
}
.visibility-badge .vb-emoji{ font-size:1rem; }

/* Row that will host the badge under the header (we’ll create it in JS) */
.post-badge-row{
  display:flex; align-items:center;
  margin-left: 0 !important;  /* ← align with avatar & card inner corner */
}
/* ---------- Visibility badge (E N D) ---------- */
/* *********************************************************/

/* --- Feed crumbs + "View all" link --- */
.feed-crumbs-wrap { display:flex; align-items:center; gap:10px; margin:6px 0 12px; }
.btn-ghost { border:1px solid #e5e7eb; background:#f9fafb; padding:6px 10px; border-radius:10px; cursor:pointer; }
.view-all-from{
  margin-top:8px; font-size:0.9rem; border:none; background:transparent; color:#2563eb; cursor:pointer;
}
.view-all-from:hover{ text-decoration: underline; }
/* ============Feed crumbs + "View all" (E N D)======================== */
/* **********************************************************************/


/* *********************************************************/
/* ************Follow button *******************************/
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #2b6cb0);
  background: #2b6cb0;
  color: var(--link-color, white);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms;
}

.follow-btn:hover {
  background: rgba(43, 108, 176, 0.08);
}

.follow-btn:active {
  transform: translateY(1px);
}

.follow-btn.is-following {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
}
/* ============Follow button (E N D)======================== */
/* *********************************************************/


/* ******************************/
/* ---- Feed scope switch ---- */
#feedScope { 
  margin: 10px 0 14px; 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap;
}

#feedScope .scope-btn {
  padding: 8px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select: none;
}
#feedScope .scope-btn:hover { transform: translateY(-1px); }

#feedScope .scope-btn.active {
  background: #2563eb;          /* blue */
  color: #fff;
  border-color: #2563eb;
}

/* Dark mode safety (only if you use a dark body class) */
body.dark #feedScope .scope-btn {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}
body.dark #feedScope .scope-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
/* ============Feed scope switch (E N D)======================== */
/* *********************************************************/


/* ────────────────────────────────────────────────────────────
   GIVERS sidebar: scrollable list
   Target: #giversListContent (the inner container we fill from app.js)
   ──────────────────────────────────────────────────────────── */
#giversListContent {
  /* layout */
  display: grid;
  grid-auto-rows: minmax(44px, auto);
  row-gap: 8px;

  /* scrolling */
  max-height: calc(100vh - 160px);  /* adjust 160px if your header is taller/shorter */
  overflow-y: auto;
  overscroll-behavior: contain;      /* prevents bounce from scrolling the whole page */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  scrollbar-gutter: stable;          /* keeps content from shifting when scrollbar appears */

  /* padding so the scrollbar doesn't overlap content */
  padding-right: 6px;
}

/* nice, subtle scrollbar (Chromium/WebKit) */
#giversListContent::-webkit-scrollbar {
  width: 8px;
}
#giversListContent::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
}
#giversListContent::-webkit-scrollbar-track {
  background: transparent;
}

/* Mobile: cap the list height a bit lower so it doesn’t dominate the screen */
@media (max-width: 900px) {
  #giversListContent {
    max-height: 240px;
  }
}
/* ============GIVERS sidebar: scrollable list (E N D)======================== */
/* *****************************************************************************/

/* Profile controls live inside the header flow (no fixed/sticky) */
.profile-controls{
  position: static;              /* participate in header’s flex row */
  display: none;                 /* responsive: hidden by default */
  align-items: center;
  gap: 8px;
}

/* Mobile/tablet: show inside header */
@media (max-width: 900px){
  .header .profile-controls{
    display: inline-flex;
    margin-left: 8px;            /* tiny breathing room next to name */
  }
}

/* Desktop: keep hidden (desktop header likely has other controls) */
/* Desktop/tablet (>900px): show the avatar+name pill; hide the ⋮ */
@media (min-width: 901px){
  .header .profile-controls{ display: inline-flex !important; }
  .header .profile-controls .icon-button{ display: none !important; }
  .header .profile-controls #staticButton{ display: inline-flex !important; }
  .header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
  .header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }

}

/* ====Profile controls live inside the header flow (no fixed/sticky) (E N D)====== */
/* ==================================================================================/


/* Let the avatar pill sit inline inside the wrapper */
#staticButton{
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0;
}

/* tiny three-dots button */
.icon-button{
  background: #d1d6dc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  line-height: 0;        /* tight icon box */
  cursor: pointer;
  color: #111827;        /* ← three-dots color (slate-900) */
}
.icon-button:hover{
  color: #2563eb;         /* ← hover color (blue-600) */
}


.icon-button:active{ transform: translateY(1px); }
.icon-button .kebab{ font-size: 18px; line-height: 1; display: inline-block; }

/* dropdown panel */
.profile-menu[hidden]{ display: none !important; }
.profile-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;                          /* anchor to left edge of controls */
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 8px;
  display: grid;
  gap: 6px;
  z-index: 1200;                    /* above header (1000) & logout (1100) */
}

.profile-menu button{
  width: 100%;
  text-align: left;
  background: #4CAF50;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.profile-menu button:hover{ background: #d1d6dc; }

/* danger action */
.danger-btn{
  background: #e53935;
  color: #fff;
}
.danger-btn:hover{ filter: brightness(.95); }
/* === Profile dropdown — END ================================== */
/* ***************************************************************/


/* ***************************************************************/
/* === FINAL AUTHORITY for the profile controls (removed)
The header now controls layout; no fixed positioning here. */
/* ***************************************************************/


/* Keep the Profile pill inside the wrapper, never fixed */
#staticButton{
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0;
}



/* === Profile dropdown: subtle fade/slide ===================== */
.profile-menu{
  /* start closed */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

/* when open */
.profile-menu.open{
  opacity: 1;
  transform: translateY(0);
}

/* during the short closing animation, ignore pointer input */
.profile-menu:not(.open){
  pointer-events: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .profile-menu{ transition: none; transform: none; }
}
/* === Profile dropdown animation subtle fade/slide — END ======================= */
/* ********************************************************************************/

/* --- Make the Back button stand out --- */
#feed-back-btn.btn-ghost{
  background:#eff6ff;          /* soft blue pill */
  border-color:#93c5fd;
  color:#1d4ed8;               /* blue-700 */
  font-weight:600;
  padding:8px 12px;
  border-radius:9999px;        /* full pill */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
#feed-back-btn.btn-ghost:hover{
  background:#dbeafe;          /* stronger on hover */
  border-color:#60a5fa;
}
#feed-back-btn.btn-ghost:active{
  transform:translateY(1px);   /* tactile press */
}
#feed-back-btn.btn-ghost:focus-visible{
  outline:2px solid #60a5fa;   /* accessible focus ring */
  outline-offset:2px;
}

/* === Make the Back button stand out — (E N D) ======================= */
/* ********************************************************************************/


/* ── Mobile user badge ───────────────────────────────────────────── */
.mobile-user-badge {
  display: none;                 /* shown only on small screens */
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  justify-content: flex-start;
  border-bottom: 0px solid rgba(0,0,0,0.08);
  background: #fff;
  position: sticky;              /* keeps it visible while scrolling */
  top: var(--header-h);  /* sit right below the fixed header */
  z-index: 1001;                   /* above content, below modals */
}
.mobile-user-badge img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.mobile-user-badge .name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70vw;
}

/* Show only on mobile/tablet */
@media (max-width: 900px) {
  .mobile-user-badge { display: flex; }
    /* optional: align it to the right inside header */
  /* .mobile-user-badge { margin-left: auto; } */

}

@media (min-width: 901px) {
  .mobile-user-badge { display: none !important; }
}
/* ========= Mobile user badge — (E N D) ======================= */
/* ***************************************************************/

/* === Mobile header: show ⋮ next to the display name ==================== */
@media (max-width: 900px){
  /* Make the mobile badge a tight row: [avatar][name] */
  #mobileUserBadge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -18px;
  }

  /* Turn the profile-controls back on INSIDE the header, right after the badge */
  .header .profile-controls{
    display: inline-flex !important;   /* override the auth-level hide */
    position: static;                  /* flow with header */
    margin-left: 6px;                  /* sits just to the right of the name */
    align-items: center;
    gap: 6px;
  }

  /* Hide the duplicate username pill inside profile-controls on phones */
  .header .profile-controls #staticButton{
    display: none !important;
  }

  /* Keep only the three-dots button visible on phones */
  .header .profile-controls .icon-button{
    display: inline-flex;
  }

  /* Optional: reduce extra spacing in the header on phones */
  .header{
    justify-content: center;           /* title centered */
  }
}
/* === Mobile header — END =============================================== */
/* *************************************************************************/



/* === Mobile header layout (≤900px): show badge + ⋮, hide bulky items ====== */
@media (max-width: 900px){
  /* Hide heavy header content to free space */
  .header .header-buttons{ display: none !important; }
  .header h1{ display: none !important; }
  .header .logo-container{ display: inline-flex !important; }

  /* Keep header simple and left-aligned */
  .header{
    justify-content: flex-start;   /* align items in a row */
    overflow: hidden;              /* keep but now nothing overflows */
  }

  /* Show the mobile badge: [avatar][display name] */
  #mobileUserBadge{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  /* Put the ⋮ immediately to the right of the display name */
  .header .profile-controls{
    display: inline-flex !important;  /* override auth-level hide */
    position: static;                 /* participate in header flow */
    margin-left: 6px;                 /* sits right after the name */
    align-items: center;
    gap: 6px;
  }

  /* On phones we only want the ⋮ from profile-controls (avoid duplicate name pill) */
  .header .profile-controls #staticButton{
    display: none !important;
  }

  /* Ensure the actual three-dots button is visible */
  .header .profile-controls .icon-button{
    display: inline-flex;
  }
}
/* === Mobile header layout — END =========================================== */
/* *************************************************************************/


/* === Mobile header layout (≤900px): badge + ⋮, no clutter ================= */
@media (max-width: 900px){
  /* Hide bulky header items to free space on phones */
  .header .header-buttons{ display: none !important; }
  .header h1{ display: none !important; }
  .header .logo-container{ display: inline-flex !important; }

  /* Keep header compact and left-aligned */
  .header{
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Show mobile badge: [avatar][display name] */
  #mobileUserBadge{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  /* Show ⋮ immediately to the right of the display name */
  .header .profile-controls{
    display: inline-flex !important;  /* override the global auth-level hide */
    position: static;                 /* flow inside the header row */
    margin-left: 6px;
    align-items: center;
    gap: 6px;
  }

  /* Avoid duplicate name pill inside profile-controls on phones */
  .header .profile-controls #staticButton{
    display: none !important;
  }

  /* Ensure the three-dots button itself is visible */
  .header .profile-controls .icon-button{
    display: inline-flex;
  }
}

/* Desktop/tablet (≥901px): show the avatar+name pill; hide the ⋮ */
@media (min-width: 901px){
  .header .profile-controls{ display: inline-flex !important; align-items: center; gap: 8px; }
  .header .profile-controls .icon-button{ display: none !important; }     /* no ⋮ on desktop */
  .header .profile-controls #staticButton{ display: inline-flex !important; } /* show pill */
  .header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
  .header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }

}
/* === Mobile header layout (≤900px): badge + ⋮, no clutter — END ======== */
/* *************************************************************************/



/* Mobile (≤900px): show only the ⋮ to the right of the display name */
@media (max-width: 900px){
  #mobileUserBadge{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-left: -14px;   /* ← bring badge closer to the logo */
  }

  .header .profile-controls{
    display: inline-flex !important;
    position: static;
    margin-left: 6px;          /* sits just after the name */
    align-items: center;
    gap: 6px;
  }

  /* mobile = no duplicate name: hide the pill */
  .header .profile-controls #staticButton{ display: none !important; }

  /* keep only three-dots */
  .header .profile-controls .icon-button{ display: inline-flex !important; }
}
/* === Mobile (≤900px): show only the ⋮ to the right of the display name — (E N D) ======== */
/* *****************************************************************************************/


/* ==== FINAL HEADER VISIBILITY (wins over earlier duplicates) ==== */
/* Desktop/tablet (≥901px): show the avatar+name pill in the header, hide ⋮ and the phone badge */
@media (min-width: 901px){
  .header .profile-controls{
    display: inline-flex !important;
    position: static !important;
    align-items: center; gap: 8px;
  }
  .header .profile-controls .icon-button{ display: none !important; }   /* no ⋮ on desktop */
  .header .profile-controls #staticButton{ display: inline-flex !important; } /* show pill */
  #mobileUserBadge{ display: none !important; }                          /* kill duplicate badge */
  .header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
  .header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }

}

/* Mobile (≤900px): show the phone badge + only the ⋮ right of the name */
@media (max-width: 900px){
  #mobileUserBadge{
    display: inline-flex !important;
    align-items: center; gap: 6px;
  }
  .header .profile-controls{
    display: inline-flex !important;
    position: static !important;
    margin-left: 6px; align-items: center; gap: 6px;
  }
  .header .profile-controls #staticButton{ display: none !important; }  /* avoid duplicate name pill */
  .header .profile-controls .icon-button{ display: inline-flex !important; } /* keep ⋮ visible */
}
/* ======= FINAL HEADER VISIBILITY (wins over earlier duplicates) ==== (E N D) ===== */
/* ***********************************************************************************/


/* ==== MOBILE: make the brand logo visible again (wins over earlier hides) ==== */
@media (max-width: 900px){
  /* Unhide whichever selector your logo uses */
  .header .logo-container,
  .header .logo-Face,
  #LOGO3 {
    display: inline-flex !important;
    align-items: center;
  }

  /* Optional: keep the layout tidy */
  .header .logo-container img,
  #LOGO3 img {
    max-height: none !important;
    height: auto;
    width: auto;
  }

  /* Optional ordering (logo left, name center, ⋮ just right of name) */
  .header .logo-container, .header .logo-Face, #LOGO3 { order: 0; }
  #mobileUserBadge { order: 1; }
  .header .profile-controls { order: 2; }     /* this holds the ⋮ on phones */
  #logoutBtn { order: 3; }
}
/* ======= MOBILE: make the brand logo visible again (wins over earlier hides)  === (E N D) ===== */
/* ************************************************************************************************/


/* ==== MOBILE: show the brand logo + keep clean layout (final override) ==== */
@media (max-width: 900px){
  /* 1) Unhide the logo on phones regardless of earlier rules */
  .header .logo-container,
  .header .logo-Face,
  #LOGO3{
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;            /* don't let logo stretch */
    order: 0;                   /* logo at the left */
  }
  
  .header .logo-container img,
  #LOGO3 img{
    max-height: none !important;
    height: auto;
    width: auto;
  }

  /* 2) Let the name area expand in the middle and avoid pushing the logo off */
  #mobileUserBadge{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;            /* take the remaining space */
    min-width: 0;              /* allow text truncation */
    order: 1;
    justify-content: flex-start;   /* keep the name visually centered */
    text-align: center;
    margin-left: 3px;
  }

  /* If the name is long, truncate instead of pushing things out */
  #mobileUserBadge *{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3) ⋮ stays immediately to the right of the name, but doesn't steal space */
  .header .profile-controls{
    display: inline-flex !important;
    position: static !important;
    order: 2;
    flex: 0 0 auto;            /* fixed-size next to the name */
    margin-top: 40px;
    align-items: center;
    gap: 6px;
    z-index: 1001;
  }

  /* 4) Logout at the far right; keep it compact so the logo can fit */
  #logoutBtn{
    order: 3;
    flex: 0 0 auto;
  }

  /* 5) Header spacing tuned for phones */
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
  }
}

/* ======= MOBILE: show the brand logo + keep clean layout (final override)=== (E N D) ===== */
/* *******************************************************************************************/


/* ==== FINAL: ensure logo shows on phones, keep layout tidy ==== */
@media (max-width: 900px){
  .header .logo-container,
  .header .logo-Face{
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    order: 0;
  }
  
  .header .logo-container img{
    max-height: none !important;
    height: auto;
    width: auto;
  }
}

/* ======= FINAL: ensure logo shows on phones, keep layout tidy=== (E N D) ===== */
/* *******************************************************************************/


/* === FINAL-FINAL: mobile logo size (beats every earlier cap) === */
@media (max-width: 900px){
  /* ensure the container itself isn't constraining the img */
  .header .logo-container{
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* target the ACTUAL <img>, with higher specificity than any prior rules */
  .header .logo-container > img.logo-Face{
    height: 44px !important;      /* ← set your mobile size here */
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    display: inline-block !important;
  }
}
/* === FINAL-FINAL: mobile logo size (beats every earlier cap)===(E N D) ===== */
/* *******************************************************************************/


/* === FINAL AUTHORITATIVE LOGO SIZE — KEEP AT EOF === */

/* Mobile (≤900px) */
@media (max-width: 900px){
  .header .logo-container > img.logo-Face{
    height: 104px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
  }
}

/* Desktop / Tablet (≥901px) */
@media (min-width: 901px){
  .header .logo-container > img.logo-Face{
    height: 105px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
  }
}
/* === FINAL LOGO SIZE (authoritative) (E N D) ========================= */
/* *******************************************************************************/

/* === MOBILE: place kebab next to the badge; prevent overlap === */
@media (max-width: 900px){
  .header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;            /* avoid wrapping that pushes kebab out */
  }

  /* Ensure order: LOGO → Badge → Kebab → (rest) → Logout */
  .logo-container{ order: 0; }
  #mobileUserBadge{ order: 1; }
  .profile-controls{ 
    order: 2; 
    display: flex !important; 
    align-items: center; 
    gap: 4px; 
  }

  /* Make the kebab visible and snug next to the badge */
  #profileMenuToggle{
    display: inline-flex !important;
    order: 2;
    margin-left: 2px;             /* nudge closer to the badge */
    position: relative; 
    z-index: 5;                   /* sit above logout if they overlap */
  }

  /* Push logout to the far right and behind in stacking if needed */
  #logoutBtn{ 
    order: 9;                     /* keep it at the end of the row */
    position: relative; 
    z-index: 1; 
  }

  /* (Optional) Hide the desktop header buttons on mobile, if not already */
  .header-buttons{ display: none !important; }
}
/* === === MOBILE: place kebab next to the badge; prevent overlap (E N D) =========== */
/* *******************************************************************************/

/* === MOBILE HEADER LAYOUT: make kebab visible & place it next to the badge === */
@media (max-width: 900px){
  .header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
  }

  /* Hide non-essential stuff on phones to free space */
  .header h1{ display:none !important; }
  .header-buttons{ display:none !important; }

  /* Left-to-right order: LOGO → Badge → Kebab … → Logout (far right) */
  .logo-container{ order:0 !important; flex:0 0 auto !important; }
  #mobileUserBadge{ order:1 !important; flex:0 1 auto !important; margin-left:0 !important; }

  /* Ensure the profile-controls row exists and only shows the kebab */
  .profile-controls{
    order:2 !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    flex:0 0 auto !important;
  }
  #staticButton{ display:none !important; }            /* hide the big button on mobile */
  #profileMenuToggle{
    display:inline-flex !important;
    order:0 !important;                                /* first inside profile-controls */
    margin-left:0 !important;
    position:relative !important;
    z-index:1001 !important;                              /* above neighbors if they overlap */
    flex:0 0 auto !important;
  }

  /* Logout goes all the way to the right */
  #logoutBtn{
    order:9 !important;
    margin-left:auto !important;
    position:relative !important;
    z-index:1100 !important;
    flex:0 0 auto !important;
    margin-top: -65px !important;
    margin: -5x !important;

  }
}
/* ========= MOBILE HEADER LAYOUT: make kebab visible & place it next to the badge === (E N D) =========== */
/* *******************************************************************************/
/* === Mobile bottom bar: force the button strip visible, regardless of header rules === */
@media (max-width: 900px){
  .mobile-nav .header-buttons{
    display: flex !important;    /* override any blanket hides */
    align-items: center;
    gap: 0;
    overflow-x: auto;
  }
  .mobile-nav .header-buttons button{
    display: inline-flex !important;  /* ensure buttons render */
    align-items: center;
    justify-content: center;
  }
  .mobile-nav .header-buttons img{
    display: block !important;        /* ensure icons aren’t suppressed */
  }
}
/*  === Mobile bottom bar: force the button strip visible, regardless of header rules ==== (E N D) =========== */
/* *******************************************************************************/

/* === AUTH STATE VISIBILITY (tiny, robust) ===================== */
/* When NOT authed (e.g., login form), hide badge + kebab on all viewports */
body:not(.authed) #mobileUserBadge,
body:not(.authed) #profileMenuToggle {
  display: none !important;
}

/* When authed, ensure they can appear */
body.authed #profileMenuToggle { display: inline-flex !important; }
body.authed #mobileUserBadge  { display: inline-flex !important; }

/* Desktop: do NOT show the header's profile-controls row; use a desktop badge instead */
@media (min-width: 901px){
  .header .profile-controls { display: none !important; }
  #desktopUserBadge { display: block; margin-bottom: 6px; font-weight: 600; }
}
/*  === AUTH STATE VISIBILITY (tiny, robust) =====================(E N D) =========== */
/* *******************************************************************************/

/* === AUTH VISIBILITY GUARDS (authoritative) ================== */
/* Logged OUT: keep header clean on the login screen */
body:not(.authed) #mobileUserBadge,
body:not(.authed) #profileMenuToggle,
body:not(.authed) .profile-controls,
body:not(.authed) #desktopUserBadge {
  display: none !important;
}

/* Logged IN: allow these to render */
body.authed #profileMenuToggle { display: inline-flex !important; }
body.authed #mobileUserBadge  { display: inline-flex !important; }

/* Desktop: we show name above the "Your Heaven" button instead of in header */
@media (min-width: 901px){
  .header .profile-controls { display: none !important; }
}

/*  === AUTH VISIBILITY GUARDS (authoritative) ==================(E N D) =========== */
/* *******************************************************************************/




/*  === Hinding the 'What's on your mind? text holder ========== */
/* Hide only the "What's on your mind?" textarea (keep the rest of the form) */
#postContent{
  display: none !important;
}

/* If there's a dedicated wrapper/label for the textbox, hide that too (harmless if absent) */
#postForm .post-text,
#postForm .text-area-wrapper,
#postForm label[for="postContent"]{
  display: none !important;
}

/* Optional: close up spacing if the textbox row left a gap */
#postForm{
  gap: 8px; /* tweak if your form uses CSS grid/flex gap */
}
/*  === Hinding the 'What's on your mind? text holder (E N D)========== */
/* *******************************************************************************/



/* === Make the "Choose file" button look like a feed tab =================== */
/* Base button */
#postMedia::file-selector-button,
#postForm input[type="file"]::-webkit-file-upload-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Size to match tabs (tweak if your tabs differ slightly) */
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;                 /* pill like your tabs */
  border: 1px solid #60a5fa;           /* tab border */
  background: #dbeafe;                 /* tab bg */
  color: #0b66ff;                      /* tab text */
  font-weight: 200;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Hover / active states to match tabs */
#postMedia::file-selector-button:hover,
#postForm input[type="file"]::-webkit-file-upload-button:hover{
  background: #eef2f7;
  border-color: #c5ced9;
}
#postMedia::file-selector-button:active,
#postForm input[type="file"]::-webkit-file-upload-button:active{
  background: #e5eaf1;
}

/* Focus ring similar to tabs */
#postMedia:focus-visible::file-selector-button,
#postForm input[type="file"]:focus-visible::-webkit-file-upload-button{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Keep spacing in the form tidy when textarea is hidden */
#postForm input[type="file"]{
  margin: 0; /* rely on form gap */
}

/* Mobile: match tab height if yours is smaller */
@media (max-width: 900px){
  #postMedia::file-selector-button,
  #postForm input[type="file"]::-webkit-file-upload-button{
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    font-size: 13px;
  }
}
/*  === ake the "Choose file" button look like a feed tab (E N D)========== */
/* *******************************************************************************/




/* === Make the Post button look like a feed tab (blue variant) ========== */
/* Support both <button type="submit"> and <input type="submit"> */
#postForm button[type="submit"],
#postForm input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 14px;
  border-radius: 18px;

  border: 1px solid #60a5fa;   /* your tweak */
  background: #dbeafe;         /* your tweak */
  color: #0b66ff;              /* your tweak */

  font-weight: 200;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
}

/* Hover / active */
#postForm button[type="submit"]:hover,
#postForm input[type="submit"]:hover{
  background: #cfe4ff;         /* slightly deeper */
  border-color: #4f97f8;
}
#postForm button[type="submit"]:active,
#postForm input[type="submit"]:active{
  transform: translateY(1px);
}

/* Focus ring */
#postForm button[type="submit"]:focus-visible,
#postForm input[type="submit"]:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Mobile sizing parity with tabs */
@media (max-width: 900px){
  #postForm button[type="submit"],
  #postForm input[type="submit"]{
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    font-size: 13px;
  }
}
/*  ======= Make the Post button look like a feed tab (blue variant) (E N D)========== */
/* *************************************************************************************/




/* === Visibility selector: larger, tab-style hit target ================== */
/* If it's a <select id="visibilitySelector"> */
#visibilitySelector {
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 36px; /* improves vertical centering on some browsers */
}

/* If it's a custom trigger (button/div) */
.visibility-selector,
#postForm .visibility-selector,
#postForm .visibility-trigger,
#postForm button.visibility-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Hover / active */
#visibilitySelector:hover,
.visibility-selector:hover,
#postForm .visibility-trigger:hover {
  background: #eef2f7;
  border-color: #c5ced9;
}
#visibilitySelector:active,
.visibility-selector:active,
#postForm .visibility-trigger:active {
  transform: translateY(1px);
}

/* Focus ring */
#visibilitySelector:focus-visible,
.visibility-selector:focus-visible,
#postForm .visibility-trigger:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Dropdown menu options (if you have a popover) — make tap targets comfy */
.visibility-menu button,
.visibility-menu [role="menuitem"] {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 14px;
}

/* Mobile sizing parity */
@media (max-width: 900px){
  #visibilitySelector,
  .visibility-selector,
  #postForm .visibility-trigger,
  #postForm button.visibility-selector {
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    font-size: 13px;
  }
}
/*  ======= Visibility selector: larger, tab-style hit target (E N D)========== */
/* *************************************************************************************/



/* Mobile feed: non-zoomable media must allow normal touch + taps */
.frame-wrapper img:not([data-zoomable="1"]),
.frame-wrapper video:not([data-zoomable="1"]) {
  touch-action: auto !important;
  pointer-events: auto !important;
}
/*  === Mobile feed: non-zoomable media must allow normal touch + taps (E N D)====== */
/* ***********************************************************************************/

/* === FINAL: CSS-only bottom lock using dynamic viewport units (no JS, no transforms) === */
@media (max-width: 767px){
  .mobile-nav{
    /* Use fixed position for bottom nav */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* Always apply safe area padding at the bottom */
    padding-bottom: env(safe-area-inset-bottom) !important;

    /* size stays stable */
    height: 56px !important;
  }
}
/*  === FINAL: CSS-only bottom lock using dynamic viewport units (no JS, no transforms) (E N D)====== */
/* ***********************************************************************************/

/* === Auth gate for bottom bar (no bar on login) === */
body:not(.authed) .mobile-nav { display: none !important; }

@media (max-width: 900px){
  body.authed .mobile-nav { display: flex !important; }
}
/*  === Auth gate for bottom bar (no bar on login) (E N D)====== */
/* ***************************************************************/

/* --- HEADER HARD LOCK (authoritative) --- */
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  transform: none !important;   /* kill any accidental transforms */
  will-change: auto !important; /* avoid compositing quirks */
  z-index: 1000;
}
/*  === HEADER HARD LOCK (authoritative) (E N D)====== */
/* ***************************************************************/


/* === ANTI-SLIDE SHIELD (authoritative) ===================== */
.header{
  position: fixed !important;
  top: 0 !important; left: 0; right: 0;
  transform: none !important;           /* neutralize any JS translateY */
  transition: none !important;          /* no scroll-hide animations */
  z-index: 1000;
  height: auto !important;              /* allow content to fit */
  min-height: var(--header-h) !important;
  overflow: hidden;                     /* prevents tall-name spill */
}

/* If anything tries to toggle hide-on-scroll classes, force neutral */
.header.hidden-on-scroll,
.header.is-hidden,
.header--hidden,
.header.scroll-up,
.header.scroll-down { 
  top: 0 !important; 
  transform: none !important; 
  opacity: 1 !important; 
  pointer-events: auto !important;
}

/* Mobile bottom bar: still fixed to the real bottom */
@media (max-width: 900px){
  .mobile-nav{
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: 56px !important;
    z-index: 1100 !important;
    transform: none !important;  /* no animations */
    will-change: auto !important;
  }
}

/* Landscape on phones: hide bottom bar, show header nav on top */
@media (orientation: landscape) and (max-width: 900px){
  .mobile-nav{ display: none !important; }
  .header .header-buttons{ display: flex !important; }
}

/* Clamp very long display names so header height stays constant */
@media (max-width: 900px){
  #mobileUserBadge .name{
    max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
/* =====HEADER HARD LOCK (authoritative) (E N D)======== */
/* ***************************************************************/


/* === MOBILE NAV — authoritative lock + body clearance (EOF) === */
:root { --mobile-nav-height: 56px; } /* default; JS will override with the real height */

@supports (height: 100dvh) {
  html, body { height: 100%; }
  body { min-height: 100dvh; } /* dynamic viewport keeps layout correct as Safari UI collapses */
}

/* Phone/tablet */
@media (max-width: 900px){
  /* 1) Bar kisses the bottom; safe-area padding goes INSIDE the bar */
  .mobile-nav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;

    /* safe-area INSIDE the bar (never use bottom: env(...)) */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;

    /* optional iOS paint stability */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  /* 2) Content clearance: move padding from .feed to the BODY */
  .feed{ padding-bottom: 0 !important; }
  body.authed{
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0)) !important;
  }
}
/* =====MOBILE NAV — authoritative lock + body clearance (E N D)======== */
/* ***********************************************************************/


/* === MOBILE NAV — FINAL PACK (authoritative) === */

/* Hide by default unless authed on ≤900px */
body:not(.authed) .mobile-nav { display: none !important; }
@media (max-width: 900px){
  body.authed .mobile-nav { display: flex !important; }
}

/* Lock to bottom + safe areas; give the page bottom clearance */
:root { --mobile-nav-height: 56px; }

@supports (height: 100dvh){ html, body { height: 100%; } body { min-height: 100dvh; } }

@media (max-width: 900px){
  .mobile-nav{
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 56px !important;
    z-index: 1100 !important;
    display: flex; align-items: center;
    background: #fff; border-top: 1px solid #ccc;

    /* safe areas inside the bar */
    padding-left:  env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0) !important;

    /* paint stability */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* content clearance lives on body, not .feed */
  .feed{ padding-bottom: 0 !important; }
  body.authed{
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Phone landscape: hide bottom bar, show header buttons */
@media (orientation: landscape) and (max-width: 900px){
  .mobile-nav{ display: none !important; }
  .header .header-buttons{ display: flex !important; }
}

/* Make sure the bar’s buttons show, even if header rules hide them */
@media (max-width: 900px){
  .mobile-nav .header-buttons{ display: flex !important; gap: 0; overflow-x: auto; }
  .mobile-nav .header-buttons button{ display: inline-flex !important; align-items: center; justify-content: center; }
  .mobile-nav .header-buttons img{ display: block !important; }
}


:root { --safe-top: env(safe-area-inset-top); }
.header { padding-top: calc(8px + var(--safe-top)); } /* adjust .header selector to your real header */


/* === Nav buttons: 44px tap targets, hover/active/focus ================== */
.nav-btn{
  --hit:44px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--hit); min-height:var(--hit);
  padding:6px; border:0; background:transparent; border-radius:12px;
  cursor:pointer;
}
.nav-btn img{ display:block; width:30px; height:30px; object-fit:contain; }
.nav-btn:hover{ background:#f3f4f6; }
.nav-btn.is-active{ background:#e5e7eb; }
.nav-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* Phone row: keep things visible inside the scroller */
@media (max-width:900px){
  .mobile-nav .header-buttons{ gap:0; }
}

/* === Search overlay ===================================================== */
.search-overlay{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.4); z-index:1100;
  align-items:center; justify-content:center;
}
.search-overlay.open{ display:flex; }
.search-box{
  width:min(680px, 92vw); background:#fff; border-radius:12px;
  padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex; gap:8px; align-items:center;
}
#searchInput{
  flex:1; height:44px; font-size:16px; padding:0 12px;
  border:1px solid #d1d5db; border-radius:10px;
}
.search-close{
  border:0; background:#f3f4f6; border-radius:10px; height:44px; padding:0 14px; cursor:pointer;
}
.search-close:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* === Notifications drawer ============================================== */
.notif-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw);
  background:#fff; box-shadow:-2px 0 14px rgba(0,0,0,.25);
  transform:translateX(100%); transition:transform .18s ease; z-index:1100;
  display:flex; flex-direction:column;
}
.notif-drawer.open{ transform:translateX(0); }
.notif-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #e5e7eb; font-size:16px;
}
.notif-close{
  border:0; background:#f3f4f6; border-radius:8px; height:36px; padding:0 12px; cursor:pointer;
}
.notif-close:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }
.notif-content{ padding:14px; overflow:auto; }

/* === Notifications drawer (E N D)============================================== */


/* Make only the “✕” glyph green (same green as your toast) */
.search-close,
.notif-close {
  color: #4CAF50; /* glyph only; background stays as-is */
}
/* === Search & Notifications closing 'X' color (E N D)============================================== */

/* ======Desktop search launcher (prep) ==========*/
.desktop-search { display: none; }
@media (min-width: 901px){
  .desktop-search{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px; /* keeps it tidy next to title */
  }
  .desktop-search input{
    height: 36px;
    font-size: 16px;                 /* avoids iOS zoom */
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
  }
  .desktop-search button{
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #3b82f6;
    cursor: pointer;
  }
  .desktop-search button:focus-visible{
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
}
/* === Desktop search launcher (prep) (E N D)============================================== */

/* === Desktop search visibility: only when logged-in AND wide screens === */
/* Hidden everywhere by default */
.desktop-search { display: none !important; }

/* Only show on desktop (≥901px) AND only after auth (body.authed) */
@media (min-width: 901px){
  body.authed .desktop-search { display: flex !important; align-items: center; gap: 8px; }
}

/* (Optional) basic look when visible on desktop later */
@media (min-width: 901px){
  body.authed .desktop-search input{
    height: 36px; font-size: 16px; padding: 0 10px;
    border: 1px solid #d1d5db; border-radius: 10px;
  }
  body.authed .desktop-search button{
    height: 36px; padding: 0 12px; border: 0; border-radius: 10px;
    background: #f3f4f6; cursor: pointer;
  }
  body.authed .desktop-search button:focus-visible{
    outline: 2px solid #3b82f6; outline-offset: 2px;
  }
}
/* === Desktop search visibility: only when logged-in AND wide screens (E N D)======== */



/* === Notifications drawer: safe-area + tap target ====================== */
/* Push content below iPhone Dynamic Island / status bar */
.notif-drawer{
  /* previously: position:fixed; top:0; right:0; height:100%; ... */
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}

/* Keep the header away from the very edges on notched devices */
.notif-header{
  padding-left:  calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
}

/* Ensure the close button is an easy 44×44 tap target */
.notif-close{
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Optional: slightly narrow the drawer on very small phones */
@media (max-width: 380px){
  .notif-drawer{ width: min(400px, 92vw); }
}

/* Backdrop to allow “tap outside to close” */
.notif-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1099; /* just under the drawer (which should be ≥1100) */
}
.notif-backdrop.open{ display: block; }
/* === Notifications drawer: safe-area + tap target (E N D)======== */