/**
 * Scribigo Agent Chat - Styles
 * Responsives 2-Spalten-Layout mit Chat und Dokumentvorschau
 * Mit Viewport-basierter Höhe und Resizable Chat Area
 */

/* ========================================
   Container & Layout
   ======================================== */

.scribigo-agent-container {
    width: 100%;
    height: 100vh; /* Fallback für JS */
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.scribigo-agent-wrapper {
    display: flex;
    gap: 0;
    flex: 1;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: var(--ast-global-color-5);
    overflow: hidden;
    position: relative;
}

/* Chat Bereich (links) - Resizable */
.scribigo-agent-chat-area {
    width: 50%;
    min-width: 300px;
    max-width: 80%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Resize Handle für Chat Area */
.scribigo-agent-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.2s;
}

.scribigo-agent-resize-handle:hover,
.scribigo-agent-resize-handle.resizing {
    background: var(--ast-global-color-0);
}

/* Preview Bereich (rechts) */
.scribigo-agent-preview-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid var(--ast-border-color);
    overflow: hidden;
}

/* Responsive: Auf kleinen Bildschirmen stapeln */
@media (max-width: 968px) {
    .scribigo-agent-wrapper {
        flex-direction: column;
    }
    
    .scribigo-agent-chat-area {
        min-height: 400px;
    }
    
    .scribigo-agent-preview-area {
        border-left: none;
        border-top: 1px solid var(--ast-border-color);
        min-height: 300px;
    }
}

/* ========================================
   Tab Navigation System (Desktop)
   ======================================== */

.scribigo-agent-header,
.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-bottom: 2px solid var(--ast-border-color);
    background: var(--ast-global-color-5);
    min-height: 48px;
}

/* Mobile Tab Navigation (versteckt auf Desktop) */
.mobile-tab-navigation {
    display: none;
}

/* Tab Container */
.agent-tabs,
.preview-tabs {
    display: flex;
    gap: 0;
    flex: 1;
    align-items: center;
}

/* Document Title (in agent-tabs) */
.agent-document-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin-left: 16px;
    font-size: 13px;
    color: var(--ast-global-color-3);
    border-left: 1px solid var(--ast-border-color);
}

.agent-document-title i {
    font-size: 13px;
    color: var(--ast-global-color-3);
}

.agent-document-title span {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tab Buttons - Einheitliches Design */
.agent-tab,
.preview-tab {
    position: relative;
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--ast-global-color-3);
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.agent-tab:hover,
.preview-tab:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.agent-tab.active,
.preview-tab.active {
    background: #ffffff;
    color: var(--ast-global-color-0);
    border-bottom-color: var(--ast-global-color-0);
}

.agent-tab i,
.preview-tab i {
    font-size: 14px;
}

/* Header Actions (rechts) */
.agent-header-actions,
.preview-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.agent-full-reset-btn,
.agent-clipboard-paste-btn,
.preview-action-btn {
    background-color: var(--ast-global-color-0);
    border: none;
    color: #fff;
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-full-reset-btn:hover,
.agent-clipboard-paste-btn:hover,
.preview-action-btn:hover {
    background-color: var(--ast-global-color-8);
    color: #fff;
}

/* ========================================
   Messages Container - Scrollable
   ======================================== */

.scribigo-agent-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Wichtig für Flexbox Scrolling */
}

/* Custom Scrollbar */
.scribigo-agent-messages::-webkit-scrollbar {
    width: 8px;
}

.scribigo-agent-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scribigo-agent-messages::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

.scribigo-agent-messages::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* ========================================
   Message Bubbles - GitHub Copilot Style
   ======================================== */

.agent-message {
    position: relative;
    display: flex;
    gap: 10px;
    animation: fadeIn 0.3s ease-in-out;
    margin-bottom: 6px;
}

/* User Messages - Rechtsbündig mit grauem Hintergrund */
.agent-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 85%;
    margin-left: auto;
}

/* Assistant Messages - Linksbündig, transparenter Hintergrund, volle Breite */
.agent-message-assistant {
    align-self: flex-start;
    max-width: 100%;
    width: 100%;
}

.agent-message-system {
    align-self: center;
    max-width: 90%;
}

/* Avatar nur für User sichtbar */
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e1e4e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #586069;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Avatar bei Assistant ausblenden */
.agent-message-assistant .message-avatar {
    display: none;
}

.message-content {
    border-radius: 3px;
    line-height: 1.6;
    word-wrap: break-word;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.message-content p {
    margin-bottom: 5px !important;
}

/* User Messages - Dezenter grauer Hintergrund */
.agent-message-user .message-content {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    padding: 8px;
}

/* Assistant Messages - Transparenter Hintergrund, kein Border */
.agent-message-assistant .message-content {
    background: transparent;
    border: none;
    padding-left: 0;
    color: var(--ast-global-color-2);
}

.agent-message-system .message-content {
    background: #fff8e1;
    border: 1px solid #ffd54f;
    text-align: center;
    font-size: 13px;
    color: #6d4c00;
}

.message-timestamp {
    display: none;
}

/* Intent Summary Hint - Dezente Anzeige vor Agent-Verarbeitung */
.intent-summary-hint,
.operation-hint {
    margin: 10px 0;
    padding: 4px 0;
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    opacity: 0.9;
    animation: fadeInSlide 0.3s ease-out;
}

.intent-summary-hint .intent-icon,
.operation-hint .hint-icon {
    display: none;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 0.85;
        transform: translateY(0);
    }
}

/* Message Formatierung */
.message-content strong {
    font-weight: 600;
}

.message-content em {
    font-style: italic;
}

/* Überschriften in Chat-Nachrichten - minimal hervorgehoben für Chat-Kontext */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 8px 0 6px 0;
    line-height: 1.4;
}

.message-content h1 {
    font-size: 1.15em; /* Nur minimal größer als Fließtext */
    font-weight: 600;
}

.message-content h2 {
    font-size: 1.1em;
    font-weight: 600;
}

.message-content h3 {
    font-size: 1.05em;
    font-weight: 600;
}

.message-content h4,
.message-content h5,
.message-content h6 {
    font-size: 1em; /* Gleiche Größe wie Fließtext */
    font-weight: 600;
}

.message-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.agent-message-user .message-content code {
    background: rgba(255, 255, 255, 0.2);
}

/* Code-Blocks für Command-Results */
.message-content .code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 3px;
    overflow-x: auto;
    margin: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    max-height: 400px;
    overflow-y: auto;
}

.message-content .code-block code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.agent-message-user .message-content .code-block {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

/* ========================================
   Typing Indicator
   ======================================== */

.scribigo-agent-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #666;
}

.typing-indicator {
    display: flex;
    gap: 4px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ast-global-color-0);
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.typing-text {
    font-size: 14px;
}

/* ========================================
   Input Area - Fixed at Bottom
   ======================================== */

.scribigo-agent-input-container {
    position: relative; /* Kein sticky mehr, da Chat-Area flexbox ist */
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ast-border-color);
    padding: 16px;
    background: var(--ast-global-color-5);
    flex-shrink: 0; /* Verhindert Verkleinerung */
    z-index: 5;
}

.agent-input-wrapper {
    display: flex;
    gap: 10px;
    background: #ffffff;
    border: 2px solid var(--ast-border-color);
    border-radius: 3px;
    padding: 8px;
    transition: border-color 0.2s;
}

.agent-input-wrapper:focus-within {
    border-color: var(--ast-global-color-0);
}

.agent-input-wrapper textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 24px; /* Explizite line-height für konsistente Zeilenhöhe */
    padding: 4px;
    min-height: 48px; /* 2 Zeilen minimum */
    max-height: 240px; /* 10 Zeilen maximum */
    overflow-y: hidden; /* Wird per JS auf 'auto' gesetzt bei Bedarf */
    transition: height 0.15s ease; /* Sanfte Höhen-Änderung */
}

.agent-input-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.agent-attach-btn,
.agent-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.agent-attach-btn {
    background: #f1f3f4;
    color: #666;
}

.agent-attach-btn:hover:not(:disabled) {
    background: var(--ast-border-color);
}

.agent-attach-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.agent-send-btn {
    background-color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #ffffff;
}

.agent-send-btn:hover:not(:disabled) {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

.agent-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modes Button (neben Send Button) */
.agent-modes-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: #ffffff;
    margin-left: 8px;
}

.agent-modes-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.4);
}

.agent-modes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agent-input-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-start;
}

.agent-scribits-balance {
    font-size: 12px;
    color: var(--ast-global-color-3);
    order: 1;
}

.agent-scribits-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    color: var(--ast-global-color-3);
    font-size: 13px;
    opacity: 0.6;
    order: 1;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
}

.agent-scribits-help-btn:hover {
    opacity: 1;
    color: var(--ast-global-color-0);
}

.char-counter {
    font-size: 12px;
    color: #888;
    order: 6;
}

.agent-inline-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    min-height: 24px;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    background: #ffffff;
    color: var(--ast-global-color-2);
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.agent-inline-action-btn:hover:not(:disabled) {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
    transform: translateY(-1px);
}

.agent-inline-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--ast-global-color-5);
    border-color: var(--ast-border-color);
    color: var(--ast-global-color-3);
}

.agent-scribits-buy-btn,
.agent-flatrate-btn {
    box-shadow: none;
}

.agent-scribits-buy-btn {
    order: 2;
}

.agent-flatrate-btn {
    order: 3;
}

.agent-input-hint .agent-chat-shortcuts {
    order: 5;
    margin-left: auto;
}

.agent-scribits-buy-btn:hover:not(:disabled),
.agent-flatrate-btn:hover:not(:disabled) {
    box-shadow: none;
}

.agent-scribits-buy-btn:disabled,
.agent-flatrate-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.agent-flatrate-btn.agent-flatrate-available {
    background: #10b981;
    border-color: #059669;
    color: #fff;
}

.agent-flatrate-btn.agent-flatrate-available:hover:not(:disabled) {
    background: #059669;
    border-color: #047857;
}

@media (max-width: 768px) {
    .agent-input-hint {
        gap: 8px;
    }

    .agent-scribits-buy-btn,
    .agent-flatrate-btn {
        order: 5;
        width: 100%;
        justify-content: center;
    }

    .agent-input-hint .agent-chat-shortcuts {
        order: 7;
        margin-left: 0;
    }

    .char-counter {
        order: 6;
    }
}

/* Chat Shortcut Buttons (in agent-input-hint) */
.chat-shortcut-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    min-height: 24px;
    background: #ffffff;
    color: var(--ast-global-color-3);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-shortcut-btn:hover:not(:disabled) {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
    transform: translateY(-1px);
}

.chat-shortcut-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--ast-global-color-5);
}

.chat-shortcut-btn i {
    font-size: 14px;
}

/* Chat Shortcuts Toolbar (integriert in agent-input-hint) */
.agent-chat-shortcuts {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Agent Function Buttons (in Messages) */
.agent-function-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 4px 4px 4px 0;
    background-color: var(--ast-global-color-0);
    border: none;
    border-color: var(--ast-global-color-0);
    color: white;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.5em;
    cursor: pointer;
    transition: all 0.2s;
}

.agent-function-btn:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

.agent-function-btn i {
    font-size: 12px;
}

/* Sekundärer Function Button (z.B. für "Aus Funktionsliste auswählen") */
.agent-function-btn-secondary {
    background: transparent;
    color: var(--ast-global-color-2) !important;
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
    text-transform: uppercase;
}

.agent-function-btn-secondary:hover {
    background: var(--ast-global-color-5);
}

.agent-analysis-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 4px 4px 4px 0;
    background-color: var(--ast-global-color-0);
    border: none;
    border-color: var(--ast-global-color-0);
    color: white;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.5em;
    cursor: pointer;
    transition: all 0.2s;
}

.agent-analysis-btn:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

/* ========================================
   Preview Area
   ======================================== */

/* Preview Header Styles werden durch gemeinsame Tab-Styles oben abgedeckt */

.preview-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Toolbar oben, Content darunter */
    position: relative;
}

.preview-tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Preview Toolbar
   ======================================== */

.preview-toolbar,
.analysis-toolbar {
    padding: 12px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--ast-border-color);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* Verhindert Schrumpfen im Flexbox-Layout */
    min-height: 0; /* Wichtig für korrekte Flexbox-Berechnung */
}

