@import url("colors.css");

:root {
    --pico-font-family: 'Chivo', sans-serif;
    --pico-font-mono: 'Chivo Mono', monospace;
}

html {
    font-size: 90%;
}

body {
    height: 100vh;
    /* Use vh for full viewport height */
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Custom class for the header section */
.page-header {
    flex-shrink: 0;
    /* Prevent header from shrinking */
    /* Pico's <nav> and .container will handle internal padding */
}

/* Custom class for the main content area */
.main-content {
    flex-grow: 1;
    /* Allow main content to grow and fill available space */
    overflow-y: auto;
    /* Add vertical scroll if content overflows */
    overflow-x: auto;
    /* Add horizontal scroll if content overflows */
    /* Override Pico's .container to use more width */
    max-width: none;
    padding: 1em;
    /* Hide the default scrollbar */
    scrollbar-width: none; /* For Firefox */
}

/* Custom class for the footer section */
.page-footer {
    flex-shrink: 0;
    /* Prevent footer from shrinking */
    text-align: center;
    /* Add transition for smooth animation */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
    overflow: hidden;
    max-height: 10em; /* Generous height for content */
}

/* New class to hide the footer */
.page-footer--hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
}

.main-content::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, Opera */
}

/* Ensure h1 in nav doesn't have excessive margins */
.page-header nav h1 {
    margin: 0;
    font-size: 2.25rem; /* 20% larger */
    /* Adjust size as needed for nav header */
    font-weight: 400; /* Lighter than default bold */
    line-height: inherit;
    /* Align with other nav items */
}

/* Style for the link inside the main header title */
.page-header nav h1 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
.page-header nav h1 a:hover {
    color: var(--pico-primary);
}

/* Style for the merged theme and color scheme switcher */
.theme-and-color-switcher {
    display: flex;
    align-items: center; /* Vertically center all items */
    /* Use Pico's border color for consistency */
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    overflow: hidden; /* Ensures children's corners are clipped */
    margin-bottom: 0; /* Override Pico's default form element margin */
    /* Use Pico's form element background color for the merged unit */
    background-color: var(--pico-form-element-background-color);
}

.theme-and-color-switcher #color-scheme-switcher {
    border: none; /* Remove individual border */
    border-radius: 0; /* Remove individual border-radius */
    background-color: var(--pico-form-element-background-color); /* Ensure it respects theme */
    flex-grow: 0; /* Do not allow select to take available space when hidden */
    padding-right: 0; /* Remove padding when hidden */
    padding-left: 0; /* Remove padding when hidden */
    background-position: right 0.5rem center; /* Keep arrow position */
    color: var(--pico-color); /* Ensure text color respects theme */
    opacity: 0; /* Hide by default */
    pointer-events: none; /* Disable interaction when hidden */
    max-width: 0; /* Collapse width when hidden */
    overflow: hidden; /* Required for max-width transition */
    transition: opacity 0.3s ease-in-out, max-width 0.3s ease-in-out, padding-left 0.3s ease-in-out, padding-right 0.3s ease-in-out;
}

.theme-and-color-switcher.is-open #color-scheme-switcher {
    opacity: 1; /* Show when open */
    pointer-events: auto; /* Enable interaction when open */
    flex-grow: 1; /* Allow select to take available space when visible */
    max-width: 250px; /* Expand to a reasonable max-width */
    padding-left: var(--pico-spacing); /* Restore left padding */
    padding-right: 2.5rem; /* Restore padding when open */
}

.theme-and-color-switcher #theme-switcher {
    border: none; /* Remove individual border */
    border-radius: 0; /* Remove individual border-radius */
    background-color: transparent; /* Let parent's background show through */
    flex-shrink: 0; /* Prevent button from shrinking */
    padding: 0 var(--pico-spacing); /* Adjust padding for better visual balance */
    /* Add a subtle separator */
    border-right: 1px solid var(--pico-form-element-border-color);
}

