body { font-family: 'Inter', sans-serif; }
/* Hide scrollbar in notes list but keep scrolling */
#notes-list { scrollbar-width: none; -ms-overflow-style: none; }
#notes-list::-webkit-scrollbar { width: 0; height: 0; }
/* Swipeable rows for notes list */
.note-swipe-row { position: relative; overflow: hidden; border-radius: 0.5rem; }
.note-swipe-actions { position: absolute; inset: 0; display: flex; align-items: stretch; justify-content: flex-end; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 120ms ease; }
.note-swipe-actions > .right-action { width: 88px; display: flex; align-items: center; justify-content: center; background: var(--brand-600); color: #fff; font-weight: 600; pointer-events: auto; }
.note-swipe-actions > .right-action.commit { background: var(--brand-700); }
.note-swipe-content { position: relative; transform: translateX(0); transition: transform 160ms ease; touch-action: pan-y; z-index: 2; }
.note-swipe-content.swiping { transition: none; }
.note-swipe-row.swiping .note-swipe-actions, .note-swipe-row.revealed .note-swipe-actions { opacity: 1; }
.note-archive-mini-btn { position: absolute; right: 8px; bottom: 8px; padding: 0; background: transparent; border: 0; color: inherit; opacity: 0.7; display: none; z-index: 3; }
.note-archive-mini-btn:hover { opacity: 1; }
@media (min-width: 768px) { .note-archive-mini-btn { display: inline-flex; } }
/* Theme vars (defaults) */
:root { --brand-50:#fef2f2; --brand-200:#fecaca; --brand-500:#ef4444; --brand-600:#dc2626; --brand-700:#b91c1c; --brand-800:#991b1b; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; --toggle-track: var(--brand-200); --toggle-knob:#ffffff; --hover-overlay: var(--brand-50); --hover-overlay-strong: var(--brand-200); --logo-fg: var(--brand-800); }
/* Theme presets */
.theme-red   { --brand-50:#fef2f2; --brand-200:#fecaca; --brand-500:#ef4444; --brand-600:#dc2626; --brand-700:#b91c1c; --brand-800:#991b1b; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-blue  { --brand-50:#eff6ff; --brand-200:#bfdbfe; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-green { --brand-50:#ecfdf5; --brand-200:#a7f3d0; --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-amber { --brand-50:#fffbeb; --brand-200:#fde68a; --brand-500:#f59e0b; --brand-600:#d97706; --brand-700:#b45309; --brand-800:#92400e; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-violet{ --brand-50:#f5f3ff; --brand-200:#ddd6fe; --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#6d28d9; --brand-800:#5b21b6; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-cyan  { --brand-50:#ecfeff; --brand-200:#a5f3fc; --brand-500:#06b6d4; --brand-600:#0891b2; --brand-700:#0e7490; --brand-800:#155e75; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-indigo{ --brand-50:#eef2ff; --brand-200:#c7d2fe; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-pink  { --brand-50:#fdf2f8; --brand-200:#fbcfe8; --brand-500:#ec4899; --brand-600:#db2777; --brand-700:#be185d; --brand-800:#9d174d; --app-bg:#ffffff; --card-bg:#ffffff; --text:#0f172a; }
.theme-slate { --brand-50:#f1f5f9; --brand-200:#cbd5e1; --brand-500:#64748b; --brand-600:#475569; --brand-700:#334155; --brand-800:#1f2937; --app-bg:#0b1220; --card-bg:#0f172a; --text:#e2e8f0; --toggle-track: rgba(255,255,255,0.15); --toggle-knob:#e5e7eb; --hover-overlay: rgba(255,255,255,0.08); --hover-overlay-strong: rgba(255,255,255,0.2); --logo-fg: var(--brand-200); }
.theme-zinc  { --brand-50:#fafafa; --brand-200:#e4e4e7; --brand-500:#71717a; --brand-600:#52525b; --brand-700:#3f3f46; --brand-800:#27272a; --app-bg:#0b1220; --card-bg:#0f172a; --text:#e2e8f0; --toggle-track: rgba(255,255,255,0.15); --toggle-knob:#e5e7eb; --hover-overlay: rgba(255,255,255,0.08); --hover-overlay-strong: rgba(255,255,255,0.2); --logo-fg: var(--brand-200); }
.theme-rose  { --brand-50:#fff1f2; --brand-200:#fecdd3; --brand-500:#f43f5e; --brand-600:#e11d48; --brand-700:#be123c; --brand-800:#9f1239; --app-bg:#0b1220; --card-bg:#0f172a; --text:#e2e8f0; --toggle-track: rgba(255,255,255,0.15); --toggle-knob:#e5e7eb; --hover-overlay: rgba(255,255,255,0.08); --hover-overlay-strong: rgba(255,255,255,0.2); }

/* apply theme */
body { background-color: var(--app-bg) !important; color: var(--text) !important; }
.bg-white { background-color: var(--card-bg) !important; }
.bg-white\/95 { background-color: var(--card-bg) !important; }
.bg-gray-50 { background-color: var(--app-bg) !important; }
.bg-slate-50 { background-color: var(--card-bg) !important; }
.bg-slate-200 { background-color: var(--brand-200) !important; }
.hover\:bg-slate-100:hover { background-color: var(--hover-overlay) !important; }
.hover\:bg-slate-50:hover  { background-color: var(--hover-overlay) !important; }
.hover\:bg-slate-200:hover { background-color: var(--hover-overlay-strong) !important; }
/* Map common text colors to theme text for contrast across themes */
.text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500 { color: var(--text) !important; }

/* Stronger theme contrast for dark rose */
.theme-rose .note-card { background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.06); }
.theme-rose .note-card:hover { background: linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.05)); }

/* Buttons adopting brand color */
#login-btn, #add-note-btn, #export-btn, #confirm-ok-btn { background-color: var(--brand-600) !important; }
#login-btn:hover, #add-note-btn:hover, #export-btn:hover, #confirm-ok-btn:hover { background-color: var(--brand-700) !important; }

/* Toast container for dom.js */
#toast-container { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; }

/* Animations */
@keyframes appFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: appFadeIn 220ms ease-out both; }

/* Checklist item move animation */
@keyframes checklistMove {
  from { transform: translateY(-4px); opacity: .85; }
  to { transform: translateY(0); opacity: 1; }
}
.checklist-move { animation: checklistMove 180ms ease-out; }

/* Title: allow wrapping but no explicit newlines */
#note-title { white-space: normal; }

/* Themed toggles and active states */
#backup-include-attachments-toggle { background-color: var(--toggle-track) !important; }
#backup-include-attachments-toggle.on { background-color: var(--brand-600) !important; }
#backup-include-attachments-knob { background-color: var(--toggle-knob) !important; }
.note-card.active { border-color: transparent !important; box-shadow: 0 0 0 1px var(--brand-500) !important; }
.slider-thumb::-webkit-slider-thumb, .slider-thumb::-moz-range-thumb { background: var(--brand-600) !important; }
.filter-btn.active { background-color: var(--brand-50) !important; color: var(--brand-600) !important; }
.enc-mode #add-note-btn { background-color: #16a34a !important; }
.enc-mode #add-note-btn:hover { background-color: #15803d !important; }
#encrypted-banner { background-color: var(--brand-600) !important; color: #fff !important; text-align: center; }
#show-revisions-btn { color: var(--brand-600) !important; }
#archive-note-btn, #download-pdf-btn { color: var(--brand-500) !important; padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
#archive-note-btn:hover, #download-pdf-btn:hover { color: var(--brand-700) !important; background-color: var(--hover-overlay) !important; }
.fg-brand { color: var(--brand-600) !important; }

/* Focus styling */
#search-input:focus { box-shadow: 0 0 0 2px var(--brand-500) !important; }
input:focus, textarea:focus { outline: none; }

/* Editor display */
#note-html-display { border: 0 !important; outline: none !important; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden; }
#note-html-display * { max-width: 100%; box-sizing: border-box; }
#note-html-display ul, #note-html-display ol { margin: 0 0 0.75rem 1.25rem; padding: 0; list-style-position: outside; font: inherit; line-height: 1.6; }
#note-html-display li { margin: 0.15rem 0; font: inherit; }

/* Code blocks */
.code-block { border: 1px solid rgba(100,116,139,0.2); background: var(--card-bg); border-radius: 12px; overflow: hidden; margin: 12px 0; width: 100%; max-width: 100%; box-sizing: border-box; contain: layout paint; }
.code-block .code-header { display:flex; align-items:center; justify-content: space-between; padding: 6px 10px; background: rgba(100,116,139,0.08); border-bottom: 1px solid rgba(100,116,139,0.15); font-size: 12px; color: #475569; }
.code-block .code-header .left { display:flex; align-items:center; gap:8px; }
.code-block .lang { font-weight: 600; opacity: 0.9; }
.code-block .code-copy-btn, .code-block .code-delete-btn { appearance: none; background: transparent; border: 0; border-radius: 8px; color: #475569; font-size: 12px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; }
.code-block .code-copy-btn:hover { background: rgba(100,116,139,0.12); }
.code-block .code-delete-btn:hover { background: rgba(239,68,68,0.12); color: #dc2626; }
.code-block pre { margin: 0; padding: 12px; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; overflow-x: auto; overflow-y: auto; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; display:block; }
.code-block pre code { display:block; }

/* Map tailwind red utilities to theme */
.bg-red-600 { background-color: var(--brand-600) !important; }
.hover\:bg-red-700:hover { background-color: var(--brand-700) !important; }
.text-red-500 { color: var(--brand-500) !important; }
.text-red-600 { color: var(--brand-600) !important; }
.text-red-700 { color: var(--brand-700) !important; }
.text-red-800 { color: var(--brand-800) !important; }
.border-red-200 { border-color: var(--brand-200) !important; }
.focus\:ring-red-500:focus { --tw-ring-color: var(--brand-500) !important; }

/* Settings tabs */
.tab-active { border-color: var(--brand-600) !important; color: var(--text) !important; }
.tab-inactive { border-color: transparent !important; color: #64748b !important; }

/* Focus mode */
.focus-mode #notes-list-aside,
.focus-mode #welcome-screen { display: none !important; }
.focus-mode #main-content { position: fixed; inset: 0; z-index: 40; width: 100vw; height: 100vh; padding: 1rem; background: #f8fafc; display: flex !important; }
.focus-mode #formatting-toolbar { display: flex !important; }
.focus-mode #fullscreen-exit-btn { display: inline-flex !important; }

/* Note cards */
.note-card { transition: all 0.2s ease-in-out; cursor: pointer; border-radius: 0.5rem !important; box-shadow: none !important; }
.note-card:hover { box-shadow: 0 0 0 1px rgba(0,0,0,0.14) !important; }
.theme-slate .note-card, .theme-zinc .note-card, .theme-rose .note-card { box-shadow: none !important; }
.theme-slate .note-card:hover, .theme-zinc .note-card:hover, .theme-rose .note-card:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.16) !important; }
.note-card.active:hover { box-shadow: 0 0 0 1px var(--brand-500) !important; }

@media (max-width: 767px) { #editor-card { padding-right: 76px !important; } }
@media (min-width: 768px) { .export-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; } .export-grid > fieldset { margin: 0; } }
.text-xs-muted { color: #64748b; opacity: 0.9; }

/* Tags */
.tag-pill { background-color: var(--brand-200); color: var(--brand-800); padding: 4px 10px; border-radius: 9999px; font-size: 0.75rem; line-height: 1; }
.tag-pill button { margin-left: 4px; color: var(--brand-800); opacity: 0.9; }
.tag-chip-mini { background-color: var(--brand-200); color: var(--brand-800); padding: 2px 6px; border-radius: 9999px; font-size: 10px; line-height: 1; }
.note-tags-mini { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.tight-tags { margin-top: 2px !important; margin-bottom: 0 !important; }
.note-icons { gap: 2px; }

/* HTML toggle knob */
[data-fmt="html-toggle"] [data-role="knob"] { transform: translateY(3px) !important; }
[data-fmt="html-toggle"][aria-pressed="true"] [data-role="knob"] { transform: translateY(25px) !important; }

/* Editor card overrides */
#editor-card { position: relative; box-shadow: none !important; border: none !important; overflow: visible; }
#editor-card::before, #editor-card::after { content: none !important; }

/* Utility */
.hidden { display: none; }

/* Time Machine animations */
@keyframes tmInLeft { from { opacity: 0; transform: translateX(-30px);} to { opacity:1; transform: translateX(0);} }
@keyframes tmInRight{ from { opacity: 0; transform: translateX(30px);}  to { opacity:1; transform: translateX(0);} }
@keyframes tmOutLeft{ from { opacity: 1; transform: translateX(0);}    to { opacity:0; transform: translateX(-30px);} }
@keyframes tmOutRight{from { opacity: 1; transform: translateX(0);}     to { opacity:0; transform: translateX(30px);} }
.tm-fly-in-left  { animation: tmInLeft 220ms ease-out both; }
.tm-fly-in-right { animation: tmInRight 220ms ease-out both; }
.tm-fly-out-left { animation: tmOutLeft 180ms ease-in both; }
.tm-fly-out-right{ animation: tmOutRight 180ms ease-in both; }

/* Attachments footer panel and tiles */
#attachments-container.att-panel { position: sticky; position: -webkit-sticky; bottom: 0; bottom: env(safe-area-inset-bottom); z-index: 10; background-color: var(--card-bg) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 0 !important; padding-bottom: max(10px, env(safe-area-inset-bottom)); will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden; contain: paint; }
/* Subtle fade at the top edge of the sticky attachments bar */
#attachments-container.att-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--card-bg)); }
/* Ensure the editor column fills the viewport so attachments can stick at the bottom even for short notes */
#main-content { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
/* Mobile: avoid any bleed-through behind the sticky bar by disabling backdrop-filter and using fixed mode */
@media (max-width: 767px) {
    #attachments-container.att-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 50; }
    #attachments-container.att-panel.att-fixed-mobile { position: fixed; left: 0; right: 0; bottom: 0; bottom: max(0px, env(safe-area-inset-bottom)); padding-bottom: max(10px, env(safe-area-inset-bottom)); width: 100%; }
    /* Nudge attachments and download button in from the left edge */
    #attachments-container { padding-left: 14px; padding-right: 10px; }
    .att-zip-btn { padding-left: 14px; }
    /* Start the right-hand toolbars at the top on mobile */
    #formatting-toolbar { top: 12px; transform: none; }
}
/* Desktop: switch to fixed to avoid any lift at the very bottom */
@media (min-width: 768px) {
    #attachments-container.att-panel.att-fixed { position: fixed; bottom: 0; left: 0; right: auto; width: 100vw; }
}
/* Force exact bottom anchoring on desktop */
@media (min-width: 768px) { #attachments-container.att-panel { bottom: 0; } }
/* Remove extra bottom padding on the editor when attachments are present to avoid early sticky release */
#editor-card.no-bottom-pad { padding-bottom: 0 !important; }
/* Make attachments lay out as equal squares */
#attachments-container { display: flex; flex-wrap: wrap; gap: 8px; }
#attachments-container > div { width: 80px; height: 80px; border-radius: 10px; border: 1px solid rgba(100,116,139,0.25); background: #f8fafc; overflow: hidden; position: relative; margin-top: 0 !important; }
#attachments-container img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
#attachments-container iframe { width: 100% !important; height: 100% !important; border: 0; }
#attachments-container a, #attachments-container .att-file { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px; text-align: center; color: #475569 !important; background: #f8fafc; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#attachments-container > div > button { position: absolute; top: 4px; right: 4px; }
.att-badge { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 9999px; letter-spacing: .3px; }
.att-ico { width: 28px; height: 28px; opacity: 0.8; }
/* Attachment preview panel */
#attachment-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 0 !important; box-shadow: none !important; }
#attachment-preview .ap-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card-bg); border-bottom: 1px solid rgba(100,116,139,0.12); }
#attachment-preview .ap-bar button { padding: 6px 10px; border-radius: 6px; background-color: var(--brand-600); color: #fff; border: none; }
#attachment-preview .ap-bar button:hover { background-color: var(--brand-700); }
#attachment-preview .ap-body { flex: 1 1 auto; min-height: 0; height: 100%; overflow: hidden; background: var(--card-bg); display: flex; align-items: stretch; justify-content: stretch; }
#attachment-preview pre { margin: 0; padding: 12px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.5; max-height: 100%; overflow: auto; width: 100%; }
#attachment-preview .ap-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
#attachment-preview iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block; }
/* Prevent horizontal widening from any content */
#editor-card { overflow-x: hidden; }
/* Ensure content doesn't sit under right toolbars on desktop */
@media (min-width: 768px) { #editor-card { padding-right: 110px !important; } }
/* Mobile tweaks */
@media (max-width: 767px) {
    #attachments-container > div { width: 56px; height: 56px; border-radius: 8px; }
    .att-ico { width: 20px; height: 20px; }
    .att-badge { font-size: 9px; padding: 2px 5px; }
    #attachment-preview .ap-bar { padding: 8px; gap: 6px; flex-wrap: wrap; }
    #attachment-preview .ap-bar button { padding: 8px 12px; font-size: 14px; }
    #attachment-preview .ap-body { height: 100%; }
    #attachment-preview .ap-bar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Zip button styles */
/* Minimal "Download All" button under attachments */
.att-zip-btn { background: none; border: none; color: var(--brand-600); font-size: 12px; padding: 0; margin-top: 6px; margin-bottom: 10px; text-decoration: none; cursor: pointer; display: block; width: 100%; text-align: left; flex-basis: 100%; }
.att-zip-btn:hover { color: var(--brand-700); text-decoration: none; }

/* Window Controls Overlay titlebar */
#wco-titlebar {
    position: fixed;
    top: env(titlebar-area-y, 0px);
    left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100vw);
    height: env(titlebar-area-height, 0px);
    background-color: var(--brand-600);
    color: #ffffff;
    z-index: 1000;
    display: none; /* shown only when overlay active */
    align-items: center;
    padding: 0 12px;
    -webkit-app-region: drag;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.wco-active #wco-titlebar { display: flex; }
#wco-titlebar .no-drag { -webkit-app-region: no-drag; }
/* Add padding so content doesn't sit under overlay */
.wco-active #app-wrapper { padding-top: env(titlebar-area-height, 0px); }
.wco-active #auth-overlay { padding-top: env(titlebar-area-height, 0px); }