.toolbar-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Toolbar-Separator (Visueller Trenner zwischen Gruppen) */
.toolbar-separator {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent 0%, #cbd5e0 20%, #cbd5e0 80%, transparent 100%);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Mobile: Separator umbrechen */
@media (max-width: 768px) {
    .toolbar-separator {
        display: none;
    }
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--ast-global-color-5) 0%, var(--ast-border-color) 100%);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ast-global-color-3);
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: var(--ast-border-color);
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.toolbar-btn i {
    font-size: 14px;
}

.toolbar-btn span {
    font-weight: 500;
}

/* Toolbar Search */
.toolbar-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: var(--ast-global-color-5);
    border: none;
    border-radius: 3px;
}

.toolbar-search input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.toolbar-search input:focus {
    border-color: var(--ast-global-color-0);
}

.search-input-wrap {
    position: relative;
    flex: 1;
}

.search-input-wrap input {
    width: 100%;
    padding-right: 36px;
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-nav-btn {
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-nav-btn:hover {
    background: var(--ast-border-color);
    border-color: #adb5bd;
}

.search-nav-btn i {
    font-size: 14px;
    color: var(--ast-global-color-3);
}

#searchCounter {
    font-size: 14px;
    color: #6c757d;
    min-width: 50px;
    text-align: center;
}

.search-close-btn {
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s;
}

.search-close-btn:hover {
    color: #dc3545;
}

.search-highlight {
    background-color: #fff3cd;
    border-bottom: 2px solid #ffc107;
    padding: 2px 0;
}

.search-highlight.current {
    background-color: #ffc107;
    color: #000;
    font-weight: 600;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ast-global-color-3);
    text-align: center;
    padding: 24px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: default;
}

#previewDropZone {
    margin: 16px;
    border: 2px dashed var(--ast-global-color-4);
    cursor: pointer;
}

#previewDropZone svg {
    color: var(--ast-global-color-0);
    opacity: 0.45;
}

#previewDropZone p {
    color: var(--ast-global-color-2);
}

#previewDropZone small {
    color: var(--ast-global-color-3);
}

#previewDropZone:hover {
    border-color: var(--ast-global-color-0);
    background: rgba(0, 0, 0, 0.02);
}

#previewDropZone:hover svg {
    opacity: 1;
    color: var(--ast-global-color-0);
}

#previewDropZone.drag-over {
    border-color: var(--ast-global-color-0);
    background: rgba(59, 130, 246, 0.06);
}

#previewDropZone.drag-over svg {
    opacity: 1;
    transform: translateY(-4px);
    color: var(--ast-global-color-0);
}

#previewDropZone.drag-over p {
    color: var(--ast-global-color-0);
}

.preview-placeholder svg {
    margin-bottom: 16px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.preview-placeholder p {
    margin: 8px 0;
    font-weight: 500;
    font-size: 16px;
}

.preview-placeholder small {
    font-size: 13px;
}

/* Analyse Quick-Start Placeholder */
.analysis-quick-start.no-document {
    opacity: 0.5;
}

.analysis-quick-start .agent-function-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Animations
   ======================================== */

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

.message-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* ========================================
   Mobile Optimierungen
   ======================================== */

@media (max-width: 968px) {
    /* Mobile: Zeige Tab-Navigation statt 2-Spalten-Layout */
    .mobile-tab-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--ast-border-color);
        background: var(--ast-global-color-5);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .mobile-tabs {
        display: flex;
        flex: 1;
    }
    
    /* Mobile Header Actions (Reset-Buttons) */
    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
    }
    
    .mobile-tab {
        flex: 1;
        padding: 14px 16px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: var(--ast-global-color-3);
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    
    /* Verstecke Text-Labels im mobilen Layout */
    .mobile-tab span {
        display: none;
    }
    
    .mobile-tab i {
        font-size: 20px;
    }
    
    .mobile-tab:hover {
        background: var(--ast-global-color-5);
        color: var(--ast-global-color-2);
    }
    
    .mobile-tab.active {
        background: #ffffff;
        color: var(--ast-global-color-0);
        border-bottom-color: var(--ast-global-color-0);
    }
    
    /* Verstecke Desktop-Header auf Mobile */
    .scribigo-agent-header,
    .preview-header {
        display: none;
    }
    
    /* Verstecke Document-Title auf Mobile */
    .agent-document-title {
        display: none !important;
    }
    
    /* Kompakterer Input-Bereich auf Mobile */
    .scribigo-agent-input-container {
        padding: 12px;
    }
    
    .agent-input-wrapper {
        padding: 6px;
    }
    
    .agent-input-wrapper textarea {
        font-size: 13px;
        line-height: 20px;
        padding: 2px;
        min-height: 40px; /* 2 Zeilen bei kleinerer Schrift */
        max-height: 160px; /* Weniger max-height auf Mobile */
    }
    
    .agent-attach-btn,
    .agent-send-btn,
    .agent-modes-btn {
        width: 32px;
        height: 32px;
    }
    
    /* Selection Counter kompakter auf Mobile */
    #agentSelectionCounter {
        gap: 6px;
    }
    
    /* Kompakter Selection Chip */
    #agentSelectionCounter .selection-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 10px !important;
        background: #ddf4ff !important;
        color: var(--ast-global-color-0) !important;
        border: 1px solid #54aeff !important;
        border-radius: 16px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        user-select: none !important;
        line-height: 1 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
    
    #agentSelectionCounter .selection-chip:hover {
        background: #b6e3ff !important;
        border-color: var(--ast-global-color-0) !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    #agentSelectionCounter .selection-chip-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        opacity: 0.6 !important;
        margin-left: 2px !important;
        cursor: pointer !important;
    }
    
    #agentSelectionCounter .selection-chip:hover .selection-chip-close {
        opacity: 1 !important;
    }
    
    /* Alte Styles entfernen/ersetzen */ 
    .selection-badge {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .selection-clear-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-left: 6px;
        color: var(--ast-global-color-3);
        text-decoration: none;
        border-radius: 3px;
        transition: all 0.2s;
        font-size: 11px;
    }
    
    .selection-clear-link:hover {
        color: var(--ast-global-color-2);
        background: rgba(0, 0, 0, 0.05);
    }
    
    /* "Änderungen ablehnen" Text ausblenden, nur Icon zeigen */
    #rejectSelectedChangesBtn {
        padding: 0;
        min-width: 32px;
        height: 32px;
    }
    
    #rejectSelectedChangesBtn i {
        margin: 0;
    }
    
    #rejectSelectedChangesBtn::after {
        content: none;
    }
    
    /* Text im Button ausblenden */
    .toolbar-btn-sm {
        font-size: 0;
    }
    
    .toolbar-btn-sm i {
        font-size: 14px;
    }
    
    /* Toolbar-Search kompakter auf Mobile */
    .toolbar-search {
        gap: 6px;
        padding: 0;
        flex-wrap: wrap; /* Erlaube Umbrechen */
        width: 100%;
        box-sizing: border-box;
    }
    
    .toolbar-search input {
        font-size: 13px;
        padding: 4px 8px;
        min-width: 0;
        flex: 1 1 100%; /* Input nimmt volle Breite */
    }
    
    .search-controls {
        gap: 4px;
        flex-shrink: 0;
    }
    
    .search-nav-btn,
    .search-close-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 0;
        font-size: 12px;
    }
    
    .search-option {
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 0;
        font-size: 11px;
    }
    
    /* Stack Layout */
    .scribigo-agent-wrapper {
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    
    /* Tabs wechseln Bereiche */
    .scribigo-agent-chat-area,
    .scribigo-agent-preview-area {
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        border-left: none !important;
        overflow: hidden;
    }
    
    .scribigo-agent-chat-area.active,
    .scribigo-agent-preview-area.active {
        display: flex;
        flex: 1;
        min-height: 0;
    }
    
    /* Resize Handle verstecken */
    .scribigo-agent-resize-handle {
        display: none;
    }
    
    .scribigo-agent-messages {
        padding: 12px;
    }
    
    .agent-message {
        max-width: 90%;
    }
    
    .agent-input-wrapper textarea {
        font-size: 16px; /* Verhindert Auto-Zoom auf iOS */
    }
}

/* ========================================
   Dokumentvorschau - Content States
   ======================================== */

.preview-loading,
.preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    height: 100%;
}

.preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ast-border-color);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Paragraph Selection System
   ======================================== */

/* Preview Container - fokussierbar für Keyboard-Shortcuts */
#agentPreview {
    position: relative; /* Für absolute Positionierung der Floating Toolbar */
    outline: none; /* Entferne Browser-Default Fokus-Outline */
    overflow-x: auto; /* Horizontale Scrollbar bei Bedarf (z.B. Inline-Modus auf schmalen Screens) */
}

.diff-paragraph {
    position: relative;
    padding-left: 35px;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
}

.paragraph-checkbox {
    position: absolute;
    left: 8px;
    top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ast-global-color-0);
    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Checkboxen immer sichtbar, bei Interaktion deutlicher */
.diff-paragraph:hover .paragraph-checkbox,
.paragraph-checkbox:hover,
.diff-paragraph.selected .paragraph-checkbox,
.diff-paragraph.focused .paragraph-checkbox {
    opacity: 1;
    transform: scale(1.04);
}

.diff-paragraph.selected {
    background-color: rgba(4, 107, 210, 0.1);
    box-shadow: inset 3px 0 0 0 var(--ast-global-color-0);
}

/* Gelöschte Absätze selektiert - verstärkte Markierung */
.diff-paragraph.completely-deleted-paragraph.selected {
    background-color: rgba(4, 107, 210, 0.15) !important;
    box-shadow: inset 3px 0 0 0 var(--ast-global-color-0) !important;
}

.diff-paragraph.focused {
    background-color: transparent; /* Kein Hintergrund */
    box-shadow: inset 4px 0 0 0 var(--ast-global-color-0), 0 0 0 1px var(--ast-border-color); /* Deutlicher blauer linker Balken + grauer Rahmen */
}

.diff-paragraph.selected.focused {
    background-color: rgba(4, 107, 210, 0.1); /* Wie bei .selected */
    box-shadow: inset 4px 0 0 0 var(--ast-global-color-0), 0 0 0 1px var(--ast-global-color-0); /* Blauer Balken + blauer Rahmen */
}

/* Gelöschte Absätze selektiert + fokussiert */
.diff-paragraph.completely-deleted-paragraph.selected.focused {
    background-color: rgba(4, 107, 210, 0.15) !important;
    box-shadow: inset 4px 0 0 0 var(--ast-global-color-0), 0 0 0 1px var(--ast-global-color-0) !important;
}

.diff-paragraph.selected .paragraph-number {
    color: var(--ast-global-color-0);
    font-weight: 600;
}

.diff-paragraph.focused .paragraph-number {
    color: var(--ast-global-color-0); /* Blaue Absatznummer bei Fokus */
    font-weight: 700;
}

.preview-loading p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.preview-error {
    color: #dc3545;
}

.preview-error svg {
    color: #dc3545;
    margin-bottom: 16px;
    opacity: 0.5;
}

.preview-error p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.preview-error small {
    font-size: 13px;
    color: #6c757d;
    display: block;
    max-width: 300px;
}

/* ========================================
   Dokumentvorschau - Document Display
   ======================================== */

.preview-document {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.document-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
    line-height: 1.8;
    font-size: 15px;
    color: #212529;
}

.document-content p {
    margin: 0 0 1.5em 0;
    text-align: justify;
}

.document-content p:last-child {
    margin-bottom: 0;
}

.document-content .empty-content {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
}

/* Diff-Markierungen im Dokument */
.document-content ins {
    background: #d4edda;
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
}

.document-content del {
    background: #f8d7da;
    text-decoration: line-through;
    padding: 0 2px;
    border-radius: 2px;
}

/* ========================================
   Diff Content - Backend-generierte Diff-Analyse
   ======================================== */

.diff-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Überschriften im Diff-Content */
.diff-content h1,
.diff-content h2,
.diff-content h3,
.diff-content h4,
.diff-content h5,
.diff-content h6 {
    margin: 0.3em 0 0.3em 0 !important;
    font-weight: 600;
    line-height: 1.3;
    color: #1a202c;
}