.theme-and-color-switcher #theme-switcher:focus,
.theme-and-color-switcher #theme-switcher:focus-visible,
.theme-and-color-switcher #theme-switcher:focus-within {
    outline: none;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.theme-and-color-switcher #theme-switcher:active {
    outline: none;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.color-swatch {
    width: 1.2em; /* Smaller square */
    height: 1.2em;
    border-radius: var(--pico-border-radius); /* Keep rounded corners for the swatch itself */
    border: 1px solid var(--pico-form-element-border-color); /* Subtle border */
    background-color: var(--pico-primary); /* Will be set by JS */
    flex-shrink: 0;
    margin: 0 var(--pico-spacing); /* Space from button and select */
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

/* Style for the board selector and add board button */
#board-selector {
    /* Inherit Pico's select styles */
    margin-bottom: 0; /* Remove default margin */
    flex-grow: 1; /* Allow it to take available space */
    min-width: 100px; /* Ensure it's not too small */
}

#add-board-btn {
    /* Inherit Pico's button styles */
    margin-bottom: 0; /* Remove default margin */
    flex-shrink: 0; /* Prevent shrinking */
    padding: 0 var(--pico-spacing); /* Adjust padding */
    border-left: 1px solid var(--pico-form-element-border-color); /* Separator */
    background-color: transparent; /* Match theme switcher button */
    color: var(--pico-color); /* Ensure text color respects theme */
}

/* Override Pico's container for the header to reduce side margins */
.page-header .container {
    max-width: none;
    padding-right: 2vw; /* Reduced horizontal padding */
    padding-left: 2vw;  /* Reduced horizontal padding */
}

/* Lanes container specific styling if needed, Pico's .grid handles columns */
#lanes-container {
    display: flex;
    /* Override Pico's .grid or establish flex layout */
    flex-direction: row;
    /* Lay out lanes horizontally */
    gap: 20px;
    /* Explicitly set space between lanes */
    height: 100%;
    /* Make the container of lanes use full available vertical space */
    /* align-items: stretch; is the default for flex containers, making lanes stretch vertically */
    min-width: max-content; /* Ensure the container is wide enough for all lanes */
    /* padding: 0 5em var(--pico-spacing); */ /* Add padding to the sides and bottom */
}

/* Individual lane styling (each column in the grid) */
.lane {
    min-width: 25em; /* Default for larger screens */
    max-width: 40em; /* Allow lanes to expand more on very wide screens */
    /* Minimum width for the lane */
    border: 2px solid var(--tocry-lane-border);
    /* Light blue border */
    border-radius: 6px;
    /* Explicit rounded corners */
    flex-grow: 1;
    /* Allow lanes to grow and fill available space */
    flex-shrink: 0;
    /* Prevent lanes from shrinking below their min-width */
    background-color: var(--card-background-color);
    /* Add a background color to make the lane visible */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure children respect the border-radius */
}

/* Onboarding message for empty boards */
.empty-board-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

.empty-board-message article {
    max-width: 50ch;
}

/* Onboarding message for empty lanes */
.empty-lane-message {
    padding: var(--pico-spacing);
    text-align: center;
}

.empty-lane-message article {
    /* Pico's article provides a nice container already */
    padding: var(--pico-spacing);
    background-color: var(--pico-card-background-color);
    border: 1px solid var(--pico-form-element-border-color);
}

.empty-lane-message h4 {
    margin-bottom: var(--pico-spacing);
}
/* Responsive Lane Widths */
/* For screens up to 600px wide, make lanes full width */
@media (max-width: 600px) {
    .lane {
        min-width: 100vw;
        max-width: 100vw;
        /* Adjust padding to account for main-content padding */
        padding-left: calc(15px - var(--spacing));
        padding-right: calc(15px - var(--spacing));
    }
}

/* For screens between 601px and 1000px, make lanes half width */
@media (min-width: 601px) and (max-width: 1000px) {
    .lane {
        min-width: 50vw;
        max-width: 50vw;
    }
}

