@font-face {
    font-family: 'Hieroglyphica Extended';
    src: url('fonts/HieroglyphicaExtended-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+13460-143FF;
}

.noto-sans-egyptian-hieroglyphs-regular {
    font-family: "Noto Sans Egyptian Hieroglyphs", "Hieroglyphica Extended", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'Noto Sans Egyptian Hieroglyphs', 'Hieroglyphica Extended';
    color: #5d1414;
    background-color: #ddd6d6;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Base container styles */
.container {
    display: flex;
    justify-content: flex-start;
    width: 100vw;
    height: 100vh;
    background-color: #636363;
    padding: 1vh;
    box-sizing: border-box;
    gap: 0;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border: 1px solid black;
    cursor: pointer;
    box-sizing: border-box;
    /* Ensure consistent box sizing */
    filter: none !important;
}

#colorPopup {
    position: absolute;
    bottom: 45px;
    /* Adjust this value to move it higher */
    right: 330px;
    z-index: 999;
    /* Ensure it's above other content */
    display: none;
    /* Keep it hidden by default */
    background-color: #998b60;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* ============= WATERMARKS - DO NOT REMOVE ========================== */
#fixedTextOverlay {
    /* Full-canvas engraved watermark: sits BEHIND the (transparent) canvas at
       z-index 0, so it reads as part of the background and any glyphs drawn on
       the canvas render on top of it. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: clamp(40px, 8vw, 200px);
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* Relief / engraved look: fill matches the gray workspace so only the
       paired highlight + shadow define the letterforms. */
    color: #636363;
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.10),
        -1px -1px 1px rgba(0, 0, 0, 0.40);
    transition: opacity 0.4s ease;
}


/* Main search container - user-resizable via #paletteResizer drag handle */
#searchContainer {
    width: var(--palette-w, 400px);
    min-width: 280px;
    max-width: 80vw;
    border: 1px dotted #ffffff;
    padding: 10px;
    background-color: #1e1e1e;
    position: relative;
    display: flex;
    flex-direction: column;
    order: 2;
    height: calc(100vh - 2vh);
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

/* Left-edge drag handle to widen/narrow the palette. Sits on the border so
   the hit area straddles the seam between canvas and palette. */
#paletteResizer {
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
}
#paletteResizer:hover,
#paletteResizer:active {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

/* Character list — columns reflow as the palette is resized. */
#charList {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    justify-content: center;
    gap: 5px;
    padding: 10px;
    margin: 0 auto;
}

/* Character item styling */
.char-container {
    font-family: 'Noto Sans Egyptian Hieroglyphs', 'Hieroglyphica Extended', sans-serif !important;
    border-radius: 9px;
    border: 2px solid #2730ba;
    background-color: #131c1d;
    text-align: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70px;
    /* Match grid column width */
}

/* Extended-A cells — different border tone and a subtle warm tint so they're
   distinguishable at a glance from the base-block entries above. */
.char-container.ext-a {
    border-color: #8a5c2b;
    background-color: #1d1813;
}

/* Compact special-chars palette inside the three-line block dialog. Inserts
   into whichever of {translit, translation} has focus when a key is clicked. */
