/***************************************
 * Table of Contents:
 * 1. Global Styles
 * 2. Header & Navigation
 * 3. Buttons & Interactive Elements
 * 4. Menu & Sidebar
 * 5. Main Content & Sections
 * 6. Notes & Lists
 * 7. Forms & Inputs
 * 8. Screens & Views
 * 9. Utility Classes
 * 10. Theme & Dark Mode
 ***************************************/

/* 1. Global Styles
----------------------------------------- */
html {
    font-size: 16px; /* Base font size for rem calculations */
    scroll-behavior: smooth; /* Smooth scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    height: 100%;
    overflow: hidden; /* Prevent body scroll */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--color-background);
    color: var(--color-text);
    overflow: hidden; /* Prevent body scroll - sections handle scrolling */
    height: 100%;
    /* Smooth scrolling for better mobile feel */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

mark {
    background-color: var(--color-mark-bg);
    color: var(--color-white);
}

/* 2. Header & Navigation
----------------------------------------- */
header {
    position: fixed !important; /* Force fixed positioning relative to viewport */
    top: 0;
    left: 0;
    right: 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.625rem; /* 10px to rem */
    padding-top: env(safe-area-inset-top, 0); /* Safe area for notched devices */
    height: 3.75rem; /* 60px to rem */
    z-index: 1000; /* Stays above content */
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
    /* Removed transform to avoid creating new containing block */
    
    /* Glassy effect - always on for that cool transparency effect showing content underneath */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 77, 77, 0.25) 100%);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(0, 204, 204, 0.2);
    box-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 204, 204, 0.08);
}

/* Enhanced glassy effect when scrolled - more transparent to show content */
header.scrolled {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 77, 77, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 204, 204, 0.3);
    box-shadow: 
        0 2px 25px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 204, 204, 0.12);
}

/* Light theme: Light header and menu with subtle glassy effect */
.light-theme header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 248, 0.98) 100%);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(0, 128, 128, 0.15);
    box-shadow: 
        0 2px 15px rgba(0, 0, 0, 0.05),
        0 0 20px rgba(0, 128, 128, 0.03);
    color: var(--color-text-primary);
}

.light-theme header h1 {
    color: var(--color-text-primary);
}

.light-theme header .menu-btn,
.light-theme header .back-btn,
.light-theme header #refreshBtn,
.light-theme header #shareNoteBtn {
    color: var(--color-text-primary);
}

.light-theme header.scrolled {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 248, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 128, 128, 0.2);
    box-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.08),
        0 0 25px rgba(0, 128, 128, 0.05);
}

.light-theme .menu,
.light-theme .menu2 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 248, 0.98) 100%);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-right: 1px solid rgba(0, 128, 128, 0.15);
    border-left: 1px solid rgba(0, 128, 128, 0.15);
    color: var(--color-text-primary);
}

.light-theme .menu h2,
.light-theme .menu2 h2 {
    color: var(--color-text-primary);
}

/* E-ink theme optimizations: Remove effects that don't work well on e-ink displays */
.eink-theme header {
    background: var(--color-header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2px solid var(--color-border);
    box-shadow: none;
    color: var(--color-text);
}

.eink-theme header h1 {
    color: var(--color-text);
}

.eink-theme header .menu-btn,
.eink-theme header .back-btn,
.eink-theme header #refreshBtn,
.eink-theme header #shareNoteBtn {
    color: var(--color-text);
}

.eink-theme header.scrolled {
    background: var(--color-header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2px solid var(--color-border);
    box-shadow: none;
}

.eink-theme .menu,
.eink-theme .menu2 {
    background: var(--color-menu-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
    box-shadow: none;
}

.eink-theme button,
.eink-theme .note-row,
.eink-theme .transcript-block,
.eink-theme input,
.eink-theme select,
.eink-theme .tab,
.eink-theme .tag-pill,
.eink-theme pre,
.eink-theme textarea,
.eink-theme #chatInput,
.eink-theme #sendChatBtn {
    box-shadow: none !important;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.eink-theme button:hover,
.eink-theme .note-row:hover,
.eink-theme .transcript-block:hover,
.eink-theme .tab:hover {
    transform: none;
    box-shadow: none !important;
    border: 1px solid var(--color-border);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}

.eink-theme .fab-button {
    background: var(--color-button-bg);
    box-shadow: none;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.eink-theme .fab-button:hover {
    transform: none;
    box-shadow: none;
    border: 1px solid var(--color-border);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}

header h1 {
    flex-grow: 1;
    text-align: center;
    margin: 0 1.25rem; /* 0px top/bottom, 20px left/right */
    font-size: 1.25rem; /* 20px to rem */
    color: var(--color-text);
    font-weight: 600; /* Slightly bolder for better visibility */
}

header .menu-btn,
header .back-btn,
header #refreshBtn,
header #shareNoteBtn {
    display: flex;
    align-items: center;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 1.125rem; /* 18px to rem */
    color: var(--color-text);
    cursor: pointer;
    padding: 0 0.9375rem; /* 15px to rem */
    margin: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}

header .menu-btn {
    justify-content: left;
}

header .back-btn {
    justify-content: left;
}

header #shareNoteBtn {
    justify-content: right;
}

header #refreshBtn {
    justify-content: right;
}

header .menu-btn,
header .back-btn,
header #refreshBtn,
header #shareNoteBtn {
    transition: background-color 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

header .menu-btn:hover,
header .back-btn:hover,
header #refreshBtn:hover,
header #shareNoteBtn:hover {
    background: var(--color-header-hover-bg);
    color: var(--color-header-hover-text);
    opacity: 0.8;
}

header .menu-btn:active,
header .back-btn:active,
header #refreshBtn:active,
header #shareNoteBtn:active {
    opacity: 0.6;
    transition: opacity 0.1s ease;
}

/* 3. Buttons & Interactive Elements
----------------------------------------- */
button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    width: 100%;
    height: 3.5rem; /* 56px to rem */
    padding: 0.9375rem; /* 15px to rem */
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    margin-bottom: 0.9375rem; /* 15px to rem */
    font-size: 1rem;
    border: 0;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button i {
    margin-right: 0.5rem; /* 8px to rem */
    transition: transform 0.15s ease;
}

button:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
    opacity: 0.9;
}

header button {
    width: 100%;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.625rem; /* 10px to rem */
}

.button-container button {
    flex: 1 1 auto; /* Allow buttons to grow and shrink */
    margin-right: 0.625rem; /* 10px to rem */
}

.button-container button:last-child {
    margin-right: 0;
}

/* 4. Menu & Sidebar
----------------------------------------- */
.menu {
    position: fixed;
    top: 0;
    left: -100%;
    min-width: 18.75rem; /* 300px to rem */
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 77, 77, 0.3) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text);
    padding: 1.25rem; /* 20px to rem */
    box-shadow: 0.125rem 0 0.3125rem rgba(0, 0, 0, 0.5); /* 2px, 5px to rem */
    border-right: 1px solid rgba(0, 204, 204, 0.15);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    overflow-x: auto;
}

.menu.open {
    left: 0;
}