/* Drag and Drop styles for lanes */
.lane--dragging {
    opacity: 0.5;
    /* Make the dragged lane semi-transparent */
    border: 2px dashed var(--pico-primary);
    /* Add a dashed border */
}

.lane--drag-over {
    box-shadow: 0 0 0 3px var(--pico-primary);
    /* Highlight the drop target */
}

.lane-header {
    display: flex;
    align-items: center;
    /* Add padding and a distinct background color, similar to tags */
    padding: 10px 15px;
    gap: 0.75em; /* Add consistent spacing between all header elements */
    background-color: var(--tocry-lane-header-bg);
}

.lane .lane-header h2 {
    margin: 0;
    /* Remove default h2 margin to align better */
    font-weight: 500;
    cursor: text;
    padding: 0.1em 0.3em;
    border-radius: var(--pico-border-radius);
    transition: background-color 0.2s ease-in-out;
    /* Prevent long titles from expanding the lane */
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Required for text-overflow to work on a flex item */
    line-height: 1; /* Align text vertically with buttons */
}

.lane .lane-header h2:hover, .lane .lane-header h2:focus {
    background-color: var(--pico-form-element-background-color);
    outline: none;
}

.lane .lane-header h2:focus {
    /* When editing, show the full title instead of the ellipsis */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.lane-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lane-note-count {
    background-color: var(--tocry-lane-header-bg); /* Match tag background */
    color: var(--pico-primary); /* Match tag text color */
    font-size: 0.8em; /* Keep font size consistent */
    font-weight: 600;
    padding: 0.7em 0.8em; /* Adjust padding to vertically align with action buttons */
    border-radius: 9999px; /* pill shape */
    margin-left: auto; /* Push the count and subsequent items to the right */
    line-height: 1;
}



/* Container for note action buttons */
.note-actions {
    display: flex;
    gap: 4px; /* Make buttons tighter */
    margin-left: auto; /* Push buttons to the right */
    margin-right: -8px; /* Pull buttons closer to the right edge, counteracting some of the parent's padding */
}

/* Specific button color overrides */
.delete-lane-btn {
    color: var(--pico-muted-color, #6c757d);
}

.delete-lane-btn:hover,
.delete-lane-btn:focus {
    color: var(--tocry-danger-hover-color);
    outline: none;
}

.add-note-btn {
    color: var(--pico-muted-color, #6c757d);
}

.add-note-btn:hover,
.add-note-btn:focus {
    color: var(--pico-primary-hover, #0056b3);
    outline: none;
}

.add-note-btn.pulse-animation,
#add-lane-btn.pulse-animation {
    animation: pulse 2s infinite;
    background-color: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--pico-primary-rgb), 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 10px 20px rgba(var(--pico-primary-rgb), 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--pico-primary-rgb), 0);
    }
}

/* --- Test Mode Overrides --- */
.note-card.pulse-animation-once {
    /* Use the existing pulse animation, but run it only once to draw attention */
    animation: pulse 2s ease-in-out 1;
}
/* --- Custom Collapsible Note --- */

/* 1. Set up the container as a grid for smooth animation.
      The first row (summary) is auto-sized.
      The second row (content) starts at 0fr (collapsed). */
.note-collapsible {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
}

/* 2. When open, transition the second row to 1fr, which will make it
      take up its natural content size. */
.note-collapsible.is-open {
    grid-template-rows: auto 1fr;
}

/* 3. The content itself needs overflow: hidden so that its contents
      are clipped as its container row animates. */
.note-collapsible > .note-content {
    overflow: hidden;
}
/* Style the note summary container */
.note-summary {
    display: flex;
    align-items: center;
    gap: 0.5em; /* Space between elements in the summary */
    padding: var(--pico-spacing); /* Use standard Pico padding */
    flex-wrap: nowrap; /* Prevent items from wrapping */
    min-width: 0; /* Prevents the container from overflowing its parent grid cell */
    /* No cursor: pointer here, as the toggle button handles clicks */
}

