/* --- Globale Variablen & Reset --- */
:root {
    /* VS Code Design Tokens */
    --bg-main: #1e1e1e;
    /* Main background */
    --sidebar-bg: #10100F;
    /* Activity Bar background */
    --pane-bg: #252526;
    /* Explorer / Side Bar background */
    --pane-header-bg: #252526;
    /* Header background */
    --accent-color: #007acc;
    /* VS Code Blue */
    --text-main: #cccccc;
    /* Dark theme text */
    --text-muted: #858585;
    /* Dimmed text */
    --border-color: #3c3c3c;
    /* Border color */
    --gutter-bg: #2a2a2b;
    /* Gutter background */
    --gutter-hover: #333333;

    /* Dark Theme for Editors (Obsidian Style) */
    --editor-bg: #1e1e1e;
    --editor-text: #dcddde;
    --editor-border: #303030;
    --editor-header: #262626;
    --editor-active-bg: #2d2d2d;
}

/* --- VS Code Style Scrollbars --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(121, 121, 121, 0.4);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7);
    background-clip: content-box;
}

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


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--text-main);
    background-color: var(--bg-main);
    color-scheme: dark;
}

body.is-dragging iframe {
    pointer-events: none;
}

select option {
    background-color: #252526 !important;
    color: #ffffff !important;
}



.app-wrapper {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}


/* --- Main Menu (Left Sidebar) --- */
.main-menu {
    width: 50px;
    /* Slimmer Like VS Code */
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
}

/* --- COST EDITOR TABS --- */
.cost-editor-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.cost-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s;
}

.cost-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.cost-tab-btn.active {
    background: var(--accent-color);
    color: white;
}

.cost-tab-view {
    display: none;
}

.cost-tab-view.active {
    display: block;
}

.estimates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.estimates-header h4 {
    margin: 0;
}

.estimates-table-wrapper {
    overflow-x: auto;
}

#estimates-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

#estimates-list-table th, #estimates-list-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#estimates-list-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
}

#estimates-list-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.estimate-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.estimate-detail-row .label {
    color: var(--text-muted);
}

.estimate-detail-row .comment {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--accent-color);
    margin-top: 4px;
}

.circular-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1.5rem;
    color: var(--text-muted);
    border-radius: 0;
    /* Square icons like VS Code Activity Bar */
}

.circular-icon.active,
.circular-icon:hover {
    color: white;
}

.circular-icon.active {
    border-left: 2px solid white;
}

.app-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}


.user-icon {
    color: var(--text-muted);
}


/* --- Remote Editing Indicator --- */
.remote-editing {
    position: relative;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
    animation: pulse-remote 2s infinite;
}

@keyframes pulse-remote {
    0% { outline-color: var(--accent-color); opacity: 1; }
    50% { outline-color: transparent; opacity: 0.8; }
    100% { outline-color: var(--accent-color); opacity: 1; }
}

.remote-user-badge {
    position: absolute;
    top: -20px;
    right: 0;
    background: var(--accent-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 100;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- Tree Styles Fixes --- */
.todo-done span::after {
    content: ' ✓';
    color: #10b981;
    font-weight: bold;
    font-size: 0.8rem;
    margin-left: 5px;
}

.todo-pending span::after {
    content: ' ●';
    color: #f59e0b;
    font-size: 0.8rem;
    margin-left: 5px;
}

/* --- Splitter Container --- */
.splitter-container {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    background: var(--bg-main);
}

.split-pane {
    display: flex;
    flex-direction: column;
    background: var(--pane-bg);
    height: 100%;
    overflow: hidden;
}

.floating-pane {
    display: none !important;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.andocker-mode-controller,
.three-d-mode-controller {
    display: flex;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px;
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
    background: var(--accent-color);
    color: white;
}

.context-btn[data-context="3d-viewer"].active i {
    color: #3498db;
}

.pane-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--pane-header-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 35px;
}

.pane-header h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#new-project-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#new-project-btn:hover {
    background: #3c3c3c;
    color: white;
}

.pane-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pane-close-btn:hover {
    background: #3c3c3c;
    color: white;
}

.pane-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pane-action-btn.success {
    color: #10b981;
}

.pane-action-btn.success:hover {
    background: #10b98122;
}

.pane-action-btn.danger {
    color: #ef4444;
}

.pane-action-btn.danger:hover {
    background: #ef444422;
}

.pane-content {
    flex-grow: 1;
    overflow: auto;
    position: relative;
    padding: 0;
    /* Let content handle padding */
}

/* Split.js Gutter Styling */
.gutter {
    background-color: var(--gutter-bg);
    background-repeat: no-repeat;
    background-position: center;
    position: relative; /* Base for centering pseudo-element drag indicator */
}

.gutter:hover {
    background-color: var(--accent-color);
    /* Highlight color like VS Code */
}


.gutter.gutter-horizontal {
    cursor: col-resize;
    width: 6px !important;
    border-right: 1px solid var(--border-color) !important;
}

.gutter.gutter-horizontal.last-gutter {
    border-right: none !important;
}

/* Visueller Drag-Indikator (3 feine vertikale Punkte) */
.gutter.gutter-horizontal::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    background-image: radial-gradient(circle, var(--text-muted) 0.8px, transparent 1.2px);
    background-size: 100% 4px;
    background-repeat: repeat-y;
    opacity: 0.6;
    transition: opacity 0.2s;
    pointer-events: none; /* Klicks durchlassen */
}

.gutter.gutter-horizontal:hover::after {
    background-image: radial-gradient(circle, #ffffff 0.8px, transparent 1.2px);
    opacity: 1;
}

/* --- Tool Bar (Right Sidebar) --- */
.tool-bar {
    width: 50px;
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 8px;
    flex-shrink: 0;
}

.tool-bar button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.tool-bar button:hover {
    background: #3c3c3c;
    color: white;
}

.tool-bar hr {
    width: 30px;
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
}


/* --- Specific Pane Styles --- */
#project-list {
    list-style: none;
}

#project-list li {
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#project-list li:hover {
    background: #2a2d2e;
}

#project-list li.active {
    background: #37373d;
    color: white;
}


.header-status {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

#save-indicator {
    opacity: 0.6;
}

.editor-container {
    padding: 0;
    /* Remove padding to let Quill fill */
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

#editor {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ql-container {
    position: relative !important;
    font-size: 16px !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-grow: 1;
    overflow: hidden;
}

.ql-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--editor-border) !important;
    background: var(--editor-header) !important;
}

/* Quill Dark Mode Overrides */
.ql-snow .ql-stroke {
    stroke: #b0b0b0 !important;
}

.ql-snow .ql-fill {
    fill: #b0b0b0 !important;
}

.ql-snow .ql-picker {
    color: #b0b0b0 !important;
}

.ql-snow .ql-picker-options {
    background-color: var(--editor-header) !important;
    border-color: var(--editor-border) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke {
    stroke: var(--accent-color) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill {
    fill: var(--accent-color) !important;
}

.ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--accent-color) !important;
}

.ql-editor {
    color: var(--editor-text);
    background-color: var(--editor-bg);
    flex-grow: 1;
    overflow-y: auto !important;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3 {
    color: #ffffff;
}

.ql-editor a {
    color: var(--accent-color);
}






#editor-stats {
    padding: 8px 16px;
    background: var(--editor-header);
    border-top: 1px solid var(--editor-border);
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--editor-text);
    opacity: 0.8;
}




#editor-stats span {
    font-weight: bold;
    color: var(--accent-color);
}


/* --- Context Dialogs Layout --- */
.context-dialogs-wrapper {
    display: grid;
    grid-template-columns: 50px auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--pane-bg);
}

.context-dialogs-switcher {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 15px;
    z-index: 10;
}


.context-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.context-btn:hover {
    color: white;
}

.context-btn.active {
    color: white;
    background: var(--pane-bg);
}



.context-dialogs-container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
}

.context-dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background: var(--editor-bg);
    color: var(--editor-text);
}


.context-dialog.active {
    display: flex;
}

.andocker-iframe-container,
.manual-iframe-container {
    flex-grow: 1;
    overflow: hidden;
}

/* --- Internal Chat Styles --- */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--editor-bg);
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid var(--editor-border);
    display: flex;
    gap: 10px;
    background: var(--editor-header);
}

.chat-input-area input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid var(--editor-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--editor-bg);
    color: var(--editor-text);
}


.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
}

.message.system {
    align-self: center;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 0.85rem;
    text-align: center;
    border-radius: 20px;
    font-weight: 500;
}

