:root{
  /* improved light theme defaults for better contrast */
  --bg:#f3f4f6;    /* slightly warmer/neutral page background */
  --card:#ffffff;  /* card surface stays white */
  --primary:#1e88e5; /* slightly darker, clearer blue primary */
  --primary-hover:#141c26; /* hover state for primary buttons */
  --on-primary:#ffffff;
  --option-text:#202124; /* default text color for select/options */
  --editor-font-size:15px;
  --surface-2: rgba(0,0,0,0.06);
  --danger:#d32f2f;
}

*{box-sizing:border-box}
body {
  margin: 0;
  background: var(--bg);
  color: #202124;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.app-bar{
  position:relative; /* ensure z-index stacking works */
  z-index:2200; /* keep app bar above editor when in fullscreen */
  height:64px;
  background:var(--primary);
  color:var(--on-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* Show the toggleListBtn only when in fullscreen mode. Hide it in normal view. */
.app-bar #toggleListBtn{ display:none; }
body.editor-fullscreen .app-bar #toggleListBtn{ display:inline-block; }
.app-title{font-weight:500;font-size:18px}
/* ensure app-title links inherit header styles and remove underline */
.app-title a{ text-decoration: none; color: inherit; }
.save-status{opacity:0.95;font-size:13px}
/* app-bar action group */
.app-actions{display:flex;align-items:center;gap:10px}

/* ensure header buttons are visible on the colored app bar */
.app-bar .btn{background:transparent;color:var(--on-primary);box-shadow:none;padding:6px 10px}
.app-bar .btn.flat{background:transparent;color:var(--on-primary)}
.app-bar select{background:transparent;color:var(--on-primary);border:1px solid rgba(255,255,255,0.12);padding:6px 8px;border-radius:6px}
/* Ensure select dropdown options follow the active theme and remain readable */
.app-bar select option{background:var(--card);color:var(--option-text)}

/* fullscreen editor mode (in-page) */
/* in-page fullscreen editor: keep top app-bar visible, hide resizer and drop-overlay (sidebar handled separately) */
body.editor-fullscreen .resizer,
body.editor-fullscreen .drop-overlay{
  display: none !important;
}

/* Hide the sidebar card by default in fullscreen; it can be shown with the toggle (body.show-sidebar) */
body.editor-fullscreen .sidebar{ display: none; }
/* When user requests the sidebar while in fullscreen, show it as an overlay */
body.editor-fullscreen.show-sidebar .sidebar{
  display:flex;
  /* allow JS to control vertical placement/height so sidebar can match editor height */
  position:fixed;
  left:18px;
  /* top and height are set dynamically by script to match the editor's size */
  bottom:auto;
  /* responsive width: up to 45vw or 520px */
  width: min(45vw, 520px);
  z-index:2100;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-radius:10px;
  overflow:auto;
}
body.editor-fullscreen.show-sidebar .resizer{display:none !important}
body.editor-fullscreen .container{width:70;max-width:70%;margin:0 auto;}
body.editor-fullscreen .layout{gap:0}
/* Make fullscreen editor in-flow so the page can scroll with its content
   (previously it was fixed-position which prevented the page from growing). */
body.editor-fullscreen .editor{
  /* Make fullscreen editor in-flow so the page can grow when textarea expands
     and allow it to use the full available width (with small gutters). */
  position:static;
  margin:10px; /* small outer gutter */
  width:calc(100% - 20px); /* fill viewport minus gutter */
  max-width:none;
  z-index:200;
  border-radius:8px;
  padding:18px;
  display:block;
}
body.editor-fullscreen .editor .controls{display:flex;align-items:center;justify-content:space-between}
/* Make textarea take remaining space so bottom-controls sit at the bottom naturally */
/* In fullscreen we want the textarea to expand and push the page height (no internal scrollbar) */
body.editor-fullscreen .editor textarea{
  /* allow textarea to grow naturally in fullscreen */
  flex: none;
  height: auto;
  min-height: 140px;
  overflow: visible;
}

/* Ensure textarea fills the editor card horizontally and accounts for padding */
body.editor-fullscreen .editor textarea{
  width:100%;
  box-sizing:border-box;
}

/* Ensure bottom controls are visible and above editor content */
body.editor-fullscreen .editor .bottom-controls{
  z-index:210;
}

/* hide the about/info section when the editor is in fullscreen mode */
body.editor-fullscreen .about{display:none !important}

/* Bookmark banner (small, unobtrusive, fixed bottom) */
.bookmark-banner{
  position:fixed;
  right:18px;
  bottom:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.85));
  color: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  border-radius:14px;
  z-index:1400;
  padding:10px 14px;
  max-width:480px;
  min-width:260px;
  backdrop-filter: blur(6px) saturate(120%);
  border:1px solid rgba(0,0,0,0.06);
}
.bookmark-inner{display:flex;gap:12px;align-items:center}
.bookmark-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(180deg,var(--primary), rgba(0,0,0,0.06));color:var(--on-primary);flex-shrink:0}
.bookmark-text{flex:1;min-width:0}
.bookmark-text strong{display:block;margin-bottom:6px;font-size:14px}
.bookmark-text #bookmarkMessage{font-size:12px;color:rgba(0,0,0,0.65)}
.bookmark-actions{display:flex;gap:8px;align-items:center}
.bookmark-actions .btn{padding:6px 10px;font-size:13px;border-radius:8px}
.bookmark-actions .btn.small{padding:6px 8px;font-size:12px}
.bookmark-actions .btn.primary{background:var(--primary);color:var(--on-primary);border:none}
.bookmark-actions .btn.btn-outline{background:transparent;border:1px solid rgba(0,0,0,0.08)}
.bookmark-actions .btn.flat{background:transparent}
.bookmark-actions .danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}