/* Style the dedicated toggle button */
.note-toggle-btn {
    background: none;
    border: none;
    padding: 0; /* Remove default button padding */
    cursor: pointer;
    flex-shrink: 0; /* Prevent the button from shrinking */
    display: flex; /* Use flex to center the pseudo-element icon */
    align-items: center;
    justify-content: center;
    /* The button will size to its content (the SVG) */
}

/* Style the SVG arrow inside the toggle button */
.note-toggle-btn .toggle-arrow {
    /* Size is now set via width/height attributes in the SVG HTML */
    color: var(--pico-muted-color); /* Use color for the SVG stroke */
    transition: transform 0.2s ease-in-out;
}

/* Rotate the arrow when the note is expanded. */
.note-collapsible.is-open .note-toggle-btn .toggle-arrow {
    transform: rotate(90deg);
}

/* Styles for notes without content to disable the collapsible behavior */
/* Style the title inside both collapsible and non-collapsible headers */
.note-summary > h4 {
    margin: 0;
    flex-grow: 1;
    font-weight: 500;
    cursor: text;
    padding: 0.1em 0.3em;
    margin: -0.1em -0.3em; /* Negative margin to counteract padding and prevent layout shift */
    border-radius: var(--pico-border-radius);
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Required for text-overflow to work on a flex item */
}

.note-summary > h4:hover,
.note-summary > h4:focus {
    background-color: var(--pico-form-element-background-color);
    outline: none;
}