.message.user {
    align-self: flex-end;
    background: var(--accent-color);
    color: white;
    border-bottom-right-radius: 2px;
}

.message.assistant {
    align-self: flex-start;
    background: #f1f5f9;
    color: #000;
    border-bottom-left-radius: 2px;
    border: 1px solid #cbd5e1;
}

.delete-msg-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message:hover .delete-msg-btn {
    display: flex;
}

.edit-msg-input {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 5px;
    font-family: inherit;
    font-size: inherit;
    resize: vertical;
}

.chat-input-area input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.chat-input-area button {
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--editor-bg, #1e293b);
}

.chat-input-area textarea {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: none;
    max-height: 150px;
    min-height: 38px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input-area textarea:focus {
    border-color: var(--accent-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.chat-editor-toggle-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.chat-editor-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #38bdf8 !important;
}
.chat-editor-toggle-btn.active {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.chat-quill-wrapper {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin: 8px 12px 4px 12px;
    overflow: hidden;
}
.chat-quill-wrapper .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
}
.chat-quill-wrapper .ql-toolbar .ql-stroke {
    stroke: #cbd5e1;
}
.chat-quill-wrapper .ql-toolbar .ql-fill {
    fill: #cbd5e1;
}
.chat-quill-wrapper .ql-toolbar .ql-picker {
    color: #cbd5e1;
}
.chat-quill-wrapper .ql-toolbar button:hover .ql-stroke,
.chat-quill-wrapper .ql-toolbar button.ql-active .ql-stroke {
    stroke: #38bdf8;
}
.chat-quill-wrapper .ql-toolbar button:hover .ql-fill,
.chat-quill-wrapper .ql-toolbar button.ql-active .ql-fill {
    fill: #38bdf8;
}
.chat-quill-wrapper .ql-container.ql-snow {
    border: none;
    min-height: 80px;
    max-height: 180px;
    overflow-y: auto;
    color: #f8fafc;
    font-size: 0.9rem;
}
.chat-quill-wrapper .ql-editor {
    min-height: 80px;
    padding: 8px 12px;
}
.chat-quill-wrapper .ql-editor.ql-blank::before {
    color: #64748b;
    font-style: normal;
}

/* Multiline & HTML Message Formatting */
.message .content,
.message .text,
.message .text-content {
    white-space: pre-wrap;
    word-break: break-word;
}
.message .content p,
.message .text p,
.message .text-content p {
    margin: 0 0 6px 0;
}
.message .content p:last-child,
.message .text p:last-child,
.message .text-content p:last-child {
    margin-bottom: 0;
}
.message .content ul, .message .content ol,
.message .text ul, .message .text ol,
.message .text-content ul, .message .text-content ol {
    margin: 4px 0 6px 18px;
    padding: 0;
}
.message .content code, .message .text code, .message .text-content code {
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
}
.message .content pre, .message .text pre, .message .text-content pre {
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.85em;
    margin: 6px 0;
}

.chat-attach-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-attach-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #38bdf8 !important;
}

.chat-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(56, 189, 248, 0.12);
    border-left: 3px solid #38bdf8;
    font-size: 0.8rem;
    color: #e2e8f0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.chat-reply-bar .reply-info {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chat-reply-bar .cancel-reply-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
}
.chat-reply-bar .cancel-reply-btn:hover {
    color: #ef4444;
}

.chat-staged-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.staged-att-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #f1f5f9;
}
.staged-att-item img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}
.staged-att-item .remove-staged-btn {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Reply Quote inside Message - Maximum Readability & High Contrast */
.message-reply-quote {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3.5px solid #38bdf8;
    padding: 7px 11px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.message-reply-quote:hover {
    background: rgba(0, 0, 0, 0.35);
}
.reply-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 700;
}
.reply-quote-sender {
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
}
.reply-quote-time-diff {
    font-size: 0.7rem;
    background: rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
    padding: 1.5px 7px;
    border-radius: 10px;
    font-weight: 700;
}
.reply-quote-text {
    color: #f1f5f9;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* High Contrast rules for OWN / USER blue message bubbles */
.message.user .message-reply-quote,
.message.own .message-reply-quote {
    background: rgba(0, 0, 0, 0.35);
    border-left: 3.5px solid #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.message.user .message-reply-quote:hover,
.message.own .message-reply-quote:hover {
    background: rgba(0, 0, 0, 0.45);
}
.message.user .reply-quote-sender,
.message.own .reply-quote-sender {
    color: #93c5fd;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.message.user .reply-quote-time-diff,
.message.own .reply-quote-time-diff {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-weight: 700;
}
.message.user .reply-quote-text,
.message.own .reply-quote-text {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.reply-msg-btn {
    position: absolute;
    top: -8px;
    right: 18px;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message:hover .reply-msg-btn {
    display: flex;
}

/* Chat Message Attachments */
.chat-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.chat-msg-thumb-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background: #0f172a;
}
.chat-msg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}
.chat-msg-thumb-wrapper:hover .chat-msg-thumb {
    transform: scale(1.05);
}
.chat-msg-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    color: #ffffff;
    font-size: 1.8rem;
    transition: background 0.2s;
}
.chat-msg-thumb-wrapper:hover .chat-msg-video-overlay {
    background: rgba(0,0,0,0.1);
}
.chat-msg-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    transition: background 0.2s;
}
.chat-msg-file-badge:hover {
    background: rgba(255,255,255,0.2);
}

/* Media Viewer Modal */
.media-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.media-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}
.media-viewer-container {
    position: relative;
    z-index: 10001;
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
}
.media-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.8);
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.media-viewer-title {
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.media-viewer-counter {
    color: #94a3b8;
    font-size: 0.85rem;
}
.media-viewer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.media-viewer-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
    text-decoration: none;
}
.media-viewer-btn:hover {
    background: rgba(255,255,255,0.25);
}
.media-viewer-body {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
}
.media-viewer-content-wrapper {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.media-viewer-element {
    max-width: 85vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.media-viewer-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10002;
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.2s;
}
.media-viewer-nav-btn:hover {
    background: rgba(56, 189, 248, 0.8);
}
.media-viewer-nav-btn.prev { left: 20px; }
.media-viewer-nav-btn.next { right: 20px; }
.chat-input-area button:hover {
    background: #2563eb;
}

/* --- TODO Dummy Styles --- */
.dummy-todo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    text-align: center;
    padding: 40px;
}

/* --- TODO & Stopwatch Styles --- */
.todo-stopwatch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    padding: 20px;
}

.stopwatch-time-display {
    font-size: 3rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--text-main);
}

.stopwatch-btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stopwatch-btn.start {
    background-color: #10b981;
    color: white;
}

.stopwatch-btn.stop {
    background-color: #ef4444;
    color: white;
}

.stopwatch-status {
    font-size: 0.9rem;
    color: #333;
}

.todo-sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
    background: var(--editor-bg);
}

.todo-config-container {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.todo-config-container h4,
.todo-stopwatch-container h4,
.manual-time-container h4 {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.todo-config-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-group-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.field-group-horizontal label {
    font-size: 0.85rem;
    color: var(--editor-text);
}

.field-group-horizontal select {
    background: var(--editor-header);
    border: 1px solid var(--editor-border);
    color: var(--editor-text);
    padding: 4px 8px;
    border-radius: 4px;
}

.todo-stopwatch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 300px;
    gap: 20px;
    padding: 20px;
    border-right: 1px solid var(--border-color);
}

.manual-time-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-width: 300px;
}

.manual-time-container h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.manual-time-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-group label {
    font-size: 0.8rem;
    color: var(--editor-text) !important;
    font-weight: 600;
}

.field-group input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--editor-bg);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-main) !important;
    color-scheme: dark;
}

.field-group input::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.7;
    cursor: pointer;
}