.diff-content h1 { font-size: 2em; }
.diff-content h2 { font-size: 1.5em; }
.diff-content h3 { font-size: 1.25em; }
.diff-content h4 { font-size: 1.1em; }
.diff-content h5 { font-size: 1em; }
.diff-content h6 { font-size: 0.9em; }

.diff-content h1:first-child,
.diff-content h2:first-child,
.diff-content h3:first-child,
.diff-content h4:first-child {
    margin-top: 0;
}

/* Text und Paragraphen */
.diff-content p {
    margin: 0 0 1.2em 0;
    line-height: 1.7;
    font-size: 15px;
    color: #2d3748;
}

.diff-content p:last-child {
    margin-bottom: 0;
}

/* Listen */
.diff-content ul,
.diff-content ol {
    margin: 0 0 1.2em 0;
    padding-left: 1.5em;
    line-height: 1.7;
}

.diff-content li {
    margin-bottom: 0.5em;
    color: #2d3748;
}

.diff-content li:last-child {
    margin-bottom: 0;
}

/* Listen-Marker (aus <uli/> und <oli N/> - jetzt AUSSERHALB diff-paragraph-content) */
.diff-content .list-marker {
    display: inline-block;
    min-width: 1.5em;
    color: #4a5568;
    font-weight: 600;
    margin-left: 0.5em;
}

/* Blockquotes */
.diff-content blockquote {
    margin: 1.5em 0;
    padding: 12px 20px;
    border-left: 4px solid var(--ast-global-color-0);
    background: #f7fafc;
    font-style: italic;
    color: #4a5568;
}

/* Code */
.diff-content code {
    padding: 2px 6px;
    background: #edf2f7;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #d63384;
}

.diff-content pre {
    margin: 1.5em 0;
    padding: 16px;
    background: #2d3748;
    color: #e2e8f0;
    border-radius: 3px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
}

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

/* ========================================
   Diff-Markierungen (vom Backend generiert)
   ======================================== */

/* Hinzugefügte Inhalte (grün) */
.diff-content ins,
.diff-content .diff-add,
.diff-content .diff-addition {
    background: linear-gradient(to right, #dafae9 0%, #b7f1d6 100%);
    color: #065f46;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline;
}

/* Hinzugefügte Überschriften als Block darstellen */
.diff-content ins h1,
.diff-content ins h2,
.diff-content ins h3,
.diff-content ins h4,
.diff-content ins h5,
.diff-content ins h6 {
    display: block;
    margin: 0;
    padding: 0;
}

/* ins-Element mit Überschriften als Block */
.diff-content ins:has(h1),
.diff-content ins:has(h2),
.diff-content ins:has(h3),
.diff-content ins:has(h4),
.diff-content ins:has(h5),
.diff-content ins:has(h6) {
    display: block;
    padding: 0; /* Kein zusätzliches Padding bei Block-Überschriften */
}

/* Gelöschte Inhalte (rot) */
.diff-content del,
.diff-content .diff-delete,
.diff-content .diff-deletion {
    background: linear-gradient(to right, #fdf0f0 0%, #fecaca 100%);
    color: #991b1b;
    text-decoration: line-through;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline;
}

/* Gelöschte Überschriften als Block darstellen */
.diff-content del h1,
.diff-content del h2,
.diff-content del h3,
.diff-content del h4,
.diff-content del h5,
.diff-content del h6 {
    display: block;
    margin: 0;
}

/* del-Element mit Überschriften als Block */
.diff-content del:has(h1),
.diff-content del:has(h2),
.diff-content del:has(h3),
.diff-content del:has(h4),
.diff-content del:has(h5),
.diff-content del:has(h6) {
    display: block;
}

/* Geänderte Inhalte (orange/gelb) */
.diff-content .diff-change,
.diff-content .diff-modified {
    background: linear-gradient(to right, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
    border-left: 2px solid #f59e0b;
    display: inline;
}

/* Hervorgehobene Inhalte (gelb) - <mark> Tag */
.diff-content mark {
    background: linear-gradient(to right, #fef9c3 0%, #fef08a 100%);
    color: #713f12;
    padding: 1px 3px;
    border-radius: 3px;
    display: inline;
}

/* Unveränderte Inhalte (neutral) */
.diff-content .diff-unchanged {
    color: #4a5568;
    display: inline;
}

/* ── Structural Tags (DOCX-Sonderzeichen) ──────────────────────────
   <lf/>  → .sgo-lf        Zeilenumbruch (Line Feed)
   <su/>  → .sgo-pagebreak  Seitenumbruch (Page Break)
   <tab/> → .sgo-tab        Tabulator
   <shy/> → .sgo-shy        Bedingter Trennstrich (Soft Hyphen)
   Werden als Span-Elemente gerendert, damit sie innerhalb von <del>/<ins>
   korrekt erhalten bleiben und bei Accept/Reject korrekt roundtrippen. */

/* Zeilenumbruch: INLINE Span — Umbruch wird über CSS-Content \A erzeugt,
   damit das parent <del>/<ins> ein zusammenhängender Inline-Flow bleibt
   und vollständig klickbar ist. */
.sgo-lf {
    pointer-events: none;  /* Klicks durchreichen an parent del/ins */
}
/* ↵ Symbol direkt nach dem vorherigen Text + erzwungener Zeilenumbruch */
.diff-content .sgo-lf::before {
    content: ' ↵';
    color: #bbb;
    font-size: 0.85em;
}
.sgo-lf::after {
    content: '\A';
    white-space: pre;      /* \A nur mit pre/pre-wrap als Umbruch wirksam */
}

/* Seitenumbruch: Sichtbarer horizontaler Strich */
.sgo-pagebreak {
    display: block;
    border-top: 2px dashed #ccc;
    margin: 6px 0;
    height: 0;
}
.diff-content .sgo-pagebreak::before {
    content: '⸻ Seitenumbruch ⸻';
    color: #aaa;
    font-size: 0.7em;
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* Tab: Sichtbare Einrückung */
.sgo-tab {
    display: inline-block;
    width: 2em;
    white-space: pre;
}
.diff-content .sgo-tab::before {
    content: '→';
    color: #ccc;
    font-size: 0.8em;
    position: absolute;
}

/* Soft Hyphen: Unsichtbar, aber korrekt vorhanden */
.sgo-shy {
    display: inline;
    width: 0;
    font-size: 0;
}

/* Innerhalb von del/ins: Strukturzeichen erben Löschungs-/Einfügungsfarbe */
.diff-content del .sgo-lf::before,
.diff-content del .sgo-pagebreak::before,
.diff-content del .sgo-tab::before {
    color: #c09090;
}
.diff-content ins .sgo-lf::before,
.diff-content ins .sgo-pagebreak::before,
.diff-content ins .sgo-tab::before {
    color: #70a080;
}

/* Absätze mit Abstand zwischen ihnen */
.diff-content p {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.diff-content p:last-child {
    margin-bottom: 0;
}

/* Diff-Absätze mit Nummerierung (wie Normseite) */
.diff-content .diff-paragraph {
    display: flex;
    margin-bottom: 0.5em;
    line-height: 1.6;
    position: relative;
}

.diff-content .diff-paragraph:last-child {
    margin-bottom: 0;
}

/* Paragraph-Nummern links positioniert (wie Zeilennummern) */
.diff-content .paragraph-number {
    display: inline-block;
    min-width: 40px;
    margin-right: 12px;
    font-size: 0.75em;
    color: var(--ast-global-color-7);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 400;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
    padding-top: 6px;
}

/* Content-Container für den Text (damit Diff-Markierungen nicht als Flex-Items behandelt werden) */
.diff-content .diff-paragraph-content {
    flex: 1;
    min-width: 0; /* Verhindert Overflow-Probleme */
}

/* Diff-Zeilen (falls Block-Level) */
.diff-content .diff-line {
    display: block;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.diff-content .diff-line.added {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
}

.diff-content .diff-line.deleted {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
}

.diff-content .diff-line.modified {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

/* Diff-Statistiken (falls vom Backend geliefert) */
.diff-content .diff-stats {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f7fafc;
    border-radius: 3px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.diff-content .diff-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.diff-content .diff-stat-item.additions {
    color: #059669;
}

.diff-content .diff-stat-item.deletions {
    color: #dc2626;
}

.diff-content .diff-stat-item.modifications {
    color: #d97706;
}

/* Diff-Tabellen (falls verwendet) */
.diff-content table.diff-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

.diff-content table.diff-table td {
    padding: 4px 8px;
    border: 1px solid var(--ast-border-color);
    vertical-align: top;
}

.diff-content table.diff-table .line-number {
    width: 40px;
    text-align: right;
    color: var(--ast-global-color-7);
    background: var(--ast-global-color-5);
    user-select: none;
}

.diff-content table.diff-table .line-added {
    background: #ecfdf5;
}

.diff-content table.diff-table .line-deleted {
    background: #fef2f2;
}

/* Horizontaler Trennstrich für Diff-Abschnitte */
.diff-content hr,
.diff-content .diff-separator {
    border: none;
    height: 1px;
}

/* ========================================
   Diff View Modes (Original/Bearbeitet/Änderungen)
   ======================================== */

/* Bearbeitet View (hide deletions, show insertions plain) */
.diff-content.hide-changes del {
    display: none;
}

.diff-content.hide-changes ins {
    background: transparent;
    color: inherit;
    text-decoration: none;
    padding: 0;
}

/* Bearbeitet View: Verstecke eingefügte Absätze (mit Buchstaben-Suffix) */
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="a"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="b"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="c"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="d"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="e"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="f"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="g"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="h"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="i"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="j"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="k"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="l"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="m"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="n"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="o"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="p"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="q"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="r"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="s"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="t"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="u"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="v"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="w"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="x"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="y"],
.diff-content.hide-changes .diff-paragraph[data-paragraph-id*="p"][data-paragraph-id$="z"] {
    display: none !important;
}

/* Bearbeitet View: Verstecke komplett gelöschte Absätze (die nur aus <del> bestehen) */
.diff-content.hide-changes .diff-paragraph.completely-deleted-paragraph {
    display: none !important;
}

/* Original View (hide insertions, show deletions plain) */
.diff-content.show-original ins {
    display: none;
}

.diff-content.show-original del {
    background: transparent;
    color: inherit;
    text-decoration: none;
    padding: 0;
}

/* Original View: Verstecke komplett neue Absätze (die nur aus <ins> bestehen) */
.diff-content.show-original .diff-paragraph.completely-new-paragraph {
    display: none !important;
}

/* ========================================
   Table of Contents Overlay
   ======================================== */

.toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.toc-modal {
    background: #ffffff;
    border-radius: 6px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

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

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ast-border-color);
}

.toc-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toc-header h3 i {
    color: var(--ast-global-color-0);
}

.toc-close {
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 18px;
    transition: color 0.2s;
}

.toc-close:hover {
    color: #dc3545;
}

.toc-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.toc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #6c757d;
}

.toc-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.toc-entry:hover {
    background: var(--ast-global-color-5);
    transform: translateX(4px);
}

.toc-number {
    flex-shrink: 0;
    min-width: 40px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ast-global-color-0);
    color: #ffffff;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
}

.toc-level-label {
    flex-shrink: 0;
    padding: 2px 6px;
    background: var(--ast-border-color);
    color: var(--ast-global-color-3);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: monospace;
}

.toc-text {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* Einrückung basierend auf Heading-Level */
.toc-level-1 {
    padding-left: 16px;
}

.toc-level-2 {
    padding-left: 32px;
}

.toc-level-3 {
    padding-left: 48px;
}

.toc-level-4 {
    padding-left: 64px;
}

.toc-level-5 {
    padding-left: 80px;
}

.toc-level-6 {
    padding-left: 96px;
}

.toc-empty {
    text-align: center;
    color: #6c757d;
    padding: 40px;
}

/* Empty State */
.diff-content .empty-diff {
    text-align: center;
    padding: 60px 20px;
    color: var(--ast-global-color-3);
}

.diff-content .empty-diff i {
    font-size: 48px;
    color: #10b981;
    margin-bottom: 16px;
    display: block;
}

.diff-content .empty-diff p {
    font-size: 16px;
    margin: 0;
}

/* Responsive Anpassungen für Dokumentvorschau */
@media (max-width: 768px) {
    .document-content,
    .diff-content {
        padding: 16px;
        font-size: 14px;
    }
    
    .diff-content h1 { font-size: 1.75em; }
    .diff-content h2 { font-size: 1.4em; }
    .diff-content h3 { font-size: 1.2em; }
    
    .diff-content .diff-stats {
        gap: 12px;
        padding: 12px;
    }
    
    .diff-content .diff-stat-item {
        font-size: 13px;
    }
}

/* Komprimierte System-Messages */
.compressed-system-message {
    opacity: 0.85;
}

.compressed-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, var(--ast-global-color-5) 0%, var(--ast-border-color) 100%);
    border-left: 3px solid #6c757d;
    border-radius: 3px;
}

.compressed-message-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 13px;
    color: var(--ast-global-color-3);
}

.compressed-icon {
    font-size: 18px;
}

.load-result-btn {
    background-color: var(--ast-global-color-0);
    border: none;
    border-color: var(--ast-global-color-0);
    color: white;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.5em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.load-result-btn:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

.load-result-btn i {
    font-size: 12px;
}

/* Version Restore Marker (Checkpoint im Chat) */
.version-restore-marker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    width: 100%;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.version-restore-marker:hover {
    opacity: 0.9;
}
.version-restore-line {
    flex: 1;
    height: 1px;
    background: #b0b8c1;
}
.version-restore-btn {
    background: none;
    border: 1px solid var(--ast-border-color);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    color: #656d76;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
    line-height: 1.4;
}
.version-restore-btn:hover {
    color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    background: rgba(4, 107, 210, 0.06);
}
.version-restore-btn i {
    font-size: 10px;
}

/* ========================================
   Text Paste Dialog
   ======================================== */

.agent-paste-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

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

.agent-paste-dialog {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

.agent-paste-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ast-border-color);
}

.agent-paste-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ast-global-color-2);
}

.agent-paste-dialog-close {
    background: none;
    border: none;
    color: var(--ast-global-color-3);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.2s;
}

.agent-paste-dialog-close:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.agent-paste-dialog-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.agent-paste-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--ast-border-color);
}

