/* Bundled Roboto Mono font — no network dependency */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/RobotoMono-Regular-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/RobotoMono-Regular-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

/* Basic reset and body styles */
* {
    margin: 0;    
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Mono', monospace;
    background-color: #f5f5f5;
    color: rgba (0,0,0,0.9);
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto; /* Body handles scrolling */
    padding: 20px;
    font-size: var(--base-font);       /* body inherits variable             */
    cursor: text;
}

/* ── Custom Title Bar (Electron) ── */
#title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 245, 245, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #333;
    z-index: 9999;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

#title-bar.drag-region {
    -webkit-app-region: drag;
}

#title-bar .no-drag {
    -webkit-app-region: no-drag;
}

#title-left {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    overflow: hidden;
}

#title-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#title-unsaved-dot {
    color: #e81123;
    font-size: 11px;
    line-height: 1;
}

#title-unsaved-dot.hidden {
    display: none;
}

#title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#title-bar.untitled #title-text {
    opacity: 0.6;
    font-style: italic;
}

#title-bar.deleted #title-text::after {
    content: ' (deleted)';
    opacity: 0.5;
}

#title-bar.readonly #title-text::after {
    content: ' (read-only)';
    opacity: 0.5;
}

#window-controls {
    display: flex;
    height: 100%;
}

#window-controls button {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s;
}

#window-controls button:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

#btn-close:hover {
    background-color: #e81123 !important;
    color: #fff;
}

/* ── Title bar in dark theme ── */
body.dark-theme #title-bar {
    background: rgba(26, 26, 26, 0.75);
    color: #cccccc;
}

body.dark-theme #window-controls button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme #btn-close:hover {
    background-color: #e81123 !important;
    color: #fff;
}

/* When title bar is visible, content extends full window — title bar overlays on top */
body.has-title-bar {
    padding-top: 20px; /* Same as base — no extra push */
}

/* Push toolbar down when title bar is visible */
body.has-title-bar #toolbar {
    top: 72px; /* 32px title bar + 40px original top */
}

/* Editor wrapper needs top margin so first line isn't hidden behind title bar */
body.has-title-bar .editor-wrapper {
    margin-top: 72px; /* 32px title bar + 40px original margin */
}

/* When notification bar is also visible, add more offset */
body.has-notification-bar {
    padding-top: 20px;
}

body.has-notification-bar #toolbar {
    top: 104px; /* 32px title + 32px notification + 40px */
}

body.has-notification-bar .editor-wrapper {
    margin-top: 104px;
}

/* ── Notification Bar ── */
#notification-bar {
    position: fixed;
    top: 32px; /* Below title bar */
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff3cd;
    color: #856404;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    z-index: 9998;
    padding: 0 16px;
    border-bottom: 1px solid #ffc107;
}

#notification-bar button {
    padding: 2px 10px;
    border: 1px solid #856404;
    border-radius: 3px;
    background: transparent;
    color: #856404;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

#notification-bar button:hover {
    background: rgba(133, 100, 4, 0.1);
}

#notification-bar button:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: 1px;
}

#notification-actions {
    display: flex;
    gap: 6px;
}

body.dark-theme #notification-bar {
    background: #332b00;
    color: #ffc107;
    border-bottom-color: #554400;
}

body.dark-theme #notification-bar button {
    color: #ffc107;
    border-color: #ffc107;
}

body.dark-theme #notification-bar button:hover {
    background: rgba(255, 193, 7, 0.1);
}

/* ── Save Toast ── */
#save-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #107c10;
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

#save-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#save-toast.hidden {
    display: block; /* keep in DOM but transparent */
}

body.dark-theme #save-toast {
    background: #0e6b0e;
}

/* ── Focus ring for title bar buttons ── */
#window-controls button:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}

/* ── Fullscreen: hide title bar ── */
body.fullscreen #title-bar,
body.fullscreen #notification-bar {
    display: none !important;
}

body.fullscreen.has-title-bar {
    padding-top: 20px; /* Restore original padding */
}

body.fullscreen.has-title-bar #toolbar {
    top: 40px; /* Restore original position */
}

/* Editor should not handle its own scrolling */
.editor-wrapper {
    position: relative;      
    margin: 60px 0;
    min-height: calc(100vh - 100px);
    padding: 0 100px; /* Add horizontal padding to accommodate heading markers */
    cursor: text;
}