/* Make the primary two banner buttons match visually (primary color) */
#bookmarkNowBtn, #bookmarkLaterBtn{
  background:var(--primary) !important;
  color:var(--on-primary) !important;
  border: none !important;
}
#bookmarkNowBtn:hover, #bookmarkLaterBtn:hover{
  filter:brightness(0.95);
}

/* Make the banner span full width on very small screens */
@media (max-width:520px){
  .bookmark-banner{left:8px;right:8px;bottom:12px;max-width:unset;min-width:unset;padding:10px}
  .bookmark-inner{gap:8px}
  .bookmark-actions{flex-wrap:wrap}
  .bookmark-text #bookmarkMessage{display:block}
}

/* theme variants: default (light), dark, sepia, fark (a strong/high-contrast accent) */
body.theme-dark{
  --bg:#121212;
  --card:#1e1e1e;
  --primary:#bb86fc;
  --primary-hover:#2d2147;
  --on-primary:#000000;
  --surface-2: rgba(255,255,255,0.04);
  --danger:#d32f2f;
}
body.theme-sepia{
  --bg:#f4ecd8;
  --card:#fff7ea;
  --primary:#b57b24;
  --primary-hover:#9a5f1e;
  --on-primary:#ffffff;
  --surface-2: rgba(0,0,0,0.04);
  --danger:#d32f2f;
}
body.theme-fark{
  --bg:#0b1220;
  --card:#071024;
  --primary:#03dac6;
  --primary-hover:#02b59a;
  --on-primary:#001219;
  --surface-2: rgba(255,255,255,0.03);
  --danger:#cf6679;
}

/* Soft Teal theme: calm accent */
body.theme-teal{
  --bg:#EAF6F5;
  --card:#FFFFFF;
  --primary:#2AA198;
  --primary-hover:#041b17;
  --on-primary:#FFFFFF;
  --surface-2: rgba(0,0,0,0.06);
  --danger:#d32f2f;
}

/* Accessible High Contrast theme */
body.theme-high{
  --bg:#FAFAFA;
  --card:#FFFFFF;
  --primary:#0A66C2;
  --primary-hover:#0b2036;
  --on-primary:#FFFFFF;
  --surface-2: rgba(0,0,0,0.08);
  --danger:#B00020;
}

.container{
  width:90%;
  height:80%;
  max-width:1100px;
  margin:22px auto;
}

.layout{display:flex;gap:20px}

.card{
  background:var(--card);
  border-radius:12px;
  box-shadow: 0 6px 12px var(--surface-2);
  padding:12px;
}