.agent-paste-dialog-btn {
    padding: 10px 20px;
    border-radius: 3px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.agent-paste-dialog-btn.secondary {
    background: transparent;
    color: var(--ast-global-color-2);
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
    padding: 13px 28px;
    line-height: 1em;
}

.agent-paste-dialog-btn.secondary:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.agent-paste-dialog-btn.primary {
    background-color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #ffffff;
}

.agent-paste-dialog-btn.primary:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

/* Preview Upload Buttons */
.preview-upload-btn {
    padding: 10px 20px;
    border-radius: 3px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #ffffff;
}

.preview-upload-btn:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

.preview-upload-btn.secondary {
    background: transparent;
    color: var(--ast-global-color-2);
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
    padding: 13px 28px;
    line-height: 1em;
}

.preview-upload-btn.secondary:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.preview-upload-btn i {
    font-size: 16px;
}

/* ========================================
   Modes Filter Inputs
   ======================================== */

.scribigo-modes-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 3px;
}

.scribigo-modes-filters > div {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.scribigo-modes-filters .filter-group {
    flex: 1;
    min-width: 250px;
}

.scribigo-modes-filters .filter-group-narrow {
    min-width: 200px;
}

.scribigo-modes-filters label {
    margin-right: 5px;
    font-weight: 600;
}

.scribigo-modes-table-wrapper {
    margin-bottom: 20px;
}

#modes-search-filter,
#modes-category-filter,
#modes-target-filter {
    width: 100%;
    height: 50px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 38px;
    outline: none;
    transition: border-color 0.2s;
}

#modes-search-filter:focus,
#modes-category-filter:focus,
#modes-target-filter:focus {
    border-color: var(--ast-global-color-0);
}

/* Badge Styles */
.category-badge,
.main-choice-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid;
}

.category-badge:hover,
.main-choice-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Target Badge Colors */
.target-analyze {
    background: rgba(30, 64, 175, 0.01);
    color: var(--ast-global-color-1);
    border-color: rgba(30, 64, 175, 0.5);
}

.target-improve {
    background: rgba(4, 120, 87, 0.01);
    color: #047857;
    border-color: rgba(4, 120, 87, 0.5);
}

.target-translate {
    background: rgba(91, 33, 182, 0.01);
    color: #5b21b6;
    border-color: rgba(91, 33, 182, 0.5);
}

.target-extras {
    background: rgba(180, 83, 9, 0.01);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.5);
}

.target-default {
    background: rgba(55, 65, 81, 0.01);
    color: var(--ast-global-color-2);
    border-color: rgba(55, 65, 81, 0.5);
}

/* ========================================
   Additional Styles from JS (migrated)
   ======================================== */

/* Search Controls */
.toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.toolbar-search #searchInput {
    width: 100%;
    min-width: 0;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.2s;
}

.toolbar-search #searchInput:focus {
    outline: none;
    border-color: var(--ast-global-color-0);
    box-shadow: 0 0 0 3px rgba(4, 107, 210, 0.1);
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-nav-compact {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 2px;
}

#searchClearBtn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
}

#searchCounter {
    font-size: 12px;
    color: #656d76;
    min-width: 40px;
    text-align: center;
}

#searchPrevBtn,
#searchNextBtn {
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
    transform: none;
    color: var(--ast-global-color-3);
}

#searchPrevBtn:hover,
#searchNextBtn:hover {
    background: var(--ast-global-color-5);
    border: none;
    box-shadow: none;
    transform: none;
    color: var(--ast-global-color-2);
}

#searchPrevBtn i,
#searchNextBtn i {
    font-size: 11px;
}

/* View Toggle Group */
.view-toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: transparent;
    border-radius: 0;
    border: none;
}

.view-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: #656d76;
    margin-right: 2px;
}

/* Kompakte View-Switch-Gruppe (Multi-Switch-Style) */
.view-switch-compact {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ast-global-color-5);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    padding: 2px;
}

.view-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #656d76;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-switch-btn:hover {
    background: rgba(4, 107, 210, 0.1);
    color: var(--ast-global-color-0);
}

.view-switch-btn.active {
    background: white;
    color: var(--ast-global-color-0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile: Noch kompakter */
@media (max-width: 968px) {
    .view-switch-compact {
        padding: 1px;
    }
    
    .view-switch-btn {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

/* Unified Button Styles for all Toolbar Buttons */
.toolbar-btn,
.view-toggle-btn,
.search-nav-btn,
.search-close-btn,
.search-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    color: #656d76;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 36px;
    min-width: 36px;
}

/* Icon-only Buttons */
.toolbar-btn-icon,
.view-toggle-btn-icon,
.search-nav-btn,
.search-close-btn,
.search-option {
    padding: 0;
}

/* Hover States */
.toolbar-btn:hover,
.view-toggle-btn:hover,
.search-nav-btn:hover,
.search-close-btn:hover,
.search-option:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

/* Active States */
.toolbar-btn.active,
.view-toggle-btn.active {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: white;
}

/* Checked State for Toggle Buttons */
.search-option:has(input:checked) {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: white;
}

.search-option input[type="checkbox"] {
    display: none;
}

.search-option input[type="checkbox"]:checked + span {
    color: white;
}

/* Focus States */
.toolbar-btn:focus,
.view-toggle-btn:focus,
.search-nav-btn:focus,
.search-close-btn:focus {
    outline: none;
}

/* Disabled States */
.toolbar-btn:disabled,
.view-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.view-toggle-separator,
.view-switch-separator {
    width: 1px;
    height: 24px;
    background: var(--ast-border-color);
    margin: 0 8px;
}

/* Message Action Buttons */
.message-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-message:hover .message-actions {
    opacity: 1;
}

.message-action-btn {
    background: transparent;
    border: 1px solid var(--ast-border-color);
    color: #656d76;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
}

.message-action-btn:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

.message-action-btn.active {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: white;
}

.message-action-btn svg {
    flex-shrink: 0;
}

.copy-btn {
    /* Inherits from message-action-btn */
}

/* Chapter Select Button */
.chapter-select-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background-color: var(--ast-global-color-0);
    border: none;
    border-color: var(--ast-global-color-0);
    color: white;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(4, 107, 210, 0.3);
}

.diff-paragraph:hover .chapter-select-btn,
.diff-paragraph.focused .chapter-select-btn {
    opacity: 1;
}

.chapter-select-btn:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
    transform: translateY(-50%);
}

.chapter-select-btn i {
    font-size: 12px;
}

/* Change Navigation Highlight */
.change-highlight {
    box-shadow: 
        0 0 0 1px rgba(33, 150, 243, 0.95),
        0 0 8px rgba(33, 150, 243, 0.7),
        0 0 16px rgba(33, 150, 243, 0.4);
    border-radius: 2px;
    background-color: rgba(33, 150, 243, 0.15);
}

.change-highlight.combo-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 
        -1px 0 0 0 rgba(33, 150, 243, 0.95),
        0 -1px 0 0 rgba(33, 150, 243, 0.95),
        0 1px 0 0 rgba(33, 150, 243, 0.95),
        0 0 8px rgba(33, 150, 243, 0.7),
        0 0 16px rgba(33, 150, 243, 0.4);
}

.change-highlight.combo-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    box-shadow: 
        1px 0 0 0 rgba(33, 150, 243, 0.95),
        0 -1px 0 0 rgba(33, 150, 243, 0.95),
        0 1px 0 0 rgba(33, 150, 243, 0.95),
        0 0 8px rgba(33, 150, 243, 0.7),
        0 0 16px rgba(33, 150, 243, 0.4);
}

/* INS/DEL Tags - clickable */
ins, del {
    cursor: pointer;
    transition: opacity 0.2s;
}

ins:hover, del:hover {
    opacity: 0.8;
}

/* ========================================
   Analysis Action Bars
   ======================================== */

/* Analysis Document Elements - Support für alle Markdown-HTML-Elemente */
.analysis-document p,
.analysis-document h1,
.analysis-document h2,
.analysis-document h3,
.analysis-document h4,
.analysis-document h5,
.analysis-document h6,
.analysis-document ul,
.analysis-document ol,
.analysis-document li,
.analysis-document table,
.analysis-document blockquote,
.analysis-document pre,
.analysis-document code,
.analysis-document div.content-block {
    position: relative;
    padding: 8px 80px 8px 12px; /* Rechts Platz für Buttons, reduziertes vertikales Padding */
    margin: 6px 0; /* Reduzierte Abstände */
    border-radius: 3px;
    transition: background 0.2s;
    min-height: 32px; /* Reduzierte Mindesthöhe */
}


.analysis-document hr {
    margin: 12px 0; /* Reduzierte Abstände */
    border: none;
    height: 1px;
    background: #e1e4e8;
}


/* Spezifische Überschriften-Größen für Display (nicht Print) */
.analysis-document h1 {
    font-size: 1.5em; /* ~24px statt riesig */
    font-weight: 600;
    margin: 12px 0 8px 0; /* Reduzierte Abstände */
    padding-top: 12px;
    padding-bottom: 8px;
}

.analysis-document h2 {
    font-size: 1.3em; /* ~21px */
    font-weight: 600;
    margin: 10px 0 6px 0;
    padding-top: 10px;
    padding-bottom: 6px;
}

.analysis-document h3 {
    font-size: 1.15em; /* ~18px */
    font-weight: 600;
    margin: 8px 0 5px 0;
    padding-top: 8px;
    padding-bottom: 5px;
}

.analysis-document h4 {
    font-size: 1.05em; /* ~17px */
    font-weight: 600;
    margin: 8px 0 4px 0;
}

.analysis-document h5,
.analysis-document h6 {
    font-size: 1em; /* ~16px */
    font-weight: 600;
    margin: 6px 0 4px 0;
}

/* Paragraphen - reduzierte Abstände */
.analysis-document p {
    margin: 6px 0;
    line-height: 1.6;
}

/* Listen - korrekte Einrückung und Abstände */
.analysis-document ul,
.analysis-document ol {
    margin: 6px 0;
    padding: 8px 12px 8px 32px !important; /* Links genug Platz für Bullets */
}