/* Editor styles */
#editor {
    margin: auto;
    max-width: 800px;
    min-height: 100%;
    padding: 40px 20px;
    outline: none;
    white-space: pre-wrap;
    line-height: 1.5;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Paragraph spacing */
#editor div {
    margin-top: 1.5em;
}

#editor div:first-child {
    margin-top: 0;
}

#editor > *:first-child {
    margin-top: 0;
}

#editor li
 {
    margin-top: .6em; /* 1.3 times the line height */
}

/* Toolbar (#toolbar is now the morphing activator) */
#toolbar {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    
    /* Initial State: Circle Activator */
    width: 30px; /* Hit area */
    height: 30px; /* Hit area */
    border-radius: 15px;    
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(8px);
    padding: 0; /* No padding when it's a dot */
    cursor: pointer;
    z-index: 1000;
    display: flex; /* To help center the dot initially, and align buttons later */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Crucial for morph effect and hiding buttons */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out, background-color 0.3s ease-in-out, padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#toolbar-activator-dot {
    /* This is the visible red dot */
    position: absolute; /* Positioned relative to #toolbar */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center it */
    width: 10px;
    height: 10px;
    background-color: red;
    border: 5px solid red;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 1;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s;
    pointer-events: none; 
}

/* Save progress ring (hidden by default) */
.save-progress-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    opacity: 0;
    pointer-events: none;
}

.save-progress-track {
    stroke: transparent;
}

.save-progress-bar {
    stroke: #2196F3;
    transition: stroke-dashoffset 0.4s ease-out, stroke 0.2s ease;
}

.save-checkmark {
    stroke: transparent;
    opacity: 0;
}

/* Hover effect on #toolbar when it's in its dot state */
#toolbar:not(.is-toolbar-active):hover #toolbar-activator-dot {
    width: 30px;
    height: 30px;
}

/* Toolbar Active State (Morphed) */
#toolbar.is-toolbar-active {
    width: auto; 
    min-width: auto; /* Let content define width */
    height: auto; 
    min-height: auto; /* Let content define height */
    border-radius: 8px; 
    background-color: rgba(255, 255, 255, 0.1); 
    padding: 10px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: visible; 
    cursor: default;
    justify-content: flex-start; /* Align buttons to the start when active */
}

#toolbar.is-toolbar-active #toolbar-activator-dot {
    opacity: 0;
    transform: scale(0) translate(-50%, -50%); /* Scale down and keep centered */
    width: 0; 
    height: 0;
}

/* Styling for toolbar items (buttons, separator, switch) when toolbar is active */
#toolbar > *:not(#toolbar-activator-dot) { /* Target all direct children except the dot */
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s;
}

#toolbar.is-toolbar-active > *:not(#toolbar-activator-dot) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0.15s; /* Buttons appear after toolbar expands */
}


#toolbar button {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#toolbar button:hover {
    background: rgba(0, 0, 0, 0.1);
}

#toolbar button img {
    width: 20px;
    height: 20px;
    display: block;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

#toolbar button:hover img {
    opacity: 0.8;
}

.separator {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 5px;
}

/* Focus toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Font modal */
#font-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#font-modal .content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 400px;
    max-height: 500px;
    overflow-y: auto;
}

#font-modal h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

#font-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

#font-list button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}

#font-list button:hover {
    background: #f0f0f0;
}

#close-font-modal {
    padding: 10px 20px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Remove .header-* rules and add semantic headings */
h1 { font-size: calc(var(--base-font) * 2.5); margin: 1.5em 0 0.5em; font-weight: bold; }
h2 { font-size: calc(var(--base-font) * 2.0); margin: 1.2em 0 0.5em; font-weight: bold; }
h3 { font-size: calc(var(--base-font) * 1.6); margin: 1.0em 0 0.5em; font-weight: bold; }
h4 { font-size: calc(var(--base-font) * 1.3); margin: 0.8em 0 0.5em; font-weight: bold; }
h5 { font-size: calc(var(--base-font) * 1.1); margin: 0.6em 0 0.5em; font-weight: bold; }
h6 { font-size: calc(var(--base-font) * 1.0); margin: 0.5em 0 0.5em; font-weight: bold; }