.sidebar{width:280px;display:flex;flex-direction:column}
.resizer{width:10px;cursor:col-resize;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.06));border-radius:4px}
.resizer:hover{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.12))}
.resizer:active{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.18))}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.note-list{list-style:none;padding:0;margin:0;max-height:100vh;overflow:auto}
.note-list li{padding:12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.06)}
.note-list li:hover{filter:brightness(0.98)}
.note-list li.active{
  /* force the active row to use the exact primary/header color and override the tint backgrounds */
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* ensure title and timestamp are readable when an item is active */
.note-list li.active .note-title,
.note-list li.active small{
  color: var(--on-primary) !important;
  opacity: 0.98;
}

/* normal timestamp color (hidden by default per user request) */
.note-list li small{display:none !important}
body.theme-dark .note-list li small{color:rgba(255,255,255,0.72)}
body.theme-sepia .note-list li small{color:rgba(32,32,32,0.54)}
body.theme-fark .note-list li small{color:rgba(200,240,235,0.72)}

/* cycle subtle background tints to differentiate items (4 colors) */
.note-list li:nth-child(4n+1){background:linear-gradient(90deg, rgba(98,0,238,0.03), transparent)}
.note-list li:nth-child(4n+2){background:linear-gradient(90deg, rgba(3,218,197,0.03), transparent)}
.note-list li:nth-child(4n+3){background:linear-gradient(90deg, rgba(255,193,7,0.03), transparent)}
.note-list li:nth-child(4n+4){background:linear-gradient(90deg, rgba(244,67,54,0.03), transparent)}

/* Editor container: allow content to determine height so textarea can grow */
.editor{flex:1;display:flex;flex-direction:column;height:auto}
/* editor textarea: make it fill available space so bottom-controls stay pinned to the bottom
   while still allowing manual vertical resize if the user drags the handle. */
textarea{
  flex: 1 1 auto;
  height: auto;
  resize: vertical; /* user can drag downward/upward */
  border: 0;
  padding: 16px 18px;
  font-size: var(--editor-font-size, 15px);
  border-radius: 8px;
  background: transparent;
  outline: none;
  overflow: auto;
  min-height: none;
  /* allow larger expansion; cap at 95% of viewport height to avoid overflow */
  /* cap the editor height so it uses an internal scrollbar instead of growing the page */
  max-height: none;
}

.sidebar-footer{margin-top:8px}
.divider{border:0;border-top:1px solid rgba(0,0,0,0.06);margin:8px 0}
.footer-actions{display:flex;gap:8px;justify-content:flex-end}

/* scrollbar styling */
.note-list::-webkit-scrollbar, textarea::-webkit-scrollbar {height:12px;width:10px}
.note-list::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.12);border-radius:8px}
.note-list::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {background:transparent}

.top-controls{margin-bottom:8px}
.bottom-controls{margin-top:8px}
.small{font-size:12px}

/* modal for theme customizer */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-content{width:420px;max-width:92vw;padding:16px}
/* Ensure theme customizer is always above other overlays (import modal, drop overlay) */
#themeModal{z-index:300}
.color-row{display:flex;gap:12px;align-items:center;margin:8px 0}
.color-row label{display:flex;align-items:center;gap:8px;flex:1}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* Import modal preview */
#importPreview{margin:8px 0;color:#333}

/* Undo button style */
#undoBtn{font-size:13px;padding:6px 10px}

/* drop overlay */
.drop-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);color:#fff;font-size:20px;z-index:100;pointer-events:none;opacity:0;transition:opacity .15s}
.drop-overlay[aria-hidden="false"]{pointer-events:auto;opacity:1}
.drop-overlay p{margin:0}

/* import details lists styling */
#importDetails ul{list-style:disc;padding-left:18px;margin:6px 0}
#importDetails strong{display:block;margin-top:8px}

/* toggle switch */
.switch{display:inline-block;width:44px;height:24px;position:relative;margin-right:12px}
.switch input{display:none}
.slider{position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:rgba(255,255,255,0.18);border-radius:12px;transition:.2s}
.slider:before{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:50%;left:4px;transform:translateY(-50%);transition:.2s}
.switch input:checked + .slider{background:var(--on-primary)}
.switch input:checked + .slider:before{left:calc(100% - 22px)}