.field-group input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.field-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.manual-entry-btn {
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.manual-entry-btn:hover {
    background-color: #2563eb;
}

/* Hourglass icon for tree nodes */
ol.tree li.has-timer span::after {
    content: "\f252";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    color: #f59e0b;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}


/* --- Icon Menu --- */
.icon-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.icon-menu button {
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.icon-menu button:hover {
    background-color: #e0e0e0;
}

.icon-menu hr {
    width: 80%;
    border: none;
    border-top: 1px solid #ccc;
    margin: 5px 0;
}

/* --- TreeView Basis-Stile (Wiederhergestellt) --- */
ol.tree {
    position: absolute;
    list-style: none;
    line-height: 1.5;
    margin: 0;
    padding: 0.25em 0.25em 2em 0.25em;
    width: 100%;
    min-height: 100%;
}

ol.tree * {
    -webkit-user-select: none;
    user-select: none;
}

ol.tree.drop-inside:before {
    position: absolute;
    content: "";
    border-top: 1px solid #888;
    left: 0.25em;
    right: 0.25em;
    top: 0.25em;
}

ol.tree ol.children {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 11px;
}



ol.tree ol:last-of-type.drop-below {
    border-bottom: 1px solid #888;
    padding-bottom: 0;
}

ol.tree li.item,
ol.tree li.group {
    background-clip: border-box;
    cursor: default;
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    min-height: 28px;
    padding: 2px 4px;
    position: relative;
    width: fit-content;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

ol.tree li.item>.icon,
ol.tree li.group>.icon,
ol.tree li.item>.toggle,
ol.tree li.group>.toggle {
    margin: -1px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* Verhindert, dass Icons schrumpfen */
}

ol.tree li.item > span,
ol.tree li.group > span {
    align-self: center;
    padding: 0.25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

ol.tree li.item:hover,
ol.tree li.group:hover {
    background-color: #2a2d2e;
}


ol.tree li.item.drop-above,
ol.tree li.group.drop-above {
    border-top: 1px solid #888;
}

ol.tree li.item.drop-inside,
ol.tree li.group.drop-inside {
    border: 1px solid #888;
}

ol.tree li.item.selected,
ol.tree li.group.selected {
    background: #37373d;
    color: white;
}


ol.tree li.item>.icon {
    background-image: url("item.svg");
}

ol.tree li.item.drop-below {
    border-bottom: 1px solid #888;
}

ol.tree li.group {
    color: var(--text-main);
}


ol.tree li.group>.toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cccccc'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: 0.7;
    transition: transform 0.1s ease;
}

ol.tree li.group>.toggle:hover {
    opacity: 1;
}



ol.tree li.group.drop-below+ol {
    border-bottom: 1px solid #888;
}

ol.tree li.group.is-empty>.toggle {
    visibility: hidden;
    pointer-events: none;
}

ol.tree li.group.drop-below+ol:empty {
    margin-top: -1px;
    pointer-events: none;
}

ol.tree li.group.collapsed>.toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cccccc'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}



ol.tree li.group.collapsed+ol>ol,
ol.tree li.group.collapsed+ol>li {
    display: none;
}


/* --- Node Content Type Stile --- */
.content_type_Container {
    border-left: var(--content-node-border-size) solid var(--content-node-color-Container);
}

.content_type_Label {
    border-left: var(--content-node-border-size) solid var(--content-node-color-Label);
}

.content_type_Input {
    border-left: var(--content-node-border-size) solid var(--content-node-color-Input);
}

.content_type_Button {
    border-left: var(--content-node-border-size) solid var(--content-node-color-Button);
}

.content_type_HTML {
    border-left: var(--content-node-border-size) solid var(--content-node-color-HTML);
}

.content_type_Iframe {
    border-left: var(--content-node-border-size) solid var(--content-node-color-Iframe);
}

.content_type_PropContainer {
    border-left: var(--content-prop-node-border-size) solid var(--content-node-color-PropContainer);
}

.content_type_PropObject {
    border-left: var(--content-prop-node-border-size) solid var(--content-node-color-PropObject);
}

.content_type_PropList {
    border-left: var(--content-prop-node-border-size) solid var(--content-node-color-PropList);
}

.content_type_PropNumber {
    border-left: var(--content-prop-node-border-size) solid var(--content-node-color-PropNumber);
}

.content_type_PropString {
    border-left: var(--content-prop-node-border-size) solid var(--content-node-color-PropString);
}


/* --- Stile für FileSystem Node Types --- */
li[class*="fstype-"] span::before {
    font-weight: 900;
    /* Default auf Solid setzen */
    margin-right: 8px;
    width: 20px;
    display: inline-block;
    text-align: center;
}

/* KORREKTUR: Zuweisung der korrekten Font Family pro Icon-Typ */

/* Typen aus "Font Awesome 6 Free" (Solid Style) */
.fstype-Folder span::before,
.fstype-hotel-contract span::before,
.fstype-txt span::before,
.fstype-pdf span::before,
.fstype-docx span::before,
.fstype-xlsx span::before,
.fstype-png span::before,
.fstype-jpg span::before,
.fstype-Reisebaustein span::before,
.fstype-Connector span::before,
.fstype-Export span::before,
.fstype-KalkulatorEmbed span::before,
.fstype-Buchung span::before,
.fstype-Formel span::before,
.fstype-node_form span::before,
.fstype-Tour span::before,
.fstype-TourStation span::before {
    font-family: "Font Awesome 6 Free";
}

.fstype-Tour span::before {
    content: "\f4d7";
    color: #4facfe;
}

.fstype-TourStation span::before {
    content: "\f3c5";
    color: #f43f5e;
}

/* Typen aus "Font Awesome 6 Brands" (Eigene Schriftart) */
.fstype-js span::before,
.fstype-css span::before,
.fstype-html span::before,
.fstype-gdrive span::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    /* Brand-Icons haben eine normale Schriftstärke */
}

/* Unicode-Werte und Farben bleiben gleich */
.fstype-Folder span::before {
    content: "\f07c";
    color: #ffb703;
}

.fstype-hotel-contract span::before {
    content: "\f594";
    color: #9c27b0;
}

.fstype-txt span::before {
    content: "\f15c";
    color: #555;
}

.fstype-js span::before {
    content: "\f3b8";
    color: #000;
}

.fstype-css span::before {
    content: "\f38b"; /* fa-css3-alt */
    color: #264de4;
}
.fstype-html span::before {
    content: "\f13b"; /* fa-html5 */
    color: #e34f26;
}
.fstype-pdf span::before {
    content: "\f1c1"; /* fa-file-pdf */
    color: #f40f02;
}
.fstype-docx span::before {
    content: "\f1c2"; /* fa-file-word */
    color: #2b579a;
}
.fstype-xlsx span::before {
    content: "\f1c3"; /* fa-file-excel */
    color: #217346;
}
.fstype-png span::before,
.fstype-jpg span::before {
    content: "\f1c5"; /* fa-file-image */
    color: #3b82f6;
}
.fstype-gdrive span::before {
    content: "\f3aa"; /* fa-google-drive */
    color: #1da462;
}

.fstype-Reisebaustein span::before {
    content: "\f1b2"; /* fa-cube */
    color: #00bcd4;
}

.fstype-Connector span::before {
    content: "\f0c1"; /* fa-link */
    color: #5398ff;
}

.fstype-Export span::before {
    content: "\f56e"; /* fa-file-export */
    color: #e67e22;
}

.fstype-KalkulatorEmbed span::before {
    content: "\f121"; /* fa-code */
    color: #9b59b6;
}

.fstype-Buchung span::before {
    content: "\f07a"; /* fa-shopping-cart */
    color: #2ecc71;
}

.fstype-Formel span::before {
    content: "\f698"; /* fa-square-root-variable */
    color: #e74c3c;
}

.fstype-node_form span::before {
    content: "\f0b1"; /* fa-briefcase */
    color: #a855f7;
}


/* --- Kontextmenü Stile --- */
.context-menu {
    position: absolute;
    background: var(--pane-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 4px 0;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 2000;
    margin: 0;
    border-radius: 3px;
    font-size: 0.85rem;
}

.context-menu li {
    padding: 6px 16px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    /* Wichtig für Untermenüs */
    color: var(--text-main);
}

.context-menu li:hover {
    background: #004b72;
    /* VS Code blue-ish hover */
    color: white;
}

.context-menu li:hover i {
    color: white !important;
}

/* Untermenü-Stile */
.context-menu ul {
    display: none;
    position: absolute;
    left: 100%;
    top: -1px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--pane-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.context-menu li:hover>ul {
    display: block;
}

.context-menu .submenu-arrow::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cccccc'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.context-menu li:hover>.submenu-arrow::after {
    opacity: 1;
}


/* --- Modal & Sonstige Stile --- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--pane-bg);
    color: var(--text-main);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content h2 {
    margin-top: 0;
}

.modal-content textarea,
.modal-content input,
.modal-content select {
    width: 100%;
    background-color: var(--bg-main);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
}

.modal-content textarea {
    height: 120px;
    font-family: monospace;
    resize: vertical;
}

.modal-content label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

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

.modal-footer button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

#run-find-replace-btn {
    background-color: #4CAF50;
    color: white;
}

#close-modal-btn,
#close-export-modal-btn {
    background-color: #f44336;
    color: white;
}

#copy-ai-to-manual-btn {
    background-color: #6c757d;
    color: white;
    display: none;
    /* Standardmäßig unsichtbar */
}

#find-replace-status {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 20px;
    font-family: monospace;
}

#jsonFileInput {
    display: none;
}

/* Neue Stile für den Modus-Umschalter */
.mode-switcher {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.mode-switcher label {
    cursor: pointer;
}

#ai-inputs {
    display: none;
    /* Standardmäßig ausgeblendet */
}

#ai-prompt {
    height: 120px;
    /* Gleiche Höhe wie die anderen Textareas */
}