.analysis-document li {
    margin: 4px 0;
    padding: 4px 80px 4px 4px !important; /* Reduzierte Abstände */
    min-height: 24px;
}

/* Verschachtelte Listen - zusätzliche Einrückung */
.analysis-document ul ul,
.analysis-document ol ol,
.analysis-document ul ol,
.analysis-document ol ul {
    margin: 2px 0;
    padding-left: 24px !important;
}

/* Emoji-Größe begrenzen */
.analysis-document img.emoji {
    width: 1.2em !important;
    height: 1.2em !important;
    vertical-align: -0.2em;
    display: inline-block;
    max-width: 1.2em;
    max-height: 1.2em;
}

/* Hover-Effekt für alle Elemente - unterschiedliche Farben */
/* Überschriften - leichtes Blau */
.analysis-document h1:hover,
.analysis-document h2:hover,
.analysis-document h3:hover,
.analysis-document h4:hover,
.analysis-document h5:hover,
.analysis-document h6:hover {
    background: #ddf4ff;
}

/* Paragraphen - Standard Grau */
.analysis-document p:hover {
    background: var(--ast-global-color-5);
}

/* Listen-Container - leichtes Gelb */
.analysis-document ul:hover,
.analysis-document ol:hover {
    background: #fff8c5;
}

/* Listen-Items - Standard Grau */
.analysis-document li:hover {
    background: var(--ast-global-color-5);
}

/* Code/Pre - leichtes Lila */
.analysis-document pre:hover,
.analysis-document code:hover {
    background: #fbf0ff;
}

/* Blockquotes - leichtes Grün */
.analysis-document blockquote:hover {
    background: #dafbe1;
}

/* Tabellen - leichtes Orange */
.analysis-document table:hover {
    background: #fff1e5;
}

/* Sonstige - Standard Grau */
.analysis-document hr:hover,
.analysis-document div.content-block:hover {
    background: var(--ast-global-color-5);
}

/* Analysis Action Buttons - oben rechts überlagernd */
.analysis-actions {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    display: flex !important;
    gap: 4px;
    opacity: 0 !important; /* Standardmäßig immer versteckt */
    transition: opacity 0.2s;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    pointer-events: auto; /* Immer klickbar */
}

/* Erweitere Hover-Bereich mit Pseudo-Element */
.analysis-actions::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
}

/* Zeige Action-Bars nur beim direkten Hover - NUR das Element selbst + direkte Kinder */
/* Einzelne Elemente ohne Verschachtelung */
.analysis-document p:hover > .analysis-actions,
.analysis-document h1:hover > .analysis-actions,
.analysis-document h2:hover > .analysis-actions,
.analysis-document h3:hover > .analysis-actions,
.analysis-document h4:hover > .analysis-actions,
.analysis-document h5:hover > .analysis-actions,
.analysis-document h6:hover > .analysis-actions,
.analysis-document pre:hover > .analysis-actions,
.analysis-document code:hover > .analysis-actions,
.analysis-document hr:hover > .analysis-actions,
.analysis-document blockquote:hover > .analysis-actions,
.analysis-document table:hover > .analysis-actions,
.analysis-document div.content-block:hover > .analysis-actions,
/* Listen-Elemente */
.analysis-document li:hover > .analysis-actions,
/* Liste + direkte li Kinder */
.analysis-document ul:not(:hover ul):hover > .analysis-actions,
.analysis-document ol:not(:hover ol):hover > .analysis-actions,
.analysis-document ul:not(:hover ul):hover > li > .analysis-actions,
.analysis-document ol:not(:hover ol):hover > li > .analysis-actions,
/* Action-Bar selbst beim Hover */
.analysis-actions:hover {
    opacity: 1 !important;
}

.analysis-action-btn {
    background: transparent;
    border: 1px solid var(--ast-border-color);
    color: #656d76;
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
}

.analysis-action-btn:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

.analysis-action-btn:active {
    transform: scale(0.95);
    background: #e1e8ef;
}

.analysis-action-btn.adopt-btn:hover {
    background: #ddf4ff;
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

.analysis-action-btn.adopt-btn:active {
    background: #b6e3ff;
    transform: scale(0.95);
}

.analysis-action-btn i {
    pointer-events: none;
}

/* ========================================
   Print Styles für Analyse
   ======================================== */

@media print {
    /* Verstecke standardmäßig alles */
    body * {
        visibility: hidden;
    }
    
    /* Zeige den kompletten Pfad zum Analyse-Content */
    .scribigo-agent-preview,
    .scribigo-agent-preview *,
    .preview-content,
    .preview-content *,
    .preview-document,
    .preview-document *,
    #analysisContentBody,
    #analysisContentBody * {
        visibility: visible !important;
    }
    
    /* Positioniere für Druck */
    .scribigo-agent-preview {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
    
    #analysisContentBody {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Verstecke UI-Elemente beim Drucken */
    .analysis-toolbar,
    .analysis-actions,
    .paragraph-ref-link {
        display: none !important;
    }
    
    /* Optimiere Schriftarten für Druck */
    #analysisContentBody {
        font-size: 12pt !important;
        line-height: 1.5 !important;
        color: #000 !important;
    }
    
    /* Überschriften */
    .analysis-document h1 { font-size: 18pt; margin: 16pt 0 8pt 0; page-break-after: avoid; }
    .analysis-document h2 { font-size: 16pt; margin: 14pt 0 7pt 0; page-break-after: avoid; }
    .analysis-document h3 { font-size: 14pt; margin: 12pt 0 6pt 0; page-break-after: avoid; }
    .analysis-document h4 { font-size: 13pt; margin: 10pt 0 5pt 0; page-break-after: avoid; }
    .analysis-document h5 { font-size: 12pt; margin: 8pt 0 4pt 0; page-break-after: avoid; }
    .analysis-document h6 { font-size: 11pt; margin: 8pt 0 4pt 0; page-break-after: avoid; }
    
    /* Absätze */
    .analysis-document p {
        margin: 0 0 8pt 0;
        padding: 0 !important;
        background: none !important;
        orphans: 3;
        widows: 3;
    }
    
    /* Listen */
    .analysis-document ul,
    .analysis-document ol {
        margin: 8pt 0;
        padding: 0 0 0 20pt !important;
        background: none !important;
    }
    
    .analysis-document li {
        margin: 4pt 0;
        padding: 0 !important;
        background: none !important;
    }
    
    /* Code-Blöcke */
    .analysis-document pre,
    .analysis-document code {
        background: #f6f6f6 !important;
        border: 1px solid #ddd;
        padding: 8pt;
        font-family: 'Courier New', monospace;
        font-size: 10pt;
        page-break-inside: avoid;
    }
    
    /* Blockquotes */
    .analysis-document blockquote {
        background: none !important;
        border-left: 3px solid #666;
        padding: 8pt 12pt !important;
        margin: 8pt 0;
        font-style: italic;
        page-break-inside: avoid;
    }
    
    /* Tabellen */
    .analysis-document table {
        border-collapse: collapse;
        width: 100%;
        margin: 8pt 0;
        background: none !important;
        page-break-inside: avoid;
    }
    
    .analysis-document table th,
    .analysis-document table td {
        border: 1px solid #000;
        padding: 4pt 8pt;
        text-align: left;
    }
    
    .analysis-document table th {
        background: #f0f0f0 !important;
        font-weight: bold;
    }
    
    /* Seitenumbrüche */
    .analysis-document h1,
    .analysis-document h2,
    .analysis-document h3 {
        page-break-after: avoid;
    }
    
    .analysis-document table,
    .analysis-document blockquote,
    .analysis-document pre {
        page-break-inside: avoid;
    }
}

/* ========================================
   Analysis Detail View - Chunks & Sub-Tabs
   ======================================== */

/* Sub-Tab Buttons in der Toolbar */
.analysis-view-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    background: var(--ast-global-color-5);
    border-radius: 3px;
    padding: 3px;
    border: 1px solid var(--ast-border-color);
}

.analysis-view-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #656d76;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.analysis-view-tab:hover {
    color: var(--ast-global-color-2);
    background: rgba(0, 0, 0, 0.04);
}

.analysis-view-tab.active {
    background: #ffffff;
    color: var(--ast-global-color-0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.analysis-view-tab i {
    font-size: 12px;
}

/* Chunk-Navigation (Sprungmarken oben) */
.analysis-chunk-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--ast-global-color-5);
    border-bottom: 1px solid #e8e8e8;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

.analysis-chunk-nav-label {
    font-size: 12px;
    font-weight: 600;
    color: #656d76;
    margin-right: 4px;
}

.analysis-chunk-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    color: var(--ast-global-color-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.analysis-chunk-nav-item:hover {
    background: #ddf4ff;
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Assembling-Hinweis */
.analysis-assembling-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff8c5;
    border-bottom: 1px solid #e8d44d;
    color: #6e5a00;
    font-size: 13px;
}

.analysis-assembling-notice i {
    color: #9a6700;
}

/* Chunk-Abschnitte */
.analysis-chunk-section {
    border-bottom: 1px solid #e8e8e8;
    scroll-margin-top: 48px;
}

.analysis-chunk-section:last-child {
    border-bottom: none;
}

.analysis-chunk-header {
    padding: 14px 16px 10px;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analysis-chunk-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.analysis-chunk-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.analysis-chunk-actions .toolbar-btn-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
    opacity: 1;
    transition: opacity 0.15s;
}

.analysis-chunk-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ast-global-color-2);
}

.analysis-chunk-title strong {
    font-weight: 700;
    font-size: 14px;
}

.analysis-chunk-meta {
    font-size: 12px;
    color: #656d76;
    font-weight: 400;
}

.analysis-chunk-meta .paragraph-ref-link {
    color: var(--ast-global-color-0);
    text-decoration: none;
    font-weight: 500;
}

.analysis-chunk-meta .paragraph-ref-link:hover {
    text-decoration: underline;
}

.analysis-chunk-pending {
    font-size: 12px;
    color: #9a6700;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Kapitel-Links im Chunk-Header */
.analysis-chunk-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    flex-basis: 100%;
}

.analysis-chapter-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #f0f0ff;
    border: 1px solid #d8d8f0;
    border-radius: 6px;
    color: #5b4fc7;
    font-size: 11px;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.analysis-chapter-link:hover {
    background: #e0e0ff;
    border-color: #8b7fc9;
    color: #4338ca;
}

.analysis-chapter-link i {
    font-size: 10px;
}

/* Chunk-Content */
.analysis-chunk-content {
    padding: 0 4px;
}

.analysis-chunk-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #8b949e;
    font-size: 13px;
    font-style: italic;
}

/* Zusammenfassung Button */
.agent-analysis-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #8250df 0%, #6f42c1 100%);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.agent-analysis-btn:hover {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(130, 80, 223, 0.3);
}

.agent-analysis-btn:active {
    transform: translateY(0);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .analysis-view-tabs {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .analysis-chunk-header {
        padding: 10px 12px 8px;
    }

    .analysis-chunk-nav {
        padding: 8px 12px;
    }
}

/* Print: Chunk-Navigation und Sub-Tabs ausblenden */
@media print {
    .analysis-view-tabs,
    .analysis-chunk-nav,
    .analysis-assembling-notice,
    .analysis-chapter-link,
    .analysis-chunk-actions,
    .agent-analysis-btn {
        display: none !important;
    }

    .analysis-chunk-section {
        page-break-inside: avoid;
        border-bottom: 1px solid #ccc;
        margin-bottom: 12pt;
    }

    .analysis-chunk-header {
        background: none !important;
        padding: 8pt 0;
    }
}

/* ========================================
   Generic Modal / Dialog System
   ======================================== */

/* showGenericModal() */
.scribigo-generic-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scribigo-modal-fadein 0.2s ease-out;
}

.scribigo-generic-modal .scribigo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.scribigo-modal-content {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    animation: scribigo-modal-slideup 0.3s ease-out;
}

.scribigo-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ast-border-color);
}

.scribigo-modal-header i {
    font-size: 24px;
}

.scribigo-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ast-global-color-2);
}

.scribigo-modal-body {
    padding: 24px;
    color: var(--ast-global-color-3);
    line-height: 1.6;
}

.scribigo-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--ast-border-color);
}

.scribigo-modal-btn {
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-transform: uppercase;
}