.note-summary > h4:focus {
    /* When editing, show the full title instead of the ellipsis */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Styles for notes without content to disable the collapsible behavior */
.note-collapsible.note-card--no-content .note-summary {
    cursor: default; /* Still useful for the overall summary area */
}

.note-collapsible.note-card--no-content .note-toggle-btn {
    visibility: hidden; /* Hide the button but keep its space for alignment */
    cursor: default;    /* Prevent pointer cursor on the invisible button */
}

/* Base styles for action buttons */
.delete-lane-btn,
.add-note-btn,
.delete-note-btn,
.edit-note-btn,
.permalink-btn {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    /* Use flexbox to perfectly center the glyphs inside the buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-lane-btn,
.add-note-btn {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.1em 0.3em;
}

.delete-note-btn,
.edit-note-btn,
.permalink-btn {
    color: var(--pico-muted-color, #6c757d);
    flex-shrink: 0; /* Prevent the button from shrinking */
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.delete-note-btn:hover,
.delete-note-btn:focus {
    color: var(--tocry-danger-hover-color);
    opacity: 1;
    outline: none;
}

.edit-note-btn:hover,
.edit-note-btn:focus {
    color: var(--pico-primary-hover);
    opacity: 1;
    outline: none;
}

.note-card {
    /* Add padding to create vertical space between note cards */
    padding: 10px 0;
    cursor: grab;
    /* --- New styles for search animation --- */
    transition: all 0.35s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 2px 5px var(--tocry-note-shadow); /* Subtle shadow for normal state */
    max-height: 1000px; /* Generous max-height for transition */
    overflow: hidden; /* Crucial for the max-height animation */
}

.notes-list {
    flex-grow: 1;
    /* Make the list fill the available space in the lane */
    min-height: 50px;
    /* Ensure even an empty list has a drop target area */
    overflow-y: auto;
    /* Add vertical scroll when content overflows */
    padding: 15px; /* Add padding for the notes inside the list */
}

.note-card--hidden {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0 !important; /* Use important to ensure override */
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.note-card--dragging {
    opacity: 0.4;
    cursor: grabbing;
    box-shadow: 0 5px 15px var(--tocry-note-shadow-dragging); /* More pronounced shadow when dragging */
}

.notes-list--drag-over {
    /* A light blueish highlight */
    background-color: var(--tocry-drag-over-bg);
    border-radius: var(--pico-border-radius);
}

.note-content {
    /* Basic styling for rendered markdown */
    font-size: 0.9em;
    line-height: 1.6;
    /* Add padding to align with the summary element's content */
    /* Horizontal padding is always present to align with the summary */
    padding-left: var(--pico-spacing);
    padding-right: var(--pico-spacing);
    /* Vertical padding is applied only when the note is open, via the class below */
}

.note-collapsible.is-open .note-content {
    padding-bottom: var(--pico-spacing);
}
.note-content p:last-child {
    margin-bottom: 0;
}

.note-content ul,
.note-content ol {
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.note-content pre {
    /* background-color and padding are now handled by highlight.js themes */
    border-radius: var(--pico-border-radius);
    overflow-x: auto;
    font-size: 0.9em;
}

.note-content code {
    font-family: var(--pico-font-mono);
    background-color: var(--pico-muted-border-color);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.note-content pre code {
    background-color: transparent;
    padding: 0;
}

.note-content blockquote {
    border-left: 4px solid var(--pico-muted-border-color);
    padding-left: 1em;
    margin-left: 0;
    color: var(--pico-muted-color);
}

/* Note Attachments Styling */
.note-attachments {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--pico-card-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
}

.note-attachments .attachments-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.note-attachments .attachments-items a {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background-color: var(--pico-form-element-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: calc(var(--pico-border-radius) * 0.75);
    text-decoration: none;
    color: var(--pico-color);
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
}

.note-attachments .attachments-items a:hover {
    background-color: var(--pico-form-element-active-background-color);
    border-color: var(--pico-form-element-active-border-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.note-attachments .attachments-items a:focus {
    outline: 2px solid var(--pico-primary);
    outline-offset: 2px;
}

/* Container for tags, now inside the note header */
.note-tags {
    display: flex;
    align-items: center;
    gap: 0.4em; /* Space between tag pills */
    /* Allow the tags container to shrink and hide its overflow if there's not
       enough space, preventing it from pushing the delete button out of view. */
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0; /* Prevent the tags container from shrinking */
}

.note-tags .tag {
    /* Use a semi-transparent version of the primary color for a subtle tint */
    /* This ensures it's distinct from the card background but still very light */
    background-color: var(--tocry-tag-bg);
    color: var(--pico-primary);
    padding: 0.2em 0.7em;
    border-radius: 9999px; /* Pill shape */
    font-size: 0.75em;
    font-weight: 600;
}

/* The footer of the modal should have buttons side-by-side on the right */
#modal-edit-note[open] {
    max-height: 90vh; /* Set max-height to 90% of viewport height */
    height: 90vh; /* Attempt to set height to 90% */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack children vertically */
}

#modal-edit-note article {
    flex-grow: 1; /* Allow article content to grow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow of content */
}

#modal-edit-note form {
    flex-grow: 1; /* Allow form to take available space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow of form content */
}

#modal-edit-note .toastui-editor-defaultUI {
    flex-grow: 1; /* Allow editor to take remaining space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow editor to shrink */
}

#modal-edit-note .toastui-editor-main {
    flex-grow: 1; /* Allow editor main area to grow */
    min-height: 0; /* Allow editor main area to shrink */
}

#modal-edit-note footer {
    flex-shrink: 0; /* Prevent footer from shrinking */
    display: flex;
    justify-content: flex-end;
    gap: var(--pico-spacing);
}

/* Override Pico's default full-width buttons inside the modal footer */
#modal-edit-note footer button {
    width: auto;
}

/* Toast UI Editor overrides to better fit Pico.css */
.toastui-editor-defaultUI {
    border-color: var(--tocry-editor-border);
    border-radius: var(--pico-border-radius);
    overflow: hidden; /* Ensures border-radius applies to children */
}

.toastui-editor-main {
    /* Main editor area (includes editor and preview) */
    background-color: var(--tocry-editor-bg);
}

.toastui-editor-defaultUI .ProseMirror {
    /* The actual editable area */
    color: var(--tocry-editor-text);
}

.toastui-editor-defaultUI .ProseMirror-focused {
    outline: none; /* Remove default outline */
}

.toastui-editor-defaultUI .toastui-editor-toolbar {
    background-color: var(--tocry-editor-toolbar-bg);
    border-bottom: 1px solid var(--tocry-editor-toolbar-border);
}

.toastui-editor-defaultUI .toastui-editor-toolbar button {
    color: var(--tocry-editor-toolbar-button);
}

.toastui-editor-defaultUI .toastui-editor-toolbar button.active,
.toastui-editor-defaultUI .toastui-editor-toolbar button:hover {
    background-color: var(--tocry-editor-toolbar-button-hover);
}

.toastui-editor-defaultUI .toastui-editor-md-preview,
.toastui-editor-defaultUI .toastui-editor-ww-container {
    background-color: var(--tocry-editor-bg);
    color: var(--tocry-editor-text);
}

/* Ensure text inside the editor content area (ProseMirror) is readable */
.toastui-editor-defaultUI .ProseMirror p,
.toastui-editor-defaultUI .ProseMirror h1,
.toastui-editor-defaultUI .ProseMirror h2,
.toastui-editor-defaultUI .ProseMirror h3,
.toastui-editor-defaultUI .ProseMirror h4,
.toastui-editor-defaultUI .ProseMirror h5,
.toastui-editor-defaultUI .ProseMirror h6,
.toastui-editor-defaultUI .ProseMirror li,
.toastui-editor-defaultUI .ProseMirror strong,
.toastui-editor-defaultUI .ProseMirror em,
.toastui-editor-defaultUI .ProseMirror a,
.toastui-editor-defaultUI .ProseMirror code,
/* And also for the preview and WYSIWYG containers */
.toastui-editor-defaultUI .toastui-editor-md-preview p,
.toastui-editor-defaultUI .toastui-editor-md-preview h1,
.toastui-editor-defaultUI .toastui-editor-md-preview h2,
.toastui-editor-defaultUI .toastui-editor-md-preview h3,
.toastui-editor-defaultUI .toastui-editor-md-preview h4,
.toastui-editor-defaultUI .toastui-editor-md-preview h5,
.toastui-editor-defaultUI .toastui-editor-md-preview h6,
.toastui-editor-defaultUI .toastui-editor-md-preview li,
.toastui-editor-defaultUI .toastui-editor-md-preview strong,
.toastui-editor-defaultUI .toastui-editor-md-preview em,
.toastui-editor-defaultUI .toastui-editor-md-preview a,
.toastui-editor-defaultUI .toastui-editor-md-preview code,
.toastui-editor-defaultUI .toastui-editor-ww-container p,
.toastui-editor-defaultUI .toastui-editor-ww-container h1,
.toastui-editor-defaultUI .toastui-editor-ww-container h2,
.toastui-editor-defaultUI .toastui-editor-ww-container h3,
.toastui-editor-defaultUI .toastui-editor-ww-container h4,
.toastui-editor-defaultUI .toastui-editor-ww-container h5,
.toastui-editor-defaultUI .toastui-editor-ww-container h6,
.toastui-editor-defaultUI .toastui-editor-ww-container li,
.toastui-editor-defaultUI .toastui-editor-ww-container strong,
.toastui-editor-defaultUI .toastui-editor-ww-container em,
.toastui-editor-defaultUI .toastui-editor-ww-container a,
.toastui-editor-defaultUI .toastui-editor-ww-container code {
    color: var(--tocry-editor-text);
}

/* --- User Menu Dropdown --- */
.user-menu-container {
    position: relative; /* Anchor for the dropdown */
    display: flex;
    align-items: center;
}

#user-menu-btn {
    background-color: var(--pico-primary);
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pico-primary-inverse);
}