.translit-palette {
    background: #181818;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px 6px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.translit-palette .keyboard-row {
    display: flex;
    gap: 3px;
}
.translit-palette .key {
    width: 26px;
    height: 26px;
    font-size: 14px;
    background: #2a2a2a;
    color: #e6d4b8;
    border: 1px solid #444;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.translit-palette .key:hover { background: #3a3a3a; }
.translit-palette .key:active { background: #4a4a4a; }

/* Row labels inside the three-line block dialog. */
.three-line-label {
    display: block;
    margin: 8px 0 3px;
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Click-to-select highlight — persists until another cell is clicked or the
   palette re-renders (search/category change). */
.char-container.selected {
    border-color: #f0c674;
    background-color: #3a2f1a;
    box-shadow: 0 0 0 2px rgba(240, 198, 116, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Section divider that appears between base block and Extended-A in the chart. */
.section-divider {
    grid-column: 1 / -1;
    padding: 8px 12px;
    margin: 8px 0;
    background: linear-gradient(90deg, transparent, #8a5c2b 20%, #8a5c2b 80%, transparent);
    color: #e6d4b8;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

/* Rest of your styles remain the same */
#charListContainer {
    height: 60%;
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #454444;
    width: 100%;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Drag handle that lets the user resize the dictionary results panel */
#resultsResizer {
    height: 6px;
    background: linear-gradient(#666, #444);
    cursor: ns-resize;
    border-radius: 3px;
    margin: 2px 0 6px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 #888;
}
#resultsResizer:hover {
    background: linear-gradient(#888, #666);
}

.row {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    gap: 5px;
}

.char {
    font-family: 'Noto Sans Egyptian Hieroglyphs', 'Hieroglyphica Extended', sans-serif !important;
    font-size: 30px;
    color: #e6a6a6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent synthetic font variants */
    font-synthesis: none;
}

.name {
    font-size: 14px;
    color: #ef1414;
}

/* Canvas styling */
canvas {
    width: 100% !important;
    /* Force full width */
    height: calc(100vh - 2vh);
    border: 1px solid #6565f9;
    background-color: #f5f5f512 !important;
    margin: 0;
}

#searchInput {
    width: calc(100% - 13px);
    margin-bottom: 5px;
    padding: 5px;
}

/* =========load dict========= */
.file-upload-row {
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upload-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    height: 20px;
    white-space: nowrap;
    line-height: 0;
    display: inline-block;
}

.upload-button:hover {
    background-color: #45a049;
}

.file-status {
    font-size: 0.9em;
    color: #833838;
}

.search-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* ================== */
#workspaceContainer {
    position: relative;
    width: 100%;
}

#pastedNamesContainer {
    width: calc(100% - 20px);
    /* Subtract padding from total width */
    min-width: 100px;
    /* Add minimum width */
    max-width: 100%;
    /* Ensure it doesn't overflow */
    position: absolute;
    top: 10px;
    left: 0;
    background-color: rgba(99, 99, 99, 0.9);
    color: #d10909;
    padding: 8px 12px;
    border-radius: 5px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    /* Include padding in width calculation */
}

#pastedNames {
    display: inline;
    color: #e2dfdf;
    min-width: 50px;
    overflow-wrap: break-word;
    flex: 1;
    user-select: text; /* Allow text selection */
    /* Allow it to take remaining space */
    max-width: 100%;
    /* Adjust based on the space needed for "Gardiner:" label */
}

#searchContainer {
    position: relative;
    margin-top: 0px;
    /* Add enough margin to prevent overlap with pastedNamesContainer */
}


.dropdown {
    position: absolute;
    right: 13px;
    top: 8px;
    display: inline-block;
}

.dropdown-content {

    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0px 48px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.dropdown-content a {
    color: #0912da;
    padding: 6px 12px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
}

.dropdown-content a:hover {
    background-color: #905900;
}

.text-input-field {
    position: absolute;
    z-index: 10;
    padding: 8px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    background: #fff;
}

/* Help overlay styling */
.help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.help-content-frame {
    width: min(820px, 92vw);
    height: min(720px, 88vh);
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background-color: #1a1a1a;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

#tools {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: fit-content;
    max-width: calc(100vw - 40px);
    background-color: rgba(99, 99, 99, 0.95);
    padding: 4px 6px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

#tools .tool-group {
    flex-wrap: nowrap;
}

.tool-group {
    position: relative;
    display: flex;
    gap: 4px;
    align-items: center;
}

.tool-separator {
    width: 1px;
    height: 24px;
    background-color: #4a4a4a;
    margin: 0 8px;
}

#tools span {
    color: #ffffff;
    margin-right: 10px;
    font-weight: bold;
}

#tools button {
    padding: 0 8px;
    border: 1px solid #4a4a4a;
    background-color: #2a2a2a;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    min-width: 40px;
    /* Fixed height + flex centring so every tool button is the same height
       regardless of its glyph (emoji and hieroglyphs have taller line boxes
       than plain text/symbols). */
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Primary action: the hieroglyph-input (MdC widget) launcher looks like the
   other tool buttons but is highlighted with an orange border. */
#tools button#glyphWidgetBtn {
    border-color: #e8851a;
}

#tools button:hover {
    background-color: #3a3a3a;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#tools button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* KEYBOARD POPUP */
/* Base styles */
.keyboard-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.keyboard-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 400px;
    max-width: 90%;
    z-index: 1000;
}

