/* put this at the *very* top of styles.css */
*, *::before, *::after {
  box-sizing: border-box;
}

#connectionStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;    /* push it to the right in the top-bar */
}
#statusBadge.green { color: limegreen; }
#statusBadge.red   { color: crimson; }
#reconnectBtn {
  padding: 4px 8px;
  font-size: 0.85rem;
  background: #fff;
  color: #184D26;
  border: 1px solid #184D26;
  border-radius: 4px;
  cursor: pointer;
}

#bottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;   /* pack items to the left */
  align-items: center;
  padding: 12px 20px;
  background-color: rgba(24, 77, 38, 0.7);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
  z-index: 2000;
  gap: 0;                         /* no auto-gap between flex items */
}

#bottomBar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 36px;
  background: #184D26;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  margin: 0;
  padding: 0;
}

/* ── Desktop: space out the left buttons, push QR to right ── */
#bottomBar #btnFullscreen,
#bottomBar #btnDelete {
  margin-right: 8px;       /* 8px gap between Fullscreen & Delete */
}

#bottomBar #qrBtn {
  margin-left: auto;       /* pushes QR Code to the far right */
}


#desktopControls {
  display: flex;
  gap: 8px;            /* small gap between Fullscreen & Delete */
}

#togglePill {
  position: absolute;       /* take it out of the flex layout */
  left: 50%;                /* 50% across */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: 0;
  padding: 0;
  background: #184D26;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2001;            /* above everything else */
}

/* hide the pill on desktop until toggled */
.desktop-hidden {
  display: none;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
  background: #3f7652;
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-bottom: 80px;    /* space for the bottom bar */
  box-sizing: border-box;
}

/* ─── Sending… full-page overlay ───────────────────────────── */
#uploadOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 1.5rem;
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 5000;               /* above everything else */
}

h1 {
  margin: 0 0 10px 0;
}

#inputArea {
  display: flex;
  flex-direction: column;
  border-radius: 5px
}

textarea {
  width: 100%;
  height: 40px;
  resize: none;
  border-radius: 5px
}

button {
  margin-top: 5px;
  padding: 10px;
  border-radius: 5px;
  background: #184D26;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}

#lightboxOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 10001;
}

#lightboxOverlay img {
  max-width: 90%;
  max-height: 90%;
  cursor: pointer;
}

#lightboxOverlay.active {
  display: flex;
}

#lightboxOverlay.active:not(.multi) {
  justify-content: center;
  align-items: center;
}
#lightboxOverlay.active:not(.multi) .noteZoom {
  margin: auto;
}

#board {
  /* --- layout ------------------------------------------------------- */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsive cols */
  grid-auto-rows: 200px;               /* ⬅️  fixed row height (tweak if you like) */

  /* --- scrolling & sizing ------------------------------------------ */
  flex: 1;                             /* grow/shrink with page      */
  overflow-y: auto;                    /* make the board scroll      */

  /* --- visuals (moved from deleted block) -------------------------- */
  border: 1px solid #000000;
  background: white;
  padding: 15px;                       /* keep 15 px version         */
  margin-bottom: 10px;
  border-radius: 5px;

  /* spacing between notes */
  gap: 12px;
}

/* each note simply fills its grid cell */
.note:not(.noteZoom) {
  width: 100%;
}

.note:not(.noteZoom) {
  background: #fffad1;
  border: 1px solid #e3d987;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.15);
  word-wrap: break-word;
  white-space: pre-wrap;
  color: #000000;

  /* ─── cap height & clamp lines ─────────────────── */
  max-height: 180px;         /* adjust as you like */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;     /* show only 8 lines */
  -webkit-box-orient: vertical;
  cursor: grab;
}

.note img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: pointer;                       /* still opens lightbox   */
}

/* === drag + zoom helpers ================================== */
.note {
  cursor: grab;                 /* visual hint */
}

.note.dragging {
  opacity: .4;                  /* ghost while dragging */
}

/* ---------- BIG full-screen sticky when zoomed ---------- */
#lightboxOverlay .noteZoom {
  /* fill most of the viewport */
  width: 92vw;                /* nearly full width          */
  max-width: 92vw;            /* ensure no smaller cap      */

  /* classic sticky-note look, but larger */
  background: #fffad1;
  border: 1px solid #e3d987;
  border-radius: 10px;
  padding: 2rem 2.5rem;

  /* big readable text */
  font-size: 3.2rem;          
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-y: auto;          

  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  color: #000000;             /* ensure text is black */
}