body.theme-dark{background:var(--bg);color:#e6e6e6;--option-text:#e6e6e6}
body.theme-dark .card{background:var(--card)}
body.theme-dark textarea{color:#e6e6e6}
body.theme-dark .note-list li.active{background:var(--primary);color:var(--on-primary)}

body.theme-sepia{background:var(--bg);color:#3b2f1f;--option-text:#3b2f1f}
body.theme-sepia .card{background:var(--card)}
body.theme-sepia textarea{color:#3b2f1f}
body.theme-sepia .note-list li.active{background:var(--primary);color:var(--on-primary)}

body.theme-fark{background:var(--bg);color:#d9fff6;--option-text:#d9fff6}
body.theme-fark .card{background:var(--card)}
body.theme-fark textarea{color:#d9fff6}
body.theme-fark .note-list li.active{background:var(--primary);color:var(--on-primary)}

/* Ensure teal/high theme option text is readable */
body.theme-teal{background:var(--bg);color:#022827;--option-text:#022827}
body.theme-teal .card{background:var(--card)}
body.theme-teal textarea{color:#022827}
body.theme-teal .note-list li.active{background:var(--primary);color:var(--on-primary)}

body.theme-high{background:var(--bg);color:#0a0a0a;--option-text:#0a0a0a}
body.theme-high .card{background:var(--card)}
body.theme-high textarea{color:#0a0a0a}
body.theme-high .note-list li.active{background:var(--primary);color:var(--on-primary)}

.controls{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.word-count{color:#666;font-size:13px;margin:0}

.btn{background:var(--primary);color:var(--on-primary);border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:500}
.btn.flat{background:transparent;color:var(--primary);box-shadow:none}
.btn.danger{background:var(--danger)}
.btn:active{transform:translateY(1px)}

/* Hover / focus improvements for better visibility */
.btn:hover,
.btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  background: var(--primary-hover);
  color: var(--on-primary);
}

/* Make flat buttons more clearly highlighted on hover */
/* .btn.flat:hover,
.btn.flat:focus-visible{
  background: rgba(0,0,0,0.06);
  color: var(--primary-hover);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
} */

/* Nav/compact buttons: subtle background on hover */
.nav-btn:hover,
.nav-btn:focus-visible{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  box-shadow: none;
}

/* Ensure keyboard users see a clear focus ring (accessible) */
.btn:focus-visible,
.nav-btn:focus-visible,
select:focus-visible,
textarea:focus-visible,
.note-list li:focus-visible{
  outline: 3px solid rgba(30,136,229,0.14);
  outline-offset: 2px;
}

/* Links and export buttons */
.btn-export:hover,
.btn-export:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

/* Navigation buttons (Prev/Next) - compact outlined style */
.nav-btn{
  padding:6px 10px;
  font-size:13px;
  border-radius:8px;
  background:transparent;
  color:var(--primary);
  border:1px solid rgba(0,0,0,0.08);
  margin-left:8px;
}
.nav-btn:hover{background:rgba(0,0,0,0.04)}

/* Theme-aware tweaks */
body.theme-dark .nav-btn{color:var(--primary);border-color:rgba(255,255,255,0.12)}
body.theme-sepia .nav-btn{color:var(--primary);border-color:rgba(0,0,0,0.06)}
body.theme-fark .nav-btn{color:var(--primary);border-color:rgba(255,255,255,0.06)}
body.theme-teal .nav-btn{color:var(--primary);border-color:rgba(0,0,0,0.06)}
body.theme-high .nav-btn{color:var(--primary);border-color:rgba(0,0,0,0.08)}

/* small screens: make the app single-column and touch-friendly */
@media (max-width:720px){
  /* single-column layout, hide sidebar to prioritize editor space */
  .layout{flex-direction:column}
  .sidebar{display:none}
  .resizer{display:none}

  /* container spacing tuned for small screens */
  .container{width:95%;margin:12px auto}

  /* app bar compacting and wrapping actions */
  .app-bar{height:56px;padding:0 12px}
  .app-title{font-size:16px}
  .app-actions{gap:8px;flex-wrap:wrap;align-items:center}
  /* allow horizontal scrolling of actions when space is tight */
  .app-actions{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .app-actions .btn, .app-actions select{padding:8px 10px;font-size:14px}

  /* editor: make card use full width and allow textarea to grow vertically */
  .editor{width:100%;height:auto}
  .editor.card{padding:12px}
  body.editor-fullscreen .editor{margin:8px;width:calc(100% - 16px);}

  /* textarea should be large and readable on phones */
  textarea{min-height:50vh;font-size:16px;padding:12px;box-sizing:border-box;width:100%;overflow:visible}

  /* controls stack nicely and buttons wrap */
  .controls.top-controls .left-controls,
  .controls.bottom-controls .left-controls{display:flex;gap:8px;flex-wrap:wrap}
  .bottom-controls{margin-top:8px}

  /* make buttons slightly larger for touch */
  .btn{padding:10px 12px;font-size:15px}

  /* make note list manageable on small screens */
  .note-list{max-height:28vh}

  /* bookmark banner should span near-full width */
  .bookmark-banner{left:12px;right:12px;bottom:12px;max-width:none}
}

/* Mobile sidebar overlay when user opens notes on small screens */
body.mobile-sidebar-open #mobileBackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1400}
body.mobile-sidebar-open .sidebar{display:block;position:fixed;left:0;top:56px;bottom:0;width:80%;max-width:420px;z-index:1501;padding:12px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,0.3);border-radius:0}
/* ensure the editor below doesn't scroll under the sidebar when open */
body.mobile-sidebar-open .container{pointer-events:none}
body.mobile-sidebar-open .container .editor{pointer-events:all}

/* Shortcut tooltip (shown on hover of actionable elements) */
.shortcut-tooltip{
  position:fixed;
  background:rgba(0,0,0,0.78);
  color:#fff;
  padding:6px 8px;
  border-radius:6px;
  font-size:12px;
  z-index:1200;
  pointer-events:none;
  white-space:nowrap;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .12s, transform .12s;
}
.shortcut-tooltip.show{opacity:1}