/* ==========================================================================
   Panel Component Styles - MINTBOXAGENTS
   - Styles for the main sections within the left-side RAG panel.
   - Handles layout, collapsed states, and contents like lists and search.
   ========================================================================== */

/* --- Panel Section Layout --- */
.rag-section {
    position: relative;
    /* Reduziertes Padding unten */
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    border-bottom: var(--border-width-sm) solid var(--border-light);
    display: flex;
    flex-direction: column;
}

.rag-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.rag-section__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs); /* Weniger Abstand zum Content */
    flex-shrink: 0;
    /* Cursor default, da die ganze Zeile nicht mehr klickbar ist (außer Icon) */
    cursor: default;
    padding: var(--spacing-xxs);
}

.rag-section__icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Zeigekraft nur hier */
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
}

.rag-section__icon:hover {
    background-color: var(--bg-surface-hover);
    color: var(--primary-color);
}

.rag-section__header h4 {
    font-size: var(--font-size-xs); /* Kleiner */
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-grow: 1;
}

.rag-section__actions {
    display: flex;
    gap: var(--spacing-xs);
    transition: opacity 0.2s ease;
}

.rag-section__content {
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
    flex-grow: 1;
    max-height: 1000px; /* High value for smooth animation */
    overflow: hidden;
    opacity: 1;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
    line-height: 1.4;
}

/* --- Section Collapsed State (Preview Mode - shows top 3 items) --- */
.rag-section--collapsed {
    padding-bottom: var(--spacing-xxs);
    margin-bottom: var(--spacing-xs);
}

.rag-section--collapsed .rag-section__content {
    /* Content bleibt sichtbar - nur Höhe begrenzt */
    max-height: 120px; /* Ca. 3 Items à ~32-36px + Padding */
    margin-bottom: 0;
    opacity: 1;
    overflow: hidden; /* Kein Scrollbalken im Preview-Modus */
}

/* Listen im Preview-Modus: Höhe begrenzt, kein Scroll */
.rag-section--collapsed .items-list {
    max-height: 105px; /* 3 Einträge */
    overflow: hidden;
}

.rag-section--collapsed .rag-section__actions {
    opacity: 0.5;
    pointer-events: auto;
}

/* --- Section Expanded State (Full View - shows all items with scroll) --- */
.rag-section:not(.rag-section--collapsed) .rag-section__content {
    max-height: 400px; /* Mehr Platz im ausgeklappten Zustand */
    overflow: visible; /* Erlaubt der Liste zu scrollen */
}

.rag-section:not(.rag-section--collapsed) .items-list {
    max-height: 300px; /* Mehr Platz für alle Einträge */
    overflow-y: auto;
}

/* Toggles visibility of expanded/collapsed icons based on section class */
.rag-section:not(.rag-section--collapsed) .rag-section__icon--expanded {
    display: inline-block; /* MODIFIED */
}

.rag-section:not(.rag-section--collapsed) .rag-section__icon--collapsed {
    display: none;
}

.rag-section--collapsed .rag-section__icon--expanded {
    display: none;
}

.rag-section--collapsed .rag-section__icon--collapsed {
    display: inline-block; /* MODIFIED */
}

/* --- Full Panel Collapsed State --- */
#rag-panel.collapsed .rag-section {
    padding-bottom: 0;
    margin-bottom: var(--spacing-xxs);
    min-height: calc(var(--spacing-xl) + var(--spacing-sm));
    justify-content: center;
    cursor: pointer;
    border-radius: var(--border-radius-md);
    border-bottom: none;
}

#rag-panel.collapsed .rag-section:hover {
    background-color: var(--bg-surface-hover);
}

#rag-panel.collapsed .rag-section__header h4,
#rag-panel.collapsed .rag-section__actions,
#rag-panel.collapsed .rag-section__content {
    display: none;
}

#rag-panel.collapsed .rag-section__header {
    justify-content: center;
    margin-bottom: 0;
    cursor: default;
}

/* This targets the icon container when the whole panel is collapsed */
#rag-panel.collapsed .rag-section__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

