:root {
  --bg: #cbd5e1; /* slightly darker medium gray behind boxes */
  --surface: #ffffff;
  --card: #fafcff;
  --text: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --border: #e5e7eb; /* gray-200 */
  --blue: #2563eb; /* blue-600 */
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}

/* Minimal TinyMCE scope-only reset: ensure our global button font-weight doesn't distort TinyMCE UI */
.tox button { font-weight: 400 !important; }
/* Minimal layout reset for TinyMCE */
/* Ensure overlays stack above app chrome without altering visibility */
.tox-tinymce-aux { z-index: 2147483647 !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent the page (viewport) from showing a scrollbar next to the fixed header.
     We will scroll inside the main content panel instead. */
  overflow: hidden;
}

/* Signed-out: show a completely blank screen */
body.signed-out {
  background: #ffffff !important; /* solid blank background */
}
/* Auth backdrop should also be solid (no translucency) when signed out */
body.signed-out #authBackdrop.modal-backdrop {
  background: #ffffff !important;
}


/* Header */
header.app {
  position: fixed; inset: 0 0 auto 0; height: 140px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: block;
  padding: 0;
  z-index: 1000;
}
/* Homepage: simple, clean header at 100px with only the centered DRAGBOXES title */
body.home-view header.app {
  height: 100px;
  border-bottom: 0;
}
body.home-view .header-inner {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 12px;
}
/* Hide all non-title header chrome on the homepage */
body.home-view .header-left,
body.home-view .header-right,
body.home-view .header-middle,
body.home-view .header-divider,
body.home-view .header-title,
body.home-view .header-status { display: none !important; }
/* Ensure subtitle remains visible and centered */
body.home-view .header-center { width: 100%; display: flex; align-items: center; justify-content: center; }
/* Baseline top offset for main before JS measures dynamic header height */
body.home-view main { top: 100px; }
body.folder-view main { top: 100px; }
/* Main app scroll container: place it under the fixed header and scroll within it,
   so the vertical scrollbar appears beneath the header (like the viewer). */
main {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: 140px; /* matches header.app height */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Reserve equal space for scrollbars to keep content center aligned with header */
  scrollbar-gutter: stable both-edges;
  overscroll-behavior-y: contain;
  padding-top: 0; /* header is no longer overlapping content */
}

/* Folder view header: 100px high, clean (no horizontal lines), with centered folder name and menu on the left */
body.folder-view header.app {
  height: 100px;
  border-bottom: 0;
}
body.folder-view .header-divider { display: none !important; }
body.folder-view .header-left,
body.folder-view .header-right,
body.folder-view .header-status { display: none !important; }
body.folder-view .header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 12px;
  height: 100%;
}
/* Center the menu links */
body.folder-view .header-middle {
  align-self: center;
  padding: 0;
  margin: 0;
  order: 2; /* place menu on the bottom line */
  height: 30px; /* match viewer actions-line */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* Center the folder name */
body.folder-view .header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  order: 1; /* place breadcrumb/title on the top line */
}
/* Use headerSubtitle for folder names (app.js sets this); hide headerTitle on folder view */
body.folder-view .header-title { display: none !important; }
/* Ensure the subtitle (folder name) truncates gracefully if needed */
body.folder-view .header-subtitle {
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(90vw, 1000px);
}
/* Remove Share Page button on folder page header */
body.folder-view #headerShareBtn { display: none !important; }
/* Prevent orphaned separator before Add Note when Share is hidden */
body.folder-view #headerShareBtn + .header-link::before { display: none !important; }
/* Folder page: hide Add Note and Add Media so only Add Box shows (centered) */
body.folder-view #addNoteBtn { display: none !important; }
body.folder-view #addMediaBtn { display: none !important; }
/* Prevent stray separator before Add Box when previous links are hidden */
body.folder-view #addBoxBtn.header-link::before { display: none !important; }
/* In read-only shares, still show the folder title on the folders page */
body.folder-view.readonly .header-title { display: block !important; }

