/* ── SIMULATOR.CSS v1.2.1 — EXIT SIM button ── */

#oscPills {
    display:         none;
    align-items:     center;
    gap:             4px;
    padding:         3px 10px;
    background:      var(--panel);
    border-bottom:   1px solid var(--border);
    flex-shrink:     0;
    min-height:      0;
}
#oscPills.visible { display: flex; }

#oscPills .ch-pill {
    padding:       2px 8px;
    font-size:     0.55em;
    border-radius: 10px;
}
#oscPills .ch-dot { width: 5px; height: 5px; }

/* ── EXIT SIM BUTTON ── pushed to far right of oscPills ── */
.btn-exit-sim {
    margin-left:    auto;
    font-family:    var(--font-ui);
    font-size:      0.55em;
    letter-spacing: 1px;
    padding:        3px 9px;
    border-radius:  4px;
    border:         1px solid var(--red);
    color:          var(--red);
    background:     transparent;
    cursor:         pointer;
    transition:     all 0.18s;
    min-height:     22px;
    flex-shrink:    0;
}
.btn-exit-sim:active { background: rgba(255,23,68,0.15); }

#chPills {
    display:         none;
    align-items:     center;
    gap:             6px;
    padding:         5px 12px;
    background:      var(--panel);
    border-bottom:   1px solid var(--border);
    flex-shrink:     0;
}
#chPills.visible { display: flex; }

.ch-pill {
    display:        flex;
    align-items:    center;
    gap:            5px;
    padding:        3px 10px;
    border-radius:  12px;
    border:         1px solid;
    font-family:    var(--font-ui);
    font-size:      0.6em;
    font-weight:    700;
    letter-spacing: 1px;
    cursor:         pointer;
    transition:     all 0.2s;
    user-select:    none;
}
.ch-pill .ch-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ch-pill.off     { opacity: 0.3; }
.ch-pill:active  { opacity: 0.7; }
.ch-pill.active  { box-shadow: 0 0 8px currentColor; }

.ch-pill-1 { border-color: #e040fb; color: #e040fb; background: rgba(224,64,251,0.1); }
.ch-pill-1 .ch-dot { background: #e040fb; }
.ch-pill-2 { border-color: #ff1744; color: #ff1744; background: rgba(255,23,68,0.1); }
.ch-pill-2 .ch-dot { background: #ff1744; }
.ch-pill-3 { border-color: #00e5ff; color: #00e5ff; background: rgba(0,229,255,0.1); }
.ch-pill-3 .ch-dot { background: #00e5ff; }

#micBar {
    display:     none;
    align-items: center;
    gap:         8px;
    padding:     5px 12px;
    background:  var(--panel);
    border-top:  1px solid var(--border);
    flex-shrink: 0;
}
#micBar.visible { display: flex; }

.mic-bar-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mic-bar-label { font-size: 0.65em; color: var(--text-mid); font-family: var(--font-ui); flex: 1; letter-spacing: 1px; }
.mic-toggle-btn {
    font-size:     0.6em;
    padding:       3px 10px;
    border-radius: 3px;
    border:        1px solid;
    cursor:        pointer;
    font-family:   var(--font-ui);
    font-weight:   700;
    letter-spacing: 1px;
    transition:    all 0.2s;
}
.mic-toggle-btn.on  { border-color: #00ff41; color: #000; background: #00ff41; }
.mic-toggle-btn.off { border-color: #444;    color: #444; background: transparent; }
.mic-toggle-btn:active { opacity: 0.75; }

#simChevronWrap {
    display:        none;
    flex-direction: column;
    background:     var(--panel);
    border-top:     1px solid var(--border);
    flex-shrink:    0;
    overflow:       hidden;
}
#simChevronWrap.visible { display: flex; }

.sim-chevron-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3px 0;
    border-bottom:   1px solid var(--border);
    cursor:          pointer;
    flex-shrink:     0;
    user-select:     none;
}
.sim-chevron-bar span { font-size: 9px; color: var(--purple); }
.sim-chevron-bar:active { background: rgba(255,255,255,0.05); }

.sim-chevron-content {
    max-height:     120px;
    overflow-y:     auto;
    padding:        6px 10px;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sim-chevron-content::-webkit-scrollbar       { width: 3px; }
.sim-chevron-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sim-collapsed-strip {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3px 0;
    cursor:          pointer;
    user-select:     none;
    gap:             10px;
}
.sim-collapsed-strip .strip-line { flex: 1; height: 1px; background: rgba(224,64,251,0.2); max-width: 40px; }
.sim-collapsed-strip span        { font-size: 5.5px; color: var(--text-dim); letter-spacing: 1px; }
.sim-collapsed-strip:active      { background: rgba(255,255,255,0.04); }

.wave-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   4px;
}

.wave-btn {
    padding:        5px 2px;
    border-radius:  4px;
    border:         1px solid var(--border);
    background:     transparent;
    color:          var(--text-dim);
    font-family:    var(--font-ui);
    font-size:      0.6em;
    letter-spacing: 0.5px;
    cursor:         pointer;
    text-align:     center;
    transition:     all 0.2s;
    min-height:     30px;
}
.wave-btn.active {
    background:   var(--cyan);
    color:        #000;
    border-color: var(--cyan);
    font-weight:  bold;
}
.wave-btn:active { opacity: 0.75; }

.osc-ctrl-row { display: flex; align-items: center; gap: 8px; }
.osc-ctrl-label {
    font-family:    var(--font-ui);
    font-size:      0.65em;
    color:          var(--text-mid);
    letter-spacing: 1.5px;
    min-width:      46px;
    flex-shrink:    0;
}
.osc-ctrl-row input[type=range] {
    flex:               1;
    -webkit-appearance: none;
    height:             3px;
    background:         var(--grid);
    border-radius:      2px;
    outline:            none;
}
.osc-ctrl-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         18px; height: 18px;
    border-radius: 50%;
    background:    var(--cyan);
    cursor:        pointer;
}
.osc-ctrl-val {
    font-family: var(--font-display);
    font-size:   0.68em;
    color:       var(--text-main);
    min-width:   38px;
    text-align:  right;
}