.menu a, .menu2 a {
    display: block;
    text-decoration: none;
    color: var(--color-menu-link);
    font-size: 1.125rem; /* 18px to rem */
    margin-bottom: 1.25rem; /* 20px to rem */
    padding: 0.625rem 0; /* 10px to rem */
    border-bottom: 0.0625rem solid var(--color-secondary); /* 1px to rem */
    transition: color 0.2s ease, padding-left 0.2s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.menu a:hover, .menu2 a:hover {
    color: var(--color-primary);
    padding-left: 0.25rem;
}

.menu a:active, .menu2 a:active {
    opacity: 0.8;
}

/* Menu Icons */
.menu .fas,
.menu .fab,
.menu2 .fas,
.menu2 .fab {
    margin-right: 0.5rem; /* 8px to rem */
}

/* Menu Right */
.menu2 {
    position: fixed;
    top: 0;
    right: -100%;
    min-width: 18.75rem; /* 300px to rem */
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 77, 77, 0.3) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text);
    padding: 1.25rem; /* 20px to rem */
    box-shadow: 0.125rem 0 0.3125rem rgba(0, 0, 0, 0.5); /* 2px, 5px to rem */
    border-left: 1px solid rgba(0, 204, 204, 0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    overflow-x: auto;
}

.menu2.open {
    right: 0;
}

/* Menu Overlay */

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: none; /* Initially hidden */
    z-index: 1001; /* Ensure it is below the chat area */
    -webkit-backdrop-filter: blur(0.3125rem); /* Safari support */
    backdrop-filter: blur(0.3125rem); /* 5px to rem */
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease; /* Smooth transition for the blur effect */
    opacity: 0;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* 5. Main Content & Sections
----------------------------------------- */
main {
    padding-top: calc(3.75rem + env(safe-area-inset-top, 0)); /* Header height + safe area */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    max-width: 100%;
    height: 100vh; /* Full viewport height - padding-top handles header spacing */
    overflow: hidden; /* Main doesn't scroll, sections handle scrolling */
    position: relative;
    box-sizing: border-box; /* Include padding in height calculation */
}

.section {
    display: none;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --slide-distance-x: 0;
    --slide-distance-y: 0.5rem;
    overflow-x: hidden;
    position: relative;
    padding: 1.25rem; /* 20px horizontal and vertical padding */
    border-radius: 0.5rem; /* 8px to rem - modern rounded corners for sections */
}

/* Active sections handle their own scrolling */
.section.active,
.section.slide-forward.active,
.section.slide-back.active {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Section footer for extra bottom padding and copyright info */

.section.active::after,
.section.slide-forward.active::after,
.section.slide-back.active::after {
    content: "© LimoNote 2026";
    display: block;
    text-align: center;
    padding: 1.5rem 1.25rem;
    color: var(--color-text);
    opacity: 0.6;
    font-size: 0.875rem;
    height: 0;
    visibility: hidden;
}

#notes.section,
#note.section {
    --slide-distance-x: 1.875rem;
    --slide-distance-y: 0;
}

/* Forward navigation: slide from right (notes list -> note detail) */
.section.slide-forward {
    transform: translate3d(var(--slide-distance-x), var(--slide-distance-y), 0);
    opacity: 0;
}

.section.slide-forward.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Back navigation: slide from left (note detail -> notes list) */
.section.slide-back {
    transform: translate3d(calc(var(--slide-distance-x) * -1), var(--slide-distance-y), 0);
    opacity: 0;
}

.section.slide-back.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromLeft 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default: slide from right if no direction specified */
.section.active:not(.slide-forward):not(.slide-back) {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.section:not(.active) {
    display: none !important;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translate3d(var(--slide-distance-x), var(--slide-distance-y), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translate3d(calc(var(--slide-distance-x) * -1), var(--slide-distance-y), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

iframe {
    width: 100%;
    max-width: 43.75rem; /* 700px to rem */
    height: calc(100vw * 0.5625);
    max-height: 25rem; /* 400px to rem */
    border: none;
    border-radius: 0.625rem; /* 10px to rem */
    margin: 1.25rem auto; /* 20px to rem */
}

audio {
    width: 100%;
    max-width: 43.75rem; /* 700px to rem */
    max-height: 25rem; /* 400px to rem */
    border: none;
    border-radius: 0.625rem; /* 10px to rem */
    margin: 1.25rem auto; /* 20px to rem */
    display: block;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.9375rem; /* 15px to rem */
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-family: 'Courier New', Courier, monospace;
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 1.25rem 0; /* 20px to rem */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    border: 0.0625rem solid var(--color-border);
}

#playlistView,
textarea {
    width: 100%;
    min-height: 18.75rem; /* 300px to rem */
    padding: 0.625rem; /* 10px to rem */
    border: 0.0625rem solid var(--color-border); /* 1px to rem */
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    background-color: var(--color-code-bg);
    color: var(--color-text);
    font-family: 'Courier New', Courier, monospace;
    resize: none;
    margin-bottom: 0.625rem; /* 10px to rem */
    overflow-y: scroll;
    height: calc(100vh - 28.125rem); /* 450px to rem */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}


#textNoteInput {
    height: calc(100vh - 36rem); /* 420px to rem */
}

input,
select {
    width: 100%;
    height: 3.5rem; /* 56px to rem */
    padding: 0.75rem; /* 12px to rem */
    margin-bottom: 1.25rem; /* 20px to rem */
    border: 0.0625rem solid var(--color-border); /* 1px to rem */
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    background: var(--color-background);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    /*transform: scale(1.01);*/
}

/*
input:active,
select:active {
    transform: scale(0.99);
}
*/

/* Tabs */
.tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.875rem; /* 30px to rem */
}

.tab {
    cursor: pointer;
    padding: 0.625rem 1.25rem; /* 10px, 20px to rem */
    background-color: var(--color-button-bg); /* Using menu background for consistency */
    color: var(--color-button-text);
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    margin: 0 0.3125rem; /* 5px to rem */
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab.active {
    background-color: var(--color-button-active-bg);
    color: var(--color-button-active-text);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
    transform: translateY(-1px);
}

.tab:active {
    transform: translateY(0);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.8;
}

.content-view > * {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.content-view > .markdown-preview {
    display: block;
}

/* Images in note content area - prevent oversized images */
.content-view img,
#note img {
    max-width: 100%;
    max-width: min(100%, 800px);
    max-height: 600px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 1em auto;
    border-radius: 0.5rem;
}

.content-view > [style*="display: block"],
.content-view > [style*="display: flex"] {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.25s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loader */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-loader-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    color: var(--color-text);
    font-size: 1.5rem;
}

.spinner {
    border: 0.5rem solid rgba(255, 255, 255, 0.3); /* 8px to rem */
    border-top: 0.5rem solid var(--color-spinner); /* 8px to rem */
    border-radius: 50%;
    width: 3.125rem; /* 50px to rem */
    height: 3.125rem; /* 50px to rem */
    animation: spin 1s linear infinite;
    margin-right: 0.625rem; /* 10px to rem */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Checkbox Container */
.checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 0.625rem; /* 10px to rem */
}

.checkbox-container input[type="checkbox"] {
    width: 1.25rem; /* 20px to rem */
    height: 1.25rem; /* 20px to rem */
    margin-right: 0.625rem; /* 10px to rem */
    accent-color: var(--color-checkbox); /* Customized using variable */
}

.checkbox-container label {
    font-size: 1.5rem; /* 24px to rem */
    cursor: pointer;
}

/* Chat Area */
/* Chat area as tab content - simplified styling */
#chatArea.chat-area {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-background);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem; /* 20px to rem */
    background-color: var(--color-background);
    -webkit-overflow-scrolling: touch;
}

.chat-message {
    margin-bottom: 0.625rem; /* 10px to rem */
    padding: 0.3125rem; /* 5px to rem */
    border-radius: 0.3125rem; /* 5px to rem */
}

.chat-message.user {
    background-color: var(--color-chat-user-bg);
    color: var(--color-text);
}

.chat-message.assistant {
    color: var(--color-text);
}

.chat-message.assistant ol {
    list-style-type: decimal;
}

.chat-message.assistant ul {
    list-style-type: disc;
}

#chatInput {
    flex: 1;
    width: 100%;
    height: 3.5rem; /* Match input height */
    padding: 0.75rem; /* Match input padding */
    margin: 0;
    margin-bottom: 0; /* Remove default margin */
    border: 0.0625rem solid var(--color-border); /* Match input border */
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    background: var(--color-background); /* Match input background */
    color: var(--color-text); /* Match input color */
    font-size: 1rem; /* Match input font-size */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#chatInput:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

#sendChatBtn {
    width: 3.5rem; /* Match input height */
    height: 3.5rem; /* Match input height */
    min-width: 3.5rem;
    background-color: var(--color-red); /* Match delete button style */
    color: white;
    border: none;
    border-radius: 0.5rem; /* 8px to rem - more modern rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.25rem; /* Icon size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#sendChatBtn:hover {
    background-color: var(--color-darkred); /* Match delete button hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#sendChatBtn:active {
    transform: translateY(1px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.8;
}

/* Ensure icon color is white for light and eink themes */
.light-theme #sendChatBtn,
.eink-theme #sendChatBtn {
    color: #ffffff !important;
}

.light-theme #sendChatBtn i,
.eink-theme #sendChatBtn i,
.light-theme #sendChatBtn .icon,
.eink-theme #sendChatBtn .icon {
    color: #ffffff !important;
}