.header-inner {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 12px 1px 1fr;
  align-items: start;
  align-content: start;
  padding: 0 12px;
  height: 100%; /* fill header to center subtitle vertically */
  width: 100%;
  max-width: none;
  margin: 0;
}
.header-left { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; padding-top: 12px; }
.header-right { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; padding-top: 12px; }
.header-middle { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; padding-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.header-divider { grid-column: 1 / -1; grid-row: 3; height: 1px; background: var(--border); margin: 0 calc(50% - 50vw); line-height: 0; }
.header-center { grid-column: 1 / -1; grid-row: 4; align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; width: 100%; }
.header-status { display: none !important; }
.header-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.header-subtitle { margin: 0; font-size: 3rem; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; word-break: break-word; width: 100%; text-align: center; }
/* Force DRAGBOXES to remain 3rem on the homepage (desktop + mobile) */
body.home-view .header-subtitle { font-size: 3rem; }

/* Homepage brand (icon + text) */
body.home-view .home-brand { display: inline-flex; align-items: center; gap: 10px; }
body.home-view .home-brand-icon { height: 1em; width: 1em; display: inline-block; vertical-align: middle; }
body.home-view .home-brand-text { display: inline-block; }

/* Mobile: smaller folder name size so long names fit better */
@media (max-width: 768px) {
  .header-subtitle { font-size: 2rem; }
  .viewer-folder-title { font-size: 2rem; }
}
/* Keep DRAGBOXES large on the home view even on mobile */
@media (max-width: 768px) {
  body.home-view .header-subtitle { font-size: 3rem; }
}

/* Header text links */
.header-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.header-link:hover { color: var(--text); }
.header-link:focus { outline: none; }
/* Icon inside header links */
.header-link .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 6px;
  display: inline-block;
}

/* Emphasize Add Box as blue */
#addBoxBtn.header-link { color: var(--blue); }
#addBoxBtn.header-link:hover { color: #1d4ed8; }

/* Inline separators between adjacent header links (header and viewer) */
.header-middle .header-link + .header-link::before,
.viewer .actions-line .header-link + .header-link::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em; /* match text height */
  background: currentColor; /* use current text color */
  color: var(--muted); /* sets currentColor */
  margin: 0 10px; /* equal spacing on both sides */
  vertical-align: middle;
}
/* Suppress separator when the previous sibling is hidden */
.header-middle .header-link[style*="display:none"] + .header-link::before,
.header-middle .header-link[style*="display: none"] + .header-link::before,
.header-middle .header-link[hidden] + .header-link::before,
.header-middle .header-link[aria-hidden="true"] + .header-link::before,
.viewer .actions-line .header-link[style*="display:none"] + .header-link::before,
.viewer .actions-line .header-link[style*="display: none"] + .header-link::before,
.viewer .actions-line .header-link[hidden] + .header-link::before,
.viewer .actions-line .header-link[aria-hidden="true"] + .header-link::before {
  content: "";
}

/* Remove default flex gaps so separators sit correctly and squash whitespace nodes */
.header-middle { gap: 0; font-size: 0; }
.viewer .actions-line { gap: 0; font-size: 0; }
/* Restore readable font size for the links inside */
.header-middle .header-link,
.viewer .actions-line .header-link { font-size: 1rem; }

