body {
    font-family: Arial;
    text-align: center;
    transition: background 1s, color 1s;
  }
  body{
  padding-left: 52px; /* space for sidebar */
}
@media (max-width: 640px){
  body{ padding-left: 52px; } /* ✅ keep space so sidebar stays on the left */
}


  .dark-mode { background: #420404; color: white; }
  .dark-mode .clock-face { border: white solid 5px; }
  .dark-mode .hand { background: white; }
  .dark-mode .second-hand { background: red; }

  /* ===== DARK MODE TOGGLE IN CORNER ===== */
  .toggle-switch {
    position: fixed; top: 15px; right: 15px; z-index: 1000;
    display: inline-block; width: 60px; height: 34px; margin: 15px;
  }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #4d0d0d; transition: 1.5s; border-radius: 35px;
  }
  .slider:before {
    position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;
    background-color: white; transition: 1.2s; border-radius: 50%;
  }
  input:checked + .slider { background-color: #4d0c09; }
  input:checked + .slider:before { transform: translateX(26px); }

  .clock-container { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
  .clock-face {
    width: 150px; height: 150px; border: 5px solid black; border-radius: 50%;
    position: relative;
  }
  .clock-face{
  width: clamp(90px, 28vw, 150px);
  height: clamp(90px, 28vw, 150px);
}

  .hand { position: absolute; background: black; transform-origin: bottom; }
  .hour-hand { width: 6px; height: 40px; top: 35px; left: 72px; }
  .minute-hand { width: 4px; height: 50px; top: 25px; left: 73px; }
  .second-hand { width: 2px; height: 60px; top: 15px; left: 74px; background: red; }
  .digital-clock { margin-top: 20px; font-size: 24px; }

  /* ===== TIMETABLE TABLE ===== */
  table {
    margin: auto;
    border-collapse: collapse;
    width: 90%;
    transition: opacity 0.8s;
    border: #420404 solid 2px;
    border-radius: 16px;
    overflow: hidden;
  }
  th, td { border: 1px solid black; padding: 8px; text-align: center; }
  .current-lesson { background-color: #a54949; font-weight: bold; transition: background-color 0.5s; }
  .fade { opacity: 0; transition: opacity 0.8s; }
  .day-cell { vertical-align: middle; font-weight: bold; }

  /* ===== HOVER SIDEBAR MENU ===== */
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; width: 45px;
    background: #250101; color: white; transition: width 0.4s ease;
    overflow: hidden; padding-top: 20px;
    border: #250101 solid 1px;
    border-bottom-right-radius: 75px; border-top-right-radius: 75px;
  }
  .sidebar:hover { width: 200px; }

  .sidebar-content {
    height: calc(100vh - 20px);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 10px 8px 20px;
  }
  .profile-top {
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
  }
  .profile-pic {
    width: 70px; height: 70px; border-radius: 50%;
    background: #6b0f0f; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 20px;
    border: 2px solid rgba(255,255,255,0.35);
    overflow: hidden;
  }
  .profile-name { font-weight: bold; font-size: 14px; text-align: center; }
  .profile-cat { font-size: 12px; opacity: 0.9; text-align: center; }

  .sidebar-btn, .sidebar-logout {
    width: 100%; text-align: center; padding: 12px 10px; border-radius: 18px;
    cursor: pointer; user-select: none;
  }
  .sidebar-btn { background: #420404; }
  .sidebar-btn:hover { background: #6b0f0f; }
  .sidebar-logout { background: #b00020; }
  .sidebar-logout:hover { background: #d10b2b; }

  .sidebar-menu { width: 100%; display: none; flex-direction: column; gap: 8px; margin-top: 6px; }
  .menu-pill {
    width: 100%; text-align: center; padding: 12px 10px; border-radius: 18px;
    cursor: pointer; background: #420404; user-select: none;
  }
  .menu-pill:hover { background: #6b0f0f; }
  .menu-pill.active { outline: 2px solid rgba(255,255,255,0.75); background: #6b0f0f; }

  /* ===== CLOCK DIGITS ===== */
  .num { position: absolute; font-weight: bold; font-size: 18px; }
  .n12 { top: 5px; left: 65px; }
  .n3  { right: 5px; top: 65px; }
  .n6  { bottom: 5px; left: 70px; }
  .n9  { left: 5px; top: 65px; }

  /* ===== FOOTER ===== */
  footer { margin-top: 30px; padding: 15px; font-size: 14px; border-top: 2px solid #420404; }
  .dark-mode footer { border-top: 2px solid white; }

  /* ===== LOGIN MODAL ===== */
  #overlayLogin {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: none; z-index: 3000;
  }
  #loginModal {
    position: fixed; top: 30%; left: 50%; transform: translate(-50%, -30%);
    background: white; color: black;
    width: min(420px, 92vw);
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    display: none;
    z-index: 3001;
    text-align: center;
  }
  #loginModal h3 { margin-top: 0; }
  #loginModal input, #loginModal select { width: 95%; padding: 10px; margin: 6px 0; }
  #loginModal button { padding: 10px 14px; border-radius: 20px; margin: 6px 4px; cursor: pointer; }
  #loginMsg { margin-top: 10px; font-size: 13px; }

  /* ===========================
     ✅ RATE LESSONS MODAL
  =========================== */
  #overlayRate {
    position: fixed; inset: 0; background: rgba(0,0,0,0.60);
    display: none; z-index: 3500;
  }
  #rateModal {
    position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
    width: min(520px, 94vw);
    background: white; color: black;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    display: none; z-index: 3501;
    text-align: left;
  }
  #rateModal h3 { margin: 0 0 8px 0; text-align: center; }
  .rate-row { margin: 10px 0; }
  .rate-row label { display: block; font-weight: bold; margin-bottom: 6px; }
  #rateDaySelect, #rateLessonSelect, #rateNote {
    width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #bbb;
    outline: none;
  }
  #rateNote { max-width: 100%; }
  .lesson-preview {
    background: #f4f4f4; border-radius: 12px; padding: 10px; font-size: 13px;
    border: 1px solid #e0e0e0;
  }
  .bars-wrap {
    display: flex; gap: 8px; align-items: flex-end;
    margin-top: 8px;
  }
  .bar {
    width: 14px; height: 18px;
    border-radius: 6px;
    background: #ccc;
    cursor: pointer;
    transition: 0.2s;
    outline: 1px solid rgba(0,0,0,0.10);
  }
  .bar.b2 { height: 24px; }
  .bar.b3 { height: 30px; }
  .bar.b4 { height: 36px; }
  .bar.b5 { height: 42px; }

  .bar.selected { background: #420404; }
  .bar:hover { transform: translateY(-2px); }

  #rateLabel {
    font-weight: bold; margin-top: 8px;
    color: #420404;
  }
  #rateError { margin-top: 10px; font-size: 13px; color: #b00020; }
  .rate-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .btn {
    padding: 10px 14px; border-radius: 20px; cursor: pointer;
    border: none;
  }
  .btn-primary { background: #1b8f3a; color: white; }
  .btn-danger { background: #b00020; color: white; }
  .btn-neutral { background: #666; color: white; }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================
   ✅ SPECIAL EVENT BANNER (DISPLAY) — non-blocking
========================= */
#specialEventBanner{
  position: fixed;
  top: 85px; /* below toggle + near top */
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, 92vw);
  z-index: 2500;
  display: none;

  border-radius: 18px;
  padding: 14px 16px;
  text-align: center;

  background: rgba(66, 4, 4, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.dark-mode #specialEventBanner{
  background: rgba(20, 0, 0, 0.92);
  border: 1px solid rgba(255,255,255,0.22);
}

#specialEventBannerText{
  font-family: fantasy;
  font-size: clamp(18px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  animation: bannerPulse 3.5s ease-in-out infinite;
}

#specialEventBannerSub{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.9;
  color: rgba(255,255,255,0.92);
  font-family: Arial;
}

@keyframes bannerPulse{
  0%   { transform: translateY(0px);   opacity: 0.90; }
  50%  { transform: translateY(-8px);  opacity: 1; }
  100% { transform: translateY(0px);   opacity: 0.90; }
}
/* =========================================
   ✅ RESPONSIVE UI (DROP-IN)
   Add this at the END of your <style>
========================================= */

/* Global spacing scale */
:root{
  --clockSize: clamp(92px, 22vw, 150px);  /* phone -> tablet -> pc */
  --tableWidth: min(960px, 92vw);
  --h1Size: clamp(18px, 4.8vw, 32px);
  --digitalSize: clamp(14px, 3.5vw, 24px);
  --cellPad: clamp(6px, 1.8vw, 10px);
  --sidebarMini: 44px;
}

/* Title scales */
#pageTitle{
  font-size: var(--h1Size);
  margin: 18px auto 10px;
  width: var(--tableWidth);
}

/* Clock scales as one unit */
.clock-face{
  width: var(--clockSize);
  height: var(--clockSize);
}

/* Hands scale (relative to clock size) */
.hour-hand{
  width: clamp(4px, 0.9vw, 6px);
  height: calc(var(--clockSize) * 0.27);
  top: calc(var(--clockSize) * 0.23);
  left: calc(var(--clockSize) * 0.48);
}
.minute-hand{
  width: clamp(3px, 0.7vw, 4px);
  height: calc(var(--clockSize) * 0.34);
  top: calc(var(--clockSize) * 0.17);
  left: calc(var(--clockSize) * 0.485);
}
.second-hand{
  width: 2px;
  height: calc(var(--clockSize) * 0.40);
  top: calc(var(--clockSize) * 0.10);
  left: calc(var(--clockSize) * 0.49);
}

/* Clock digits scale + reposition */
.num{ font-size: clamp(12px, 2.8vw, 18px); }
.n12{ top: 6px; left: 50%; transform: translateX(-50%); }
.n6 { bottom: 6px; left: 50%; transform: translateX(-50%); }
.n3 { right: 6px; top: 50%; transform: translateY(-50%); }
.n9 { left: 6px; top: 50%; transform: translateY(-50%); }

/* Digital clock scales */
.digital-clock{ font-size: var(--digitalSize); }

/* Table becomes device-friendly */
table{
  width: var(--tableWidth);
}
th, td{
  padding: var(--cellPad);
  font-size: clamp(12px, 2.8vw, 16px);
}

/* ✅ Phone fix: keep sidebar on LEFT and keep LOGIN/LOGOUT visible */
@media (max-width: 640px){

  /* keep space for left sidebar */
  body{
    padding-left: 52px !important;
    padding-bottom: 0 !important;
  }

  /* sidebar stays left (not bottom) */
  .sidebar{
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 45px !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border-bottom-right-radius: 75px !important;
    border-top-right-radius: 75px !important;
    overflow: hidden !important;
    padding-top: 20px !important;
    transition: width 0.4s ease !important;
    z-index: 4000 !important;
  }
  .sidebar:hover{
    width: 200px !important;
  }

  /* keep your vertical layout */
  .sidebar-content{
    height: calc(100vh - 20px) !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .profile-top{
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ✅ keep sizing on phone, but DON'T override JS display */
#loginBtn, #logoutBtn{
  width: 90% !important;
  margin: 10px auto !important;
}
/* (optional) ensure JS can hide */
#loginBtn[style*="display:none"],
#logoutBtn[style*="display:none"]{
  display: none !important;
}


  /* keep menus hidden unless logged in (your JS controls this) */
  .sidebar-menu{
    display: none;
    flex-direction: column;
  }
}
/* ============================
   ✅ MOBILE SLIDE MENU SYSTEM
   (does NOT affect desktop hover)
============================ */
#mobileMenuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  z-index: 3999; /* under sidebar (4000) but above page */
}

.mobile-menu-btn{
  display: none; /* desktop hidden */
}

/* MOBILE ONLY */
@media (max-width: 640px){

  /* ✅ The button the user taps (☰ / ✕) */
  .mobile-menu-btn{
    display: flex;
    position: fixed;
    top: 14px;
    left: 10px;
    z-index: 5001; /* above everything */
    width: 42px;
    height: 42px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: #250101;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    cursor: pointer;
    user-select: none;
  }

  /* ✅ Sidebar becomes slide-in panel (hidden by default) */
  .sidebar{
    width: 200px !important;
    transform: translateX(-110%);
    transition: transform 0.25s ease;
  }

  /* Disable hover behavior on phones */
  .sidebar:hover{
    width: 200px !important;
  }

  /* ✅ When opened */
  body.menu-open .sidebar{
    transform: translateX(0);
  }

  body.menu-open #mobileMenuOverlay{
    display: block;
  }
}
/* =========================
   ✅ CK × SCHOOL PARTNER BAR
   (Clock | Divider | Badge)
========================= */
.partner-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

/* Make clock container act like a row item (not centered column) */
.partner-bar .clock-container{
  margin-top: 0; /* removes extra gap in your current clock-container */
}

/* ✅ PERFECT: divider hangs with equal top & bottom gap */
.partner-divider{
  width: 1px;
  align-self: stretch;            /* take full height of the row */
  margin: 14px 0;                 /* ✅ equal top & bottom gap */
  margin: clamp(10px, 2vw, 16px) 0;  /* ✅ auto scales */
  background: rgba(0,0,0,0.35);
  border-radius: 99px;
}

/* Dark mode stays */
.dark-mode .partner-divider{
  background: rgba(255,255,255,0.55);
}

/* Badge placeholder same size as clock */
.partner-badge{
  width: var(--clockSize);
  height: var(--clockSize);
  border-radius: 50%;
  border: 2px dashed rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(66,4,4,0.06);
}

/* Badge image */
.partner-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder text when no badge yet */
.partner-badge span{
  font-size: 12px;
  opacity: 0.75;
  padding: 10px;
}

/* Dark mode tweaks */
.dark-mode .partner-divider{
  background: rgba(255,255,255,0.55);
}
.dark-mode .partner-badge{
  border: 2px dashed rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}
.dark-mode .partner-badge span{
  color: rgba(255,255,255,0.85);
}

/* Small screens: keep them on same line if possible, else wrap neatly */
@media (max-width: 420px){
  .partner-bar{
    gap: 12px;
  }
  .partner-divider{
    height: calc(var(--clockSize) * 0.62);
  }
}
/* ✅ FIX: Make clock and badge start at same top level */
.partner-bar{
  align-items: center;   /* ✅ best with hanging divider */
}

/* ✅ Remove any hidden top lift from the clock block */
.partner-bar .clock-container{
  margin-top: 0 !important;        /* already in your code, keep it strong */
  padding-top: 0 !important;
  transform: translateY(0) !important;
}

/* ✅ If you want it slightly lower (perfect match), add a tiny nudge */
.partner-bar .clock-container{
  transform: translateY(8px);      /* adjust 6px–12px until perfect */
}

/* Optional: keep badge perfectly unnudged */
.partner-badge{
  transform: translateY(0) !important;
}

/* ✅ Digital time centered under BOTH clock + badge */
.partner-digital{
  width: min(860px, 92vw);   /* same feel as your banner width */
  margin: 12px auto 0;       /* ✅ same distance from bottom of both */
  display: flex;
  justify-content: center;
}
/* ✅ display.css (OPTIONAL)
// WHERE: paste at the VERY BOTTOM of display.css
// This is just a tiny safety for the overlay text on dark mode.
// Your display.css already has modal/overlay rules. :contentReference[oaicite:3]{index=3} */

.dark-mode #ckDisplayBlockOverlay { color: #111; }
/* =============================================
   SPECIAL EVENT BANNER – Breathing + Glow
   ============================================= */

#specialEventBanner {
  position: fixed;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, 92vw);
  z-index: 2500;
  display: none;
  border-radius: 18px;
  padding: 18px 24px;
  background: rgba(66, 4, 4, 0.92);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  text-align: center;
  animation: breatheGlow 4.2s ease-in-out infinite;
}