.scribigo-modal-btn.primary {
    background-color: var(--ast-global-color-0);
    color: white;
    border-radius: 3px;
}

.scribigo-modal-btn.primary:hover {
    background-color: var(--ast-global-color-8);
}

.scribigo-modal-btn.secondary {
    background: transparent;
    color: var(--ast-global-color-2);
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
    padding: 13px 28px;
}

.scribigo-modal-btn.secondary:hover {
    background: var(--ast-global-color-5);
}

/* Reusable dialog classes for inline-constructed dialogs */
.scribigo-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: scribigo-modal-fadein 0.2s ease-out;
}

.scribigo-dialog-box {
    background: #fff;
    border-radius: 6px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scribigo-modal-slideup 0.3s ease-out;
}

.scribigo-dialog-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ast-border-color);
}

.scribigo-dialog-header h2,
.scribigo-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ast-global-color-2);
}

.scribigo-dialog-body {
    padding: 24px;
}

.scribigo-dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--ast-border-color);
}

.scribigo-dialog-footer.with-bg {
    background: var(--ast-global-color-5);
    padding: 20px 24px;
}

.scribigo-dialog-btn-primary {
    padding: 10px 20px;
    border: none;
    background-color: var(--ast-global-color-0);
    color: #fff;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.scribigo-dialog-btn-primary:hover {
    background-color: var(--ast-global-color-8);
}

.scribigo-dialog-btn-secondary {
    padding: 10px 20px;
    border: 2px solid var(--ast-global-color-6);
    background: transparent;
    color: var(--ast-global-color-2);
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.scribigo-dialog-btn-secondary:hover {
    background: var(--ast-global-color-5);
}

.scribigo-dialog-footer.with-bg .scribigo-dialog-btn-secondary {
    background: #fff;
}

.scribigo-dialog-footer.with-bg .scribigo-dialog-btn-secondary:hover {
    background: var(--ast-border-color);
}

.scribigo-dialog-close-btn {
    background: none;
    border: none;
    color: var(--ast-global-color-3);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 18px;
    transition: all 0.2s;
}

.scribigo-dialog-close-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

/* ========================================
   Download Format Modal
   ======================================== */

.scribigo-download-format-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scribigo-modal-fadein 0.2s ease-out;
}

.download-format-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.download-format-content {
    position: relative;
    background: white;
    border-radius: 6px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scribigo-modal-slideup 0.3s ease-out;
}

.download-format-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ast-border-color);
}

.download-format-header i {
    font-size: 24px;
    color: var(--ast-global-color-0);
}

.download-format-header h3 {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ast-global-color-2);
}

.download-format-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--ast-global-color-3);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s;
}

.download-format-close:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.download-format-body {
    padding: 24px;
}

.format-selection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.format-selection label {
    font-weight: 600;
    color: var(--ast-global-color-2);
    font-size: 14px;
}

.format-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 0.9rem;
}

.conversion-notice {
    margin-top: 12px;
    padding: 12px;
    background: #cde9ff;
    border: 1px solid #075aff;
    border-radius: 3px;
    color: #1e3175;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.conversion-notice i {
    margin-top: 2px;
    margin-right: 4px;
    flex-shrink: 0;
}

.download-format-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--ast-border-color);
    justify-content: flex-end;
}

.download-format-btn {
    padding: 10px 20px;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-format-btn.secondary {
    background: transparent;
    color: var(--ast-global-color-2);
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
    padding: 13px 28px;
    line-height: 1em;
}

.download-format-btn.secondary:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.download-format-btn.primary {
    background-color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: white;
}

.download-format-btn.primary:hover {
    background-color: var(--ast-global-color-8);
    border-color: var(--ast-global-color-8);
}

/* ========================================
   Comment System (MS Word Style)
   ======================================== */

/* Preview Container with Comments */
.preview-with-comments {
    display: flex;
    gap: 0;
    height: 100%;
    position: relative;
}

.preview-with-comments.with-sidebar .preview-tab-content {
    flex: 1;
    min-width: 0;
}

/* Comment Element (alt, noch f\u00fcr Kompatibilit\u00e4t) */
comment {
    display: inline;
    position: relative;
    cursor: pointer;
    background-color: #fff4ce;
    border-bottom: 1px solid #ffcc00;
    transition: background-color 0.2s;
}

/* NEW: comment-range-start/end Spans - Mit MS Word-Style Markierung */
.comment-range-start {
    display: inline;
    position: relative;
    font-size: inherit;
    line-height: inherit;
    background-color: rgba(173, 216, 230, 0.2); /* Blassblau */
    border-left: 2px solid rgba(100, 149, 237, 0.4); /* Dünne blaue Linie links */
    padding-left: 2px;
}

.comment-range-end {
    display: inline;
    position: relative;
    font-size: inherit;
    line-height: inherit;
    background-color: rgba(173, 216, 230, 0.2); /* Blassblau */
    border-right: 2px solid rgba(100, 149, 237, 0.4); /* Dünne blaue Linie rechts */
    padding-right: 2px;
}

/* Text ZWISCHEN comment-range-start und -end bekommt auch Hintergrund */
/* Dies wird über JavaScript durch .comment-static-highlight Klasse gesteuert */
.comment-static-highlight {
    background-color: rgba(173, 216, 230, 0.2) !important; /* Blassblau */
}

/* Hover-State: Intensivere Farbe */
.comment-range-start:hover,
.comment-range-end:hover,
.comment-static-highlight:hover {
    background-color: rgba(173, 216, 230, 0.35) !important;
}

/* WICHTIG: Wenn Element sowohl static als auch hover-highlighted ist, gewinnt hover */
.comment-static-highlight.comment-highlighted {
    background-color: #fff4ce !important;
    border-bottom: 1px solid #ffcc00 !important;
}

.comment-static-highlight.comment-highlighted-text {
    background-color: #fff4ce !important;
    border-bottom: 1px solid #ffcc00 !important;
}

/* Optional: Debugging-Marker (nur im Entwicklungsmodus sichtbar) */
/*
.comment-range-start::before {
    content: '[';
    color: blue;
    font-size: 8px;
    vertical-align: super;
}

.comment-range-end::after {
    content: ']';
    color: blue;
    font-size: 8px;
    vertical-align: super;
}
*/

/* Verschachtelungsebenen - Unterschiedliche Hintergrundfarben */
/* WICHTIG: Spezifität erhöhen, damit verschachtelte Kommentare eigene Farben behalten */
comment.comment-level-0 {
    background-color: #ddd6fe !important; /* Violett-Blau hell */
    border-bottom: 1px solid var(--ast-global-color-0) !important;
}

/* Hover: Nur wenn kein Kind-Comment gehovert wird */
comment.comment-level-0:hover:not(:has(comment:hover)) {
    background-color: #c4b5fd !important; /* Violett-Blau dunkler */
}

comment.comment-level-0.comment-active {
    background-color: #c4b5fd !important;
}

comment.comment-level-1 {
    background-color: #d1fae5 !important; /* Grün hell */
    border-bottom: 1px solid #10b981 !important;
}

comment.comment-level-1:hover:not(:has(comment:hover)) {
    background-color: #a7f3d0 !important; /* Grün dunkler */
}

comment.comment-level-1.comment-active {
    background-color: #a7f3d0 !important;
}

comment.comment-level-2 {
    background-color: #fed7aa !important; /* Orange hell */
    border-bottom: 1px solid #f59e0b !important;
}

comment.comment-level-2:hover:not(:has(comment:hover)) {
    background-color: #fdc97d !important; /* Orange dunkler */
}

comment.comment-level-2.comment-active {
    background-color: #fdc97d !important;
}

comment.comment-level-3 {
    background-color: #fecaca !important; /* Rot hell */
    border-bottom: 1px solid #ef4444 !important;
}

comment.comment-level-3:hover:not(:has(comment:hover)) {
    background-color: #fca5a5 !important; /* Rot dunkler */
}

comment.comment-level-3.comment-active {
    background-color: #fca5a5 !important;
}

comment.comment-level-4 {
    background-color: #e9d5ff !important; /* Lila hell */
    border-bottom: 1px solid #8b5cf6 !important;
}

comment.comment-level-4:hover:not(:has(comment:hover)) {
    background-color: #d8b4fe !important; /* Lila dunkler */
}

comment.comment-level-4.comment-active {
    background-color: #d8b4fe !important;
}

/* NEW: Highlighting für commentRangeStart/End System */
/* Elemente zwischen commentRangeStart und commentRangeEnd werden dynamisch gehighlighted */
.comment-highlighted {
    background-color: #fff4ce !important;
    border-bottom: 1px solid #ffcc00;
    transition: background-color 0.2s;
}

/* Text-Nodes die direkt gewrapped werden (inline highlighting) */
.comment-highlighted-text {
    background-color: #fff4ce;
    border-bottom: 1px solid #ffcc00;
    transition: background-color 0.2s;
}

/* Inline-Modus: Subtileres Highlighting */
#agentPreview.comments-inline .comment-highlighted,
#agentPreview.comments-inline .comment-highlighted-text {
    background-color: #fffaed;
    border-bottom: 1px solid #ffe699;
}

/* Hidden Mode: Comments komplett ausblenden */
#agentPreview.comments-hidden comment {
    background-color: transparent !important;
    border-bottom: none !important;
    cursor: default;
}

#agentPreview.comments-hidden comment::before {
    display: none;
}

/* Sidebar Mode: Weniger auffälliges Highlighting */
#agentPreview.comments-sidebar comment {
    background-color: #fffaed;
    border-bottom: 1px solid #ffe699;
}

#agentPreview.comments-sidebar comment:hover {
    background-color: #fff4ce;
}

/* Flash Highlight bei Klick auf Sidebar-Kommentar */
comment.comment-highlight-flash {
    animation: commentFlash 2s ease;
}

@keyframes commentFlash {
    0%, 100% { background-color: #fff4ce; }
    50% { background-color: #ffd700; }
}

/* Comment Icon - ENTFERNT (Kommentare sind bereits durch Karten sichtbar) */
/* comment::before entfernt, keine Sprechblase mehr */

/* Nested Comments - different color */
comment comment {
    background-color: #e6f7ff;
    border-bottom-color: #1890ff;
}

comment comment:hover,
comment comment.comment-active {
    background-color: #bae7ff;
}

/* ========================================
   Comment Sidebar
   ======================================== */

.comment-sidebar {
    width: 350px;
    min-width: 300px;
    max-width: 400px;
    background: var(--ast-global-color-5);
    border-left: 1px solid var(--ast-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comment-sidebar-header {
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--ast-border-color);
}

.comment-sidebar-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-sidebar-header i {
    color: var(--ast-global-color-3);
}

.comment-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    position: relative;
}

.comment-sidebar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--ast-global-color-3);
}

.comment-sidebar-placeholder i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.comment-sidebar-placeholder p {
    margin: 0;
    font-size: 14px;
}

/* Sidebar Comment Cards */
.sidebar-comment-card {
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    margin-bottom: 12px;
    transition: all 0.2s;
    padding: 0;
}

.sidebar-comment-card:hover {
    border-color: var(--ast-global-color-0);
    box-shadow: 0 2px 8px rgba(4, 107, 210, 0.15);
}

.sidebar-comment-card.highlight {
    border-color: var(--ast-global-color-0);
    background: #f0f4ff;
    box-shadow: 0 2px 8px rgba(4, 107, 210, 0.25);
}

.sidebar-comment-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--ast-global-color-0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-comment-content {
    flex: 1;
    min-width: 0;
}