/* Input area */
.input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.keyboard-input {
    font-family: 'Noto Sans Egyptian Hieroglyphs', 'Hieroglyphica Extended';
    width: 300px;
    padding: 8px;
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #fff;
    border-radius: 4px;
    resize: none;
    font-size: 18px;
}

.font-size-input {
    width: 60px;
    padding: 8px;
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #fff;
    border-radius: 4px;
    text-align: center;
}

/* Keyboard layout */
.keyboard-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.key {
    font-family: 'Noto Sans Egyptian Hieroglyphs', 'Hieroglyphica Extended';
    width: 30px;
    height: 30px;
    background-color: #2a2a2a;
    border: none;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
}

.divider {
    width: 100%;
    height: 2px;
    background-color: #ccc;
    margin: 4px 0;
}

.coptic-label span,
.section-label span {
    font-size: 0.8em;
    font-style: italic;
    color: #666;
    text-align: center;
    width: 100%;
}

.key:hover {
    background-color: #3a3a3a;
}

/* Dialog buttons */
.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.dialog-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.dialog-btn.cancel {
    background-color: #f44336;
    color: white;
}

.dialog-btn.add {
    background-color: #4CAF50;
    color: white;
}

/* (Duplicate .keyboard-overlay removed — see canonical def near line 395.) */
/* ==================== end keyboard =================== */
/* Ensure proper sizing for workspace elements */
.workspace-wrapper {
    flex: 1;
    display: flex;
    height: 100%;
    width: 100%;
    /* Ensure full width */
}

.workspace-container {
    position: relative;
    flex: 1;
    min-height: 500px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    overflow: hidden;
    padding: 0;
}

.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.background-image {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    display: none;
    transition: transform 0.2s, opacity 0.2s;
}

.main-canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Scoped to #tools so width/height/padding outrank the generic
   `#tools button` rule (higher specificity) — the donate button stays big. */
#tools .rainbow-donate {
    display: grid;
    /* Using grid for perfect centering */
    place-items: center;
    /* Centers in both directions */
    padding: 0;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    width: 50px;
    height: 50px;
    line-height: 1;
    /* Prevents line-height from affecting centering */
}

