/* brainanatomy.css — scoped to .brain-sim to avoid global collisions */

.brain-sim {
    font-family: 'Courier New', Courier, monospace;
    background: #111;
    color: #e8e8e8;
    padding: 6px 4px;
    box-sizing: border-box;
    max-width: 798px;
}

.brain-layout {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}

/* ===== LEFT CONTROL PANEL ===== */
.brain-panel {
    width: 212px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brain-group {
    border: 1px solid #444;
    padding: 6px 7px;
    background: #1a1a1a;
}

.brain-group-title {
    font-size: 11px;
    color: #aad4ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.brain-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.brain-label {
    font-size: 11px;
    color: #d0d0d0;
    white-space: nowrap;
    min-width: 52px;
    font-family: 'Courier New', Courier, monospace;
}

/* Search */
.brain-search {
    font-family: 'Courier New', Courier, monospace;
    background: #222;
    color: #7fffb0;
    border: 1px solid #555;
    padding: 3px 5px;
    font-size: 12px;
    width: 140px;
    box-sizing: border-box;
    outline: none;
}
.brain-search:focus { border-color: #7fffb0; }
.brain-search::placeholder { color: #666; }

/* Listbox */
.brain-list {
    font-family: 'Courier New', Courier, monospace;
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #444;
    width: 100%;
    font-size: 11px;
    box-sizing: border-box;
    outline: none;
}
.brain-list option {
    padding: 2px 4px;
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
}
.brain-list option:checked {
    background: #1a4a2a;
    color: #7fffb0;
}
.brain-list optgroup {
    color: #7fffb0;
    background: #111;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 1px;
}

/* Info panel */
.brain-info-name {
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 3px;
    font-family: 'Courier New', Courier, monospace;
}
.brain-info-cat {
    font-size: 10px;
    color: #aad4ff;
    margin-bottom: 5px;
    font-family: 'Courier New', Courier, monospace;
}
.brain-info-desc {
    font-size: 10px;
    color: #cccccc;
    line-height: 1.5;
    max-height: 95px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
}
.brain-info-desc::-webkit-scrollbar { width: 4px; }
.brain-info-desc::-webkit-scrollbar-track { background: #111; }
.brain-info-desc::-webkit-scrollbar-thumb { background: #555; }

/* Sliders */
.brain-slider {
    width: 85px;
    accent-color: #4caf50;
    flex-shrink: 0;
    cursor: pointer;
}
.brain-val {
    font-size: 11px;
    color: #7fffb0;
    min-width: 30px;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
}

/* Buttons */
.brain-btn {
    font-family: 'Courier New', Courier, monospace;
    background: #222;
    color: #7fffb0;
    border: 1px solid #4caf50;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}
.brain-btn:hover { background: #4caf50; color: #000; }

/* Category checkboxes */
.brain-cat-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #d0d0d0;
    cursor: pointer;
    margin-bottom: 3px;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
}
.brain-cat-lbl input[type="checkbox"] {
    accent-color: #4caf50;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ===== RIGHT 3D VIZ ===== */
.brain-viz {
    flex: 1;
    min-width: 0;
    position: relative;
}

.brain-cam-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}
.brain-cam-btn {
    font-family: 'Courier New', Courier, monospace;
    background: #1a1a1a;
    color: #7fffb0;
    border: 1px solid #3a7a4a;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    min-width: 36px;
    text-align: center;
}
.brain-cam-btn:hover { background: #4caf50; color: #000; }

.brain-sim .brain-alpha-sep {
    color: #444;
    font-size: 13px !important;
    align-self: center;
    padding: 0 2px;
    font-family: 'Courier New', Courier, monospace !important;
    line-height: 1 !important;
}
.brain-sim .brain-alpha-lbl {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 10px !important;
    color: #888;
    align-self: center;
    white-space: nowrap;
    line-height: 1 !important;
}
.brain-sim .brain-opacity-slider {
    width: 80px;
    accent-color: #4caf50;
    cursor: pointer;
    align-self: center;
    flex-shrink: 0;
}

#brain-canvas-container {
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background: #000;
}
#brain-canvas-container:active { cursor: grabbing; }
#brain-canvas-container canvas { display: block; }

.brain-hint {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 4px;
    font-family: 'Courier New', Courier, monospace;
}

/* Scrollbar for listbox */
.brain-list::-webkit-scrollbar { width: 4px; }
.brain-list::-webkit-scrollbar-track { background: #1a1a1a; }
.brain-list::-webkit-scrollbar-thumb { background: #555; }

/* ===== 2D SLICE VIEWS ===== */
#brain-slices {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.brain-slice-view {
    flex: 1;
    min-width: 0;
    background: #080808;
    border: 1px solid #333;
}
.brain-slice-lbl {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: #aad4ff;
    text-align: center;
    padding: 3px 2px 2px;
    border-bottom: 1px solid #222;
}
.brain-slice-view canvas {
    display: block;
    width: 100%;
}

/* Loading progress overlay */
#brain-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
}
#brain-progress-txt {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: #7fffb0;
    margin-bottom: 8px;
}
#brain-progress-track {
    width: 200px;
    height: 5px;
    background: #222;
    border: 1px solid #444;
}
#brain-progress-bar {
    height: 100%;
    width: 0%;
    background: #4caf50;
    transition: width 0.2s ease;
}