button.primary {
  appearance: none; border: 0; background: var(--blue);
  color: #fff; font-weight: 600; padding: 8px 14px; border-radius: 8px;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
button.primary:hover { background: #1d4ed8; }
button.primary:active { transform: translateY(1px); }



/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* 10px between boxes */
  padding: 10px; /* subtle outer breathing room */
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { /* large tablet */
  .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { /* desktop */
  .grid { grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; }
}

.box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1; /* squares */
  width: 100%;
  cursor: grab;
  user-select: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  position: relative;
}
.box:active { cursor: grabbing; }
.box.dragging { opacity: .6; outline: 2px dashed var(--blue); }
.box.over { outline: 3px dashed var(--blue); outline-offset: -3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,23,.45);
  display: none; align-items: center; justify-content: center;
  z-index: 1500; padding: 10px; /* prevent modal from touching screen edges */
}
.modal-backdrop.open { display: flex; }
#authBackdrop { z-index: 1700; }
/* Position auth modal in upper half (centered within top 50%) */
#authBackdrop.modal-backdrop {
  align-items: flex-start; /* align to top */
  padding-top: 20vh;       /* shift down enough to be centered in top half */
}
/* Ensure folders modal overlays the viewer */
#foldersBackdrop { z-index: 1800; }
/* Ensure copy modal overlays the viewer */
#copyBackdrop { z-index: 1800; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(92vw, 520px);
  min-height: 260px;
  max-height: 90vh; /* keep modal within viewport */
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
}
@supports (height: 100dvh) {
  .modal { max-height: 90dvh; }
}
.modal header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; flex: 0 0 auto; }
.modal .body { padding: 24px; min-height: 180px; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.modal .close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: 0; font-size: 20px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px;
}
.modal .close:hover { background: #f1f5f9; color: var(--text); }
/* Modal content additions */
.modal .options { display: flex; gap: 12px; align-items: center; }
.modal .options label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.modal .options input[type="radio"] { accent-color: var(--blue); }
.modal .options label:hover { background: #f8fafc; }
.modal hr.divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.modal .future-area { min-height: 140px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; overflow: hidden; min-height: 0; }
/* Make note editor in the create modal grow until the modal limit, then scroll inside the text area */
.modal .note-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.modal .note-editor .note-toolbar { flex: 0 0 auto; }
.modal .note-editor .note-area { flex: 1 1 auto; overflow: auto; min-height: 220px; max-height: 60vh; -webkit-overflow-scrolling: touch; }
@supports (height: 100dvh) {
  .modal .note-editor .note-area { max-height: 60dvh; }
}
.modal .footer { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* Viewer (full-screen editor) */
.viewer-backdrop { position: fixed; inset: 0; background: var(--bg); display: none; z-index: 1600; }
.viewer-backdrop.open { display: block; }
.viewer { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
/* Prefer dynamic viewport height on supported mobile browsers to avoid keyboard overlap */
@supports (height: 100dvh) {
  .viewer-backdrop { height: 100dvh; }
  .viewer { min-height: 100dvh; }
}
/* Header expands vertically to fit toolbar below actions (only one bottom border remains) */
.viewer header { padding: 0 12px; border-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: sticky; top: 0; background: var(--surface); z-index: 1; height: 100px; min-height: 100px; }
.viewer .actions-line { height: 30px; display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; }
/* Remove viewer actions (Go Back, Delete, Copy To) and center title vertically */
.viewer .actions-line { display: none !important; height: 0; margin: 0; padding: 0; }
/* In note viewer, remove the horizontal divider between toolbar and note */
.viewer.type-note header { border-bottom: 0; height: auto; min-height: 100px; }
/* Folder name inside viewer header */
.viewer-folder-title { margin: 0; line-height: 1; font-size: 2rem; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(90vw, 1000px); width: 100%; text-align: center; }
/* Mobile override placed after base declaration to win the cascade */
@media (max-width: 768px) {
  .viewer-folder-title { font-size: 2rem; }
}
/* Viewer breadcrumb inside the viewer-folder-title */
.viewer-breadcrumb { display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.viewer-breadcrumb .sep { color: var(--muted); opacity: .9; }
.viewer-breadcrumb .crumb { color: var(--muted); }
.viewer-breadcrumb a.crumb { text-decoration: none; cursor: pointer; }
.viewer-breadcrumb a.crumb:hover { color: var(--text); }
.viewer-breadcrumb .home,
.viewer-breadcrumb .folder { font-size: 1.5rem; font-weight: 700; }
/* Keep the type label larger and not uppercased */
.viewer-breadcrumb .type { font-size: 2rem; text-transform: uppercase; color: var(--muted); }
/* Truncate the folder name in the middle to keep type visible */
.viewer-breadcrumb .folder { overflow: hidden; text-overflow: ellipsis; max-width: 50vw; display: inline-block; vertical-align: bottom; }
@media (max-width: 768px) {
  .viewer-breadcrumb .home,
  .viewer-breadcrumb .folder { font-size: 1.5rem; }
  .viewer-breadcrumb .type { font-size: 2rem; }
}
/* Back arrow icon for the viewer's Go Back button */
#viewerSave { display: inline-flex; align-items: center; }
#viewerSave::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: currentColor;
  /* Mask the SVG so it inherits text color */
  -webkit-mask: url('thisone.svg') no-repeat center / contain;
  mask: url('thisone.svg') no-repeat center / contain;
}
/* Make the folder page Home link look like Go Back: same gray->black hover and tight spacing */
body.folder-view #foldersBtn { display: inline-flex; align-items: center; }
body.folder-view #foldersBtn .icon { display: none; }
body.folder-view #foldersBtn::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px; /* match viewer */
  background-color: currentColor; /* gray by default, black on hover */
  -webkit-mask: url('thisone.svg') no-repeat center / contain;
  mask: url('thisone.svg') no-repeat center / contain;
}
/* Bar that holds the note toolbar under the actions; show a thin line above it */
.viewer header .header-toolbar-bar { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border-top: 0; }
.viewer header .header-toolbar-bar .note-toolbar { margin: 0; justify-content: center; }
/* Center the note toolbar when it is placed inside the header */
.viewer header .note-toolbar { margin: 6px 0; justify-content: center; }
.viewer .title-input { width: 100%; max-width: 1200px; margin: 0 auto 12px auto; display: block; font-size: 1.5rem; font-weight: 700; padding: 10px; border: 0; border-radius: 8px; box-sizing: border-box; text-align: center; }
/* Force viewer title to center regardless of browser quirks */
#viewerTitle { text-align: center !important; }
.viewer.type-video #viewerTitle { text-align: center !important; }
.viewer.type-video .title-input { text-align: center !important; }
.viewer .toolbar-box {
  width: 100%;
  max-width: 1200px; /* JS will further cap width per type */
  margin: 0; /* remove vertical margins so background covers spacing */
  padding: 6px 0 8px 0; /* use padding so background blocks scrolling text */
  display: block;
  background: var(--bg);
}
.viewer .toolbar-fixed {
  position: fixed; /* anchor to viewport within viewer backdrop */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* above content, below any modals */
}
.viewer .toolbar-box .note-toolbar {
  margin: 0; /* remove default outer margin so spacing is controlled by toolbar-box */
  justify-content: center;
}
/* If toolbar appears while signed out (unlikely), match white background override */
body.signed-out .viewer .toolbar-box { background: #ffffff; }
.viewer #viewerLine2 { margin-top: 12px; text-align: right; }
/* Keep viewer header visible in read-only so folder name can be shown */
body.readonly .viewer header { display: block; }
.viewer .danger { background: #ef4444; color: #fff; }
.viewer .danger:hover { background: #dc2626; }
.viewer .content { padding: 12px 16px; overflow: auto; display: block; -webkit-overflow-scrolling: touch; /* Reserve equal space for scrollbars to keep content center aligned with header */ scrollbar-gutter: stable both-edges; overscroll-behavior-y: contain; touch-action: pan-y; }
/* Include safe-area bottom padding where available */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .viewer .content { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.viewer.type-note .content,
.viewer.type-video .content {
  /* Keep visible breathing room at the bottom while typing */
  padding-bottom: 50px;
  scroll-padding-bottom: 50px;
}
.viewer .content-inner { min-height: 100%; width: 100%; max-width: 1200px; margin: 0 auto; }
/* Per-type max widths */
.viewer .content-inner.type-note { max-width: 800px; }
.viewer .content-inner.type-video { max-width: 1000px; }
.viewer .content-inner.type-image { max-width: 1200px; padding-bottom: 50px; }

/* Viewer (image/video): remove top padding so title touches header, and keep title fixed at the top of the scroller */
.viewer.type-image .content,
.viewer.type-video .content {
  padding-top: 10px;
}
.viewer.type-image #viewerTitle,
.viewer.type-video #viewerTitle {
  position: sticky;
  top: 0; /* stick to top of the scroll container, directly under the header */
  background: var(--surface); /* avoid text overlapping content behind while scrolling */
  /* Remove rounded corners on the top to visually attach to header */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  /* Move the text up higher within the input area */
  padding-top: 4px;
  padding-bottom: 10px;
}
/* When the title is inside the header, override sticky and margins so it's tight under the breadcrumb */
.viewer header #viewerTitle {
  position: static;
  top: auto;
  margin: 0 auto; /* no extra space above/below; centered */
}
.viewer .content textarea { width: 100%; max-width: 800px; min-height: 220px; font-size: 1rem; line-height: 1.5; padding: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: block; margin: 0 auto; box-sizing: border-box; }
/* Video description in viewer */
#viewerDescription {
  width: 100%;
  max-width: 1000px; /* capped by content-inner.type-video */
  font-size: 1.2rem; /* slightly larger for readability */
  line-height: 1.4;
  font-weight: 400; /* lighter than title */
  color: var(--muted);
  padding: 10px;
  border: 0; /* clean look, like title input */
  border-radius: 8px;
  box-sizing: border-box;
  background: transparent;
  resize: none; /* we auto-size via JS */
  overflow: hidden; /* hide scrollbars */
  display: block;
  margin: 12px auto 50px auto; /* align with title spacing and add bottom space */
  text-align: left; /* left aligned */
  white-space: pre-wrap; /* keep user line breaks */
  overflow-wrap: anywhere; /* wrap long words */
  scroll-margin-bottom: 50px;
}
/* Note editor (create + viewer) */
.note-editor { width: 100%; max-width: 800px; margin: 0 auto; }
.note-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; margin: 0 auto 8px auto; }
.note-toolbar .group { display: inline-flex; align-items: center; gap: 6px; }
.note-toolbar label { font-size: 13px; color: var(--muted); font-weight: 600; }
.note-toolbar select { appearance: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; }
/* Compact “label + arrow” presentation: hide select text and place it invisibly over the label */
.note-toolbar .group { position: relative; display: inline-block; }
.note-toolbar .group > label {
  display: inline-block;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.note-toolbar .group > label::after {
  content: '\25BE';
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  color: #64748b;
  font-weight: 800;
}
.note-toolbar .group > label:hover { background: #f8fafc; }
.note-toolbar .group > select {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  opacity: 0; /* make it invisible while still interactive */
  cursor: pointer;
}
.note-toolbar button { -webkit-appearance: none; appearance: none; padding: 6px 10px; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; font-size: 0.875rem; color: var(--text); }
.note-toolbar button:hover { background: #f8fafc; }
.note-area { width: 100%; min-height: 220px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; background: #fff; line-height: 1.5; font-size: 1rem; outline: none; margin-bottom: 50px; scroll-margin-bottom: 50px; }
.note-area[contenteditable="false"] { background: #f8fafc; }
/* Fallback: if any legacy .note-area is used, match blockquote style */
.note-area blockquote {
  position: relative;
  margin: 0.5em 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: 10px;
  color: #334155;
}
.note-area blockquote::before { content: '“'; position: absolute; left: 8px; top: -10px; font-size: 2.4rem; line-height: 1; color: #cbd5e1; font-weight: 700; }
.note-area blockquote::after { content: '”'; position: absolute; right: 8px; bottom: -16px; font-size: 2.4rem; line-height: 1; color: #cbd5e1; font-weight: 700; }
.note-toolbar .spacer { width: 1px; height: 1.2em; background: var(--border); margin: 0 4px; }
/* Simple list styling inside the editor */
.note-area ul, .note-area ol { margin: 0 0 0.5em 0; padding-left: 1.25rem; }
.note-area ul[data-indent="none"], .note-area ol[data-indent="none"] { padding-left: 0; list-style-position: inside; }
/* Heading sizes inside the editor */
.note-area h1 { font-size: 3rem; margin: .3em 0; }
.note-area h2 { font-size: 2rem; margin: .3em 0; }
.note-area h3 { font-size: 1.5rem; margin: .3em 0; }
.note-area h6 { font-size: 0.75rem; margin: .3em 0; }
/* Make all headings normal weight; users can use Style > Bold for emphasis */
.note-area h1, .note-area h2, .note-area h3, .note-area h4, .note-area h5, .note-area h6 { font-weight: 400; }
.note-area p { font-size: 1rem; margin: .3em 0; }
/* Normalize paragraphs within list items to keep bullet and text on the same line when pasting */
.note-area li > p { margin: 0; display: inline; }
.viewer .media { width: 100%; height: 100%; display: grid; place-items: center; }
.viewer video, .viewer img, .viewer iframe { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
.viewer .embed-16x9 { width: 100%; aspect-ratio: 16 / 9; background: #fff; }
.viewer .embed-16x9 iframe { width: 100%; height: 100%; background: #fff; }

/* Confirm dialog */
.confirm-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.45); display: none; z-index: 2000; align-items: center; justify-content: center; }
.confirm-backdrop.open { display: flex; }
.confirm { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: min(92vw, 420px); box-shadow: var(--shadow); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.confirm .body { padding: 20px 16px; overflow: hidden; }
/* In the create-note modal, keep the text area from growing beyond the viewport; scroll inside it instead */
.confirm .note-editor { max-height: calc(90vh - 160px); overflow: hidden; }
.confirm .note-area { max-height: calc(90vh - 220px); overflow: auto; }
.confirm .actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.btn { appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn:hover { background: #f8fafc; }
textarea, input, button { font-family: inherit; }
/* Unify all buttons' font + weight */
button { font-family: inherit; font-weight: 600; }
/* Viewer title: center text */
#viewerHeader .title-input { text-align: center; }

/* Box content rendering */
.box::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: transparent; z-index: 20; pointer-events: none; }
.box, .box * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.box-inner { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; }
.box-inner .title { position: static; color: var(--text); background: transparent; padding: 0; font-weight: 700; font-size: 1rem; max-width: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.box-inner .note { position: absolute; inset: 0; padding: 10px; color: var(--text); background: #fff; }
.box-inner .note .title { margin: 0 0 6px 0; font-size: 1rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
/* Center titles inside boxes */
.box-inner .note .title { text-align: center; }
.box-inner .note .content { font-size: 1rem; color: #334155; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
/* Allow basic rich content inside note previews */
.box-inner .note .content h1, .box-inner .note .content h2, .box-inner .note .content h3,
.box-inner .note .content h4, .box-inner .note .content h5, .box-inner .note .content h6 {
  margin: .25em 0;
}
.box-inner .note .content p { margin: .25em 0; }
.box-inner .note .content ul, .box-inner .note .content ol { margin: .25em 0; padding-left: 1.25em; }
.box-inner .note .content ul[data-indent="none"], .box-inner .note .content ol[data-indent="none"] { margin-left: 0; padding-left: 0; list-style-position: inside; }
/* Keep bullets and text on one line for pasted content */
.box-inner .note .content li > p { margin: 0; display: inline; }
.box-inner .note .content hr { border: 0; border-top: 1px solid var(--border); margin: .25em 0; }
/* Styled blockquotes in box note previews */
.box-inner .note .content blockquote {
  position: relative;
  margin: 0.25em 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: 8px;
  color: #334155;
}
.box-inner .note .content blockquote p { margin: 0.2em 0; }
.box-inner .note .content blockquote cite { display: block; text-align: right; opacity: .7; font-style: normal; margin-top: .3em; }
.box-inner .note .content blockquote::before {
  content: '“';
  position: absolute;
  left: 6px; top: -8px;
  font-size: 2rem; line-height: 1; color: #cbd5e1; font-weight: 700;
}
.box-inner .note .content blockquote::after {
  content: '”';
  position: absolute;
  right: 6px; bottom: -14px;
  font-size: 2rem; line-height: 1; color: #cbd5e1; font-weight: 700;
}
/* Tables inside box-face note previews */
.box-inner .note .content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* prevent overflow; distribute columns evenly */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin: .25em 0;
}
.box-inner .note .content caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 0 4px 0;
}
.box-inner .note .content th,
.box-inner .note .content td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  font-size: 0.875rem; /* 14px */
  color: #334155;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.box-inner .note .content th {
  background: #f8fafc;
  font-weight: 700;
  text-align: left;
}
.box-inner .note .content tbody tr:nth-child(even) td {
  background: #f9fafb;
}
/* In grid boxes, disable link clicks so clicking opens the viewer; style as gray + underlined */
.box-inner .note .content a,
.box-inner .note .content a:visited { pointer-events: none; color: #64748b; text-decoration: underline; }
.box-inner .imgwrap, .box-inner .videowrap { position: absolute; inset: 0; }
.box-inner img, .box-inner video { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.box-inner iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #fff; }
.box-inner .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 10; }
.box-inner .play::before { content: ''; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent white; margin-left: 3px; }
/* Media overlay bars (top/bottom white strips; bottom used for Line 2) */
.box-inner .videowrap .bar-top, .box-inner .videowrap .bar-bottom, .box-inner .imgwrap .bar-bottom {
  position: absolute; left: 0; right: 0; height: 26px; background: #fff;
  display: flex; align-items: center; padding: 0 8px; color: #334155; font-size: 12px; line-height: 1; z-index: 8;
}
.box-inner .videowrap .bar-top { top: 0; border-bottom: 1px solid var(--border); }
.box-inner .videowrap .bar-bottom, .box-inner .imgwrap .bar-bottom { bottom: 0; border-top: 1px solid var(--border); }
/* Video boxes: increase white bar height to 36px (keep image bottom bar at 26px) and bump font size */
.box-inner .videowrap .bar-top, .box-inner .videowrap .bar-bottom { height: 36px; font-size: 13px; line-height: 1.3; }
.box-inner .videowrap .bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: left; }
.box-inner .videowrap .bar-bottom .bar-title { text-align: right; }
.box-inner .imgwrap .bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
/* Transparent overlay over video previews to aid touch interactions */
.box-inner .drag-overlay { position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: 9; }
/* On touch devices, allow the overlay to capture gestures (without visual change) */
@media (hover: none) and (pointer: coarse) {
  .box-inner .drag-overlay { pointer-events: auto; }
}
/* Video preview content container: center a 4:3 area inside the square box */
.box-inner .videowrap { display: grid; place-items: center; }
.box-inner .videowrap .video-content { width: 100%; height: 100%; display: grid; place-items: center; }
.box-inner .videowrap .ar-4x3 { width: 100%; aspect-ratio: 4 / 3; max-height: 100%; max-width: 100%; place-self: center; overflow: hidden; position: relative; }
.box-inner .videowrap .ar-4x3 > img,
.box-inner .videowrap .ar-4x3 > video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sync status badge */
.sync-status { font-size: 12px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: #fff; }
.sync-status.info { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.sync-status.ok { color: #065f46; border-color: #a7f3d0; background: #ecfdf5; }
.sync-status.error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
/* Header menu */
.menu-wrap { position: relative; }
.menu-wrap .menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px; min-width: 160px; z-index: 1200; display: none;
}
.menu-wrap.open .menu-dropdown { display: block; }
.menu-item {
  appearance: none; border: 0; background: transparent; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text);
}
.menu-item:hover { background: #f8fafc; }
/* Grid empty state */
.grid-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: #64748b; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; background: #fff; }
/* Folders modal */
.folders-list { list-style: none; padding: 0; margin: 0; }
.folders-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f1f5f9; margin-bottom: 5px; cursor: pointer; box-sizing: border-box; }
.folder-name { flex: 1; font-weight: 600; color: #334155; cursor: pointer; }
/* Keep only the ellipsis (more) button white on gray rows */
.folders-list .btn.small[data-action="more"] { background: #fff; border: 1px solid var(--border); }
.folder-actions { display: flex; gap: 6px; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.lavender { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; font-weight: 600; }
.btn.lavender:hover { background: #ddd6fe; }
.btn.danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; font-weight: 600; }
.btn.danger:hover { background: #fecaca; }
.btn.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.btn.success:hover { background: #a7f3d0; }
/* Folders list scroll container */
.folders-list { max-height: 60vh; overflow: auto; position: relative; }
/* Separator row under HOME */
.folders-list li.home-sep { padding: 0; height: 0; border: 0; background: transparent; margin: 8px 0; cursor: default; }
.folders-list li.home-sep::after { content: ""; display: block; width: 100%; border-top: 3px solid var(--text); }
/* Drag states for folder rows */
.folders-list li.dragging { opacity: .6; outline: 2px dashed var(--blue); }
.folders-list li.over { outline: 2px dashed var(--blue); outline-offset: -2px; }
.folders-modal input.folder-name-edit { height: 36px; }
.folders-list .folder-edit { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; }
.folders-modal header span { font-weight: 700; }
.folders-modal input[type="text"] { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
/* Unify button font + weight in folders modal (match Rename button) */
.folders-modal .btn, .folders-modal .primary { font-weight: 600; font-size: 13px; }

/* Inline Folders panel (homepage) */
.folders-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Center and constrain width on home page */
  max-width: 800px;
  margin: 16px auto;
  padding: 12px 12px 16px 12px;
  box-shadow: var(--shadow);
}
.folders-panel header { padding: 4px 4px 10px 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.folders-panel header span { font-weight: 700; }
.folders-panel .body { padding: 0 4px; }
.folders-panel input[type="text"] { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.folders-panel .folders-list { max-height: none; overflow: visible; }
.folders-panel .btn, .folders-panel .primary { font-weight: 600; font-size: 13px; }
.folders-panel .folders-list { width: 100%; }
/* Homepage inline editor: set folder name edit input font-size */
.folders-panel input.folder-name-edit { font-size: 16px; }
/* Homepage inline editor counts under the input */
.folders-panel .folder-counts { font-size: 12px; }

/* Toggle switch (used in folder editor for Share On/Off) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cbd5e1; /* slate-300 */
  transition: background 0.2s ease;
  border-radius: 9999px;
}
.switch-slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.toggle-switch input:checked + .switch-slider {
  background: #10b981; /* emerald-500 */
}
.toggle-switch input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* View toggles */
body.home-view #grid { display: none !important; }
body.folder-view #foldersPanel { display: none !important; }
/* Hide header actions on home page */
body.home-view #headerShareBtn,
body.home-view #foldersBtn,
body.home-view #addBoxBtn { display: none !important; }
.folders-list .share-info { margin-top: 8px; padding: 8px; background: #f8fafc; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; color: #334155; white-space: normal; overflow-wrap: anywhere; word-break: break-word; flex-basis: 100%; }
.folders-list .share-info a { color: var(--blue); text-decoration: underline; }
/* Read-only mode */
body.readonly #addBoxBtn { display: none !important; }
body.readonly #menu { display: none !important; }
body.readonly #grid { pointer-events: auto; }
body.readonly .header-title { display: none !important; }
body.readonly #foldersBtn { display: none !important; }
body.readonly #headerShareBtn { display: none !important; }
body.readonly .header-divider { display: none !important; }

/* Auth modal tweaks */
#authBackdrop input.title-input + input.title-input {
  margin-top: 8px; /* space between email and password */
}
#authBackdrop .body .options { margin-bottom: 10px; }

/* Error banner (shown on boot/runtime errors) */
.error-banner {
  position: fixed;
  left: 50%;
  top: env(safe-area-inset-top, 0px);
  transform: translateX(-50%);
  background: #fef2f2; /* red-50 */
  color: #991b1b; /* red-800 */
  border: 1px solid #fecaca; /* red-200 */
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  z-index: 3000;
  max-width: min(92vw, 640px);
  display: none;
}
.error-banner .error-banner-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 10px;
  border-radius: 8px;
}
.error-banner .error-banner-close:hover { background: #fee2e2; }

/* App footer (signed-in only) */
.app-footer {
  position: static; /* lives inside main scroll area */
  background: transparent;
  margin-top: 60px; /* some space before the divider */
  border-top: 1px solid var(--border); /* horizontal line */
  padding: 8px 12px 50px 12px; /* include extra space below footer */
}
.app-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* separators handle spacing */
  font-size: 0; /* collapse whitespace */
}
.app-footer .footer-email { font-size: 1rem; font-weight: 400; color: var(--muted); text-decoration: none; cursor: default; }
.app-footer .header-link { font-size: 1rem; }
.app-footer .footer-sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--muted);
  font-size: 1rem; /* ensure visible when parent has font-size: 0 */
}

/* Never show footer in read-only share or while signed out */
body.readonly #appFooter { display: none !important; }
body.signed-out #appFooter { display: none !important; }