.rainbow-donate span {
    display: block;
    /* Changed to block */
    background: linear-gradient(to right,
            #ff0000,
            #ffff00,
            #00ff00,
            #00ffff,
            #ff00ff,
            #ff0000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 2s linear infinite;
    background-size: 200% auto;
    text-align: center;
    /* Center the text inside span */
}

@keyframes rainbow {
    0% {
        background-position: 0 center;
    }

    100% {
        background-position: -200% center;
    }
}

.hidden-input {
    display: none;
}

/* Compact slider controls */
.slider-controls {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.slider-group {
    display: flex;
    align-items: center;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.slider-group label {
    font-size: 0.9em;
    color: #666;
}

.compact-slider {
    height: 50px;
    width: 6px;
}

/* Thumb styles for both browsers */
.compact-slider::-webkit-slider-thumb,
.compact-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #666;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Hover effect */
.compact-slider:hover::-webkit-slider-thumb,
.compact-slider:hover::-moz-range-thumb {
    background: #444;
}

.slider-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.slider-label {
    font-weight: bold;
    min-width: 10px;
}

.compact-slider {
    width: 70px;
    height: 6px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 3px;
    outline: none;
}

.compact-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.slider-value {
    min-width: 40px;
    text-align: right;
    font-family: monospace;
}

/* Save As buttons and submenu */
.workspace-actions {
    display: flex;
    position: relative;
    /* Ensure the submenu is positioned relative to this container */
    gap: 5px;
}

.action-btn {
    padding: 6px 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn:hover {
    background: #0056b3;
}

.save-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
    z-index: 100;
    padding: 2px 2px;
    /* Reduced vertical padding */
    border-radius: 4px;
    bottom: 100%;
    left: 0;
    /* margin-bottom: 5px; */
}

/* Scoped under #tools so it outranks the generic `#tools button` rule and the
   dropdown items keep their left-aligned, auto-height list layout (the toolbar
   fixed-height + flex-centring must not leak into this menu). */
#tools .save-menu button {
    padding: 8px 10px;
    /* Adjusted padding */
    text-align: left;
    width: 100%;
    height: auto;
    min-width: 0;
    display: block;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px !important;
}

.save-menu button:hover {
    background: #f0f0f0;
}


.hidden {
    display: none;
}


/* styles for Dictionary search */
.search-row {
    display: flex;
    gap: 5px;
    width: 100%;
    margin: 0;
    margin-bottom: 5px
}

.search-input {
    flex: 1;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #1a1a1a;
    color: white;
    min-width: 0;
    /* Prevents flex item from overflowing */
}

.search-button {
    /* padding: 8px px; */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.search-button:hover {
    background-color: #45a049;
}

/* Result container styling */
.result-container {
    flex: 1;
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #b5a9a9;
    border-radius: 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Required for Firefox */
    max-height: 100%;
    /* Prevent overflow */
}

#secondarySearch {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Required for Firefox */
}

/* Adjust the overall container */
#searchContainer {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Highlight styling for Dictionary results */
.highlight {
    background-color: #ffeb3b;
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}
#resultDisplay {
  user-select: text;
  -webkit-user-select: text;
}
.gardiner-highlight {
    background-color: #ffeb3b;
    /* Light yellow */
}

.hieroglyph-highlight {
    background-color: #698faa57;
    /* Light blue */
}

/* Result styling */
.result-header {
    color: #fff;
    font-weight: bold;
    margin-bottom: 1rem;
    padding: 8px;
    background-color: #2a2a2a;
    border-radius: 4px;
}

.result-matches {
    color: #e0d8c8;
    padding: 8px;
}

.result-separator {
    border: 0;
    border-top: 1px solid #444;
}

time {
    color: #d68a8a;
}

/* Existing styles for large text */
.large-text {
    font-size: 2em;
    font-weight: normal;
}

/* (Duplicate .file-upload-row / .upload-button / .file-status removed — see canonical defs near line 181.) */

.search-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Media query for minimum width support */
@media screen and (max-width: 1200px) {
    #searchContainer {
        width: var(--palette-w, 300px);
    }
}

/* Right-click context menu shown over the canvas. Replaces the browser's
   default menu, whose "Save image" / "Copy image" entries only see the
   Fabric upper-canvas (mostly transparent) and miss the background image. */
.canvas-ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 170px;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}
.canvas-ctx-menu.hidden { display: none; }
.canvas-ctx-menu button {
    background: transparent;
    color: #ddd;
    border: none;
    padding: 7px 14px;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.canvas-ctx-menu button:hover { background: #2f2f2f; color: #fff; }

/* Brief confirmation toast for clipboard copy etc. */
#canvasToast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20, 20, 20, 0.92);
    color: #e6d4b8;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #8a5c2b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 10001;
}
#canvasToast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}