.chat-input-container {
    display: flex;
    align-items: center;
    padding: 1.25rem; /* 20px to rem */
    background-color: var(--color-background);
    border-top: 0.0625rem solid var(--color-border); /* 1px to rem */
    gap: 0.625rem; /* 10px to rem */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Light theme: Light chat input container */
.light-theme .chat-input-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-top: 1px solid rgba(0, 128, 128, 0.15);
}

/* E-ink theme: Remove blur effects */
.eink-theme .chat-input-container {
    background: var(--color-background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 2px solid var(--color-border);
}


/* Sign Screen */
#signScreen {
    /* Base styles - display is controlled by .screen and .screen.active */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(0, 20, 40, 0.98) 50%,
        rgba(0, 0, 0, 0.95) 100%);
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
}

#signScreen.active {
    display: flex;
}

#signScreen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 204, 204, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 128, 128, 0.12) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.sign-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem;
}

.sign-content {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 30, 30, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 204, 204, 0.2);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 204, 204, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.6s ease-out;
}

.sign-header {
    text-align: center;
    margin-bottom: 2rem;
}

#signScreen h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ffffff 0%, #00cccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.sign-subtitle {
    font-size: 1rem;
    color: rgba(224, 224, 224, 0.8);
    margin: 0;
}

.sign-description {
    margin-bottom: 2rem;
}

.sign-description > p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.9);
    margin-bottom: 1.5rem;
    text-align: center;
}

.terms-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.terms-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 204, 204, 0.05);
    border: 1px solid rgba(0, 204, 204, 0.2);
    border-radius: 0.75rem;
    color: rgba(224, 224, 224, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9375rem;
}

.terms-link:hover {
    background: rgba(0, 204, 204, 0.1);
    border-color: rgba(0, 204, 204, 0.3);
    transform: translateX(5px);
    color: #00cccc;
}

.terms-link i:first-child {
    color: #00cccc;
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

.terms-link span {
    flex: 1;
}

.terms-link i:last-child {
    font-size: 0.75rem;
    opacity: 0.6;
}

.sign-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accept-button {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    background: linear-gradient(135deg, #00cccc 0%, #008080 100%);
    color: #000000;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 204, 204, 0.3),
        0 0 20px rgba(0, 204, 204, 0.1);
}

.accept-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 204, 204, 0.4),
        0 0 30px rgba(0, 204, 204, 0.2);
    background: linear-gradient(135deg, #00e6e6 0%, #00a0a0 100%);
}

.accept-button:active {
    transform: translateY(0);
}

.logout-button {
    width: 100%;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    background: transparent;
    color: rgba(224, 224, 224, 0.7);
    border: 1px solid rgba(224, 224, 224, 0.2);
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.logout-button:hover {
    background: rgba(224, 224, 224, 0.05);
    border-color: rgba(224, 224, 224, 0.3);
    color: rgba(224, 224, 224, 0.9);
}

/* Light theme for sign screen */
.light-theme #signScreen {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(240, 248, 248, 0.98) 50%,
        rgba(255, 255, 255, 0.98) 100%);
}

.light-theme #signScreen::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 128, 128, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 204, 204, 0.06) 0%, transparent 50%);
}

.light-theme .sign-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(250, 255, 255, 0.98) 100%);
    border: 1px solid rgba(0, 128, 128, 0.15);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(0, 128, 128, 0.05);
}

.light-theme #signScreen h1 {
    background: linear-gradient(135deg, #008080 0%, #00cccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.light-theme .sign-subtitle {
    color: rgba(0, 0, 0, 0.7);
}

.light-theme .sign-description > p {
    color: rgba(0, 0, 0, 0.8);
}

.light-theme .terms-link {
    background: rgba(0, 128, 128, 0.05);
    border-color: rgba(0, 128, 128, 0.15);
    color: rgba(0, 0, 0, 0.8);
}

.light-theme .terms-link:hover {
    background: rgba(0, 128, 128, 0.1);
    border-color: rgba(0, 128, 128, 0.25);
    color: #008080;
}

.light-theme .terms-link i:first-child {
    color: #008080;
}

.light-theme .logout-button {
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.15);
}

.light-theme .logout-button:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.8);
}

/* Responsive for sign screen */
@media (max-width: 768px) {
    .sign-content {
        padding: 2rem 1.5rem;
    }

    #signScreen h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 480px) {
    #signScreen {
        padding: 1rem 0.75rem;
    }

    .sign-content {
        padding: 1.5rem 1.25rem;
        border-radius: 1rem;
    }

    #signScreen h1 {
        font-size: 2rem;
    }
}

/* Notes Page Styling */
#notes {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px to rem */
    padding: 1.25rem; /* 20px to rem */
}

.note-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem; /* 14px to rem */
    margin-bottom: 0.5rem; /* 8px to rem */
    border: 0.0625rem solid var(--color-border); /* 1px to rem */
    border-radius: 0.5rem; /* 8px to rem - modern rounded corners */
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    background-color: var(--color-background);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.note-row:hover {
    background-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.note-row:active {
    transform: translateX(2px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.note-content {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    margin-right: 0.5625rem; /* 15px to rem */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    overflow: hidden; /* Prevent overflow */
}

.note-text {
    display: flex;
    flex-direction: column;
}

.note-details {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    overflow: hidden; /* Prevent overflow */
}

.note-details h3 {
    margin: 0 0 0.25rem 0; /* 0 top/left/right, 4px bottom */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Ensure it doesn't exceed parent width */
}

.note-details p {
    margin: 0; /* Remove extra top and bottom margins */
}

.note-title {
    font-size: 1.125rem; /* 18px to rem */
    color: var(--color-text);
}

.note-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px to rem */
    margin-top: 0.125rem; /* 2px to rem */
}

.note-date {
    font-size: 0.75rem; /* 12px to rem */
    color: #777777; /* Consider using a variable */
    margin: 0;
}

.note-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem; /* 6px to rem */
}

.tag-pill {
    display: inline-block;
    padding: 0.25rem 0.625rem; /* 4px top/bottom, 10px left/right */
    background-color: var(--color-code-bg);
    color: var(--color-text);
    border: 0.0625rem solid var(--color-border); /* 1px to rem */
    border-radius: 1rem; /* Fully rounded pill shape */
    font-size: 0.6875rem; /* 11px to rem */
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 10rem; /* Limit width to prevent overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tag-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* NOTES LIST */
#notesList .icon {
    width: 1.5rem; /* 24px to rem */
    height: 1.5rem; /* 24px to rem */
    flex-shrink: 0;
    margin-right: 0.5625rem; /* 15px to rem */
}

#notesList h3 {
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.2;
}