/* --- Stile für Export Modal --- */
.export-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.export-option-btn {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    background-color: #f9f9f9;
    transition: background-color 0.2s, border-color 0.2s;
    width: 100%;
    font-family: sans-serif;
    font-size: 1em;
}

.export-option-btn:hover {
    background-color: #f1f1f1;
    border-color: #999;
}

.export-option-btn i {
    font-size: 24px;
    margin-right: 15px;
    width: 30px;
    text-align: center;
    color: #337ab7;
}

.export-option-btn span {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

.export-option-btn small {
    display: block;
    color: #555;
    font-weight: normal;
    margin-top: 4px;
}

/* --- NEU: Stile für Google Drive Export --- */
#gdrive-export-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#gdrive-folder-selection {
    padding: 8px 12px;
    background-color: #e7f0fe;
    border: 1px solid #a9c7f5;
    border-radius: 5px;
    font-size: 0.9em;
}

#gdrive-folder-selection strong {
    margin-left: 5px;
    font-weight: bold;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .app-wrapper {
        flex-direction: row;
        overflow: hidden;
    }

    .main-menu {
        width: 50px !important;
        height: 100vh !important;
        height: 100dvh !important;
        flex-direction: column;
        padding: 10px 0;
        order: 2;
        /* Move to right */
        flex-shrink: 0;
        background: var(--sidebar-bg);
        z-index: 1000;
        justify-content: space-between;
        border-left: 1px solid var(--border-color);
    }



    .menu-middle {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .menu-top,
    .menu-bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .splitter-container {
        flex-direction: row;
        width: calc(100vw - 50px);
        height: 100vh;
        height: 100dvh;
        order: 1;
        position: relative;
    }



    .tool-bar {
        display: none !important;
    }

    .gutter {
        display: none !important;
    }

    /* Normal split-panes logic on mobile */
    .split-pane {
        display: none;
    }

    /* Tree Scroller is always background base on mobile */
    #tree-scroller {
        display: flex !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 1;
    }

    /* Floating Sidebars */
    #project-explorer,
    #editor-section,
    #mobile-tools-pane {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100vw - 50px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1900;
        background: var(--pane-bg);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
    }

    .floating-pane {
        display: flex !important;
    }


    #editor-section {
        background: var(--editor-bg);
        /* Keep editors light */
    }


    /* Active State */
    #project-explorer.pane-visible,
    #editor-section.pane-visible,
    #mobile-tools-pane.pane-visible {
        transform: translateX(0) !important;
    }

    /* Context area adjustments */
    .context-dialogs-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto;
    }

    .context-dialogs-switcher {
        flex-direction: row;
        width: 100%;
        height: 50px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        justify-content: center;
        padding: 0;
        gap: 15px;
    }


    .context-btn {
        width: 44px;
        height: 44px;
    }


    /* Tools List Styling */
    .mobile-tools-list {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 10px;
        overflow-y: auto;
    }

    .mobile-tool-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: #2a2d2e;
        cursor: pointer;
        gap: 15px;
        font-size: 0.95rem;
        color: var(--text-main);
        transition: background 0.2s;
        text-align: left;
    }

    .mobile-tool-item:active {
        background: #37373d;
    }


    .mobile-tool-item i {
        font-size: 1.2rem;
        width: 24px;
        text-align: center;
        color: var(--accent-color);
    }

    .mobile-tool-item hr {
        width: 100%;
        margin: 5px 0;
        border: none;
        border-top: 1px solid var(--border-color);
    }
}

/* Media Support in Editor */
.ql-editor img,
.ql-editor video,
.ql-editor audio {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
}

.ql-editor audio {
    width: 100%;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#new-project-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#new-project-btn:hover {
    background: #3c3c3c;
    color: white;
}

.project-list-separator {
    height: 1px;
    background: var(--border-color);
    margin: 8px 16px;
    opacity: 0.5;
    pointer-events: none;
}

/* Helpdesk & HelpChat Styling */
#helpdesk-pane {
    background: #1e1e1e;
}

.helpdesk-header {
    padding: 0 12px;
}

.helpdesk-tabs {
    display: flex;
    height: 100%;
}

.helpdesk-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0 15px;
    cursor: pointer;
    height: 35px;
    border-bottom: 2px solid transparent;
}

.helpdesk-tab.active {
    color: white;
    border-bottom-color: var(--accent-color);
}

.helpdesk-content {
    position: relative;
    background: #0f0f0f;
    /* Darker for HelpChat */
}

.helpdesk-view {
    display: none;
    height: 100%;
    width: 100%;
}

.helpdesk-view.active {
    display: block;
}

#help-chat-container {
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-chat-message {
    background: #252526;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #d4d4d4;
    animation: fadeIn 0.2s ease-out;
}

.msg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.7rem;
    opacity: 0.6;
}

.msg-time {
    font-family: monospace;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3D Scene Controller --- */
.threejs-controller {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.controller-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.controller-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.controller-btn:hover {
    background: var(--accent-color);
    transform: scale(1.05);
}

.controller-btn i {
    pointer-events: none;
}

.controller-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2px;
}

/* --- Attachments Dialog Styles --- */
.attachments-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.attachments-toolbar {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    background: var(--editor-header);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: var(--gutter-hover);
    border-color: var(--accent-color);
}

.toolbar-btn.danger {
    color: #ef4444;
}

.toolbar-btn.danger:hover {
    background: #ef444422;
    border-color: #ef4444;
}

.add-url-inline {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--pane-bg);
    overflow: hidden;
    margin-left: 5px;
    height: 30px;
}

#add-url-input {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 0 10px;
    font-size: 0.8rem;
    width: 180px;
}

#add-url-input:focus {
    outline: none;
}

#add-url-btn-inline {
    height: 100%;
    border: none;
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 10px;
    background: var(--editor-header);
    color: var(--accent-color);
}

#add-url-btn-inline:hover {
    background: var(--gutter-hover);
}

.attachments-list-view {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.attachment-item-wrapper {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--pane-bg);
    transition: all 0.2s;
    animation: fadeIn 0.3s ease-out;
}

.attachment-item-wrapper:hover {
    border-color: var(--accent-color);
}

.attachment-item {
    display: grid;
    grid-template-columns: 30px 48px 1fr 80px;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
}

.attachment-main-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.attachment-name-meta-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    overflow: hidden;
}

.attachment-meta-info-inline {
    display: flex;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.65rem;
    white-space: nowrap;
    opacity: 0.6;
}

.attachment-meta-item::after {
    content: " •";
    margin-left: 4px;
}

.attachment-meta-item:last-child::after {
    content: "";
}

.att-description {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 2px 0;
    width: 100%;
}

.att-description:focus {
    outline: none;
    border-bottom-color: var(--accent-color);
}

.attachment-tags-row {
    padding: 6px 15px 10px 93px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px dashed var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.attachment-tags-row i {
    font-size: 0.75rem;
    color: var(--accent-color);
    opacity: 0.7;
}

.att-tags {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    width: 100%;
}

.att-tags:focus {
    outline: none;
    color: var(--text-main);
}

.attachment-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}

.attachment-icon {
    font-size: 1.4rem;
    color: var(--text-muted);
}

.attachment-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.attachment-name {
    font-weight: normal;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.attachment-name:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.attachment-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.attachment-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.action-btn:hover {
    color: white;
    background: var(--gutter-hover);
}

.action-btn.copy-btn:hover {
    color: var(--accent-color);
}

.action-btn.delete-btn:hover {
    color: #ef4444;
}

/* Preview Grid Mode */
.attachments-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 15px;
}

.attachments-grid-view .attachment-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--pane-bg);
    text-align: center;
    gap: 12px;
    height: 100%;
}

.attachments-grid-view .attachment-thumbnail {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #111;
    border-radius: 6px;
}