#specialEventBannerText {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(20px, 3.8vw, 38px);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.6);
  margin: 0;
  line-height: 1.15;
}

#specialEventBannerSub {
  margin-top: 10px;
  font-size: clamp(13px, 2.2vw, 17px);
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}

@keyframes breatheGlow {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    opacity: 0.96;
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
    box-shadow: 0 24px 70px rgba(66,4,4,0.7);
    opacity: 1;
  }
}

/* Dark mode compatibility */
.dark-mode #specialEventBanner {
  background: rgba(30, 0, 0, 0.94);
  border-color: rgba(255,255,255,0.28);
}
/* ACTIVE MENU PILL – thin white border */
.menu-pill.active {
  border: 1px solid white !important;
  outline: 2px solid rgba(255,255,255,0.75);
  background: #6b0f0f;
}

/* Disabled day options in rating modal */
select option:disabled {
  color: #888 !important;
  opacity: 0.6;
}
/* Disabled menu pills (upcoming features) */
.menu-pill.disabled {
  background: #333 !important;
  color: #888 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}
/* Special messages for teacher/monitor active lesson views */
.teacher-active-msg,
.monitor-active-msg {
  padding: 40px 20px !important;
  font-size: clamp(18px, 4vw, 32px) !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.4 !important;
  background: rgba(66, 4, 4, 0.15) !important;
  border-radius: 16px !important;
}

.dark-mode .teacher-active-msg,
.dark-mode .monitor-active-msg {
  color: #ffeb3b !important; /* bright yellow in dark mode */
  background: rgba(255, 235, 59, 0.15) !important; /* subtle yellow bg */
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.no-lesson-msg {
  padding: 40px 20px !important;
  font-size: clamp(16px, 3.5vw, 26px) !important;
  font-weight: 600 !important;
  color: #555 !important;
  text-align: center !important;
}

.dark-mode .no-lesson-msg {
  color: #aaa !important;
}
.current-lesson {
  background-color: #a54949 !important;
  color: white !important;
  font-weight: bold !important;
}

.dark-mode .current-lesson {
  background-color: #d32f2f !important; /* brighter red in dark mode */
}
/* =========================
   ✅ SUGGESTION MODAL
========================= */
#overlaySuggest{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 3600;
}

#suggestModal{
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 94vw);
  background: white;
  color: black;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
  display: none;
  z-index: 3601;
}