/* Playlist Container */
.transcript-block {
    padding: 0.875rem; /* 14px to rem */
    margin-bottom: 0.5rem; /* 8px to rem */
    border: 0.0625rem solid var(--color-border); /* 1px to rem */
    border-radius: 0.5rem; /* 8px to rem - modern rounded corners */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.transcript-block:hover {
    background-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.transcript-block:active {
    transform: translateX(2px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.9;
}

/* Language Settings */
#languageSettings {
    margin-top: .75rem;
    margin-bottom: 0.75rem; /* 20px to rem */
}

#languageSelect {
    margin-top: 0.3125rem; /* 8px to rem */
}

/* Screens */
.screen {
    display: none; /* Hidden by default */
    visibility: hidden; /* Ensure it's not accessible */
    opacity: 0; /* Smooth transition effect if needed */
    transition: opacity 0.3s ease-in-out; /* Removed transform to avoid creating new containing block */
}

.screen.active {
    display: block; /* Make the active screen visible */
    visibility: visible; /* Ensure it's accessible */
    opacity: 1; /* Fully visible */
    animation: screenFadeIn 0.3s ease-in-out;
}

/* Override display for login and sign screens which need flex */
#loginScreen.active,
#signScreen.active {
    display: flex !important; /* Use flex for login and sign screens */
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem; /* 16px to rem */
    padding: 0.625rem; /* 10px to rem */
}

.theme-toggle:hover {
    color: var(--color-primary);
}

/* Icon Styles */
.icon {
    font-size: 1.5rem; /* 24px to rem */
    color: var(--color-text-primary); /* Use primary text color for better consistency */
}

.icon:hover {
    color: var(--color-primary);
}

/* NOTES ROW: Hide Delete Button */
#notes .hide-select .select-btn {
    display: none;
}

#notes .icon-arrow {
    display: none;
}

#notes .hide-select .icon-arrow {
    display: inline-block;
}

/* Login Screen Styling */
#loginScreen {
    /* Base styles - display is controlled by .screen and .screen.active */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(0, 20, 40, 0.98) 50%,
        rgba(0, 0, 0, 0.95) 100%);
    position: fixed;
    inset: 0;
    overflow-y: auto;
    z-index: 10;
}

#loginScreen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 204, 204, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 128, 128, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 89, 89, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#loginScreen main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem; /* 512px */
}

.login-container {
    width: 100%;
}

.login-content {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 30, 30, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 204, 204, 0.2);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 204, 204, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

#loginScreen h1 {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ffffff 0%, #00cccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: 1.125rem;
    color: rgba(224, 224, 224, 0.8);
    font-weight: 400;
    margin: 0;
}

.login-description {
    margin-bottom: 2.5rem;
}

.login-description > p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.9);
    margin-bottom: 1.5rem;
    text-align: center;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: rgba(224, 224, 224, 0.85);
    padding: 0.75rem 1rem;
    background: rgba(0, 204, 204, 0.05);
    border: 1px solid rgba(0, 204, 204, 0.1);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.feature-list li:hover {
    background: rgba(0, 204, 204, 0.1);
    border-color: rgba(0, 204, 204, 0.2);
    transform: translateX(5px);
}

.feature-list li i {
    color: #00cccc;
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

.login-actions {
    margin-bottom: 2rem;
}

.login-button {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    background: linear-gradient(135deg, #00cccc 0%, #008080 100%);
    color: #000000;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 204, 204, 0.3),
        0 0 20px rgba(0, 204, 204, 0.1);
    position: relative;
    overflow: hidden;
}

.login-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.login-button:hover::before {
    left: 100%;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 204, 204, 0.4),
        0 0 30px rgba(0, 204, 204, 0.2);
    background: linear-gradient(135deg, #00e6e6 0%, #00a0a0 100%);
}

.login-button:active {
    transform: translateY(0);
}

.login-button i {
    font-size: 1.25rem;
}

.login-legal {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 204, 204, 0.2);
}

.legal-text {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(224, 224, 224, 0.7);
    margin-bottom: 1rem;
}

.legal-text a {
    color: #00cccc;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 204, 204, 0.3);
    transition: all 0.2s ease;
}

.legal-text a:hover {
    color: #00e6e6;
    border-bottom-color: rgba(0, 204, 204, 0.6);
}

.legal-note {
    font-size: 0.8125rem;
    color: rgba(0, 204, 204, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.legal-note i {
    font-size: 0.875rem;
}

/* Light theme adjustments for login screen */
.light-theme #loginScreen {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(240, 248, 248, 0.98) 50%,
        rgba(255, 255, 255, 0.98) 100%);
}

.light-theme #loginScreen::before {
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 128, 128, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 204, 204, 0.06) 0%, transparent 50%);
}

.light-theme .login-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(250, 255, 255, 0.98) 100%);
    border: 1px solid rgba(0, 128, 128, 0.15);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(0, 128, 128, 0.05);
}

.light-theme #loginScreen h1 {
    background: linear-gradient(135deg, #008080 0%, #00cccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.light-theme .login-subtitle {
    color: rgba(0, 0, 0, 0.7);
}

.light-theme .login-description > p {
    color: rgba(0, 0, 0, 0.8);
}

.light-theme .feature-list li {
    color: rgba(0, 0, 0, 0.75);
    background: rgba(0, 128, 128, 0.05);
    border-color: rgba(0, 128, 128, 0.1);
}

.light-theme .feature-list li:hover {
    background: rgba(0, 128, 128, 0.1);
    border-color: rgba(0, 128, 128, 0.2);
}

.light-theme .feature-list li i {
    color: #008080;
}

.light-theme .legal-text {
    color: rgba(0, 0, 0, 0.6);
}

.light-theme .legal-text a {
    color: #008080;
    border-bottom-color: rgba(0, 128, 128, 0.3);
}

.light-theme .legal-text a:hover {
    color: #00cccc;
    border-bottom-color: rgba(0, 128, 128, 0.6);
}

.light-theme .legal-note {
    color: rgba(0, 128, 128, 0.8);
}

.light-theme .login-legal {
    border-top-color: rgba(0, 128, 128, 0.15);
}

/* Responsive design */
@media (max-width: 768px) {
    .login-content {
        padding: 2rem 1.5rem;
    }

    #loginScreen h1 {
        font-size: 2.25rem;
    }

    .login-subtitle {
        font-size: 1rem;
    }

    .feature-list li {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }
}