#lightboxOverlay.active {
  display: flex;
  flex-wrap: wrap;         /* still allows several notes side-by-side */
  gap: 24px;
  justify-content: center; /* centre horizontally */
  align-items:   center;   /* centre vertically  */
  overflow-y: auto;
}

/* ===== Check-box on every sticky ======================================= */
.note .selectBox {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ===== Floating toolbar =============================================== */
#noteToolbar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 2000;
}

#noteToolbar button {
  padding: 10px 16px;
  font-size: 1rem;
  cursor: pointer;
}

/* -------------- CHECKBOX + TOOLBAR ----------------------------- */
.note {           /* make the checkbox anchor point */
  position: relative;
}

.note .selectBox {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 5;
  accent-color: #d08;          /* vivid pink tick so it’s obvious */
}

/* toolbar only shows when .showToolbar is added via JS */
#noteToolbar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;               /* hidden by default */
  gap: 14px;
  z-index: 3000;
}

#noteToolbar.showToolbar { display: flex; }

#noteToolbar button {
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
}

/* ───── Single-note full screen ───── */
#lightboxOverlay.active:not(.multi) .noteZoom {
  width: 92vw;
  height: 92vh;
  overflow: auto;
}

/* ───── Multi-note full screen ───── */
#lightboxOverlay.multi {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap !important;

  justify-content: flex-start;  /* stack from the top */
  align-items: center;          /* centre each note horizontally */

  overflow-y: auto;             /* scroll the overlay itself */
  padding-top: 4vh;             /* gap at top */
  background: rgba(0,0,0,0.8);  /* keep your dark backdrop */
  gap: 24px;                     /* space between notes */
}

#lightboxOverlay.multi .noteZoom {
  flex: 0 0 80vh;               /* exactly 80% of viewport height */
  width: 70vw;                  /* adjust as you like */
  overflow-y: auto;             /* inner scroll if note is too tall */
  margin: 0 auto;               /* centre each note */
}

/* ───── Top bar: logo on left, title on right ───── */
.top-bar {
  display: flex;
  justify-content: space-between; /* logo left, title right */
  align-items: center;            /* vertical-center them both */
  margin-bottom: 10px;            /* keep space before the board */
}

/* size your logo to fit your header height */
.top-bar .logo {
  height: 40px; /* or whatever fits—just pick a number */
  width: auto;  /* preserve aspect ratio */
}

/* if you want to remove the default bottom margin on your h1: */
.top-bar h1 {
  margin: 0;
  color: white;
  font-weight: 300;   /* lighter */
  font-size: 1.25rem; /* a bit smaller */
}

/* match the send-button styling */
input[type="file"]::file-selector-button {
  margin-top: 5px;      /* same as button */
  padding: 10px;        /* ditto */
  border-radius: 5px;   /* ditto */
  cursor: pointer;      /* ditto */
  /* optional: mimic your button’s colors */
  background: #184D26;     /* or whatever bg your send-button uses */
  border: 1px solid #FFFFFF; /* if your send-button has a border */
}

#fileName {
  display: none; /* remove empty placeholder */
}

#bottomBar button#sendBtn {
  background-color: #fff;       /* white background */
  color: #184D26;               /* green text */
  border: 1px solid #184D26;    /* green border */
}

/* Maintain hover feedback (optional) */
#bottomBar #filePickerLabel:hover,
#bottomBar button#sendBtn:hover {
  background-color: #f0f0f0;    /* light gray on hover */
}

#bottomBar input[type="file"]::file-selector-button {
  background: #184D26;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
}

/* strip the input wrapper so only the selector-button shows */
#bottomBar input[type="file"] {
  width: auto;
  background: none;
  border: none;
  padding: 0;
}

#bottomBar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#bottomBar #filePickerLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 36px;
  background-color: #fff;       /* white background */
  color: #184D26;               /* green text */
  border: 1px solid #184D26;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