#user-menu-btn:hover, #user-menu-btn:focus {
    background-color: var(--pico-primary-hover);
    outline: none;
}

.user-menu-dropdown {
    position: absolute;
    top: 100%; /* Position it right below the button */
    right: 0;
    background-color: var(--pico-card-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-card-box-shadow);
    padding: var(--pico-spacing);
    z-index: 1000;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
    white-space: nowrap;
}

.user-menu-dropdown #logout-btn {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0.5rem; /* Add some space above the logout button */
}

/* Custom Horizontal Scroll Buttons */
.scroll-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: var(--tocry-scroll-btn-bg);
    color: var(--tocry-scroll-btn-fg);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}

.scroll-btn--visible {
    visibility: visible;
    opacity: 0.2; /* 20% opacity when visible */
    transition: opacity 0.3s ease-in-out;
}

.scroll-btn:hover {
    opacity: 0.8; /* Higher opacity on hover */
}

.scroll-btn--left { left: 15px; }
.scroll-btn--right { right: 15px; }

/* --- Custom Confirmation Dialog --- */

/* Modal Header Styling */
.permalink-modal-header,
.edit-note-modal-header,
.attach-file-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between elements in the header */
}

.permalink-modal-header strong,
.edit-note-modal-header strong,
#modal-attach-file .attach-file-modal-header strong {
    flex-grow: 1; /* Allow the title to take up available space */
    text-align: center; /* Center the title */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pico-color);
}