@media (max-width: 480px) {
    #loginScreen {
        padding: 1rem 0.75rem;
    }

    .login-content {
        padding: 1.5rem 1.25rem;
        border-radius: 1rem;
    }

    #loginScreen h1 {
        font-size: 2rem;
    }

    .login-button {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* Image Viewer */

#mediaContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Full width for the container */
    /*max-width: 800px;*/ /* Limit the maximum width for better layout */
    max-width: 100%; /* Allow full width for better visibility */
    height: 100vh; /* Full viewport height for better visibility */
    margin: auto; /* Center the container */
    padding: 0.75rem; /* 20px to rem */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); /* 4px, 8px to rem */
    background-color: var(--color-background); /* Background color for contrast */
}

#imageViewer {
    display: none;
    margin: auto;
    max-width: 39.0625rem; /* 1000px to rem */
    max-height: 80%; /* Limit height for better visibility */
    border: 0.0625rem solid var(--color-border); /* 2px to rem */
    border-radius: 0.3125rem; /* 5px to rem */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); /* 4px, 8px to rem */
}

#pdfViewer {
    display: none;
    margin: auto;
    width: 100%; /* Allow full width for better readability */
    max-width: 100%;
    max-height: 80vh; /* Set maximum height to viewport height for better fit */
    border: 0.0625rem solid var(--color-border); /* 2px to rem */
    border-radius: 0.3125rem; /* 5px to rem */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); /* 4px, 8px to rem */
}

#appScreen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 5; /* Ensure it appears below the sign screen */
    overflow: hidden; /* Prevent content overflow */
}

/* Ensure appScreen is properly displayed when active */
#appScreen.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* AUDIO RECORDING */
.record-btn {
    /*background-color: var(--color-red);*/
    transition: background-color 0.3s ease;
}

.record-btn.recording {
    background-color: var(--color-darkred);
}

.notification {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 0.625rem 1.125rem; /* 15px, 30px to rem */
    border-radius: 0.15625rem; /* 5px to rem */
    box-shadow: 0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.2); /* 2px, 10px to rem */
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    transform: translateX(-50%) translateY(-100%);
}

.notification.visible {
    top: 0.75rem; /* 20px to rem */
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notification.hidden {
    top: -3.75rem; /* 100px to rem */
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
}


.apply-btn {
    background-color: var(--color-red);
}

.apply-btn:hover {
    background-color: var(--color-darkred);
}

.save-btn, .delete-btn, .cancel-btn {
    background-color: var(--color-red);
}

.save-btn:hover, .delete-btn:hover, .cancel-btn:hover {
    background-color: var(--color-darkred);
}

/* EASYMDE OVERRIDES */

.EasyMDEContainer {
    margin-bottom: 0.625rem; /* 15px to rem */
    overflow: visible !important; /* Ensure toolbar buttons are not cut off */
}

.EasyMDEContainer .editor-toolbar {
    border-top-color: var(--color-border);
    border-left-color: var(--color-border);
    border-right-color: var(--color-border);
    overflow-x: auto; /* Allow horizontal scrolling on mobile if needed */
    overflow-y: visible; /* Allow vertical expansion for wrapped buttons */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    flex-wrap: wrap; /* Allow buttons to wrap to multiple rows */
}

.EasyMDEContainer .CodeMirror {
    border-color: var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-height: 350px; /* Default max height for scrolling */
    min-height: 200px; /* Minimum height */
}

.EasyMDEContainer .CodeMirror-focused {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.EasyMDEContainer .CodeMirror-scroll {
    padding: 0;
    overflow-y: auto !important; /* Enable vertical scrolling */
    overflow-x: auto !important; /* Enable horizontal scrolling if needed */
    max-height: 350px; /* Match the CodeMirror max-height */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Ensure CodeMirror has proper height for scrolling when not in fullscreen */
.EasyMDEContainer .CodeMirror:not(.CodeMirror-fullscreen) {
    height: auto;
    max-height: 350px;
    overflow: hidden; /* CodeMirror handles scrolling internally via CodeMirror-scroll */
}

.EasyMDEContainer .CodeMirror-lines {
    padding: 0;
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left: 2px solid var(--color-text);
}

.EasyMDEContainer .CodeMirror-selected {
    background-color: var(--color-accent);
}

.EasyMDEContainer .CodeMirror-line {
    padding: 0;
}

.EasyMDEContainer .editor-preview {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Side-by-side preview - match editor height and make scrollable */
.EasyMDEContainer .editor-preview-side {
    background-color: var(--color-background);
    color: var(--color-text);
    max-height: 350px; /* Match CodeMirror max-height */
    height: auto;
    overflow-y: auto; /* Make it scrollable */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Remove no-mobile class restriction from fullscreen button */
.EasyMDEContainer .editor-toolbar button.no-mobile {
    display: inline-block !important;
}

/* Images in editor preview - prevent oversized images */
.EasyMDEContainer .editor-preview img {
    max-width: 100%;
    max-width: min(100%, 800px);
    max-height: 600px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 1em auto;
    border-radius: 0.5rem;
}

.EasyMDEContainer .editor-toolbar button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    margin-left: 0.3125rem; /* 8px to rem */
    margin-bottom: 0.3125rem; /* 8px to rem */
    width: auto;
    height: auto;
    padding: 0.5rem; /* 8px to rem */
}

.EasyMDEContainer .editor-toolbar button i {
    margin: 0;
    font-size: 1.25rem; /* 20px to rem */
}

.EasyMDEContainer .editor-toolbar button:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
}

.EasyMDEContainer .editor-toolbar button.active {
    background-color: var(--color-button-active-bg);
    color: var(--color-button-active-text);
}

.EasyMDEContainer .editor-preview ul {
    list-style-type: disc; /* Default bullet style for unordered lists */
}

.EasyMDEContainer .editor-preview ol {
    list-style-type: decimal; /* Default numbering style for ordered lists */
}

/* Light theme - simplified CodeMirror styles */
.light-theme .EasyMDEContainer .CodeMirror {
    background-color: var(--color-background);
    border-color: var(--color-border);
    box-shadow: none;
}

.light-theme .EasyMDEContainer .CodeMirror-focused {
    border-color: var(--color-primary);
    box-shadow: none;
    outline: 1px solid var(--color-primary);
    outline-offset: -1px;
}

.light-theme .EasyMDEContainer .CodeMirror-cursor {
    border-left: 2px solid var(--color-text);
}

.light-theme .EasyMDEContainer .CodeMirror-selected {
    background-color: var(--color-accent);
}

.light-theme .EasyMDEContainer .CodeMirror-line {
    box-shadow: none !important;
    background: transparent !important;
}

.light-theme .EasyMDEContainer .CodeMirror-line:hover {
    box-shadow: none !important;
    background: transparent !important;
}

/* Eink theme - simplified CodeMirror styles (no shadows, simple borders) */
.eink-theme .EasyMDEContainer .CodeMirror {
    background-color: var(--color-background);
    border-color: var(--color-border);
    box-shadow: none !important;
    border: 1px solid var(--color-border);
}

.eink-theme .EasyMDEContainer .CodeMirror-focused {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none !important;
    border: 2px solid var(--color-border);
}

.eink-theme .EasyMDEContainer .CodeMirror-cursor {
    border-left: 2px solid var(--color-text);
}

.eink-theme .EasyMDEContainer .CodeMirror-selected {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Eink theme - editor toolbar button hover effects */
.eink-theme .EasyMDEContainer .editor-toolbar button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.eink-theme .EasyMDEContainer .editor-toolbar button:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
    border: 1px solid var(--color-border);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}

.eink-theme .EasyMDEContainer .editor-toolbar button.active {
    background-color: var(--color-button-active-bg);
    color: var(--color-button-active-text);
    border: 1px solid var(--color-border);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}

/* Fullscreen mode styles - EasyMDE uses CodeMirror-fullscreen class */
/* Prevent body scroll when fullscreen is active */
body:has(.CodeMirror-fullscreen) {
    overflow: hidden !important;
}

/* Break out of all parent containers when fullscreen */
body:has(.CodeMirror-fullscreen) .section,
body:has(.CodeMirror-fullscreen) .content-view,
body:has(.CodeMirror-fullscreen) .tab-content,
body:has(.CodeMirror-fullscreen) #markdownInput {
    position: static !important;
    overflow: visible !important;
    z-index: auto !important;
    transform: none !important;
}

/* Make EasyMDEContainer break out when it contains fullscreen CodeMirror */
.EasyMDEContainer:has(.CodeMirror-fullscreen) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
}

/* Fullscreen CodeMirror editor - EasyMDE adds CodeMirror-fullscreen class */
/* Use !important to override any parent container constraints */
.EasyMDEContainer .CodeMirror-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #0f0f0f !important; /* Dark theme default */
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

/* When CodeMirror is fullscreen, style the toolbar (toolbar is sibling, comes before CodeMirror) */
.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background-color: #0f0f0f !important; /* Dark theme default */
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.5rem 0.75rem 0.5rem !important; /* Added bottom padding */
    z-index: 100000 !important;
    margin: 0 !important;
    transform: none !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Fix button backgrounds in fullscreen for dark theme - override any white backgrounds */
.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar button {
    background-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
}

.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar button:hover {
    background-color: var(--color-button-hover-bg) !important;
    color: var(--color-button-hover-text) !important;
}

.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar button.active {
    background-color: var(--color-button-active-bg) !important;
    color: var(--color-button-active-text) !important;
}

/* Adjust CodeMirror height to account for toolbar - will be adjusted by JS for dynamic height */
.EasyMDEContainer .CodeMirror-fullscreen {
    top: var(--codemirror-fullscreen-top, 60px) !important; /* Use CSS variable, default to 60px */
    height: calc(100vh - var(--codemirror-fullscreen-top, 60px)) !important;
    max-height: calc(100vh - var(--codemirror-fullscreen-top, 60px)) !important;
    transition: top 0.2s ease !important;
}

/* Ensure CodeMirror-scroll doesn't go under toolbar in fullscreen */
.EasyMDEContainer .CodeMirror-fullscreen .CodeMirror-scroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* Ensure CodeMirror-sizer and CodeMirror-lines are properly contained */
.EasyMDEContainer .CodeMirror-fullscreen .CodeMirror-sizer {
    min-height: 100% !important;
}

.EasyMDEContainer .CodeMirror-fullscreen .CodeMirror-lines {
    padding: 0.75rem !important;
}

/* Preview in fullscreen */
.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview,
.EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview-side {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 50px) !important;
    max-height: calc(100vh - 50px) !important;
    background-color: #0f0f0f !important; /* Dark theme default */
    z-index: 99998 !important;
    margin: 0 !important;
    transform: none !important;
}