#suggestModal h3{
  margin-top: 0;
  text-align: center;
  color: #420404;
}

#suggestText{
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 12px;
  padding: 12px;
  resize: vertical;
  outline: none;
  font-size: 14px;
}

#suggestMsg{
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

.suggest-actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.menu-title{
  font-size: 11px;
  font-weight: 800;
  opacity: 0.7;
  margin: 12px 0 6px;
  letter-spacing: 1px;
  text-align: center;
}

.menu-pill.disabled{
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}
/* =========================================
   PUBLIC CLASS PILLS
========================================= */

.public-class-pill{
  cursor:pointer;
  transition:all 0.25s ease;
}

.public-class-pill:hover{
  transform:translateY(-1px);
}

.public-class-pill.active{
  border:2px solid white !important;
  box-shadow:0 0 10px rgba(255,255,255,0.25);
}
.sidebar{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;

  /* smooth scrolling */
  scroll-behavior:smooth;

  /* Firefox */
  scrollbar-width:thin;
}
/* Chrome / Edge / Opera */
.sidebar::-webkit-scrollbar{
  width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.25);
  border-radius:999px;
}

.sidebar::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar-content{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
.sidebar-btn,
.sidebar-logout{
  position:sticky;
  bottom:10px;
}
/* =========================================
   FLOATING PUBLIC SUGGESTION TAB
========================================= */

#publicSuggestTab{
  position:fixed;
  left:250px; /* adjust to sidebar width */
  top:50%;
  transform:translateY(-50%);

  z-index:999;

  background:#420404;
  color:white;

  padding:14px 10px;

  border-radius:0 16px 16px 0;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;

  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);

  transition:all 0.25s ease;
}