/* Tooltip for fully collapsed panel */
#rag-panel.collapsed .rag-section[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: var(--spacing-sm);
    background-color: var(--text-primary);
    color: var(--text-light);
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: var(--z-layer-tooltip);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

#rag-panel.collapsed .rag-section[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- Project Display --- */
/* 1. SICHTBARKEIT ERZWINGEN:
   Überschreibe die Regel, die Sektionen ausblendet, wenn kein Projekt aktiv ist */
/* Increased specificity with #app-layout-container ancestor */
#app-layout-container #rag-panel:not(.project-active) [data-section="documents"],
#app-layout-container #rag-panel:not(.project-active) [data-section="artifacts"],
#app-layout-container #rag-panel:not(.project-active) [data-section="context"],
#app-layout-container #rag-panel:not(.project-active) [data-section="epics"] {
    display: flex;
}

.project-summary {
    background: var(--bg-panel-canvas);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-xs);
}

.project-summary h4 {
    margin: 0 0 var(--spacing-xxs) 0;
    font-size: var(--font-size-sm);
}

.project-stats,
.project-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* --- Search Components --- */
.search-input-group {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    align-items: center;
}

.search-input-group .form-input {
    flex: 1;
    min-width: 0;
}

.search-results {
    max-height: var(--search-results-max-height);
    overflow-y: auto;
}

#rag-search-results {
    margin-top: var(--spacing-xs);
    max-height: var(--search-results-max-height);
    overflow-y: auto;
}

#rag-search-results li {
    padding: var(--spacing-sm);
    cursor: pointer;
    border-radius: var(--border-radius-md);
    transition: background-color 0.2s ease;
    margin-bottom: var(--spacing-xxs);
    background-color: var(--bg-surface-alt);
    border: var(--border-width-sm) var(--border-light);
}

#rag-search-results li:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-medium);
}

#rag-search-results li strong {
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    margin-bottom: var(--spacing-xxs);
    font-size: var(--font-size-sm);
}

#rag-search-results .snippet {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    display: block;
    margin-top: var(--spacing-xxs);
}

/* --- Document & Artifact Lists --- */
/* Basis-Styles für Listen */
.items-list,
#context-dashboard,
#rag-project-select {
    overflow-x: hidden;
    transition: max-height 0.3s ease, overflow 0.3s ease;
}

/* Standard: Vollansicht-Modus */
#context-dashboard,
#rag-project-select {
    max-height: 300px;
    overflow-y: auto;
}

.items-list {
    margin-top: var(--spacing-xxs);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-panel-alt);
    padding: var(--spacing-xxs);
}

#context-dashboard {
    margin-top: var(--spacing-xxs);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-panel-alt);
    padding: var(--spacing-xxs);
}

/* Scrollbar feiner machen */
.items-list::-webkit-scrollbar,
#context-dashboard::-webkit-scrollbar {
    width: 4px;
}

/* Shared styles for list items */
.document-list-item,
.artifact-list-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    height: 30px; /* Ultra kompakt */
}

.document-list-item:hover,
.artifact-list-item:hover {
    background-color: var(--bg-surface-hover);
}

.document-list-item.selected,
.artifact-list-item.selected,
.artifact-list-item.artifact-item-active { /* Added for workspace integration */
    background-color: var(--primary-bg);
    color: var(--primary-color);
}

.artifact-list-item.artifact-item-active .artifact-title {
    color: var(--primary-color);
    font-weight: 500;
}

.document-item-info,
.artifact-item-info {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    overflow: hidden;
}