/* Light theme fullscreen */
.light-theme .EasyMDEContainer .CodeMirror-fullscreen {
    background-color: #ffffff !important;
}

.light-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar {
    background-color: #ffffff !important;
}

.light-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview,
.light-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview-side {
    background-color: #ffffff !important;
}

/* Eink theme fullscreen */
.eink-theme .EasyMDEContainer .CodeMirror-fullscreen {
    background-color: #ffffff !important;
}

.eink-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar {
    background-color: #ffffff !important;
    border-bottom: 2px solid var(--color-border) !important;
}

.eink-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview,
.eink-theme .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-preview-side {
    background-color: #ffffff !important;
}

/* Text selection styles for eink theme - make selection visible with high contrast */
.eink-theme ::selection {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.eink-theme ::-moz-selection {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* CodeMirror text selection for eink theme */
.eink-theme .CodeMirror-selectedtext {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Text selection in textareas and inputs for eink theme */
.eink-theme textarea::selection,
.eink-theme input::selection,
.eink-theme textarea::-moz-selection,
.eink-theme input::-moz-selection {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.search-cc-container {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem; /* 10px to rem */
}

#searchCCInput {
    flex: 1;
    padding: 0.5rem;
    margin-right: 0.3125rem; /* 5px to rem */
}

.search-cc-btn {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    margin-left: 0.3125rem; /* 8px to rem */
    width: auto;
    height: auto;
    -webkit-tap-highlight-color: transparent;
}

.search-cc-btn:hover {
    background-color: var(--color-button-hover-bg);
    transform: scale(1.05);
}

.search-cc-btn:active {
    transform: translateY(1px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.8;
}

.cc-language-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    flex-shrink: 0; /* Prevent shrinking */
}

.cc-language-select {
    width: auto;
    min-width: 12rem; /* 192px - give it more width */
    max-width: 20rem; /* 320px - reasonable max width */
    height: 3.5rem; /* Match default input/select height */
    padding: 0.75rem; /* Match default input/select padding */
    margin-bottom: 0; /* Remove default margin for inline elements */
    border: 0.0625rem solid var(--color-border); /* Match default border */
    border-radius: 0.25rem; /* Match default border-radius */
    background: var(--color-background); /* Use default background */
    color: var(--color-text); /* Use default text color */
    cursor: pointer;
    font-size: inherit; /* Use default font size */
}

.search-cc-btn i {
    margin: 0;
    font-size: 1.25rem; /* 20px to rem */
}

.cc-export-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem; /* 10px to rem */
    margin-top: 1.25rem; /* 20px to rem */
    padding-top: 1.25rem; /* 20px to rem */
    border-top: 0.0625rem solid var(--color-border); /* 1px to rem */
}

.cc-export-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto; /* Push to the right */
    flex-shrink: 0;
}

.cc-export-buttons {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10px to rem */
    flex-shrink: 0; /* Prevent shrinking */
    min-width: fit-content; /* Ensure enough width for side-by-side elements */
}

.translate-cc-btn {
    width: auto;
    min-width: 0;
    height: 3.5rem; /* Match default input/select height */
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.translate-cc-btn:hover {
    background-color: var(--color-button-hover-bg);
    transform: scale(1.02);
}

.cc-translate-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-background);
}

.cc-translate-message {
    font-size: 0.95rem;
    opacity: 0.9;
}

.cc-translate-buttons {
    display: flex;
    gap: 0.5rem;
}