.sidebar-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.sidebar-comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ast-border-color);
    color: var(--ast-global-color-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.sidebar-comment-name {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
}

.sidebar-comment-date {
    font-size: 11px;
    color: var(--ast-global-color-7);
}

.sidebar-comment-text {
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sidebar-comment-replies {
    font-size: 12px;
    color: var(--ast-global-color-0);
    font-weight: 500;
}

/* Nested Replies in Sidebar */
.sidebar-comment-card {
    padding: 0;
}

.sidebar-comment-main {
    padding: 12px;
    display: flex;
    gap: 12px;
}

.sidebar-comment-replies-container {
    border-top: 1px solid var(--ast-border-color);
    background: var(--ast-global-color-5);
    padding: 8px 12px 12px 12px;
    border-radius: 0 0 8px 8px;
}

.sidebar-comment-reply {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
}

.sidebar-reply-indicator {
    flex-shrink: 0;
    color: var(--ast-global-color-7);
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

.sidebar-reply-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-reply-content .sidebar-comment-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.sidebar-reply-content .sidebar-comment-text {
    margin-bottom: 0;
}


/* ========================================
   Comment System - Inline Layout
   ======================================== */

/* Inline Mode: Zwei-Spalten-Layout für Paragraphen mit Kommentaren */
#agentPreview.comments-inline .diff-content {
    position: relative; /* Für absolute Positionierung der Kommentar-Spalte */
    padding-right: 374px; /* Platz für Kommentar-Spalte (350px + 24px Gap) */
    min-width: 756px; /* Mindestbreite: 350px Text + 30px Padding + 350px Kommentare + 26px Gap */
}

/* Paragraphen ohne zusätzlichen Abstand */
#agentPreview.comments-inline .diff-paragraph {
    margin-bottom: 8px;
    max-width: 100%; /* Nutzt verfügbaren Platz minus padding-right */
}

/* Kommentar-Karten-Gruppe erscheint absolut positioniert in der rechten Spalte */
#agentPreview.comments-inline .inline-comment-cards-group {
    position: absolute;
    right: 0;
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 0; /* Kein Gap - nahtlose Gruppen */
}

/* Einzelne Kommentar-Karte - kompaktes Design */
#agentPreview.comments-inline .inline-comment-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-left: 3px solid var(--ast-global-color-0);
    padding: 6px 8px 6px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin: 0; /* Kein Standard-Margin */
} 

/* Parent-Karte - Abstand ÜBER dem Parent (trennt Gruppen) */
#agentPreview.comments-inline .inline-comment-card.comment-parent {
    border-radius: 3px 4px 0 0; /* Nur oben abgerundet */
    margin-top: 12px; /* Abstand zur vorherigen Gruppe */
    margin-bottom: 0; /* KEIN Gap nach unten */
}

/* Erster Parent hat KEINEN Abstand oben */
#agentPreview.comments-inline .inline-comment-cards-group:first-child .comment-parent {
    margin-top: 0;
}

/* NAHTLOSER ÜBERGANG: Replies-Container direkt unter Parent */
.comment-replies-inline {
    margin: 0;
    padding: 0;
}

/* Child-Karten - nahtlos am Parent */
#agentPreview.comments-inline .inline-comment-card.comment-child {
    border-radius: 0; /* Keine Rundungen */
    border-top: none; /* Keine doppelte Border */
    margin: 0; /* KEIN Gap - weder oben noch unten */
}

/* Letztes Child hat abgerundete Ecken unten */
#agentPreview.comments-inline .comment-replies-inline .inline-comment-card:last-child {
    border-radius: 0 0 4px 4px;
    margin: 0; /* KEIN margin-bottom mehr */
}

/* Inline Expand-Button - zwischen Parent und Children */
.inline-expand-btn {
    width: 100%;
    padding: 4px 8px;
    margin: 0; /* KEIN Margin */
    border: 1px solid var(--ast-border-color);
    border-top: none;
    border-left: 3px solid var(--ast-global-color-0); /* Matcht Parent */
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-3);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.inline-expand-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.inline-expand-btn i {
    font-size: 10px;
}

/* Verschachtelungsebenen - NUR für alte Logik (sollte nicht mehr genutzt werden) */
#agentPreview.comments-inline .inline-comment-card.comment-level-0:not(.comment-parent):not(.comment-child) {
    border-left: 3px solid var(--ast-global-color-0);
    margin-left: 0;
    border-radius: 3px;
}

/* Reply-Comments: Zusätzliches Styling für Antworten */
#agentPreview.comments-inline .inline-comment-card.comment-reply {
    background: var(--ast-global-color-5); /* Leicht grauer Hintergrund */
    border-left-style: dashed; /* Gestrichelter Rahmen */
}

/* Reply-Indikator Icon */
#agentPreview.comments-inline .comment-reply-indicator {
    color: var(--ast-global-color-7);
    font-size: 10px;
    margin-left: 4px;
}

#agentPreview.comments-inline .inline-comment-card.comment-reply .comment-reply-indicator {
    color: var(--ast-global-color-0); /* Highlight-Farbe für Reply-Icon */
}

#agentPreview.comments-inline .comment-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px; /* Minimal für Lesbarkeit */
    position: relative;
}

/* NEUE Header Actions Container - rechts neben Meta */
#agentPreview.comments-inline .comment-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    position: relative;
    z-index: 10; /* Über Nummer */
}

/* Kommentar-Nummer in Header - klein neben Buttons */
#agentPreview.comments-inline .comment-header-actions .comment-number {
    font-size: 10px;
    color: var(--ast-global-color-7);
    font-weight: 600;
    background: var(--ast-global-color-5);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 2px;
}

/* ALTE Kommentar-Nummer deaktivieren - wird nicht mehr verwendet */
#agentPreview.comments-inline .comment-card-header > .comment-number {
    display: none;
}

/* Avatar auf dem linken Rahmen positioniert */
#agentPreview.comments-inline .comment-avatar {
    position: absolute;
    left: -30px; /* Avatar-Mitte sitzt genau auf der linken Border (3px breit) */
    top: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--ast-global-color-0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#agentPreview.comments-inline .comment-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Name + Datum auf einer Zeile */
#agentPreview.comments-inline .comment-author {
    font-weight: 600;
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px; /* Kürzen bei zu langen Namen */
}

#agentPreview.comments-inline .comment-date {
    font-size: 10px;
    color: var(--ast-global-color-7);
    white-space: nowrap;
    flex-shrink: 0;
}

#agentPreview.comments-inline .comment-card-text {
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
    /* Kein padding-bottom mehr - Parent-Buttons sind jetzt unten, Children haben keine */
    /* Truncation: max 2 Zeilen, klickbar zum Erweitern */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

/* Erweiterter Zustand: alle Zeilen anzeigen */
#agentPreview.comments-inline .comment-card-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Action Buttons Container - NUR für Parent (Reply/Improve) */
#agentPreview.comments-inline .comment-card-actions {
    display: flex;
    gap: 4px;
    padding-top: 6px; /* Padding statt margin für nahtlosen Übergang */
}

.comment-action-btn {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--ast-global-color-3);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-action-btn:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-2);
}

.comment-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(4, 107, 210, 0.3);
}

.comment-action-btn:active {
    transform: scale(0.95);
}

.delete-comment-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
}

.improve-comment-btn:hover {
    background: color-mix(in srgb, var(--ast-global-color-0) 12%, white);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

/* Resolved/Done Comment Cards */
#agentPreview.comments-inline .inline-comment-card.comment-resolved {
    opacity: 0.6;
    background: var(--ast-global-color-5);
    border-left-color: var(--ast-global-color-7);
}

#agentPreview.comments-inline .inline-comment-card.comment-resolved .comment-card-header {
    color: var(--ast-global-color-3);
}

#agentPreview.comments-inline .inline-comment-card.comment-resolved .comment-card-text {
    color: var(--ast-global-color-7);
    text-decoration: line-through;
}

#agentPreview.comments-inline .inline-comment-card.comment-resolved:hover {
    opacity: 0.8;
}

/* Resolve Button Styling */
.resolve-comment-btn {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    cursor: pointer;
    color: var(--ast-global-color-3);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.resolve-comment-btn:hover {
    background: #dcfce7;
    border-color: #22c55e;
    color: #16a34a;
}

.resolve-comment-btn.resolved {
    background: #dcfce7;
    border-color: #22c55e;
    color: #16a34a;
}

.resolve-comment-btn.resolved:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-border-color);
    color: var(--ast-global-color-3);
}

/* Highlighting für aktive Kommentar-Karte (dauerhaft nach Klick) */
#agentPreview.comments-inline .inline-comment-card.highlighted {
    background: #fef3c7;
    border-left-color: #f59e0b;
    box-shadow: 0 0 0 2px #fbbf24, 0 2px 8px rgba(245, 158, 11, 0.3);
    transition: all 0.2s ease;
}

/* Highlighting für Kommentar im Text (kein Layout-Shift) */
comment.comment-highlighted {
    background: #fef3c7;
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* Highlighting für Navigation (stärker als normales Highlight - kein Layout-Shift) */
/* WICHTIG: Auch für Kommentare in ins/del Tags */
comment.comment-navigation-highlight,
ins comment.comment-navigation-highlight,
del comment.comment-navigation-highlight {
    background: #fcd34d !important;
    outline: 3px solid #f59e0b !important;
    outline-offset: 1px !important;
    border-radius: 2px !important;
    animation: commentPulse 0.5s ease-in-out !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 10 !important;
}

#agentPreview.comments-inline .inline-comment-card.comment-navigation-highlight {
    background: #fcd34d !important;
    border-left-color: #d97706 !important;
    box-shadow: 0 0 0 3px #f59e0b, 0 4px 12px rgba(217, 119, 6, 0.4) !important;
    animation: cardPulse 0.5s ease-in-out;
    transition: all 0.3s ease;
}

@keyframes commentPulse {
    0%, 100% { outline-width: 3px; }
    50% { outline-width: 4px; }
}