.document-filename,
.artifact-title {
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Asset Badges (Typen) */
.artifact-type-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.artifact-type {
    font-size: var(--font-size-xxs);
    padding: var(--spacing-xxxs) var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-weight: 500;
    background: var(--secondary-bg);
    color: var(--text-secondary);
    margin-left: auto;
}

.type-source {
    background: #e2e8f0;
    color: #475569;
}

.type-outcome {
    background: #dcfce7;
    color: #166534;
}

.type-memo {
    background: #fef9c3;
    color: #854d0e;
}

.type-protocol {
    background: #f3e8ff;
    color: #6b21a8;
}

.document-list-item .edit-doc-icon-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.document-list-item:hover .edit-doc-icon-btn {
    opacity: 1;
}

/* Document Status Badges */
.status {
    font-size: var(--font-size-xxs);
    padding: var(--spacing-xxxs) var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-weight: 500;
    flex-shrink: 0;
}

.status-ready {
    background-color: var(--bg-success-light);
    color: var(--success-dark);
}

.status-processing {
    background-color: var(--bg-warning-light);
    color: var(--text-warning-dark);
}

.status-failed {
    background-color: var(--bg-error-subtle);
    color: var(--error-dark);
}

.status-unknown {
    background-color: var(--bg-canvas);
    color: var(--text-secondary);
}


.rag-section__icon-svg {
    width: var(--icon-size-md);   /* Sets width to 24px */
    height: var(--icon-size-md);  /* Sets height to 24px */
    flex-shrink: 0;             /* Prevents it from being squished */
    display: flex;              /* Ensures content inside is centered */
    align-items: center;
    justify-content: center;
}

/* --- COMPACT ITEMS (Context & Assets) --- */

/* Context Dashboard Items (Tasks/Insights) */
.dashboard-item {
    background: var(--bg-surface); /* Weiß für Konsistenz mit anderen Items */
    border-left: 3px solid var(--border-medium); /* Default grau */
    padding: 4px 8px; /* Sehr kompakt */
    margin-bottom: 4px;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px; /* Fixe Höhe für Einzeiligkeit */
    white-space: nowrap;
    overflow: hidden;
}

.dashboard-item:hover {
    background-color: var(--bg-surface-hover);
}

.dashboard-item.type-task {
    border-color: var(--success-color);
}

.dashboard-item.type-insight {
    border-color: var(--warning-color);
}

.dashboard-item-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Metadaten (Status etc.) ausblenden oder minimal anzeigen */
.dashboard-item-meta {
    display: none; /* WIR ENTFERNEN DIE ZWEITE ZEILE KOMPLETT */
}

/* --- Assets Section Flex Growth & Scroll Fix --- */

/* 1. The Section Container */
.rag-section[data-section="artifacts"] {
    /* Must be a flex container */
    display: flex;
    flex-direction: column;

    /* Vital for nested scrolling: */
    min-height: 0;
    flex-grow: 1;

    /* Visuals */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 2. The Content Wrapper inside the section */
.rag-section[data-section="artifacts"] .rag-section__content {
    display: flex;
    flex-direction: column;

    /* Vital for nested scrolling: */
    flex-grow: 1;
    min-height: 0;
    overflow: hidden; /* Prevent double scrollbars */
}

/* 3. The List Itself */
#artifacts-list {
    flex-grow: 1;
    min-height: 0;    /* Allow shrinking */
    padding-bottom: var(--spacing-sm);
}

/* Assets-Liste im Vollansicht-Modus */
.rag-section[data-section="artifacts"]:not(.rag-section--collapsed) #artifacts-list {
    max-height: none; /* Unbegrenzt wenn ausgeklappt */
    overflow-y: auto; /* Scrollbar bei vielen Einträgen */
}

/* Assets-Liste im Preview-Modus */
.rag-section[data-section="artifacts"].rag-section--collapsed #artifacts-list {
    max-height: 105px; /* 3 Einträge */
    overflow: hidden;  /* Kein Scrollbalken */
}

/* Ensure headers don't shrink when artifacts list grows */
.rag-section .rag-section__header {
    flex-shrink: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .search-input-group {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===========================================
   View Controls (from artifactIntegration.css)
   =========================================== */

.view-controls {
    position: relative;
    z-index: var(--z-layer-header);
    background-color: var(--bg-surface);
    border-bottom: var(--border-width-sm) solid var(--border-light);
}

.panel-status-indicator {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: var(--spacing-xs);
    height: var(--spacing-xs);
    border-radius: var(--border-radius-circle);
    z-index: var(--z-layer-dropdown);
}

.panel-status-indicator.chat-active {
    background-color: var(--success-color);
}

.panel-status-indicator.artifact-active {
    background-color: var(--primary-color);
}