/* semantic headings already present – just ensure relative positioning */
h1,h2,h3,h4,h5,h6 { position:relative; }

/* left-hanging hash marker */
.heading-marker{
    position:absolute;
    left:-8ch;
    width:7ch;
    text-align:right;
    pointer-events:none;
    user-select:none;
    opacity:.8;
}

/* CSS variables for theme integration */
:root {
    --text-color-intense: #000;
    --text-color: #333;
    --text-dim-color: rgba(51, 51, 51, 0.4);
    --base-font: 16px;                 /* ← single source of truth           */
}

.dark-theme {
    --text-color-intense: #fff;
    --text-color: #e0e0e0;
    --text-dim-color: rgba(224, 224, 224, 0.4);
}

/* Focus mode styling */
#focus-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.overlay-line {
    position: absolute;
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

.line-text {
    position: absolute;
    white-space: pre-wrap;
}

.focus-line {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.line-highlight {
    position: absolute;
}

/* Dark theme adjustments for focus mode */
.dark-theme .focus-line {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Light theme adjustments for focus mode */
.light-theme .focus-line {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Remove the previous focus mode styling that affected block opacity directly */
#editor > * {
    transition: opacity 0.2s ease-out;
}

/* Dark theme */
.dark-theme {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark-theme #toolbar {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark theme adjustments for #toolbar when active */
.dark-theme #toolbar.is-toolbar-active {
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme #toolbar button img {
    filter: invert(1);
    opacity: 0.8;
}

.dark-theme #toolbar button:hover img {
    opacity: 1;
}

.dark-theme #font-modal .content {
    background: #2a2a2a;
    color: #e0e0e0;
}

.dark-theme #font-list button {
    background: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.dark-theme #font-list button:hover {
    background: #4a4a4a;
}

/* Light theme (default) */
.light-theme {
    background-color: #f5f5f5;
    color: #333;
}

/* Light theme adjustments for #toolbar when active */
.light-theme #toolbar.is-toolbar-active {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-theme #toolbar button img {
    filter: invert(0);
    opacity: 0.6;
}

.light-theme #toolbar button:hover img {
    opacity: 0.8;
}

b{
    font-weight: 900;
    color: var(--text-color-intense);
}

/* Inline style markers using CSS pseudo-elements */
b::before, b::after,
i::before, i::after,
s::before, s::after {
    font-size: calc(var(--base-font) * .85); /* Slightly smaller than text */
    opacity: 0.7; /* Slightly dimmer */
    font-weight: normal; /* Markers shouldn't be bold themselves */
    color: var(--text-color); /* Use standard text color for markers */
    /* Prevent selection of pseudo-elements if possible, though browser support varies */
    user-select: none; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;    
}

b::before {
    content: "**";
    margin-right: 0.1em; /* Optional small spacing */
}
b::after {
    content: "**";
    margin-left: 0.1em; /* Optional small spacing */
}

i::before {
    content: "*";
    margin-right: 0.1em;
}
i::after {
    content: "*";
    margin-left: 0.1em;
}

s::before {
    content: "~~";
    margin-right: 0.1em;
}
s::after {
    content: "~~";
    margin-left: 0.1em;
}

/* For <b><i>text</i></b> to appear as ***text***:
   The b::before will add "**" and i::before will add "*", visually forming "***".
   Similarly for ::after. This relies on the visual composition.
   No special CSS needed for b > i if this composition is acceptable.
*/

/* Ensure that when text is selected, the pseudo-elements don't get weird selection background */
::selection {
    background-color: var(--selection-bg-color, #ACCEF7); /* Define this variable if not already */
    color: var(--selection-text-color, #000);
}
:root {
    --selection-bg-color: #ACCEF7;
    --selection-text-color: #000;
}

.dark-theme {
    --selection-bg-color: #4a5c70; /* Dark theme selection background */
    --selection-text-color: #fff;
}

/* SVG mask for focus mode */
.svg-defs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; 
  opacity: 0;
  will-change: transform; /* Performance optimization */
}

/* Document Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
}

.document-modal {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: auto; /* Let positioning control width */
    height: auto; /* Let positioning control height */
    display: none;
    flex-direction: column;
    z-index: 3001;
    transform: none; /* Remove the transform that was centering */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 8px 8px 0 0;
    z-index: 10;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky;
    bottom: 0;
    background: white;
    border-radius: 0 0 8px 8px;
}

