.code-explorer { height: 100%; display: flex; flex-direction: column; color: var(--text-normal); background: var(--background-primary); }
.code-explorer-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--background-modifier-border); flex-wrap: wrap; }
.code-explorer-heading { min-width: 190px; display: grid; gap: 2px; }
.code-explorer-heading h1, .code-explorer-inspector h2, .code-explorer-filters h2 { margin: 0; font-size: 20px; font-weight: 650; }
.code-explorer-subtitle, .code-explorer-path { color: var(--text-muted); font-size: 12px; }
.code-explorer-search { flex: 1 1 220px; min-width: 180px; }
.code-explorer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.code-explorer-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(180px, 220px) minmax(300px, 1fr) minmax(230px, 300px); }
.code-explorer-filters, .code-explorer-inspector { overflow: auto; padding: 12px; background: var(--background-secondary); }
.code-explorer-filters { border-right: 1px solid var(--background-modifier-border); }
.code-explorer-inspector { border-left: 1px solid var(--background-modifier-border); }
.code-explorer-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.code-explorer-filter-heading button { font-size: 11px; }
.code-explorer-project-select { width: 100%; margin: 12px 0; }
.code-explorer-filter-section { margin-top: 14px; }
.code-explorer-filter-section h3, .code-explorer-inspector h3 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.code-explorer-filter-list { display: grid; gap: 4px; }
.code-explorer-filter-item { display: flex; gap: 7px; align-items: center; font-size: 12px; text-transform: capitalize; }
.code-explorer-canvas-region { min-width: 0; min-height: 320px; position: relative; background: var(--background-primary); }
.code-explorer-canvas { width: 100%; height: 100%; min-height: 320px; touch-action: none; }
.code-explorer-canvas:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: -2px; }
.code-explorer-facts { display: grid; gap: 5px; font-size: 12px; }
.code-explorer-relationship { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--background-modifier-border); font-size: 12px; }
.code-explorer-relationship small { color: var(--text-muted); }
.code-explorer-relationship > :first-child { min-width: 0; overflow-wrap: anywhere; }
.code-explorer-relationship small { flex-shrink: 0; white-space: nowrap; }
.code-explorer-inspector pre, .code-explorer-context-preview { max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 11px; }
.code-explorer-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.code-explorer-ai-result { border-left: 3px solid var(--interactive-accent); padding-left: 10px; }
@media (max-width: 900px) { .code-explorer-body { grid-template-columns: minmax(150px, 190px) minmax(260px, 1fr); } .code-explorer-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--background-modifier-border); max-height: 34vh; } }
@media (prefers-reduced-motion: reduce) { .code-explorer * { scroll-behavior: auto !important; transition: none !important; } }