@media only screen and (max-device-width: 812px) {

  #composerPill {
  display: flex !important;
}

   body {
    padding-bottom: env(safe-area-inset-bottom); /* or 0 if you don’t need the notch area */
  }

  /* —A— hide desktop-only bits — */
  #bottomBar,
  #input,
  #sendBtn,
  #filePickerLabel,
  #fileName,
  #noteToolbar,
  #btnFullscreen,
  #btnDelete,
  #qrBtn { display:none !important; }

  /* —B— page is a flex column that shrinks with the keyboard — */
  html, body {
    height:100dvh;
    margin:0;
    display:flex;
    flex-direction:column;
  }

  #board .selectBox{display:none!important;}

  #composerPill{
    display:flex!important;
    align-items:center;              /* vertical-centre children  */
    gap:8px;
    width:100%;
    border-radius: 12px;
    border:1px solid #fff;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background-color: rgba(24, 77, 38, 0.7);
    box-shadow:0 -2px 6px rgba(0,0,0,.25);
}

  /* --- identical icons (40 px) perfectly centred --- */
  #composerPill .icon-btn{
    margin: 0;
    display:flex; align-items:center; justify-content:center;
    width:40px;
    height:40px;
    flex:   0 0 40px;
    padding:0;
    background:#184D26;
    border:1px solid #fff;
    border-radius:8px;
    color:#fff; font-size:1.4rem; line-height:0;
}

  /* --- text field --- */
 #msgInput {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;          /* allow multiple lines */
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;     /* add vertical padding */
  font-size: 1rem;
  overflow: hidden;       /* hide scrollbar */
  resize: none;           /* no manual handle */
}

#board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;    /* half of the 200px you have on desktop */
    gap: 8px;                 /* a bit tighter on mobile */
  }

  /* Clamp each note to about 4 lines / ~90px tall */
  .note:not(.noteZoom) {
    max-height: 90px;         /* roughly half of 180px */
    -webkit-line-clamp: 4;    /* half of your 8-line clamp */
  }
}

@media only screen and (min-device-width: 813px) {
  #bottomBar #filePickerLabel,
  #bottomBar input[type="file"],
  #bottomBar button#sendBtn,
  #input {
    display: none !important;
  }

  #composerPill.showPill {
    position: fixed;
    bottom: 60px;                /* float just above the bottom bar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;               /* ensure it shows */
    flex-direction: row;         /* match mobile layout */
    align-items: center;
    gap: 8px;

    max-width: 90%;
    width: 400px;                /* or whatever feels right */
    padding: 12px 16px;
    background-color: rgba(24, 77, 38, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 2002;
  }

  #composerPill textarea {
  min-height: 40px;
}

#composerPill .icon-btn{
    margin: 0;
    display:flex; align-items:center; justify-content:center;
    width:40px;
    height:40px;
    flex:   0 0 40px;
    padding:0;
    background:#184D26;
    border:1px solid #fff;
    border-radius:8px;
    color:#fff; font-size:1.4rem; line-height:0;
}
}

body.preview-mode::before {
  content:
    "Preview Mode - All text and images will be blurred in Preview Mode. For full size, full resolution images and text you will need to upgrade to an Englishable Premium Membership.";
  white-space: pre-wrap;         /* honor \A as actual line breaks */
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: #D32F2F;
  color: #fff;
  padding: 16px 12px;
  text-align: center;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  z-index: 9000;
}

/* bump the heading (first line) bigger and bolder */
body.preview-mode::before::first-line {
  font-size: 1.4rem;
  font-weight: 600;
}

/* push the page content down by the banner height (~80px) */
body.preview-mode {
  padding-top: 80px;
}

body.preview-mode .note p {
  filter: blur(2px);    /* tweak 1px → 1.5px for stronger blur, or 0.5px for a gentler effect */
}

body.preview-mode #lightboxOverlay .noteZoom p {
  filter: blur(5px);   /* increase to 2px here for a heavier blur */
}

body.preview-mode .note img {
  filter: blur(5px);
}

/* ── Zoomed-note image: always fit to screen, preserve aspect ── */
#lightboxOverlay .noteZoom img {
  display: block;
  margin: 0 auto;
  transform-origin: top left;

  /* 1) Fit inside viewport without scrolling */
  max-width: 90vw;
  max-height: 90vh;

  /* 2) Preserve natural dimensions and ratio */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Preview Mode: same sizing + heavy blur ── */
body.preview-mode #lightboxOverlay .noteZoom img {
  filter: blur(30px);
}

/* Zoom buttons: only on desktop */
.zoom-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2002;
  font-size: 1.5rem;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* stack them neatly */
#zoomOutBtn { right: 70px; }

/* hide on mobile */
@media only screen and (max-device-width: 812px) {
  .zoom-btn { display: none; }
}