.storage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
}

.storage-usage {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.storage-progress-container {
    width: 100%;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.storage-progress-bar {
    height: 100%;
    background-color: #2196F3;
    width: 0%;
    transition: width 0.3s ease;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.primary-btn, .secondary-btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    border: none;
    transition: background-color 0.2s ease;
}

.primary-btn {
    background-color: #2196F3;
    color: white;
}

.primary-btn:hover {
    background-color: #0d8bf2;
}

.secondary-btn {
    background-color: #e0e0e0;
    color: #333;
}

.secondary-btn:hover {
    background-color: #d0d0d0;
}

/* Document Thumbnail Styles */
.document-thumbnail {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid #e0e0e0;
}

.document-thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail-header {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-title-container {
    flex: 1;
    overflow: hidden;
}

.doc-title {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.doc-title:hover {
    color: #2196F3;
}

.thumbnail-actions {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    gap: 8px;
}

.document-thumbnail:hover .thumbnail-actions {
    visibility: visible;
    opacity: 1;
}

.export-doc-btn,
.delete-doc-btn {
    background: none;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
}

.export-doc-btn:hover {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.delete-doc-btn:hover {
    background-color: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.last-edited {
    padding: 5px 15px;
    margin: 0;
    font-size: 0.75rem;
    color: #888;
    background-color: #f9f9f9;
}

.doc-preview {
    flex: 1;
    padding: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow: hidden;
    color: #555;
    position: relative;
}

.doc-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, white);
}

/* Title edit popover */
.title-edit-popover {
    position: fixed;
    z-index: 4000;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 2px;
    border: 1px solid #2196F3;
}

.title-edit-input {
    flex: 1;
    border: none;
    padding: 8px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
}

.title-save-btn {
    background: #2196F3;
    border: none;
    color: white;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 1rem;
}

.title-save-btn:hover {
    background: #0d8bf2;
}

/* Remove .header-* rules and add semantic headings */
h1 { font-size: calc(var(--base-font) * 2.5); margin: 1.5em 0 0.5em; font-weight: bold; }
h2 { font-size: calc(var(--base-font) * 2.0); margin: 1.2em 0 0.5em; font-weight: bold; }
h3 { font-size: calc(var(--base-font) * 1.6); margin: 1.0em 0 0.5em; font-weight: bold; }
h4 { font-size: calc(var(--base-font) * 1.3); margin: 0.8em 0 0.5em; font-weight: bold; }
h5 { font-size: calc(var(--base-font) * 1.1); margin: 0.6em 0 0.5em; font-weight: bold; }
h6 { font-size: calc(var(--base-font) * 1.0); margin: 0.5em 0 0.5em; font-weight: bold; }

/* semantic headings already present – just ensure relative positioning */
h1,h2,h3,h4,h5,h6 { position:relative; }

/* left-hanging hash marker */
.heading-marker{
    position:absolute;
    left:-8ch;
    width:7ch;
    text-align:right;
    pointer-events:none;
    user-select:none;
    opacity:.8;
}

/* CSS variables for theme integration */
:root {
    --text-color-intense: #000;
    --text-color: #333;
    --text-dim-color: rgba(51, 51, 51, 0.4);
    --base-font: 16px;                 /* ← single source of truth           */
}

.dark-theme {
    --text-color-intense: #fff;
    --text-color: #e0e0e0;
    --text-dim-color: rgba(224, 224, 224, 0.4);
}

/* Focus mode styling */
#focus-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.overlay-line {
    position: absolute;
    white-space: pre-wrap;
    margin: 0;
    padding: 0;
}

.line-text {
    position: absolute;
    white-space: pre-wrap;
}

.focus-line {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.line-highlight {
    position: absolute;
}

/* Dark theme adjustments for focus mode */
.dark-theme .focus-line {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Light theme adjustments for focus mode */
.light-theme .focus-line {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Remove the previous focus mode styling that affected block opacity directly */
#editor > * {
    transition: opacity 0.2s ease-out;
}

/* Dark theme */
.dark-theme {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark-theme #toolbar {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark theme adjustments for #toolbar when active */
.dark-theme #toolbar.is-toolbar-active {
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme #toolbar button img {
    filter: invert(1);
    opacity: 0.8;
}

.dark-theme #toolbar button:hover img {
    opacity: 1;
}

.dark-theme #font-modal .content {
    background: #2a2a2a;
    color: #e0e0e0;
}

.dark-theme #font-list button {
    background: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.dark-theme #font-list button:hover {
    background: #4a4a4a;
}

/* Light theme (default) */
.light-theme {
    background-color: #f5f5f5;
    color: #333;
}

/* Light theme adjustments for #toolbar when active */
.light-theme #toolbar.is-toolbar-active {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-theme #toolbar button img {
    filter: invert(0);
    opacity: 0.6;
}

.light-theme #toolbar button:hover img {
    opacity: 0.8;
}

