/* ======== Streamingle Runtime Control Panel — Left Overlay (150%) ======== */

/* Font — NanumGothic */
.panel-root, .panel-root Label, .panel-root Button {
    -unity-font: resource('Fonts/NanumGothic');
}

.panel-title, .cat-title, .cat-btn--active, .action-btn, .status-value {
    -unity-font: resource('Fonts/NanumGothicBold');
}

/* Root — left-docked, full height, ~1/3 screen */
.panel-root {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 520px;
    background-color: rgba(15, 23, 42, 0.96);
    border-right-width: 1px;
    border-right-color: rgba(99, 102, 241, 0.25);
    flex-direction: column;
}

/* ---- Header ---- */
.header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-width: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.panel-title {
    font-size: 18px;
    -unity-font-style: bold;
    color: rgb(99, 102, 241);
    letter-spacing: 3px;
}

.esc-badge {
    color: rgb(100, 116, 139);
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 4px 12px;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Tab Bar ---- */
.tab-bar {
    flex-direction: row;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom-width: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.cat-btn {
    flex-grow: 1;
    height: 48px;
    background-color: transparent;
    border-width: 0;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
    border-radius: 0;
    color: rgb(100, 116, 139);
    font-size: 15px;
    -unity-font-style: normal;
    -unity-text-align: middle-center;
    padding: 0 4px;
    margin: 0;
    transition-duration: 0.12s;
    transition-property: color, border-bottom-color, background-color;
}

.cat-btn:hover {
    color: rgb(203, 213, 225);
    background-color: rgba(99, 102, 241, 0.08);
}

.cat-btn--active {
    color: rgb(129, 140, 248);
    border-bottom-color: rgb(99, 102, 241);
    -unity-font-style: bold;
    background-color: rgba(99, 102, 241, 0.06);
}

/* ---- Content ---- */
.content {
    flex-grow: 1;
    padding: 16px 18px 0 18px;
    overflow: hidden;
}

.cat-title {
    font-size: 20px;
    -unity-font-style: bold;
    color: rgb(241, 245, 249);
    margin-bottom: 4px;
}

.cat-desc {
    font-size: 14px;
    color: rgb(100, 116, 139);
    margin-bottom: 14px;
}

.action-list {
    flex-grow: 1;
}

/* ---- Action Items ---- */
.action-item {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    flex-direction: row;
    align-items: center;
    border-width: 1px;
    border-color: transparent;
    transition-duration: 0.1s;
    transition-property: background-color, border-color;
}

.action-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.action-item--active {
    border-color: rgba(34, 197, 94, 0.5);
    background-color: rgba(34, 197, 94, 0.08);
}

.action-item-index {
    color: rgb(71, 85, 105);
    font-size: 14px;
    min-width: 36px;
    -unity-text-align: middle-right;
    margin-right: 10px;
}

.action-item-label {
    flex-grow: 1;
    color: rgb(226, 232, 240);
    font-size: 16px;
}

.action-item-status {
    color: rgb(34, 197, 94);
    font-size: 14px;
    margin-right: 10px;
    -unity-font-style: bold;
}

/* ---- Buttons ---- */
.action-btn {
    background-color: rgb(99, 102, 241);
    color: white;
    border-radius: 6px;
    border-width: 0;
    padding: 6px 16px;
    font-size: 14px;
    -unity-font-style: bold;
    min-width: 80px;
    height: 34px;
    transition-duration: 0.1s;
    transition-property: background-color;
}

.action-btn:hover {
    background-color: rgb(79, 70, 229);
}

.action-btn:active {
    background-color: rgb(67, 56, 202);
}

.action-btn--secondary {
    background-color: rgb(51, 65, 85);
}

.action-btn--secondary:hover {
    background-color: rgb(71, 85, 105);
}

.action-btn--danger {
    background-color: rgb(220, 38, 38);
}

.action-btn--danger:hover {
    background-color: rgb(185, 28, 28);
}

.action-btn--success {
    background-color: rgb(22, 163, 74);
}

.action-btn--success:hover {
    background-color: rgb(21, 128, 61);
}

/* Action row */
.action-row {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.action-row > .action-btn {
    margin-right: 6px;
    margin-bottom: 4px;
}

/* Section group title */
.group-title {
    font-size: 14px;
    color: rgb(100, 116, 139);
    margin-top: 14px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom-width: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.05);
    -unity-font-style: bold;
    letter-spacing: 1px;
}

/* Avatar group */
.avatar-group {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom-width: 1px;
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.avatar-group-name {
    font-size: 16px;
    color: rgb(148, 163, 184);
    -unity-font-style: bold;
    margin-bottom: 6px;
}

.outfit-row {
    flex-direction: row;
    flex-wrap: wrap;
}

.outfit-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgb(203, 213, 225);
    border-radius: 6px;
    border-width: 1px;
    border-color: transparent;
    padding: 6px 14px;
    font-size: 14px;
    margin-right: 4px;
    margin-bottom: 4px;
    transition-duration: 0.1s;
    transition-property: background-color, border-color;
}

.outfit-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.outfit-btn--active {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgb(99, 102, 241);
    color: white;
    -unity-font-style: bold;
}

/* ---- Status Bar ---- */
.status-bar {
    height: 44px;
    background-color: rgba(0, 0, 0, 0.4);
    border-top-width: 1px;
    border-top-color: rgba(255, 255, 255, 0.06);
    flex-direction: row;
    align-items: center;
    padding-left: 18px;
    padding-right: 18px;
    justify-content: flex-start;
    flex-shrink: 0;
}

.status-group {
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
}

.status-label {
    color: rgb(71, 85, 105);
    font-size: 13px;
    margin-right: 5px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgb(51, 65, 85);
    margin-right: 5px;
}

.status-dot--on {
    background-color: rgb(34, 197, 94);
}

.status-dot--rec {
    background-color: rgb(239, 68, 68);
}

.status-value {
    color: rgb(203, 213, 225);
    font-size: 13px;
    -unity-font-style: bold;
}

/* ---- Scrollbar ---- */
.unity-scroller--vertical {
    width: 6px;
    margin-left: 4px;
}

.unity-scroller--vertical .unity-base-slider__tracker {
    background-color: rgba(255, 255, 255, 0.03);
    border-width: 0;
    border-radius: 3px;
}

.unity-scroller--vertical .unity-base-slider__dragger {
    background-color: rgba(148, 163, 184, 0.25);
    border-width: 0;
    border-radius: 3px;
    min-height: 30px;
    transition-duration: 0.15s;
    transition-property: background-color;
}

.unity-scroller--vertical .unity-base-slider__dragger:hover {
    background-color: rgba(148, 163, 184, 0.45);
}

.unity-scroller--vertical .unity-base-slider__dragger:active {
    background-color: rgba(99, 102, 241, 0.6);
}

/* Hide scrollbar arrow buttons */
.unity-scroller--vertical .unity-repeat-button {
    display: none;
}

/* Horizontal scrollbar (hide if any) */
.unity-scroller--horizontal {
    height: 0;
    display: none;
}