.permalink-public-switch-label,
.edit-note-public-switch-label {
    margin-left: auto; /* Push the switch to the right */
    margin-bottom: 0; /* Remove default margin from Pico.css */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permalink-url-group {
    display: flex;
    gap: 0.5rem; /* Space between input and button */
    align-items: center;
}

.permalink-url-group input[type="text"] {
    flex-grow: 1; /* Allow the input to take up available space */
    margin-bottom: 0; /* Remove default margin from Pico.css */
}

.permalink-url-group button {
    flex-shrink: 0; /* Prevent the button from shrinking */
    margin-bottom: 0; /* Remove default margin from Pico.css */
}

#custom-confirm-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pico-spacing);
}

/* --- Custom Prompt Dialog --- */
#custom-prompt-dialog footer button {
    width: auto;
}

/* Attachments Modal Styling */
#modal-attach-file[open] {
    max-height: 90vh;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

#modal-attach-file article {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modal-attach-file form {
    flex-shrink: 0; /* Prevent form from growing */
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
    padding-top: var(--pico-spacing);
    border-top: 1px solid var(--pico-form-element-border-color);
    margin-top: var(--pico-spacing);
}

#modal-attach-file footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pico-spacing);
}

#modal-attach-file footer button {
    width: auto;
}

.attachments-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--pico-spacing);
    background-color: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    border: 1px solid var(--pico-form-element-border-color);
}

.attachments-list p {
    text-align: center;
    color: var(--pico-muted-color);
    font-style: italic;
    margin: 2rem 0;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    margin: 0.5rem 0;
    background-color: var(--pico-form-element-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: calc(var(--pico-border-radius) * 0.75);
    transition: all 0.2s ease-in-out;
}

.attachment-item:first-child {
    margin-top: 0;
}

.attachment-item:last-child {
    margin-bottom: 0;
}

.attachment-item:hover {
    background-color: var(--pico-primary-background);
    border-color: var(--pico-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-rgb), 0.1);
}

.attachment-item span,
.attachment-item .attachment-download-link {
    flex-grow: 1;
    word-break: break-all;
    padding-right: 0.75rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.attachment-item .delete-attachment-btn {
    background-color: var(--pico-del-background-color);
    border: 1px solid var(--pico-del-color);
    color: var(--pico-del-color);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--pico-border-radius) * 0.5);
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
    min-width: 2rem;
}

.attachment-item .delete-attachment-btn:hover {
    background-color: var(--pico-del-color);
    color: var(--pico-del-inverse);
    transform: scale(1.05);
}

.attachment-download-link {
    text-decoration: none;
    color: var(--pico-color);
    font-size: 0.875rem;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.attachment-download-link:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}



/* File Drop Zone Styling */
.file-drop-zone {
    margin: var(--pico-spacing) 0;
    padding: 2rem;
    border: 2px dashed var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-background-color);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.file-drop-zone:hover {
    border-color: var(--pico-primary);
    background-color: var(--pico-primary-background);
    transform: translateY(-1px);
}