.attachments-grid-view .attachment-icon {
    font-size: 3.5rem;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachments-grid-view .att-description {
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.8;
}

.attachments-grid-view .attachment-tags-row {
    padding: 0;
    border-top: none;
    background: transparent;
    justify-content: center;
}

.attachments-grid-view .att-tags.small {
    text-align: center;
    font-size: 0.7rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 15px;
    text-align: center;
}

.empty-state i {
    font-size: 3rem;
    opacity: 0.3;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.attachment-item {
    animation: fadeIn 0.3s ease-out;
}

/* Custom Dialog Modal Styling (Dark Design, Square Edges) */
.dialog-modal {
    max-width: 450px !important;
    background: #1e1e1e !important;
    /* VS Code Editior Background */
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    border-radius: 0 !important;
    padding: 25px !important;
}

#dialog-title {
    display: none;
    /* User wants no title */
}

.dialog-body {
    padding: 0 0 20px 0;
    line-height: 1.6;
    color: #ffffff !important;
    /* High contrast */
    font-size: 1rem;
}

.dialog-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: 5px;
}

.dialog-modal button {
    padding: 6px 20px;
    border-radius: 0 !important;
    /* Square edges */
    cursor: pointer;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    transition: all 0.1s;
    font-weight: normal;
    background: #333333;
    color: #cccccc;
}

#dialog-ok-btn {
    background: var(--accent-color) !important;
    color: white !important;
    border: none !important;
}

#dialog-ok-btn:hover {
    background: #008ae6 !important;
}

#dialog-cancel-btn {
    background: transparent;
    color: #cccccc;
}

#dialog-cancel-btn:hover {
    background: #444444;
}

/* --- Map Editor & Viewer Styles --- */

.map-config-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.map-config-container textarea {
    width: 100%;
    height: 100px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px;
    border-radius: 4px;
    resize: vertical;
}

.andocker-mode-controller,
.three-d-mode-controller,
.three-d-view-mode-controller,
.map-mode-controller {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mode-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.mode-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: transparent;
}

/* Advanced Marker Styling (Globally) */
.custom-map-marker {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.marker-pin {
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--accent-color);
    border-radius: 50% 50% 50% 0 !important;
    transform: rotate(-45deg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 4px solid white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 35px !important;
}

.marker-pin i {
    transform: rotate(45deg) !important;
    color: white !important;
    font-size: 25px !important;
    /* MEGA Größe */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.custom-map-marker::after {
    content: "" !important;
    width: 20px !important;
    height: 8px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    position: absolute !important;
    bottom: -6px !important;
    border-radius: 50% !important;
    filter: blur(2px) !important;
}

.tree li.is-station>span::before {
    content: var(--station-icon, "\f3c5") !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: var(--station-color, var(--accent-color)) !important;
    font-size: 0.9em;
}

.tree li.is-station.todo-pending>span::before {
    color: #ff9800;
    /* Amber for pending station */
}

/* Map Editor Disabled State */
.map-config-container.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.map-config-container.disabled-editor .field-group,
.map-config-container.disabled-editor .field-group-horizontal:nth-of-type(n+2) {
    opacity: 0.4;
    pointer-events: none;
}

.map-editor-status-msg {
    color: #ff9800;
    font-style: italic;
}

/* Icon Picker */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px);
    gap: 10px;
    max-height: 180px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

/* Custom Scrollbar for Picker */
.icon-picker-grid::-webkit-scrollbar {
    width: 6px;
}

.icon-picker-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

.icon-tile {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pane-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--text-color);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

.icon-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
    transform: scale(1.1);
    z-index: 2;
}

.icon-tile.active {
    background: rgba(var(--accent-color-rgb), 0.15);
    border-color: var(--accent-color);
    box-shadow: 0 0 12px var(--accent-color);
    color: var(--accent-color);
    border-width: 2px;
}

/* Ensure spellcheck underlines are visible and not skipped */
.ql-editor {
    text-decoration-skip-ink: none !important;
}

/* --- History Modal Styles --- */
#history-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

#history-modal .modal-content {
    background-color: var(--pane-bg);
    color: var(--text-main);
    max-height: 85vh;
    width: 650px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

#history-modal h2 {
    color: var(--text-main);
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

#history-list-container {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
    margin-top: 10px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text-main);
}

.history-table th, .history-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.history-table th {
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    position: sticky;
    top: 0;
    background: var(--pane-bg);
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.history-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

#history-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.restore-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s, transform 0.1s;
}

.restore-btn:hover {
    background: #005fa3;
    transform: translateY(-1px);
}

.history-icon-btn {
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    transition: color 0.2s;
}

.history-icon-btn:hover {
    color: var(--accent-color);
}

/* Remove focus outlines from tree containers */
ol.tree:focus,
#project-explorer:focus,
#tree-scroller:focus,
.tree-container:focus {
    outline: none !important;
}

/* Allover-Mode for Login Screen */
.modal-overlay.allover-mode { background-color: #111111 !important; z-index: 99999; backdrop-filter: none !important; opacity: 1 !important; }
.modal-overlay.allover-mode .modal-content { box-shadow: none !important; border: none !important; background: transparent !important; }
.modal-overlay.allover-mode #close-auth-modal-btn { display: none !important; }
/* --- Cost Editor Styles --- */
.cost-editor-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cost-config-group {
    background: var(--editor-header);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--editor-border);
}

.cost-input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.cost-input-row .field-group {
    flex: 1;
}

.cost-input-row input, .cost-input-row select {
    width: 100%;
    padding: 10px;
    background: var(--editor-bg);
    border: 1px solid var(--editor-border);
    color: var(--text-main);
    border-radius: 4px;
}

.cost-total-display {
    border-top: 1px dashed var(--border-color);
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cost-total-display label {
    font-weight: bold;
    color: var(--accent-color);
}

#cost-total-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.cost-children-section h4 {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.cost-table-wrapper {
    margin-bottom: 25px;
}

#cost-children-table {
    width: 100%;
    border-collapse: collapse;
}

#cost-children-table th, #cost-children-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--editor-border);
}

#cost-children-table th {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cost-chart-container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 20px;
}

#cost-pie-chart {
    max-width: 100%;
    max-height: 100%;
}