b{
    font-weight: 900;
    color: var(--text-color-intense);
}

/* Inline style markers using CSS pseudo-elements */
b::before, b::after,
i::before, i::after,
s::before, s::after {
    font-size: calc(var(--base-font) * .85); /* Slightly smaller than text */
    opacity: 0.7; /* Slightly dimmer */
    font-weight: normal; /* Markers shouldn't be bold themselves */
    color: var(--text-color); /* Use standard text color for markers */
    /* Prevent selection of pseudo-elements if possible, though browser support varies */
    user-select: none; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;    
}

b::before {
    content: "**";
    margin-right: 0.1em; /* Optional small spacing */
}
b::after {
    content: "**";
    margin-left: 0.1em; /* Optional small spacing */
}

i::before {
    content: "*";
    margin-right: 0.1em;
}
i::after {
    content: "*";
    margin-left: 0.1em;
}

s::before {
    content: "~~";
    margin-right: 0.1em;
}
s::after {
    content: "~~";
    margin-left: 0.1em;
}

/* For <b><i>text</i></b> to appear as ***text***:
   The b::before will add "**" and i::before will add "*", visually forming "***".
   Similarly for ::after. This relies on the visual composition.
   No special CSS needed for b > i if this composition is acceptable.
*/

/* Ensure that when text is selected, the pseudo-elements don't get weird selection background */
::selection {
    background-color: var(--selection-bg-color, #ACCEF7); /* Define this variable if not already */
    color: var(--selection-text-color, #000);
}
:root {
    --selection-bg-color: #ACCEF7;
    --selection-text-color: #000;
}

.dark-theme {
    --selection-bg-color: #4a5c70; /* Dark theme selection background */
    --selection-text-color: #fff;
}

/* SVG mask for focus mode */
.svg-defs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; 
  opacity: 0;
  will-change: transform; /* Performance optimization */
}

/* Document Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
}

.document-modal {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: auto; /* Let positioning control width */
    height: auto; /* Let positioning control height */
    display: none;
    flex-direction: column;
    z-index: 3001;
    transform: none; /* Remove the transform that was centering */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 8px 8px 0 0;
    z-index: 10;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky;
    bottom: 0;
    background: white;
    border-radius: 0 0 8px 8px;
}

.storage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
}