@keyframes cardPulse {
    0%, 100% { box-shadow: 0 0 0 3px #f59e0b, 0 4px 12px rgba(217, 119, 6, 0.4); }
    50% { box-shadow: 0 0 0 4px #f59e0b, 0 6px 16px rgba(217, 119, 6, 0.5); }
}

/* Highlighting für ins/del Parent-Elemente die Kommentare enthalten */
ins.comment-parent-highlight {
    background: #d1fae5 !important;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #10b981 !important;
    animation: insParentPulse 0.5s ease-in-out;
}

del.comment-parent-highlight {
    background: #fee2e2 !important;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #ef4444 !important;
    animation: delParentPulse 0.5s ease-in-out;
}

@keyframes insParentPulse {
    0%, 100% { box-shadow: 0 0 0 2px #10b981; }
    50% { box-shadow: 0 0 0 4px #10b981; }
}

@keyframes delParentPulse {
    0%, 100% { box-shadow: 0 0 0 2px #ef4444; }
    50% { box-shadow: 0 0 0 4px #ef4444; }
}

/* Cursor für klickbare Kommentare im inline-Modus */
#agentPreview.comments-inline comment[data-id] {
    cursor: pointer;
}

#agentPreview.comments-inline .inline-comment-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#agentPreview.comments-inline .inline-comment-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Wenn nicht im Inline-Modus, verstecke die Karten */
#agentPreview:not(.comments-inline) .inline-comment-card,
#agentPreview:not(.comments-inline) .inline-comment-cards-group {
    display: none;
}

/* ========================================
   Comment Popups (existing styles)
   ======================================== */

/* Kommentar-Popup - kompakter */
.word-comment-popup {
    position: absolute;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: fadeInUp 0.2s ease;
}

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

/* Popup Header - FLACH wie Inline */
.comment-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #fff;
    position: relative;
}

/* Erste Card hat abgerundete Ecken */
.comment-entry:first-child {
    border-radius: 3px 8px 0 0;
}

.comment-entry:first-child .comment-popup-header {
    border-radius: 3px 8px 0 0;
}

/* NEUE Header Actions Container - rechts neben Meta */
.comment-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    position: relative;
    z-index: 10; /* Über Nummer */
}

/* Kommentar-Nummer in Header - klein neben Buttons */
.comment-header-actions .comment-number {
    font-size: 10px;
    color: var(--ast-global-color-7);
    font-weight: 600;
    background: var(--ast-global-color-5);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 2px;
}

/* ALTE Nummer deaktivieren - wird nicht mehr verwendet */
.comment-popup-header > .comment-number {
    display: none;
}

/* Popup Body - kompakter */
.comment-popup-body {
    padding: 6px 8px;
    position: relative;
}

.comment-text {
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
    /* Kein padding-bottom mehr - Buttons sind jetzt im Header oder unten */
}

/* Action Buttons in Popup - NUR für Parent (Reply/Improve) */
.comment-popup-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

/* Compact Buttons (Edit/Delete im Header) */
.comment-action-compact {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    border: none;
    background: transparent;
    color: var(--ast-global-color-3);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

.comment-action-compact:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

/* Primary Buttons (Reply/Improve im Body) - dezent wie alte Buttons */
.comment-action-primary {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px;
    border: 1px solid var(--ast-border-color);
    background: transparent;
    color: var(--ast-global-color-3);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.comment-action-primary:hover {
    background: var(--ast-global-color-5);
    border-color: var(--ast-global-color-7);
    color: var(--ast-global-color-2);
}

/* Klick-Hinweis im Hover-Preview */
.comment-click-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
    margin-top: 8px;
    padding: 4px 6px;
    background: #f1f5f9;
    border-radius: 3px;
    font-style: italic;
}

.comment-click-hint svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Erster Kommentar hat abgerundete Ecken oben */
.comment-entry:first-child .comment-popup-header {
    border-radius: 3px 8px 0 0;
}

/* Letzter Kommentar Body hat abgerundete Ecken unten */
.comment-entry:last-child .comment-popup-body {
    border-radius: 0 0 8px 8px;
}

/* Separator zwischen verschachtelten Kommentaren */
.comment-separator {
    height: 1px;
    background: var(--ast-border-color);
    margin: 0;
}

/* Expand Button für weitere Antworten - schlank und dezent */
.comment-expand-btn {
    width: 100%;
    padding: 6px 8px;
    margin: 0;
    border: none;
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-3);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-top: 1px solid var(--ast-border-color);
    border-bottom: 1px solid var(--ast-border-color);
}

.comment-expand-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.comment-expand-btn i {
    font-size: 10px;
}

/* Comment Replies Container */
.comment-replies {
    /* Container für Children - keine Extra-Styles nötig */
}

/* Nesting Indicator für Antworten */
.comment-nesting-indicator {
    padding: 8px 16px;
    background: var(--ast-global-color-5);
    font-size: 12px;
    color: var(--ast-global-color-3);
    font-weight: 600;
}

/* Comment Entry Container */
.comment-entry {
    background: #fff;
}

/* Avatar mit Initialen - SCHLANK wie Inline */
.comment-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--ast-global-color-0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
}

/* Autor & Datum - SCHLANK wie Inline: auf einer Zeile */
.comment-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.comment-author-name {
    font-weight: 600;
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.comment-date {
    font-size: 10px;
    color: var(--ast-global-color-7);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Popup Body - SCHLANK */
.comment-popup-body {
    padding: 6px 8px;
}

.comment-text {
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ========================================
Quality Check - Icon an Command-Card
   ======================================== */

/* Quality-Check Icon - Anzeige oben rechts auf der Kante */
.quality-check-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 20px;
    cursor: help;
    z-index: 10;
    background: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.quality-check-icon:hover {
    transform: scale(1.15);
}

/* ========================================
   Kommentar Edit Dialog
   ======================================== */

.comment-edit-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.comment-edit-dialog-overlay[style*="opacity: 1"] {
    opacity: 1;
}

.comment-edit-dialog {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(0) scale(1);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.comment-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ast-border-color);
    background: var(--ast-global-color-5);
    border-radius: 3px 3px 0 0;
}

.comment-edit-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--ast-global-color-2);
    font-weight: 600;
}

.comment-edit-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ast-global-color-3);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
}

.comment-edit-close:hover {
    background: var(--ast-border-color);
    color: var(--ast-global-color-2);
}

.comment-edit-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.comment-edit-field {
    margin-bottom: 16px;
}

.comment-edit-field:last-child {
    margin-bottom: 0;
}

.comment-edit-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--ast-global-color-2);
    font-size: 14px;
}

.comment-target-text {
    background: var(--ast-global-color-5);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ast-global-color-3);
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}

.comment-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-edit-textarea:focus {
    outline: none;
    border-color: var(--ast-global-color-0);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comment-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--ast-border-color);
    background: var(--ast-global-color-5);
    border-radius: 0 0 3px 3px;
}

.comment-edit-cancel,
.comment-edit-save {
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.comment-edit-cancel {
    background: #fff;
    color: var(--ast-global-color-2);
    border: 2px solid var(--ast-global-color-6);
    border-radius: 0;
}

.comment-edit-cancel:hover {
    background: var(--ast-border-color);
    color: var(--ast-global-color-2);
}

.comment-edit-save {
    background-color: var(--ast-global-color-0);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

.comment-edit-save:hover {
    background-color: var(--ast-global-color-8);
}

/* ========================================
   TOOLBAR REDESIGN: Dropdowns + Review-Toolbar + Context-Menü
   ======================================== */

/* Toolbar Container Umstrukturierung */
.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--ast-global-color-5);
    border-bottom: 1px solid var(--ast-border-color);
    position: relative;
}

/* Links: Dropdowns */
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
}

/* Rechts: Review-Toolbar + Selection Counter */
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Dropdown-Container */
.toolbar-dropdown {
    position: relative;
}

/* Dropdown-Trigger Button */
.toolbar-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 32px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    color: var(--ast-global-color-2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-shadow: none;
    outline: none;
}

.toolbar-dropdown-trigger:hover,
.toolbar-dropdown-trigger.menu-open,
.toolbar-dropdown-trigger.active {
    background: color-mix(in srgb, var(--ast-global-color-0) 12%, white);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-0);
}

.toolbar-dropdown-trigger:hover i:first-child,
.toolbar-dropdown-trigger.menu-open i:first-child,
.toolbar-dropdown-trigger.active i:first-child {
    color: var(--ast-global-color-0);
}

.toolbar-dropdown-trigger:active {
    transform: scale(0.98);
    background: color-mix(in srgb, var(--ast-global-color-0) 20%, white);
    border-color: var(--ast-global-color-0);
    color: var(--ast-global-color-1);
}

.toolbar-dropdown-trigger:active i {
    color: var(--ast-global-color-1);
}

.toolbar-dropdown-trigger i:first-child {
    font-size: 14px;
    color: var(--ast-global-color-3);
}

.dropdown-arrow {
    font-size: 10px;
    color: var(--ast-global-color-7);
    transition: transform 0.2s ease;
}

.toolbar-dropdown-trigger:hover .dropdown-arrow,
.toolbar-dropdown-trigger.menu-open .dropdown-arrow {
    color: var(--ast-global-color-0);
}

/* Trigger innerhalb toolbar-left: transparenter Background, kein Border */
.toolbar-left .toolbar-dropdown-trigger {
    background: transparent;
    border: none;
}

.toolbar-left .toolbar-dropdown-trigger:hover,
.toolbar-left .toolbar-dropdown-trigger.menu-open,
.toolbar-left .toolbar-dropdown-trigger.active {
    background: color-mix(in srgb, var(--ast-global-color-0) 12%, white);
    color: var(--ast-global-color-0);
}

.toolbar-left .toolbar-dropdown-trigger:hover i:first-child,
.toolbar-left .toolbar-dropdown-trigger.menu-open i:first-child,
.toolbar-left .toolbar-dropdown-trigger.active i:first-child {
    color: var(--ast-global-color-0);
}

/* Volltextsuche: separater Icon-Button ohne Label */
#searchBtn {
    width: 32px;
    min-width: 32px;
    padding: 0;
    justify-content: center;
}

#searchBtn .menu-label {
    display: none !important;
}

/* Dropdown-Menü */
.toolbar-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown-Item */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px !important;
    font-weight: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    color: var(--ast-global-color-2);
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.dropdown-item span {
    flex: 1;
    font-size: 13px !important;
    font-weight: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}

/* Checkmark für aktive Items */
.dropdown-item-check {
    font-size: 12px;
    color: #10b981;
    margin-left: auto;
}

/* Keyboard-Shortcut Hint im Menü */
.menu-shortcut {
    margin-left: auto;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    color: var(--ast-global-color-7);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    white-space: nowrap;
    pointer-events: none;
}

.dropdown-item.active {
    background: #f0fdf4;
    color: #059669;
}

.dropdown-item.active i:first-child {
    color: #059669;
}

.dropdown-item:hover:not(:disabled):not(.is-disabled) {
    background: color-mix(in srgb, var(--ast-global-color-0) 12%, white);
    color: var(--ast-global-color-0);
}

.dropdown-item:hover:not(:disabled):not(.is-disabled) i {
    color: var(--ast-global-color-0);
}

.dropdown-item:disabled,
.dropdown-item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dropdown-item:disabled i,
.dropdown-item.is-disabled i {
    opacity: 0.5;
}

/* Section-Title */
.dropdown-section-title {
    padding: 6px 12px;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    color: var(--ast-global-color-3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Separator */
.dropdown-separator {
    height: 1px;
    background: var(--ast-border-color);
    margin: 4px 0;
}

/* Review-Toolbar */
.review-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
}

.review-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ast-global-color-3);
    transition: all 0.15s ease;
    position: relative;
}

.review-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.review-btn:active {
    transform: scale(0.95);
}

.review-btn i {
    font-size: 14px;
}

/* Context-Button mit Mode-Indikator */
#reviewContextBtn[data-mode="comment"] {
    color: var(--ast-global-color-0);
}

#reviewContextBtn[data-mode="change"] {
    color: #f59e0b;
}

#reviewContextBtn:hover {
    background: var(--ast-global-color-5);
}

/* Review-Separator */
.review-separator {
    width: 1px;
    height: 24px;
    background: var(--ast-border-color);
}

/* Floating Inline Toolbar (ersetzt Context-Menü) */
.floating-toolbar {
    position: fixed;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--ast-border-color);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 1500;
    animation: floatingToolbarFadeIn 0.12s ease;
    pointer-events: auto;
    white-space: nowrap;
}

.floating-toolbar.visible {
    display: inline-flex;
}

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

.floating-toolbar-btn {
    display: none; /* Initial versteckt, JS zeigt bei Bedarf */
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ast-global-color-3);
    font-size: 13px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.floating-toolbar-btn.visible {
    display: inline-flex;
}

.floating-toolbar-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-2);
}

.floating-toolbar-btn.accept-btn:hover {
    background: #dcfce7;
    color: #15803d;
}

.floating-toolbar-btn.reject-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

.floating-toolbar-btn.comment-btn:hover {
    background: color-mix(in srgb, var(--ast-global-color-0) 6%, white);
    color: var(--ast-global-color-0);
}

.floating-toolbar-btn.nav-btn {
    width: 22px;
    height: 28px;
    font-size: 11px;
    color: var(--ast-global-color-7);
}

.floating-toolbar-btn.nav-btn:hover {
    color: var(--ast-global-color-2);
    background: var(--ast-global-color-5);
}

.floating-toolbar-separator {
    width: 1px;
    height: 18px;
    background: var(--ast-border-color);
    margin: 0 1px;
    flex-shrink: 0;
}

/* Mobile Anpassungen (<768px) */
@media (max-width: 767px) {
    .toolbar-dropdown-trigger .menu-label {
        display: none; /* Text verstecken, nur Icons anzeigen */
    }
    
    .toolbar-dropdown-trigger {
        padding: 6px 10px;
    }
    
    .toolbar-left {
        gap: 4px;
    }
    
    .review-toolbar {
        gap: 2px;
        padding: 2px;
    }
    
    .review-btn {
        width: 28px;
        height: 28px;
    }
    
    .review-btn i {
        font-size: 12px;
    }
}

/* Desktop: Toolbar-Group-Back ausblenden (nur in Popup-Mode) */
.toolbar-group-back {
    display: none;
}

/* ========================================
   Command-Card Rating (kompakte Sterne)
   ======================================== */
.agent-card-rating {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 5px;
}

.agent-rating-stars {
    display: inline-flex;
    gap: 1px;
}

.agent-rating-star {
    font-size: 15px;
    color: var(--ast-global-color-7);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
    user-select: none;
}

.agent-rating-star:hover,
.agent-rating-star.hover-preview,
.agent-rating-star.active {
    color: var(--ast-border-color);
}

/* Nach Bewertung: kein Hover-Cursor mehr */
.agent-rating-stars:has(.active) .agent-rating-star {
    cursor: default;
}
.agent-rating-stars:has(.active) .agent-rating-star:not(.active) {
    color: var(--ast-global-color-5);
}

/* Feedback-Zeile unterhalb der Sterne */
.agent-rating-feedback {
    margin-top: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
}