/* --- Tour Node & Map Improvements Styles --- */
.tree li.is-tour>span::before {
    content: "\f554" !important; /* fa-route */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: var(--tour-color, #007acc) !important;
    font-size: 0.9em;
}

/* Transport Mode Badge on the Map */
.transport-map-icon-badge {
    background-color: #1e1e1e;
    border: 2px solid #007acc;
    color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.transport-map-icon-badge:hover {
    transform: scale(1.2);
}

/* Map Editor Tabs */
.map-editor-tabs, .cost-editor-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #333);
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.15);
    padding: 0 10px;
}
.map-tab-btn, .cost-tab-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.map-tab-btn:hover, .cost-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.map-tab-btn.active, .cost-tab-btn.active {
    color: var(--accent-color, #007acc) !important;
    border-bottom-color: var(--accent-color, #007acc) !important;
    background: transparent;
}

.map-tab-view {
    display: none;
}
.map-tab-view.active {
    display: block;
}

/* Transport Picker Group */
.transport-picker-group {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.transport-btn {
    width: 36px;
    height: 36px;
    background: var(--input-bg, #252526);
    border: 1px solid var(--border-color, #3c3c3c);
    color: var(--text-muted, #cccccc);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s;
}
.transport-btn:hover {
    border-color: var(--accent-color, #007acc);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.transport-btn.active {
    background: var(--accent-color, #007acc) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 0 8px rgba(0, 122, 204, 0.5);
}

/* Table wrapper & custom tables for shapes */
.shapes-section h4, .area-children-section h4 {
    margin: 15px 0 8px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    font-weight: 700;
}
#shapes-list-table, #area-children-table, #tour-subtours-table {
    width: 100%;
    border-collapse: collapse;
}
#shapes-list-table th, #shapes-list-table td,
#area-children-table th, #area-children-table td,
#tour-subtours-table th, #tour-subtours-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #3c3c3c);
    font-size: 0.8rem;
    color: var(--text-main, #cccccc);
}
#shapes-list-table th, #area-children-table th, #tour-subtours-table th {
    font-weight: bold;
    color: var(--text-muted, #888);
}
#shapes-list-table tbody tr:hover, #area-children-table tbody tr:hover, #tour-subtours-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Map Node Type Select */
#map-node-type-select {
    width: 100%;
    padding: 8px;
    background: var(--input-bg, #252526);
    border: 1px solid var(--border-color, #3c3c3c);
    color: var(--text-main, #ffffff);
    border-radius: 4px;
    margin-top: 5px;
    font-size: 0.9rem;
    outline: none;
}
#map-node-type-select:focus {
    border-color: var(--accent-color, #007acc);
}

/* Hidden sub-panels */
#map-station-settings, #map-tour-settings {
    display: none;
}
#map-station-settings.active, #map-tour-settings.active {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.area-chart-container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
}
#area-pie-chart {
    max-width: 100%;
    max-height: 100%;
}

/* --- Connect-Agent Modal Styles --- */
.modal-tab-btn {
    transition: all 0.2s ease-in-out;
}
.modal-tab-btn:hover {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, 0.05);
}
.modal-tab-btn.active {
    color: var(--text-main) !important;
    border-bottom-color: var(--accent-color) !important;
}
#download-agent-workflow-btn {
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}
#download-agent-workflow-btn:hover {
    background-color: #0062a3 !important;
}
#download-agent-workflow-btn:active {
    transform: scale(0.98);
}
.modal-tab-content code {
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* --- Reisemanager Context-Editor Styles --- */
.reisemanager-container {
    background: var(--editor-bg);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rm-btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rm-btn.primary {
    background-color: var(--accent-color);
    color: white;
}

.rm-btn.primary:hover {
    background-color: #2563eb;
}

.rm-btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-size: 1rem;
}

.rm-btn-icon:hover {
    background: rgba(255, 255, 255, 0.05);
}

.rm-btn-icon.success {
    color: var(--accent-color);
}

.rm-btn-icon.danger {
    color: #ef4444;
}

.rm-table-wrapper {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 20px;
}

.rm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rm-table th {
    padding: 10px 12px;
    font-weight: 600;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.rm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.rm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.rm-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: inherit;
    box-sizing: border-box;
}

.rm-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.rm-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
}

.rm-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.rm-action-btn.delete-btn:hover,
.rm-action-btn.delete-room-btn:hover {
    color: #ef4444;
}

.rm-action-btn.save-edit-btn,
.rm-action-btn.save-edit-room-btn,
.rm-action-btn.save-new-btn,
.rm-action-btn.save-new-room-btn {
    color: var(--accent-color);
}

/* --- Connector Editor Styles --- */
.connector-view-container {
    background-color: var(--pane-bg);
    color: var(--text-main);
}

.tab-nav-btn {
    transition: all 0.2s ease-in-out;
}

.tab-nav-btn:hover {
    color: var(--text-main) !important;
}

.tab-nav-btn.active {
    font-weight: 600;
}

.connector-tab-content input,
.connector-tab-content select {
    border-color: var(--border-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
}

.connector-tab-content input:focus,
.connector-tab-content select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

/* Scrollbare Listen in zweispaltigem Content-Tab */
.reisen-list-container,
.unterkuenfte-list-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.reisen-list-container::-webkit-scrollbar,
.unterkuenfte-list-container::-webkit-scrollbar {
    width: 6px;
}

.reisen-list-container::-webkit-scrollbar-thumb,
.unterkuenfte-list-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.reisen-list-container div,
.unterkuenfte-list-container div {
    transition: background-color 0.15s ease-in-out;
}

.reisen-list-container div:hover,
.unterkuenfte-list-container div:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- Export Editor Styles --- */
.export-view-container {
    background-color: var(--pane-bg);
    color: var(--text-main);
}

.selectable-item {
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background-color 0.15s ease-in-out;
}

.selectable-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.selectable-item.selected {
    background-color: rgba(0, 122, 204, 0.25) !important;
    border-left: 3px solid var(--accent-color);
    padding-left: 7px;
}

/* --- Hiding panels/sidebar for simplified view (Briefing 011) --- */
.aite-mode #viewer-section, 
.aite-mode #helpdesk-pane, 
.aite-mode .tool-bar {
    display: none !important;
}
.aite-mode.show-viewer-enabled #viewer-section {
    display: flex !important;
}

/* Tree quick-add button - hidden by default, shown in AITE mode */
#tree-quick-add-btn {
    display: none;
}
.aite-mode #tree-quick-add-btn {
    display: inline-flex !important;
}

/* Switcher button order and visibility in AITE mode */
.aite-mode .context-btn[data-context="reisemanager"] { order: 1; }
.aite-mode .context-btn[data-context="editor"] { order: 2; }
.aite-mode .context-btn[data-context="attachments"] { order: 3; }
.aite-mode .context-btn[data-context="chat"] { order: 4; }

.aite-mode.show-viewer-enabled .context-btn[data-context="map-editor"] {
    display: inline-flex !important;
    order: 5;
}

.aite-mode .context-btn[data-context="todo"],
.aite-mode:not(.show-viewer-enabled) .context-btn[data-context="map-editor"],
.aite-mode .context-btn[data-context="cost-editor"] {
    display: none !important;
}

/* Drag & Drop Upload Styles for Attachments (Briefing 011 / Custom Adaptations) */
.attachments-container {
    position: relative;
}

.attachments-container .drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px dashed var(--accent-color);
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    transition: all 0.2s ease;
}

.attachments-container.drag-over .drop-overlay {
    display: flex;
}

.drop-overlay-content {
    text-align: center;
    color: var(--accent-color);
}

.drop-overlay-content i {
    font-size: 3.5rem;
    margin-bottom: 12px;
    animation: bounce-icon 1.5s infinite ease-in-out;
}

.drop-overlay-content p {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

@keyframes bounce-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Test Editor & Player Custom Styles --- */
.test-tab-btn {
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease;
}
.test-tab-btn:hover {
    color: #fff !important;
    border-bottom-color: #444 !important;
}
.test-tab-btn.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
}
.test-tab-view {
    display: none;
    height: 100%;
}
.test-tab-view.active {
    display: block;
}

/* Switch Toggle Styling */
.yalla-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.yalla-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.yalla-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444;
    transition: .3s;
    border-radius: 20px;
}
.yalla-switch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
.yalla-switch input:checked + .slider {
    background-color: #3b82f6;
}
.yalla-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Test Level Buttons */
.test-level-btn {
    transition: all 0.2s ease;
}
.test-level-btn:hover {
    color: #fff !important;
    background: #222 !important;
}
.test-level-btn.active {
    background: #3b82f6 !important;
    color: #fff !important;
}

/* --- IMAGE MARKER OVERLAYS & COMMENT EDITOR --- */
.image-container-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.image-container-wrapper img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

.comment-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: var(--accent-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    cursor: grab;
    transform: translate(-50%, -50%);
    z-index: 10;
    user-select: none;
    transition: transform 0.2s, background-color 0.2s;
}

.comment-marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background-color: #0098ff;
}

.comment-marker.highlighted {
    background-color: #eab308;
}

.comment-marker.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 1000;
}

/* Inline comment form */
.comment-form {
    position: absolute;
    transform: translate(-50%, 10px);
    background-color: var(--pane-bg);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 50;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-form textarea {
    width: 100%;
    background: #111;
    border: 1px solid var(--border-color);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 50px;
}

.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.comment-form button {
    padding: 5px 10px;
    border-radius: 4px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.comment-form button[type="submit"] {
    background: var(--accent-color);
    color: white;
}

.comment-form button.cancel-btn {
    background: #333;
    color: white;
}

/* Comment List Items in Editor */
.comment-item {
    background-color: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    position: relative;
    transition: background-color 0.2s;
}

.comment-item:hover {
    background-color: rgba(255,255,255,0.05);
}

.comment-item.highlighted {
    background-color: rgba(0, 122, 204, 0.1);
    border-left: 3px solid var(--accent-color);
    padding-left: 7px;
}

.comment-item-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.comment-item-content {
    flex-grow: 1;
}

.comment-item-text {
    font-size: 0.85rem;
    word-wrap: break-word;
    cursor: pointer;
    margin-right: 35px;
}

.comment-item-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 2px;
}

.comment-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    padding: 2px 4px;
}

.comment-action-btn:hover {
    color: white;
}

.comment-item-content textarea {
    width: 100%;
    background: #111;
    border: 1px solid var(--border-color);
    color: white;
    padding: 6px;
    font-size: 0.85rem;
    border-radius: 4px;
    resize: vertical;
}

/* SVG Line drawing */
.arrow-line {
    stroke: #007acc;
    stroke-width: 4;
    cursor: pointer;
    pointer-events: stroke;
}