.file-drop-zone.drag-over {
    border-color: var(--pico-primary);
    background-color: var(--pico-primary-background);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.drop-zone-content svg {
    color: var(--pico-muted-color);
    margin-bottom: 1rem;
    transition: color 0.3s ease-in-out;
}

.file-drop-zone:hover .drop-zone-content svg,
.file-drop-zone.drag-over .drop-zone-content svg {
    color: var(--pico-primary);
}

.drop-zone-text {
    margin: 0.5rem 0 0.25rem 0;
    font-weight: 600;
    color: var(--pico-color);
}

.drop-zone-subtext {
    margin: 0;
    font-size: 0.875rem;
    color: var(--pico-muted-color);
}

.file-drop-zone.drag-over .drop-zone-text {
    color: var(--pico-primary);
}

/* Title with Particle Animation */
.title-container {
    position: relative;
    display: inline-block;
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: -1;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--pico-primary);
    opacity: 0;
    pointer-events: none;
    animation: particleFloat 3s ease-out forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    10% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1);
    }
    70% {
        opacity: 0.6;
        transform: translateY(-50px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.2);
    }
}

/* Title animation */
#tocry-title {
    display: inline-block;
    animation: titleFadeIn 2s ease-out forwards;
    opacity: 0;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effect for extra magic */
.title-container:hover .particle {
    animation-duration: 1.5s;
}

/* --- Lane Animations --- */
/* Keyframes for lane slide-in animation */
@keyframes laneSlideIn {
    from {
        opacity: 0;
        transform: translateX(-100px) scale(0.9);
        max-width: 0;
        min-width: 0;
        margin-right: 0;
        border-width: 0;
        padding: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-width: 40em;
        min-width: 25em;
        margin-right: 20px;
        border-width: 2px;
        padding: initial;
    }
}

/* Keyframes for lane slide-out animation */
@keyframes laneSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-width: 40em;
        min-width: 25em;
        margin-right: 20px;
        border-width: 2px;
        padding: initial;
    }
    to {
        opacity: 0;
        transform: translateX(-100px) scale(0.9);
        max-width: 0;
        min-width: 0;
        margin-right: 0;
        border-width: 0;
        padding: 0;
    }
}

/* Apply entrance animation to new lanes */
.lane.lane-enter {
    animation: laneSlideIn 0.5s ease-out forwards;
}

/* Apply exit animation to deleted lanes */
.lane.lane-exit {
    animation: laneSlideOut 0.3s ease-in forwards;
}

/* Disable lane animations in test mode */
html[data-test-mode] .lane.lane-enter,
html[data-test-mode] .lane.lane-exit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    max-width: 40em !important;
    min-width: 25em !important;
    margin-right: 20px !important;
    border-width: 2px !important;
    padding: initial !important;
}

/* --- Dialog Animations --- */
/* Base styles for all dialogs */
dialog {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* When dialog is open */
dialog[open] {
    opacity: 1;
    transform: scale(1);
}

/* Animation keyframes for dialogs */
@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes dialogFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
}

/* Apply entrance animation */
dialog.dialog-enter {
    animation: dialogFadeIn 0.3s ease-out;
}

/* Apply exit animation */
dialog.dialog-exit {
    animation: dialogFadeOut 0.2s ease-in;
}

/* Backdrop animation */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease-out;
}

dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Disable animations in test mode */
html[data-test-mode] dialog {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

html[data-test-mode] dialog::backdrop {
    transition: none !important;
}

/* Disable note collapsible animations in test mode */
html[data-test-mode] .note-collapsible {
    transition: none !important;
}

html[data-test-mode] .note-toggle-btn .toggle-arrow {
    transition: none !important;
}

/* Disable all transitions and animations in test mode */
html[data-test-mode] *,
html[data-test-mode] *::before,
html[data-test-mode] *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}