.cc-translate-accept-btn,
.cc-translate-reject-btn {
    height: 3rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.cc-translate-accept-btn {
    background-color: #2e7d32;
    color: #fff;
}

.cc-translate-reject-btn {
    background-color: #c62828;
    color: #fff;
}

.cc-translate-accept-btn:hover,
.cc-translate-reject-btn:hover {
    transform: scale(1.02);
}

/* Mobile: CC buttons full width, Translate first logically */
@media (max-width: 768px) {
    .cc-export-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cc-export-right {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cc-export-buttons {
        width: 100%;
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .translate-cc-btn {
        order: -1; /* first button */
        width: 100%;
    }

    .export-cc-btn {
        width: 100%;
    }

    .cc-export-format {
        width: 100%;
    }

    .cc-translate-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-translate-buttons {
        width: 100%;
    }

    .cc-translate-accept-btn,
    .cc-translate-reject-btn {
        width: 100%;
    }
}

.export-cc-btn {
    width: auto;
    min-width: fit-content;
    height: 3.5rem; /* Match default input/select height */
    padding: 0.75rem 1.25rem; /* Match default button padding */
    margin-bottom: 0; /* Remove default margin for inline elements */
    border: 0.0625rem solid var(--color-border); /* Match default border */
    border-radius: 0.25rem; /* Match default border-radius */
    background: var(--color-background); /* Use default background */
    color: var(--color-text); /* Use default text color */
    cursor: pointer;
    font-size: inherit; /* Use default font size */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px to rem */
    transition: background-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.export-cc-btn:hover {
    background-color: var(--color-button-hover-bg, var(--color-button-bg));
    transform: translateY(-1px);
}

.export-cc-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.9;
}

.export-cc-btn i {
    font-size: inherit;
}

.cc-export-format {
    width: auto;
    min-width: fit-content;
    max-width: 8rem; /* Limit max width for content */
    height: 3.5rem; /* Match default input/select height */
    padding: 0.75rem; /* Match default input/select padding */
    margin-bottom: 0; /* Remove default margin for inline elements */
    border: 0.0625rem solid var(--color-border); /* Match default border */
    border-radius: 0.25rem; /* Match default border-radius */
    background: var(--color-background); /* Use default background */
    color: var(--color-text); /* Use default text color */
    cursor: pointer;
    font-size: inherit; /* Use default font size */
}

.highlighted {
    background-color: var(--color-accent); /* Use a consistent highlight color */
}

[hidden] {
    display: none!important;
}

.notes-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: var(--color-background);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
    z-index: 1000;
    display: none; /* Hidden by default - JavaScript controls visibility based on delete mode */
}

/* Ensure footer is positioned correctly when visible (JavaScript controls display) */
#notes.active ~ .notes-footer {
    /* Footer can be shown by JavaScript when delete mode is active */
}

.hide-select .select-btn {
    display: none;
}

.select-btn {
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 4px;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.15s ease;
    width: 63px;
    min-width: 63px;
    color: var(--color-button-text);
    -webkit-tap-highlight-color: transparent;
}

.select-btn:hover {
    background-color: var(--color-button-hover-bg);
    transform: scale(1.05);
}

.select-btn:active {
    transform: translateY(1px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.8;
}

.select-btn i {
    margin: 0;
    font-size: 2rem; /* 20px to rem */
}

.note-row .select-btn .fa-square {
    display: inline-block;
}

.note-row .select-btn .fa-check-square {
    display: none;
}

.note-row.selected .select-btn .fa-square {
    display: none;
}

.note-row.selected .select-btn .fa-check-square {
    display: inline-block;
}

/*
.selected {
    background-color: var(--color-button-active-bg);
    border-color: var(--color-button-active-bg);
    color: var(--color-button-active-text);
}
*/

#deleteSelectedBtn {
    margin-bottom: 0;
    background-color: var(--color-red);
}

#deleteSelectedBtn:hover {
    background-color: var(--color-darkred);
}

.note-tags-container {
    display: flex;
    align-items: center;
    margin-top: 0.625rem; /* 10px to rem - consistent spacing from editor */
    margin-bottom: 0; /* No bottom margin - let noteTagsDisplay handle spacing */
}

.note-tags-input {
    flex: 1;
    margin-right: 10px;
}

.available-tags-select {
    width: 200px;
}

/* Note Tags Display - control spacing between tags and AI fields */
#noteTagsDisplay {
    margin-top: 0.625rem; /* 10px to rem - spacing from tags container */
    margin-bottom: 0; /* No bottom margin */
    min-height: 0; /* No minimum height when empty */
}

/* When noteTagsDisplay is empty, reduce spacing */
#noteTagsDisplay:empty {
    margin-top: 0;
    height: 0;
}

/* AI Edit Container - matches tag container styling */
.ai-edit-container {
    display: flex;
    align-items: center;
    margin-top: 0; /* No top margin - spacing handled by noteTagsDisplay */
}

.ai-edit-input {
    flex: 1;
    margin-right: 10px;
    width: 100%;
    height: 3.5rem; /* Match input height */
    padding: 0.75rem; /* Match input padding */
    margin-bottom: 0; /* Remove default margin for inline elements */
    border: 0.0625rem solid var(--color-border); /* Match default border */
    border-radius: 0.5rem; /* Match default border-radius */
    background: var(--color-background); /* Use default background */
    color: var(--color-text); /* Use default text color */
    font-size: inherit; /* Use default font size */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-edit-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-edit-btn {
    width: 200px; /* Match available-tags-select width */
    height: 3.5rem; /* Match input height */
    padding: 0.75rem; /* Match input padding */
    margin-bottom: 0; /* Remove default margin for inline elements */
    border: 0.0625rem solid var(--color-border); /* Match default border */
    border-radius: 0.5rem; /* Match default border-radius */
    background: var(--color-button-bg); /* Use button background */
    color: var(--color-button-text); /* Use button text color */
    cursor: pointer;
    font-size: inherit; /* Use default font size */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-edit-btn:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ai-edit-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
    opacity: 0.9;
}

.ai-edit-btn i {
    font-size: 1rem;
}

/* AI Edit Actions - Accept/Reject UI */
.ai-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0.75rem;
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    gap: 1rem;
}

.ai-edit-message {
    flex: 1;
    color: var(--color-text);
    font-size: 0.9375rem;
}

.ai-edit-buttons {
    display: flex;
    gap: 0.625rem;
}

.ai-accept-btn,
.ai-reject-btn {
    padding: 0.5rem 1rem;
    height: auto;
    min-height: 2.5rem;
    margin-bottom: 0;
    border: 0.0625rem solid var(--color-border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-accept-btn {
    background-color: var(--color-apply-btn, #4CAF50);
    color: #ffffff;
}

.ai-accept-btn:hover {
    background-color: var(--color-apply-btn-hover, #45A049);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ai-reject-btn {
    background-color: var(--color-red, #d32f2f);
    color: #ffffff;
}

.ai-reject-btn:hover {
    background-color: var(--color-darkred, #b71c1c);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ai-accept-btn:active,
.ai-reject-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
    opacity: 0.9;
}

.ai-accept-btn i,
.ai-reject-btn i {
    font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
    /* AI Edit Container - stack vertically on mobile */
    .ai-edit-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    /* AI Edit Input - full width on mobile */
    .ai-edit-input {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0;
    }

    /* AI Edit Button - full width on mobile like other bottom buttons */
    .ai-edit-btn {
        width: 100% !important;
    }

    .ai-edit-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .ai-edit-message {
        text-align: center;
    }

    .ai-edit-buttons {
        justify-content: center;
    }
}

.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#searchNotesInput {
    flex: 1;
    margin-right: 0;
}

.filter-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    gap: 10px; /* Space between items */
    width: 100%; /* Fill available width */
}

.filter-container select {
    margin-bottom: 0;
}

.note-options,
.search-tags-select {
    flex: 1; /* Stretch to fill available space */
    min-width: 0; /* Allow shrinking below content size */
}

.delete-mode-btn {
    width: 150px;
    flex-shrink: 0; /* Don't shrink, keep fixed width */
    height: 3.5rem; /* Match select height */
    margin-bottom: 0;
    padding: 0.75rem; /* Match select padding */
    border: 0.0625rem solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-background);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.25rem; /* Icon size */
}

.delete-mode-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.2);
    background-color: var(--color-button-hover-bg);
}

.delete-mode-btn:active {
    transform: scale(0.99);
    opacity: 0.8;
}

.delete-mode-btn.active {
    background-color: var(--color-button-active-bg);
    color: var(--color-button-active-text);
    border-color: var(--color-button-active-bg);
}

.delete-mode-btn.active:hover {
    background-color: var(--color-button-active-bg);
    border-color: var(--color-button-active-bg);
}

.search-container {
    margin-bottom: 10px;
}

/* Mobile Responsive */

@media (min-width: 769px) {
    .button-container {
        justify-content: space-between;
    }

    .button-container button {
        flex: 1; /* Each button takes equal space */
        max-width: none; /* Remove max-width to allow full width */
    }

    .chat-input-container {
        padding: 0.5rem 1.25rem; /* More left/right padding on desktop */
        gap: 0.5rem;
    }

    .chat-input-container #chatInput,
    .chat-input-container #sendChatBtn {
        margin: 0;
    }
}