.arrow-line.highlighted {
    stroke: #eab308;
}

.arrow-handle {
    fill: white;
    stroke: #007acc;
    stroke-width: 2.5;
    cursor: move;
    pointer-events: fill;
}

.arrow-handle:hover, .arrow-handle.dragging {
    fill: #eab308;
    stroke: #eab308;
    r: 7;
}

.modal-hidden {
    display: none !important;
}

/* Context menu on images */
.img-context-menu {
    position: absolute;
    background: var(--pane-bg);
    border: 1px solid var(--border-color);
    padding: 4px 0;
    border-radius: 4px;
    list-style: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 1000;
}

.img-context-menu li {
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-main);
}

.img-context-menu li:hover {
    background: var(--accent-color);
    color: white;
}

/* Toggle markers button */
.markers-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(16, 16, 15, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 50;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(2px);
}

.markers-toggle-btn:hover {
    background: var(--pane-bg);
    color: white;
}

/* Minimap markers styling */
.minimap-marker {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00f3ff;
    border: 1px solid #000000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0, 243, 255, 0.8);
    pointer-events: none;
}

/* Quill Image Comment Overlays */
.quill-image-overlay {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed rgba(59, 130, 246, 0.4);
    pointer-events: auto;
    cursor: pointer;
}

.quill-image-overlay:hover {
    border-color: rgba(59, 130, 246, 0.8);
    background-color: rgba(59, 130, 246, 0.03);
}

.quill-image-overlay .comment-marker {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-width: 1.5px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.quill-image-overlay svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Image Comment Badge (Indicator) */
.image-comment-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--accent-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 20;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.image-comment-badge:hover {
    transform: scale(1.05);
    background-color: #0098ff;
}

/* Image comment nodes in tree view style */
li.has-imagemarker span::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f03e" !important; /* fa-image */
    color: #3b82f6 !important;
}

/* Custom map marker bounce animation */
@keyframes marker-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes shadow-scale {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.6);
        opacity: 0.4;
    }
}

.custom-map-marker.bounce-active .marker-pin {
    animation: marker-bounce 0.8s infinite ease-in-out;
}

.custom-map-marker.bounce-active::after {
    animation: shadow-scale 0.8s infinite ease-in-out;
}