.storage-usage {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.storage-progress-container {
    width: 100%;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.storage-progress-bar {
    height: 100%;
    background-color: #2196F3;
    width: 0%;
    transition: width 0.3s ease;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.primary-btn, .secondary-btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    border: none;
    transition: background-color 0.2s ease;
}

.primary-btn {
    background-color: #2196F3;
    color: white;
}

.primary-btn:hover {
    background-color: #0d8bf2;
}

.secondary-btn {
    background-color: #e0e0e0;
    color: #333;
}

.secondary-btn:hover {
    background-color: #d0d0d0;
}

/* Document Thumbnail Styles */
.document-thumbnail {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid #e0e0e0;
}

.document-thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail-header {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-title-container {
    flex: 1;
    overflow: hidden;
}

.doc-title {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.doc-title:hover {
    color: #2196F3;
}

.thumbnail-actions {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    gap: 8px;
}

.document-thumbnail:hover .thumbnail-actions {
    visibility: visible;
    opacity: 1;
}

.export-doc-btn,
.delete-doc-btn {
    background: none;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
}

.export-doc-btn:hover {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.delete-doc-btn:hover {
    background-color: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.last-edited {
    padding: 5px 15px;
    margin: 0;
    font-size: 0.75rem;
    color: #888;
    background-color: #f9f9f9;
}

.doc-preview {
    flex: 1;
    padding: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow: hidden;
    color: #555;
    position: relative;
}

.doc-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, white);
}

/* Title edit popover */
.title-edit-popover {
    position: fixed;
    z-index: 4000;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 2px;
    border: 1px solid #2196F3;
}

.title-edit-input {
    flex: 1;
    border: none;
    padding: 8px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
}

.title-save-btn {
    background: #2196F3;
    border: none;
    color: white;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 1rem;
}

.title-save-btn:hover {
    background: #0d8bf2;
}

/* Dark theme adjustments */
.dark-theme .document-thumbnail {
    background-color: #353535;
    border-color: #555;
}

.dark-theme .thumbnail-header {
    border-bottom-color: #444;
}

.dark-theme .doc-title:hover {
    color: #64b5f6;
}

.dark-theme .last-edited {
    background-color: #333;
    color: #aaa;
}

.dark-theme .doc-preview {
    color: #ccc;
}

.dark-theme .doc-preview::after {
    background: linear-gradient(to bottom, transparent, #353535);
}

.dark-theme .title-edit-popover {
    background: #424242;
    border-color: #64b5f6;
}

.dark-theme .title-edit-input {
    background: #424242;
    color: #e0e0e0;
}

.dark-theme .export-doc-btn,
.dark-theme .delete-doc-btn {
    color: #aaa;
}

.dark-theme .export-doc-btn:hover {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

.dark-theme .delete-doc-btn:hover {
    background-color: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
}

/* Document Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
}

.document-modal {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: auto; /* Let positioning control width */
    height: auto; /* Let positioning control height */
    display: none;
    flex-direction: column;
    z-index: 3001;
    transform: none; /* Remove the transform that was centering */
}

.dark-theme .document-modal {
    background-color: #2a2a2a;
    border-color: #444;
}

.dark-theme .modal-header,
.dark-theme .modal-footer {
    background-color: #2a2a2a;
    border-color: #444;
}

.dark-theme .close-modal-btn {
    color: #e0e0e0;
}

/* Additional button theme adjustments */
.dark-theme .primary-btn {
    background-color: #1976D2;
    color: #ffffff;
}

.dark-theme .primary-btn:hover {
    background-color: #1565C0;
}

.dark-theme .secondary-btn {
    background-color: #424242;
    color: #e0e0e0;
    border: 1px solid #555;
}

.dark-theme .secondary-btn:hover {
    background-color: #505050;
}

.dark-theme .modal-actions button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-theme .title-save-btn {
    background-color: #1976D2;
}

.dark-theme .title-save-btn:hover {
    background-color: #1565C0;
}

/* Conflict resolution buttons */
.dark-theme .keep-current-btn {
    background-color: #1976D2;
    color: white;
}

.dark-theme .keep-current-btn:hover {
    background-color: #1565C0;
}

.dark-theme .keep-imported-btn {
    background-color: #F57C00;
    color: white;
}

.dark-theme .keep-imported-btn:hover {
    background-color: #EF6C00;
}

.dark-theme .keep-all-btn {
    background-color: #424242;
    color: #64B5F6;
    border: 1px solid #64B5F6;
}

.dark-theme .discard-all-btn {
    background-color: transparent;
    border: 1px solid #e0e0e0;
    color: #e0e0e0;
}

/* ── Block Quotes ── */
blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    margin: 0.5em 0;
    padding: 0.25em 0 0.25em 1em;
    color: inherit;
    opacity: 0.85;
}

blockquote blockquote {
    margin-left: 0;
}

blockquote div {
    margin-top: 0.3em;
}

blockquote div:first-child {
    margin-top: 0;
}

.dark-theme blockquote {
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* ── Code Blocks ── */
.code-block {
    margin: 1em 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dark-theme .code-block {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.code-block-header {
    padding: 4px 12px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-family: 'Segoe UI', system-ui, sans-serif;
    user-select: none;
}

.dark-theme .code-block-header {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.code-block-content {
    font-family: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    line-height: 1.5;
    padding: 12px 16px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
    outline: none;
    color: #4a4a4a;
}

.dark-theme .code-block-content {
    color: #b0b0b0;
}

/* Grayscale syntax highlighting tokens */
.tok-keyword { color: #333; font-weight: 600; }
.tok-string { color: #555; }
.tok-number { color: #555; }
.tok-comment { color: #999; font-style: italic; }
.tok-function { color: #444; }
.tok-variable { color: #4a4a4a; }
.tok-operator { color: #666; }
.tok-punctuation { color: #777; }
.tok-type { color: #3d3d3d; }
.tok-property { color: #4a4a4a; }
.tok-tag { color: #444; }
.tok-attribute { color: #555; }
.tok-value { color: #555; }
.tok-builtin { color: #3d3d3d; }
.tok-regex { color: #666; }
.tok-decorator { color: #666; font-style: italic; }

.dark-theme .tok-keyword { color: #ccc; font-weight: 600; }
.dark-theme .tok-string { color: #aaa; }
.dark-theme .tok-number { color: #aaa; }
.dark-theme .tok-comment { color: #666; font-style: italic; }
.dark-theme .tok-function { color: #bbb; }
.dark-theme .tok-variable { color: #b5b5b5; }
.dark-theme .tok-operator { color: #888; }
.dark-theme .tok-punctuation { color: #888; }
.dark-theme .tok-type { color: #c2c2c2; }
.dark-theme .tok-property { color: #b5b5b5; }
.dark-theme .tok-tag { color: #bbb; }
.dark-theme .tok-attribute { color: #aaa; }
.dark-theme .tok-value { color: #aaa; }
.dark-theme .tok-builtin { color: #c2c2c2; }
.dark-theme .tok-regex { color: #999; }
.dark-theme .tok-decorator { color: #999; font-style: italic; }

/* ── Tables ── */
.table-block {
    margin: 1em 0;
    overflow-x: auto;
}

.table-block table {
    border-collapse: collapse;
    width: auto;
    min-width: 200px;
    font-size: 0.95em;
}

.table-block th,
.table-block td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 6px 12px;
    text-align: left;
    min-width: 60px;
    vertical-align: top;
    outline: none;
}

.table-block th {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.03);
}

.table-block td.cell-editing,
.table-block th.cell-editing {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: -2px;
    background: rgba(0, 0, 0, 0.02);
}

.dark-theme .table-block th,
.dark-theme .table-block td {
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-theme .table-block th {
    background: rgba(255, 255, 255, 0.04);
}

.dark-theme .table-block td.cell-editing,
.dark-theme .table-block th.cell-editing {
    outline-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Horizontal Rule ── */
#editor hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 1.5em 0;
}

.dark-theme #editor hr {
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* ── Inline Code ── */
#editor code {
    font-family: 'Roboto Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.88em;
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 5px;
    border-radius: 3px;
}

.dark-theme #editor code {
    background: rgba(255, 255, 255, 0.08);
}

/* Don't style code inside code blocks (already styled) */
.code-block code {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
}

/* ── Links ── */
#editor a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

#editor a:hover {
    color: rgba(0, 0, 0, 0.7);
    text-decoration-color: rgba(0, 0, 0, 0.4);
}

.dark-theme #editor a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration-color: rgba(255, 255, 255, 0.2);
}

.dark-theme #editor a:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* ── Task Lists ── */
.task-list-item {
    list-style: none;
    position: relative;
    margin-left: -1.2em;
}

.task-checkbox {
    margin-right: 0.4em;
    cursor: pointer;
    vertical-align: middle;
    accent-color: rgba(0, 0, 0, 0.6);
}

.dark-theme .task-checkbox {
    accent-color: rgba(255, 255, 255, 0.6);
}

/* ── Images ── */
#editor img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
    display: block;
    opacity: 0.9;
}

#editor img:hover {
    opacity: 1;
}

/* ── Minimal Auto-Hide Scrollbar ── */

/* Hide scrollbar completely by default */
body {
    scrollbar-width: none; /* Firefox */
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* When actively scrolling: show thin translucent scrollbar */
body.is-scrolling::-webkit-scrollbar {
    width: 6px;
}

body.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

body.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

body.is-scrolling.dark-theme::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.is-scrolling.dark-theme::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}