#publicSuggestTab:hover{
  transform:translateY(-50%) scale(1.03);
}

#publicSuggestTab i{
  font-size:20px;
}

#publicSuggestTab span{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

/* =========================================
   PUBLIC SUGGESTION MODAL
========================================= */

#overlayPublicSuggest{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:2000;
  backdrop-filter:blur(5px);
}

#publicSuggestModal{
  display:none;

  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:min(92vw, 500px);

  background:white;
  border-radius:20px;

  padding:22px;

  z-index:2001;

  box-shadow:0 25px 70px rgba(0,0,0,0.35);
}

#publicSuggestModal h3{
  margin-top:0;
  color:#420404;
  text-align:center;
}

.public-suggest-note{
  text-align:center;
  font-size:14px;
  line-height:1.5;
  margin-bottom:14px;
}

#publicSuggestText{
  width:100%;
  min-height:140px;

  resize:none;

  padding:14px;

  border-radius:14px;
  border:1px solid #ccc;

  font-size:14px;
  box-sizing:border-box;
}

#publicSuggestMsg{
  margin-top:10px;
  min-height:20px;
  font-size:14px;
}

.public-suggest-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}
/* ===== FLOATING HANGING SUGGESTION BUTTON ===== */
.floating-suggest-btn{
  position: fixed;
  top: 0;
  left: 260px; /* beside sidebar */
  width: 52px;
  height: 95px;

  background: linear-gradient(180deg,#1b8f3a,#0f5f24);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0 0 18px 18px;
  cursor: pointer;
  z-index: 9999;

  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
}

/* icon only */
.floating-suggest-btn i{
  font-size: 24px;
}

/* hover */
.floating-suggest-btn:hover{
  transform: translateY(4px);
  background: linear-gradient(180deg,#22b14c,#15803d);
}

/* mobile positioning */
@media(max-width:768px){
  .floating-suggest-btn{
    left: 0;
    top: 70px;
    width: 48px;
    height: 85px;
  }
}