/* Hover path highlight in tree view */
.hover-path-highlight > span {
    background-color: rgba(0, 122, 204, 0.3) !important;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Google Maps Autocomplete container z-index and dark theme fix */
.pac-container {
    z-index: 10000 !important;
    background-color: var(--input-bg, #252526) !important;
    border: 1px solid var(--border-color, #3c3c3c) !important;
    color: var(--text-main, #ffffff) !important;
    font-family: inherit !important;
}

.pac-item {
    border-top: 1px solid var(--border-color, #3c3c3c) !important;
    color: var(--text-main, #ffffff) !important;
    padding: 8px 10px !important;
}

.pac-item:hover {
    background-color: var(--sidebar-bg-active, #2d2d2d) !important;
}

.pac-item-query {
    color: var(--text-main, #ffffff) !important;
}

.pac-matched {
    color: var(--accent-color, #007acc) !important;
}

/* Marker number inside marker pin */
.marker-number {
    transform: rotate(45deg) !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: inline-block !important;
    text-align: center !important;
}

/* TreeView Info-Footer styles */
.node-footer {
    width: 100% !important;
    font-size: 0.72rem !important;
    color: #b0b0b0 !important;
    font-weight: bold !important;
    padding-left: 38px !important;
    margin-top: 1px !important;
    margin-bottom: 5px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    pointer-events: none !important; /* Ensure clicking footer does not trigger drag/select */
}

.node-footer span {
    padding: 0 !important;
    align-self: center !important;
}

.unread-chat-icon {
    animation: pulse-red 1.5s infinite alternate;
    pointer-events: auto !important; /* Allow hover tooltip */
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.attachment-item.dragging-attachment {
    opacity: 0.4 !important;
    border: 1px dashed var(--accent-color, #007acc) !important;
}

/* --- Tree Unread Badge (Strict Circle & Suppression of Pseudo-Elements) --- */
span.node-unread-badge::before,
span.node-unread-badge::after,
ol.tree li span.node-unread-badge::before,
ol.tree li span.node-unread-badge::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

span.node-unread-badge,
ol.tree li span.node-unread-badge,
ol.tree li.item span.node-unread-badge,
ol.tree li.group span.node-unread-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: 8px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

span.node-unread-badge.direct-unread,
ol.tree li span.node-unread-badge.direct-unread {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
    border: none !important;
}

span.node-unread-badge.subtree-unread,
ol.tree li span.node-unread-badge.subtree-unread {
    background-color: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
}

span.node-unread-badge.multi-digit,
ol.tree li span.node-unread-badge.multi-digit {
    width: auto !important;
    max-width: 40px !important;
    min-width: 20px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;
}

/* --- Node Change Indicators (Path & Direct - Strict Circle & Suppression of Pseudo-Elements) --- */
span.node-change-badge::before,
span.node-change-badge::after,
span.node-change-path-dot::before,
span.node-change-path-dot::after,
ol.tree li span.node-change-badge::before,
ol.tree li span.node-change-badge::after,
ol.tree li span.node-change-path-dot::before,
ol.tree li span.node-change-path-dot::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

span.node-change-badge,
ol.tree li span.node-change-badge,
ol.tree li.item span.node-change-badge,
ol.tree li.group span.node-change-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: 8px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7) !important;
    animation: nodeChangePulse 2s infinite alternate ease-in-out;
}

span.node-change-path-dot,
ol.tree li span.node-change-path-dot,
ol.tree li.item span.node-change-path-dot,
ol.tree li.group span.node-change-path-dot {
    display: inline-block !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin-left: 8px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    background-color: #f59e0b !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8) !important;
    animation: nodeChangePulse 2s infinite alternate ease-in-out;
}

@keyframes nodeChangePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
    }
    100% {
        transform: scale(1.15);
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.9);
    }
}

/* --- Editor Icon Change Glow (Dezent, Kein Pulsieren) --- */
.editor-has-unread-change,
.editor-has-unread-change i,
.editor-has-unread-change svg {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5)) !important;
    animation: none !important;
    box-shadow: none !important;
}

/* --- Project List Unread Badge --- */
span.project-unread-badge::before,
span.project-unread-badge::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

span.project-unread-badge,
#project-list li span.project-unread-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

span.project-unread-badge.multi-digit,
#project-list li span.project-unread-badge.multi-digit {
    width: auto !important;
    max-width: 40px !important;
    min-width: 20px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
}

/* --- Editor Node Breadcrumb Path Bar --- */
.node-path-header-bar {
    width: 100% !important;
    background: #18181b !important;
    border-bottom: 1px solid var(--border-color, #2d2d2d) !important;
    padding: 5px 14px !important;
    font-size: 0.73rem !important;
    color: #38bdf8 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    user-select: text !important;
    min-height: 28px !important;
    scrollbar-width: thin !important;
}

.node-path-header-bar i {
    font-size: 0.68rem !important;
    color: var(--text-muted, #94a3b8) !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}

.node-path-header-bar span.breadcrumb-segment {
    cursor: pointer !important;
    color: #38bdf8 !important;
    transition: all 0.15s ease !important;
    border-radius: 3px !important;
    padding: 1px 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.node-path-header-bar span.breadcrumb-segment:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    color: #7dd3fc !important;
    text-decoration: underline !important;
}

.node-path-header-bar span.breadcrumb-segment.empty {
    cursor: default !important;
    color: var(--text-muted, #94a3b8) !important;
}

.node-path-header-bar span.breadcrumb-separator {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--text-muted, #64748b) !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

/* --- Quill Dark Theme Overrides for Form Editor --- */
.form-quill-editor-container .ql-toolbar.ql-snow {
    background: rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, #333) !important;
    padding: 6px 8px !important;
}
.form-quill-editor-container .ql-toolbar .ql-stroke {
    stroke: var(--text-main, #e4e4e7) !important;
}
.form-quill-editor-container .ql-toolbar .ql-fill {
    fill: var(--text-main, #e4e4e7) !important;
}
.form-quill-editor-container .ql-toolbar .ql-picker {
    color: var(--text-main, #e4e4e7) !important;
}
.form-quill-editor-container .ql-toolbar .ql-picker-options {
    background: #18181b !important;
    border-color: var(--border-color, #333) !important;
}
.form-quill-editor-container .ql-container.ql-snow {
    border: none !important;
    color: var(--text-main, #e4e4e7) !important;
    font-family: inherit !important;
}
.form-quill-editor-container .ql-editor {
    min-height: 100px !important;
    font-size: 0.9rem !important;
    color: var(--text-main, #e4e4e7) !important;
    padding: 10px 12px !important;
}
.form-quill-editor-container .ql-editor.ql-blank::before {
    color: var(--text-muted, #71717a) !important;
    font-style: italic !important;
}

/* --- Unified Quill List Styles (OL & UL) for all Quill instances --- */
.ql-editor ol, .ql-editor ul, .ql-editor-display ol, .ql-editor-display ul { 
    counter-reset: l1 !important; 
    list-style-type: none !important; 
    padding-left: 28px !important; 
}
.ql-editor li, .ql-editor-display li { 
    list-style-type: none !important; 
    position: relative !important; 
    margin-left: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
}
.ql-editor li::before, .ql-editor-display li::before { 
    position: absolute !important; 
    text-align: right !important; 
    font-weight: bold !important;
    color: inherit !important;
    white-space: nowrap !important;
}

/* Indent Offsets */
.ql-editor li:not([class*="ql-indent-"]), .ql-editor-display li:not([class*="ql-indent-"]) { padding-left: 24px !important; }
.ql-editor li:not([class*="ql-indent-"])::before, .ql-editor-display li:not([class*="ql-indent-"])::before { left: -24px !important; width: 44px !important; }

/* Ebene 2 */
.ql-editor li.ql-indent-1, .ql-editor-display li.ql-indent-1 { padding-left: 44px !important; }
.ql-editor li.ql-indent-1::before, .ql-editor-display li.ql-indent-1::before { left: -24px !important; width: 64px !important; }

/* Ebene 3 */
.ql-editor li.ql-indent-2, .ql-editor-display li.ql-indent-2 { padding-left: 64px !important; }
.ql-editor li.ql-indent-2::before, .ql-editor-display li.ql-indent-2::before { left: -24px !important; width: 84px !important; }

/* Ebene 4 */
.ql-editor li.ql-indent-3, .ql-editor-display li.ql-indent-3 { padding-left: 84px !important; }
.ql-editor li.ql-indent-3::before, .ql-editor-display li.ql-indent-3::before { left: -24px !important; width: 104px !important; }

/* Ebene 5 */
.ql-editor li.ql-indent-4, .ql-editor-display li.ql-indent-4 { padding-left: 104px !important; }
.ql-editor li.ql-indent-4::before, .ql-editor-display li.ql-indent-4::before { left: -24px !important; width: 124px !important; }

/* --- Numbered List Schema (OL) --- */
.ql-editor ol li:not([class*="ql-indent-"]), .ql-editor-display ol li:not([class*="ql-indent-"]) { counter-increment: l1 !important; counter-reset: l2 !important; }
.ql-editor ol li:not([class*="ql-indent-"])::before, .ql-editor-display ol li:not([class*="ql-indent-"])::before { content: counter(l1) "." !important; }

.ql-editor ol li.ql-indent-1, .ql-editor-display ol li.ql-indent-1 { counter-increment: l2 !important; counter-reset: l3 !important; }
.ql-editor ol li.ql-indent-1::before, .ql-editor-display ol li.ql-indent-1::before { content: counter(l1) "." counter(l2) "." !important; }

.ql-editor ol li.ql-indent-2, .ql-editor-display ol li.ql-indent-2 { counter-increment: l3 !important; counter-reset: l4 !important; }
.ql-editor ol li.ql-indent-2::before, .ql-editor-display ol li.ql-indent-2::before { content: counter(l1) "." counter(l2) "." counter(l3, lower-alpha) "." !important; }

.ql-editor ol li.ql-indent-3, .ql-editor-display ol li.ql-indent-3 { counter-increment: l4 !important; counter-reset: l5 !important; }
.ql-editor ol li.ql-indent-3::before, .ql-editor-display ol li.ql-indent-3::before { content: counter(l1) "." counter(l2) "." counter(l3, lower-alpha) "." counter(l4, lower-roman) "." !important; }

.ql-editor ol li.ql-indent-4, .ql-editor-display ol li.ql-indent-4 { counter-increment: l5 !important; }
.ql-editor ol li.ql-indent-4::before, .ql-editor-display ol li.ql-indent-4::before { content: counter(l1) "." counter(l2) "." counter(l3, lower-alpha) "." counter(l4, lower-roman) "." counter(l5, lower-greek) !important; }

/* --- Kalender-Editor Styles --- */

/* FullCalendar Dark Theme Adjustments */
:root {
    --fc-border-color: rgba(255, 255, 255, 0.08);
    --fc-daygrid-event-dot-width: 8px;
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.02);
    --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.05);
    --fc-today-bg-color: rgba(59, 130, 246, 0.12);
}

/* Sticky Date Info Header Bar */
.cal-sticky-info-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 20px;
    background: rgba(24, 24, 28, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    font-size: 0.83rem;
}

.cal-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-info-label {
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.cal-info-value {
    color: var(--accent-color, #3b82f6);
    font-weight: 600;
}

/* View Switcher Active Highlight */
.cal-view-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-view-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.cal-view-btn.active {
    background: var(--accent-color, #3b82f6) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

#calendar-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1;
}

.fc {
    width: 100% !important;
    height: 100% !important;
    color: var(--text-main, #e0e0e0);
    font-family: inherit;
    font-size: 0.88rem;
}

.fc .fc-view-harness {
    width: 100% !important;
    height: 100% !important;
}

.fc table {
    width: 100% !important;
}

/* MultiMonth (Year View) Styling */
.fc .fc-multimonth-month {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--fc-border-color);
    border-radius: 8px;
    padding: 6px;
}

.fc .fc-multimonth-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-color, #3b82f6);
    padding: 6px 0;
}

.fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.fc .fc-col-header-cell {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 0;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    border-color: var(--fc-border-color);
}

.fc .fc-daygrid-day-number {
    font-size: 0.82rem;
    color: var(--text-muted, #94a3b8);
    padding: 4px 8px;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: var(--accent-color, #3b82f6);
    font-weight: bold;
}

.fc .fc-event {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fc .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    filter: brightness(1.1);
}

.fc .fc-list-day-c主题 {
    background: rgba(0, 0, 0, 0.3) !important;
}

.fc .fc-list-event:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Modal Overlay for Calendar Event Editor */
.cal-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-modal-box {
    background: var(--bg-main, #18181c);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
}

.cal-modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}

.cal-modal-close-btn:hover {
    color: #ffffff;
}

.cal-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 70vh;
    overflow-y: auto;
}

.cal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cal-form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
}

.cal-form-group input[type="text"],
.cal-form-group input[type="date"],
.cal-form-group input[type="time"],
.cal-form-group select,
.cal-form-group textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-main, #ffffff);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cal-form-group input[type="text"]:focus,
.cal-form-group input[type="date"]:focus,
.cal-form-group input[type="time"]:focus,
.cal-form-group select:focus,
.cal-form-group textarea:focus {
    border-color: var(--accent-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.cal-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cal-form-row .flex-1 {
    flex: 1;
}

.cal-color-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.cal-color-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

.cal-color-pill:hover {
    transform: scale(1.15);
}

.cal-color-pill.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

.cal-modal-footer {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.15);
    gap: 10px;
}

.cal-btn-primary {
    background: var(--accent-color, #3b82f6);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-btn-primary:hover {
    filter: brightness(1.1);
}

.cal-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main, #ffffff);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cal-btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
}

/* --- Image Comment Badge & Count Blobs --- */
.image-comment-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: auto !important;
    max-width: max-content !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    background: #007acc !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.image-comment-badge:hover {
    background: #005999 !important;
    transform: scale(1.05) !important;
}

.image-comment-badge i {
    font-size: 12px !important;
}

.image-comment-badge span {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* --- Hide Image Comment Nodes from Tree Navigation --- */
li.has-imagemarker,
.tree-view li.has-imagemarker,
#tree-root li.has-imagemarker {
    display: none !important;
}

/* --- Suppress CSS icons inside node footers --- */
.node-footer span::before,
.node-footer::before {
    content: none !important;
    display: none !important;
}

/* --- Editor Fix Mode Button & Switch --- */
.context-btn.editor-fix-btn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.context-btn.editor-fix-btn:hover {
    color: #38bdf8 !important;
}

.context-btn.editor-fix-btn.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.18) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}