@media (max-width: 768px) {
    /* Adjust menu widths for mobile - smaller width to leave space for closing */
    .menu,
    .menu2 {
        min-width: 12.5rem; /* 200px - smaller on mobile */
        max-width: calc(100vw - 3rem); /* Leave space on sides for closing */
        width: auto;
    }

    /* Adjust main height for mobile to account for bottom UI elements */
    main {
        height: calc(100vh - env(safe-area-inset-bottom, 0)); /* Account for bottom safe area */
    }

    /* Add extra bottom padding for mobile to account for bottom UI elements (home indicator, etc.) */
    .section {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0)); /* Base padding + safe area */
    }

    /* Show section footer on mobile for extra bottom space and copyright */
    .section.active::after,
    .section.slide-forward.active::after,
    .section.slide-back.active::after {
        visibility: visible;
        height: auto;
        padding: 2rem 1.25rem calc(4rem + env(safe-area-inset-bottom, 0)); /* Extra bottom padding for UI elements */
        min-height: 6rem; /* Ensure enough space for buttons */
    }

    #notes {
        padding-left: 0.75rem; /* Small left padding for mobile */
        padding-right: 0.75rem; /* Small right padding for mobile */
    }

    .button-container {
        flex-direction: column;
    }

    .button-container button {
        max-width: 100%;
        margin-bottom: 0.625rem; /* 10px to rem */
    }

    .button-container button:last-child {
        margin-bottom: 0;
    }

    /* Reduce delete mode button width on mobile to give more space for dropdowns */
    .delete-mode-btn {
        width: 100px;
    }

    /* CC Export Container - Stack on mobile */
    .cc-export-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem; /* 12px to rem */
    }

    .cc-language-container {
        width: 100%;
        margin-bottom: 0;
    }

    .cc-language-select {
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }

    .cc-export-buttons {
        width: 100%;
        flex-direction: column;
        margin-left: 0;
        gap: 0.75rem; /* 12px to rem */
    }

    .export-cc-btn {
        width: 100%;
        justify-content: center;
    }

    .cc-export-format {
        width: 100%;
        max-width: 100%;
    }


    .EasyMDEContainer .editor-toolbar i.separator {
        display: none;
    }

    /* Ensure toolbar is visible and scrollable on mobile - all buttons should be accessible */
    .EasyMDEContainer .editor-toolbar {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Ensure all toolbar buttons are visible on mobile */
    .EasyMDEContainer .editor-toolbar button {
        flex-shrink: 0 !important; /* Prevent buttons from shrinking */
        min-width: auto !important;
    }

    /* Ensure fullscreen button works on mobile - override no-mobile class */
    .EasyMDEContainer .editor-toolbar button.no-mobile {
        display: inline-block !important;
    }

    /* Side-by-side preview on mobile - match editor height */
    .EasyMDEContainer .editor-preview-side {
        max-height: 350px !important; /* Match CodeMirror max-height */
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
    }

    /* Fullscreen toolbar on mobile - allow dynamic height for multiple rows */
    .EasyMDEContainer:has(.CodeMirror-fullscreen) .editor-toolbar {
        padding: 0.5rem 0.5rem 0.75rem 0.5rem !important;
        min-height: auto !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /* Adjust CodeMirror position on mobile - will be calculated by JS */
    .EasyMDEContainer .CodeMirror-fullscreen {
        /* top will be set dynamically by JavaScript - no default value to allow JS override */
    }

    .checkbox-container label {
        font-size: 0.875rem; /* 14px to rem */
    }

    .note-title {
        font-size: 1rem; /* 16px to rem */
    }

    .note-date {
        font-size: 0.625rem; /* 10px to rem */
    }
}

/* Pricing Table Styles */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.pricing-table th, .pricing-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 0.0625rem solid var(--color-border);
    transition: background-color 0.2s ease;
}

.pricing-table th {
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    font-weight: bold;
}

.pricing-table tr {
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.pricing-table tr:nth-child(even) {
    background-color: var(--color-background-alt);
}

.pricing-table tr:hover {
    background-color: var(--color-accent);
    transform: translateX(4px);
}

/*
.subscribe-btn {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    background-color: var(--color-apply-btn);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-btn:hover {
    background-color: var(--color-apply-btn-hover);
}
*/

@media (max-width: 768px) {
    /* Hide table headers on mobile */
    .pricing-table thead {
        display: none;
    }

    /* Make table rows behave like cards */
    .pricing-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-border);
        border-radius: 4px;
    }

    /* Style cells as flex containers */
    .pricing-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        border-bottom: none;
    }

    /* Add labels for each cell */
    .pricing-table td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 1rem;
    }

    /* Remove bottom border from last row */
    .pricing-table tr:last-child td {
        border-bottom: none;
    }

    /* Make buttons full width on mobile */
    .pricing-table .subscribe-btn {
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.75rem;
        text-align: center;
    }

    /* Center button container */
    .pricing-table td:last-child {
        display: block;
        text-align: center;
    }
}

/*Stripe Pricing Table Styles */

/*
#pricingTable {
    margin-bottom: 1.25rem;
}
*/
/* 20px to rem */


/* Floating Action Button for Notes */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: none; /* Hidden by default */
}

/* Show fab-container only when notes list is active */
#notes.active ~ .fab-container {
    display: block;
}

.fab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto; /* Allow width to adjust based on content */
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-secondary);
    border-radius: 50px; /* Adjust to make it more pill-shaped */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 204, 204, 0.3), 0 0 20px rgba(0, 204, 204, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0 20px; /* Add padding for the text */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(0, 204, 204, 0.3);
}

.fab-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 204, 204, 0.4), 0 0 25px rgba(0, 204, 204, 0.15);
    text-decoration: none;
}

.fab-button:active {
    transform: translateY(2px);
    transition: transform 0.1s ease, opacity 0.1s ease;
    opacity: 0.9;
}

.fab-button i {
    font-size: 24px;
    margin-right: 10px; /* Space between icon and text */
}

.fab-text {
    font-size: 1rem; /* Adjust font size as needed */
    display: inline-block; /* Ensure it aligns properly */
}

.menu h2, .menu2 h2 {
    font-size: 1.5rem; /* Adjust the size as needed */
    color: var(--color-text); /* Use a variable for consistency */
    margin-bottom: 1rem; /* Space below the title */
    border-bottom: 1px solid var(--color-secondary); /* Optional: add a border for separation */
    padding-bottom: 0.5rem; /* Padding for the border */
}