/* Reset and global styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", serif;
    font-weight: 400;
    font-style: normal;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Image-specific rules */
img {
    user-select: none;
    -webkit-user-drag: none; /* Prevents dragging the image */
}

/* Body styles */
body {
    background-color: #141418;
    background-size: 150%; /* This ensures the background covers the entire area */
    background-position: center;
    background-repeat: no-repeat;
    height: 200vh; /* Enables vertical scrolling */
    padding-bottom: 20em;
    overflow-x: hidden;
    overflow-y: scroll; /* Ensure the scrollbar appears */
    transition: background-size 0.5s ease, background-position 0.5s ease; /* Smooth transition for zoom effect */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #44444480 #020a1a; /* Firefox */
}

/* Webkit custom scrollbars */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    background-color: #44444480;
    border-radius: 4px;
}

body::-webkit-scrollbar-track {
    background-color: #020a1a;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Add this to vertically center items */
    padding: 20px; /* Add some padding */
}

.logo {
    color: white;
    font-size: 24px;
}

.activeGreen{
    background: #15551F;
    color: #ffffff;
}

.silentGrey{
    background: #282829; 
}

.statusBarTransparent{
    background: #0E0C0C;
    opacity: .46;
}

.locationBGColor{
    background: #153655;
}

.targetBGColor{
    background: #15551F;
}

.foodBGColor{
    background: #554315;
}

.healthBGColor{
    background: #551515;
}

.clickable{
    cursor: pointer;
}

.navigation{
    width: 100%;
    height: 70px;
    outline: 1px solid #3C3232 ;
    display: flex;
    justify-content: start;
}

.navSectionCentered{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.homeSection{
    width: 250px;
    height: 100%;
    border-right: 1px solid #3C3232;
    align-items: center;
    justify-content: center;
}

.botClientStatus{
    border-radius: 40px;
    width: 75px;
    height: 25px;
    font-family: "Merriweather", serif;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clientTextInfo{
    position: relative;
    top: 3px;
}

.clientSection{
    display: flex;
    align-items: center;
    flex-direction: row;
    color: #C9C9C9;
    font-size: 16px;
    border-right: 1px solid #3C3232;
    padding: 0 1em;
    background: #1A1919;
    width: auto;
    height: 100%;
}

.ClientTabInfo{
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2em;
    white-space: nowrap;
}

.allClientSection{
    width: auto;
    height: 100%;
    display: flex;
}

.botInactive{
    display: flex;
    background: #141418;
    justify-content: center;
    max-width: 170px;
}

.clientOffline span{
    color: #C9C9C9;
    opacity: .53;
}

.logoSection{
    justify-content: center;
    width: 100%;
    padding-left: 5%;
}

.uiButtonRoundMedium{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    outline: 1px solid #3C3232;
    display: flex;
    justify-content: center;
    background: #1A1919;
    align-items: center;
}

.uiButtonContainerRound{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    outline: 1px solid #3C3232;
    display: flex;
    justify-content: center;
}

.uiButtonContainerRoundSmall{
    width: 33px;
    height: 33px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
}

.uiButtonContainerRoundSmallBorder{
    width: 33px;
    height: 33px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    outline: 1px solid #282829;
    background: #141418;
    align-items: center;
}

.startBotBtn{
    background: #282829;
    outline: none;
}

.botControlSection{
    justify-content: center;
    border-right: 1px solid #3C3232;
    padding: 0 2em;
    flex-direction: row;
    gap: 1em;
}

.menuSection{
    justify-content: center;
    padding: 0 2em;
}

.user-ui-bar{
    background: #1A1919;
    border-bottom: 1px solid #3C3232;
    height: 87px;
    display: flex;
    gap: 2em;
    padding: 0 2.25em;
    align-items: center;
}

.taskContainer{
    display: flex;
    align-items: center;
    gap: .8em;
}

.taskContainer span{
    color: #C9C9C9;
    font-size: 14px;
}

.verticalDividerSmall{
    border-right: 1px solid #3C3232;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actionBarTool{
    width: 90px;
    max-width: 90px;
    min-width: 90px;
    height: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.actionBarTool span{
    font-size: 12px;
    font-weight: 500;
    background: #123317;
    color: #C9C9C9;
    width: 50px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.actionTaskOFF{
    background: #1D1D1D !important;
}

.characterEquipment{
    display: flex;
    gap: 1em;
}

.characterToolBoxContainer{
    margin: right;
}

.user-ui-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actionableTasksContainer{
    display: flex;
    gap: 1em;
}

.taskPanel{
    display: flex;
    gap: 2em;
}

.characterToolBoxContainer div{
    position: relative;
    left: .8em;
}

.alignCenter{
    background: #141418;
    align-items: center;
}

.dividerCharacterEnd{
    position: relative;
    left: 10px;
    padding-right: .4em;
    top: 6px;
}

.userClientView{
    display: flex;
    align-items: center;
    justify-content: center;
}

.playerImageStream{
    object-fit: cover;
}

.character-replay-bar{
    background: #191919;
    position: relative;
}

.video-controls{
    display: flex;
    gap: 1em;
    align-items: center;
}

.play-replay-btn{
}

.play-replay-container{
    width: 56px;
    height: 56px;
    background: #232222;
}

.wrapper-progress{
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 20px;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

.video-total-timeline{
    width: 100%;
    height: 1px;
    background: #5f5c5c;
    position: absolute;
    top: 0;
    left: 0;
}

.video-progress-bar {
    width: 10%;
    background: #FFFFFF;
    height: 1px; /* Start small */
    position: absolute;
    top: 0;
    left: 0;
    transition: height 0.2s ease-in-out; /* Smooth height transition */
    transform: translateX(-180deg);
    cursor: pointer;
}

.progress-bar-tick {
    background: #ffffff;
    height: 5px;
    bottom: 0px;
    width: 1px;
    position: absolute;
    right: 0;
}

.progress-bar-timer {
    position: absolute;
    bottom: 15px;  /* Adjust to move the green timer box above the tick */
    right: -30px;  /* Adjust as necessary to center the timer above the tick */
    background-color: #15551F;
    color: #ffffffed;
    padding: 3px 15px;
    border-radius: 12px;
    font-size: 11px;
    opacity: 0;
    transform: translateY(10px); /* Start off hidden */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.progress-bar-timer .triangle {
    position: absolute;
    bottom: -5px; /* Adjust to position the triangle */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #15551F;
}

.replay-timeline{
    height: 50px;
    background: #212020;
}

/* Basic layout */
.ui-replay-bar {
    position: relative;
    width: 100%;
    display: flex;
}

.timeline-track {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Major Ticks */
.tick {
    position: relative;
    height: 40px;
    width: 110px; /* Width for major ticks */
    background: #0E0C0C;
    /* opacity: .46; */
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

/* Minor Ticks */
.minor-tick {
    height: 20px; /* Shorter height for minor ticks */
    width: 1px;   /* Narrow width for minor ticks */
    background-color: #3C3232; /* Lighter color for minor ticks */
    opacity: 0.6;
}

/* Tick Icons */
.tick-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    opacity: .46;
}

/* Tick Line */
.tick-line {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
    width: 1px;
    background-color: #3C3232; /* Default tick color */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Custom background icons */
.person-icon { /* Empty if there is no special icon background */ }

.sword-icon {
    background-color: #222; /* Example background for sword ticks */
}

.edit-icon {
    background-color: #444; /* Example background for edit ticks */
}

.food-icon {
    background-color: #555; /* Example background for food ticks */
}

/* Timestamps */
.timestamp {
    position: absolute;
    top: 15%;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2.5em;
}

.timeline-stamp {
    border-radius: 40px;
    height: 25px;
    background: #282829;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
}

/* Minor Tick Adjustments */
.minor-tick .tick-line {
    height: 10px; /* Shorter tick line for minor ticks */
    background-color: #3C3232; /* Keep same color as main timeline */
    opacity: 0.6;
}

.major-tick {
    height: 40px;
    width: 110px; /* Width for major ticks */
    background: #191919;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: relative;
}

.replay-image-timeline{
    position: relative;
    height: 150px;
    background: #191919;
    display: flex;
    gap: 4em;
    align-items: center;
    padding-left: 2em;
    overflow-x: hidden;
}

.playerImageViewTimeline-wrapper {
    position: relative;
    display: inline-block; /* Ensure the container wraps around the image */
}

.playerImageViewTimeline {
    border-left: 15px solid #252020;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    object-fit: cover;
    border-right: 15px solid #252020;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.playerImageViewTimeline-wrapper::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background: #767575;
    top: 40%; /* Adjust as necessary */
    left: 7px; /* Adjust as necessary */
}

.playerImageViewTimeline-wrapper::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background: #767575;
    top: 40%; /* Adjust as necessary */
    right: 7px; /* Adjust as necessary */
}

.keyframeAdjuster{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.ui-module-equipment {
    width: 280px;
    height: 390px;

}

.ui-module-container{
    background: #1f1911;
    border: 5px solid #44413B;
    position: absolute;
    padding: 3.5em;
    padding-top: 1em;
    box-sizing: border-box;
    right: 3em;
    top: 9.5em;
}

.ui-module-row{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

.ui-module-row{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 1em;
    padding: .5em 0;
}

.refresh-equipment-btn{
    background: #2C2A2A;
    border: 1px solid #53534F;
    color: #c8c8c8;
    width: 100%;
    height: 35px;
    margin-top: 1.5em;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.refresh-equipment-btn:hover{
    background: #262424;
    transition: .2s ease-in-out;
    color: #c8c8c8d1;
}

.ui-module-equipment{
    display: none;
}

.ui-module-prayer{
    padding: 1.5em;
    display: none;
}

.prayer-column{
    cursor: pointer;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prayer-column-active{
    background: rgb(183, 180, 17);
}

/* Bot Cloud Module */
.bot-cloud-module{
    width: 900px;
    /* height: 633px; */
    background: #161616;
    border: 1px solid #282f47cf;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* padding: 2em; */
    overflow: hidden !important;
}

.bot-cloud-module h1{
    color: #C9C9C9;
    font-size: 20px;
}


.cloud-desc{
    display: flex;
    justify-content: space-between;
}

.cloud-desc p{
    color: #666666;
    font-size: 14px;
    margin-top: .5em;
    line-height: 18px;
    max-width: 500px;
}

.bot-cloud-userpanel{
    display: flex;
    align-items: center;
    gap: .5em;
}

.bot-cloud-btn-ui{
    height: 30px;
    width: 100px;
    border-radius: 2px;
    outline: none;
    font-size: 12px;
    border: none;
    background: #2C2C2C;
    color: #D7D7D7;
    cursor: pointer;
}

.latest-upload{
    display: flex;
}

.latest-upload-title{
    margin-left: 1em;
}

.latest-upload-container{
    border: 1px solid #282f47cf;
    width: 100%;
    padding: 1em;
    color: #C9C9C9;
}

.latest-upload-container{
    margin-top: 1em;
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
}

.bot-cloud-upload-feed{
    display: flex;
    margin-top: 1em;
}

.upload-feed-container{
    background: #232323;
    width: 100%;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-feed-left{
    flex-direction: column;
}

.upload-feed-left, .upload-feed-right{
    display: flex;
}

.upload-feed-upload-title, .upload-feed-upload-author{
    color: #C9C9C9;
    font-size: 15px;
}

.upload-entry-desc{
    color: #FFFFFF;
    opacity: .52;
    line-height: 20px;
    font-size: 14px;
    margin-top: .3em;
}

.user-bot-upload-date{
    color: #FFFFFF;
    opacity: .52;
    line-height: 20px;
    font-size: 12px;
    margin-top: .3em;
}

.upload-feed-install{
    display: flex;
    gap: .7em;
}

.upload-feed-install button{
    padding: .6em 1.5em;
    outline: none;
    border: none;
    color: #D7D7D7;
    border-radius: 2px;
    cursor: pointer;
}

.install-new-script{
    background: #2C2C2C;
}

.report-script-issue{
    background: #281313;
}

/* Watchers Section Styling */
.bot-cloud-module{
    display: flex;
    overflow-y: scroll;
    background: #02070D;
    display: none;
}

.model-upload-feed{
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.model-viewer-container{
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
    display: none;
}

.model-section{
color: #C9C9C9;
/* margin-top: 4em; */
}

.model-section h2{
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 16px;

}

.watchers {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid white; /* Line for Watchers hierarchy */
}

.watcher {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.watcher::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: white;
}

.watcher::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 10px;
    width: 20px;
    height: 2px;
    background-color: white;
}

.watcher h3 {
    margin-bottom: 10px;
    color: #c9c9c9;
    position: relative;
}

.watcher p {
    margin: 5px 0;
}


/* Shared Styling for Hierarchy and Watchers */
.hierarchy, .watchers {
    position: relative;
    padding-left: 20px;
    border-left: 0spx solid white; /* Vertical Line for Hierarchy and Watchers */
}

/* Styling for Individual Items in Hierarchy and Watchers */
.hierarchy li, .watcher {
    position: relative;
    padding-left: 20px;
    margin: 20px 0;
    list-style: none;
    color: #C9C9C9;
    font-size: 13px;
}

/* Vertical Line and Horizontal Connector for Items */
.hierarchy li::before, .watcher::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: white;
}

.hierarchy li::after, .watcher::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 10px;
    width: 20px;
    height: 2px;
    background-color: white;
}

/* Images Styling for NPCs, Objects, etc. */
.modelImages {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.modelImages img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

/* Action Tree Styling */
.action-tree ol {
    padding-left: 20px;
}

.action-tree ol li {
    margin: 15px 0;
}


.actionBubble{
    padding: .4em .6em;
    border-radius: 3px;
    color: #c9c9c9;
    margin: 0 .2em;
}

.blue {
    background: #153655;
}

.green {
    background: #155532;
}

.purple {
    background: #372F8E;
}

/* Watchers Section Headers */
.watcher h3 {
    margin-bottom: 10px;
    color: #c9c9c9;
}

.watcher p {
    margin: 5px 0;
}

.action-tree h2{
    color: #c9c9c9;
    font-size: 16px;
}

.action-tree ol li{
    color: #c9c9c9;
    font-size: 12px;
    position: relative;
    padding-top: .3em;
}

.action-tree ol {
    padding-left: 0; /* Remove default padding for ordered list */
    counter-reset: list-counter; /* Initialize custom counter */
}

.action-tree ol li {
    list-style: none; /* Remove default list styling */
    counter-increment: list-counter; /* Increment custom counter */
    position: relative;
    margin-bottom: 20px; /* Space between list items */
    padding-left: 33px; /* Space for custom number background */
}

.action-tree ol li::before {
    content: counter(list-counter); /* Display custom counter */
    position: absolute;
    left: 0; /* Position the number at the start */
    top: 0;
    width: 20px; /* Width of the number background */
    height: 20px; /* Height of the number background */
    background-color: #2A8628; /* Background color (green as in the image) */
    color: white; /* Text color for the number */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 30px;
}

.watchers h2{
    font-size: 16px;
    color: #c9c9c9;
}

.watcherPerformAction{
    margin: 1em;
}

.modelImages{
    margin-bottom: 1em;
}

.watchers{
    border-left: none;
}

.bot-model-title{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bot-model-title span{
    font-size: 32px;
    position: absolute;
    right: 0;
    cursor: pointer;
    top: -.8em;
}

.hierarchy, .action-tree, .watchers{
    overflow-y: auto;
    max-height: 300px;
    width: 250px;
}

.task-container{
    /* width: 380px; */
    min-height: 491px;
    height: 491px auto;
    /* background: #02070D; */
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    display: none;
}

.task-container{
    /* display: flex; */
    /* display: none; */
    flex-direction: column;
    gap: 2em;
    padding: 1.5em 2em;
    box-sizing: border-box;
    /* outline: 1px solid #3C3232; */
}

.tasks-title{
    color: #c9c9c9;
    font-size: 16px;
}

.saved-tasks-list{
    display: flex;
    flex-direction: column;
    gap: .7em;
    margin-top: 1em;

}

.saved-task-entry{
    width: 100%;
    height: 50px;
    background: #292929;
    border-radius: 10px;
    padding-left: 1em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #c9c9c9;
    gap: .5em;
    font-size: 14px;
    justify-content: space-between;
    cursor: pointer;
    min-width: 120px !important;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
}

.saved-task-entry div{
    display: flex;
    align-items: center;
    gap: .5em;
    /* width: 350px; */
}

.task_menu{
    cursor: pointer;
}

.task-management-container{
    width: 100%;
    height: 50px;
    display: none;
}

.init-task{
    background: #123317;
    color: #c9c9c9;
    padding: .5em .9em;
    border: none;
    margin: 1em 0;
}

.new-task-title{
    display: flex;
    justify-content: space-between;
}

.new-task-title img{
    cursor: pointer;
}

.task-drop-down {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center; /* Center the text horizontally */
    background: #1A1919;
    border: 1px solid #3C3232;
    border-radius: 5px;
    width: 100%;
    height: 30px;
    color: #c9c9c9;
    font-size: 12px;
    margin-top: 1em;
    box-sizing: border-box;
    cursor: pointer;
}

.task-drop-down img {
    position: absolute;
    right: 1em; /* Float the image to the right */
    margin-left: 0; /* Remove margin since position is absolute */
}

.new-task-action-list{
    color: #c9c9c9;
    font-size: 12px;
    margin-top: 1.5em;
}

.actionBubbleTask{
    font-size: 12px;
}

.task-action-entry{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1em 0;
    gap: .5em;
}

.task-start-btn{
    width: 60px;
    height: 60px;
    background: #282829;
    border-radius: 50%;
}

.start-task-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100px;
    margin: 0 auto;
    cursor: pointer;
}

.start-task-btn span{
    color: #c9c9c9;
}

.savedTasks{
    margin-top: 1em;
}

.new-task-container, .start-tasks-container-btn{
    margin-top: 1.5em;
    position: relative;
}
/* Ensure the .new-task-action div behaves as a button */
.task-drop-down {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 10px 0;
    padding: 10px; /* Add padding for better click area */
    background: #1d1d1e; /* Optional: background color for better visibility */
    border: 1px solid #3C3232; /* Optional: border to make it look like a button */
    border-radius: 5px;
}

/* Image inside the action button */
.task-drop-down img {
    margin-left: auto;
}

/* Dropdown Toggle (Hidden by Default) */
.task-dropdown-toggle {
    display: none;
}

/* Dropdown Menu Styling */
.available-tasks-list {
    position: absolute;
    top: 70px;
    left: 0;
    background: #1A1919;
    z-index: 2;
    border: 1px solid #3C3232;
    width: 100%;
    /* height: 200px; */
    height: 57px;
    border-radius: 5px;
    padding: 0.6em;
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 0.4em;
    overflow-y: auto;
}

/* Show Dropdown When Toggle is Checked */
.task-dropdown-toggle:checked ~ .available-tasks-list {
    display: flex;
}

/* Dropdown Item Styling */
.usable-task-command {
    cursor: pointer;
    color: #c9c9c9;
    list-style: none;
    font-size: 13px;
    text-align: center;
    background: #201f1f;
    padding: 0.5em 0;
    border-radius: 5px;
    margin-bottom: .5em;
}

.usable-task-command:hover {
    color: #c9c9c9;
    background: #2b2a2a;
}

.task-main-screen{
    /* display: none; */
    position: relative;
    z-index: 3;
}

/* General Styling */
.task-script-builder {
    width: 500px;
    background-color: #121212;
    color: white;
    border: 1px solid #3C3C3C;
    border-radius: 8px;
    overflow: auto;
    font-family: Arial, sans-serif;
    position: absolute;
    bottom: -5px; /* Adjust to position the triangle */
    left: 50%;
    transform: translateX(-50%);
    top: 0em;
    z-index: 5;
    min-height: 600px;
    height: 750px auto;
    padding-bottom: 2em;
    display: none;
}

/* Tabs */
.tab-header {
    display: flex;
    background-color: #1A1A1A;
    border-bottom: 1px solid #3C3C3C;
}

.tab-link {
    flex: 1;
    padding: 10px 15px;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    text-align: center;
}

.tab-link.active {
    border-bottom: 3px solid #1e8e2f;
    color: #1e8e2f;
}

/* Tab Panels */
.tab-content {
    padding: 10px;
}

/* Tab Panels */
.tab-panel {
    display: none;
    opacity: 0; /* Start hidden with 0 opacity */
    transform: translateY(10px); /* Slightly offset for animation */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.tab-panel.active {
    display: block; /* Show the active tab */
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Reset position */
}


/* Form Styling */
.task-script-builder h3 {
    margin-bottom: 0px;
    font-size: 13px;
}

.task-script-builder select,
.task-script-builder input,
.task-script-builder textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #1A1A1A;
    color: white;
    border: 1px solid #3C3C3C;
    font-size: 12px;
    border-radius: 4px;
}

.filter-group,
.condition-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.task-script-builder .delete-btn {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
}

.task-script-builder .delete-btn:hover {
    color: #FF5252;
}

.object_choice{
    display: flex;
    justify-content: space-between;
}

.object_choice select{
    width: 200px;
}

.bot-filter-title{
    font-size: 12px;
}

.custom_data_filter{
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.custom_data_filter select{ 
    width: 69px;
}

.custom_parameters{
    display: flex;
    justify-content: space-between;
}

/* General Tab Styling */
.tab-panel {
    padding: 20px;
    background-color: #1e1e1e; /* Dark background */
    color: #d4d4d4; /* Light gray text */
    border-radius: 8px;
    border: 1px solid #3c3c3c; /* Subtle border */
    margin-top: 10px;
    font-family: Arial, sans-serif;
}

/* Section Titles */
.summary-section h4 {
    color: #66bb6a; /* Green accent for section titles */
    font-size: 14px;
    margin-bottom: 5px;
    border-bottom: 1px solid #3c3c3c;
    padding: 5px 0;
}

/* Text Fields */
#bot-name {
    background-color: #2e2e2e; /* Slightly lighter gray for inputs */
    color: #d4d4d4; /* Match the text color */
    border: 1px solid #4c4c4c;
    border-radius: 4px;
    padding: 5px 10px;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 7px;
}

.bot-name label{
    font-size: 14px;
}

/* Summary Text */
.summary-section p {
    margin: 5px 0;
    color: #b8b8b8; /* Muted gray for details */
    line-height: 1.6;
    font-size: 12px;
}

/* Buttons */
.actions button {
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 10px;
    margin-top: .7em;
}

/* Save Button */
#save-configuration {
    background-color: #237226; /* Green background */
    color: white;
    transition: background-color 0.3s;
}
#save-configuration:hover {
    background-color: #45a045; /* Slightly darker green on hover */
}

/* Cancel Button */
#cancel-configuration {
    background-color: #b7261c; /* Red background */
    color: white;
    transition: background-color 0.3s;
}
#cancel-configuration:hover {
    background-color: #d32f2f; /* Slightly darker red on hover */
}

/* Conditions Section Styling */
#summary-conditions p {
    background-color: #2e2e2e; /* Same as input fields */
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 8px;
    margin: 5px 0;
    color: #cfd8dc; /* Light blue-gray for conditions */
}

/* Highlight Active Tab */
.tab-link.active {
    background-color: #2c8b31ad; /* Green for the active tab */
    color: white;
    border-radius: 4px 4px 0 0;
}

/* Tab Buttons Styling */
.tab-header {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #3c3c3c;
}
.tab-link {
    padding: 10px 20px;
    background-color: #2e2e2e; /* Dark gray */
    color: #d4d4d4;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.tab-link:hover {
    background-color: #3c3c3c; /* Slightly lighter gray */
    color: #ffffff;
}

.saved-tasks-list p{
    color: #c9c9c983;
    font-size: 14px;
}

.loadTaskData{
    width: 100px;
    height: 20px;
    border: none;
    background: #1d1d1e;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    min-width: 80px;
    max-width: 80px;
}

.manage-task-entry{
    display: flex;
    min-width: 120px;
    gap: 0.5em !important;
    margin-left: 2.8em;
    max-width: 120px;
}

.script-container{
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.watcher-group button, #add-watcher-btn, .remove-watcher-btn, .delete-condition-btn,
.add-condition-btn{
    width: 110px;
    height: 30px;
    border: none;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    margin: 1em 0;
    margin-right: .5em;
}

.add-command-btn{
    margin-top: 1em;
}

.watcher-group h4{
    margin: .5em 0;
}

.custom_parameters{
    justify-content: start;
    gap: 1em;
}

.watcher-group .watcher-mode{
    width: 90px;
}

#summary-watchers ul li{
    margin: 5px 0;
    color: #b8b8b8;
    line-height: 1.6;
    font-size: 12px;
    list-style: none;
}

#watchers-container .custom_parameters{
    flex-wrap: wrap;
    gap: 0em;
}

#watchers-container .filter-group{
    margin-bottom: 0;
    margin-right: 1em;
    margin-bottom: .5em;
    flex-wrap: wrap;
}

.task-script-builder{
    /* display: block !important; */
}

.tab-panel {
    padding: 20px;
    background-color: #02070D;
    color: #d4d4d4;
    border-radius: 0px;
    border: none;
    margin-top: 0px;
    font-family: Arial, sans-serif;
}

.tab-content{
    padding: 0;
}

.task-script-builder select, .task-script-builder input, .task-script-builder textarea {
    width: 100%;
    padding: 10px;
    /* margin-bottom: 20px; */
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
}

hr {
    color: #282f47cf;
    border: 1px solid #1b1d25;
}

.tab-link.active {
    /* background-color: #2c8b31ad; */
    background: #02070D !important;
    color: #c9c9c9;
    border-radius: 0;
}

.tab-link.active {
    border-bottom: 1px solid #cbcbcb;
    border-radius: 0;
    color: #ffffff;
}

.tab-link{
    margin-right: 0;
    transition: none;
    border-radius: 0;
    padding: 13px 0;
    background: #02070D;
}

.tab-link:hover {
    background: #02070D;
    color: #ffffff;
}

.watcher-group button, #add-watcher-btn, .remove-watcher-btn, .delete-condition-btn, .add-condition-btn {
    width: 145px;
    height: 30px;
    border: 1px solid #282f47cf;
}

.task-script-builder select, .task-script-builder input, .task-script-builder textarea {
    color: #c9c9c9;
}

.task-script-builder{
    background: #02070D;
    border: none;
}

#bot-name-input{
    margin-top: 1em;
}



/* Target the vertical scrollbar for .task-script-builder */
.task-script-builder {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #44444480 #020a1a; /* For Firefox: thumb and track */
    top: -11em;
    height: 630px;
}

/* For WebKit-based browsers (Chrome, Edge, Safari) */
.task-script-builder::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
}

.task-script-builder::-webkit-scrollbar-track {
    background: #1e325e; /* Dark background for the track */
}

.task-script-builder::-webkit-scrollbar-thumb {
    background-color: #1e325e; /* Darker color for the thumb */
    border-radius: 4px; /* Rounded edges for the thumb */
}

.task-script-builder::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Slightly lighter color on hover */
}

.command-args label{
    font-size: 12px;
}

.auto-walker-container{
    z-index: 222;
    /* display: flex; */
    justify-content: center;
    flex-direction: column;
    /* align-items: center; */
    display: none;
}

.auto-walker-container{
    width: 835px;
    height: 482px;
    background: #121212;
    position: absolute;
    top: 10em;
    left: 50%;
    z-index: 22222;
    transform: translateX(-50%);
}

.map-header{
    display: flex;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #38393a;
    background: #02070D;
    align-items: center;
    justify-content: center;
}

.map-header ul{
    list-style: none;
    display: flex;
    gap: 2em;
}

.map-header ul li{
    color: #c9c9c9;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: .5em;
}

.mapsvg-icon {
    width: 15px;          /* Adjust the size as needed */
    height: 15px;
    vertical-align: middle; /* Aligns the icon vertically with the text */
    fill: #4E65F8;        /* Sets the icon color */
}

.active-map-tab{
    /* border-bottom: 2px solid #4E65F8; */
    height: 60px;
}

.map-config{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 422px;
}

.world-map-container{
    background-image: url('../images/worldmap.png');
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: fit;
}

.map-settings{
    width: 300px;
    overflow-y: scroll;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #44444480 #020a1a; /* For Firefox: thumb and track */
    padding: 0 1em;
}

.map-settings ul li{
    list-style: none;
    color: #c9c9c9;
    width: 100%;
    height: 37px;
    text-align: center;
    line-height: 40px;
    background: #000;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    cursor: pointer;
}

.map-settings h1{
    font-size: 15px;
    text-align: center;
    color: #c9c9c9;
    margin-bottom: .5em;
}

.activepointpin{
    font-size: 12px !important;
    background: transparent !important;
    position: relative;
}

.removeMapPinPoint{
    font-size: 16px;
    position: absolute;
    right: 1em;
    top: -2px;
    cursor: pointer;
}

.pinPointContainer li{
    justify-content: start !important;
    padding-left: 2em;
}

.pin-drop-status{
    font-size: 10px;
    text-transform: uppercase;
    background: #15551F;
    height: 17px;
    line-height: 17px;
    border-radius: 2px;
    padding: 0 .5em;
    margin-left: .7em;
    display: none;
}

.currentPointLetter{
    font-weight: bold;
}

.pinPointContainer{
   max-height: 250px;
   /* overflow-y: auto;  */
   scrollbar-width: thin; /* For Firefox */
   scrollbar-color: #44444480 #020a1a; /* For Firefox: thumb and track */
}

.closeWorldMap{
    position: absolute;
    right: 1em;
    font-size: 20px;
    cursor: pointer;
}

/* map */
/* Pin Styles */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%); /* Use -100% if the pin's tip is at the bottom */
    /* Alternatively, use translate(-50%, -50%) if you want to center the pin */
    text-align: center;
    pointer-events: none; /* Allows clicks to pass through the pin */
}

.map-pin .pin-letter {
    font-weight: bold;
    color: #ffffff;
    margin-bottom: -10px;
    position: relative;
    top: -1em;
    left: .2em;
    display: block;
}

.mapsvg-icon {
    width: 24px; /* Adjust size as needed */
    height: 24px;
}

.pin-drop-status {
    margin-left: 10px;
    font-weight: bold;
    display: inline-block;
}

.setNewDropPointSpot {
    cursor: pointer;
}

.setNewDropPointSpot.active {
    /* Optional: Style when active */
}

.setNewDropPointSpot img {
    vertical-align: middle;
}

.setNewDropPointSpot span {
    margin-left: 5px;
}

/* Active Points List Styles */
.pinPointContainer {
    list-style: none;
    padding: 0;
}

.activepointpin {
    margin-bottom: 5px;
}

.activepointpin .currentPointLetter {
    font-weight: bold;
}

.activepointpin .removeMapPinPoint {
    color: fff;
    cursor: pointer;
    margin-left: 10px;
}

.world-map-container {
    position: relative; /* Necessary for absolutely positioned pins */
    cursor: pointer; /* Changes cursor to indicate interactivity */
    overflow: hidden; /* Prevents pins from overflowing if placed at the edges */
}

/* Existing styles remain the same */

/* Styles for new buttons */
.saveChangesButton,
.clearAllPinsButton {
    display: inline-block;
    margin-left: 0px !important;
}

.clearAllPinsButton{
    margin-left: 10px !important;
}

.saveChangesButton button,
.clearAllPinsButton button {
    cursor: pointer;
}

/* Styles for the edit icon */
.activepointpin .editMapPinPoint {
    color: blue;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5px;
}

.setNewDropPointSpot.editing {
    /* Optional: Add styles to indicate editing mode */
    background-color: #ffeb3b; /* Yellow background */
}


/* New Buttons Styles */
.saveChangesButton,
.clearAllPinsButton {
    display: inline-block;
    margin-left: 10px;
}

.saveChangesButton button,
.clearAllPinsButton button {
    cursor: pointer;
    font-size: 12px;
    padding: .5em 0;
}


/* Path Name Input Styles */
.path-name-container {
    margin-top: 10px;
    margin-bottom: 20px;
}

.path-name-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.path-name-container input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

/* Active Points List Styles */
.pinPointContainer {
    list-style: none;
    padding: 0;
}

.activepointpin {
    margin-bottom: 5px;
    cursor: move; /* Indicates that the item is draggable */
}

.activepointpin .currentPointLetter {
    font-weight: bold;
}

.activepointpin .removeMapPinPoint {
    color: red;
    cursor: pointer;
    margin-left: 10px;
}

.activepointpin .editMapPinPoint {
    color: blue;
    cursor: pointer;
    margin-left: 10px;
}

/* Highlight Editing List Item */
.activepointpin.editing {
    background-color: #e0f7fa; /* Light blue background */
}

.saveChangesButton button{
    background: #0b3a17 !important;
    border: none;
    color: #c9c9c9;
    width: 120px;
}

.clearAllPinsButton button{
    background: #3a0b0b !important;
    border: none;
    color: #c9c9c9;
    width: 120px;
}

.map-config-btns{
    display: flex;
    margin-right: .5em;
}

.map-config-btns button{
    width: 87px;
    margin-top: 2em;
}

.map-config-btns li{
    background: none !important;
}

.path-name-container label{
    color: #b3b3b3;
    font-weight: 500;
    font-size: 14px;
    margin-top: 1em;
}

.path-name-container input[type=text]{
    background: #0a0a0a;
    color: #C9C9C9;
    font-size: 12px;
    border: none;
}

/* Configurations Container Styles */
.configurations-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.configurations-container h2 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #c9c9c9;
    font-size: 16px;
    margin-top: 3em;

}

.config-item {
    margin-bottom: 15px;
}

.config-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #c9c9c9;
    font-size: 12px;


}

.config-item input,
.config-item select {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #c9c9c9;
    background: #0a0a0a;
    color: #C9C9C9;
    font-size: 12px;
    border: none;
}

/* Active Points List Styles */
/* Highlight Editing List Item */
.activepointpin.editing {
    background-color: #e0f7fa; /* Light blue background */
    border-left: 4px solid #0288d1; /* Blue border for emphasis */
}

.task-script-builder{
    /* display: block !important; */
}

.walker-data{
    width: 100%;
    height: 35px;
    background: #0a0a0a;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 1em;
    padding-right: .5em;
    justify-content: space-between;
}

.walker-data span{
    color: #c9c9c9;
}

.edit-map-data{
    width: 50px !important;
    height: 20px !important;
    cursor: pointer;
    border: 1px solid #282f47cf;
    color: #c9c9c9;
    background: #0a0a0a;
}

.walker-total-steps{
    margin-right: .5em !important;
    text-transform: uppercase;
    font-size: 11.5px;
    background: rgb(11, 53, 11);
    padding: .2em .5em;
    border-radius: 3px;
}

.task-container{
    /* display: flex; */
    z-index: 9999;
    /* border: 1px solid #282f47cf; */
    /* display: none; */
}

.model-library-container {
    width: 645px;
    min-height: 500px;
    height: 500px auto;
    background: #02070D;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 1.5em;
    display: none;
}

.library-title {
    margin-bottom: 20px;
    font-size: 20px;
    color: #c9c9c9;
}

.upload-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.upload-section button{
    font-size: 12px;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    min-width: 80px;
    width: 130px;
    text-align: center;
    max-width: 200px;
    padding: .5em 0;
    width: 100px;
    border: none;
    background: #1d1d1e;
    border-radius: 0;
}

.upload-label {
    width: 100px;
    border: none;
    background: #1d1d1e;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    min-width: 80px;
    width: 130px;
    text-align: center;
    max-width: 200px;
    padding: .5em 0;

}

.upload-label:hover {
    background: #555;
}

.file-input {
    display: none;
}

.upload-button {
    background: #555;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    color: #c9c9c9;
    font-size: 1em;
    transition: background 0.3s ease;
}

.upload-button:hover {
    background: #666;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.models-grid .model-item {
    background: #3a3a3a;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-align: center;
}

.models-grid .model-item img {
    max-width: 100%;
    border-radius: 4px;
}

.models-grid .model-item .model-name {
    margin-top: 10px;
    color: #c9c9c9;
    font-size: 0.9em;
    word-break: break-word;
}

.model-tasks-title{
    color: #c9c9c9;
    font-size: 16px;
}

.model-tasks-list{
    margin-top: 1em;
}

.model-task-container{
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.model-task-entry{
    width: 100%;
    height: 50px;
    background: #292929;
    border-radius: 10px;
    padding-left: 1em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #c9c9c9;
    gap: .5em;
    font-size: 14px;
    justify-content: space-between;
    cursor: pointer;
    min-width: 120px !important;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
}

.model-task-entry div{
    display: flex;
    align-items: center;
    gap: .5em;
}

.manage-model-task-entry{
    display: flex;
    min-width: 120px;
    gap: 0.5em !important;
    margin-left: 2.8em;
    max-width: 120px;
}

.modelFolders{
    /* margin-top: 1em; */
    width: 77%;
}

.add-folder {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.add-folder input {
    flex: 1;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #666;
    border-radius: 4px;
    background-color: #1d1d1e;
    padding: 1em 0;
    text-indent: 20px;
    background-color: #0a0a0a;
    color: #c9c9c9;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
}

.add-folder button {
    padding: 5px 20px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background-color: #0a0a0a;
    color: #c9c9c9;
    cursor: pointer;
    border: 1px solid #282f47cf;
    transition: background-color 0.3s ease;
}

.add-folder button:hover {
    background-color: #131212;
}

.user_models_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* opacity: 0; */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.user_models_modal_content {
    background: #02070D;
    padding: 20px;
    border-radius: 10px;
    color: #c9c9c9;
    text-align: center;
    width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.user_models_modal_content h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
}

.user_models_modal_content input {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #666;
    border-radius: 4px;
    background-color: #0a0a0a;
    color: #c9c9c9;
    font-size: 12px;
    text-align: center;
    border: 1px solid #282f47cf;
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
}

.modal-buttons button {
    background: #151518;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    color: #c9c9c9;
    font-size: 12px;
    transition: background 0.3s ease;
    border: 1px solid #1c2131cf;
}

.modal-buttons button:hover {
    background-color: #131212;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
}

.folder {
    margin-bottom: 20px;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    background: #1d1d1e;
}

.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

.folder-header .toggle-folder {
    cursor: pointer;
    margin-right: 10px;
}

.folder-header .folder-name {
    font-size: 16px;
    font-weight: bold;
    color: #c9c9c9;
}

.folder-content {
    margin-top: 10px;
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.folder-content.hidden {
    display: none;
}

.image-item {
    position: relative;
    width: 100px;
    text-align: center;
}

.image-item img {
    width: 100%;
    border-radius: 5px;
}

.image-title {
    margin-top: 5px;
    font-size: 12px;
    color: #c9c9c9;
}

.delete-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #702626;
    color: #fff;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    width: 15px;
    height: 15px;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
}

.image-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.folder-header button {
    margin-left: 5px;
    background: #555;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}

/* Progress Bar Styles */
#progressContainer {
    width: 100%;
    background: #2a2a2a;
    border-radius: 5px;
    margin-top: 10px;
    height: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

#progressBar {
    width: 0;
    height: 100%;
    background: #4caf50;
    transition: width 0.3s ease;
}

/* Folder and Image Styles */
.folder {
    margin-bottom: 20px;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    background: #1e1e1f;
}

.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

.folder-header .toggle-folder {
    cursor: pointer;
    margin-right: 10px;
}

.folder-header .folder-name {
    font-size: 16px;
    font-weight: bold;
    color: #c9c9c9;
}

.folder-content {
    margin-top: 10px;
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.folder-content.hidden {
    display: none;
}

.image-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.image-title {
    font-size: 12px;
    color: #c9c9c9;
    text-align: center;
    margin-top: 5px;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user_models_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1b1b1b;
    padding: 20px;
    z-index: 999;
    border: 1px solid #000;
}

.user_models_modal_content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.folder-content, .group-content {
    flex-wrap: wrap;
    display: none;
}

.folder-header, .group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1b1b1be8;
    padding: 20px;
    z-index: 999;
    border: 1px solid #000;
} */

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.folder-content, .group-content {
    flex-wrap: wrap;
    display: none;
}

.folder-header, .group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.folder-header button{
    background: #0e0e0f;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    width: 96px;
    text-align: center;
}

#selectAllImagesBtn{
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #666;
    border-radius: 4px;
    background-color: #0a0a0a;
    color: #c9c9c9;
    font-size: 12px;
    text-align: center;
    border: 1px solid #282f47cf;
}

.modal-content label, .modal-content h3{
    font-size: 12px;
}

.edit-image{
    background: #0e0e0f;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    width: 49px;
    text-align: center;
    padding: .5em;
    border: none;
    margin-top: .5em;

}

#imageSelectionList li{
    list-style: none;
    display: flex;
    flex-direction: column;
    max-width: 50px;
}

#imageSelectionList{
    display: flex;
    gap: 1em;
    /* justify-content: space-between; */
}

.group-header button{
    background: #0e0e0f;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    width: 96px;
    text-align: center;
    border: none;
    padding: .5em;
    border: 1px solid #2d2d2d;
}

#editGroupImageList li{
    list-style: none;
    display: flex;
    flex-direction: column;
}

#editGroupImageList{
    display: flex;
    margin-bottom: 1em;
    gap: 1em;
}

.group-name{
    color: rgb(201,201,201);
    font-weight: bold;
}

.toggle-group, .toggle-folder{
    cursor: pointer;
}

.library-title{
    display: flex;
    align-items: center;
}

.close-model-library{
    font-size: 30px;
    position: absolute;
    right: 1em;
    cursor: pointer;
}

.images-container{
    display: flex;
    max-width: 454px;
    flex-wrap: wrap;
}

/* Target Image Selector Modal Styles */

/* Modal Overlay */
.tis_modal {
    /* display: none; */ /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999;
    /* z-index: 2000; */ /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    display: flex;
}

/* Modal Content */
.tis_modal_content {
    background-color: #02070D;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #0c1535;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

/* Close Button */
.tis_close_target_modal {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.tis_close_target_modal:hover,
.tis_close_target_modal:focus {
    color: black;
    text-decoration: none;
}

/* Threshold Input */
.tis_threshold_input {
    /* margin-bottom: 20px; */
}

.tis_threshold_input label {
    margin-right: 10px;
    /* font-weight: bold; */
    margin-bottom: 1em;
    font-size: 12px;
}

/* Folder and Group Sections */
.tis_folder_group_container {
    display: flex;
    /* justify-content: space-between; */
    /* margin-bottom: 20px; */
}

.tis_folders_section,
.tis_groups_section {
    margin-right: 1em;
    /* width: 48%; */
}

.tis_folders_list,
.tis_groups_list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

.tis_folder_item,
.tis_group_item {
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
}

.tis_folder_item:hover,
.tis_group_item:hover {
    background-color: #f1f1f1;
}

.tis_folder_item img,
.tis_group_item img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 4px;
}

/* Selected Images */
.tis_selected_images_container {
    margin-bottom: 20px;
    margin-top: 3em;
}

.tis_selected_images_container ul {
    list-style-type: none;
    padding: 0;
}

.tis_selected_images_container li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.tis_selected_images_container li img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 4px;
}

/* Action Buttons */
.tis_modal_actions {
    /* text-align: right; */
}

.tis_modal_actions button {
    /* padding: 10px 20px; */
    margin-left: 10px;
    border: 1px solid #282f47cf;
    border-radius: 4px;
    cursor: pointer;
}

.tis_confirm_selection_btn {
    background-color: #4CAF50;
    color: white;
}

.tis_confirm_selection_btn:hover {
    background-color: #151518;
}

.tis_cancel_selection_btn {
    background-color: #f44336;
    color: white;
}

.tis_cancel_selection_btn:hover {
    background-color: #39100d;
    border: 1px solid #202127cf;
}

/* Button to Open Modal */
.tis_custom_data_filter {
    /* margin-bottom: 20px; */
    margin-bottom: -.5em;
    width: 100%;
}

.tis_bot_filter_title {
    margin-right: 10px;
    font-weight: bold;
}

.tis_open_target_modal_btn {
    padding: 8px 16px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.tis_open_target_modal_btn:hover {
    background-color: #005f6a;
}

/* Image Checkbox Styling */
.tis_image_wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.tis_image_checkbox {
    margin-right: 10px;
}

.tis_image_thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* targetImageSelector.css */

/* Existing styles... */

/* Flex layout for image display */
.tis_images_display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Styling individual image wrappers */
.tis_image_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tis_image_checkbox {
    margin-bottom: 5px;
}

.tis_image_thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.tis_image_thumbnail:hover {
    transform: scale(1.05);
}

/* targetImageSelector.css */

.tis_loading_indicator {
    text-align: center;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

.tis_modal_content h2{
    font-size: 14px;
    width: 100%;
    margin-bottom: 1em;
    /* margin-right: auto; */
}

#tis_threshold{
    margin-top: 1em;
}

/* targetImageSelector.css */

/* Existing styles... */

/* Change cursor to pointer when hovering over clickable images */
.clickable-image {
    cursor: pointer;
    transition: transform 0.2s;
}

.clickable-image:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* Style for selected images list */
#tis_selectedImagesList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style-type: none;
    padding: 0;
}

#tis_selectedImagesList li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    border: 1px solid #282f47cf;
    padding: 5px;
    border-radius: 4px;
    background-color: #0a0a0a;
}

#tis_selectedImagesList img {
    border-radius: 4px;
}

.selectedTargetObjectImages{
    display: flex;
    gap: .3em;
    margin-bottom: 1em;
}

.selectedTargetObjectImages img{
    width: 35px;
    height: 35px;
    object-fit: cover;
    outline: 1px solid #979797;
}

#tis_deleteConfirmationModal{
    z-index: 999999 !important;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    height: 179px;
    width: 250px;
    display: flex;
    padding: 1em;
    background: #000000b0;
}

#tis_deleteConfirmationModal button{
    margin-top: 1em;
    width: 145px;
    height: 30px;
    border: 1px solid #282f47cf;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    margin: 1em 0;
    margin-right: .5em;
}

#tis_deleteConfirmationModal p, #tis_deleteConfirmationModal h2{
    color: #f9f9f9;
    font-size: 12px;
    margin-bottom: .5em;
}

.tis_modal_actions{
    display: flex;
    gap: .2em;
}

.mainWatcherTargetObject{
    width: 100%;
}

.command-type{
    margin-bottom: .1em !important;
}

.command-selected-images p{
    font-size: 12px;
    margin-bottom: 1em;
}

#commandImageModal{
    position: absolute;
    top: 0;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
    background-color: #02070D;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #0c1535;
    width: 80%;
    border-radius: 8px;
    visibility: visible !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #c9c9c9;
}

.cis_modal_actions button{
    margin-left: 10px;
    border: 1px solid #282f47cf;
    border-radius: 4px;
    cursor: pointer;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    margin: 1em 0;
    margin-right: .5em;
    width: 110px;
    height: 30px;
}

.cis_images_display{
    display: flex;
    gap: .5em;
    margin-top: 1em;
    flex-wrap: wrap;
}

.cis_image_wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.cis_image_wrapper img{
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#cis_selectedImagesList img{
    width: 40px;
    height: 40px;
    outline: 1px solid #9c9898;

}

#cis_selectedImagesList{
    margin-top: 1em;
    gap: .5em;
    display: flex;
}

#cis_selectedImagesList li{
    list-style: none;
}

.cis_modal_content input, .cis_modal_content select{
    width: 100%;
    padding: 10px;
    /* margin-bottom: 20px; */
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.cis_modal_content label, .cis_folders_section h3,
.cis_groups_section h3{
    font-size: 12px;
    margin-top: 1em;
}

.cis_modal_content h2{
    font-size: 14px;
    margin: 1em 0;
}

.cis_selected_images_container h3{
    font-size: 12px;
    margin-top: 1em;
}

.cis_images_display p{
    font-size: 14px;
    margin-top: -1em;
}

.cmd-selected-image button{
    width: 20px;
    height: 20px;
    font-size: 9px;
}

.cmd-selected-image{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.command-selected-images{
    display: flex;
    gap: .5em;
}

.cmd-selected-image img{
    outline: 1px solid #979797;
    width: 35px;
    height: 35px;
}

.littlespace{
    margin-top: .9em;
}

.selectedTargetObjectImages img{
    cursor: pointer;
}

/* For user object modal */

#userObjectImageModal{
    position: absolute;
    top: 0;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
    

    background-color: #02070D;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #0c1535;
    width: 80%;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #c9c9c9;
}

.uo_modal_actions{
    margin-top: .5em;
}

.uo_modal_actions button{
    margin-left: 10px;
    border: 1px solid #282f47cf;
    border-radius: 4px;
    cursor: pointer;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    margin: 1em 0;
    margin-right: .5em;
    width: 110px;
    height: 30px;
}

.uo_images_display{
    display: flex;
    gap: .5em;
    margin-top: 1em;
    flex-wrap: wrap;
}

.uo_image_wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.uo_image_wrapper img{
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#uo_selectedImagesList img{
    width: 40px;
    height: 40px;
    outline: 1px solid #9c9898;

}

#uo_selectedImagesList{
    margin-top: 1em;
    gap: .5em;
    display: flex;
    flex-wrap: wrap;
}

#uo_selectedImagesList li{
    list-style: none;
}

.uo_modal_content input, .uo_modal_content select{
    width: 100%;
    padding: 10px;
    /* margin-bottom: 20px; */
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.uo_modal_content label, .uo_folders_section h3,
.uo_groups_section h3{
    font-size: 12px;
    margin-top: 1em;
}

.uo_modal_content h2{
    font-size: 14px;
    margin: 1em 0;
}

.uo_selected_images_container h3{
    font-size: 12px;
    margin-top: 1em;
}

.uo_images_display p{
    font-size: 14px;
    margin-top: -1em;
}

.cmd-selected-image button{
    width: 20px;
    height: 20px;
    font-size: 9px;
}

#uo_folder_images{
    display: flex;
    gap: .5em;
}

.uo_image_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uo_folder_images{
    display: flex;
    gap: .5em;
}

.uo_selected_image_wrapper img{
    outline: 1px solid #979797;
    width: 35px;
    height: 35px;
}

.littlespace{
    margin-top: .9em;
}

.uo_selected_image_wrapper img{
    cursor: pointer;
}

.uo_modal_content h3{
    font-size: 14px;
}

.uo_modal_content p{
    font-size: 12px;
    margin-bottom: 1em;
}

.uo_open_image_modal_btn{
    width: 100%;
    padding: 10px;
    /* margin-bottom: 20px; */
    background-color: #0a0a0a;
    color: #c9c9c9;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
}

.uo_image_json_data, .uo_edit_json_data_btn{
    display: none;
}

.selectedUserObjectImages{
    display: flex;
    gap: .7em;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.uo_selected_image_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uo_remove_selected_image_btn{
    border: 1px solid #282f47cf;
    background: transparent;
    color: #c9c9c9;
    font-size: 9px;
    padding: .5em;
    margin-top: 1em;
    cursor: pointer;
}

.uo_open_image_modal_btn{
    cursor: pointer;
}

.user_objects{
    /* margin-bottom: -3.5em; */
}

#uo_group_images, #uo_folder_images{
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

/* Existing Styles */
  #uo_folder_images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }
  .uo_image_wrapper {
    position: relative;
  }
  
  .canvas-container {
    margin-top: 0px;
  }
  .canvas-container canvas {
    outline: 1px solid #ccc;
    max-width: 800px;
    max-height: 800px;
    display: block;
    margin-bottom: 3px;
    opacity: 0; /* Start invisible */
    transition: opacity 2s ease-in-out; /* Fade-in over 2 seconds */
  }
 
  .canvas-container canvas{
    width: 50px;
    height: 50px;
  }

  #uo_selectedImagesList img {
    width: 50px;
    height: 50px;
    outline: 1px solid #9c9898;
}

.train_object_container{

}

.train_object_container span{
    font-size: 12px;
}

.train_object_container input{
    color: #c9c9c9;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    background-color: #0a0a0a;
}

#userObjectImageModal h3{
    font-size: 12px;
}

.trained_models_container{
    display: flex;
    flex-wrap: wrap;
    gap: .7em;
    margin-bottom: 1em;
    overflow-y: scroll;
    max-height: 250px;
}

/* Modal Overlay */
.upload-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}

/* Modal Content */
.upload-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}

/* Modal Header */
.upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.upload-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

/* Close Button */
.upload-close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.upload-close-button:hover,
.upload-close-button:focus {
    color: #000;
    text-decoration: none;
}

/* Modal Body */
.upload-modal-body {
    padding: 20px 0;
    max-height: 400px;
    overflow-y: auto;
}

.upload-task-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.upload-task-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

/* Modal Footer */
.upload-modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.upload-btn {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.upload-btn-cancel {
    background-color: #f44336; /* Red */
    color: white;
}

.upload-btn-cancel:hover {
    background-color: #d32f2f;
}

.upload-btn-confirm {
    background-color: #4CAF50; /* Green */
    color: white;
}

.upload-btn-confirm:hover {
    background-color: #388E3C;
}

/* Task List */
.upload-task-list {
    display: flex;
    flex-direction: column;
}

/* Loader Styles */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto; /* Center the loader */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Centering the loader inside upload feed */
.bot-cloud-upload-feed {
    position: relative;
    min-height: 100px; /* Adjust based on content */
}


/* assets/css/modal_styles.css */

/* Existing modal styles */
/* ... your existing CSS ... */

/* Description Textarea Styles (now Quill Editor) */
.task-description-container {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.task-description-container h3 {
    margin-top: 0;
}

.task-description-container .ql-container {
    height: 200px; /* Ensure the editor has sufficient height */
}

#task-description-editor {
    /* Optional: Customize the editor's appearance */
    background-color: white;
}

/* Responsive Design Adjustments */
@media (max-width: 600px) {
    .upload-modal-content {
        width: 90%;
        margin: 20% auto;
    }

    #task-description-editor {
        height: 150px;
    }
}

.edit-modal-content, .upload-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 500px; /* Could be more or less, depending on screen size */
}

.edit-modal-header, .upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-close-button, .upload-close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.edit-close-button:hover, .upload-close-button:hover,
.edit-close-button:focus, .upload-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.edit-modal-footer, .upload-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.edit-btn, .upload-btn {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.edit-btn-cancel, .upload-btn-cancel {
    background-color: #f44336; /* Red */
    color: white;
}

.edit-btn-confirm, .upload-btn-confirm {
    background-color: #4CAF50; /* Green */
    color: white;
}

/* Modal Styles for Edit Task */
.modal-edit-task {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Close Button for Edit Modal */
.modal-edit-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-edit-close:hover,
.modal-edit-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Styles for Delete Task */
.modal-delete-task {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-delete-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    border-radius: 5px;
    position: relative;
}

/* Close Button for Delete Modal */
.modal-delete-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-delete-close:hover,
.modal-delete-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Delete Option Buttons */
.delete-option-btn-full, .delete-option-btn-public {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.delete-option-btn-full {
    background-color: #f44336; /* Red */
    color: white;
}

.delete-option-btn-public {
    background-color: #ff9800; /* Orange */
    color: white;
}

.delete-option-btn-full:hover {
    background-color: #d32f2f;
}

.delete-option-btn-public:hover {
    background-color: #fb8c00;
}

/* Edit Modal Buttons */
.edit-btn-cancel, .edit-btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 5px;
}

.edit-btn-cancel {
    background-color: #bbb;
    color: white;
}

.edit-btn-confirm {
    background-color: #4CAF50;
    color: white;
}

.edit-btn-cancel:hover {
    background-color: #999;
}

.edit-btn-confirm:hover {
    background-color: #45a049;
}

/* Basic Modal Styles */
/* .modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgba(0,0,0,0.4); 
} */

.modal-content, .delete-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px;
    border-radius: 5px;
    position: relative;
}

.close-button, .edit-close-button, .delete-close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus,
.edit-close-button:hover,
.edit-close-button:focus,
.delete-close-button:hover,
.delete-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.delete-options {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.delete-option-btn {
    padding: 10px 20px;
    cursor: pointer;
}

.delete-option-btn:hover {
    background-color: #d32f2f;
}

.edit-btn-cancel,
.edit-btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 5px;
}

.edit-btn-cancel {
    background-color: #bbb;
    color: white;
}

.edit-btn-confirm {
    background-color: #4CAF50;
    color: white;
}

.edit-btn-cancel:hover {
    background-color: #999;
}

.edit-btn-confirm:hover {
    background-color: #45a049;
}

/* Modal Styles for Edit Task */
.modal-edit-task {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-edit-content {
    background-color: #ffffff;
    color: #000000;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    max-width: 500px;
    border-radius: 5px;
    position: relative;
}

/* Close Button for Edit Modal */
.modal-edit-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-edit-close:hover,
.modal-edit-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Styles for Delete Task */
.modal-delete-task {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-delete-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 400px;
    border-radius: 5px;
    position: relative;
}

/* Close Button for Delete Modal */
.modal-delete-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-delete-close:hover,
.modal-delete-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Delete Option Buttons */
.delete-option-btn-full, .delete-option-btn-public {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.delete-option-btn-full {
    background-color: #f44336; /* Red */
    color: white;
}

.delete-option-btn-public {
    background-color: #ff9800; /* Orange */
    color: white;
}

.delete-option-btn-full:hover {
    background-color: #d32f2f;
}

.delete-option-btn-public:hover {
    background-color: #fb8c00;
}

/* Edit Modal Buttons */
.edit-btn-cancel, .edit-btn-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 5px;
}

.edit-btn-cancel {
    background-color: #bbb;
    color: white;
}

.edit-btn-confirm {
    background-color: #4CAF50;
    color: white;
}

.edit-btn-cancel:hover {
    background-color: #999;
}

.edit-btn-confirm:hover {
    background-color: #45a049;
}

/* Existing Bot Listing Styles */
.upload-feed-container {
    /* Existing styles for bot listings */
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.upload-feed-left {
    /* Existing styles */
}

.upload-feed-upload-title {
    /* Existing styles */
    font-weight: bold;
    font-size: 18px;
}

.upload-feed-upload-author {
    /* Existing styles */
    color: #555;
    font-size: 14px;
}

.upload-entry-desc {
    /* Existing styles */
    margin: 10px 0;
    color: #333;
}

.user-bot-upload-date {
    /* Existing styles */
    font-size: 12px;
    color: #999;
}

.upload-feed-right {
    /* Existing styles */
}

.upload-feed-install button {
    /* Existing styles for Install and Report buttons */
    margin-left: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    font-size: 14px;
}

.upload-feed-install button:hover {
    background-color: #0056b3;
}

.upload-feed-container-public, .upload-feed-container-private{
    background: #232323;
    padding: 1em;
    margin: .8em 0;
}

/* Design changes for bot module */
.upload-entry-desc-public, .left-text-private{
    font-size: 14px;
    color: #ffffffad;
    /* font-weight: bold; */
}

.upload-feed-upload-title-public, .upload-feed-upload-author-public{
    font-size: 16px;
    color: #ffffffad;
}

.private-bot-feed h2{
    font-size: 16px;
    color: #ffffffad;
    margin-top: 1em;
}

.public-bot-feed h2 {
    font-size: 16px;
    color: #ffffffad;
    margin-top: 1em;
}

.upload-feed-left-private p{
    color: #ffffffad;
}

.user-bot-upload-date-private{
    font-size: 12px;
    margin: .5em 0;
}

.upload-feed-container-private, .upload-feed-container-public{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
}

.upload-feed-install-private button, .upload-feed-install-public button{
    width: 106px;
    padding: .6em 0;
    margin-right: .5em;
    cursor: pointer;
}

.edit-task-private, .install-new-script-public{
    background: #1d1d1e;
    border: none;
    color: #D7D7D7;
    font-size: 12px;
}

.delete-task-private, .report-script-issue-public{
    background: #281313;
    border: none;
    color: #D7D7D7;
    font-size: 12px;
}

.left-text-public span{
    font-size: 14px;
    color: #ffffffad;
}

.user-bot-upload-date-public{
    font-size: 12px;
    margin: .5em 0;
    color: #ffffffad;
}

.cloud-description{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.cloud-description p{
    color: #666666 !important;
    font-size: 14px;
    margin: 1em 0;
}

.bot-cloud-userpanel button{
    width: 100px;
    padding: .6em 0;
    margin-right: .5em;
    cursor: pointer;
    background: #1d1d1e;
    border: none;
    color: #c9c9c9;
    font-size: 12px;
}

.latest-upload-section{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.upload-entry-desc-private, .upload-entry-desc-public{
    font-size: 14px;
    margin: .4em 0;
}

.ql-container.ql-snow {
    border: 1px solid #282f47cf;
}

.upload-feed-upload-title-private,
.upload-feed-upload-title-public{
    font-weight: bold;
}

.edit-task{
    background: #1d1d1e;
    border: none;
    color: #D7D7D7;
    font-size: 12px;
    margin-left: 1em;
    padding: .5em;
    margin-right: .5em;
    cursor: pointer;

}

.delete-task{
    background: #521b1b;
    border: none;
    color: #D7D7D7;
    font-size: 12px;
    padding: .5em;
    margin-right: .5em;
    cursor: pointer;
}

.edit-task, .delete-task{
    display: none;
}

.upload-task-list{
    margin-left: 1em;
}

.upload-task-list label{
    font-size: 14px;
}

.new-bot-install-container{
    width: 500px;
    height: 400px;
    background: #02070D;
    border: 1px solid #282f47cf;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding: 2em;
}

#close-install-modal-task{
    font-size: 18px;
    position: absolute;
    right: 1em;
    top: .5em;
}

.installed-user-desc{
    font-size: 12px;
    color: #c9c9c9;
    margin-top: 1.5em;
    line-height: 18px;
}

.user-script-verification-status{
    color: #c9c9c9;
    margin-top: 2em;
    position: absolute;
    bottom: 2em;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.user-script-verification-status span{
    display: flex;
    align-items: center;
    gap: .8em;
}

.user-script-serve-btns button{
    margin-top: 2em;
    width: 100px;
    height: 30px;
    border: none;
    font-size: 12px;
    background: #15461c;
    color: #ffffff;
    cursor: pointer;
}


#close-install-modal-task:hover{
    opacity: .7;
    color: #c9c9c9;
}

.user-install-new-script-owner{
    color: #c9c9c9;
    margin-top: 1em;
    font-size: 12px;
}

.new-bot-install-container{
    display: none;
}

.webMenuBar{
    cursor: pointer;
    position: relative;
}

.webMenuBarActive{
    background: #1A1919;
}

.stractiweb-menu-dropdown{
    width: 250px;
    height: auto;
    background: #101014;
    border: 1px solid #3C3232;
    position: absolute;
    right: 0px;
    bottom: -19.5em;
    display: flex;
    display: none;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    z-index: 999;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    border-bottom: none;
    border-top: none;
}

.stractiweb-menu-dropdown li{
    list-style: none;
    padding: 1.5em;
    text-align: center;
    border-bottom: 1px solid #3C3232;
    width: 100%;
    color: #c9c9c9c9;
    font-size: 12px;
}

.stractiweb-menu-dropdown li a{
    color: #c9c9c9c9;
    text-decoration: none;
}

.stractiweb-menu-dropdown li:hover{
    background: #08080a;
}

.helpModule{
    width: 500px;
    height: 500px;
    background: #02070D;
    border: 1px solid #282f47cf;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    display: none;
    z-index: 9999;
}

/* .helpModule {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
} */

.helpModule h1 {
    font-size: 16px;
    text-align: center;
    color: #c9c9c9;
    padding: 1em;
    background: #0a0a0a;
    border-bottom: 1px solid #282f47cf;
}

.faq-container {
    /* border:  1px solid #282f47cf; */
    /* border-radius: 5px; */
    padding: 0;
    background: #f9f9f9;
}

.faq-item {
    /* border-bottom: 1px solid #ddd; */
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    border-bottom:  1px solid #282f47cf;
    position: relative;
    cursor: pointer;
    padding: 15px 20px;
    background: #0a0a0a;
    color: #fff;
    font-size: 13px;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #141414;
}

.faq-question::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.faq-question.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 20px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
}

.faq-answer p{
    margin-bottom: 1em;
}

.active-tasks-list{
    z-index: 9999999;
    border: 1px solid #282f47cf;
    width: 450px;
    height: 160px;
    background: #02070D;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    padding: 2em;
    box-sizing: border-box;
    display: none;
}

.active-tasks-title {
    color: #c9c9c9;
    font-size: 16px;
}

.active-saved-task-entry{
    width: 100%;
    height: 50px;
    background: #292929;
    border-radius: 10px;
    padding-left: 1em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #c9c9c9;
    gap: .5em;
    font-size: 14px;
    justify-content: space-between;
    cursor: pointer;
    min-width: 120px !important;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 1.5em;
}

.active-saved-task-entry div{
    display: flex;
    align-items: center;
    gap: .5em;
}

.manage-active-task-entry{
    display: flex;
    gap: 0.5em !important;
    margin-left: 2.8em;
    min-width: 100px;
}

.stopActiveTaskData{
    width: 100px;
    height: 20px;
    border: none;
    background: #2e692a;
    color: #efeeee;
    font-size: 11px;
    cursor: pointer;
    min-width: 80px;
    margin-right: 1.2em;
    max-width: 80px;
}

.characterToolBoxContainer{
    position: relative;
}

.userToolSettings{
    z-index: 99;
    width: 500px;
    height: 335px;
    position: absolute !important;
    left: -440px !important;
    top: 4em;
    background: #1F1911;
    outline: 7px solid #44413B;
    box-sizing: border-box;
    padding: 1em 0;
    display: none;
}

.user-settings-panel-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:  0em 1em;
    padding-right: 3em;
    margin-bottom: 1em;
}

.settings-panel-left h1{
    color: #C9C9C9;
    font-size: 16px;
}

.settings-panel-left p{
    color: #666666;
    font-size: 13px;
    line-height: 18px;
    margin-top: .2em;
    max-width: 90%;
}

.user-settings-panel-container button{
    padding: .5em 1.7em;
    cursor: pointer;
    margin-top: .5em;
    background: #141418;
    border: none;
    border-radius: 3px;
    color: #c9c9c9;
    font-size: 12px;
}

.toggleModelShareModeEnabled{
    background: #1D370F !important;
}

/* Covers the entire viewport, used to dim background and center modal */
.idleBreakModalWrapper {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it’s on top of other elements */
}

/* The modal box itself */
.idleBreakModal {
    background: #fff;
    padding: 20px;
    width: 400px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Close (X) button */
.idleBreakCloseBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

/* Form container inside the modal */
.idleBreakSettingsForm {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.idleBreakSettingsForm label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Save button styling */
.saveIdleBreakSettingsBtn {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #0F370F; 
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Dark overlay that covers the screen; hidden initially */
.botScheduleModalWrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* The modal container */
.botScheduleModal {
    background: #fff;
    padding: 20px;
    width: 400px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Close (“X”) button */
.botScheduleCloseBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

/* Form container */
.botScheduleSettingsForm {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.botScheduleSettingsForm label {
    font-weight: bold;
}

.botScheduleSettingsForm input,
.botScheduleSettingsForm select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Save button */
.saveBotScheduleBtn {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #0F370F; 
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* Dark overlay that covers the screen; hidden initially */
.botScheduleModalWrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* The modal container */
.botScheduleModal {
    background: #fff;
    padding: 20px;
    width: 400px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Close (“X”) button */
.botScheduleCloseBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

/* Form container */
.botScheduleSettingsForm {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.botScheduleSettingsForm label {
    font-weight: bold;
    margin-bottom: 5px;
}

.botScheduleSettingsForm input,
.botScheduleSettingsForm select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* For the checkboxes container */
.daysOfWeekCheckboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

/* Save button */
.saveBotScheduleBtn {
    margin-top: 20px;
    padding: 8px 16px;
    background-color: #0F370F; 
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.multiAccountModalWrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.multiAccountModal {
    background: #fff;
    padding: 20px;
    width: 600px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.multiAccountCloseBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

.multiAccountModal h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.multiAccountModal p {
    margin-top: 0;
    font-size: 14px;
    color: #555;
}

.multiAccountContent {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* LEFT: Account List */
.multiAccountListContainer {
    flex: 1;
    border-right: 1px solid #ccc;
    padding-right: 20px;
}

.multiAccountListContainer h3 {
    margin-top: 0;
}

.multiAccountList {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.multiAccountList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0a0a0a;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #282f47cf;
    font-size: 13px;
}

.accountRowInfo {
    display: flex;
    flex-direction: column;
}

/* Buttons to star/edit/remove on each account row */
.accountRowActions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.accountStar, .accountEdit, .accountRemove {
    cursor: pointer;
    font-size: 16px;
    color: #555;
}

.accountStar.pinned {
    color: gold;
}

/* RIGHT: Form Container */
.multiAccountFormContainer {
    flex: 1;
}

.accountFormTitle {
    margin-bottom: .5em;
    margin-top: 0;
}

.accountFormGroup {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.accountFormGroup label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
}

.accountFormGroup label span {
    color: red;
}

.accountFormGroup input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Reusable button for Add/Update */
.addOrUpdateAccountBtn {
    background: #0F370F;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
}

.addOrUpdateAccountBtn:hover {
    background: #136b13;
}

/* Confirm all settings button */
.confirmMultiAccountSettingsBtn {
    margin-top: 20px;
    width: 100%;
    background: #0a0a0a;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #282f47cf;
}

.confirmMultiAccountSettingsBtn:hover {
    background: #111;
}

.idleBreakModal, .botScheduleModal, .multiAccountModal{
    border: 1px solid #282f47cf;
    background: #02070D;
    color: #c9c9c9;
}

.idleBreakModal, .botScheduleModal, .multiAccountModal{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-left: auto;
    margin-right: auto;
    top: 7em;
}

.user-settings-panel-title{
    font-size: 16px;
}

.user-settings-panel-desc{
    font-size: 14px;
    margin-top: .5em;
}

.accountFormGroup label, .settingsFormLabels label, .botScheduleSettingsForm label{
    font-size: 13px;
    /* margin-bottom: 3em; */
}

.accountFormGroup input, .settingsFormLabels input, .botScheduleSettingsForm input, #scheduleFrequency{
    border: 1px solid #282f47cf;
    background: #0a0a0a;
    color: #c9c9c9;
    text-indent: 10px;
    padding: .5em 0;
}

.settingsFormLabels span, .botScheduleSettingsForm span{
    font-size: 14px;
}

.customDaysOfWeek{
    margin-bottom: .3em;
}

.active-game-bar{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-right: 2em;
}



.down-arrow-dropdown{
    margin-top: .2em;
    font-size: 12px;
    color: #c9c9c9;
    width: 20px;
    cursor: pointer;
}

/* Existing Styles... */

/* Container Styling */
.active-game-bar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px;
    /* background-color: #333131; */
    border-radius: 4px;
    user-select: none; /* Prevent text selection on click */
}

/* Current Selection Styling */
.currentGameSelection {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    justify-content: center;
}

/* Dropdown Arrow Styling */
.down-arrow-dropdown {
    margin-left: 8px;
    transition: transform 0.3s;
}

/* Rotate arrow when dropdown is open */
.active-game-bar.open .down-arrow-dropdown {
    transform: rotate(180deg);
}

/* Dropdown Content Styling */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #02070D;
    min-width: 250px; /* Adjust as needed */
    color: #c9c9c9;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    padding: 12px;
    z-index: 1000; /* Ensure it appears above other elements */
    border-radius: 4px;
    border: 1px solid #282f47cf;
    display: none; /* Hidden by default */
}

/* Add Game Section Styling */
.add-game {
    display: flex;
    margin-bottom: 10px;
}

.add-game input {
    flex: 1;
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #282f47cf;
    border-radius: 3px;
    font-size: 13px;
    background: #292929;
    color: #c9c9c9 !important;
}

.add-game button {
    padding: 5px 15px;
    border: none;
    background-color: #12411d;
    color: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.add-game button:hover {
    background-color: #218838;
}

/* Game List Styling */
#gameList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 200px; /* Optional: Set a max height with scroll */
    overflow-y: auto;
}

.game-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #282f47cf;
    font-size: 14px;
}

.game-item:last-child {
    border-bottom: none;
}

.game-item:hover {
    background-color: #000000;
}

/* Favorite Star Styling */
.favorite-star {
    cursor: pointer;
    font-size: 18px;
    color: #ccc; /* Default color for empty star */
    margin-right: 10px;
    transition: color 0.3s;
}

.game-item.favorited .favorite-star {
    color: #FFD700; /* Gold color for favorited star */
}

/* Edit and Delete Button Styling */
.edit-game,
.delete-game {
    margin-left: 10px;
    padding: 3px 16px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.edit-game {
    background-color: #1d1d1e;
    color: #fff;
}

.edit-game:hover {
    background-color: #0056b3;
}

.delete-game {
    background-color: #281313;
    color: white;
}

.delete-game:hover {
    background-color: #c82333;
}

/* Edit Input Field Styling */
.edit-input {
    width: calc(100% - 150px); /* Adjust based on button sizes */
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #282f47cf;
    background: #292929;
    color: #c9c9c9;
    border-radius: 3px;
}

/* Adjustments for Game Name Span */
.game-name {
    display: inline-block;
    min-width: 100px; /* Adjust as needed */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .dropdown-content {
        min-width: 200px;
    }

    .edit-game,
    .delete-game {
        padding: 3px 6px;
        font-size: 12px;
    }

    .favorite-star {
        font-size: 16px;
        margin-right: 8px;
    }

    .add-game input {
        font-size: 12px;
    }

    .add-game button {
        font-size: 12px;
        padding: 5px 10px;
    }
}

.selected-game{
    font-size: 14px;
    color: #c9c9c9;
}

.save-game{
    background-color: #1d1d1e;
    color: #fff;
    border: none;
    padding: 3px 16px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10px;
}

.customModalLibraryFolder{
    color: #c9c9c9;
}

.task_menu {
    cursor: pointer;
    padding: 15px;
    position: relative;
    /* right: .6em; */
}

.stracti-tutorial-container{
    width: 700px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #282f47cf;
    background: #02070D;
    z-index: 99999;
    color: #c9c9c9;
    display: flex;
}

.tutorial-side-panel ul{
    margin-top: 1em;
}

.tutorial-side-panel ul li{
    list-style: none;
    font-size: 14px;
    padding-bottom: .9em;
    cursor: pointer;
}

.tutorial-side-panel ul li:hover{
    opacity: .8;
}

.tutorial-side-panel{
    border-right: 1px solid #282f47cf;
    padding: 1em 1.5em;
    min-width: 180px;
}

.tutorial-right-panel{
    padding: 1em 1.5em;
}

.tutorial-right-panel h1{
    font-size: 20px;
    font-weight: 600;
}

.tutorial-right-panel p{
    margin-top: 1em;
    font-size: 14px;
    margin-bottom: 1em;
}

.tutorial-category-container p{
    line-height: 20px;
}

/* Auto Builder GUI */
.auto-mode-container{
    width: 700px;
    height: 710px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #282f47cf;
    background: #02070D;
    z-index: 99999;
    color: #c9c9c9;
    display: flex;
    flex-direction: column;
    padding: .5em 2em;
    overflow-y: auto;
    padding-bottom: 2em;
}

.auto-mode-container h1{
    font-size: 20px;
    font-weight: 600;
    margin-top: 1em;
}

.auto-mode-container p{
    margin-top: .5em;
    font-size: 14px;
    margin-bottom: 1em;
}

.auto-mode-controls button{
    width: 130px;
    height: 30px;
    border: 1px solid #282f47cf;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px;
    cursor: pointer;
    margin: 1em 0;
    margin-right: .5em;
}

.auto-mode-intro{
    display: none;
}


.unique-player-data-info{
    max-width: 50%;
}

.auto-mode-data-logs{
    background: #20273c82;
    padding: .8em;
    max-height: 215px;
    overflow-y: scroll;
}


.auto-mode-main{
    display: flex;
    gap: 2em;
}

.auto-mode-main h4{
    margin-bottom: .5em;
}

.user-collected-objects{
    border: 1px solid #282f47cf;
    height: 215px;
    width: 290px;
    overflow: hidden;
}

.auto-mode-data-logs p{
    font-size: 12px;
    line-height: 24px;
    margin: 0;
}

.key_custom_press{
    padding: .3em .5em;
    background: #1f4f23a3;
    width: 10px;
    height: 10px;
    color: #ffffff;
    border-radius: 4px;
}

.img-data-obj{
    /* display: flex; */
    align-items: center;
    max-height: 40px;
}

.img-data-obj img{
    width: 40px;
    height: 40px;
    border: 1px solid #282f47cf;
    object-fit: cover;
}

.user-collected-objects{
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    padding: .5em;
}

.obj-container-img{
    max-height: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
}

.img-data-obj{
    width: 40px;
    height: 40px;
    border: 1px solid #2a3763cf;
}

.auto-mode-data{
    /* display: none; */
}

.auto-mode-container h4{
    margin-top: 1.5em;
    font-weight: 500;
}

.main-target-objects-found{
    display: flex;
    margin-top: .5em;
    gap: .5em;
}

.update-main-target-image{
    border: 1px solid #282f47cf;
    background: none;
    color: #c9c9c9;
    padding: .5em 1em;
    margin-left: 1em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.main-target-objects-found .img-data-obj{
    width: 45px;
    height: 45px;
    max-height: 45px;
    cursor: pointer;
}

.main-target-objects-found img{
    width: 45px;
    height: 45px;
    border: none;
}

.other-objects-found{
    display: flex;
    margin-top: .5em;
    gap: .5em;
    flex-wrap: wrap;
    overflow-y: auto;
}

.other-objects-found .img-data-obj, .other-objects-found img{
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.select-new-target{
    background: #182d31;
}

.img-data-obj{
    position: relative;
}

.other-objects-found-change-target{
    background: #0d272d;
}

.other-objects-found-change-target .img-data-obj::before{
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    height: 100%;
    width: 100%;
    background: #2c768785;
    right: 0;
    bottom: 0;
    text-align: center;
    margin: 0 auto;
    display: none;
}

.other-objects-found-change-target .img-data-obj.show-before::before {
    display: block; /* Make the pseudo-element visible */
}

.selected-new-target-object{
    position: absolute;
    left: 1px;
    top: 1px;
    height: 100%;
    width: 100%;
    background: #2c768785;
    right: 0;
    bottom: 0;
    text-align: center;
    margin: 0 auto;
    display: none;
}

.set-new-targ-obj, .selecting-new-targ-obj{
    display: none;
}

.auto-mode-data{
    /* display: block; */
}



.auto-mode-results-container{
    display: none;
}

.auto-mode-finalize{
    /* display: none; */
}


.finalize-main-target{
    display: flex;
    margin-top: .5em;
    gap: .5em;
    flex-wrap: wrap;
    overflow-y: auto;
}

.finalize-main-target .img-data-obj, .finalize-main-target img{
    width: 35px;
    height: 35px;
    cursor: pointer;
}
.suggested-action-btn{
    border: 1px solid #282f47cf;
    background: none;
    color: #c9c9c9;
    padding: .3em .8em;
    margin-left: .5em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.main-target-child-indent{
    margin-left: 4em !important;
}

.margin-target-new-child-indent{
    margin-left: 5.3em !important;
    margin-top: 1em;
}

.target-edit-btn-choice{
    border: 1px solid #282f47cf;
    background: none;
    color: #c9c9c9;
    padding: .5em 1em;
    margin-left: 1em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.save-custom-bot-btn{
    margin-top: 2em !important;
}

.user-playstyle-list{
    list-style: none;
    margin-top: .2em;
}

.user-playstyle-list li{
    font-size: 12px;
}

.suggested-action-title{
    font-size: 12px;
    /* margin-left: .5em; */
    font-weight: 500;
    margin-top: 1em;
}

.user-custom-generated-bot-info input[type=text]{
    color: #c9c9c9;
    width: 100%;
    padding: 10px;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 1em;
}

.auto-mode-results .info-manual-creation{
    font-size: 12px;
}

.object-configuration-container{
    border: 1px solid #282f47cf;
    height: 450px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* padding-left: 1em; */
    padding-right: 1em;
    gap: 1em;
    width: 1200px auto;
    overflow-x: auto;
}

.object-btn-group{
    padding: 0em 1em;
    height: 30px;
    white-space: nowrap;
    line-height: 30px;
    border: 1px solid #282f47cf;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px !important;
    text-align: center;
    cursor: pointer;
}

.object-btn-group-active{
    background: #142727;
    /* outline: 1px solid #4b4a4a; */
}

.object-group-data-imgs{
    display: flex;
    gap: .1em;
}

.object-group-data-imgs img{
    width: 25px;
    border: none;
    height: 25px;
}


.object-group-data-imgs .img-data-obj{
    width: 25px;
    height: 25px;
    border: none;

}

.sub-object-btn-group{
    padding: 0em 1em;
    height: 30px;
    white-space: nowrap;
    line-height: 30px;
    border: 1px solid #282f47cf;
    background: #0a0a0a;
    color: #c9c9c9;
    font-size: 11px !important;
    text-align: center;
    cursor: pointer;
}

/* Ensure the container is positioned relative for absolute positioning inside */
.data-object-groups {
    position: relative;
    display: flex;
    max-height: 400px;
  }
  
  /* Main object group: leave some left padding for a branch if needed */
  .main-object-group-section {
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }


  
  /* Sub object group: indent further and position relative */
  .sub-object-group {
    position: relative;
    padding-left: 60px; /* adjust to control indentation */
    margin-top: 10px;   /* space between main and sub groups */
    position: relative;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    max-width: 250px;
  }

  .step-container{
    margin-top: .5em;
  }

  .object-group-data-imgs{
    display: flex;
    flex-wrap: wrap;
    margin-top: .5em;
    /* max-width: 200px; */
  }
  
  /* Draw a vertical line in the sub group to mimic a tree branch.
     This line will start a little above the sub group and extend through its height. */
  .sub-object-group::before {
    content: "";
    position: absolute;
    top: -5px;           /* start a bit above the sub group */
    left: 40px;          /* aligns with the end of the main group padding */
    width: 1px;
    height: calc(50% + 5px); /* extend the line to cover the sub group */
    background-color: #ccc;
  }
  
  /* Draw a horizontal connector from the vertical line to the sub object button */
  .sub-object-group::after {
    content: "";
    position: absolute;
    top: 50%;            /* vertically center relative to the sub group */
    left: 40px;          /* start at the vertical line */
    width: 20px;         /* extend horizontally to the sub button */
    height: 1px;
    background-color: #ccc;
  }
  
  .object-group-data-imgs{
    /* margin-left: .5em; */
  }

  .auto-mode-container{
    display: none;
  }

  .selected-find-boundary{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .selected-find-boundary img{
    outline: 1px solid #979797;
    width: 35px;
    height: 35px;
  }

  .selected-find-boundary .remove-cmd-image-btn{
    width: 20px;
    height: 20px;
  }

  .selected-find-boundary h3{
    font-size: 12px;
  }

  .selected-find-boundary .remove-cmd-image-btn{
    top: -2.4em;
    position: relative;
  }

  .cmd-selected-image button {
    width: 20px;
    height: 20px;
    font-size: 9px;
    top: -2.3em;
    position: relative;
  }

  .cmd-selected-image img {
      outline: 1px solid #979797;
      width: 35px;
      height: 35px;
      position: relative;
      top: -.05em;
  }

.client-boundary-container {
    /* display: flex; */
    justify-content: center;
    width: 850px;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 222222;
    background: #2a2b2d;
    display: none;
}

.client-game-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}

/* Ensure the image is scaled proportionally */
.client-game-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
}

/* Selection box overlay */
#selection-box {
    position: absolute;
    border: 1px dashed #fff;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    display: none;
    z-index: 200;
}

/* Dark overlay elements */
.dark-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 150;
}

.client-image-tools{
    width: 100px;
    top: 0px;
    /* border-right: 1px solid #fff; */
    position: absolute;
    left: -100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    gap: .4em;
    background: #1a1919;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.popup-content .client-setup-tool{
    background: #1a1a1a !important;
}

.client-setup-tool{
    width: 64px;
    height: 64px;
    border-radius: 7px;
    transform: scale(0.9);
    outline: 1px solid #67676752;
    background: #37373726;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.client-setup-tool svg{
    color: #ffffffbf;
    transform: scale(0.7);
}


.client-setup-tool span{
    font-size: 11px;
    color: #ffffffbf;
    font-weight: 300;
}

.client-timeline-tools {
    width: 100%;
    height: 358px;
    /* border-right: 1px solid #fff; */
    position: absolute;
    bottom: -397px;
    display: flex;
    box-sizing: border-box;
    /* gap: .4em; */
    background: #1a1919;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-bottom: .5em;
    overflow: hidden;
}

.client-target-area{
    display: flex;
    border-right: 1px solid #272727;
    width: 10px;
    height: 100%;
    position: relative;
}

.client-target-area::before {
    content: "";
    position: absolute;
    right: -0px;
    display: flex;
    border-right: 1px solid #0e0e0e;
    width: 10px;
    height: 100%;
    position: relative;
}

.client-main-tools{
    display: flex;
    /* min-width: 200px; */
    /* width: 150px; */
    flex-wrap: wrap;
    max-height: 75px;
    padding: 1em 0;
    position: relative;
    left: 1.1em;
    gap: .3em;
}

.target-btn-default{
    height: 30px;
    width: 100%;
    text-align: center;
    background: #2f3137;
}

.client-target-img {
    display: flex;
    align-items: center;
    outline: 1px solid #5555558c;
    border-radius: 5px;
    cursor: pointer;
    max-height: 20px;
}

.client-target-img img {
    width: 20px;
    height: 20px;
    border: 1px solid #000000cf;
    object-fit: cover;
    border-radius: 5px;
}

.client-option-timeline{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.client-timeline-header{
    align-self: center;
    height: 30px;
    /* background: #333; */
    color: #ddddddbf;
    width: 100%;
    text-align: center;
    font-size: 11px;
    /* margin: .5em 0; */
    margin-top: 2.5em;
    margin-left: -4em;
    justify-self: center;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.client-timeline-choices{
    display: flex;
    gap: .3em;
    padding-left: .4em;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 50px;
    /* padding-top: .6em; */
    scrollbar-color: #34343480 #1d1d1e;
    position: relative;
    z-index: 99900000000;
    white-space: nowrap;
    /* padding-top: 8.5em; */
}

/* No gap visible by default; transitions to a width of 20px on hover */
.timeline-gap {
    min-width: 5px;
    /* visually zero width */
    display: inline-block;
    position: relative;
    overflow: visible;
    /* allow pseudo-element to extend outside */
    vertical-align: middle;
    /* optional, just to align nicely */
    transition: all .2s ease-in-out;
}

/* The invisible 'hover zone' */
.timeline-gap::before {
    content: "";
    position: absolute;
    top: 50%;
    /* center vertically */
    left: -10px;
    /* extend 10px to the left */
    right: -10px;
    /* extend 10px to the right */
    height: 20px;
    /* how tall to make the hover area */
    transform: translateY(-50%);
    /* center the hotspot vertically */
    cursor: pointer;
    /* no background, so it's invisible but hoverable */
    transition: all .2s ease-in-out;
}

/* Normal hover behavior for quick preview */
/* Existing hover style for timeline-gap */
.timeline-gap:hover {
    min-width: 47px;
    min-height: 47px;
    height: 47px;
    position: relative;
    top: 0.14em;
    transition: all 0.2s ease-in-out;
    background: #333;
    border-radius: 7px;
}

/* This class temporarily disables the gap's hover styling */

.timeline-gap:hover .timeline-plus {
    display: block;
}

/* Temporarily disable hover styling for gaps and hide the plus icon */
.no-gap-hover .timeline-gap:hover,
.no-gap-hover .timeline-gap:hover .timeline-plus {
    /* Disables the background or any other hover effect you have */
    background: transparent !important;
    /* Hide the plus icon too */
    /* Turn off transitions or anything else if desired */
    transition: none !important;
}
/* 
   The "expanded" class does the exact same styling as hover, 
   so we can keep it expanded while the popup is open.
*/
.timeline-gap.expanded {
    min-width: 47px;
    min-height: 47px;
    height: 47px;
    position: relative;
    top: 0.14em;
    transition: all 0.2s ease-in-out;
    background: #333;
    border-radius: 7px;
}

.timeline-gap {
    display: inline-block;
    /* or block if you want them stacked vertically */
    width: 5px;
    height: 48px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

.timeline-gap-space {
    min-width: 47px;
    min-height: 47px;
    height: 47px;
    position: relative;
    top: 0.14em;
    transition: all 0.2s ease-in-out;
    background: #333;
    border-radius: 7px;
}

/* The plus button is absolutely positioned within the gap */
.timeline-plus {
    position: absolute;
    top: -28px;
    left: 45%;
    transform: translateX(-50%) scale(0.8);
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    display: none;
    /* Hidden until hover */
}

.timeline-plus svg {
    color: #c6c6c6;
}

/* Show the plus button only when the gap is hovered */
.timeline-gap:hover .timeline-plus {
    display: block;
}

/* Popup styling */
.action-popup {
    display: none;
    position: absolute;
    z-index: 100;
    background: none;
}

.action-popup .popup-content {
    max-width: 400px;
    height: 55px;
    left: -7em;
    /* top: -8.5em; */
    top: -16.5em;
    position: relative;
}

.action-popup .client-image-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: none;
}

.action-popup .client-image-tools .client-setup-tool-boundary {
    width: 64px;
    height: 64px;
    border-radius: 7px;
    transform: scale(0.9);
}

.action-popup{
    margin-top: 0em;
}

.action-menu{
    width: 120px;
    height: auto;
    background: #0b0b0f;
    position: absolute;
    z-index: 999999999222222222222222222222299;
    border-radius: 7px;
    top: 7em;
    left: 12.5em;
    display: none;
}

.action-menu ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.action-menu ul li{
    margin: .1em 0;
    cursor: pointer;
    border-radius: 7px;
    height: 30px;
    line-height: 30px;
    background: #0b0b0f;
    width: 100%;
    color: #f2f2f2;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 1.5em;
}

.action-menu ul li:hover{
    background: #000000;
}

/* Possible changes for addition to new error */
.client-timeline-choices {
    /* display: flex;
    gap: .3em;
    padding-left: .4em;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 50px;
    padding-top: 1em;
    scrollbar-color: #34343480 #1d1d1e;
    position: relative;
    height: 500px;
    z-index: 99900000000;
    white-space: nowrap; */
}

.errorsvg{
    color: red;
    width: 30px;
    position: absolute;
    transform: scale(0.9);
    height: 30px;
    top: -10px;
    left: 35px;
    z-index: 333333;
}

.errorborder {
    border: 1px solid red !important;
}

.successborder{
    outline: 1px solid #00ff0fbf;
}

/* Centering the .action-config-menu */
.action-config-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    height: auto;
    padding-bottom: 2em;
    background: #02070d;
    /* Add a background color for visibility */
    transform: translate(-50%, -50%);
    border-radius: 5px;
    color: #f2f2f2;
    display: flex;
    padding-top: 1em;
    padding-left: 1.5em;
    flex-direction: column;
    gap: .1em;
    z-index: 99333333333343434334399;
    padding-right: 1.5em;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    display: none;
}

.action-description{
    font-size: 12px;
    max-width: 250px;
    line-height: 17px;
}

.action-menu-title{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.action-menu-title span{
    font-size: 20px;
    position: relative;
    top: -4px;
    cursor: pointer;
}

.action-title-sections{
    font-size: 12px;
    margin-top: .5em;
}

.action-box-select-btn{
    margin-top: .8em;
    border: none;
    border-radius: 3px;
    height: auto;
    font-size: 11px;
    background: #0a0a0a;
    color: #d1d1d1;
    border: 1px solid #282f47cf;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.action-box-select-btn:hover{
    background-color: #0a0a0a69;
    color: #bdbdbd;
    transition: .2s ease-in-out;
}

.action-container-modifier{
    display: flex;
    flex-direction: column;
    margin-bottom: .8em;
}

.action-reset-btn{
    background: #4f0e0e;
    color: #f2f2f2;
    outline: 1px solid #4f0e0e;
}

.action-reset-btn:hover {
    background: #450a0a;
    color: #f2f2f2;
    outline: 1px solid #730e0e;
}

.action-sidebyside-container{
    display: flex;
    gap: .5em;
}

.action-click{
    width: 100%;
}

.action-click:hover{
    background-color: #0a0a0a69;
    color: #bdbdbd;
    transition: 0s;
}

.action-container-modifier input[type=text]{
    color: #c9c9c9;
    width: 100%;
    padding: 7px;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: .7em;
}

.action-menu-header input[type=text]{
    color: #c9c9c9;
    width: 100%;
    padding: 7px;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    margin-top: .7em;
}

.action-title-desc{
    font-size: 12px;
    color: #ffffff8c;
    line-height: 1.4;
    margin-top: .4em;
    margin-bottom: .5em;
}

/* .action-click-active{
    outline: green solid 1px;
} */

.action-save-btn{
    background: #0e4f16;
    color: #f2f2f2;
    outline: 1px solid #1c7f1f;
}

.action-save-btn:hover {
    background: #0b4111;
    color: #f2f2f2;
    outline: 1px solid #1c7f1f;
}

.timeline-empty-notice{
    font-size: 14px;
    color: #f2f2f2;
    margin: 0 auto;
    position: relative;
    left: -19px;
    color: #7d7979;
    font-weight: 400;
}

.main-toolbelt-action-active{
    background: #00000026;
    outline: 1px solid #13551e;
}

.selection-add-btn, .selection-confirm-btn, .selection-cancel-btn, .selection-update-btn{
    /* background: orange; */
    border: none;
    padding: 5px 6px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 2px;
    font-size: 12px;
}

.selection-cancel-btn{
    background: #e3000087 !important;
}

.selection-update-btn{
    background: #2ab335 !important;
    
}

.select-region-target{
    width: 10px;
    height: 100%;
    background: transparent;
    position: absolute;
    right: -18px;
    border: 1px dashed #919191d9;
    border-radius: 2px;
    transition: .2s ease-in-out;
}

.select-region-target:hover{
    border: 1px dashed #ffffffbf;
    transition: .2s ease-in-out;
}

.main-toolbelt-action{
    margin-right: .7em;
}

.connect-gameStream{
    position: absolute;
    left: -.5em;
    top: 2em;
    color: #ffffff;
    font-weight: 400;
    font-size: 14px;
    background: #000000b3;
    padding: 1em 2em;
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    transform: scale(0.8);
}

.connect-gameStream div {
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Makes it circular */
}

/* Heartbeat animation */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #28a745, 0 0 10px 2px #28a745;
    }
    25%, 75% {
        transform: scale(1.1);
        box-shadow: 0 0 7px 1.5px #28a745, 0 0 12px 3px #28a745;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #28a745, 0 0 10px 2px #28a745;
    }
}

/* Place this in your CSS file */
.offline-beacon {
    background-color: #dc3545; /* Red */
    border-radius: 50%;
    animation: heartbeat-red 2s infinite;
}

/* Red heartbeat animation */
@keyframes heartbeat-red {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #dc3545, 0 0 10px 2px #dc3545;
    }
    25%, 75% {
        transform: scale(1.1);
        box-shadow: 0 0 7px 1.5px #dc3545, 0 0 12px 3px #dc3545;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #dc3545, 0 0 10px 2px #dc3545;
    }
}


.online-beacon {
    background-color: #28a745; /* Green */
    border-radius: 50%;
    animation: heartbeat-green 2s infinite;
}

/* Green heartbeat animation */
@keyframes heartbeat-green {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #28a745, 0 0 10px 2px #28a745;
    }
    25%, 75% {
        transform: scale(1.1);
        box-shadow: 0 0 7px 1.5px #28a745, 0 0 12px 3px #28a745;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #28a745, 0 0 10px 2px #28a745;
    }
}

.pending-beacon {
    background-color: #d4a017; /* Darker mustard yellow */
    border-radius: 50%;
    animation: heartbeat-yellow 2s infinite;
}

/* Yellow heartbeat animation */
@keyframes heartbeat-yellow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #d4a017, 0 0 10px 2px #d4a017;
    }
    25%, 75% {
        transform: scale(1.1);
        box-shadow: 0 0 7px 1.5px #d4a017, 0 0 12px 3px #d4a017;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 5px 1px #d4a017, 0 0 10px 2px #d4a017;
    }
}

/* We won't rely on a single #selection-box;
   every box will be appended as .selection-box. */
   .selection-box {
    position: absolute;
    border: 1px dashed #c5c5c5;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1000;
}

/* Just for demonstration: the main image */
#crop-image {
    max-width: 100%;
    display: block;
}

/* Each highlight box (the visible rectangle itself) */

/* Overlays: dark areas around a highlight box */
/* The highlight box: fully visible (opacity=1).
   By default, let's make it transparent so we see
   the normal brightness of the image behind it. */
   .highlight-box {
    position: absolute;
    box-sizing: border-box;
    z-index: 2000;
    border: 2px dashed #fff;
    background: rgba(0, 0, 0, 0);
}

/* The dark overlays that dim the rest of the image */
.dim-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999; /* Just below .highlight-box */
    pointer-events: none;
}

.client-main-tools{
    border-bottom: 1px solid #272727;
    left: 0;
    padding: .7em 0;
    padding-bottom: 1em;
    padding-top: 0em;
    padding-left: .5em;
}

.frames-title{
    color: #a9a9a9;
    font-size: 11px;
    display: flex;
    justify-content: center;
    height: 25px;
    line-height: 25px;
    width: 100%;
    background: #101010;
    outline: 1px solid #6b6b6b26;
    position: relative;
    /* left: .4em; */
}

.frames-game-src-img{
    width: 98%;
    position: relative;
    left: .1em;
    outline: 1px solid #9f9f9f;
    z-index: 22;
}

.client-data-management{
    max-width: 500px;
    width: 185px;
}

.client-target-area{
    left: -.5em;
    height: 100%;
}

.frames-sec-title{
    font-size: 12px;
    color: #a9a9a9;
    font-size: 11px;
    display: flex;
    margin-top: .5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.right-arrow-sym, .down-arrow-sym{
    transform: scale(0.5);
}

.right-arrow-sym{
    display: none;
}

.down-arrow-sym{
}

.client-tools-parent{
    max-height: 105px;
    min-height: 60px;
    overflow-y: auto;
}

.frames-layers{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #a9a9a9;
    font-size: 11px;
    max-height: 100px;
    min-height: 205px;
    overflow-y: auto;
}

.frames-layers span{
    height: 30px;
    line-height: 30px;
    text-indent: 15px;
    background: #161616;
    outline: 1px solid #272727;
    cursor: pointer;
}

.frames-layers span:hover{
    background: #121212;
}

.frame-active-title{
    background: #121212 !important;
}

.frames-layers span{
    position: relative;
}

.frame-active{
    background: #1b791b !important;
    color: #c0c0c0;
    border-radius: 60px;
    height: 8px !important;
    width: 8px !important;
    position: absolute !important;
    right: 1em;
    top: .8em;
    outline: 1px solid transparent !important;
}

.frames-layers span:first-child{
    outline: 1px solid transparent !important;
}

.frames-empty-container h3{
    position: relative;
    top: 5em;
    text-align: center;
    margin: 0 1em;
    color: #7d7979;
   
}

.frameMenuDropdown{
    width: 120px;
    height: auto;
    background: #0b0b0f;
    position: absolute;
    z-index: 999999999222222222222222222222299;
    border-radius: 7px;
    top: 7em;
    left: 12.5em;
    display: none;
}

.frameMenuDropdown ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.frameMenuDropdown ul li{
    margin: .1em 0;
    cursor: pointer;
    border-radius: 7px;
    height: 30px;
    line-height: 30px;
    background: #0b0b0f;
    width: 100%;
    color: #f2f2f2;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 1.5em;
}

.frameMenuDropdown ul li:hover{
    background: #000000;
}

.label-grid{
    position: absolute;
    bottom: 0;
    z-index: 99999999;
}

/* Our grid cells */
.grid-cell {
    transition: background-color 0.2s;
}

/* When a cell is selected in Label Mode, highlight it differently */
.grid-cell.selected {
    background-color: rgba(255, 255, 0, 0.4);
}

/* The red box around the player */
.player-box {
    border: 2px solid red;
}

/* A simple style for the label text on each cell or object */
.object-label {
    background-color: red;
    color: black;
    font-size: 10px;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 17px !important;
    left: -2px !important;
    top: -17px !important;
}

.label-grid-modes{
    position: absolute;
    right: 0;
    z-index: 9999;
    bottom: 0 !important;
}

.cell-coordinate{
    font-size: 9px !important;
}

.cell-coordinate-natural{
    font-size: 9px !important;
}

.timeline-config-tools{
    width: 705px;
    height: 30px;
    background: #101010;
    position: absolute;
    bottom: 0;
    margin-left: -10px;
    width: -20px;
    display: flex;
    justify-content: space-between;
    align-items: space-between;
}

/* Default state */
.timeline-toolset {
    display: flex;
    justify-content: space-between;
    padding: 0 2em;
    color: #a9a9a9;
    font-size: 11px;
    position: absolute;
    background: #101010;
    height: 29px;
    width: 99%;
    align-items: center;
}

/* Expanded state */
.timeline-toolset.expanded {
    height: 230px;
    bottom: 0px;
    padding-top: 1em;
    border-top: 1px solid #527699;
    border-bottom: 1px solid #527699;
    border-left: 1px solid #527699;
    border-right: 1px solid #527699;
    align-items: start;
    width: 99%;
    border-bottom-right-radius: 6px;
}

.debug-tool-error-log{
    position: absolute;
    width: 96.5%;
}

.debug-tool-container{
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: .3em;
    overflow-y: auto;
    max-height: 150px;
    padding-top: .5em;
}


.timeline-tool-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8em;
}

.timeline-tool-container svg{
    width: 15px;
    cursor: pointer;
}

.timeline-tool-container span{
    cursor: pointer;
}

.timeline-tool-container svg:hover, .timeline-tool-container span:hover{
    color: #c2c2c2;
}

.path-full-tools{
    height: 50px;
    width: 705px;
    position: absolute;
    background: #161616;
    bottom: 29px;
    border-top: 1px solid #f2f2f21c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a9a9a9;
    gap: .5em;
    padding: 0 1.4em;
}

.path-btn-containers{
    display: flex;
    gap: 1em;
}

.path-full-tools button{
    background: #1c1b1b;
    color: #a9a9a9;
    height: 30px;
    padding: 0 .8em;
    border-radius: 3px;
    font-size: 12px;
    border: none;
    outline: 1px solid #a9a9a930;
    cursor: pointer;
}

.path-full-tools .active{
    outline: 1px solid #a9a9a982;
}

#current-mode{
    font-size: 12px;
}

.bot-watcher-container{
    width: 100%;
    height: 150px;
    background: #161616;
    position: absolute;
    bottom: 78px;
    border-top: 1px solid #3c323269;
    color: rgb(201, 201, 201);
    display: flex;
}

.watcher-bot-list{
    height: 100%;
    background: #161616;
    width: 183px;
    min-width: 183px;
}

.watcher-bot-list ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #161616;
    position: relative;
    left: 2px;
    border-right: 1px solid #3c323269;
    max-width: 181px;
}

.watcher-bot-list ul li{
    height: 30px;
    line-height: 30px;
    text-indent: 15px;
    background: #161616;
    outline: 1px solid #272727;
    cursor: pointer;
    font-size: 11px;
    width: 180px;
    color: #adadad;
    transition: .2s ease-in-out;
}

.watcher-bot-list ul li:hover{
    background: #1a1a1a;
    transition: .2s ease-in-out;
}

.add-new-task-btn{
    display: flex;
    align-items: center;
    background: #0d2f0b !important;
    outline: 1px solid #1a5116 !important;
    justify-content: space-between;
    padding-right: 1em;
    transition: .2s ease-in-out;

}

.add-new-task-btn svg{
    width: 15px;
}

.add-new-task-btn:hover{
    background: #103b0d !important;
    outline: 1px solid #24661f !important;
    transition: .2s ease-in-out;
}

.target-task-w-active svg{
    align-self: center;
    width: 15px !important;
    height: 15px !important;
}

.watcher-bot-list svg{
    align-self: center;
    width: 15px !important;
    height: 15px !important;

}

.bot-task-watcher-entry{
    display: flex;
    justify-content: space-between;
    padding-right: 1em;
}

.watcher-configuration-container{
    display: flex;
    padding: .7em 0.4em;
}

.w-config-container{
    display: flex;
    align-items: start;
    gap: .5em;
    position: relative;
    left: .9em;
}

.w-config-container .watcher-mode{
    background-color: #0a0a0a42;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    width: 84px;
    padding: .7em;
    color: #cdcdcd;
}

.watcher-mode option {
    background-color: #0a0a0a42 !important;
    color: white !important;
}


.w-config-container input{
    background-color: #0a0a0a42;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    width: 84px;
    padding: .78em;
    color: #cdcdcd;
}

.w-config-text{
    font-size: 11px;
    position: relative;
    left: .3em;
    padding-bottom: .5em;
}

.w-config-desc{
    display: flex;
    flex-direction: column;
}

.label-grid{
    /* display: none; */
}

.grid-cell{
    /* display: none !important; */
}

.player-box{
    margin-left: -10px !important;
    position: relative;
}

.client-boundary-container{
    margin-top: 133px;
    left: 0%;
}

.client-image-tools{
    border-top-left-radius: 0px;
}

#crop-image{
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.client-top-menu{
    width: 950px;
    height: 30px;
    left: -100px;
    top: -30px;
    background: #1a1a1a;
    border-top: 1px solid #414141;
    border-right: 1px solid #41414159;
    border-left: 1px solid #41414159;
    border-bottom: 1px solid #41414159;
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 .7em;
    color: #adadad;
    justify-content: space-between;
}

.client-top-menu span{
    font-size: 12px;
}

.stracti-bot-client-title{
    /* text-align: center; */
    /* margin: 0 auto; */
}

.close-stractiweb-client, .stracti-client-menu-btn{
    cursor: pointer;
}


.s-menu-container{
    position: relative;
}


.s-menu-dropdown{
    position: absolute;
    top: 25px;
    display: flex;
    flex-direction: column;
    left: -1.4em;
    text-indent: 1.4em;
    font-size: 12px;
    list-style: none;
    background: #1a1a1a;
    width: 150px;
    border-right: 1px solid #41414159;
    border-bottom: 1px solid #41414159;
    border-left: 1px solid #41414159;
}

.s-menu-dropdown li{
    padding: .7em 0;
    cursor: pointer;
    border-bottom: 1px solid #41414159;

}

.s-menu-dropdown li:hover{
    background: #141418;
}




.watcher-bot-list {
    max-height: 148px; /* Adjust as necessary */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.watcher-bot-list ul {
    padding: 0 10px 0 0;
    margin: 0;
    list-style: none;
}

.bot-task-watcher-entry,
.add-new-task-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-new-task-btn {
    position: sticky;
    bottom: 0;
    top: .2em;
    background-color: #fff; /* ensures visibility on scroll */
    cursor: pointer;
    font-weight: bold;
}

.custom-crosshair {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.custom-crosshair .line {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.8);
}

.line.vertical {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
}

.line.horizontal {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.custom-grid-overlay .grid-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
}

.save-new-w-task{
    background-color: #0d2f0b;
    border: 1px solid #1a5116;
    font-size: 12px;
    border-radius: 4px;
    width: 84px;
    padding: .78em;
    color: #cdcdcd;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.save-new-w-task:hover{
    background: #103b0d !important;
    border: 1px solid #24661f !important;
    transition: .2s ease-in-out;
}

.task-custom-name {
    background: #7d7d7d0f !important;
    border: 1px solid #515151cf !important;
    outline: none; /* Removes default focus outline if desired */
}

.task-custom-name:focus {
    border: 1px solid #515151cf !important; /* Example change for visibility */
}

/* .action-config-menu{
    display: flex !important;
    margin-left: 20%;
} */

.alternativeObj button, .alternativeObj input{
    border-radius: 3px;
    font-size: 11px;
    background: #0a0a0a;
    color: #d1d1d1;
    border: 1px solid #282f47cf;
    cursor: pointer;
    transition: .2sease-in-out;
    padding: 1em;
    margin: .5em 0;
}

.customBotImgsUploaded{
    width: 20px;
    height: 20px;
    border: 1px solid #000000cf;
    object-fit: cover;
    border-radius: 5px;
}

/* Styling for the progress bar container */
.uploadProgressContainer {
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #535353;
    height: 20px;
    /* margin: 10px 0; */
    border-radius: 10px;
}

/* Styling for the progress bar */
.uploadProgressBar {
    width: 0;
    height: 100%;
    background-color: #008000;
    transition: width 0.2sease;
    border-radius: 10px;
}

/* Styling for the timer text */
.uploadTime {
    font-size: 12px;
    color: #cbcbcb;
    margin-top: 0.7em;
}

#objectSelectPopup{
    display: none; 
    position: absolute;
    background: #333;
    color: #fff;
    padding: 10px;
    border: 1px solid #999;
    z-index: 324234234342423;
    left: -50px !important;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    height: 100% auto;
    width: 300px;
    background: #02070d;
}

#objectSelectDropdown{
    height: 30px;
    font-size: 11px;
    background: #0a0a0a;
    color: #d1d1d1;
    border: 1px solid #282f47cf;
}

#objectSelectPopup button{
    border-radius: 3px;
    height: 30px;
    font-size: 11px;
    background: #0a0a0a;
    color: #d1d1d1;
    border: 1px solid #282f47cf;
    cursor: pointer;
    transition: .2s ease-in-out;
}

#fullMapContainer, .fullMapContainer{
    position: absolute !important;
    z-index: 344342424242332323 !important;
    margin-left: auto;
    margin-right: auto;
    left: 100px !important;
    right: 0px !important;
    top: 20% !important;
    height: 554px !important;
    width: 854px !important;
    transform: translate(-50% -50%);
    background: #0d2514;
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;
    border-bottom: 5px solid #000000;
    overflow: auto;
}

.mapDiscoveredGrid{
    background: #000000;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
    padding: .5em 1em;
    text-align: center;
    color: #adadad;
    display: flex;
    justify-content: space-between;
    z-index: 1234567899;
}

.mapDiscoveredGrid span{
    font-size: 12px;
}

.mapDiscoveredGrid span:last-child{
    cursor: pointer;
}

.grid-cell, .player-label-box, .global-labels, .custom-crosshair{
    display: none;
}

.path-full-tools-inactive{
    opacity: .4;
    cursor: not-allowed; 
}

.grid-system-settings{
    background: #161616;
    height: 200px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    gap: 1em;
}

.grid-system-settings button{
    background-color: #0a0a0a42;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    padding: .78em;
    color: #cdcdcd;
}

.grid-settings-object-name{
    background-color: #0a0a0a42;
    color: white;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    padding: .78em;
    color: #cdcdcd;
    height: 32px;
}

.label-mode-config{
    display: none;
}

#toggle-label-mode{
    /* display: none !important; */
}

.doNotShowAddBtn{
    display: none !important;
}


.directional-offset{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 1em 0;
}


.input-dir-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
}

.input-dir-container .custom-input{
    max-width: 45%;
}

.center-directional{
    display: flex;
    align-items: center;
    justify-content: center;

}

.directional-offset input{
    width: 100%;
}

/* style.css */
.custom-input {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 50%;
}

.custom-input input {
    padding-left: 45px;  /* Adjust based on the width of the prefix */
    padding-right: 30px; /* Adjust based on the width of the suffix */
    height: 30px;
    box-sizing: border-box;
}

.custom-input .prefix {
    position: absolute;
    left: 10px;
    top: 50.3%;
    transform: translateY(-50%);
    pointer-events: none; /* Ensures clicks go to the input */
    color: #555;
}

.custom-input .suffix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #555;
}

.action-sidebyside-container input[type=number]{
    background-color: #0a0a0a;
    border: 1px solid #282f47cf;
    color: #c9c9c9;
    font-size: 12px;
}

.action-sidebyside-container .custom-input span{
    font-size: 12px;
}

.clearAllBugLogs{
    display: none;
}

.main-toolbelt-action.disabled {
    opacity: 0.5;
    pointer-events: none; /* Disables clicks */
    cursor: not-allowed;
}

.user_objects, #detection-model, .custom_parameters, .doNotShowTab{
    display: none;
}

.bot-list-item{
    color: #c9c9c9;
    border: 1px solid #282f47cf;
    font-size: 12px;
    border-radius: 4px;
    background-color: #0a0a0a;
    width: 100%;
    padding: 10px;
    margin-top: -.7em;
}

.bot-info-sec{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bot-inf-right{
    display: flex;
    gap: 1em;
    padding-right: 1em;
}

.print-watcher-dateCreated{
    color: #adadad;
}

.print-watcher-cmds{
}

#add-newBot-Btn{
    width: 110px;
    height: 30px;
    border: none;
    background: #0a0a0a;
    color: #c9c9c9;
    border: 1px solid #282f47cf;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    margin: 1em 0;
}

.task-bots-container{
    display: flex;
    flex-direction: column;
    gap: 0em;
}

.bot-list-item:hover{
    cursor: pointer;
}

.client-boundary-container{
    display: none;
}

.custom-crosshair{
    /* display: block !important; */
}

.task-script-builder, .task-container{
    /* display: block !important; */
}

.noActiveClientView{
    width: 850px !important;
    height: 570px !important;
    background: #333333;
}

.noActiveClientMessage{
    font-size: 12px;
    position: absolute;
}

.toggle-container {
    margin: 10px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.toggle-title {
    /* margin-right: 10px; */
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.toggle-checkbox {
    display: none; /* Hide the default checkbox */
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-checkbox:checked + .toggle-slider {
    background-color: #4CAF50; /* Green when active (paused) */
}

.toggle-checkbox:checked + .toggle-slider:before {
    transform: translateX(20px); /* Move the slider to the right when checked */
}

.freeze-game-frame.paused {
    /* Add styles for the paused state if needed */
    opacity: 0.5; /* Example: Dim the game frame when paused */
    pointer-events: none; /* Disable interactions when paused */
}

.stream-toggle-container{
    position: absolute;
    top: .5em;
}

.stream-toggle-container .toggle-title{
    margin-bottom: .5em;
    font-size: 11px;
    color: #ffffff;
}
/* 
.client-boundary-container{
    display: flex;
} */

.action-config-menu{
    /* display: flex !important; */
}

.visionchat {
    background-color: #2c2c2c;
    border: 1px solid #444;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    color: #e0e0e0;
}

.visionchat .action-title-sections {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
}

.visionchat .action-title-desc {
    display: block;
    font-size: 1em;
    margin-bottom: 20px;
    color: #cccccc;
}

.visionchat .user-query,
.visionchat .delay-specific {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #333;
    color: #e0e0e0;
}

.visionchat .send-query {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.visionchat .send-query:hover {
    background-color: #0056b3;
}

.visionchat .ai-response {
    background-color: #3a3a3a;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    color: #e0e0e0;
}

.visionchat .response-label {
    font-weight: bold;
    margin-right: 5px;
    color: #ffffff;
}

.visionAITool{
    width: 99.8%;
    height: 40px;
    position: absolute;
    left: 0px;
    bottom: -32px;
    box-sizing: border-box;
    background: #101114;
    outline: 1px solid #36567380;
    overflow: hidden;
    z-index: 100;
}

.visionai-input {
    width: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 14px;
    border-radius: 4px;
    margin-top: .7em;
    outline: none; /* This will remove the focus outline in all states */
}

.visionAITool input[type=text]{
    color: #dee5ff;
    text-align: center;
}

.visionAITool input[type=text]::placeholder{
    color: #6781e5 !important;
    text-align: center;
    /* opacity: 0; */
}

.visionAITextSequence{
    color: #6781e5;
    text-align: center;
    font-size: 14px;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateX(-50%, -50%);
    line-height: 40px;
    white-space: nowrap;
}

.sendVisionAIInput{
    color: #6781e5;
    position: absolute;
    right: .8em;
    top: .5em;
    width: 23px;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.sendVisionAIInput:hover{
    transition: .2s ease-in-out;
    color: #dee5ff;
}

.visionAILogo{
    color: #6781e5;
    position: absolute;
    left: .8em;
    top: .7em;
    width: 23px;
    cursor: pointer;
    white-space: nowrap;
    opacity: .7;
}

.visionAITool{
    transition: .2s ease-in-out;

}

.visionAITool:has(.visionai-input:focus) {
    outline: 1px solid #5d8db980;
    box-shadow: 0 0 10px rgba(93, 141, 185, 0.3);
    transition: .2s ease-in-out;
}

.loadTaskData{
    visibility: hidden;
}

.move-group-select {
    margin-left: 10px;
    padding: 2px;
    font-size: 12px;
}

.bot-btn-style-menu, .save-edit-btn, .cancel-edit-btn{
    background: #0a0a0a;
    border: 1px solid #282f47cf;
    border-radius: 4px;
    color: #adadad;
    font-size: 12px;
    width: 60px;
    padding: 3e;
    height: 25px;
    cursor: pointer;

}

.add-newBot-Btn{
    width: 150px;
    margin-top: -0.5em;
    cursor: pointer;

}

#add-newGroup-Btn{
    width: 110px;
    margin-top: -0.5em;
    cursor: pointer;
    position: relative;
    top: -.5em;
    margin-top: 1.5em;
}

#add-newUngroupedBot-Btn{
    width: 110px;
    margin-top: -0.5em;
    cursor: pointer;
    position: relative;
    top: -.5em;
}

.bot-group{
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1em;
}

.group-bots-container{
    margin-top: -1em;
}

.new-group-form .save-group-btn{
    position: relative;
    top: -1em;
}

.new-group-form .cancel-group-btn{
    position: relative;
    top: -1em;
}

.group-bots-container p{
    font-size: 12px;
    margin-top: .5em;
    color: #adadad;
}

.move-group-select{
    align-self: end;
    justify-self: end;
    display: flex;
    margin-top: 1em;
}

.group-title .toggle-group-btn{
    margin-left: 1em;
}

.userBotClientSettingsGUI {
    background-color: #101212;
    border: 1px solid #ffffff1c;
    padding: 20px;
    height: 400px;
    width: 700px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    display: none;
}

/* Notification Panel Styling */
.notifPanelContainer {
}

.notifPanelTitle {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.notifPanelTabs {
    display: flex;
    gap: 0px;
    margin-bottom: 13px;
    background: #161618;
    border: 1px solid #3f3f3f75;
}

.notifPanelTab {
    background-color: #141414;
    border: none;
    padding: 8px 16px;
    /* border-radius: 8px; */
    color: #a1a1a1;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* outline: 1px solid #a1a1a136; */
    border-radius: 0px;
}

.notifPanelTab:hover {
    background-color: #212121;
}

.notifPanelTabActive {
    background-color: #212121;
    border: 1px solid #0c0c0c99;
    color: #ffffffd1;
    border-radius: 0px;
}

.notifPanelSection {
    margin-bottom: 20px;
}

.notifPanelTitle{
    position: relative;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

.closeUserBotSettings{
    position: absolute;
    right: 0em;
    top: 0em;
    cursor: pointer;
    color: #f2f2f2;
}

.notifPanelSectionHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.notifPanelSectionTitle {
    font-size: 16px;
    font-weight: 500;
    color: #a1a1a1;
}

.notifPanelSectionCount {
    background-color: #2c3434;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    color: #a1a1a1;
}

.notifPanelSeeAll {
    margin-left: auto;
    color: #a1a1a1;
    font-size: 14px;
    text-decoration: none;
}

.notifPanelSeeAll:hover {
    text-decoration: underline;
}

.notifPanelCard {
    background-color: #2c3434;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.notifPanelCardDot {
    width: 8px;
    height: 8px;
    background-color: #1e90ff;
    border-radius: 50%;
    position: absolute;
    left: 12px;
    top: 12px;
}

.notifPanelUserImage {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.notifPanelCardContent {
    flex: 1;
}

.notifPanelCardText {
    font-size: 14px;
    margin: 0 0 4px 0;
}

.notifPanelCardText strong {
    font-weight: 600;
}

.notifPanelStatusChange {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.notifPanelStatus {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.notifPanelStatusInProgress {
    background-color: #3a4242;
    color: #a1a1a1;
}

.notifPanelStatusCompleted {
    background-color: #1e90ff;
    color: #ffffff;
}

.notifPanelStatusArrow {
    color: #a1a1a1;
    font-size: 14px;
}

.notifPanelCardTime {
    font-size: 12px;
    color: #a1a1a1;
}

.notifPanelCardActions {
    display: flex;
    gap: 8px;
}

.notifPanelButton {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.notifPanelButtonIgnore {
    background-color: #3a4242;
    color: #a1a1a1;
}

.notifPanelButtonIgnore:hover {
    background-color: #4a5252;
}

.notifPanelButtonRespond {
    background-color: #1e90ff;
    color: #ffffff;
}

.notifPanelButtonRespond:hover {
    background-color: #1c86ee;
}

.userBotClientSettingsOptions{
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.bot-settings-tab{
    /* background: #02070d; */
    padding: 1em;
    position: relative;
    max-width: 214px;
    border: 1px solid #292929cf;
}

.bot-settings-tab::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #000000db;
    left: 0;
    top: 0;
}

.bot-settings-tab h3{
    color: #d5d5d5;
    font-size: 12px;
}

.bot-settings-tab p{
    max-width: 250px;
    font-size: 12px;
    color: #ffffff6e;
    line-height: 1.24em;
    margin-top: .5em;
    min-height: 60px;
}

.bot-settings-tab button{
    background: #212020b3;
    border: 1px solid #393939a6;
    border-radius: 2px;
    color: #adadad;
    font-size: 12px;
    width: 60px;
    padding: 0;
    height: 25px;
    cursor: pointer;
    margin-top: 1em;
    margin-right: 0.5em;
    cursor: pointer;
    position: relative;
}

.tab-btn-state-inactive{
    opacity: .4;
}

.settings-tab-toggle-option{
    display: flex;
    align-items: end;
}

.settings-tab-toggle-option img{
    object-fit: cover;
    margin-left: .5em;
    outline: 1px solid #7f7f7f;
}

.bot-settings-tab .settings-tab-toggle-option button.active {
    background-color: #4CAF50; /* Green background to indicate active state */
    color: white;
    border: 1px solid #4CAF50;
}

.bot-settings-tab .settings-tab-toggle-option button.tab-btn-state-inactive {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.bot-settings-tab .settings-tab-toggle-option button:not(.tab-btn-state-inactive) {
    background-color: #2196F3; /* Blue background for active Update button */
    color: white;
    cursor: pointer;
}

.blur-overlay {
    position: absolute;
    z-index: 999;
    background-color: rgba(0, 0, 0, 1); /* Optional: Adds a slight tint for visibility */
    pointer-events: none; /* Prevents the overlay from interfering with mouse events */
}

/* new changes css stractiweb */
.task-container{
    z-index: 32432432432;
    /* display: none; */
}

.navigation{
    position: relative;
    padding: 20px;
    transition: background-color 0.3s ease, padding 0.3s ease;
    z-index: 999999999;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 900px;
    border-radius: 20px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 48px;
    top: 2em;
}

.homeSection{
    max-width: 60px;
}

.homeSection img{
    width: 15px;
}

.addNewBotClient{
    width: 12px;

}

.clientTextInfo{
    top: 0;
    font-size: 13px;
}

.ClientTabInfo span{
    font-size: 13px;
}

.uiButtonContainerRound{
    border: none;
    outline: none;
}

.botInactive {
    display: flex;
    background: #14141814;
    justify-content: center;
    max-width: 135px;
}

.ClientTabInfo {
    gap: 1em;
}

.user-ui-bar {
    background: #1A1919;
    border-bottom: 1px solid #3C3232;
    height: 550px;
    width: 250px;
    flex-direction: column;
    display: flex;
    gap: 2em;
    padding: 1em 2.25em;
    align-items: start;
    margin-left: 3em;
    margin-top: 3em;
    display: none;
}

.taskPanel {
    display: flex;
    gap: 2em;
    flex-direction: column;
}

.navigation {
    background: rgb(23 23 23);
    outline: none;
    border-radius: 7px;
    /* position: fixed; */
    left: 4px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 234444;
    width: 848px;
}

.botControlSection {
    flex-grow:1;
    align-self: center;
    justify-content: end;
    gap: 0em;
    padding: 0 1em;
}

.customModalLibraryFolder{
    cursor: pointer;
}

.stractiweb-menu-dropdown li{
    border-bottom: 1px solid #252121;
}

.client-boundary-container{
    display: flex;
    left: 8px;
    top: 0;
}

.client-image-tools{
    left: -126px;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    height: 651px;
    top: 0em;
}

.stream-toggle-container .toggle-title {
    margin-bottom: .5em;
    font-size: 11px;
    color: #8d8d8d;
}

.toggle-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #000000;
    border-radius: 20px;
    transition: background-color 0.3s;
}

.freeze-game-frame{
    margin-top: 3em;
}

.client-top-menu {
    width: 848px;
    height: 30px;
    left: 2px;
    top: -30px;
    background: #1a1a1a;
    border-top: 1px solid #414141;
    border-right: 1px solid #41414159;
    border-left: 1px solid #41414159;
    border-bottom: 1px solid #41414159;
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 .7em;
    color: #adadad;
    justify-content: space-between;
}

.client-timeline-tools {
    width: 100%;
    height: 204px;
    /* border-right: 1px solid #fff; */
    position: fixed;
    bottom: 46px;
    display: flex;
    box-sizing: border-box;
    /* gap: .4em; */
    background: #1a1919;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-bottom: .5em;
    overflow: hidden;
    z-index: 9999999;
}

.timeline-config-tools {
    width: 100%;
}

.path-full-tools {
    width: 100%;
}

.bot-watcher-container{
    height: 92px;
    bottom: 30px;
}

.w-config-container{
    flex-direction: row !important;
}

.client-timeline-header{
    margin-top: 1.5em;
    margin-bottom: .7em;
    height: 13px;
}

.timeline-empty-notice {
    font-size: 13px;
    color: #f2f2f2;
    margin: 0 auto;
    position: relative;
    left: -19px;
    color: #7d7979;
    font-weight: 400;
}

.frames-game-src-img {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    left: 0;
    outline: 1px solid #9f9f9f;
    z-index: 22;
}

.client-data-management {
    max-width: 500px;
    width: 160px;
}

.timeline-toolset {
    display: flex
;
    justify-content: space-between;
    padding: 0 2em;
    color: #a9a9a9;
    font-size: 11px;
    position: absolute;
    background: #101010;
    height: 29px;
    width: 99%;
    align-items: center;
    padding-right: 14em;
}

.watcher-configuration-container {
    display: flex;
    justify-content: space-around;
    padding: .7em 0.4em;
}

.save-bot-config-settings{
    margin-right: 12.2em;
}

.save-bot-config-settings {
    margin-left: auto;
}

.active-game-bar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 1px solid #3c3232;
    background-color: #1c1b1b7a;
    border-radius: 4px;
    user-select: none;
}

.model-library-container, .bot-cloud-module, #gameDropdown{
    z-index: 343434433433434444;
}

.showTaskManager{
    display: flex !important;
}

/* In your main CSS file (e.g., style.css) */

/* Make the container for dynamic tabs + Add Bot use Flexbox */
.allClientSection {
    display: flex; /* Arrange children (tabs container + add button) horizontally */
    align-items: stretch; /* Stretch items vertically */
    overflow: hidden; /* Prevent parent from overflowing */
    flex-grow: 1; /* Allow this section to grow if needed within .navigation */
    min-width: 0; /* Important for flex children with overflow */
}

/* Style the container that HOLDS the dynamic bot tabs */
.dynamic-tabs-container {
    display: flex; /* Arrange tabs inside horizontally */
    overflow-x: auto; /* Enable horizontal scrolling ONLY for dynamic tabs */
    overflow-y: hidden; /* Hide vertical scrollbar */
    white-space: nowrap; /* Prevent tabs from wrapping */
    min-width: 0; /* Important for flex children with overflow */
    scrollbar-width: thin; /* Optional: Style scrollbar */
    scrollbar-color: #555 #333; /* Optional: Style scrollbar */
}

/* Style individual dynamic bot tabs */
.dynamic-tabs-container .dynamic-bot-tab {
    display: flex; /* Use flex for content alignment within the tab */
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

/* Ensure the ClientTabInfo takes available space */
.dynamic-tabs-container .dynamic-bot-tab .ClientTabInfo {
     display: flex;
     align-items: center; /* Center content vertically */
     flex-grow: 1; /* Allow text span to push close button */
     padding: 0 8px; /* Adjust padding as needed */
}

.dynamic-tabs-container .dynamic-bot-tab .clientTextInfo {
    margin-right: 5px; /* Space between name and close button */
    white-space: nowrap; /* Prevent name from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ... if name is too long */
    max-width: 150px; /* Adjust max-width as needed */
}

.dynamic-tabs-container .dynamic-bot-tab .close-bot-tab {
    margin-left: auto; /* Push close button to the right */
    cursor: pointer;
    width: 11px;
    height: 11px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.dynamic-tabs-container .dynamic-bot-tab .close-bot-tab:hover {
    opacity: 1;
}


/* Style the static "Add Bot" tab */
#add-bot-nav-tab {
    flex-shrink: 0; /* Prevent the Add Bot tab from shrinking */
    /* Ensure it aligns nicely */
    display: flex;
    align-items: center;
}

#add-bot-nav-tab .ClientTabInfo {
    display: flex;
    align-items: center;
    padding: 0 5px; /* Adjust padding */
}
#add-bot-nav-tab .ClientTabInfo span {
    margin-right: 5px;
}


/* Add styles for the active tab state if you don't have them */
.activeClientTab.active {
    background-color: #3736364d;
}
/* Ensure inactive tabs don't have the bottom border */
.activeClientTab:not(.active) {
    border-bottom: none;
}

.bot-cloud-module{
    display: flex;
}

/* --- Links & Common Buttons --- */
.bcm-link, .bcm-button-link { color: #7aa5ff; text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
.bcm-link:hover, .bcm-button-link:hover { color: #9ec1ff; text-decoration: underline; }
.bcm-button-link { background: none; border: none; padding: 0; font: inherit; }

.bcm-card-button, .bcm-submit-btn, .bcm-cancel-btn, .bcm-select-bot-btn,
.bcm-update-bot-btn, .bcm-remove-bot-btn, .bcm-delete-bot-btn,
.bcm-action-main, .bcm-action-secondary {
    color: #ffffff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;
    font-size: 0.9em; font-weight: 500; transition: background-color 0.2s ease, opacity 0.2s ease; white-space: nowrap;
    text-align: center; display: inline-block; line-height: 1.4; vertical-align: middle;
}
.bcm-card-button, .bcm-remove-bot-btn { background-color: #4a4a5a; } /* Standard card buttons */
.bcm-update-bot-btn { background-color: #ffc107; color: #1a1a1e; }
.bcm-update-bot-btn:hover { background-color: #ffad00; }
.bcm-delete-bot-btn { background-color: #dc3545; }
.bcm-delete-bot-btn:hover { background-color: #c82333; }
.bcm-submit-btn { background-color: #5c8aff; padding: 10px 20px; font-size: 1em; }
.bcm-submit-btn:hover:not(:disabled) { background-color: #4a78cc; }
.bcm-cancel-btn { background-color: #6c757d; padding: 10px 20px; font-size: 1em; margin-left: 10px; }
.bcm-cancel-btn:hover { background-color: #5a6268; }
.bcm-select-bot-btn { background-color: #555; padding: 10px 15px; margin-right: 10px; }
.bcm-action-main { background-color: #5c8aff; flex-grow: 1; padding: 12px 10px; font-size: 1em; }
.bcm-action-main:hover:not(:disabled) { background-color: #4a78cc; }
.bcm-action-main:disabled { background-color: #3a5a9a; color: #aaa; cursor: not-allowed; }
.bcm-action-secondary { background-color: #6c757d; flex-grow: 1; padding: 12px 10px; font-size: 1em; }
.bcm-action-secondary:hover:not(:disabled) { background-color: #5a6268; }
.bcm-action-secondary:disabled { background-color: #495057; color: #aaa; cursor: not-allowed; }
button:disabled { opacity: 0.7; cursor: not-allowed !important; }


/* --- Main Layout --- */
.bot-cloud-module { }
.bcm-container { 
    display: flex; max-width: 1400px; min-height: 85vh; background-color: #25252c; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
}

/* --- Sidebar --- */
.bcm-sidebar { width: 230px; background-color: #1e1e24; padding: 25px; flex-shrink: 0; border-right: 1px solid #3a3a44; display: flex; flex-direction: column; }
.bcm-sidebar-title { font-size: 1.6em; color: #ffffff; margin: 0 0 35px 0; font-weight: 600; text-align: center; }
.bcm-nav-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.bcm-nav-item { margin-bottom: 10px; cursor: pointer; border-radius: 5px; transition: background-color 0.2s ease; }
.bcm-nav-item a { display: flex; align-items: center; padding: 10px 15px; color: #a0a0b0; font-size: 0.95em; transition: color 0.2s ease; }
.bcm-nav-item:hover { background-color: #3a3a44; }
.bcm-nav-item:hover a { color: #ffffff; }
.bcm-nav-item.bcm-active { background-color: #3a3a44; }
.bcm-nav-item.bcm-active a { color: #ffffff; font-weight: 500; }
.bcm-sidebar-divider { margin: 15px -10px; border-color: #3a3a44; /* Adjusted margin */ }
.bcm-role-switcher { margin-top: auto; padding-top: 15px; border-top: 1px solid #3a3a44; font-size: 0.85em; color: #a0a0b0; }
.bcm-role-switcher label { margin-right: 8px; }
.bcm-role-switcher select { background-color: #3a3a44; color: #e0e0e0; border: 1px solid #555; border-radius: 4px; padding: 3px 6px; width: 100%; margin-top: 5px; }
.bcm-owner-nav { display: none; } /* Hide owner nav links by default, JS shows if actualUserIsOwner */


/* --- Icons --- */
.bcm-icon { display: inline-block; width: 18px; height: 18px; margin-right: 10px; background-color: #a0a0b0; transition: background-color 0.2s ease; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; flex-shrink: 0; }
.bcm-nav-item:hover .bcm-icon, .bcm-nav-item.bcm-active .bcm-icon { background-color: #ffffff; }
/* UPDATE ICON PATHS BELOW */
.bcm-icon-market { -webkit-mask-image: url('icons/market.svg'); mask-image: url('icons/market.svg'); }
.bcm-icon-bots { -webkit-mask-image: url('icons/bots.svg'); mask-image: url('icons/bots.svg'); }
.bcm-icon-upload { -webkit-mask-image: url('icons/upload.svg'); mask-image: url('icons/upload.svg'); }
.bcm-icon-search { -webkit-mask-image: url('icons/search.svg'); mask-image: url('icons/search.svg'); background-color: #777; margin-right: 8px; width: 16px; height: 16px; }
.bcm-icon-download { -webkit-mask-image: url('icons/download.svg'); mask-image: url('icons/download.svg'); }
.bcm-icon-account { -webkit-mask-image: url('icons/account.svg'); mask-image: url('icons/account.svg'); }
.bcm-icon-settings { -webkit-mask-image: url('icons/settings.svg'); mask-image: url('icons/settings.svg'); }
.bcm-icon-help { -webkit-mask-image: url('icons/help.svg'); mask-image: url('icons/help.svg'); }
/* Contextual Icon Styles */
/* .bcm-card-downloads .bcm-icon-download, .bcm-details-info-line .bcm-icon-download { background-color: #a0a0b0; width: 16px; height: 16px; margin-right: 6px; } */

/* --- Main Content & View Switching --- */
.bcm-main-content { flex-grow: 1; padding: 0; background-color: #0a0b10; display: flex; flex-direction: column; position: relative; }
.bcm-view { display: none; flex-direction: column; flex-grow: 1; padding: 30px !important; overflow-y: auto; }
.bcm-view.bcm-active-view { display: flex; }

/* --- Common View Header --- */
.bcm-main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #161616; flex-shrink: 0; }
.bcm-view-title { margin: 0; font-size: 1.8em; color: #ffffff; font-weight: 600; }
.bcm-close-btn, .bcm-back-btn { background: none; border: none; color: #a0a0b0; font-size: 14px; cursor: pointer; line-height: 1; transition: color 0.2s ease; margin-left: 10px; }
.bcm-close-btn:hover, .bcm-back-btn:hover { color: #ffffff; }
.bcm-back-btn { font-size: 1.8em; }

/* --- Controls (Search, Filter, Sort) --- */
.bcm-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 30px; gap: 20px; flex-shrink: 0; }
.bcm-search-bar { display: flex; align-items: center; background-color: #1a1a1a; padding: 8px 0; border-radius: 5px; flex-grow: 1; min-width: 250px; }
.bcm-search-input { background: none; border: none; color: #e0e0e0; outline: none; font-size: 12px; width: 100%; }
.bcm-search-input::placeholder { color: #888; }
.bcm-filters { display: flex; gap: 15px; flex-wrap: wrap;} /* Allow filters to wrap */
.bcm-filter-select, .bcm-sort-select { background-color: #3a3a44; color: #e0e0e0; border: 1px solid #555; padding: 8px 12px; border-radius: 5px; font-size: 0.9em; cursor: pointer; min-width: 150px; }

/* --- Bot Grid & Cards --- */
.bcm-placeholder-text { color: #888; font-style: italic; grid-column: 1 / -1; text-align: center; margin-top: 30px; padding: 20px; }
.bcm-bot-card { background-color: #33333c; border-radius: 6px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.bcm-card-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;}
.bcm-card-image-placeholder { width: 50px; height: 50px; background-color: #555; border-radius: 4px; background-image: url('icons/default-bot.png'); background-size: cover; background-position: center; flex-shrink: 0; }
.bcm-card-update-tag, .bcm-card-update-available-tag { font-size: 0.75em; padding: 3px 6px; border-radius: 3px; font-weight: 600; white-space: nowrap; margin-left: 10px; }
.bcm-card-update-tag { color: #ffc107; background-color: rgba(44, 44, 52, 0.8); } /* Yellow text for general update */
.bcm-card-update-available-tag { color: #1a1a1e; background-color: #ffc107; } /* Yellow background for action needed */
.bcm-card-game, .bcm-card-creator { font-size: 0.85em; color: #a0a0b0; margin: 2px 0; line-height: 1.3; }
.bcm-star { margin-right: 1px; display: inline-block; }
.bcm-star-empty { color: #555; }
.bcm-rating-value { color: #e0e0e0; font-size: 0.85em; margin-left: 8px; font-weight: 500; }
.bcm-rating-secondary { color: #888; font-size: 0.8em; margin-left: 5px; }
/* .bcm-card-downloads { font-size: 0.8em; color: #a0a0b0; margin: 5px 0 8px 0; display: flex; align-items: center; } */
.bcm-download-count { font-weight: 500; margin: 0 3px; color: #ccc; }
.bcm-card-version-info { font-size: 0.8em; color: #aaa; margin: -10px 0 10px 0; } /* Specific to installed cards */
.bcm-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; flex-wrap: wrap; gap: 10px; }
.bcm-card-price { font-size: 14px; font-weight: bold; color: #66cc99; }
.bcm-price-free { color: #5bc0de; font-weight: 600; }
.bcm-card-status { font-size: 0.85em; color: #aaa; font-style: italic; }
.bcm-installed-actions .bcm-card-button, .bcm-mycreations-actions .bcm-card-button { flex: 1 1 auto; /* Allow buttons to grow/shrink */ }

/* --- Upload/Edit Form Styles --- */
.bcm-form { max-width: 700px; margin: 20px auto; }
.bcm-form-group { margin-bottom: 20px; }
.bcm-form-group-inline { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.bcm-form-group-inline .bcm-form-group { flex: 1 1 200px; margin-bottom: 0; }
.bcm-other-game-group { flex-basis: 100%; margin-top: 10px; }
.bcm-selected-bot-info { font-style: italic; color: #aaa; margin-left: 5px; display: inline-block; margin-top: 5px; }
.bcm-form-divider { border: none; border-top: 1px solid #3a3a44; margin: 30px 0; }
.bcm-form-actions { margin-top: 30px; text-align: right; }
.bcm-form-check { display: flex; align-items: center; margin-bottom: 10px; }
.bcm-form-check input[type="checkbox"], .bcm-form-check input[type="radio"] { width: auto; margin-right: 10px; flex-shrink: 0;}
.bcm-form-check label { margin-bottom: 0; font-weight: normal; color: #e0e0e0; font-size: 0.95em;}
.bcm-form-condensed .bcm-form-group { margin-bottom: 15px; }

/* --- View Details Styles --- */
.bcm-details-content { display: flex; gap: 35px; margin-top: 20px; flex-grow: 1; }
.bcm-details-left { flex-basis: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.bcm-details-right { flex-grow: 1; min-width: 0; }
#bcm-details-image { width: 100%; padding-top: 75%; background-color: #555; border-radius: 6px; background-size: cover; background-position: center; margin-bottom: 0; }
#bcm-details-rating-display { font-size: 1.2em; color: #ffc107; font-family: 'Segoe UI Symbol', Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
#bcm-details-downloads { font-size: 0.9em; color: #a0a0b0; display: flex; align-items: center; }
#bcm-details-download-count { font-weight: 500; margin: 0 4px; color: #ccc; }
#bcm-details-price { font-size: 1.6em; font-weight: bold; color: #66cc99; }
#bcm-details-price.bcm-price-free { color: #5bc0de; }
.bcm-details-actions { display: flex; gap: 15px; margin-top: 10px; }

/* Rating Input Widget */
.bcm-rating-widget { margin-top: 20px; padding-top: 15px; border-top: 1px solid #444; }
.bcm-rating-widget h4 { margin: 0 0 10px 0; color: #ccc; font-weight: 500;}
.bcm-stars-input { font-size: 1.8em; color: #666; cursor: pointer; margin-bottom: 10px; font-family: 'Segoe UI Symbol', Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
.bcm-star-input { margin-right: 3px; transition: color 0.1s ease-in-out; }
.bcm-star-input.hover, .bcm-star-input.selected { color: #ffc107; }
#bcm-submit-rating-btn { background-color: #4a4a5a; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85em; transition: background-color 0.2s ease; }
#bcm-submit-rating-btn:hover:not(:disabled) { background-color: #5a5a6a; }
#bcm-submit-rating-btn:disabled { background-color: #333; color: #777; cursor: not-allowed; }

/* Details Right Column */
.bcm-details-right h3, .bcm-details-right h4 { color: #ffffff; margin-bottom: 0.5em; margin-top: 1.5em; }
.bcm-details-right h3 { font-size: 1.3em; margin-top: 0; } /* Game name */
.bcm-details-right h4 { font-size: 1.1em; border-bottom: 1px solid #444; padding-bottom: 5px;} /* Section headers */
.bcm-details-right p { color: #c0c0c0; line-height: 1.6; margin-top: 0; margin-bottom: 10px; }
#bcm-details-creator, #bcm-details-date { font-size: 0.9em; color: #a0a0b0; }

/* Changelog List */
.bcm-changelog { list-style: none; padding: 0; margin-top: 10px; max-height: 250px; overflow-y: auto; border: 1px solid #3a3a44; border-radius: 4px; padding: 15px; background-color: #1e1e24; }
.bcm-changelog li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #3a3a44; font-size: 0.9em; line-height: 1.5; }
.bcm-changelog li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bcm-changelog-date { font-weight: 600; color: #ccc; display: block; margin-bottom: 4px; }

/* Reviews Section */
.bcm-reviews-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; }
.bcm-review-list { list-style: none; padding: 0; margin: 15px 0 20px 0; max-height: 400px; overflow-y: auto; }
.bcm-review-item { background-color: #33333c; padding: 15px; border-radius: 4px; margin-bottom: 10px; border: 1px solid #4a4a4a; }
.bcm-review-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 0.85em; color: #a0a0b0; margin-bottom: 8px; gap: 10px; }
.bcm-review-author { font-weight: 600; color: #ccc; }
.bcm-review-rating { color: #ffc107; font-family: 'Segoe UI Symbol', Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;}
.bcm-review-text { font-size: 0.95em; color: #e0e0e0; line-height: 1.5; margin: 0; word-break: break-word; }
.bcm-add-review { margin-top: 20px; padding-top: 15px; border-top: 1px solid #444; }
.bcm-add-review h5 { margin: 0 0 10px 0; font-size: 1em; color: #ddd;}
.bcm-submit-review-btn { font-size: 0.9em; }

/* --- Account Management, Settings, Help Views --- */
.bcm-account-sections, .bcm-settings-sections, .bcm-help-content { display: flex; flex-direction: column; gap: 30px; }
.bcm-account-section, .bcm-settings-section, .bcm-help-section { padding-bottom: 20px; border-bottom: 1px solid #3a3a44; }
.bcm-account-section:last-child, .bcm-settings-section:last-child, .bcm-help-section:last-child { border-bottom: none; }
.bcm-account-section h3, .bcm-settings-section h3, .bcm-help-section h3 { margin-bottom: 15px; color: #eee; font-size: 1.3em; }
.bcm-stats-table th, .bcm-stats-table td { padding: 10px 15px; }
.bcm-form-settings .bcm-form-check label { font-size: 0.95em; }
.bcm-settings-section > p { color: #bbb; margin-bottom: 15px; font-size: 0.9em;} /* Description text in settings */
.bcm-help-content { line-height: 1.7; }
.bcm-help-content h3 { margin-top: 10px; margin-bottom: 10px; font-size: 1.4em; }
.bcm-help-content ol, .bcm-help-content ul { margin-left: 20px; }


/* --- Owner/Customer Visibility --- */
.bcm-owner-only, .bcm-owner-nav { display: none; } /* Hide owner elements/nav by default */
.bcm-customer-only { display: none; } /* Hide customer elements by default */

/* --- Modal Styles --- */
.bcm-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
.bcm-modal-content { background-color: #2c2c34; margin: 10% auto; padding: 30px; border: 1px solid #555; border-radius: 8px; width: 90%; max-width: 600px; color: #e0e0e0; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.bcm-modal-close { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1;}
.bcm-modal-close:hover, .bcm-modal-close:focus { color: #fff; text-decoration: none; }
.bcm-modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #fff; font-size: 1.5em;}
.bcm-modal-content p { color: #ccc; }
#bcm-modal-bot-list, #bcm-modal-status-list { max-height: 300px; overflow-y: auto; margin: 20px 0; border: 1px solid #444; padding: 10px; background: #25252c; border-radius: 4px; }
/* Modal Item Styles */
.bcm-modal-bot-item, .bcm-modal-status-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 5px; background-color: #3a3a44; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; gap: 15px;}
.bcm-modal-bot-item:hover { background-color: #4a4a5a; }
.bcm-modal-bot-item.selected { background-color: #5c8aff; color: #fff; font-weight: 500; }
#bcm-confirm-bot-selection { margin-top: 15px; }
#bcm-confirm-bot-selection:disabled { background-color: #333; cursor: not-allowed; }
/* Listing Status Modal Specifics */
.bcm-modal-status-item .bot-name { font-weight: 500; flex-grow: 1; }
.bcm-modal-status-item .status-controls select { width: auto; min-width: 120px; font-size: 0.9em;}
#bcm-save-status-changes { margin-top: 15px; }


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .bcm-container { flex-direction: column; margin: 1rem; min-height: auto; }
    .bcm-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #3a3a44; padding: 15px; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .bcm-sidebar-title { margin: 0 10px 0 0; font-size: 1.4em; }
    .bcm-nav-list { flex-grow: 0; display: flex; gap: 5px; flex-wrap: wrap; order: 3; width: 100%; margin-top: 10px; justify-content: flex-start;}
    .bcm-nav-item { margin-bottom: 5px; margin-right: 5px;}
    .bcm-nav-item a { padding: 8px 10px; font-size: 0.9em; }
    .bcm-sidebar-divider { display: none; }
    .bcm-role-switcher { margin: 0 0 0 auto; padding: 0; border: none; order: 2; }
    .bcm-role-switcher select { width: auto; margin-top: 0; }

    .bcm-main-content { padding: 0; }
    .bcm-view { padding: 20px; }
    .bcm-controls { flex-direction: column; align-items: stretch; }
    .bcm-filters { width: 100%; justify-content: space-between; flex-direction: column; gap: 10px; }
    .bcm-filter-select, .bcm-sort-select { min-width: 0; }
    .bcm-details-content { flex-direction: column; }
    .bcm-details-left { flex-basis: auto; align-items: center; max-width: 400px; margin: 0 auto; } /* Center left column */
    #bcm-details-image { max-width: 300px; padding-top: 75%; }
    .bcm-form-group-inline { flex-direction: column; align-items: stretch; gap: 0;}
    .bcm-form-group-inline .bcm-form-group { margin-bottom: 20px; }
    .bcm-modal-content { width: 95%; margin: 5% auto; }
}

@media (max-width: 768px) {
    .bcm-nav-list { justify-content: space-around; }
}

/* Style for installed items in the bot selection modal */
.bcm-modal-bot-item-installed {
    color: #999; /* Lighter text color */
    background-color: #f8f8f8; /* Slightly different background */
    cursor: not-allowed; /* Indicate it's not clickable */
    border-left: 3px solid #ccc; /* Example: Add a visual marker */
    /* Add any other desired styling */
}

/* Optional: Prevent hover effects on disabled items */
.bcm-modal-bot-item-installed:hover {
    background-color: #f8f8f8; /* Keep background same as non-hover */
    /* Override any other hover styles from .bcm-modal-bot-item */
    /* For example, if hover usually adds a border: */
    /* border: 1px solid transparent; */ /* Reset border */
}

/* Optional: Style for visual feedback on denied click */
.bcm-selection-denied {
    border: 1px solid red !important;
    animation: shake 0.5s;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.bcm-filter-select, .bcm-sort-select {
    background-color: #0e0e16;
    color: #e0e0e0;
    border: 1px solid #272727;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    min-width: 150px;
}

.bcm-view-title {
    margin: 0;
    font-size: 1.8em;
    color: #fdfdfdf2;
    font-weight: 600;
}

.bcm-sidebar {
    width: 230px;
    background-color: #0c0e13;
    padding: 25px;
    flex-shrink: 0;
    border-right: 1px solid #161616;
    display: flex;
    flex-direction: column;
}

.bcm-nav-item.bcm-active {
    background-color: #14181f;
}

.bcm-nav-item.bcm-active a {
    color: #629be3;
    font-weight: 500;
}

.bcm-nav-item a {
    text-decoration: none;
    font-size: 14px;
}

.bcm-nav-list {
    list-style: none;
    text-decoration: none;
}

.bcm-nav-item:hover {
    background-color: #14181f;
}

.bcm-bot-card {
    background-color: #121314;
    border: 1px solid #2f2f2f;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    max-width: 220px;
    zoom: 0.85;
}

.bcm-bot-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.card-top-main-info{
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.bot-info-align{
    display: flex;
    flex-direction: column;
}

.bcm-card-image-placeholder {
    width: 95px;
    height: 95px;
    background-color: #555;
    border-radius: 4px;
    background-image: url(icons/default-bot.png);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.bcm-rating-value {
    color: #e0e0e0;
    font-size: 11px;
    margin-left: 8px;
    font-weight: 500;
}

.bcm-card-downloads {
    font-size: 11px;
    color: #a0a0b0;
    display: flex;
    align-items: start;
}

.bcm-card-rating {
    /* margin: 5px 0; */
    color: #ffc107;
    display: flex;
    align-items: center;
    margin-bottom: .2em;
    line-height: 1;
    font-family: 'Segoe UI Symbol', Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.bcm-icon .bcm-icon-download{
    display: inline-block;
    width: 18px;
    height: 18px;
    /* margin-right: 0 !important; */
    background-color: #a0a0b0;
    transition: background-color 0.2s ease;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.bcm-card-downloads .bcm-icon-download{
    display: none;
}

.bcm-card-description {
    font-size: 12px;
    color: #c0c0c0;
    margin: 5px 0 3px 0;
    line-height: 1.4;
    flex-grow: 1;
}

.bcm-card-button, .bcm-remove-bot-btn {
    background-color: #18274a;
    font-size: 12px;
    font-weight: 500;
}

.bcm-card-title {
    font-size: 14px;
    color: #ffffff;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.bcm-sidebar-divider {
    margin: 15px -10px;
    border-color: #161616;
}

hr {
    color: #161616;
    border: 1px solid #161616;
}

.bcm-admin-table{
    color: #f2f2f2;
}

.bcm-details-right h4 {
    font-size: 14px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.bcm-details-right p {
    color: #c0c0c0;
    line-height: 1.6;
    margin-top: 0;
    font-size: 12px;
    margin-bottom: 0px;
}

#bcm-details-creator, #bcm-details-date {
    font-size: 12px;
    color: #a0a0b0;
}

.bcm-details-right h3, .bcm-details-right h4 {
    color: #ffffff;
    margin-bottom: 0.3em;
}

.bcm-changelog span:not(.first-child){
    color: #f2f2f2;
    font-size: 12px;
}

.bcm-details-downloads .bcm-icon{
    display: none;
}

.bcm-details-info-line .bcm-icon{
    display: none;
}

.bcm-details-left {
    flex-basis: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#bcm-details-price {
    font-size: 20px;
    margin-top: .5em;
    font-weight: bold;
}

.bcm-action-main {
    background-color: #113b33;
    flex-grow: 0;
    padding: 0.5em 1em;
    font-size: 14px;
}

.bcm-action-secondary {
    background-color: #6c757d;
    flex-grow: 0;
    padding: .5em 1em;
    font-size: 14px;
}

#review-text{
    background: #323232;
    color: #f2f2f2;
}

.bcm-placeholder-text {
    color: #888;
    font-style: italic;
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0px;
    padding: 0px;
}

.bcm-back-btn {
    font-size: 14px;
    position: absolute;
    right: 5em;
}

.bcm-details-content {
    display: flex;
    gap: 35px;
    margin-top: 0px;
    flex-grow: 1;
}

.bcm-submit-btn {
    background-color: #113b33;
}

.bcm-form-group {
    margin-bottom: 11px;
}

.bcm-form-group{
    color: #f2f2f2;
}

/* Form Container */
.bcm-form.bcm-upload-form {
    background-color: #121314; /* Slightly lighter dark background for the form */
    padding: 30px;
    padding-top: 17px;
    border-radius: 8px;
    max-width: 600px; /* Limit form width for readability */
    margin: 0; /* Center the form */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
}

/* Form Groups - Spacing */
.bcm-form-group {
    margin-top: 10px;
    margin-bottom: 20px; /* Add space between form elements */
}

/* Labels */
.bcm-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
    color: #cccccc;
}

/* Required Asterisk */
.required {
    color: #ff6b6b; /* Red color for emphasis */
    margin-left: 4px;
}

/* Input Fields, Select, Textarea */
.bcm-form-group input[type="text"],
.bcm-form-group input[type="number"],
.bcm-form-group input[type="url"],
.bcm-form-group select,
.bcm-form-group textarea {
    width: 100%; /* Make inputs fill the container width */
    padding: 12px;
    border: 1px solid #444; /* Darker border */
    border-radius: 5px;
    background-color: #333; /* Dark input background */
    color: #f0f0f0; /* Light text in inputs */
    font-size: 12px;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus Styles for Inputs */
.bcm-form-group input:focus,
.bcm-form-group select:focus,
.bcm-form-group textarea:focus {
    outline: none;
    border-color: #4a90e2; /* Highlight color on focus */
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); /* Subtle glow on focus */
}

/* Textarea specific */
.bcm-form-group textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px;
}

/* Button Styling */
.bcm-select-bot-btn,
.bcm-submit-btn {
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

/* Specific Button Styles */
.bcm-select-bot-btn {
    background-color: #18274a; /* Gray button */
    color: #f0f0f0;
    margin-right: 10px; /* Space if other elements are next to it */
}

.bcm-submit-btn {
    background-color: #4a90e2; /* Blue submit button */
    color: #ffffff;
}

.bcm-select-bot-btn:active,
.bcm-submit-btn:active {
    transform: translateY(1px); /* Slight press effect */
}

/* Selected Bot Info Span */
.bcm-selected-bot-info {
    display: inline-block; /* Keep it inline but allow padding */
    margin-left: 15px;
    padding: 8px 12px;
    background-color: #3a3a3a;
    border-radius: 4px;
    font-size: 0.9em;
    color: #b0b0b0;
}

/* Inline Form Group (for Game + Other Game) */
.bcm-form-group-inline {
    display: flex;
    gap: 15px; /* Space between the inline elements */
    align-items: flex-end; /* Align items at the bottom */
}

.bcm-form-group-inline .bcm-form-group {
    flex: 1; /* Allow groups to grow */
    margin-bottom: 0; /* Remove bottom margin since parent has it */
}

/* Adjust width for the 'Other Game' input if needed */
.bcm-form-group-inline .bcm-other-game-group {
     /* Adjust flex-basis or width as desired */
     flex-basis: 50%; /* Example: make it take half the space */
}


/* Form Actions Area (Submit Button Container) */
.bcm-form-actions {
    margin-top: 30px; /* Extra space before submit */
    text-align: right; /* Align submit button to the right */
}

/* Responsive adjustments (optional) */
@media (max-width: 600px) {
    .bcm-form.bcm-upload-form {
        padding: 20px;
    }

    .bcm-form-group-inline {
        flex-direction: column; /* Stack inline elements on small screens */
        gap: 0; /* Remove gap when stacked */
        align-items: stretch; /* Stretch items full width */
    }

     .bcm-form-group-inline .bcm-form-group {
         margin-bottom: 20px; /* Add margin back when stacked */
     }

    .bcm-form-group-inline .bcm-other-game-group {
         margin-bottom: 0; /* Remove margin from last item in stack */
     }

    .bcm-form-actions {
        text-align: center; /* Center button on small screens */
    }

    .bcm-submit-btn {
        width: 100%; /* Make button full width */
    }
}

.bcm-account-section{
    color: #f2f2f2;
    font-size: 13px;
}

.bcm-help-content{
    color: #f2f2f2;
    font-size: 13px;
}

/* --- Admin View Specific Styles --- */

/* Container for the admin view */
#bcm-view-admin {
    /* Inherits general .bcm-view padding/styles */
    /* Add specific padding if needed */
    padding-bottom: 30px;
}

/* Search input specific to admin view (if different styling needed) */
#bcm-view-admin .bcm-admin-search-input {
    /* Inherits general .bcm-search-input styling */
    /* Override placeholder or styles if needed */
    /* Example: width: 50%; */
}

/* Admin Table Styling */
.bcm-admin-table {
    width: 100%;
    border-collapse: collapse; /* Clean borders */
    margin-top: 20px;
    font-size: 0.9em; /* Slightly smaller font for table density */
    background-color: #333; /* Dark background for the table */
    border-radius: 5px; /* Optional: rounded corners for the table */
    overflow: hidden; /* Needed for border-radius on table */
}

/* Table Header */
.bcm-admin-table thead th {
    background-color: #444; /* Slightly darker header */
    color: #e0e0e0;
    padding: 12px 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #555;
}

/* Table Body Rows */
.bcm-admin-table tbody tr {
    border-bottom: 1px solid #484848; /* Separator lines */
    transition: background-color 0.2s ease;
}

.bcm-admin-table tbody tr:last-child {
    border-bottom: none; /* No border on the last row */
}

.bcm-admin-table tbody tr:hover {
    background-color: #3f3f3f; /* Subtle hover effect */
}

/* Table Cells */
.bcm-admin-table td {
    padding: 10px 15px;
    vertical-align: middle; /* Align content vertically */
    color: #ccc;
}

/* Status Cell Styling (Add more as needed based on your statuses) */
.bcm-admin-table td[class*="status-"] { /* Target cells with status classes */
    font-weight: bold;
    padding: 6px 10px; /* Make status cells slightly smaller padding */
    border-radius: 4px;
    text-align: center;
    display: inline-block; /* To allow padding/radius */
    margin: 4px 0; /* Add slight vertical margin */
    font-size: 0.85em;
    min-width: 90px; /* Give statuses some minimum width */
}

.bcm-admin-table .status-needs-review {
    background-color: #8a6d3b; /* Dark yellow/brown */
    color: #f5f5f5;
}

.bcm-admin-table .status-rejected {
    background-color: #a94442; /* Dark red */
    color: #f5f5f5;
}

.bcm-admin-table .status-published {
    background-color: #3c763d; /* Dark green */
    color: #f5f5f5;
}

.bcm-admin-table .status-paused,
.bcm-admin-table .status-hidden {
    background-color: #555; /* Gray */
    color: #ddd;
}


/* Actions Cell & Buttons */
.bcm-admin-actions {
    text-align: right; /* Align buttons to the right */
    white-space: nowrap; /* Prevent buttons wrapping */
}

.bcm-admin-btn {
    display: inline-flex; /* Use flex for icon centering */
    align-items: center;
    justify-content: center;
    padding: 5px 8px; /* Smaller padding for action buttons */
    margin-left: 5px; /* Space between buttons */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em; /* Base font size */
    color: #fff;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    line-height: 1; /* Ensure text/icons align well */
}

.bcm-admin-btn:hover {
    opacity: 0.9;
}

.bcm-admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Specific Action Button Colors */
.bcm-admin-approve {
    background-color: #4CAF50; /* Green */
}
.bcm-admin-reject {
    background-color: #f44336; /* Red */
}
.bcm-admin-view {
    background-color: #121212; /* Blue */
}
.bcm-admin-view-feedback {
    background-color: #673AB7; /* Purple */
}

/* Placeholder text inside tbody */
.bcm-admin-table .bcm-placeholder-text,
.bcm-admin-table .bcm-error-text {
    font-style: italic;
    color: #888;
    text-align: center;
    padding: 20px;
}
.bcm-admin-table .bcm-error-text {
    color: #a94442;
}

/* Responsive Table Handling (Example: Horizontal Scroll) */
.bcm-admin-bot-list {
    overflow-x: auto; /* Add horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
}

/* Optional: Adjust padding on small screens */
@media (max-width: 768px) {
    .bcm-admin-table td,
    .bcm-admin-table th {
        padding: 8px 10px;
        white-space: nowrap; /* Prevent text wrapping in cells */
    }
     .bcm-admin-table td[class*="status-"] {
        min-width: 75px;
     }
     .bcm-admin-actions {
         /* Add more spacing if needed */
     }
     .bcm-admin-btn {
         margin-left: 3px;
         padding: 4px 6px;
     }
}

.bot-cloud-module{
    display: none;
}

/* Style for active setting buttons */
.action-config-menu .action-box-select-btn.action-click-active {
    outline: 1px solid green;
    /* You might want other styles too, e.g.: */
    /* background-color: #e0ffe0; */
    /* border-color: green; */
    /* font-weight: bold; */
  }
  
  /* Ensure non-active buttons have no outline or default */
  .action-config-menu .action-box-select-btn {
      outline: none; /* Or your default outline */
  }

.timeline-keys{
    /* transform: scale(0.8); */
    outline: 1px solid #67676752;
    top: -.2em;
    position: relative;
}

.model-tasks-list {
    margin-top: 1em;
    max-height: 370px;
    overflow-y: auto;
}

.timeline-keys{
    /* min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px; */
}

.timeline-keys svg{
    width: 20px;
}

.timeline-keys{
    height: 30px !important;
    flex-direction: row;
    top: .5em;
    width: 110px;
    justify-content: space-between;
    padding-left: .4em;
    padding-right: .7em;
    border-radius: 2px;
    transform: scale(1);
    color: #ffffff;
    outline: 1px solid #ffffff1f;
}

.client-timeline-tools {
    height: 315px;
}

.timeline-keys.timeline-target {
    background: #132f3d;
    outline: 1px solid #1a5116 !important;
}

.timeline-keys.timeline-find {
    background: #162a8f;
    outline: 1px solid #2a3fa3 !important;
}

.timeline-keys.timeline-delay {
    background: #361d83;
    outline: 1px solid #4f2eb5 !important;
}

.timeline-keys.timeline-unknown {
    background: #4e5267;
    outline: 1px solid #717899 !important;
}

.timeline-keys.timeline-click {
    background: #533c09;
    outline: 1px solid #7d5d16 !important;
}

.timeline-keys.timeline-keyboard {
    background: #5f1717;
    outline: 1px solid #871717 !important;
}

.timeline-keys .select-region-target{
    display: none;
}

.timeline-container-frame {
    /* display: flex; */ /* Remove this if you added it previously */
    overflow-x: auto; /* Allow horizontal scrolling */
    width: 100%; /* Or specific width */
    box-sizing: border-box;
    margin-top: -1em;
    margin-left: 1em;
}

.timeline-control-header{
    color: #f2f2f2;
    font-size: 12px;
    margin-bottom: .5em;
}

.timeline-category-label {
    width: 80px; /* Fixed width for labels */
    /* padding-right: 115px; */ /* Reduce this large padding */
    padding-right: 15px;      /* Add a smaller gap after label text */
    flex-shrink: 0;
    padding-top: 5px;
    color: #bbb;
    font-size: 12px;
    /* position: relative; */
    z-index: 1;
}

.timeline-category-label {
    width: 30px; /* Fixed width for labels */
    /* padding-right: 115px; */
    flex-shrink: 0; /* Prevent label from shrinking */
    padding-top: 5px; /* Align text better with keys */
    color: #bbb;
    font-size: 11px;
    /* Ensure label doesn't overlap keys if rows are tight */
    z-index:3; /* Keep label above background but below keys if needed */

    position: -webkit-sticky; /* For Safari compatibility */
    position: sticky;
    left: 0; /* Stick to the left edge of the scrolling container */
    box-sizing: border-box;

    height: 50px;
    width: 50px;
    background: #1a1919;
}

/* --- Sticky Positioning (Keep this as is) --- */

/* Ensure the main scroll container establishes a positioning context */
.timeline-categories {
    position: relative; /* Often needed for sticky positioning context */
  }
  
  /* Style the category labels to be sticky */
  .timeline-category-label {
    margin-top: -3em; /* Adjust value as needed */
  }
  
  /* --- Vertical Offset Approach --- */
  #timeline-search-row .timeline-category-label {
    margin-top: 0; /* Reset the margin for the label inside the 'search' row */
  }
 
  
.timeline-category-keys {
    /* These sub-containers no longer hold keys directly for positioning */
    /* Remove flex properties */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* gap: 8px; */
    /* flex-grow: 1; */

    position: static; /* No special positioning needed for these */
    /* border: 1px dashed yellow; */ /* For debugging */
    width: calc(100% - 95px); /* Take remaining width after label */
    min-height: 35px; /* Ensure it has some height for label alignment */
}
/* Hide the original loading container and gaps */
/* You might want to remove the display:none temporarily during development */
.client-timeline-choices {
   /* display: none; */ /* Hide this once sorting works */
    border: 1px dashed grey; /* For visibility during dev */
    margin-top: 20px;
    padding: 10px;
    min-height: 50px;
}
.timeline-gap {
    display: none; /* Gaps are not needed in the categorized view */
}

.timeline-category-keys{
    top: -1em;
}

/* Style for the empty notice */
#timeline-overall-empty-notice {
    text-align: center;
    padding: 20px;
    color: #888;
    font-style: italic;
}

.timeline-key-placeholder {
    border: 2px dashed #888; /* Style as you like */
    background-color: rgba(100, 100, 100, 0.3); /* Semi-transparent background */
    height: 32px; /* Should roughly match key height */
    width: 80px; /* Optional: match key width or adjust */
    display: inline-block;
    vertical-align: top; /* Align with other keys */
    margin: 0 4px; /* Adjust to match gap */
    border-radius: 4px;
    box-sizing: border-box; /* Include border in height */
}

/* CSS for the spacer elements */
.timeline-spacer {
    /* Make width match the key element's width */
    /* Adjust this value if your keys have a different fixed width */
    /* Or calculate dynamically if width is variable */
    width: 80px; /* Example width - MAKE THIS MATCH YOUR KEY WIDTH */
    /* Make margin match the gap between keys */
    margin-right: 8px; /* Should match .timeline-category-keys gap */
    flex-shrink: 0; /* Prevent spacer from shrinking */
    height: 1px; /* Make it virtually invisible */
    background-color: transparent; /* Ensure it's invisible */
    /* border: 1px dotted red; */ /* Uncomment for debugging visibility */
    vertical-align: top;
    display: inline-block; /* Necessary if parent isn't flex, but it is */
    box-sizing: border-box;
}

/* Optional: Style for item being dragged */
.timeline-keys.is-dragging {
    border: 2px solid yellow;
    opacity: 0.5;
}

/* Add relative positioning to the main container */
.timeline-categories {
    position: relative; /* Positioning context for absolute keys */
    /* min-height will be set by JS */
    /* min-width might also be set by JS if horizontal scroll is desired */
    /* border: 1px solid cyan; */ /* For debugging layout */
}

.timeline-keys {
    /* display: inline-flex; */ /* Replaced by absolute */
    position: absolute; /* <<< KEY CHANGE */

    /* Set dimensions explicitly - crucial for positioning */
    width: 110px; /* <<< MUST MATCH keyWidth in JS */
    height: 32px; /* <<< EXAMPLE HEIGHT, adjust if needed */

    /* Use Flex *within* the absolute key for icon/text alignment */
     display: flex;
     align-items: center;
}

/* Add styles for keys that couldn't be processed */
.timeline-keys.invalid-frame-id {
    border: 1px solid red;
    opacity: 0.7;
}
.timeline-keys.uncategorized {
     border: 1px solid orange;
     /* Position uncategorized items somewhere default? */
     top: 0;
     left: -100px; /* Off screen left? */
}

.category-timeline-divider{
    border-right: 1px solid #2b2b2b;
    position: absolute;
    left: 4em;
    top: 0;
    z-index: 3424342;
    height: 90%;
    width: 3px;
}

.category-timeline-divider::before{
    content: "";
    position: absolute;
    right: 6px;
    display: flex;
    border-right: 1px solid #0e0e0e;
    width: 10px;
    height: 100%;
    position: relative;
}

.timeline-category-actions{
    display: flex;
    align-items: center;
    width: 100px;
    margin-top: 0.5em;
    gap: .5em;
    position: absolute;
    left: 1em;
    /* bottom: -2em; */
}

.timeline-category-actions svg{
    width: 17px;
}

.lock-icon{
    position: relative;
    top: -.2em;
}

.timeline-keys{
    margin-top: 19px !important;
    left: 96px;
}

/* Ensure the container allows absolute positioning */
.timeline-categories {
    position: relative; /* Crucial for absolute positioning of children */
    /* Add your existing styles like overflow, min-height, min-width */
    overflow-x: auto;
    overflow-y: hidden; /* Or visible/auto depending on layout */
}

.timeline-keys {
    cursor: grab; /* Indicate draggable possibility */
    /* Optional: Add transitions for smoother repositioning *after* drop */
    /* The transition is disabled during drag by the JS */
    user-select: none; /* Prevent text selection during drag attempt */
    -webkit-user-drag: none; /* Prevent native image dragging */
    box-sizing: border-box; /* Ensure padding/border are included in width */
}

.timeline-keys.is-dragging {
    cursor: grabbing !important; /* Indicate dragging state */
    opacity: 0.7;             /* Make it slightly transparent */
    /* transition: none; /* JS now handles disabling transition */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Add shadow for visual lift */
}

/* Add or ensure this CSS is present */
.timeline-item-dragging {
    opacity: 0.7;
    cursor: grabbing !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    /* z-index is handled by JS */
}

.timeline-drop-placeholder {
    position: absolute;
    height: 45px; /* Adjust to match item height + padding */
    width: 4px;  /* Thin bar */
    background-color: #4CAF50; /* Green indicator */
    z-index: 50; /* Below dragged item, above others */
    transition: left 0; /* Smooth transition for placeholder */
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.7);
    display: none; /* Hidden by default */
}

/* Optional: Indicate Target is not draggable */
.timeline-keys.timeline-target {
    /* cursor: not-allowed; */
}

.timeline-categories{
    min-width: 0 !important;
    max-height: 100px;
    min-height: 172px !important;
}

/* Add this to your stylesheet */
.timeline-categories.is-overflowing {
    /* Apply your desired styles when content overflows */
    min-width: 0 !important; /* Might need !important to override inline min-width */
    max-width: 97% !important; /* Might need !important */
    max-height: 172px !important;
    overflow-x: auto; /* Enable horizontal scrolling */
    /* Add any other styles needed for the overflowing state */
  }

  /* Style for the timeline item that was last modified/moved */
.timeline-keys.timeline-item-last-modified {
    /* Example: Add a distinct outline */
    outline: 2px solid #ffcc00 !important; /* Bright yellow, use !important to override other outlines if needed */
    outline-offset: 1px; /* Small offset so it doesn't overlap the item's border */
}

/* Ensure it overrides the default outline */
.timeline-keys.timeline-item-last-modified.timeline-active {
    /* Keep the last-modified style even when it's the active (green outline) item */
    outline: 2px solid #ffcc00 !important;
    outline-offset: 1px;
}

.minimizeTimelineBtn{
    width: 20px;
    position: absolute;
    right: -10px;
    cursor: pointer;
    z-index: 923232;
}

.toggleCategoryRow{
    cursor: pointer;
}

.timeline-key-inactive{
    opacity: 0.5;
}

.closeTaskWindow{
    display: none !important;
}

.frames-game-src-img{
    cursor: pointer;
}

/* World Objects Container */
/* World Objects Container */
.wo-container {
    background-color: #2C2F3B;
    border-radius: 8px;
    padding: 20px;
    width: calc(100% - 40px);
    max-width: 1300px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000234324240;
    max-height: 90vh;
    display: none; /* JS shows this */
    flex-direction: column;
    color: #E0E0E0;
}
.wo-container::-webkit-scrollbar { width: 8px; }
.wo-container::-webkit-scrollbar-track { background: #2C2F3B; border-radius: 8px; }
.wo-container::-webkit-scrollbar-thumb { background: #4A4E5F; border-radius: 8px; }
.wo-container::-webkit-scrollbar-thumb:hover { background: #5A5E6F; }

/* View Switcher Tabs */
.wo-view-switcher {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #4A4E5F;
    flex-wrap: wrap;
}
.wo-view-tab {
    background: none; border: none;
    color: #A0A4B8; padding: 10px 15px;
    cursor: pointer; font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    outline: none; white-space: nowrap;
}
.wo-view-tab:hover, .wo-view-tab:focus { color: #FFFFFF; }
.wo-view-tab.active { color: #76c7c0; border-bottom-color: #76c7c0; }

/* Controls: Search and Filter */
.wo-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 8px;
    background-color: #353945;
    border-radius: 6px;
}
.wo-search-input {
    padding: 8px 12px; border-radius: 5px;
    border: 1px solid #4A4E5F; background-color: #2C2F3B;
    color: #E0E0E0; font-size: 0.85rem;
    flex-grow: 1; margin-right: 10px; outline: none;
}
.wo-search-input::placeholder { color: #A0A4B8; }
.wo-search-input:focus { border-color: #76c7c0; }
.wo-filter-container { display: flex; align-items: center; color: #A0A4B8; }
.wo-filter-container label { margin-right: 8px; font-size: 0.8rem; white-space: nowrap; }
.wo-game-filter {
    padding: 8px 12px; border-radius: 5px;
    border: 1px solid #4A4E5F; background-color: #2C2F3B;
    color: #E0E0E0; font-size: 0.85rem;
    min-width: 130px; outline: none;
}
.wo-game-filter:focus { border-color: #76c7c0; }

/* Header Row Styling */
.wo-header-row {
    display: flex; align-items: center;
    padding: 0 10px 12px 10px;
    margin-bottom: 5px;
    border-bottom: 2px solid #4A4E5F;
    font-size: 0.7rem;
    color: #A0A4B8; text-transform: uppercase; font-weight: 600;
    position: relative;
}
/* Individual header items - default to display:flex as they are children of a flex container */
.wo-header-item {
    padding: 0 6px;
    text-align: left; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

/* List Area for scrollable content */
.wo-list-area {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0 10px;
    max-height: 344px;
}
/* Base row styling */
.wo-user-row, .wo-moderation-item, .wo-message-item {
    display: flex; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #3A3D4A;
    min-height: 45px;
}
.wo-user-row:last-child, .wo-moderation-item:last-child, .wo-message-item:last-child { border-bottom: none; }

/* Data cells within rows - default to display:flex as they are children of a flex container */
.wo-user-row > div, .wo-moderation-item > div, .wo-message-item > div {
    padding: 0 6px;
    display: flex;
    align-items: center;
}

/* --- Base Column Flex Basis (Inspired by your working CSS for My Objects like view) --- */
.wo-header-item.wo-name, .wo-user-row .wo-user-info { flex-basis: 28%; min-width: 150px; }
.wo-header-item.wo-game, .wo-user-row .wo-game-data { flex-basis: 18%; min-width: 100px; }
.wo-header-item.wo-date-added, .wo-user-row .col-date-added { flex-basis: 15%; text-align: center; justify-content: center; min-width: 90px;}
.wo-header-item.wo-last-updated, .wo-user-row .col-last-updated { flex-basis: 15%; text-align: center; justify-content: center; min-width: 90px;}
.wo-header-item.wo-status, .wo-user-row .wo-status-selector { flex-basis: 12%; text-align: center; justify-content: center; min-width: 100px;}
.wo-header-item.wo-actions, .wo-user-row .wo-action-items-cell { flex-basis: 12%; text-align: center; justify-content: center; min-width: 80px;}

/* Conditional Columns - HIDDEN BY DEFAULT, shown by view-specific rules */
/* Headers */
.wo-header-item.wo-uploader,
.wo-header-item.wo-visibility, /* Visibility is conditional on view */
.wo-header-item.wo-submission-date,
.wo-header-item.wo-requested-visibility,
.wo-header-item.wo-moderation-actions,
.wo-header-item.wo-message-subject,
.wo-header-item.wo-message-date,
.wo-header-item.wo-message-status,
.wo-header-item.wo-actions.message-actions {
    display: none;
}
/* Data Cells */
.wo-user-row .wo-data-uploader, .wo-moderation-item .wo-item-uploader,
.wo-user-row .wo-data-visibility, /* Visibility cell is conditional */
.wo-moderation-item .wo-item-submission-date,
.wo-moderation-item .wo-item-requested-visibility,
.wo-moderation-item .wo-item-mod-actions,
.wo-message-item .wo-message-subject-cell,
.wo-message-item .wo-message-date-cell,
.wo-message-item .wo-message-status-cell,
.wo-message-item .wo-message-actions-cell {
    display: none;
}

/* Flex basis for these conditional columns WHEN they are shown */
.wo-uploader, .wo-data-uploader, .wo-item-uploader { flex-basis: 15%; min-width: 100px; }
.wo-visibility, .wo-data-visibility { flex-basis: 13%; text-align: center; justify-content: center; min-width: 110px;}
.wo-submission-date, .wo-item-submission-date { flex-basis: 15%; text-align: center; justify-content: center; min-width: 90px; }
.wo-requested-visibility, .wo-item-requested-visibility { flex-basis: 15%; text-align: center; justify-content: center; min-width: 100px; }
.wo-moderation-actions, .wo-item-mod-actions { flex-basis: 20%; text-align: center; justify-content: center; min-width: 130px; gap: 5px; }
.wo-message-subject, .wo-message-subject-cell { flex-basis: 40%; min-width: 150px; }
.wo-message-date, .wo-message-date-cell { flex-basis: 20%; text-align: center; justify-content: center; min-width: 90px; }
.wo-message-status, .wo-message-status-cell { flex-basis: 20%; text-align: center; justify-content: center; min-width: 100px; }
.wo-actions.message-actions, .wo-message-actions-cell { flex-basis: 20%; text-align: center; justify-content: center; min-width: 80px;}


/* --- View-Specific Column Visibility & Flex Adjustments --- */

/* Public View */
.wo-container.view-public .wo-header-item.wo-uploader, .wo-container.view-public .wo-user-row .wo-data-uploader,
.wo-container.view-public .wo-header-item.wo-date-added, .wo-container.view-public .wo-user-row .col-date-added { /* Date Added is part of base, ensure it's shown */
    display: flex !important;
}
/* Explicitly hide columns not for public view */
.wo-container.view-public .wo-header-item.wo-last-updated, .wo-container.view-public .wo-user-row .col-last-updated,
.wo-container.view-public .wo-header-item.wo-status, .wo-container.view-public .wo-user-row .wo-status-selector,
.wo-container.view-public .wo-header-item.wo-visibility, .wo-container.view-public .wo-user-row .wo-data-visibility {
    display: none !important;
}
/* Flex for Public View (Name, Game, Uploader, Date Added, Actions are visible) */
.wo-container.view-public .wo-header-item.wo-name, .wo-container.view-public .wo-user-row .wo-user-info { flex-basis: 30%; }
.wo-container.view-public .wo-header-item.wo-game, .wo-container.view-public .wo-user-row .wo-game-data { flex-basis: 20%; }
.wo-container.view-public .wo-header-item.wo-uploader, .wo-container.view-public .wo-user-row .wo-data-uploader { flex-basis: 20%; }
.wo-container.view-public .wo-header-item.wo-date-added, .wo-container.view-public .wo-user-row .col-date-added { flex-basis: 15%; }
.wo-container.view-public .wo-header-item.wo-actions, .wo-container.view-public .wo-user-row .wo-action-items-cell { flex-basis: 15%; }

/* My Objects View - All base columns + Visibility should be visible */
.wo-container.view-my-objects .wo-header-item.wo-visibility, .wo-container.view-my-objects .wo-user-row .wo-data-visibility {
    display: flex !important; /* CRITICAL: Ensure Visibility column is shown */
}
/* Ensure base columns (Name, Game, Date Added, Last Updated, Status, Actions) are visible if not overridden */
.wo-container.view-my-objects .wo-header-item.wo-name, .wo-container.view-my-objects .wo-user-row .wo-user-info,
.wo-container.view-my-objects .wo-header-item.wo-game, .wo-container.view-my-objects .wo-user-row .wo-game-data,
.wo-container.view-my-objects .wo-header-item.wo-date-added, .wo-container.view-my-objects .wo-user-row .col-date-added,
.wo-container.view-my-objects .wo-header-item.wo-last-updated, .wo-container.view-my-objects .wo-user-row .col-last-updated,
.wo-container.view-my-objects .wo-header-item.wo-status, .wo-container.view-my-objects .wo-user-row .wo-status-selector,
.wo-container.view-my-objects .wo-header-item.wo-actions, .wo-container.view-my-objects .wo-user-row .wo-action-items-cell {
    display: flex !important; /* Re-affirm display for base columns */
}
/* Explicitly hide columns not for My Objects view */
.wo-container.view-my-objects .wo-header-item.wo-uploader, .wo-container.view-my-objects .wo-user-row .wo-data-uploader {
    display: none !important;
}
/* Flex for My Objects View (Name, Game, Date Added, Last Updated, Visibility, Status, Actions are visible) */
.wo-container.view-my-objects .wo-header-item.wo-name, .wo-container.view-my-objects .wo-user-row .wo-user-info { flex-basis: 22%; }
.wo-container.view-my-objects .wo-header-item.wo-game, .wo-container.view-my-objects .wo-user-row .wo-game-data { flex-basis: 13%; }
.wo-container.view-my-objects .wo-header-item.wo-date-added, .wo-container.view-my-objects .wo-user-row .col-date-added { flex-basis: 11%; }
.wo-container.view-my-objects .wo-header-item.wo-last-updated, .wo-container.view-my-objects .wo-user-row .col-last-updated { flex-basis: 11%; }
.wo-container.view-my-objects .wo-header-item.wo-visibility, .wo-container.view-my-objects .wo-user-row .wo-data-visibility { flex-basis: 13%; }
.wo-container.view-my-objects .wo-header-item.wo-status, .wo-container.view-my-objects .wo-user-row .wo-status-selector { flex-basis: 12%; }
.wo-container.view-my-objects .wo-header-item.wo-actions, .wo-container.view-my-objects .wo-user-row .wo-action-items-cell { flex-basis: 18%; }


/* Moderation View */
/* Show these specific headers and their corresponding data cells */
.wo-container.view-moderation .wo-header-item.wo-name, .wo-container.view-moderation .wo-moderation-item .wo-item-name,
.wo-container.view-moderation .wo-header-item.wo-game, .wo-container.view-moderation .wo-moderation-item .wo-item-game,
.wo-container.view-moderation .wo-header-item.wo-uploader, .wo-container.view-moderation .wo-moderation-item .wo-item-uploader,
.wo-container.view-moderation .wo-header-item.wo-submission-date, .wo-container.view-moderation .wo-moderation-item .wo-item-submission-date,
.wo-container.view-moderation .wo-header-item.wo-requested-visibility, .wo-container.view-moderation .wo-moderation-item .wo-item-requested-visibility,
.wo-container.view-moderation .wo-header-item.wo-moderation-actions, .wo-container.view-moderation .wo-moderation-item .wo-item-mod-actions {
    display: flex !important;
}
/* Hide all other common headers/cells */
.wo-container.view-moderation .wo-header-item.wo-date-added, .wo-container.view-moderation .wo-header-item.wo-last-updated,
.wo-container.view-moderation .wo-header-item.wo-visibility, .wo-container.view-moderation .wo-header-item.wo-status,
.wo-container.view-moderation .wo-header-item.wo-actions:not(.wo-moderation-actions) { display: none !important; }
/* Flex for Moderation View */
.wo-container.view-moderation .wo-header-item.wo-name, .wo-container.view-moderation .wo-moderation-item .wo-item-name { flex-basis: 25%; }
.wo-container.view-moderation .wo-header-item.wo-game, .wo-container.view-moderation .wo-moderation-item .wo-item-game { flex-basis: 15%; }
.wo-container.view-moderation .wo-header-item.wo-uploader, .wo-container.view-moderation .wo-moderation-item .wo-item-uploader { flex-basis: 15%; }
.wo-container.view-moderation .wo-header-item.wo-submission-date, .wo-container.view-moderation .wo-moderation-item .wo-item-submission-date { flex-basis: 15%; }
.wo-container.view-moderation .wo-header-item.wo-requested-visibility, .wo-container.view-moderation .wo-moderation-item .wo-item-requested-visibility { flex-basis: 15%; }
.wo-container.view-moderation .wo-header-item.wo-moderation-actions, .wo-container.view-moderation .wo-moderation-item .wo-item-mod-actions { flex-basis: 15%; }


/* Messages View */
.wo-container.view-messages .wo-header-item.wo-message-subject, .wo-container.view-messages .wo-message-item .wo-message-subject-cell,
.wo-container.view-messages .wo-header-item.wo-message-date, .wo-container.view-messages .wo-message-item .wo-message-date-cell,
.wo-container.view-messages .wo-header-item.wo-message-status, .wo-container.view-messages .wo-message-item .wo-message-status-cell,
.wo-container.view-messages .wo-header-item.wo-actions.message-actions, .wo-container.view-messages .wo-message-item .wo-message-actions-cell {
    display: flex !important;
}
/* Hide all other common headers/cells */
.wo-container.view-messages .wo-header-item.wo-name, .wo-container.view-messages .wo-header-item.wo-game,
.wo-container.view-messages .wo-header-item.wo-uploader, .wo-container.view-messages .wo-header-item.wo-date-added,
.wo-container.view-messages .wo-header-item.wo-last-updated, .wo-container.view-messages .wo-header-item.wo-visibility,
.wo-container.view-messages .wo-header-item.wo-status, .wo-container.view-messages .wo-header-item.wo-submission-date,
.wo-container.view-messages .wo-header-item.wo-requested-visibility, .wo-container.view-messages .wo-header-item.wo-moderation-actions,
.wo-container.view-messages .wo-header-item.wo-actions:not(.message-actions) { display: none !important; }
/* Flex for Messages View */
.wo-container.view-messages .wo-header-item.wo-message-subject, .wo-container.view-messages .wo-message-item .wo-message-subject-cell { flex-basis: 45%; }
.wo-container.view-messages .wo-header-item.wo-message-date, .wo-container.view-messages .wo-message-item .wo-message-date-cell { flex-basis: 20%; }
.wo-container.view-messages .wo-header-item.wo-message-status, .wo-container.view-messages .wo-message-item .wo-message-status-cell { flex-basis: 20%; }
.wo-container.view-messages .wo-header-item.wo-actions.message-actions, .wo-container.view-messages .wo-message-item .wo-message-actions-cell { flex-basis: 15%; }
.wo-message-item .wo-message-content {
    width: 100%; padding: 10px; background-color: #353945;
    border-radius: 4px; margin-top: 5px; font-size: 0.85rem;
    display: none; /* Toggle with JS */
}


/* Cell Content Styling (General) - Copied from your working CSS, ensure classes match */
.wo-user-info { /* This is a cell div */
    /* flex-basis is set by view-specific rules */
    align-items: center; overflow: hidden;
}
.wo-avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 10px; object-fit: cover; flex-shrink: 0; }
.wo-user-name-game-container { display: flex; flex-direction: column; overflow: hidden; } /* Not strictly needed if name is direct child */
.wo-user-name { font-weight: 600; font-size: 0.85rem; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-game-data { font-size: 0.75rem; color: #A0A4B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-data-uploader { font-size: 0.75rem; color: #A0A4B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-date-added, .col-last-updated { font-size: 0.75rem; color: #B0B4C8; } /* These are cell divs */

/* Status Selector, Visibility Toggle, Action Buttons (These are cell divs or wrapped in cell divs) */
.wo-status-selector { justify-content: center; }
.wo-custom-select-wrapper { position: relative; display: inline-block; }
.wo-status-dropdown { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; border: none; }
.wo-custom-select-trigger {
    background-color: #3A3D4A; color: #E0E0E0; padding: 6px 8px;
    border-radius: 4px; font-size: 0.75rem; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    min-width: 80px; transition: background-color 0.2s ease;
}
.wo-custom-select-trigger:hover { background-color: #4A4E5F; }
.wo-chevron-down { width: 12px; height: 12px; margin-left: 5px; stroke: #A0A4B8; }

.wo-data-visibility { justify-content: center; flex-wrap: nowrap; }
.wo-visibility-switch { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; }
.wo-visibility-switch input { opacity: 0; width: 0; height: 0; }
.wo-visibility-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #5A5E6F; transition: .3s; border-radius: 20px; }
.wo-visibility-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
.wo-visibility-switch input:checked + .wo-visibility-slider { background-color: #76c7c0; }
.wo-visibility-switch input:focus + .wo-visibility-slider { box-shadow: 0 0 1px #76c7c0; }
.wo-visibility-switch input:checked + .wo-visibility-slider:before { transform: translateX(20px); }
.wo-visibility-label { font-size: 0.7rem; margin-left: 6px; color: #A0A4B8; white-space: nowrap; }

.wo-action-items-cell { justify-content: center; gap: 6px; }
.wo-action-btn, .wo-mod-action-btn {
    background: none; border: 1px solid #4A4E5F;
    color: #A0A4B8; cursor: pointer; padding: 5px 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; font-size: 0.7rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.wo-action-btn:hover, .wo-mod-action-btn:hover { background-color: #4A4E5F; color: #FFFFFF; border-color: #6A6E7F; }
.wo-action-icon { width: 16px; height: 16px; transition: color 0.2s ease; }
.wo-download-icon-svg { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }

.wo-mod-action-btn.approve { border-color: #38A169; color: #38A169; }
.wo-mod-action-btn.approve:hover { background-color: #38A169; color: white; }
.wo-mod-action-btn.deny { border-color: #E53E3E; color: #E53E3E; }
.wo-mod-action-btn.deny:hover { background-color: #E53E3E; color: white; }

/* Hiding/showing specific action buttons based on view */
.wo-container.view-public .wo-user-row .wo-use-btn { display: none; }
.wo-container.view-public .wo-user-row:not(.is-own-object) .wo-download-btn { display: flex; }
.wo-container.view-public .wo-user-row.is-own-object .wo-download-btn { display: none; }
.wo-container.view-public .wo-user-row.is-own-object .wo-use-btn { display: flex; }

.wo-container.view-my-objects .wo-download-btn { display: none; }
.wo-container.view-my-objects .wo-user-row.is-own-object .wo-use-btn,
.wo-container.view-my-objects .wo-user-row.is-own-object .wo-delete-btn { display: flex; }


/* Close Button for Main Container */
.close_world_objects {
    position: absolute; top: 15px; right: 15px;
    font-size: 22px; font-weight: bold; color: #A0A4B8;
    cursor: pointer; line-height: 1; padding: 5px;
}
.close_world_objects:hover { color: #FFFFFF; }

/* Modal Styles */
.wo-modal {
    display: none; position: fixed; z-index: 10001;
    left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.75);
    align-items: center; justify-content: center;
}
.wo-modal-content {
    background-color: #3A3D4A; margin: auto; padding: 20px;
    border: 1px solid #4A4E5F; border-radius: 8px;
    width: 90%; max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    color: #E0E0E0; position: relative;
}
.wo-modal-close {
    color: #A0A4B8; position: absolute; top: 8px; right: 12px;
    font-size: 24px; font-weight: bold; cursor: pointer;
}
.wo-modal-close:hover, .wo-modal-close:focus { color: #FFFFFF; text-decoration: none; }
.wo-modal h3 {
    margin-top: 0; color: #FFFFFF; border-bottom: 1px solid #4A4E5F;
    padding-bottom: 10px; margin-bottom: 15px; font-size: 1.1rem;
}
.wo-modal p { font-size: 0.9rem; margin-bottom: 8px; }
.wo-modal-input, .wo-modal-textarea {
    width: 100%; padding: 9px 12px; margin-bottom: 15px;
    border: 1px solid #4A4E5F; border-radius: 5px;
    background-color: #2C2F3B; color: #E0E0E0;
    font-size: 0.85rem; outline: none;
}
.wo-modal-textarea { min-height: 80px; resize: vertical; }
.wo-modal-input:focus, .wo-modal-textarea:focus { border-color: #76c7c0; }
.wo-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.wo-modal-button {
    padding: 9px 18px; border: none; border-radius: 5px;
    cursor: pointer; font-size: 0.85rem; font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease; outline: none;
}
.wo-modal-button:active { transform: scale(0.98); }
.wo-modal-button#woUseApplyBtn, .wo-modal-button#woSubmitFeedbackBtn { background-color: #76c7c0; color: #FFFFFF; }
.wo-modal-button#woUseApplyBtn:hover, .wo-modal-button#woSubmitFeedbackBtn:hover { background-color: #63bab1; }
.wo-modal-button-cancel { background-color: #5A5E6F; color: #E0E0E0; }
.wo-modal-button-cancel:hover { background-color: #4A4E5F; }

/* Message Styling */
.wo-message-placeholder, .wo-loading-message, .wo-no-users-message, .wo-error-message, .wo-no-users-message-filtered {
    text-align: center; padding: 25px 20px; color: #A0A4B8; font-size: 0.95rem;
}
.wo-error-message { color: #FF6B6B; }
.wo-info-message { color: #76c7c0; }
.wo-message-item.unread .wo-message-subject-cell a { font-weight: bold; color: #FFF; }
.wo-message-status-cell.status-approved { color: #38A169; font-weight: bold; }
.wo-message-status-cell.status-rejected { color: #E53E3E; font-weight: bold; }
.wo-message-status-cell.status-submitted { color: #D69E2E; }


/* Responsive Adjustments */
@media (max-width: 1024px) {
    .wo-container { max-width: 96%; max-height: 90vh; }
    .wo-container.view-public .wo-header-item.wo-last-updated, .wo-container.view-public .wo-user-row .col-last-updated,
    .wo-container.view-my-objects .wo-header-item.wo-last-updated, .wo-container.view-my-objects .wo-user-row .col-last-updated { display: none !important; }
}
@media (max-width: 768px) {
    .wo-view-tab { padding: 8px 10px; font-size: 0.8rem; }
    .wo-controls-row { flex-direction: column; gap: 8px; align-items: stretch; }
    .wo-search-input { margin-right: 0; }
    .wo-filter-container { justify-content: space-between; }
    .wo-game-filter { flex-grow: 1; }

    /* Hide more columns for smaller screens, then show essential ones per view */
    .wo-header-item.wo-date-added, .wo-user-row .col-date-added,
    .wo-header-item.wo-last-updated, .wo-user-row .col-last-updated,
    .wo-header-item.wo-game, .wo-user-row .wo-game-data,
    .wo-header-item.wo-uploader, .wo-user-row .wo-data-uploader,
    .wo-container.view-my-objects .wo-header-item.wo-visibility, .wo-container.view-my-objects .wo-user-row .wo-data-visibility,
    .wo-container.view-moderation .wo-header-item.wo-game, .wo-container.view-moderation .wo-moderation-item .wo-item-game,
    .wo-container.view-moderation .wo-header-item.wo-uploader, .wo-container.view-moderation .wo-moderation-item .wo-item-uploader,
    .wo-container.view-moderation .wo-header-item.wo-submission-date, .wo-container.view-moderation .wo-moderation-item .wo-item-submission-date,
    .wo-container.view-moderation .wo-header-item.wo-requested-visibility, .wo-container.view-moderation .wo-moderation-item .wo-item-requested-visibility,
    .wo-container.view-messages .wo-header-item.wo-message-date, .wo-container.view-messages .wo-message-item .wo-message-date-cell
     { display: none !important; }

    .wo-user-row, .wo-moderation-item, .wo-message-item { flex-wrap: wrap; padding: 8px 0; }
    .wo-user-row > div, .wo-moderation-item > div, .wo-message-item > div {
         margin-bottom: 6px;
    }
}
@media (max-width: 480px) {
    .wo-container { padding: 8px; padding-top: 55px; }
    .wo-view-switcher { height: 40px; position: fixed; top: 0; left: 0; width: 100%; background-color: #2C2F3B; z-index: 1010; padding: 0 5px; }
    .wo-view-tab { font-size: 0.75rem; padding: 6px 8px; }
    .wo-controls-row { margin-top: 40px; }
    .close_world_objects { top: 8px; right: 8px; font-size: 18px; z-index: 1011;}
    .wo-header-row { display: none !important; }

    .wo-user-row > div, .wo-moderation-item > div, .wo-message-item > div {
        flex-basis: 100% !important; text-align: left !important;
        justify-content: flex-start !important; margin-bottom: 8px; padding: 0 4px !important;
        display: flex !important; /* Ensure all cells are visible for stacking */
    }
    .wo-user-info { margin-bottom: 4px !important; }
    .wo-avatar { width: 28px; height: 28px; }
    .wo-custom-select-trigger, .wo-visibility-switch { width: auto; min-width: 120px; }
    .wo-action-items-cell, .wo-item-mod-actions, .wo-message-actions-cell { gap: 10px; }
    .wo-modal-content { width: 96%; padding: 15px; }
}

#woModerationFeedbackModal{
    position: relative;
}

.wo-message-toggle-details{
    color: #baef65;
}

.wo-message-content p strong{
    font-weight: bold;
}

.wo-moderation-item, .wo-message-status-cell .status-rejected, .wo-message-item {
    font-size: 0.75rem;
    color: #B0B4C8;
}

.wo-message-toggle-details{
    font-size: 0.75rem;
}

.wo-tab-view{
    font-size: 14px;
}

/*
  CSS for styling the world object name editor,
  specifically for the input field's focus state.
*/

/*
  The .wo-name-editor class is the container for the display span,
  the input field, and the save/cancel action buttons.
  Ensure it's positioned relatively if its children (like wo-name-edit-actions)
  are positioned absolutely.
*/
.wo-name-editor {
    position: relative; /* Important if wo-name-edit-actions uses absolute positioning */
    display: flex;      /* Aligns items in a row */
    align-items: center;/* Vertically aligns items in the center */
    width: 100%;        /* Takes the full width of its parent */
}

/*
  The .wo-object-name-input is the text field for editing the object's name.
*/
.wo-object-name-input {
    flex-grow: 1; /* Allows the input to take up available space */
    padding: 6px 8px; /* Comfortable padding inside the input */
    border: 1px solid #555c6f; /* A slightly softer border color than pure black */
    background-color: #2c303a; /* Dark background for the input field */
    color: #e0e0e0;            /* Light text color for readability */
    border-radius: 4px;       /* Rounded corners */
    margin-right: 8px;        /* Space between the input and the action buttons */
    box-sizing: border-box;   /* Ensures padding and border don't add to the width */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transitions for focus */
    width: 87px;
    max-width: 87px;
}

/*
  Style for when the .wo-object-name-input field is focused (clicked into).
  This removes the default browser outline and adds a custom one.
*/
.wo-object-name-input:focus {
    outline: none; /* Removes the default browser outline (e.g., the black border on click) */
    border-color: #76c7c0; /* Changes border color to a highlight color on focus */
    /* Optional: Add a subtle box-shadow for a "glow" effect, enhancing focus visibility */
    box-shadow: 0 0 0 2px rgba(118, 199, 192, 0.3);
}

/*
  Container for the save and cancel buttons during name editing.
*/
.wo-name-edit-actions {
    display: flex; /* Will be toggled to flex by JS */
    align-items: center;
    /* position: absolute; right: 0; top: 50%; transform: translateY(-50%); */ /* Alternative positioning */
}

.wo-name-edit-actions .wo-action-btn {
    padding: 2px 4px; /* Smaller padding for these buttons */
    margin-left: 3px;
    line-height: 1; /* Ensure icons align well */
}
.wo-name-edit-actions .wo-action-btn .wo-action-icon {
    width: 16px; /* Smaller icons for these actions */
    height: 16px;
}

.wo-name-edit-actions .wo-action-btn .wo-action-icon {
    width: 16px;
    height: 16px;
}

/*
  The .wo-object-name-display is the span that shows the object name
  when not in edit mode.
*/
.wo-object-name-display {
    flex-grow: 1; /* Allows the span to take available space */
    padding: 6px 8px; /* Match padding of input for consistent alignment */
    color: #e0e0e0; /* Or your default text color */
    word-break: break-all; /* Prevents long names from breaking layout */
    margin-right: 8px; /* Consistent spacing, same as input */
    font-size: 0.75rem;
}

.timeline-clipped{
    /* width: 354px;
    height: 100%;
    border: 1px solid #000000;
    border-top: none;
    border-bottom: none;
    opacity: 1;
    position: absolute;
    left: 41.8%;
    top: 0em; */
    top: 13px !important;
}

.timeline-clipped::before{
    /* content: "";
    width: 354px;
    height: 100%;
    border: 1px solid #292929;
    border-top: none;
    border-bottom: none;
    opacity: 1;
    position: absolute;
    left: 0px;
    top: 0em; */
}

/* Basic Clip Styling (already partially in your setup) */
.timeline-clipped {
    position: absolute;
    top: 0px;
    bottom: 0px;
    /* background-color: rgba(0, 123, 255, 0.2); /* Default, now set by JS */
    background-color: rgba(0, 123, 255, 0.2);
    border-left: 2px solid rgb(0, 123, 255);
    border-right: 2px solid rgb(0, 123, 255);
    border-top: 2px solid rgb(0, 123, 255);
    border-bottom: 2px solid rgb(0, 123, 255);
    box-sizing: border-box; /* Important for width calculations with borders */
    overflow: hidden; /* To contain label and icon */
}

/* Selected Clip Style */
.timeline-clipped-selected {
    background-color: rgba(0, 123, 255, 0.2);
    border-left: 2px solid rgb(0, 123, 255);
    border-right: 2px solid rgb(0, 123, 255);
    border-top: 2px solid rgb(0, 123, 255);
    border-bottom: 2px solid rgb(0, 123, 255);
}

/* Focused Clip Style (can be combined with selected or override) */
.timeline-clipped-focused {
    /* Example: Thicker border or a distinct outline */
    outline: 2px solid rgb(27 79 48); /* Bright orange outline for focused */
    outline-offset: -2px; /* Place outline inside to avoid size change */
    z-index: 1000; /* Ensure focused clip is visually on top if overlapping */
}

/* Locked Clip Style */
.timeline-clipped-locked {
    /* background-color: rgba(150, 150, 150, 0.2) !important; /* Example locked color from JS */
    /* border-style: dashed; */
}

/* Clip Label Style */
.clip-label {
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 10px;
    color: white;
    pointer-events: none; /* So it doesn't interfere with clicks on the clip */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 25px); /* Adjust based on lock icon size */
}

/* Lock Icon Style */
.clip-lock-icon {
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 10px; /* Adjust as needed */
    pointer-events: none;
    color: #333;
}

/* Context Menu Styling */
#timeline-context-menu {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    padding: 5px 0;
    list-style: none;
    margin: 0;
    min-width: 150px;
}
#timeline-context-menu li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
#timeline-context-menu li:hover {
    background-color: #e9e9e9;
}
#timeline-context-menu li.separator { /* For a list item you make a separator */
    height: 1px;
    background-color: #ddd;
    padding: 0;
    margin: 5px 0;
}

.pin-dropper-arrow, .fixed-start-pin {
    background: linear-gradient(
        180deg,
        #1e3860 0%,      
        #305b98 35%,     
        #2ea7e9 60%,     
        #296fa3 80%,     
        #19345a 100%     
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 2rem;
    position: relative;
    z-index: 10;
    text-shadow:
        0 2px 6px rgba(46,107,153,0.32),
        0 4px 12px rgba(30,56,96,0.28); 
}



#timeline-clip-inprogress {
    /* Styles provided in JS */
}


/* MINIMAL CONTEXT MENU CSS - Add to your stylesheet */
#timeline-context-menu {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    padding: 5px 0;
    list-style: none;
    margin: 0;
    min-width: 180px; /* Adjust as needed */
}
#timeline-context-menu li {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
#timeline-context-menu li:hover {
    background-color: #f0f0f0;
}
#timeline-context-menu li.separator {
    height: 1px;
    background-color: #ddd;
    padding: 0;
    margin: 5px 0;
}

/* General Modal Overlay - uses flex for centering */
#timelineClipModalsOverlay {
    display: none; /* Managed by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Darker overlay */
    z-index: 100234234300 !important; /* High z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Optional: blur background */
}

/* Individual Modal Styling */
.timeline-modal {
    display: none; /* Individual modals also hidden by default */
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    min-width: 320px;
    max-width: 450px; /* Control max width */
    width: 90%; /* Responsive width */
    z-index: 10001; /* Above overlay */
    font-family: Arial, sans-serif; /* Consistent font */
}

.timeline-modal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #2c3e50; /* Darker heading */
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.timeline-modal input[type="text"],
.timeline-modal input[type="number"] {
    width: 100%; /* Full width relative to padding */
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid #ced4da; /* Softer border */
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}
.timeline-modal input[type="text"]:focus,
.timeline-modal input[type="number"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

.timeline-modal div > label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #495057; /* Slightly lighter label text */
    font-weight: 500;
}

.modal-buttons {
    display: flex; /* Use flex for button alignment */
    justify-content: flex-end; /* Align buttons to the right */
    margin-top: 25px;
    gap: 10px; /* Space between buttons */
}

.modal-buttons button {
    padding: 10px 20px; /* More padding */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500; /* Medium weight */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.modal-buttons button:active {
    transform: translateY(1px); /* Slight press effect */
}

.modal-buttons button#renameClipSave,
.modal-buttons button#changeColorSave,
.modal-buttons button#setPropertiesSave {
    background-color: #007bff;
    color: white;
}
.modal-buttons button#renameClipSave:hover,
.modal-buttons button#changeColorSave:hover,
.modal-buttons button#setPropertiesSave:hover {
    background-color: #0056b3;
}

.modal-buttons button.cancel {
    background-color: #6c757d; /* Bootstrap secondary */
    color: white;
}
.modal-buttons button.cancel:hover {
    background-color: #545b62;
}

/* --- Enhanced Clip Styles --- */
.timeline-clipped-locked {
    opacity: 0.65; /* More pronounced opacity for locked */
    cursor: default !important; /* Override grab/ew-resize for locked clips */
}
.timeline-clipped-locked .clip-label {
    font-style: italic;
    color: #eee; /* Lighter label on darker locked bg */
}

.clip-label {
    position: absolute;
    left: 6px;
    top: auto !important; /* Adjusted for better vertical alignment */
    font-size: 11px; /* Slightly larger */
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 28px); /* Adjusted for lock icon */
    line-height: 1.3;
    font-weight: 400;
    left: 8px !important;
    bottom: 6px !important;
    /* right: 6px !important; */
}

.clip-lock-icon {
    position: absolute;
    right: 6px;
    top: 4px; /* Adjusted */
    font-size: 11px;
    pointer-events: none;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* Context Menu Styling (from previous) */
#timeline-context-menu {
    background-color: #fff; /* Brighter white */
    border: 1px solid #dee2e6; /* Softer border */
    border-radius: 6px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Softer shadow */
    padding: 6px 0;
    list-style: none;
    margin: 0;
    min-width: 200px; /* Wider */
    position: absolute;
    z-index: 13434343430010; /* Above modals overlay */
    display: none;
    font-family: Arial, sans-serif;
}
#timeline-context-menu li {
    padding: 10px 18px; /* More padding */
    cursor: pointer;
    font-size: 14px; /* Slightly larger */
    color: #343a40; /* Darker text */
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
#timeline-context-menu li.disabled {
    color: #adb5bd; /* Lighter for disabled */
    cursor: default;
    background-color: transparent !important;
}
#timeline-context-menu li.disabled:hover {
    color: #adb5bd; /* No text color change on hover for disabled */
}
#timeline-context-menu li.separator {
    height: 1px;
    background-color: #e9ecef; /* Lighter separator */
    padding: 0;
    margin: 6px 0;
    cursor: default;
}
#timeline-context-menu li.separator:hover {
    background-color: #e9ecef !important; /* No hover for separator */
}

.timeline-category-keys, .timeline-category-label, .timeline-category-row{
    z-index: 2323232832323222323;
}

.timeline-keys{
    z-index: 2000 !important;
}

#timeline-context-menu{
    background: rgb(20 20 24) !important;
    border: 1px solid rgb(47 42 42) !important;
}

#timeline-context-menu li{
    color: #ffffffc4;
}

#timeline-context-menu li:hover{
    background: #0000004d !important;
    color: #f2f2f2;
}

.separator{
    background: rgb(255 255 255 / 27%) !important;
}

/* --- Existing Modal and Basic Picker Styles (Assumed from previous response, adjust if needed) --- */
.timeline-modal {
    /* Your existing modal styles */
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10001; /* Ensure it's above overlay */
}

#customColorPicker { /* This ID might be deprecated if we use the new layout classes directly */
    /* Styles from previous response if you used this ID for the main container */
}

/* --- New Layout Styles for Color Picker Modal --- */
.color-picker-main-layout {
    display: flex;
    gap: 20px; /* Space between controls and info/preview area */
    margin-bottom: 15px;
    user-select: none;
}

.picker-controls-area {
    display: flex;
    flex-direction: column; /* Stack SV box, Hue, Alpha vertically */
    gap: 10px;
    align-items: center; /* Center sliders if they are narrower */
}

.picker-info-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Allow this area to take remaining space if needed */
}

.picker-info-area h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}

/* --- SV Box, Hue, Alpha Sliders (Styles from previous response, ensure they fit new layout) --- */
.color-sv-box {
    width: 200px;
    height: 150px;
    position: relative;
    cursor: crosshair;
    border: 1px solid #ccc;
    /* Gradients will be set by JS */
}

.color-hue-slider {
    width: 25px; /* Slightly wider for easier interaction */
    height: 150px;
    position: relative;
    cursor: pointer;
    border: 1px solid #ccc;
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.color-alpha-slider {
    width: 200px; /* Horizontal alpha slider */
    height: 25px; /* Slightly taller for easier interaction */
    position: relative;
    cursor: pointer;
    border: 1px solid #ccc;
    /* Checkerboard and gradient overlay by JS */
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
                      linear-gradient(-45deg, #ccc 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #ccc 75%),
                      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.color-picker-indicator {
    width: 12px; /* Slightly larger indicators */
    height: 12px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.2);
    pointer-events: none;
}

.hue-indicator { /* Vertical slider indicator */
    width: 100%;
    height: 4px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    transform: translateY(-50%); /* Center vertically on its 'top' position */
}

.alpha-indicator { /* Horizontal slider indicator */
    width: 4px;
    height: 100%;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    transform: translateX(-50%); /* Center horizontally on its 'left' position */
}

/* --- Swatch and Input Area (Styles from previous response) --- */
.color-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.color-swatch-preview {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
                      linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    padding: 2px; /* Optional: to make inner div slightly smaller */
    box-sizing: border-box;
}
.color-swatch-preview > div {
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.2); /* Inner shadow for depth */
}

#changeColorInput {
    flex-grow: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* --- Clip Preview Styles --- */
.clip-preview-container {
    padding: 10px;
    background-color: #f0f0f0; /* Light background for the container */
    border: 1px dashed #ccc;
    border-radius: 4px;
    display: flex; /* Center the preview clip */
    justify-content: center;
    align-items: center;
    min-height: 60px; /* Ensure some space */
}

.timeline-clipped-preview {
    /* Mimic your .timeline-clipped, but perhaps smaller or with fixed dimensions */
    position: relative; /* For absolute positioning of label/icon if needed */
    box-sizing: border-box;
    width: 150px; /* Example fixed width for preview */
    height: 40px; /* Example fixed height */
    border: 1px solid #555; /* Default border, background set by JS */
    border-radius: 3px; /* Match your clip style */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Label on left, icon on right */
    padding: 0 8px;
    overflow: hidden;
    color: white; /* Assuming label text is often light on dark clips */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.clip-label-preview {
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-lock-icon-preview {
    font-size: 0.8em;
    margin-left: 5px;
}


/* Normal state for the timeline element */
.timeline-clipped {
    outline: 2px solid #0b4e97 !important; /* Greenish outline */
    border: 2px solid transparent !important;     /* Transparent border */
    /* Ensure background is what you expect for normal state, e.g., transparent or a specific color */
    background-color: transparent;
    outline-offset: -2px;
    background-color: rgb(0 123 255 / 18%) !important;
  }
  
  /* Focused or selected state for the timeline element */
  .timeline-clipped-focused,
  .timeline-clipped-selected {
    background-color: rgba(0, 123, 255, 0.3) !important; /* Semi-transparent blue background */
    border: 2px solid transparent !important;            /* Transparent border */
    outline: 2px solid rgb(0, 123, 255) !important;      /* Blue outline */
    /* outline-offset is not typically needed if the border is transparent,
       but can be kept if you have specific layout reasons.
       For simplicity, I'll comment it out. */
    /* outline-offset: -1px; */
    outline-offset: -2px;
    z-index: 1000 !important;
  }
  
.timeline-keys{

}

/* Keyframes to animate the custom property */
@keyframes border-spin {
    to {
      --gradient-angle: 360deg;
    }
  }
  
  .visionTimeLineKey {
    border: 1px solid transparent;
    transition: .2s ease-in-out;
    /* --- Background Layers --- */
    background:
      /* 1. Original Inner Background (clipped to padding) */
      linear-gradient(145deg, #6056ff, #6056ff) padding-box,
      /* 2. Animated Gradient for Border (clipped to border) */
      conic-gradient(from var(--gradient-angle),
                     #8a82ff, #50a0ff, #3b32f9, #a040ff, #6056ff, #8a82ff
                     ) border-box;
  
    /* Define how backgrounds are clipped and positioned */
    background-clip: padding-box, border-box;
    background-origin: border-box;
  
    color: #f9f9f9;
  
    /* --- Your ORIGINAL box-shadow restored --- */
    /* Test this visually - inset shadows might conflict with the animated border */
    box-shadow: 0 9px 13px -5px #6056ff66,
                0 2px 2px 0 #6056ff40,
                inset 0 -2px 0 0 #3b32f980, /* Might be obscured/conflict */
                inset 0 0 0 1px #fff3,      /* Might be obscured/conflict */
                inset 0 7px 12px 0 #943bff; /* Will likely overlay button content */
  
    font-weight: 500;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: static;
    padding: 10px 20px; /* Your padding */
    animation: border-spin 4s linear infinite !important; /* Your animation */
    background: linear-gradient(145deg, #6056ff, #6056ff)  !important;
    color: #f9f9f9;
  }
  
  /* Optional: Style for hover/focus states */
  .visionTimeLineKey:hover {
    transform: translateY(-2px);
    /* You might want to adjust the hover shadow too if keeping inset shadows */
    box-shadow: 0 12px 16px -5px #6056ff88,
                0 4px 4px 0 #6056ff50,
                inset 0 -2px 0 0 #3b32f980, /* Keep consistent */
                inset 0 0 0 1px #fff3,
                inset 0 7px 12px 0 #943bff;
  }
  
  /* --- Global Font & Variables (Refined) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --panel-font: 'Inter', sans-serif;
    --panel-bg-primary: #1a1d24;       /* Deep, dark primary background */
    --panel-bg-secondary: #232730;    /* Slightly lighter for cards/sections */
    --panel-border-color: #363b49;    /* Softer borders */
    --header-footer-bg: #16181e;      /* Darkest for header/footer if any */

    --text-primary: #e1e8f0;          /* Bright, readable primary text */
    --text-secondary: #9ba6b9;        /* Softer secondary text for descriptions */
    --text-placeholder: #6c788e;      /* For hints and placeholders */

    --accent-primary: #00aeff;        /* Vibrant blue accent */
    --accent-primary-hover: #0095e0;  /* Darker shade for hover */
    --accent-primary-active: #007acc; /* Even darker for active/pressed */

    --accent-danger: #ff4d4d;         /* Clear danger/delete color */
    --accent-danger-hover: #e03c3c;

    --input-bg: #16181e;              /* Background for input fields */
    --input-border: #363b49;
    --input-border-focus: var(--accent-primary);

    --card-shadow: rgba(0, 0, 0, 0.2);
    --control-border-radius: 6px;     /* Consistent border radius for controls */
    --panel-border-radius: 12px;      /* Main panel rounding */
}

/* --- Main Settings Panel --- */
.userBotClientSettingsGUI-v2 {
    font-family: var(--panel-font);
    background-color: var(--panel-bg-primary);
    border: 1px solid var(--panel-border-color);
    border-radius: var(--panel-border-radius);
    width: 820px; /* Slightly more width */
    max-width: 95vw;
    color: var(--text-primary);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9934344439999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    max-height: 600px;
    flex-direction: column;
    overflow: hidden;
}

/* --- Panel Header --- */
.settings-panel-v2-header {
    background-color: var(--header-footer-bg);
    padding: 22px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--panel-border-color);
    border-top-left-radius: var(--panel-border-radius);
    border-top-right-radius: var(--panel-border-radius);
}

.settings-panel-v2-title {
    font-size: 1.5em; /* Slightly reduced for a sleeker look */
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.settings-panel-v2-close { /* Also targets .closeUserBotSettings if present */
    font-size: 1.8em;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.5); /* Added playful transform */
    padding: 5px;
    line-height: 1;
}
.settings-panel-v2-close:hover {
    color: var(--accent-primary);
    transform: rotate(180deg) scale(1.1);
}

/* --- Panel Tabs --- */
.settings-panel-v2-tabs {
    display: flex;
    padding: 0 25px; /* Slightly less padding */
    background-color: var(--header-footer-bg);
    border-bottom: 1px solid var(--panel-border-color);
    box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,0.1); /* Subtle inner shadow */
}

.settings-panel-v2-tab {
    background-color: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 16px 22px;
    margin-right: 8px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease, border-color 0.25s ease;
    border-bottom: 3px solid transparent;
    text-transform: uppercase; /* Uppercase tabs */
    letter-spacing: 0.5px;
}
.settings-panel-v2-tab:hover {
    color: var(--text-primary);
}
.settings-panel-v2-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

/* --- Scrollable Content Area --- */
.settings-panel-v2-content {
    padding: 25px 30px 30px 30px; /* Consistent padding */
    overflow-y: auto;
    flex-grow: 1;
    background-color: var(--panel-bg-primary);
    border-bottom-left-radius: var(--panel-border-radius);
    border-bottom-right-radius: var(--panel-border-radius);

}
/* Custom Scrollbar */
.settings-panel-v2-content::-webkit-scrollbar { width: 8px; }
.settings-panel-v2-content::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 10px; }
.settings-panel-v2-content::-webkit-scrollbar-thumb { background: #4a5263; border-radius: 10px; border: 2px solid var(--input-bg); }
.settings-panel-v2-content::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* --- Individual Setting Group --- */
.setting-group-v2 {
    background-color: var(--panel-bg-secondary);
    border: 1px solid var(--panel-border-color);
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 25px;
    box-shadow: 0 5px 15px var(--card-shadow);
    transition: border-color 0.3s ease;
}
.setting-group-v2:last-child { margin-bottom: 10px; }
.setting-group-v2:hover {
    border-left: 3px solid var(--accent-primary); /* Accent on hover */
    /* padding-left: 22px; remove if causes layout shift with border */
}


.setting-group-v2-header { margin-bottom: 20px; }
.setting-group-v2-title-icon { display: flex; align-items: center; margin-bottom: 8px; }
.setting-group-v2-title-icon .icon-placeholder {
    font-size: 1.5em; /* Larger icons */
    color: var(--accent-primary);
    margin-right: 12px;
    line-height: 1;
    width: 24px; /* Give icon fixed width */
    text-align: center;
}
.setting-group-v2 h3 {
    font-size: 1.2em; /* Harmonized font size */
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.setting-group-v2 p {
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
.setting-group-v2-hint {
    font-size: 0.85em;
    color: var(--text-placeholder);
    margin-top: 15px;
    display: block;
    font-style: italic;
}

/* --- Buttons --- */
.settings-button-group { display: flex; align-items: center; gap: 12px; }
.btn-v2 {
    padding: 10px 22px; /* More horizontal padding */
    font-size: 0.9em;
    font-weight: 500;
    border-radius: var(--control-border-radius);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
    border: 1px solid transparent;
    text-align: center;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}
.btn-v2:active { transform: translateY(1px) scale(0.98); }

.btn-v2-primary { background-color: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.btn-v2-primary:hover { background-color: var(--accent-primary-hover); border-color: var(--accent-primary-hover); box-shadow: 0 4px 12px rgba(0, 174, 255, 0.2); }

.btn-v2-secondary { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); }
.btn-v2-secondary:hover { background-color: #2c313c; border-color: #50586a; }

.btn-v2-danger { background-color: var(--accent-danger); border-color: var(--accent-danger); color: #fff; }
.btn-v2-danger:hover { background-color: var(--accent-danger-hover); border-color: var(--accent-danger-hover); box-shadow: 0 4px 12px rgba(255, 77, 77, 0.2); }

/* Handles .tab-btn-state-inactive for any .btn-v2 */
.btn-v2.tab-btn-state-inactive {
    opacity: 0.5;
    cursor: not-allowed !important;
    background-color: #2c313c !important;
    border-color: #3a4049 !important;
    color: var(--text-placeholder) !important;
    box-shadow: none !important;
    transform: none !important;
}

.character_image_source { /* JS uses this class */
    border: 2px solid var(--input-border);
    border-radius: var(--control-border-radius);
    background-color: var(--input-bg);
    object-fit: cover;
    margin-left: auto; /* Push to the right if in flex group */
}

/* --- Radio Button Options --- */
.radio-option-group-v2 { display: flex; flex-direction: column; gap: 12px; }
.radio-label-v2 {
    background-color: transparent;
    border: 1px solid var(--input-border);
    padding: 16px 20px;
    border-radius: var(--control-border-radius);
    cursor: pointer;
    display: block; /* Change to block for full width clicking */
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.radio-label-v2:hover {
    border-color: var(--accent-primary);
    background-color: rgba(0, 174, 255, 0.03); /* Very subtle hover */
}
.radio-label-v2 input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; } /* Hide actual radio */

.radio-label-v2-text {
    font-size: 1em;
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 32px; /* Space for custom radio */
}
.radio-label-v2-text::before { /* Custom radio outer circle */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--input-border);
    background-color: var(--panel-bg-secondary);
    transition: border-color 0.2s ease;
}
.radio-label-v2-text::after { /* Custom radio inner dot */
    content: '';
    position: absolute;
    left: 5px; /* (20px width + 2px border*2 - 10px dot width) / 2 + 2px border */
    top: 50%;
    transform: translateY(-50%) scale(0); /* Hidden by default */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}
.radio-label-v2 input[type="radio"]:checked + .radio-label-v2-text::before { border-color: var(--accent-primary); }
.radio-label-v2 input[type="radio"]:checked + .radio-label-v2-text::after { transform: translateY(-50%) scale(1); }
.radio-label-v2 input[type="radio"]:focus + .radio-label-v2-text::before { /* Focus state */
    box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.3);
}

.radio-label-v2-description {
    font-size: 0.875em;
    color: var(--text-secondary);
    padding-left: 32px; /* Align with text */
    margin-top: 6px;
    line-height: 1.55;
}

/* --- Character Radius Preview --- */
.radius-preview-area-v2 {
    display: flex;
    flex-direction: column; /* Stack canvas and controls for responsiveness */
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--input-bg);
    border-radius: var(--control-border-radius);
    border: 1px solid var(--input-border);
}
@media (min-width: 500px) { /* Side-by-side on wider areas within the modal */
    .radius-preview-area-v2 {
        flex-direction: row;
        align-items: center;
    }
}


#characterRadiusCanvas { /* ID from JS */
    border: 1px solid var(--input-border);
    background-color: var(--panel-bg-secondary); /* Contrast with input-bg */
    border-radius: var(--control-border-radius);
    flex-shrink: 0; /* Prevent canvas from shrinking */
}

.radius-controls-v2 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.radius-controls-v2 label {
    font-size: 0.9em;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
}
@media (min-width: 500px) {
    .radius-controls-v2 label { text-align: left; }
}


#characterRadiusSlider { /* ID from JS */
    width: 100%;
    cursor: pointer;
    background: transparent !important;
    height: 22px;
    -webkit-appearance: none; appearance: none;
}
#characterRadiusSlider::-webkit-slider-runnable-track {
    width: 100%; height: 8px; background: #3e4553; border-radius: 4px;
    border: 1px solid #2a2e37;
}
#characterRadiusSlider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px;
    background: var(--accent-primary);
    border-radius: 50%;
    border: 3px solid var(--input-bg); /* Creates a "pop" effect */
    cursor: grab;
    margin-top: -7px; /* Center thumb */
    transition: background-color 0.2s ease, transform 0.1s ease;
}
#characterRadiusSlider::-webkit-slider-thumb:active {
    background-color: var(--accent-primary-active);
    transform: scale(1.1);
    cursor: grabbing;
}
#characterRadiusSlider::-moz-range-track { width: 100%; height: 8px; background: #3e4553; border-radius: 4px; border: 1px solid #2a2e37; }
#characterRadiusSlider::-moz-range-thumb {
    width: 18px; height: 18px; background: var(--accent-primary); border-radius: 50%; border: 3px solid var(--input-bg); cursor: grab;
}
#characterRadiusSlider::-moz-range-thumb:active { background-color: var(--accent-primary-active); transform: scale(1.1); cursor: grabbing; }


/* --- Selection Box (from JS) --- */
#selection-box {
    position: absolute;
    border: 2px dashed var(--accent-primary);
    background: rgba(0, 174, 255, 0.1); /* Accent color with low alpha */
    z-index: 100000;
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.3); /* Screen dimming effect */
}

.selection-btn-container { /* Class from JS */
    position:absolute;
    z-index:100001;
    padding: 10px;
    background-color: rgba(22, 24, 30, 0.9); /* var(--header-footer-bg) with alpha */
    backdrop-filter: blur(5px);
    border-radius: var(--control-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    gap: 10px;
}

/* --- Blur Overlay (from JS) --- */
.blur-overlay {
    position: absolute;
    background-color: rgba(26, 29, 36, 0.4); /* var(--panel-bg-primary) with alpha */
    backdrop-filter: blur(10px); /* Stronger blur */
    border: 1px solid rgba(0, 174, 255, 0.15); /* var(--accent-primary) with low alpha */
    z-index: 999;
    border-radius: 4px;
}

.crosshair-overlay{
    display: none;
}

/* ===== Motion-Guard Toggles (Corrected & Refined) ===== */
.setting-group-v2[data-setting="motion-guard"] .setting-group-v2-body {
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
}



.checkbox-label-v2 {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--input-border);
    padding: 14px 18px;
    border-radius: var(--control-border-radius);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative; /* Needed for ::before pseudo-element */
}

.checkbox-label-v2:hover {
    border-color: var(--accent-primary);
    background-color: rgba(0, 174, 255, 0.03);
}

/* Visually hide the actual checkbox but keep it accessible */
.checkbox-label-v2 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* The custom checkbox indicator */
.checkbox-label-v2::before {
    content: '';
    flex-shrink: 0; /* Prevent the box from shrinking */
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    margin-right: 12px;
    background-color: var(--panel-bg-secondary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/*
 * CORRECTED SELECTOR:
 * Styles the ::before of the label when its inner checkbox is checked.
 * This uses the :has() pseudo-class.
*/
.checkbox-label-v2:has(input[type="checkbox"]:checked)::before {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * CORRECTED SELECTOR:
 * Styles the ::before of the label when its inner checkbox is focused.
*/
.checkbox-label-v2:has(input[type="checkbox"]:focus-visible)::before {
    box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.3);
}

/*
  This provides smoother animation in supporting browsers
  by telling the browser how to interpret the --gradient-angle property.
*/
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  @keyframes spin-border {
    0% {
      --gradient-angle: 0deg;
    }
    100% {
      --gradient-angle: 360deg;
    }
  }
  
  .visionAITool {
    /* --- Layout & Dimensions (Unchanged) --- */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 8px; /* The radius for our border */
    
    /* --- Animated Border & Background --- */
    border: 1px solid transparent; /* Creates space for the gradient border */
  
    /* This is the core of the effect. We use two backgrounds:
      1. The inner background, clipped to the padding area.
      2. The animated gradient, clipped to the border area.
    */
    background:
      /* 1. Inner "Glass" Background (kept from the previous style) */
      linear-gradient(rgba(45, 42, 55, 0.85), rgba(35, 33, 42, 0.85)) padding-box,
      
      /* 2. Animated Conic Gradient for the Border */
      conic-gradient(from var(--gradient-angle), #bd93f9, #ff79c6, #8be9fd, #bd93f9) border-box;
  
    /* Define how the backgrounds are clipped */
    background-clip: padding-box, border-box;
    background-origin: border-box; /* Ensures gradients start from the border edge */
  bottom: -49px;
  border-radius: 0px;
    /* Apply the animation */
    animation: spin-border 4s linear infinite;
  }

/* =================================================================== */
/* Vision Log Panel (.vModeCalls)
/* =================================================================== */

/* --- Updated .vModeCalls to be fixed on the screen --- */
.vModeCalls {
    display: flex;
    flex-direction: column; /* This was added in a previous step, keeping it */
    width: 300px;
    /* --- Gradient Implementation (Unchanged) --- */
    background: linear-gradient(180deg, rgba(169, 111, 217, 0.15) 0%, rgba(51, 51, 51, 0.1) 100%), rgba(51, 51, 51, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* --- Subtle Glowing Border (Unchanged) --- */
    border-top: 1px solid rgba(217, 150, 217, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* --- POSITIONING FIX --- */
    position: fixed; /* Changed from 'absolute' to 'fixed' */
    right: 0;
    bottom: 170px;
    height: 193px;
    z-index: 10000;
}

/* You can keep all the other CSS from the previous step for the panel's
   minimized state, log entries, glow effects, etc. They will work with this change.
*/

#vmode-log-list {
    padding: 10px 15px;
    overflow-y: auto; /* Allow scrolling if content overflows */
    flex-grow: 1; /* Make this list take up available space */
}

#vmode-log-list h4 {
    margin: 5px 0 15px;
    color: #bd93f9;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
}

/* --- Toggle Button --- */
#vmode-toggle-button {
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #44475a;
    border: 1px solid #6272a4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 51;
    transition: transform 0.4s ease;
}

#vmode-toggle-button svg {
    width: 14px;
    color: #f8f8f2;
    transition: transform 0.4s ease;
}

/* --- Minimized State --- */
.vModeCalls.minimized {
    width: 35px;
}

.vModeCalls.minimized #vmode-log-list {
    display: none;
}

.vModeCalls.minimized #vmode-toggle-button svg {
    transform: rotate(180deg);
}

#vmode-minimized-text {
    display: none; /* Hidden by default */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    color: #bd93f9;
    opacity: 0.7;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
}

.vModeCalls.minimized #vmode-minimized-text {
    display: block;
}

/* =================================================================== */
/* Vision Log Entry (Inside the panel)
/* =================================================================== */

.vision-log-entry {
    background: rgba(40, 42, 54, 0.7);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #44475a;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.vision-log-entry:hover {
    border-color: #6272a4;
    background: rgba(50, 52, 64, 0.9);
}

.vision-log-entry .prompt-text {
    color: #f8f8f2;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vision-log-entry .entry-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.vision-log-entry .entry-actions button {
    background: transparent;
    border: 1px solid #6272a4;
    color: #f8f8f2;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.vision-log-entry .entry-actions button.delete-btn { border-color: #ff5555; }
.vision-log-entry .entry-actions button:hover { background: #6272a4; }
.vision-log-entry .entry-actions button.delete-btn:hover { background: #ff5555; }

/* =================================================================== */
/* Timeline Element Pulsating Glow Effect
/* =================================================================== */
@keyframes pulsating-glow {
    0% { box-shadow: 0 0 5px rgba(189, 147, 249, 0.3), inset 0 0 5px rgba(189, 147, 249, 0.2); }
    50% { box-shadow: 0 0 20px rgba(189, 147, 249, 0.8), inset 0 0 10px rgba(189, 147, 249, 0.5); }
    100% { box-shadow: 0 0 5px rgba(189, 147, 249, 0.3), inset 0 0 5px rgba(189, 147, 249, 0.2); }
}

.timeline-vision-mode.pulsating-glow {
    animation: pulsating-glow 2s ease-in-out infinite;
}

/* --- Keep all other CSS from previous steps (context menu, info panel, etc.) --- */
  
  .visionai-input{
    margin-top: 0em;
  }

  .visionAILogo {
    color: #ffffffab;
  }

  .sendVisionAIInput {
    color: #ffffff7a;
  }

  /* --- Fullscreen Particle Overlay --- */
/* --- Fullscreen Particle Overlay --- */

#fullscreen-particle-canvas {
    /* Covers the entire screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Ensures it's on top of other content */
    z-index: 9342432432423499;

    /* CRITICAL: This allows mouse clicks to pass through the canvas
       so you can still interact with the page behind it. */
    pointer-events: none;

    /* The canvas is hidden by default until the animation triggers */
    display: none;
}

  /* --- Positioning FIX for the timeline row --- */
#timeline-action-keys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 95px;
}

/* --- Custom Style for the Vision Mode Timeline Element --- */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-border {
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}
.timeline-vision-mode {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /* margin: 5px; */
  cursor: pointer;
  width: 110px;
  height: 33px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 10px;
  border-radius: 2px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(45, 42, 55, 0.7), rgba(35, 33, 42, 0.7)) padding-box,
    conic-gradient(from var(--gradient-angle), #bd93f9, #ff79c6, #8be9fd, #bd93f9) border-box;
  background-clip: padding-box, border-box;
  animation: spin-border 3s linear infinite;
}
.timeline-vision-mode:hover { box-shadow: 0 0 15px rgba(189, 147, 249, 0.5); }
.timeline-vision-mode svg { width: 14px; height: 14px; margin-right: 8px; flex-shrink: 0; color: #d4cec1;}
.timeline-vision-mode span { color: #f8f8f2; font-weight: 500; overflow: hidden; text-overflow: ellipsis;  color: rgba(255, 255, 255, 0.75); font-size: 12px;}

/* --- NEW: Vision Info Panel Styles --- */
#vision-info-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 5, 20, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 12342343001;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}
#vision-info-panel {
    background: rgba(30, 32, 42, 0.9);
    border: 1px solid rgba(189, 147, 249, 0.5);
    border-radius: 12px;
    padding: 25px 30px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: #f8f8f2;
}
#vision-info-panel h2 {
    margin-top: 0;
    color: #bd93f9;
    text-align: center;
    border-bottom: 1px solid rgba(189, 147, 249, 0.2);
    padding-bottom: 15px;
}
#vision-info-panel .info-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 15px;
    margin: 20px 0;
}
#vision-info-panel .info-grid p { margin: 0; }
#vision-info-panel .info-grid strong { color: #8be9fd; }
#close-info-panel {
    display: block;
    margin: 20px auto 0;
    padding: 10px 25px;
    border-radius: 6px;
    border: 1px solid #ff79c6;
    background: transparent;
    color: #ff79c6;
    cursor: pointer;
    transition: all 0.2s ease;
}
#close-info-panel:hover { background: #ff79c6; color: #282a36; }

/* --- NEW: Custom Context Menu Styles --- */
#vision-context-menu {
    position: absolute;
    z-index: 1002;
    display: none; /* Hidden by default */
    list-style: none;
    padding: 8px 0;
    margin: 0;
    background: #383a59;
    border: 1px solid #6272a4;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    min-width: 180px;
}
#vision-context-menu li {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #f8f8f2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
#vision-context-menu li svg {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    color: #bd93f9;
}
#vision-context-menu li:hover { background-color: #44475a; }
#vision-context-menu li.separator {
    height: 1px;
    padding: 0;
    margin: 5px 0;
    background-color: #6272a4;
}
#vision-context-menu li.danger svg { color: #ff5555; }
#vision-context-menu li.danger:hover { background-color: rgba(255, 85, 85, 0.2); }


.vision-timeline-container{
    width: 100%;
    height: 40px;
    background: #33333340;
    outline: 1px solid #ffffff17;
    margin-top: 8.1px;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
}

.timeline-container-frame{
    /* margin-top: -4em */
}
/* 
.client-timeline-tools{
    height: 368px !important;
} */

.timeline-placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 300;
}

/* When actions exist, change flex alignment to the start */
.vision-timeline-container.has-items {
    justify-content: flex-start;
    align-items: flex-start;

}

/*
 * Creates the pulsating glow effect for highlighting timeline items.
 */
 @keyframes pulsating-glow-animation {
    0% {
        box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(0, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.7);
    }
}

/* * The class that is added and removed by the JavaScript.
 * It applies the animation twice over a 2-second duration.
 */
.pulsating-glow {
    /* The animation runs for 2 seconds and repeats once (for a total of 4 seconds). */
    animation: pulsating-glow-animation 2s ease-in-out 2;
    /* Optional: a border-radius can make the glow look softer. */
}

/*
         * SETTINGS PANEL (ACTION CONFIG MENU)
         * This is the main container for the settings.
         * Your JS refers to this as '.action-config-menu'.
         */
         .action-config-menu {
            background-color: #2c2d30;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 480px; /* Increased width for more complex settings */
            border: 1px solid #444;
            overflow: hidden;
            position: absolute; /* Your JS will position this */
            user-select: none;
            display: none; /* Your JS will toggle this */
            height: 700px;
            overflow-y: auto;
            left: 50% !important;
            margin-right: auto !important;
        }

        /* Panel Header */
        .action-menu-title {
            background-color: #36373a;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move; /* Draggable cursor */
            border-bottom: 1px solid #444;
            font-size: 18px;
            font-weight: 600;
        }

        /* The 'x' close button in the header */
        .action-menu-title span {
            background: none;
            border: none;
            color: #a0a0a0;
            font-size: 24px;
            cursor: pointer;
            transition: color 0.2s ease, transform 0.2s ease;
            font-weight: bold;
            padding: 0 8px;
        }

        .action-menu-title span:hover {
            color: #fff;
            transform: rotate(90deg);
        }

        /* Main content area within the panel */
        .action-menu-content-area {
             padding: 8px 24px 24px 24px; /* Reduced top padding */
        }

        /*
         * SETTINGS SECTION (ACTION CONTAINER MODIFIER)
         * Each group of settings (e.g., for Delay, Click, Target)
         * is wrapped in this container. Your JS uses this class to show/hide sections.
         */
        .action-container-modifier {
            padding: 20px 0;
            border-bottom: 1px solid #444;
            display: none; /* JS will control visibility */
        }
        .action-container-modifier:last-of-type {
            border-bottom: none;
            padding-bottom: 0;
        }

        /* Shared title style for sections */
        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: #b0b1b6;
            margin-bottom: 16px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* A row containing a label and its control */
        .setting-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            transition: background-color 0.2s ease;
        }

        .setting-label {
            display: flex;
            flex-direction: column;
        }
        
        .setting-label .title {
            font-size: 16px;
            font-weight: 500;
            color: #e0e0e0;
        }

        .setting-label .description {
            font-size: 13px;
            color: #8e9097;
            margin-top: 4px;
        }

        /* Container for controls on the right side */
        .setting-control {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        /* Your JS uses this class for side-by-side buttons */
        .action-sidebyside-container {
            display: flex;
            gap: 8px;
        }

        /*
         * CUSTOM BUTTONS (ACTION BOX SELECT BTN)
         * Your JS uses '.action-box-select-btn' for many buttons.
         * The '.action-click-active' class marks the selected state.
        */
        .action-box-select-btn {
            background-color: #4a4b4f;
            color: #e0e0e0;
            border: 1px solid #555;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-box-select-btn:hover {
            background-color: #5a5b5f;
            border-color: #777;
        }

        .action-box-select-btn.action-click-active {
            background-color: #3a76f7;
            border-color: #3a76f7;
            color: #fff;
            box-shadow: 0 0 8px rgba(58, 118, 247, 0.5);
        }
        
        /* Save Button Specific Style */
        .action-box-select-btn.action-save-btn {
            background-color: #b93636;
            border-color: #b93636;
            color: white;
            padding: 12px 24px;
            font-size: 16px;
        }
        .action-box-select-btn.action-save-btn:hover {
            background-color: #d14242;
            border-color: #d14242;
        }

        /* Text Input Fields */
        .styled-input {
            background-color: #3a3b3e;
            color: #e0e0e0;
            padding: 8px 12px;
            border: 1px solid #555;
            border-radius: 6px;
            font-size: 14px;
            width: 80px; /* Default width */
            text-align: center;
        }
        .styled-input:focus {
            outline: none;
            border-color: #3a76f7;
        }
        .styled-input[type=number] {
            -moz-appearance: textfield;
        }
        .styled-input::-webkit-outer-spin-button,
        .styled-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Custom Toggle Switch (from previous design) */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #4a4b4f; transition: .3s; border-radius: 24px;
        }
        .slider:before {
            position: absolute; content: ""; height: 18px; width: 18px;
            left: 3px; bottom: 3px; background-color: white;
            transition: .3s; border-radius: 50%;
        }
        input:checked + .slider { background-color: #3a76f7; }
        input:checked + .slider:before { transform: translateX(20px); }

        /* Custom Select Dropdown (from previous design) */
        .select-wrapper { position: relative; display: inline-block; }
        .select-wrapper::after {
            content: '▼'; font-size: 12px; position: absolute; right: 12px;
            top: 50%; transform: translateY(-50%); pointer-events: none; color: #a0a0a0;
        }
        .custom-select {
            background-color: #3a3b3e; color: #e0e0e0; padding: 8px 32px 8px 12px;
            border: 1px solid #555; border-radius: 6px; cursor: pointer; font-size: 14px;
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }
        .custom-select:hover { background-color: #4a4b4f; }
        .custom-select:focus { outline: none; border-color: #3a76f7; }
        .custom-select:disabled { opacity: 0.5; cursor: not-allowed; }

/*
         * --- NEW STYLES FOR MOUSE OFFSET ---
         */
         .directional-offset-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .offset-input-group {
            display: flex;
            align-items: center;
            background-color: #3a3b3e;
            border: 1px solid #555;
            border-radius: 6px;
            padding: 0 8px;
        }
        .offset-input-group label {
            font-size: 13px;
            color: #a0a0a0;
            margin-right: 6px;
        }
        .offset-input-group input {
            width: 40px;
            background: none;
            border: none;
            color: #e0e0e0;
            padding: 8px 0;
            text-align: right;
        }
        .offset-input-group input:focus {
             outline: none;
        }


        /* Panel Footer */
        .panel-footer {
            padding: 24px 0 0 0; display: flex;
            justify-content: flex-end; border-top: 1px solid #444; margin-top: 24px;
        }

        /*
         * --- NEW/MODIFIED STYLES FOR CONDITIONAL ACTIONS ---
        */
        .conditional-actions-section .setting-row {
            padding: 16px 0;
            border-top: 1px solid #444;
            margin-top: 16px;
        }

        .conditional-actions-section .setting-label .title {
            font-size: 16px;
            font-weight: 600;
            color: #5ea6ff; /* Highlight the condition title */
        }

        .conditional-actions-section .setting-control.vertical {
             flex-direction: column;
             align-items: flex-start;
             gap: 15px; /* Space between rows */
        }
        
        .conditional-actions-section .sub-setting-row {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
        }

        .conditional-actions-section .sub-setting-label {
            font-size: 14px;
            color: #c0c2c7;
            margin-right: 10px;
        }


        /* --- Connection Focus Mode Styles --- */

/* This class is added to the body to activate the mode */
body.timeline-focus-mode-active {
    overflow: hidden; /* Prevents scrolling the page while in focus mode */
}

/* The full-screen overlay that captures clicks to exit */
.focus-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 100; /* Sits below the timeline but above other content */
    cursor: pointer;
}

/* The class applied to actions that are NOT part of the connection */
.timeline-key-faded {
    opacity: 0.2;
    transition: opacity 0.3s ease-in-out;
}

/* Ensures the focused items pop */
.timeline-key-focused {
    opacity: 1 !important;
    transform: scale(1.03); /* Slightly enlarge the focused items */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.7); /* Adds a blue glow */
    transition: all 0.3s ease-in-out;
}

/* Make the connector icons look clickable */
.timeline-indicator {
    cursor: pointer;
    padding: 0 2px; /* Add a little space for easier clicking */
    border-radius: 3px;
    transition: background-color 0.2s;
}

.timeline-indicator:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- Final Focus Mode Styles --- */
/* Updated styles for the Exit button to position it inside the container */
.exitFocusModeAction {
    position: absolute; /* Position relative to the nearest positioned ancestor */
    top: 8px;           /* Distance from the top of the container */
    right: 52px;          /* Distance from the right of the container */
    z-index: 102;       /* Ensure it's above other timeline elements */
    
    background: rgba(45, 45, 45, 0.8);
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    padding: 6px 12px;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.exitFocusModeAction:hover {
    background: rgba(60, 60, 60, 0.9);
    color: #ffffff;
    border-color: #718096;
}

/* Styles from before (kept for completeness) */
.watcher-group-focused {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-left: 3px solid #22c55e !important;
    transition: all 0.3s ease-in-out;
}

.timeline-key-focused {
    opacity: 1 !important;
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
    transition: all 0.3s ease-in-out;
}

.settings-section.conditional-actions-section {
    padding-top: 1em;
}

/* --- Modern & Scoped Scenario Panel & Config --- */

/* :root contains all the theme variables for easy customization */
:root {
    /* Color Palette */
    --sce-color-bg-primary: #1a1d24;
    --sce-color-bg-secondary: #242831;
    --sce-color-bg-tertiary: #2e333d;
    --sce-color-surface: #3a404d;
    --sce-color-surface-hover: #4a5160;
    
    --sce-color-text-primary: #e1e3e6;
    --sce-color-text-secondary: #a0a6b1;
    --sce-color-text-accent: #ffc107; /* Amber for highlights */

    --sce-color-accent: #00bcd4; /* Vibrant Cyan */
    --sce-color-accent-hover: #00d4ef;
    --sce-color-accent-text: #1a1d24;
    
    --sce-color-success: #4caf50;
    --sce-color-success-hover: #66bb6a;
    --sce-color-danger: #f44336;
    --sce-color-danger-hover: #e57373;

    --sce-color-border: #4a5160;
    --sce-color-focus-ring: rgba(0, 188, 212, 0.4);

    /* Typography */
    --sce-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sce-font-size-base: 16px;
    --sce-font-size-sm: 14px;
    --sce-font-size-xs: 12px;
    --sce-font-weight-regular: 400;
    --sce-font-weight-medium: 500;
    --sce-font-weight-bold: 700;

    /* Spacing & Radii */
    --sce-spacing-xs: 4px;
    --sce-spacing-sm: 8px;
    --sce-spacing-md: 16px;
    --sce-spacing-lg: 24px;
    --sce-spacing-xl: 32px;
    --sce-border-radius-sm: 4px;
    --sce-border-radius-md: 8px;
    --sce-border-radius-lg: 16px;
    
    /* Transitions & Shadows */
    --sce-transition-fast: 0.15s ease;
    --sce-transition-smooth: 0.3s ease;
    --sce-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --sce-shadow-md: 0 4px 12px rgba(0,0,0,0.2);
    --sce-shadow-lg: 0 10px 30px rgba(0,0,0,0.3);
}

/* --- Scenario Editor Header --- */
#scenario-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sce-color-bg-secondary);
    color: var(--sce-color-text-primary);
    padding: var(--sce-spacing-sm) var(--sce-spacing-lg);
    border-bottom: 2px solid var(--sce-color-border);
    font-family: var(--sce-font-family-sans);
    font-size: var(--sce-font-size-sm);
    position: sticky;
    top: 0;
    z-index: 1003343434343340;
}
.sce-header-info {
    display: flex;
    align-items: center;
    gap: var(--sce-spacing-md);
    font-weight: var(--sce-font-weight-medium);
}
.sce-header-info svg {
    width: 28px;
    height: 28px;
    color: var(--sce-color-accent);
}
#scenario-editor-header strong {
    color: var(--sce-color-text-accent);
    font-weight: var(--sce-font-weight-bold);
}
.sce-header-actions {
    display: flex;
    gap: var(--sce-spacing-md);
}

/* --- Scoped Button Styling --- */
.sce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sce-spacing-sm);
    font-family: var(--sce-font-family-sans);
    font-weight: var(--sce-font-weight-bold);
    font-size: var(--sce-font-size-sm);
    padding: 10px 20px;
    border-radius: var(--sce-border-radius-md);
    border: none;
    cursor: pointer;
    transition: background-color var(--sce-transition-fast), transform var(--sce-transition-fast), box-shadow var(--sce-transition-fast);
    text-decoration: none;
}
.sce-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sce-shadow-md);
}
.sce-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.sce-btn svg {
    width: 18px;
    height: 18px;
}
.sce-btn.sce-btn-primary {
    background-color: var(--sce-color-success);
    color: var(--sce-color-bg-primary);
}
.sce-btn.sce-btn-primary:hover {
    background-color: var(--sce-color-success-hover);
}
.sce-btn.sce-btn-secondary {
    background-color: var(--sce-color-surface);
    color: var(--sce-color-text-primary);
}
.sce-btn.sce-btn-secondary:hover {
    background-color: var(--sce-color-surface-hover);
}
.sce-btn.sce-btn-danger {
    background-color: var(--sce-color-danger);
    color: var(--sce-color-text-primary);
}
.sce-btn.sce-btn-danger:hover {
    background-color: var(--sce-color-danger-hover);
}
.sce-btn.sce-btn-accent {
    background-color: var(--sce-color-accent);
    color: var(--sce-color-accent-text);
}
.sce-btn.sce-btn-accent:hover {
    background-color: var(--sce-color-accent-hover);
}

/* --- Scoped Modal Styling --- */
.sce-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3443434;
    opacity: 0;
    transition: opacity var(--sce-transition-smooth);
    font-family: var(--sce-font-family-sans);
}
.sce-modal-backdrop.visible {
    opacity: 1;
}
.sce-modal-content {
    background-color: var(--sce-color-bg-secondary);
    color: var(--sce-color-text-primary);
    border-radius: var(--sce-border-radius-lg);
    box-shadow: var(--sce-shadow-lg);
    width: 95%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform var(--sce-transition-smooth), opacity var(--sce-transition-smooth);
    opacity: 0;
}
.sce-modal-backdrop.visible .sce-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.sce-modal-header {
    padding: var(--sce-spacing-md) var(--sce-spacing-lg);
    border-bottom: 1px solid var(--sce-color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sce-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: var(--sce-font-weight-bold);
}
.sce-modal-header h3 span {
    color: var(--sce-color-text-accent);
    font-style: italic;
}
.sce-modal-body {
    padding: var(--sce-spacing-lg);
    max-height: 70vh;
    overflow-y: auto;
}
.sce-modal-footer {
    padding: var(--sce-spacing-md) var(--sce-spacing-lg);
    border-top: 1px solid var(--sce-color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sce-spacing-md);
    background-color: var(--sce-color-bg-primary);
    border-bottom-left-radius: var(--sce-border-radius-lg);
    border-bottom-right-radius: var(--sce-border-radius-lg);
}
.sce-modal-close {
    background: none;
    border: none;
    color: var(--sce-color-text-secondary);
    font-size: 28px;
    font-weight: var(--sce-font-weight-regular);
    cursor: pointer;
    padding: 0 var(--sce-spacing-sm);
    transition: color var(--sce-transition-fast);
}
.sce-modal-close:hover {
    color: var(--sce-color-text-primary);
}

/* --- Scenario List Modal --- */
#scenario-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sce-spacing-md);
}
.sce-list-item {
    background-color: var(--sce-color-bg-tertiary);
    padding: var(--sce-spacing-md);
    border-radius: var(--sce-border-radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--sce-transition-fast), transform var(--sce-transition-fast), box-shadow var(--sce-transition-fast);
    border: 1px solid var(--sce-color-border);
}
.sce-list-item:hover {
    background-color: var(--sce-color-surface);
    transform: translateY(-2px);
    box-shadow: var(--sce-shadow-sm);
}
.sce-list-item .sce-info .sce-name {
    font-weight: var(--sce-font-weight-bold);
    font-size: var(--sce-font-size-base);
    color: var(--sce-color-text-primary);
}
.sce-list-item .sce-info .sce-trigger {
    font-size: var(--sce-font-size-xs);
    color: var(--sce-color-accent);
    margin-top: var(--sce-spacing-xs);
    font-weight: var(--sce-font-weight-medium);
}
.sce-list-item .sce-actions button {
    margin-left: var(--sce-spacing-sm);
    padding: 6px 12px;
    font-size: var(--sce-font-size-xs);
}
.sce-list-footer {
    text-align: center;
    margin-top: var(--sce-spacing-lg);
}

/* --- Scenario Config Form --- */
.sce-fieldset {
    border: 1px solid var(--sce-color-border);
    border-radius: var(--sce-border-radius-md);
    padding: var(--sce-spacing-lg);
    margin-bottom: var(--sce-spacing-xl);
    background: var(--sce-color-bg-primary);
}
.sce-legend {
    color: var(--sce-color-accent);
    font-weight: var(--sce-font-weight-bold);
    padding: 0 var(--sce-spacing-md);
    font-size: var(--sce-font-size-base);
}
.sce-form-group {
    margin-bottom: var(--sce-spacing-lg);
}
.sce-form-group:last-child {
    margin-bottom: 0;
}
.sce-form-label {
    display: block;
    margin-bottom: var(--sce-spacing-sm);
    color: var(--sce-color-text-secondary);
    font-size: var(--sce-font-size-sm);
    font-weight: var(--sce-font-weight-medium);
}
.sce-input, .sce-select {
    width: 100%;
    background-color: var(--sce-color-bg-tertiary);
    border: 1px solid var(--sce-color-border);
    color: var(--sce-color-text-primary);
    padding: 12px;
    border-radius: var(--sce-border-radius-md);
    font-size: var(--sce-font-size-base);
    font-family: var(--sce-font-family-sans);
    transition: border-color var(--sce-transition-fast), box-shadow var(--sce-transition-fast);
}
.sce-input::placeholder {
    color: var(--sce-color-text-secondary);
    opacity: 0.7;
}
.sce-input:focus, .sce-select:focus {
    outline: none;
    border-color: var(--sce-color-accent);
    box-shadow: 0 0 0 3px var(--sce-color-focus-ring);
}
.sce-form-group-inline {
    display: flex;
    align-items: center;
    gap: var(--sce-spacing-md);
}
.sce-form-group-inline > span {
    color: var(--sce-color-text-secondary);
    font-size: var(--sce-font-size-sm);
}
.sce-form-group-inline .sce-input[type="number"] {
    width: 100px;
}
.sce-inline-options {
    padding-left: var(--sce-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--sce-spacing-md);
    margin-top: var(--sce-spacing-md);
}

.watcher-bot-list li.active-scenario-item {
    border: 1px solid #28a745; /* Green border */
    background-color: #1a2c21; /* Optional: Dark green background tint */
}

.is-scenario{
    outline: 1px solid #272727 !important;
    outline-offset: 2px !important; /* pushes the outline away from the element edge */
}

/* --- Theme 3: Royal Amethyst --- */
/* --- Theme 3: Royal Amethyst (v3 - Crisp Gleam) --- */
/* --- Theme 3: Royal Amethyst (v4 - Lightened Base) --- */
.scenario-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 19px;
    height: 19px;

    /* --- Base Shape & Text --- */
    color: white;
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;

    /* --- Effects --- */
    background-image: 
        /* Top Layer: The gleam (no changes here) */
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(240, 200, 255, 0.4) 50%,
            transparent 70%
        ),
        /* Bottom Layer: Lightened base gradient (ONLY CHANGE IS HERE) */
        linear-gradient(145deg, #4c1d6e 0%, #8942a8 50%, #d953ff 100%);
    
    background-repeat: no-repeat;
    background-size: 200% 100%; 
    
    box-shadow:
        inset 0 0.75px 1px rgba(240, 200, 255, 0.3),
        inset 0 -1px 1px rgba(36, 11, 54, 0.6),
        0px 3px 5px rgba(36, 11, 54, 0.5),
        0px 1px 2px rgba(0, 0, 0, 0.5);

    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);

    animation: gleam-effect 4s infinite ease-in-out;
    animation-delay: 1.5s;
}

/* Keyframe animation (no changes here) */
@keyframes gleam-effect {
    0% {
        background-position: 100% 0, 0 0;
    }
    40% {
        background-position: -100% 0, 0 0;
    }
    100% {
        background-position: -100% 0, 0 0;
    }
}
.timeline-vision-mode{
    overflow: visible;
}

.scenario-list-item.scenario-inactive .info {
    opacity: 0.6;
    text-decoration: line-through;
    color: #888;
}

.scenario-list-item .trigger{
    color: #ffc107;
    font-size: 11px;
    margin: 0.35em 0;
}

.sce-modal-header h3{
    font-size: 18px;
}

/* Style for the currently active task in the list */
.watcher-bot-list .watcher-group.target-task-w-active {
  border-left: 3px solid #2ea142; /* A prominent blue left border to indicate selection */
}

/* =================================== */
/* == Action Set Configuration Panel == */
/* =================================== */

/* Main container for the Action Set config inside the settings menu */
.action-set-config {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Adds space between sections */
}

/* Title for the entire panel */
.action-set-config .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
    margin-bottom: 5px;
}

/* Container for the toggle and info text */
.action-set-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 6px;
}

/* Styling for the checkbox toggle label */
.action-set-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
}
.action-set-toggle:hover span {
    color: #fff;
}

/* Info text below the toggle */
.action-set-info {
    font-size: 12px;
    color: #999;
}

/* Container for the list of steps */
.action-set-sequence-container {
    max-height: 250px; /* Limit height and allow scrolling */
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}

/* Styling for each individual item (Target, Find #1, etc.) */
.action-set-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Highlight for the item being edited */
.action-set-item.is-editing {
    background-color: #4a412a;
    border-color: #c89b3c;
}

/* Left part of the item (image and text) */
.action-set-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Thumbnail image for the step */
.action-set-thumbnail {
    width: 64px;
    height: auto;
    border-radius: 3px;
    border: 1px solid #555;
    object-fit: contain;
    background-color: #222;
    cursor: pointer;
}
.action-set-thumbnail:hover {
    border-color: #c89b3c;
}

/* Container for the text labels */
.action-set-item-info {
    display: flex;
    flex-direction: column;
}

/* "Target" or "Find #" label */
.action-set-item-label {
    font-size: 14px;
    font-weight: 500;
    color: #e0e0e0;
}

/* "Region: 52x83" description */
.action-set-item-desc {
    font-size: 11px;
    color: #aaa;
}

/* Right side of the item (control buttons) */
.action-set-item-controls {
    display: flex;
}

/* Styling for the small icon buttons (Update, Add, Delete) */
.btn-icon {
    background: #444;
    border: 1px solid #555;
    color: #ccc;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.btn-icon:hover {
    background-color: #555;
    color: #fff;
}
.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Footer section with the "Add Image" button and tip */
.action-set-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #444;
    padding-top: 15px;
}
.action-set-tip {
    font-size: 12px;
    color: #999;
}

/* ================================================================ */
/* NEW & IMPROVED ACTION SET PANEL STYLES                           */
/* ================================================================ */

/* Main container for the entire list */
#action-set-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between each step item */
}

/* Main container for a single step (Target or Find) */
/* ================================================================ */
/* FINAL, PROFESSIONAL ACTION SET PANEL STYLES                      */
/* This version stacks details vertically for a clean layout.       */
/* ================================================================ */

/* Main container for the entire list */
#action-set-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Main row for a single step */
.action-set-item {
    display: flex;
    align-items: center; /* Vertically centers all direct children */
    gap: 16px;
    background-color: #383842;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #484852;
}

.action-set-item.is-editing {
    border-color: #4a90e2;
    box-shadow: 0 0 10px -2px rgba(74, 144, 226, 0.6);
}

/* Wrapper for the main "Find/Target" image */
.action-set-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 80px; 
}

.action-set-image-label {
    font-size: 14px;
    font-weight: 600;
    color: #e5e5e5;
}

.action-set-thumbnail {
    width: 80px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #555;
    cursor: pointer;
}

/* ✨ THIS IS THE KEY CHANGE ✨ */
/* This middle container now stacks its children vertically and grows to fill space */
.action-set-details {
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    align-items: flex-start; /* Left-align the stacked items */
    flex-grow: 1;            /* Make this section expand, pushing controls to the right */
    gap: 8px;                /* Space between the region row and the button row */
}

/* Wrapper for region text or region thumbnail */
.action-set-region-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-set-region-thumbnail {
    width: 60px;
    height: 30px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #666;
}

.action-set-item-desc {
    font-size: 13px;
    color: #8a8a92;
    font-style: italic;
}

.action-set-item-desc .action-set-image-label {
    font-size: 13px;
    color: #b0b0b0;
    font-style: normal;
    margin-right: 4px;
}

/* Wrapper for the override buttons */
.action-set-step-overrides {
    display: flex;
    gap: 8px;
}

.step-override-btn {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #5f5f6b;
    border-radius: 6px;
    cursor: pointer;
    background-color: #4a4a54;
    color: #c0c0c0;
    transition: all 0.2s ease-in-out;
}

.step-override-btn:hover {
    border-color: #777;
    background-color: #555561;
}

.step-override-btn.is-on {
    background-color: #27523a;
    border-color: #397955;
    color: #d8f5e6;
}

.step-override-btn.is-off {
    background-color: #6b2d30;
    border-color: #994a4f;
    color: #ffdddd;
    text-decoration: line-through;
    opacity: 0.8;
}

/* Final controls on the far right */
.action-set-item-controls {
    display: flex;
    align-items: center;
    /* gap: 4px; */
    flex-shrink: 0; /* Prevents this from shrinking */
}

.action-set-item-controls .btn-icon {
    background: transparent;
    color: #999;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.action-set-item-controls .btn-icon:hover {
    background-color: #5a5a66;
    color: #fff;
}

.action-set-item-controls .btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    color: #666;
    background-color: transparent;
}

.action-set-item{
    /* max-height: 70px; */
    height: 105px;
}

.action-set-region-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.action-set-step-overrides {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-override-btn{
    height: auto;
    width: 91px;
}

.action-set-details {
    flex-direction: row;
}

.step-override-btn{
    font-size: 11px;
}

p.section-description {
    font-size: 12px;
    color: #b7b7b7;
}

/* Updated CSS with 'usp-' prefix for all selectors.
  This ensures styles are scoped to the settings panel and won't
  affect other parts of your website.
*/

/* Settings Panel Styling */
.usp-settings-panel {
    position: fixed;
    top: 0;
    right: 0; /* Always anchor to the right edge */
    
    /* 1. Set a flexible width instead of a fixed one */
    width: auto; /* Min-width, preferred-width, max-width */
    height: 100%;
    
    background-color: #1e1e1e;
    color: #f0f0f0;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    z-index: 153535355001;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
    
    /* 2. Use transform to hide the panel completely */
    transform: translateX(100%); /* Moves it 100% of its own width to the right */
    
    /* 3. Animate the transform property */
    transition: transform 0.4s ease-in-out;
}

/* --- State for showing the panel --- */
.usp-settings-panel.usp-open {
    /* Bring the panel back on-screen */
    transform: translateX(0);
}

#usp-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0,0,0,0.6); */
    /* backdrop-filter: blur(5px); */
    display: none;
    z-index: 1000;
}

#usp-settings-overlay.usp-show {
    display: block;
}

.usp-settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #2a2a2a;
    border-bottom: 1px solid #333;
}

.usp-settings-panel-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.usp-close-btn {
    background: none;
    border: none;
    color: #f0f0f0;
    font-size: 2rem;
    cursor: pointer;
}

.usp-settings-panel-content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}

.usp-settings-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
}

.usp-tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1rem;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.usp-tab-link.usp-active, .usp-tab-link:hover {
    color: #fff;
    border-bottom: 2px solid #00aaff;
}

.usp-tab-content {
    display: none;
    /* Add this line to ensure it's not transparent */
    background-color: #1e1e1e; 
}

.usp-tab-content.usp-active {
    display: block;
    animation: usp-fadeIn 0.5s;
}

@keyframes usp-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.usp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.usp-info-grid div {
    font-size: 0.95rem;
}

.usp-settings-option {
    margin-bottom: 15px;
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
}

.usp-settings-option label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usp-profile-actions, .usp-settings-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background-color: #2a2a2a;
    border-top: 1px solid #333;
}
.usp-settings-panel-footer {
    border-bottom: 1px solid #333;
}

#usp-saveSettingsBtn, #usp-changePasswordBtn, #usp-updateProfileBtn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}
#usp-saveSettingsBtn {
    background-color: #00aaff;
    color: #fff;
}
/* Style for all secondary buttons */
#usp-changePasswordBtn, #usp-updateProfileBtn, #usp-generatePinBtn {
    background-color: #444;
    color: #fff;
    padding: 10px 20px; /* Also ensure consistent padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

/* Add a hover effect for better UX */
#usp-changePasswordBtn:hover, #usp-updateProfileBtn:hover, #usp-generatePinBtn:hover {
    background-color: #555;
}

.usp-input-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.usp-input-group input {
    flex-grow: 1;
    padding: 8px 12px;
    background-color: #333;
    border: 1px solid #555;
    color: #f0f0f0;
    border-radius: 5px;
}

.usp-input-group button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: #00aaff;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.usp-input-group button:hover {
    background-color: #0088cc;
}

#usp-userPinDisplay {
    font-family: monospace;
    letter-spacing: 2px;
}

.usp-feedback-message {
    display: none; /* Hidden by default */
    padding: 10px 15px;
    margin-top: 15px;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
}

.usp-feedback-message.usp-success {
    background-color: rgba(40, 167, 69, 0.2); /* Green with transparency */
    color: #58d68d;
    border: 1px solid rgba(40, 167, 69, 0.4);
}

.usp-feedback-message.usp-error {
    background-color: rgba(220, 53, 69, 0.2); /* Red with transparency */
    color: #f17e89;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

#usp-generatePinContainer {
    display: none;
}

.usp-feedback-message.usp-info {
    background-color: rgba(23, 162, 184, 0.2); /* Info blue with transparency */
    color: #61d5e8;
    border: 1px solid rgba(23, 162, 184, 0.4);
}

/* =================================================================
   Admin Panel Specific Styling
================================================================= */

#usp-adminTabLink.usp-active {
    color: #f0b90b;
    border-bottom: 2px solid #f0b90b;
}

#usp-adminToolsSection,
#usp-admin {
    border-top: 2px solid rgba(240, 185, 11, 0.2);
    padding-top: 20px;
    margin-top: 15px;
}

#usp-assignSubscriptionBtn {
    background-color: #009975; /* A deep green for a primary action */
    color: #fff;
    width: 100%; /* Make it full-width within its container */
    padding: 12px 20px;
    font-weight: bold;
    transition: background-color 0.3s;
}

#usp-assignSubscriptionBtn:hover {
    background-color: #007d61;
}

#usp-admin input:focus,
#usp-admin select:focus {
    border-color: #f0b90b;
    box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2);
}

/* ============================================= */
/* == Modern Styling for Admin Subscription Form == */
/* ============================================= */

#usp-admin.usp-tab-content {
    padding: 10px 25px;
    max-width: 550px;
    margin: 0 auto;
}

#usp-admin .usp-settings-option {
    margin-bottom: 24px;
}

#usp-admin .usp-settings-option label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #b0b8c4;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#usp-admin input[type="text"],
#usp-admin select {
    width: 100%;
    background-color: #2a2d34;
    border: 1px solid #404552;
    border-radius: 8px;
    padding: 14px;
    color: #e6e6e6;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

#usp-admin select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='%23b0b8c4'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

#usp-admin input[type="text"]::placeholder {
    color: #6c727e;
    opacity: 1;
}

#usp-admin input[type="text"]:focus,
#usp-admin select:focus {
    outline: none;
    border-color: #00aaff;
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.2);
}

#usp-admin .usp-profile-actions {
    margin-top: 30px;
}

#usp-admin #usp-assignSubscriptionBtn {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(45deg, #00aaff, #0077ff);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 153, 255, 0.2);
}

#usp-admin #usp-assignSubscriptionBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 153, 255, 0.3);
}

#usp-admin #usp-assignSubscriptionBtn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(0, 153, 255, 0.2);
}

#usp-admin #usp-assignSubscriptionBtn:disabled {
    background: #404552;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================= */
/* ==   Styling for the new Setup Guide Tab   == */
/* ============================================= */

#usp-setup.usp-tab-content {
    padding: 10px 25px;
    max-width: 700px;
    margin: 0 auto;
}

#usp-setup .usp-setup-intro {
    text-align: center;
    color: #9ab;
    margin-bottom: 30px;
    font-size: 1rem;
}

.usp-setup-step {
    background-color: #2a2d34;
    border: 1px solid #404552;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.usp-setup-step .usp-step-content {
    padding: 20px 25px 25px 60px;
    color: #c5cdd8;
    font-size: 0.95rem;
    line-height: 1.6;
}

.usp-setup-step .usp-step-content p {
    margin-top: 0;
    margin-bottom: 15px;
}

.usp-step-checkbox {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    background-color: #31353f;
    border-bottom: 1px solid #404552;
    position: relative;
    user-select: none;
}

.usp-step-checkbox input {
    display: none;
}

.usp-step-checkbox .usp-step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e6e6e6;
    margin-left: 15px;
    transition: color 0.2s;
}

.usp-checkmark {
    height: 22px;
    width: 22px;
    background-color: #2a2d34;
    border: 2px solid #555c69;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

.usp-step-checkbox:hover .usp-checkmark {
    border-color: #00aaff;
}

.usp-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.usp-step-checkbox input:checked ~ .usp-checkmark {
    background-color: #00aaff;
    border-color: #00aaff;
}

.usp-step-checkbox input:checked ~ .usp-checkmark:after {
    display: block;
}

.usp-step-checkbox input:checked ~ .usp-step-title {
    color: #889;
    text-decoration: line-through;
}

.usp-download-links, .usp-video-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.usp-download-btn, .usp-docs-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #404552;
    color: #e6e6e6;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.2s;
}

.usp-download-btn:hover, .usp-docs-btn:hover {
    background-color: #00aaff;
    color: #fff;
}

.usp-video-links a {
    color: #00aaff;
    text-decoration: none;
    font-weight: 500;
}
.usp-video-links a:hover {
    text-decoration: underline;
}

.usp-pin-display-wrapper {
    margin-top: 15px;
}
.usp-pin-display-wrapper .usp-input-group {
    max-width: 300px;
}

/* ========================================================== */
/* =================== NEW BOTS TAB STYLES ================== */
/* ========================================================== */

#usp-bots.usp-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure the tab takes full height */
}

.usp-bots-toolbar {
    display: flex;
    gap: 10px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

#usp-bot-search {
    flex-grow: 1;
    padding: 10px 15px;
    background-color: #2a2d34;
    border: 1px solid #404552;
    color: #f0f0f0;
    border-radius: 6px;
    font-size: 1rem;
}

#usp-bot-search:focus {
    outline: none;
    border-color: #00aaff;
    box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.2);
}

.usp-action-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.usp-btn-primary {
    background-color: #00aaff;
    color: #fff;
}
.usp-btn-primary:hover {
    background-color: #0088cc;
}

#usp-bots-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px; /* space for scrollbar */
}

.usp-bot-item {
    display: flex;
    align-items: center;
    background-color: #2a2d34;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid transparent; /* For status color */
    transition: background-color 0.2s;
}

.usp-bot-item:hover {
    background-color: #31353f;
}

.usp-bot-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

.usp-status-running {
    background-color: #28a745; /* Green */
    box-shadow: 0 0 8px #28a745;
}

.usp-status-stopped {
    background-color: #dc3545; /* Red */
}

.usp-bot-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.usp-bot-name {
    font-weight: 600;
    color: #e6e6e6;
    margin-bottom: 4px;
}

.usp-bot-details {
    font-size: 0.85rem;
    color: #889;
}

.usp-bot-actions {
    display: flex;
    gap: 8px;
}

.usp-btn-start { background-color: #28a745; color: white; }
.usp-btn-start:hover { background-color: #218838; }

.usp-btn-stop { background-color: #dc3545; color: white; }
.usp-btn-stop:hover { background-color: #c82333; }

.usp-btn-edit { background-color: #6c757d; color: white; }
.usp-btn-edit:hover { background-color: #5a6268; }

.usp-btn-delete { background-color: transparent; border: 1px solid #dc3545; color: #dc3545; }
.usp-btn-delete:hover { background-color: #dc3545; color: white; }

.task-container{
    display: none;
}

/* ===== StractiAI Detection Settings ===== */
.setting-group-v2[data-setting="detection-config"] .setting-subsection {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--panel-border-light);
}

.setting-group-v2[data-setting="detection-config"] .setting-subsection:last-of-type {
    border-bottom: none;
    margin-bottom: 15px;
}

.setting-group-v2[data-setting="detection-config"] h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Slider Styles */
.slider-group {
    margin-bottom: 20px;
}

.slider-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.slider-group label span {
    font-weight: bold;
    color: var(--accent-primary);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--panel-bg-secondary);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    border: 2px solid var(--panel-bg);
    transition: background-color 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #00c6ff;
}

/* Numeric Inputs for Dimensions */
.dimension-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.input-group-v2 {
    display: flex;
    flex-direction: column;
}

.input-group-v2 label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.input-group-v2 input[type="number"] {
    background-color: var(--panel-bg-secondary);
    border: 1px solid var(--input-border);
    border-radius: var(--control-border-radius);
    padding: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
}

.input-group-v2 input[type="number"]:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.2);
    outline: none;
}

/* Action Button State Styling */
.setting-group-v2-actions {
    margin-top: 10px;
    text-align: center;
}

.btn-v2-disabled {
    background-color: var(--btn-secondary-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

#updateDetectionSettingsBtn:not(.btn-v2-disabled) {
    background-color: #1a9c53; /* Green for "ready to save" */
}

#updateDetectionSettingsBtn:not(.btn-v2-disabled):hover {
    background-color: #24b868;
}

.settings-message {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    height: 15px; /* Reserve space to prevent layout shift */
}

/* Enhanced Slider Styles with Progress Bar */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px; /* Slightly thicker for better visibility */
    background: linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) 50%, var(--panel-bg-secondary) 50%, var(--panel-bg-secondary) 100%);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: white; /* Make thumb stand out */
    border-radius: 50%;
    border: 3px solid var(--accent-primary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin-top: -6px; /* Center the thumb on the track */
    transition: transform 0.2s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* Canvas styling within the new section */
.setting-group-v2[data-setting="detection-config"] .radius-preview-area-v2 {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: rgba(0,0,0,0.1);
    padding: 15px;
    border-radius: var(--control-border-radius);
}

.setting-group-v2[data-setting="detection-config"] .radius-controls-v2 {
    flex-grow: 1;
}

.checkbox-label-v2{
    margin-bottom: .7em;
}

/* --- Client Section --- */
.client-section-container {
    margin-bottom: 1.5rem;
}

.client-list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.client-list-item:hover {
    background-color: var(--bg-light);
}

.client-list-item.active-client {
    background-color: rgba(59, 130, 246, 0.3); /* Transparent blue */
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.status-indicator.online {
    background-color: var(--accent-green);
    animation: pulse-green 2s infinite;
}

.status-indicator.offline {
    background-color: var(--accent-red);
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.client-info {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.client-status-text {
    font-size: 12px;
}
.client-status-text.running { color: var(--accent-green); }
.client-status-text.idle { color: var(--text-secondary); }
.client-status-text.offline { color: var(--accent-red); }

.add-new-client-form {
    display: flex;
    margin-top: 1rem;
    gap: 0.5rem;
}

.add-new-client-form input {
    flex-grow: 1;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    outline: none;
    transition: box-shadow 0.2s;
}

.add-new-client-form input:focus {
    box-shadow: 0 0 0 2px var(--accent-blue);
}
/* --- Root Color & Font Palette --- */
:root {
    --bg-primary: #0a0a0f;
    --bg-glass: rgba(22, 22, 33, 0.4);
    --border-glass: rgba(129, 140, 153, 0.2);
    --glow-primary: rgba(200, 215, 255, 0.2);
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --accent-blue: #38bdf8;
    --accent-blue-glow: rgba(56, 189, 248, 0.4);
    --accent-cyan: #22d3ee;
    --accent-green: #34d399;
    --accent-red: #f43f5e;
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Main Layout --- */
.task-main-screen {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 16px;
    padding: 1.5rem;
    margin: -4em auto 0;
    display: flex;
    gap: 2rem;
    width: 900px;
}

.main-hub-left-column {
    flex: 2; /* Takes up more space */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main-hub-right-column {
    flex: 1; /* Takes up less space */
    border-left: 1px solid var(--border-glass);
    padding-left: 2rem;
}

/* --- Section Headers --- */
.section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-blue);
}


/* --- Connected Clients (Left Column) --- */
.client-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--glow-primary);
}

.client-list-item.active-client {
    box-shadow: 0 0 10px var(--accent-blue-glow), inset 0 0 15px rgba(56, 189, 248, 0.1);
    border-color: var(--accent-blue);
}

.status-indicator {
    width: 4px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.status-indicator.online { background-color: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
.client-status-text.running { color: var(--accent-green); }

.status-indicator.idle { background-color: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
.client-status-text.idle { color: var(--accent-cyan); }

.status-indicator.offline { background-color: var(--accent-red); }
.client-status-text.offline { color: var(--accent-red); }

.client-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.client-name { font-weight: 600; color: var(--text-primary); }
.client-status-text { font-size: 0.875rem; }
.client-runtime { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }

.menu-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    margin-left: auto;
}

/* --- Recently Ran (Left Column) --- */
.recently-ran-container .section-title {
     padding-top: 1rem;
     border-top: 1px solid var(--border-glass);
}
.recent-bot-item {
    width: 100%;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    /* overflow: hidden; has been REMOVED. This is the main fix. */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.recent-bot-screenshot {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    /* The border-radius is now applied directly to the image */
    border-radius: 10px 10px 0 0; 
}
.recent-bot-info { padding: 1rem; }
.recent-bot-name { display: block; font-weight: 600; color: var(--text-primary); }
.recent-bot-last-run { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }


/* --- Bot Library (Original Styling) --- */
.bot-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}
.bot-list-item:hover {
    transform: scale(1.03);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px var(--accent-blue-glow);
}

.bot-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.bot-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
}

.bot-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Redesigned Buttons for Bot Library --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}
.btn svg {
    width: 1rem;
    height: 1rem;
}
.btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.btn-run,
.btn-edit,
.btn-more {
    background: var(--bg-glass);
    border-color: var(--border-glass);
}

.task-management-container {
    margin-top: 1.5rem;
}

.btn-create-new {
    width: 100%;
    padding: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-create-new:hover {
    box-shadow: 0 0 20px var(--accent-blue-glow);
    transform: scale(1.02);
}

/* Client Menu */
.client-menu .menu-button {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 6px;
    padding: 2px 8px;
    transition: all 0.2s;
}

.client-menu .menu-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-glass);
    border-color: var(--border-glass);
}

.client-menu .menu-content {
    display: none;
    position: absolute;
    right: 2.5rem; /* Adjust positioning */
    background: #1c1c25;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 0.5rem;
    z-index: 10;
    width: 150px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.client-menu:hover .menu-content { display: block; }
.menu-content a {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    display: block;
    border-radius: 6px;
    font-size: 0.875rem;
}
.menu-content a:hover {
    background-color: var(--accent-blue);
    color: white;
}


/* --- Recently Ran (Left Column) --- */
.recently-ran-container .section-title {
    padding-top: 1rem;
    border-top: 1px solid var(--border-glass);
}

.recently-ran-list {
    display: flex; /* Arranges bot cards in a row */
    overflow-x: auto; /* Enables horizontal scrolling if needed */
    gap: 1rem;
    padding: 0.25rem 0 1rem 0.25rem; /* Adds padding for aesthetics and scrollbar space */
}

/* --- Custom Scrollbar Styling --- */
.recently-ran-list::-webkit-scrollbar {
    height: 8px; /* Height of the horizontal scrollbar */
}

.recently-ran-list::-webkit-scrollbar-track {
    background: transparent; /* Makes the track invisible */
}

.recently-ran-list::-webkit-scrollbar-thumb {
    background-color: var(--border-glass); /* Color of the scroll handle */
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.recently-ran-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue); /* Handle color on hover */
}

.recent-bot-item {
    /* Sets a fixed base width for each card so they don't shrink or grow */
    background: var(--bg-glass);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.recent-bot-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
    box-shadow: 0 0 25px var(--accent-blue-glow);
}

.recent-bot-screenshot {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--border-glass);
}

.recent-bot-info {
    padding: 0.75rem;
}

.recent-bot-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-bot-last-run {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* --- Recently Ran (Left Column) --- */
.recently-ran-container .section-title {
    padding-top: 1rem;
    border-top: 1px solid var(--border-glass);
}

.recently-ran-list {
    display: flex;
    flex-direction: column; /* Stacks cards vertically */
    gap: 1.5rem; /* Increased gap between cards */
}

.recent-bot-item {
    width: 100%;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    overflow: hidden; /* Ensures the image corners are clipped */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.recent-bot-item:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}

.recent-bot-screenshot {
    width: 100%;
    height: 150px; /* Taller height for a banner image */
    object-fit: cover;
    display: block; /* Ensures it takes up the full line */
}

/* This new wrapper holds the content below the image */
.recent-bot-content-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}

.recent-bot-details {
    flex-grow: 1;
}

.recent-bot-name {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.recent-bot-last-run {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.bot-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.bot-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bot-stat-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.recent-bot-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevents action buttons from shrinking */
}

.btn.btn-edit {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    font-size: 0.875rem;
    font-weight: 500;
}

.btn.btn-edit:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    filter: brightness(1.1);
}

.danger-text {
    color: var(--accent-red) !important;
}
.danger-text:hover {
    background-color: var(--accent-red) !important;
    color: white !important;
}

.task-container{
    /* display: block !important; */
}

/* --- Root Color & Font Palette --- */
:root {
    --bg-primary: #0a0a0f;
    --bg-glass: rgba(22, 22, 33, 0.4);
    --border-glass: rgba(129, 140, 153, 0.2);
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --accent-blue: #38bdf8;
    --accent-cyan: #22d3ee;
    --accent-green: #34d399;
    --accent-red: #f43f5e;
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Main Layout --- */
.task-main-screen {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 1000px;
    margin: -10em auto 0;
    display: flex;
    flex-direction: column; /* Stacks top and bottom sections vertically */
    gap: 1.5rem;
}

.main-hub-top-section {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-glass);
}

.main-hub-bottom-section {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* --- Section Headers --- */
.section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border: none;
}

.section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-blue);
}

/* --- Left Column: Connected Clients --- */
.client-list-column
 {
    flex: 1;
    max-width: 350px;
    overflow-y: scroll;
    max-height: 420px;
}

.client-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.client-list-item:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}

.client-list-item.active-client {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

.status-indicator {
    width: 4px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.status-indicator.online { background-color: var(--accent-green); }
.client-status-text.running { color: var(--accent-green); }

.status-indicator.idle { background-color: var(--accent-cyan); }
.client-status-text.idle { color: var(--accent-cyan); }

.status-indicator.offline { background-color: var(--accent-red); }
.client-status-text.offline { color: var(--accent-red); }

.client-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.client-name { font-weight: 600; color: var(--text-primary); }
.client-status-text { font-size: 0.875rem; }
.client-runtime { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }

.menu-button {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0;
}

.btn-add-client {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; width: 100%; margin-top: 1rem; padding: 0.75rem;
    font-weight: 500; color: var(--text-secondary); background: transparent;
    border: 1px dashed var(--border-glass); border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease;
}

.btn-add-client:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background-color: var(--bg-glass);
}


/* --- Right Column: Client Control Panel --- */
.client-control-panel-column {
    flex: 1;
}

.client-control-panel { display: none; }
.client-control-panel.active { display: block; }

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.header-actions { display: flex; gap: 0.75rem; }

.bot-select-dropdown {
    background-color: var(--bg-glass); color: var(--text-secondary);
    border: 1px solid var(--border-glass); border-radius: 8px;
    padding: 0.5rem 0.75rem; font-size: 0.875rem;
}
.bot-select-dropdown:focus { outline: none; border-color: var(--accent-blue); }

.btn.btn-primary {
    background-color: var(--accent-blue); color: white;
    font-weight: 600; border: none; padding: 0.5rem 1rem;
}

.live-view-container {
    position: relative; border-radius: 10px;
    overflow: hidden; border: 1px solid var(--border-glass);
    background-color: #000;
}

.live-view-image {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 9; object-fit: cover;
}

.live-view-overlay { position: absolute; top: 1rem; left: 1rem; }

.overlay-status {
    background-color: rgba(244, 63, 94, 0.8); color: white;
    padding: 0.25rem 0.75rem; border-radius: 99px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2);
}

.panel-bot-controls {
    display: flex; gap: 1rem; margin-top: 1rem;
    border-top: 1px solid var(--border-glass); padding-top: 1rem;
}

.btn.btn-control {
    flex-grow: 1; display: flex; align-items: center;
    justify-content: center; gap: 0.5rem; padding: 0.75rem;
    font-size: 0.875rem; font-weight: 500; background: var(--bg-glass);
    border: 1px solid var(--border-glass);
}
.btn.btn-control:hover { border-color: var(--text-secondary); }
.btn.btn-control.btn-stop:hover { border-color: var(--accent-red); color: var(--accent-red); }


/* --- Bottom Section: Library & Recently Ran --- */
.bot-library-container { flex: 1.5; }
.recently-ran-bots-container { flex: 1; }

/* Bot Library (Original Style) */
.bot-list-item {
    margin-top: .5em !important;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; background-color: var(--bg-glass);
    border: 1px solid var(--border-glass); border-radius: 8px;
    margin-bottom: 0.5rem; transition: all 0.2s ease-in-out;
}

.group-bots-container .bot-list-item{
margin-top: 0em !important;
margin-bottom: 0 !important;

}

.bot-list-item:hover { transform: translateY(-2px); border-color: var(--accent-blue); }
.bot-identity { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; color: var(--text-primary); }
.bot-icon { font-size: 1.25rem; color: var(--text-secondary); }
.bot-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-run, .btn-edit, .btn-more { font-family: sans-serif; background: var(--bg-primary); border: 1px solid var(--border-glass); padding: 0.25rem 0.5rem; }

/* Recently Ran */
.recently-ran-list { display: flex; flex-direction: column; gap: 1.5rem; }

.recent-bot-item {
    width: 100%; background: var(--bg-glass);
    border: 1px solid var(--border-glass); border-radius: 10px;
    overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease;
}
.recent-bot-item:hover { transform: translateY(-3px); border-color: var(--accent-blue); }

.recent-bot-screenshot {
    width: 100%; height: 150px;
    object-fit: cover; display: block;
    border-radius: 10px 10px 0 0;
}

.recent-bot-content-wrapper { display: flex; align-items: center; padding: 1rem; gap: 1rem; }
.recent-bot-details { flex-grow: 1; }
.recent-bot-name { display: block; font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.recent-bot-last-run { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.bot-stats { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--text-secondary); }
.bot-stat-item { display: flex; align-items: center; gap: 0.5rem; }
.bot-stat-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.recent-bot-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.btn.btn-edit { background: var(--bg-glass); border: 1px solid var(--border-glass); font-size: 0.875rem; font-weight: 500; }
.btn.btn-edit:hover { border-color: var(--accent-blue); color: var(--accent-blue); filter: brightness(1.1); }

/* --- Dropdown Option Fix --- */
.bot-select-dropdown option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem; /* Optional: Adds some nice spacing */
}

/* =================================================================== */
/* ADD NEW CLIENT WIZARD STYLES (Scoped to #clientConnectFlow)
/* =================================================================== */
#clientConnectFlow .ccw-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    z-index: 132423432424001;
}

#clientConnectFlow .ccw-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#clientConnectFlow .ccw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-glass);
}

#clientConnectFlow .ccw-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

#clientConnectFlow .ccw-close-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
#clientConnectFlow .ccw-close-button:hover {
    color: var(--text-primary);
}

#clientConnectFlow .ccw-body {
    padding: 1.5rem;
}

#clientConnectFlow .ccw-step {
    display: none;
}
#clientConnectFlow .ccw-step.ccw-step-active {
    display: block;
}

#clientConnectFlow .ccw-step-description {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1.5rem;
}

#clientConnectFlow .ccw-choice-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#clientConnectFlow .ccw-choice-button {
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

#clientConnectFlow .ccw-choice-button:hover {
    border-color: var(--accent-blue);
    transform: translateY(-3px);
}

#clientConnectFlow .ccw-choice-button h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}
#clientConnectFlow .ccw-choice-button p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* --- Form & Summary Styles --- */
#clientConnectFlow .ccw-form-group {
    margin-bottom: 1.5rem;
}
#clientConnectFlow .ccw-form-group label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
#clientConnectFlow .ccw-form-group input {
    width: 100%;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1rem;
}
#clientConnectFlow .ccw-form-group input:focus {
    outline: none;
    border-color: var(--accent-blue);
}
#clientConnectFlow .ccw-field-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
#clientConnectFlow .ccw-action-button {
    width: 100%;
    padding: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

#clientConnectFlow .ccw-summary-list {
    background-color: var(--bg-glass);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0 1.5rem 0;
}
#clientConnectFlow .ccw-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-glass);
}
#clientConnectFlow .ccw-summary-item:last-child {
    border-bottom: none;
}
#clientConnectFlow .ccw-summary-label {
    color: var(--text-secondary);
}
#clientConnectFlow .ccw-summary-value {
    color: var(--text-primary);
    font-weight: 500;
}

#clientConnectFlow .ccw-summary-actions {
    display: flex;
    gap: 1rem;
}
#clientConnectFlow .ccw-secondary-button {
    flex-grow: 1;
    background: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    padding: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
}
#clientConnectFlow .ccw-summary-actions .ccw-action-button {
    flex-grow: 2;
}

/* This new wrapper controls the overall size and positions the button */
.client-section-wrapper {
    display: flex;
    flex-direction: column; /* Stacks the list and button vertically */
    flex: 1;
    max-width: 350px;
    max-height: 420px; /* The max-height is on the parent now */
}

/* This new scroller handles the overflow for the list only */
.client-list-scroller {
    overflow-y: auto; /* Shows scrollbar only when needed */
    flex-grow: 1;     /* Allows the list to take up all available space, pushing the button down */
    padding-right: 4px; /* Prevents scrollbar from overlapping content */
}

/* Ensure the button doesn't shrink and has proper spacing */
.btn-add-client {
    flex-shrink: 0; /* Prevents the button from getting squashed */
    margin-top: 1rem;
}

/* --- Client List Context Menu --- */
.client-menu {
    position: relative;
}

.client-menu-content {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0;
    width: 160px;
    background-color: #1c1c25;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    z-index: 10;
    padding: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.client-menu-content a {
    display: block;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
}

.client-menu-content a:hover {
    background-color: var(--accent-blue);
    color: white;
}

.client-menu-content a.danger-text:hover {
    background-color: var(--accent-red);
    color: white;
}

/* --- Loading Indicator Styles --- */
.loading-indicator {
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Ensures it's visible in empty containers */
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-glass);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- State Management --- */
/* When a container has the .is-loading class... */
.is-loading > .loading-indicator {
    display: flex; /* ...show its loader. */
}

/* --- Menu Z-Index Fix --- */
.client-list-item.menu-is-open {
    /* This brings the entire client item to the front */
    z-index: 10;
    position: relative; /* z-index only works on positioned elements */
}

/* =================================================================== */
/* CLIENT SETTINGS MODAL STYLES (EXPANDED)
/* =================================================================== */
#clientSettingsModal .csm-container {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 550px; z-index: 23434334001;
}
#clientSettingsModal .csm-content {
    background-color: var(--bg-primary); border: 1px solid var(--border-glass);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#clientSettingsModal .csm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-glass);
}
#clientSettingsModal .csm-title {
    font-size: 1.125rem; font-weight: 600; color: var(--text-primary);
}
#clientSettingsModal .csm-close-button {
    background: none; border: none; color: var(--text-secondary);
    font-size: 2rem; line-height: 1; cursor: pointer;
}
#clientSettingsModal .csm-body {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    max-height: 70vh; overflow-y: auto;
}
#clientSettingsModal .csm-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-glass);
}
#clientSettingsModal .csm-section:first-child {
    margin-top: 0; padding-top: 0; border-top: none;
}
#clientSettingsModal .csm-section-title {
    color: var(--text-primary); font-size: 0.875rem;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
}
#clientSettingsModal .csm-form-group {
    margin-bottom: 1.25rem;
}

.csm-subsection .csm-form-group{
    display: flex;
}

#clientSettingsModal .csm-form-group label {
    display: block; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 0.5rem;
}
#clientSettingsModal .csm-form-group input,
#clientSettingsModal .csm-form-group select {
    width: 100%; background-color: var(--bg-glass);
    border: 1px solid var(--border-glass); color: var(--text-primary);
    padding: 0.75rem; border-radius: 8px; font-size: 1rem;
}
#clientSettingsModal .csm-field-description {
    font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem;
}
#clientSettingsModal .csm-footer {
    padding: 1.5rem; border-top: 1px solid var(--border-glass);
    margin: 1.5rem -1.5rem -1.5rem -1.5rem;
}
#clientSettingsModal .csm-action-button {
    width: 100%; padding: .2em; font-weight: 600;
    font-size: 1rem; color: white; background: var(--accent-blue);
    border: none; border-radius: 8px; cursor: pointer;
}

/* --- NEW Toggle Switch Styles --- */
#clientSettingsModal .csm-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#clientSettingsModal .csm-toggle-group label {
    margin-bottom: 0;
}
#clientSettingsModal .csm-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
#clientSettingsModal .csm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#clientSettingsModal .csm-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    transition: .4s;
    border-radius: 28px;
}
#clientSettingsModal .csm-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: .4s;
    border-radius: 50%;
}
#clientSettingsModal input:checked + .csm-slider {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}
#clientSettingsModal input:checked + .csm-slider:before {
    transform: translateX(22px);
    background-color: white;
}

/* Add styling for the new setup instructions panel */
.setup-instructions {
    display: none; /* Hidden by default */
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background-color: var(--bg-glass);
    border-radius: 10px;
}
.setup-instructions h4 {
    color: var(--text-primary);
    margin-top: 0;
}
.setup-instructions p {
    line-height: 1.6;
}
.setup-instructions code {
    background-color: var(--bg-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--accent-cyan);
}

.setup-instructions p{
    margin-bottom: 1em;
}

/* Add this variable to your :root section */
:root {
    /* ... your other variables ... */
    --accent-yellow: #f59e0b;
}

/* Add these rules for the new status */
.status-indicator.paused { background-color: var(--accent-yellow); }
.client-status-text.paused { color: var(--accent-yellow); }
.overlay-status.status-paused { background-color: rgba(245, 158, 11, 0.8); } /* Yellow for paused status */

.client-list{
    color: #ffffff;
}

/*
 * CSS for Smoother Loading Indicators
 * This makes the spinners appear as overlays instead of pushing content.
*/

/* 1. Make the parent containers positioning contexts */
.client-control-panel-column,
.bot-library-container,
.recently-ran-bots-container {
    position: relative;
    /* Optional: A minimum height prevents the container from collapsing if it's empty before loading */
    min-height: 150px;
}

.bot-list{
    position: relative;
    min-height: 150px;
    max-height: 263px;
    overflow-y: auto;
}

/* 2. Style the loading indicator as an absolute overlay */
.loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Semi-transparent dark background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Ensure it's on top of other content */
    border-radius: 8px; /* Match your container's border-radius */
    
    /* Hide it by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* 3. When the parent has the 'is-loading' class, fade in the overlay */
.is-loading > .loading-indicator {
    opacity: 1;
    visibility: visible;
}

/* 4. Ensure the content underneath is hidden while loading to prevent weird overlaps */
.is-loading > *:not(.loading-indicator) {
    opacity: 0.2;
    filter: blur(2px);
}

/*
 * UNIFIED STATUS INDICATOR COLORS
 * Ensures status colors are consistent across the dashboard.
*/

/* --- Text Color for the Client List --- */
.client-status-text.running,
.client-status-text.online {
    color: #34d399; /* Green */
}

.client-status-text.idle {
    color: #22d3ee; /* Blue */
}

.client-status-text.paused {
    color: #f59e0b; /* Yellow/Orange */
}

.client-status-text.offline {
    color: #99aab5; /* Gray */
}


/* --- Background Color for the Overlay Pill --- */
.overlay-status.status-running,
.overlay-status.status-online {
    background-color: #34d399; /* Green */
    color: white;
}

.overlay-status.status-idle {
    background-color: #22d3ee; /* Blue */
    color: white;
}

.overlay-status.status-paused {
    background-color: #f59e0b; /* Yellow/Orange */
    color: white;
}

.overlay-status.status-offline {
    background-color: #99aab5; /* Gray */
    color: white;
}

.ccw-error-message {
    background-color: #452020;
    color: #ff8a8a;
    border: 1px solid #a13535;
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 15px;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1em;
}

/* =================================================================== */
/* == MODERN, CLEAN & SLEEK THEME (FULLY SCOPED)                == */
/* =================================================================== */

/* Define the new color palette and font on the parent container */
#clientDropdown {
    --bg-surface: #202124;    /* The main background for panels */
    --bg-hover: #2d2e31;      /* A subtle hover background */
    --border-default: #3c4043;  /* Default border color */
    --border-focus: #8ab4f8;   /* An accent color for focus/hover */
    --text-primary: #e8eaed;     /* Primary, readable text */
    --text-secondary: #9aa0a6;   /* Secondary text for icons/meta */

    font-family: 'Inter', sans-serif; /* Apply the clean font */
}

/* --- Main Bar (The Clickable Button) --- */
#clientDropdown {
    position: relative;
    display: block;
    width: 100%;
    background-color: #171717;
    border: 1px solid var(--border-default);
    border-left: none;
    border-right: none;
    padding: 9px 18px;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-bottom: 1px solid #ffffff29;
}

/* #clientDropdown:hover,
#clientDropdown.open {
    border-color: var(--border-focus);
} */

#clientDropdown .currentClientSelection {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#clientDropdown .selected-client {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

#clientDropdown .down-arrow-dropdown {
    width: 18px;
    height: 18px;
    fill: var(--text-secondary);
    transition: transform 0.2s ease;
}

/* --- Dropdown Panel (The List Container) --- */
#clientDropdown .dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    margin-top: 8px;
    z-index: 9994353545459;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#clientDropdown #clientList {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 350px;
    overflow-y: auto;
}

/* --- Individual Client Items --- */
#clientDropdown .client-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

#clientDropdown .client-item:hover {
    background-color: var(--bg-hover);
}

#clientDropdown .client-name {
    flex-grow: 1;
    margin-right: auto;
    font-weight: 500;
    color: var(--text-primary);
}

/* --- Status Indicators & Favorite Star --- */
#clientDropdown .status-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
#clientDropdown .status-indicator.running { background-color: #34a853; }
#clientDropdown .status-indicator.paused  { background-color: #fbbc05; }
#clientDropdown .status-indicator.idle    { background-color: #4285f4; }
#clientDropdown .status-indicator.offline { background-color: #5f6368; }

#clientDropdown .favorite-star {
    font-size: 1.2em;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

#clientDropdown .client-item.favorited .favorite-star {
    color: #fbbc05; /* Match the 'paused' color for harmony */
}

/* --- Action Buttons --- */
#clientDropdown .edit-client,
#clientDropdown .delete-client,
#clientDropdown .save-client {
    background-color: #3c4043;
    color: var(--text-primary);
    border: 1px solid #5f6368;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#clientDropdown .edit-client:hover,
#clientDropdown .save-client:hover {
    background-color: #4d5155;
    border-color: #9aa0a6;
}

#clientDropdown .delete-client {
    background-color: transparent;
    border-color: transparent;
    color: #ea4335;
}

#clientDropdown .delete-client:hover {
    background-color: rgba(234, 67, 53, 0.1);
    color: #f28b82;
}

/* =================================================================== */
/* == NEW STRUCTURED CARD DESIGN (FULLY SCOPED)                 == */
/* =================================================================== */

/* --- The List Container --- */
#clientDropdown #clientList {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between each client card */
}

/* --- The Client Card Itself --- */
#clientDropdown .client-item {
    display: flex;
    flex-direction: column; /* Stack main info and details vertically */
    gap: 10px;
    background-color: #2d2e31; /* A distinct background for the card */
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#clientDropdown .client-item:hover {
    border-color: #55585c;
    background-color: #333538;
}

#clientDropdown .client-item.favorited {
    border-left: 3px solid var(--border-focus);
}

/* --- Top Row of the Card (Name & Actions) --- */
#clientDropdown .client-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#clientDropdown .client-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

#clientDropdown .client-name {
    font-size: 1.1em;
    font-weight: 600; /* Make the name stand out */
    color: var(--text-primary);
}

#clientDropdown .client-actions {
    display: flex;
    gap: 8px;
}

/* --- Bottom Row of the Card (Details Bar) --- */
#clientDropdown .client-details-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow details to wrap on smaller screens */
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-default); /* Divider line */
    width: 100%;
}

#clientDropdown .detail-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--text-secondary);
    background-color: #3c4043;
    padding: 4px 8px;
    border-radius: 12px; /* Pill shape */
}

#clientDropdown .detail-chip svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* --- Status Indicator inside the Detail Chip --- */
#clientDropdown .detail-chip .status-indicator {
    width: 8px;
    height: 8px;
}

/* --- New Target Info Bar Styling --- */
#clientDropdown .client-target-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0,0,0,0.15);
    padding: 8px 10px;
    border-radius: 6px;
    margin-top: 4px; /* Space it from the main info */
    border: 1px solid var(--border-default);
    font-size: 0.9em;
    color: var(--text-secondary);
}

#clientDropdown .client-target-info svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: var(--text-secondary);
}

#clientDropdown .client-target-info strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* --- Adjustments for the Details Bar --- */
#clientDropdown .client-details-bar {
    gap: 8px 10px; /* More compact spacing */
}

#clientDropdown .detail-chip {
    padding: 3px 8px; /* Slightly smaller chips */
}

/* --- Target Info & Details Bar Alignment --- */
#clientDropdown .client-details-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 8px 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-default);
    width: 100%;
}

/* This new rule pushes the target info to the far right */
#clientDropdown .client-target-info {
    margin-left: auto; 
    background-color: transparent; /* Remove the old background */
    border: none;
    padding: 0;
}

#clientDropdown .client-target-info strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* --- Redesigned Delete Button --- */
#clientDropdown .delete-client {
    /* Base style copied from edit button */
    background-color: #4f2b2b;
    border: 1px solid #7a4141;
    color: #f28b82;

    /* Re-add shared button properties */
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#clientDropdown .delete-client:hover {
    background-color: #633737;
    border-color: #f28b82;
    color: #fff;
}

/* --- Client List Organization --- */

/* Style for the 'Group by Type' button */
.client-list-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-right: 10px; /* Space for the button */
    margin-bottom: 8px;
}

.btn-organize-clients {
    background-color: #3e4c5e;
    color: #d8dee9;
    border: 1px solid #4c566a;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s, color 0.2s;
}

.btn-organize-clients:hover {
    background-color: #4c566a;
}

.btn-organize-clients.active {
    background-color: #88c0d0;
    color: #2e3440;
    border-color: #88c0d0;
}

.btn-organize-clients svg {
    width: 14px;
    height: 14px;
}

/* Style for the group headers (e.g., "Local Clients") */
.client-group-header {
    font-size: 13px;
    font-weight: 600;
    color: #81a1c1;
    text-transform: uppercase;
    padding: 15px 10px 5px 10px;
    border-bottom: 1px solid #3b4252;
    margin-top: 10px;
}

.client-group-header:first-child {
    margin-top: 0;
}

/* --- Client Item Tag --- */

/* Container to hold the name and tag on the same line */
.client-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

/* The tag itself (Local/External) */
.client-type-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1;
}

/* Color for the 'Local' tag */
.type-local {
    background-color: #a3be8c; /* Green */
    color: #2e3440;
}

/* Color for the 'External' tag */
.type-external {
    background-color: #ebcb8b; /* Yellow */
    color: #2e3440;
}

.client-group-header:first-child {
    /* margin-bottom: 1em; */
}

.client-list-item{
    margin-top: 1em;
}

.scenario-list-item  button{
    color: #000;
}

/* /assets/css/style.css */

/* Add Client/Bot Choice Modal Styles */
.acb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 301312321300;
}

.acb-modal-container {
    background-color: #282b30;
    color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    border: 1px solid #4f545c;
    animation: acb-fade-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes acb-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.acb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #4f545c;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.acb-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-family: 'Merriweather', serif;
    font-weight: 400;
}

.acb-modal-close {
    background: none;
    border: none;
    color: #b0b3b8;
    font-size: 2.2em;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.acb-modal-close:hover {
    color: #ffffff;
}

.acb-choice-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.acb-choice-button {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 20px 25px;
    background-color: #36393f;
    border: 1px solid #4f545c;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: #ffffff;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.acb-choice-button:hover {
    background-color: #40444b;
    border-color: #7289da;
    transform: translateY(-4px);
}

.acb-choice-button h3 {
    margin: 0 0 10px 0;
    font-size: 1.25em;
    color: #7289da;
    font-family: 'Inter', sans-serif;
}

.acb-choice-button p {
    margin: 0;
    font-size: 0.95em;
    color: #dcddde;
    line-height: 1.6;
}

@media (max-width: 680px) {
    .acb-choice-wrapper {
        flex-direction: column;
    }
}

        /* Style for the container when split view is active */
        .live-view-container.split-view-active {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Creates a responsive grid */
            gap: 4px;
            width: 100%;
            height: 100%;
            background-color: #1a1a1a;
            padding: 4px;
            box-sizing: border-box;
            overflow-y: auto; /* Add scroll for many clients */
        }

        /* Individual client viewport in the grid */
        .split-view-item {
            position: relative;
            background-color: #000;
            border: 1px solid #444;
            border-radius: 8px;
            overflow: hidden;
            min-height: 200px; /* Ensure a minimum height */
        }

        .split-view-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image covers the area without distortion */
            display: block;
        }

        /* Overlay for the client's name */
        .split-view-item .client-name-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: #fff;
            padding: 12px 8px 8px;
            font-size: 14px;
            font-weight: 500;
            text-align: left;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        /* Button to toggle split view */
        #toggle-split-view-btn {
            background-color: #4a5568;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s;
        }

        #toggle-split-view-btn:hover {
            background-color: #2d3748;
        }

        #toggle-split-view-btn.active {
            background-color: #3b82f6; /* Blue when active */
        }

        /* Hide the original panel when split view is on */
        .split-view-active .client-control-panel {
            display: none !important;
        }

        /* Basic Styling for the new context menu */
    #watcher-context-menu {
        display: none;
        position: absolute;
        background-color: #2c3034;
        border: 1px solid #4a4f56;
        border-radius: 5px;
        padding: 5px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 99999999999;
        font-family: 'Inter', sans-serif;
    }
    #watcher-context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        color: #d1d5db;
    }
    #watcher-context-menu li {
        padding: 8px 15px;
        cursor: pointer;
        font-size: 14px;
    }
    #watcher-context-menu li:hover {
        background-color: #373b41;
    }
    #watcher-context-menu .danger-option {
        color: #f87171;
    }
    #watcher-context-menu .danger-option:hover {
        background-color: #4b1f24;
    }

    /* --- Save Template Modal Fix --- */
    /* This makes the modal fade in smoothly instead of just appearing */
    #save-template-modal {
        transition: opacity 0.25s ease-in-out;
        z-index: 324324324242442424324324324;
    }

    /* This ensures the modal content is fully opaque and easy to see */
    #save-template-modal .sce-modal-content {
        opacity: 1;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    /* --- Toggle Switch Styling --- */
    /* This creates the container for the switch */
    .csm-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
    }

    /* Hide the default HTML checkbox */
    .csm-switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* This is the track of the switch */
    .csm-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #4a4f56; /* "Off" color */
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 28px;
    }

    /* This is the sliding knob */
    .csm-slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 50%;
    }

    /* Change color and knob position when checked */
    input:checked + .csm-slider {
      background-color: #3b82f6; /* "On" color */
    }

    input:checked + .csm-slider:before {
      -webkit-transform: translateX(22px);
      -ms-transform: translateX(22px);
      transform: translateX(22px);
    }


    /* --- Notification System --- */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 103242423432434232430000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sliding-alert {
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    background-color: #2c3034;
    border: 1px solid #4a4f56;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
    font-family: 'Inter', sans-serif;
}

.sliding-alert.show {
    opacity: 1;
    transform: translateX(0);
}

/* --- Template Preview Modal Redesign & Fix --- */
.template-preview-modal-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.25s ease;
}

.template-preview-modal-content {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.template-preview-header {
    padding: 20px 25px;
    border-bottom: 1px solid #374151;
}

.template-preview-title {
    font-size: 22px;
    color: #fff;
    margin: 0;
}

.template-preview-meta {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 5px;
}

.template-preview-body {
    display: flex;
    gap: 25px;
    overflow-y: auto;
    flex-direction: column;
}

.template-preview-left {
    flex: 1;
}

.template-preview-right {
    flex: 1.5;
    min-width: 0;
}

.template-preview-section h3 {
    font-size: 16px;
    color: #e5e7eb;
    margin-top: 0;
    margin-bottom: 10px;
}

.template-preview-timeline {
    background-color: #111827;
    border-radius: 8px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.timeline-command-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #374151;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.timeline-command-icon {
    flex-shrink: 0;
}

.timeline-command-details {
    display: flex;
    flex-direction: column;
}

.timeline-command-name {
    color: #e5e7eb;
    font-weight: 500;
}

.timeline-command-args {
    font-size: 12px;
    color: #9ca3af;
}

/* #template-preview-modal .sce-modal-content{
    opacity: 1 !important;
}
 */

 /* --- Template Preview Modal Redesign --- */
#template-preview-modal .sce-modal-content {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    width: 100%;
    max-width: 600px; /* Adjusted for single column */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

#template-preview-modal .template-preview-header {
    padding: 20px 25px;
    border-bottom: 1px solid #374151;
    flex-shrink: 0;
}

#template-preview-modal .template-preview-title {
    font-size: 22px;
    color: #fff;
    margin: 0;
}

#template-preview-modal .template-preview-meta {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 5px;
}

/* This is the new main container for a single-column layout */
#template-preview-modal .template-preview-body {
    /* padding: 25px; */
    overflow-y: auto;
}

#template-preview-modal .template-preview-section h3 {
    font-size: 16px;
    color: #e5e7eb;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #374151;
}

/* --- New Timeline Item Styles --- */
.preview-command-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: #374151; /* Default background */
}

.preview-command-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.preview-command-details {
    display: flex;
    flex-direction: column;
}

.preview-command-name {
    color: #e5e7eb;
    font-weight: 500;
}

.preview-command-args {
    font-size: 13px;
    color: #9ca3af;
}

/* Unique Colors for Each Command Type */
.preview-command--target { background-color: #3a2d5c; border-color: #5a4882; }
.preview-command--find { background-color: #2b4669; border-color: #43699e; }
.preview-command--click { background-color: #275249; border-color: #3a796c; }
.preview-command--movemouse { background-color: #2c5364; border-color: #4a7c8c; }
.preview-command--delay { background-color: #6a4a2a; border-color: #996e3f; }
.preview-command--keyboard { background-color: #4a4f56; border-color: #6b7280; }


/* --- Global Modal Opacity & Animation Fix --- */

/* This targets the inner content box of ANY visible modal */
.sce-modal-backdrop:not([style*="display: none"]) .sce-modal-content {
    /* Ensures the content box is never transparent */
    opacity: 1;
    
    /* Adds a subtle "pop-in" animation for a nicer feel */
    transform: scale(1);
    transition: transform 0.25s ease;
}

/* This sets the starting state for the animation */
.sce-modal-content {
    transform: scale(0.95);
}

/* This creates the horizontally scrollable container */
.template-preview-timeline {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px; /* Space for scrollbar */
    background-color: #111827;
    border-radius: 8px;
    padding: 15px;
}

/* Update the command items for horizontal layout */
.preview-command-item {
    flex-shrink: 0; /* Prevents items from squishing */
    width: auto;
    margin-right: 12px;
    height: 60px;
    display: flex;
    flex-direction: column; /* Stack content vertically inside the card */
    align-items: flex-start;
}

/* Container for the image thumbnails */
.preview-command-images {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}

.preview-command-images img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    border: 1px solid #4a4f56;
}

/* --- Add these styles to index.php --- */

/* Updated Header Styles */
#template-preview-modal .template-preview-header {
    padding: 25px;
    border-bottom: 1px solid #374151;
    background-color: #2b3546; /* Slightly different background for depth */
    border-radius: 11px 11px 0 0;
}

/* Container for Title + Game Tag */
.header-main-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

#template-preview-modal .template-preview-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* New "Game" Tag Styling */
.game-tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: #3b82f6; /* Blue accent color */
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 9999px; /* Pill shape */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#template-preview-modal .template-preview-meta {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
}

/* Card style for the description */
.details-card {
    background-color: #2b3546;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 20px;
}

.details-card h4 {
    font-size: 19px;
    color: #E5E7EA;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.details-card p {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
/* --- Add these styles to index.php --- */

/* The main container for all template details */
.template-details-panel {
    background-color: #2b3546;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 25px;
}

/* Two-column layout for the details */
.details-columns {
    display: grid;
    grid-template-columns: 1fr 0.8fr; /* Left column wider than the right */
    gap: 25px;
}

.details-columns h3 {
    font-size: 16px;
    color: #e5e7eb;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #4a4f56;
}

.details-columns p {
    color: #d1d5db;
    line-height: 1.6;
    margin: 0;
}

/* Clean list style for stats */
.stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.stat-label {
    color: #9ca3af;
}

.stat-value {
    color: #fff;
    font-weight: 500;
}

.details-divider {
    border: none;
    height: 1px;
    background-color: #374151;
    margin: 20px 0;
}

/* --- Template Manager Redesign --- */
#template-manager-modal {
    transition: opacity 0.25s ease;
}
.template-manager-container { display: flex; flex-direction: column; height: 100%; }
.template-manager-tabs { display: flex; border-bottom: 1px solid #374151; padding: 0 25px; flex-shrink: 0; }
.tm-tab { background: none; border: none; color: #9ca3af; padding: 15px 20px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 500; transition: color 0.2s, border-color 0.2s; }
.tm-tab:hover { color: #fff; }
.tm-tab.active { color: #fff; border-bottom-color: #3b82f6; }
.template-manager-content { padding: 20px; overflow-y: auto; flex-grow: 1; }
.tm-tab-pane { display: none; }
.tm-tab-pane.active { display: block; }
.tm-header { margin-bottom: 15px; }
.tm-search { width: 100%; padding: 10px 14px; background-color: #111827; border: 1px solid #4a4f56; border-radius: 6px; color: #fff; font-size: 14px; }
.tm-table-container { border: 1px solid #374151; border-radius: 8px; overflow: hidden; }
.tm-table-container table { width: 100%; border-collapse: collapse; }
.tm-table-container th, .tm-table-container td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #374151; }
.tm-table-container th { font-size: 12px; color: #9ca3af; text-transform: uppercase; background-color: #2b3546; letter-spacing: 0.05em; }
.tm-table-container td { font-size: 14px; color: #d1d5db; }
.tm-table-container tbody tr:last-child td { border-bottom: none; }
.tm-table-container tbody tr:nth-child(even) { background-color: #2b3546; }
.tm-table-container .tm-actions { width: 1%; white-space: nowrap; }

/* Use existing button styles for consistency */
.tm-actions .sce-btn {
    margin-right: 8px;
    padding: 6px 12px;
    font-size: 13px;
}

#install-template-modal{
    z-index: 3248239432424424;
}

.split-view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    height: 100%;
    align-content: flex-start;
    padding: 5px;
    box-sizing: border-box;
    background-color: #202225; /* Match theme */
}

.split-view-item {
    position: relative;
    flex-grow: 1;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    overflow: hidden;
    background-color: #1a1a1a;
    /* Base size for 2 columns, will wrap to 3+ */
    flex-basis: calc(50% - 8px);
    min-width: calc(33.33% - 8px);
}

/* Specific counts for better layout control */
.split-view-grid[data-count="1"] .split-view-item { flex-basis: 100%; }
.split-view-grid[data-count="2"] .split-view-item { flex-basis: calc(50% - 8px); }
.split-view-grid[data-count="3"] .split-view-item { flex-basis: calc(50% - 8px); } /* 2x2 with empty spot */

.split-view-stream-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-view-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-view-empty {
    width: 100%;
    text-align: center;
    padding: 50px;
    font-size: 16px;
    color: #888;
}

/*
  Make the main panel a flex container that lays out its children (header, view, controls) vertically.
  It needs a height of 100% to fill its parent column.
*/
.client-control-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*
  This is the key change. It tells the live-view-container (which holds your grid)
  to grow and take up any available empty space within the panel.
*/
.live-view-container {
    flex-grow: 1;
    min-height: 0; /* Prevents potential overflow issues with flexbox */
}

/* Ensure the split-view grid itself fills its now-expanded parent.
  Just add `height: 100%;` to your existing rule.
*/
.split-view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    height: 100%; /* <-- Add this line */
    align-content: flex-start;
    padding: 5px;
    box-sizing: border-box;
    background-color: #202225;
}

.recently-ran-list div{
    color: #f2f2f2;
    font-size: 12px;
}

/*
  To use this style, apply the class "panel-add-button" 
  to your button element.
  
  Example:
  <button class="panel-add-button">
    <span>+</span> Create Bot
  </button>
*/

.panel-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    width: 100%;
    margin-top: 1em;
    background-color: rgba(44, 44, 76, 0.2);
    color: #b0b0d0;
    border: 1px dashed #4a4a6a;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  .panel-add-button:hover {
    background-color: rgba(58, 58, 90, 0.4); /* Lighten background on hover */
    border-color: #7b7ba3; /* Make border color brighter */
    color: #e0e0f0; /* Make text brighter */
  }

  /* --- Unique CSS for the New Bot Modal (with User's Preferred Colors) --- */

/* The dark overlay that covers the entire screen */
.nbm-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 34343434432000;
}

/* The visible panel of the modal */
.nbm-panel {
    background-color: #1a1a2e; /* Dark panel background from sce- */
    border: 1px solid #2c2c4c;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    width: 500px;
    max-width: 90vw;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
}

/* Header section */
.nbm-header {
    padding: 16px 24px;
    border-bottom: 1px solid #2c2c4c;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nbm-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.nbm-close-btn {
    background: none;
    border: none;
    color: #a0a0c0;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.nbm-close-btn:hover {
    color: #ffffff;
}

/* Body section */
.nbm-body {
    padding: 24px;
    line-height: 1.6;
}

.nbm-description {
    margin: 0 0 20px 0;
    color: #c0c0e0;
}

.nbm-form-group {
    margin-bottom: 16px;
}

.nbm-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #c0c0e0;
}

.nbm-input {
    width: 100%;
    padding: 10px 12px;
    background-color: #101021; /* Darker input background from sce- */
    border: 1px solid #3a3a5c;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.nbm-input:focus {
    outline: none;
    border-color: #7a7add;
    box-shadow: 0 0 0 3px rgba(122, 122, 221, 0.2);
}

/* Error message styling */
.nbm-error-msg {
    color: #ff6b6b; /* Light red for errors from ccw- */
    font-size: 14px;
    margin-top: 8px;
}

/* Footer section */
.nbm-footer {
    padding: 16px 24px;
    border-top: 1px solid #2c2c4c;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background-color: #161625;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* General button styling */
.nbm-btn {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Confirm/Primary button */
.nbm-btn-confirm {
    background-color: #4a47a3; /* Purple color from sce-btn-primary */
    color: #ffffff;
}

.nbm-btn-confirm:hover {
    background-color: #5d5aa3;
    transform: translateY(-1px);
}

/* Cancel/Secondary button */
.nbm-btn-cancel {
    background-color: #3a3a5c; /* Darker purple from sce-btn-secondary */
    color: #c0c0e0;
}

.nbm-btn-cancel:hover {
    background-color: #4f4f7a;
}

/* --- Scoped Styling for NEW Bot Group Design --- */

.task-bots-container .bot-group {
    margin-bottom: 4px;
}

.task-bots-container .group-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    gap: 1em;
    padding: 10px 15px;
    background-color: #121221;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    margin-top: 1em;
    margin-bottom: .5em;
}

.task-bots-container .group-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #e0e0e0;
}

.task-bots-container .group-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-bots-container .group-bots-container {
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-bots-container .group-divider {
    border: none;
    height: 1px;
    background-color: #2a2a4a;
    margin: 20px 0;
    margin-bottom: .5em;
}

/* --- NEW Styles for the Toggle Arrow Button --- */
.task-bots-container .toggleGroupBotContent {
    background-color: #3a3a5c;
    padding: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-bots-container .toggleGroupBotContent:hover {
    background-color: #4f4f7a;
}

.task-bots-container .group-toggle-arrow {
    width: 20px;
    height: 20px;
    color: #e0e0e0;
    transition: transform 0.2s ease-in-out;
}

/* When the group is expanded, rotate the arrow */
.task-bots-container .bot-group.is-expanded .group-toggle-arrow {
    transform: rotate(180deg);
}

.tab-panel h3{
    margin-bottom: 1em;
}

.botGroupsTitle{
    margin-bottom: 0.2em !important;
    margin-top: .7em;
}

/* Bot Library Enhancements */
.bot-item-main-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.bot-identity {
    flex-grow: 1; /* Allows the name to take up available space */
}

.bot-meta-info {
    margin: 0 15px;
    font-size: 0.85em;
    color: #a0aec0; /* A soft gray color */
    white-space: nowrap;
}

.bot-actions .btn-toggle-sub-bots {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 5px;
    color: #cbd5e0;
    transition: transform 0.2s ease-in-out;
}

.bot-actions .btn-toggle-sub-bots .toggle-arrow {
    width: 20px;
    height: 20px;
}

.bot-actions .btn-toggle-sub-bots:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.bot-actions .btn-toggle-sub-bots.open {
    transform: rotate(180deg);
}

.sub-bot-list-container {
    padding: 10px 15px 15px 45px; /* Indent to align under the bot name */
    background-color: #2d3748; /* A slightly different background */
    border-top: 1px solid #4a5568;
    margin-top: 10px;
    border-radius: 0 0 6px 6px; /* Rounded corners on the bottom */
}

.sub-bot-list-header {
    font-size: 0.9em;
    color: #a0aec0;
    margin-bottom: 8px;
    font-weight: 600;
}

.sub-bot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    color: #e2e8f0;
}

.sub-bot-list-item {
    padding: 4px 0;
}

.sub-bot-list-empty {
    font-style: italic;
    color: #718096;
}

/*
 * Enhanced Bot Library Dropdown Menu Styles
 * Apply these classes to the HTML elements of your actions menu.
 */

/* This should be the parent container of your '...' button to properly position the dropdown */
.bot-actions {
    position: relative;
}

/* The main container for the dropdown menu */
.actions-dropdown-menu {
    position: absolute;
    display: none; /* Hidden by default, your JS will toggle this */
    right: 0; /* Align to the right of the parent */
    top: calc(100% + 5px); /* Position below the '...' button with a small gap */
    z-index: 100242343342423423423;
    min-width: 200px; /* Give it a consistent width */
    padding: 8px 0; /* Vertical padding */
    background-color: #2d3748; /* A dark, slightly blue-gray background */
    border-radius: 8px; /* Softer, modern corners */
    border: 1px solid #4a5568; /* A subtle border that matches your theme */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
    list-style: none;
}

/* Header for sections like "Recent Tasks" */
.dropdown-header {
    padding: 8px 16px;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: #a0aec0; /* Lighter gray for the header text */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Style for individual, clickable menu items (e.g., <li> tags) */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.9rem; /* 14px */
    color: #e2e8f0; /* Off-white text for readability */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Hover effect for menu items */
.dropdown-item:hover {
    background-color: #4299e1; /* A nice blue accent on hover */
    color: #ffffff;
}

/* Divider to separate groups of actions */
.dropdown-divider {
    height: 1px;
    background-color: #4a5568;
    margin: 8px 0;
}

.bot-list-item{
    position: relative;
    z-index: 32342;
}

/*
 * Stacking Context Fix for Bot Library Menu
 */
 .bot-list-item.is-menu-open {
    /* position: relative is crucial for z-index to work */
    position: relative; 
    /* This lifts the entire active list item above its siblings */
    z-index: 10; 
  }

  /* =================================================================== */
/* NEW: STYLING FOR COLLAPSIBLE SECTIONS & PREVIEW */
/* =================================================================== */

/* --- Collapsible Section Headers --- */
.csm-section.collapsible {
    border-bottom: 1px solid #444;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.csm-section-toggle {
    background-color: transparent;
    border: none;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 5px;
    text-align: left;
    width: 100%;
    position: relative;
    outline: none;
}

.csm-section-toggle:hover {
    color: #ffffff;
}

/* Arrow icon for the toggle button */
.csm-section-toggle::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    transition: transform 0.3s ease;
    color: #888;
}

/* Rotate arrow when section is open */
.csm-section.open .csm-section-toggle::after {
    transform: translateY(-50%) scale(0.8) rotate(180deg);
}

/* --- Content of Collapsible Sections --- */
.csm-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 15px;
}

/* Style for when the section is open */
.csm-section.open .csm-section-content {
    /* A large max-height value ensures it can expand to fit any content */
    max-height: 1400px; 
    padding: 15px 15px 5px;
    transition: max-height 0.5s ease-in, padding 0.5s ease-in;
}


/* --- Subsections for better organization --- */
.csm-subsection {
    border-top: 1px solid #3a3a3e;
    padding-top: 15px;
    margin-top: 15px;
}

.csm-subsection-title {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- Styling for Range Sliders --- */
.csm-form-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 5px;
    outline: none;
    padding: 0;
}

.csm-form-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
}

.csm-form-group input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* --- Styling for Disabled Settings Section --- */
.csm-section.is-disabled .csm-section-content {
    opacity: 0.5;
    pointer-events: none; /* Prevents clicks, drags, and other interactions */
    transition: opacity 0.3s ease;
}

/* We still want the main toggle to be clickable, so we override the pointer-events rule */
.csm-section.is-disabled .csm-toggle-group:first-of-type {
    pointer-events: auto;
}

/* --- NEW: Modern Preview Area Styling --- */
.csm-preview-area {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds space between the canvas and button */
    background-color: rgba(255, 255, 255, 0.05); /* Subtle background */
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#csm-cursor-preview {
    background-color: #1c1c1f;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0; /* Prevents canvas from shrinking */
}

#csm-randomize-cursor {
    flex-grow: 1; /* Allows button to fill remaining space */
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

#csm-randomize-cursor:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

#csm-randomize-cursor:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}

/* =================================================================== */
/* NEW: PRESET NAME MODAL STYLES */
/* =================================================================== */
#presetNameModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 102323232232323002; /* Higher than the settings modal */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pnm-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.pnm-container {
    position: relative;
    background-color: #2c2f33;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    width: 90%;
    max-width: 400px;
    animation: fadeIn 0.3s ease-out;
}

.pnm-content {
    padding: 20px 25px;
}

.pnm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.pnm-title {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.pnm-close-button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.pnm-close-button:hover {
    color: #fff;
}

.pnm-description {
    color: #ccc;
    font-size: 15px;
    margin-bottom: 20px;
}

.pnm-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #eee;
    font-weight: 500;
}

.pnm-form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #1e1e22;
    border: 1px solid #444;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
}

.pnm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #444;
}

.pnm-action-button, .pnm-cancel-button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pnm-action-button {
    background-color: #007bff;
    color: white;
}
.pnm-action-button:hover {
    background-color: #0056b3;
}

.pnm-cancel-button {
    background-color: #555;
    color: #eee;
}
.pnm-cancel-button:hover {
    background-color: #666;
}

/* --- Corrected Sticky Preview Area Styling --- */
.csm-preview-placeholder {
    display: none; /* Hidden by default */
    /* You must set this height to match the exact height of your .csm-preview-area */
    height: 132px; 
}
/* Your original preview area styling (without position: sticky) */
.csm-preview-area {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* assets/css/style.css */

#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 992234324243243499;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    background-color: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-left: 5px solid #555;
    min-width: 250px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification-success {
    background-color: #28a745;
    border-left-color: #218838;
}

.notification-error {
    background-color: #dc3545;
    border-left-color: #c82333;
}

.notification-info {
    background-color: #17a2b8;
    border-left-color: #138496;
}

.csm-form-group .csm-action-button{
    width: 100%;
    padding: 3px;
    font-weight: 600;
    font-size: 15px !important;
    color: white;
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

#csm-randomize-cursor, #csm-save-preset{
    width: 100%; padding: 0.8rem !important; font-weight: 600;
    font-size: 15px !important; color: white; background: var(--accent-blue);
    border: none; border-radius: 8px; cursor: pointer;
}

/* --- Main Visualizer Container --- */
.bot-visualizer {
    /* --- NEW/UPDATED PROPERTIES --- */
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    z-index: 423443343443434343443434;

    /* --- Existing Styles --- */
    background-color: #282a36;
    border-top: 1px solid #44475a; /* Changed from border to border-top */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); /* Shadow on top edge */
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #f8f8f2;
    transition: all 0.3s ease-in-out;
    /* border-radius: 8px 8px 0 0;  */
    overflow: hidden;
}

/* Default (Maximized) State */
.bot-visualizer {
    height: 363px;
    transition: height 0.3s ease-in-out; /* Adds a smooth animation */
  }
  
  /* Minimized State */
  .bot-visualizer.minimized {
    height: 46px; /* Adjust this value to perfectly match your header's height */
    overflow: hidden; /* This is crucial to hide the content when minimized */
  }

/* --- Upgraded Header --- */
.bot-visualizer .visualizer-header {
    background-color: #21222c;
    padding: 8px 12px;
    /* color: #bd93f9; */
    color: #9396f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #44475a;
    cursor: default;
}
.visualizer-header .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.window-controls { display: flex; gap: 6px; }
.window-controls .dot { width: 12px; height: 12px; border-radius: 50%; background: #44475a; }

/* --- Minimize Button --- */
.visualizer-minimize-btn {
    background: transparent;
    border: none;
    color: #9a9a9a;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: background 0.2s;
}
.visualizer-minimize-btn:hover { background: #44475a; color: #fff; }

/* --- Content Area & Line Styling --- */
.bot-visualizer .visualizer-content {
    padding: 10px 15px;
    padding-bottom: 5em;
    height: 100%;
    overflow-y: auto;
    /* white-space: pre-wrap; */
    word-break: break-all;
    counter-reset: line-number;
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.bot-visualizer .line {
    display: flex;
    align-items: start;
    line-height: 1.6;
}

/* --- Line Numbers --- */
.bot-visualizer .line::before {
    counter-increment: line-number;
    content: counter(line-number);
    text-align: right;
    color: #6272a4;
    min-width: 25px;
    margin-right: 15px;
    opacity: 0.8;
}

/* --- Line Icons --- */
.bot-visualizer .line .line-icon {
    margin-right: 10px;
    min-width: 18px;
}
.line-icon .icon-keyword { color: #ff79c6; }
.line-icon .icon-command { color: #8be9fd; }
.line-icon .icon-success { color: #50fa7b; }
.line-icon .icon-error   { color: #ff5555; }
.line-icon .icon-info    { color: #6272a4; }

/* --- Token & Cursor Styles --- */
.bot-visualizer .token-keyword { color: #ff79c6; }
.bot-visualizer .token-command { color: #8be9fd; }
.bot-visualizer .token-string  { color: #f1fa8c; }
.bot-visualizer .token-success { color: #50fa7b; }
.bot-visualizer .token-error   { color: #ff5555; }
.bot-visualizer .cursor {
    display: inline-block;
    background-color: #f8f8f2;
    width: 8px;
    height: 1.2em;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    vertical-align: bottom;
}

@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: #f8f8f2; }
}

/* --- Minimized State --- */
.bot-visualizer.minimized .visualizer-content {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* --- Custom Scrollbar --- */
.visualizer-content::-webkit-scrollbar { width: 8px; }
.visualizer-content::-webkit-scrollbar-track { background: #282a36; }
.visualizer-content::-webkit-scrollbar-thumb { background-color: #44475a; border-radius: 4px; }
.visualizer-content::-webkit-scrollbar-thumb:hover { background-color: #6272a4; }

/* Add these new styles to your existing CSS file */

/* Style for the new timestamp on each line */
.bot-visualizer .line .line-timestamp {
    color: #6272a4; /* Dim color for the timestamp */
    margin-right: 15px;
    font-size: 12px;
}

/* Style for indented, more detailed log entries */
.bot-visualizer .line .log-detail {
    color: #9a9a9a; /* Grey color for detailed text */
    padding-left: 20px; /* Indent the text */
}

/* Modify the .line class to better align all the new elements */
.bot-visualizer .line {
    display: flex;
    align-items: baseline; /* Align text baselines for a cleaner look */
    line-height: 1.7;
}

/* Add these new and updated styles to your CSS file */

/* --- Toolbar Styling --- */
.visualizer-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.visualizer-toolbar button, .visualizer-toolbar select {
    background-color: #44475a;
    border: 1px solid #6272a4;
    color: #f8f8f2;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.visualizer-toolbar button:hover {
    background-color: #6272a4;
}

/* --- Collapsible Section Styling --- */
.log-section {
    border-bottom: 1px solid #44475a;
}
.log-section:last-child {
    border-bottom: none;
}
.log-section-header {
    font-weight: bold;
    color: #bd93f9; /* Purple */
    padding: 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.log-section-header::before {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s ease-in-out;
}
.log-section.collapsed .log-section-header::before {
    transform: rotate(-90deg);
}
.log-section-content {
    padding-left: 15px;
    border-left: 1px solid #44475a;
    max-height: 1000px; /* High value for animation */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding-bottom: 1em;
}
.log-section.collapsed .log-section-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Click-to-Highlight Style --- */
/* Add this class to your main UI elements to make them glow */
.timeline-element-highlight {
    outline: 2px solid #8be9fd !important; /* Cyan glow */
    box-shadow: 0 0 15px #8be9fd;
    transition: outline 0.1s linear, box-shadow 0.1s linear;
}

/* Make clickable log lines interactive */
.visualizer-content .line[data-highlight-id] {
    cursor: pointer;
    transition: background-color 0.2s;
}
.visualizer-content .line[data-highlight-id]:hover {
    background-color: rgba(139, 233, 253, 0.1); /* Faint cyan on hover */
}

/* Add these new rules to your CSS file */

/* --- Progress Bar Styling --- */
.visualizer-progress-bar {
    width: 100%;
    height: 2px;
    background-color: #44475a;
}
.progress-bar-fill {
    width: 0%;
    height: 100%;
    background-color: #109933; /* Green */
    transition: width 0.4s ease-in-out;
}

/* --- Toolbar Styling Update --- */
.visualizer-toolbar button, .visualizer-toolbar select {
    background-color: #44475a;
    border: 1px solid #6272a4;
    color: #f8f8f2;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.visualizer-toolbar button:hover {
    background-color: #6272a4;
}

/* Make the header a flex container to align items in a row */
.visualizer-header {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  /* Make the title take up only the space it needs */
  .visualizer-header .header-title {
    flex-shrink: 0;
  }
  
  /* This is the new style for our preview ticker */
  #log-preview-ticker {
    flex-grow: 1; /* Allows the element to grow and fill empty space */
    padding: 0 20px; /* Adds some space around the text */
    font-family: monospace;
    font-style: italic;
    color: #9a9a9a; /* A subtle color for the preview text */
    white-space: nowrap; /* Prevents the text from wrapping to a new line */
    overflow: hidden; /* Hides any text that overflows the container */
    text-overflow: ellipsis; /* Adds "..." to the end of truncated text */
  }
  
  /* Push the toolbar all the way to the right */
  .visualizer-header .visualizer-toolbar {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Add this CSS to your stylesheet */

.log-tabs {
    display: flex;
    gap: 4px;
    margin-left: 15px;
}
.log-tab {
    background-color: #282a36;
    border: 1px solid #44475a;
    color: #b4b8d0;
    padding: 3px 12px;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    top: 1px;
    max-height: 24px;
    white-space: nowrap;
}
.log-tab.active {
    background-color: #44475a;
    color: #f8f8f2;
    border-color: #6272a4;
}
.log-tab-content {
    display: none; /* Hide all tab content by default */
}
.log-tab-content.active {
    display: block; /* Show only the active tab's content */
}

/* Styles for the new icon buttons in the visualizer toolbar */
.visualizer-toolbar button {
    background-color: transparent;
    border: none;
    padding: 4px;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a9a9b3; /* Sets the default icon color */
}

.visualizer-toolbar button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; /* Icon color on hover */
}

/* Defines the size and stroke for the SVG icons themselves */
.toolbar-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor; /* The icon's color will match the button's text color */
    stroke-width: 1.5;
}

.noActiveClientView{
    /* margin-top: -2em; */
}

.hybrid-options-container{
    flex-direction:column;
}

.hybrid-options-container .action-box-select-btn {
    min-width: 120px;
  }
  .hybrid-options-container .action-box-select-btn.action-click-active,
  .detection-mode-btn-new.action-click-active {
    outline: 2px solid var(--primary, #7aa2ff);
  }
  :root{
    --ad-panel:#13161b; --ad-border:#23262e; --ad-text:#e8ecf3; --ad-muted:#9aa1ad;
    --ad-accent:#2d5bff; --ad-primary:#2d5bff; --ad-danger:#ff6b6b; --ad-surface:#0f131b;
  }
  
  .assets-dock--grid{ width:190px; color:var(--ad-text); display:flex; flex-direction:column; gap:8px; }
  .assets-dock--grid.expanded{ width:520px; } /* optional */
  
  .ad-toolbar{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px;
    background:var(--ad-panel); border:1px solid var(--ad-border); border-radius:10px; }
  .ad-title span{     font-weight: 500;
    font-size: 14px;
    margin-left: .5em; }
  .ad-tools{ display:flex; gap:6px; }
  .ad-btn{ height:28px; padding:0 10px; background:#151922; color:var(--ad-text);
    border:1px solid var(--ad-border); border-radius:8px; font-size:12px; cursor:pointer; }
  .ad-btn:hover{ background:#1a1f29; }
  .ad-icon{ width:28px; padding:0; text-align:center; }
  .ad-primary{ background:var(--ad-primary); border-color:var(--ad-primary); color:#fff; }
  
  .ad-filters{ display:flex; align-items:center; gap:8px; }
  .ad-filter{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ad-muted); }
  .ad-select,.ad-input{ height:26px; background:#0b0e14; color:var(--ad-text); border:1px solid var(--ad-border);
    border-radius:8px; padding:0 8px; }
  
  .ag-wrap{
    background:var(--ad-panel); border:1px solid var(--ad-border); border-radius:10px; padding:8px;
    max-height:58vh; overflow:auto;
  }
  
  /* GRID — tightly packed cards so nothing hogs the pane */
  .ag-grid{
    list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap:8px;
  }
  
  /* CARD */
  .ag-card{ background:var(--ad-surface); border:1px solid var(--ad-border); border-radius:10px; overflow:hidden; position:relative; }
  .ag-card.ag-new{ min-height: 80px; display:grid; place-items:center; font-size:24px; color:var(--ad-muted); cursor:pointer; border-style:dashed; }
  .ag-card.ag-new:hover{ background:#101722; }
  
  .ag-media{ position:relative; width:100%; aspect-ratio:1/1; background:#0a0e15; }
  .ag-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  /* Overlays */
  .ag-top, .ag-bottom{
    position:absolute; left:6px; right:6px; display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(180deg, rgba(8,10,14,.92), rgba(8,10,14,.55));
    border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:4px 6px;
  }
  .ag-top{ top:6px; gap:6px; }
  .ag-bottom{ bottom:6px; justify-content:center; }
  
  .ag-name{ font-size:11px; font-weight:600; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ag-badges{ display:flex; gap:4px; flex-wrap:wrap; }
  .ag-badge{ font-size:9px; padding:1px 5px; border-radius:999px; border:1px solid var(--ad-border); color:#cfd6e4; }
  .ag-badge--primary{ border-color:#f0c75e; color:#f0c75e; }
  .ag-badge--preset{ border-color:#7aa2ff; color:#b7cbff; }
  
  .ag-quick{ display:flex; gap:6px; }
  .ag-q{
    width:26px; height:22px; border:1px solid var(--ad-border); background:#0b0f17; color:var(--ad-text);
    border-radius:6px; font-size:11px; cursor:pointer;
  }
  .ag-q:hover{ background:#121722; }
  .ag-q.danger{ color:var(--ad-danger); border-color:rgba(255,107,107,.35); }
  
  /* Toast */
  .ad-toast{ position:fixed; top:36px; left:16px; background:#0b0f17; border:1px solid var(--ad-border);
    color:var(--ad-text); padding:8px 10px; border-radius:8px; opacity:0; pointer-events:none;
    transform:translateY(8px); transition:opacity .18s, transform .18s; }
  .ad-toast.show{ opacity:1; transform:translateY(0); }
  
  /* Make headers and subheaders pop a bit */
#log-container-vision .log-row-header .line-text { font-weight: 700; }
#log-container-vision .log-row-subheader .line-text { font-weight: 600; color: #c2d1ff; }

/* Indent list rows slightly */
#log-container-vision .log-row-list .line-text { padding-left: 6px; }

/* Command rows: subtle left rule */
#log-container-vision .log-row-command {
  border-left: 2px solid #2d3d64;
  padding-left: 6px;
}

/* Timestamps align nicely */
#log-container-vision .line .line-timestamp {
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  display: inline-block;
  opacity: .6;
}

/* Scope everything tightly to our namespace */
.wofcm-overlay{position:fixed;inset:0;background:rgba(12,14,22,.55);backdrop-filter:saturate(120%) blur(2px);z-index:993333399;
    display:none;

}
.wofcm-overlay[aria-hidden="false"]{display:block;}
.wofcm-modal{position:fixed;inset:auto 50% auto auto;left:50%;top:6vh;transform:translateX(-50%);width:min(1100px,96vw);max-height:88vh;background:#0f1220;color:#e9ecff;border:1px solid #2a3159;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;}
.wofcm-header{display:flex;align-items:center;gap:.75rem;padding:14px 16px;border-bottom:1px solid #232a4a;background:linear-gradient(180deg,#141936 0,#10162b 100%);}
.wofcm-title{font-size:15px;font-weight:700;letter-spacing:.2px}
.wofcm-sub{font-size:12px;color:#a6b0ff;margin-left:auto;opacity:.85}
.wofcm-close{all:unset;cursor:pointer;padding:6px 8px;border-radius:10px;color:#c9cffb}
.wofcm-close:hover{background:#1a2141}

.wofcm-body{display:grid;grid-template-columns:230px 1fr;min-height:420px;max-height:calc(88vh - 120px);}
.wofcm-tabs{border-right:1px solid #232a4a;background:#0b0e1b;overflow:auto}
.wofcm-tab{display:block;width:100%;text-align:left;all:unset;cursor:pointer;padding:10px 12px;border-left:3px solid transparent;color:#cbd3ff;font-size:13px}
.wofcm-tab:hover{background:#121737}
.wofcm-tab[aria-selected="true"]{background:#131a3b;border-left-color:#6ea0ff;color:#fff;font-weight:600}
.wofcm-panels{overflow:auto;background:#0f1220}
.wofcm-panel{display:none;padding:16px 18px 22px}
.wofcm-panel[aria-hidden="false"]{display:block}

.wofcm-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.wofcm-col-3{grid-column:span 3} .wofcm-col-4{grid-column:span 4} .wofcm-col-6{grid-column:span 6}
.wofcm-col-8{grid-column:span 8} .wofcm-col-12{grid-column:span 12}

.wofcm-field{display:flex;flex-direction:column;gap:6px;background:#0c1024;border:1px solid #1f2750;border-radius:12px;padding:10px}
.wofcm-field label{font-size:11px;color:#9fb0ff;letter-spacing:.2px}
.wofcm-input,.wofcm-select,.wofcm-textarea{all:unset;background:#0a0e1f;border:1px solid #26305c;border-radius:10px;padding:8px 10px;color:#e7ebff;min-height:36px}
.wofcm-textarea{min-height:70px;white-space:pre-wrap}
.wofcm-hint{font-size:11px;color:#7e89c8;opacity:.9}

.wofcm-repeater{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.wofcm-row{border:1px dashed #2a356a;border-radius:12px;padding:10px}
.wofcm-row-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.wofcm-row-title{font-size:12px;color:#bfc8ff}
.wofcm-mini-btn{all:unset;cursor:pointer;background:#1a2141;border:1px solid #293468;color:#dbe2ff;border-radius:10px;padding:6px 10px;font-size:12px}
.wofcm-mini-btn:hover{background:#202857}

.wofcm-footer{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #232a4a;background:#0d1124}
.wofcm-btn{all:unset;cursor:pointer;border-radius:12px;padding:10px 14px;font-weight:600;border:1px solid #2a356a}
.wofcm-btn-cancel{background:#101532;color:#c2c9ff}
.wofcm-btn-primary{background:#2a5bff;color:white;border-color:#2a5bff}
.wofcm-btn:disabled{opacity:.5;cursor:not-allowed}

/* tiny helper */
.wofcm-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wofcm-chip{display:inline-block;font-size:11px;color:#8ea2ff;background:#141a38;border:1px solid #283261;border-radius:999px;padding:3px 8px;margin-left:6px}

.client-game-container{
    border: 2px solid #1e1e1e;
    border-radius: 77px;
    position: relative;
}

/* KEY PART 1: The wrapper. 
  It acts as the visual input box and is a positioning container.
*/
.input-container {
    position: relative; /* This is crucial for positioning the counter */
    display: flex;
    align-items: center;
    flex-grow: 1; /* Makes the container take up available space */
    border: 1px solid #4a8df8; /* Blue-ish border */
    border-radius: 6px;
    padding: 0 15px;
  }
  
  /* KEY PART 2: The actual input field. 
    We make it transparent so the container's style shows through.
  */
  .visionai-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #e0e0e0; /* Light text color */
    font-size: 14px;
    padding: 12px 0;
    /* Add padding on the right to prevent text from overlapping the counter */
  }
  
  .visionai-input::placeholder {
    color: #888;
  }
  
  /* KEY PART 3: The character counter.
    We position it absolutely on the right side of the container.
  */
  .char-counter {
    position: absolute;
    right: 45px; /* Position 15px from the right */
    top: 50%;
    transform: translateY(-50%); /* Vertically center it perfectly */
    color: #999;
    font-size: 14px;
    font-family: monospace; /* Gives it a techy feel */
    /* REMOVED pointer-events: none; and added cursor */
    cursor: help; 
  }

  /* Style for the tooltip box */
  .char-counter::before {
    content: attr(data-tooltip); /* Pulls text from the data-tooltip attribute */
    position: absolute;
    
    /* Position it above the counter */
    bottom: -.5em; 
    left: -25em;
  
    /* Appearance */
    background-color: #2d3748; /* Dark background */
    color: #e2e8f0; /* Light text */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap; /* Keep the text on one line */
    z-index: 13422342343242424232434320; /* Ensure tooltip appears on top */
    
    /* Hide it by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none; /* Tooltip itself should not be interactive */
  }
  
  /* Show the tooltip on hover */
  .char-counter:hover::before {
    opacity: 1;
    visibility: visible;
  }

  /*
 * Styles for the "Duplicate" action in the right-click menu.
 */

/* 1. Make the main list item a flex container */
/* This aligns "Duplicate" text and the icon container on the same line. */
.action-menu li.duplicate-action-timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. Style the container for the icons */
.duplicate-action-timeline .duplicate-options {
    display: flex;
    align-items: center;
}

/* 3. Style the individual icons to look like buttons */
.duplicate-action-timeline .duplicate-options span {
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px; /* Makes the arrow icons a bit larger */
    line-height: 1;
    transition: background-color 0.2s;
}

/* 4. Add a hover effect for interactivity */
.duplicate-action-timeline .duplicate-options span:hover {
    background-color: #555; /* A subtle background on hover */
}

.place-at-end{
    position: relative;
    top: -2px;
    left: -7px;
}

.place-after-original{
    position: relative;
    left: -11px;
}

/* Style for disabled tasks in the sidebar list */
.watcher-group.task-inactive {
    opacity: 0.5;
    text-decoration: line-through;
    font-style: italic;
}

/* timeline layering + container anchoring */
.timeline-categories { position: relative; }
.timeline-categories .timeline-keys { position: absolute; z-index: 1002; } /* keys above clips */
.timeline-categories .timeline-clipped { z-index: 900; } /* clips below keys */

/* ==========================================================================
   Navigation & Map Settings Styles (Rewritten)
   ========================================================================== */

   .navigation-method-section {
    margin-top: 20px;
    border-top: 1px solid var(--panel-border-color, #4a4a4a);
    padding-top: 15px;
}

/* --- Styled Select Dropdown --- */
select.styled-input-v2 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

/* --- General Upload Area --- */
.upload-container {
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid var(--panel-border-color, #4a4a4a);
}
.upload-container .input-group-v2 {
    margin-bottom: 0;
}
.upload-container .setting-group-v2-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
}

/* --- Map Preview & Editor Area --- */
#map-preview-container .radius-preview-area-v2 {
    position: relative;
    overflow: hidden;
    background-color: var(--panel-bg-primary);
    border-radius: 6px;
    min-height: 200px; /* Ensure container has a minimum size */
    display: flex;
    align-items: center;
    justify-content: center;
}

#activeMapPreview {
    /* A slight transition for smoother visual feedback */
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
    transform-origin: 0 0;
    cursor: grab;
    max-width: none; /* Allow the image to be larger than its container */
}
#activeMapPreview:active {
    cursor: grabbing;
}

/* --- Zoom Controls --- */
.map-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 20;
}
.zoom-btn {
    width: 30px;
    height: 30px;
    background-color: rgba(20, 22, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.zoom-btn:hover {
    background-color: rgba(40, 42, 45, 1);
}

/* --- Editor Toolbar --- */
#map-editor-toolbar {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: var(--panel-bg-secondary);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    /* Add a separator between groups */
    border-right: 1px solid var(--panel-border-color, #4a4a4a);
}
.toolbar-group:last-child {
    border-right: none;
}

/* --- Toolbar Buttons --- */
.toolbar-btn {
    background-color: #3a3f44;
    border: 1px solid #555;
    color: #eee;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.toolbar-btn:hover {
    background-color: #4a4f54;
    border-color: #777;
}
.toolbar-btn.active {
    background-color: var(--accent-primary, #00aeff);
    border-color: var(--accent-primary-dark, #007acc);
    color: white;
}
.toolbar-btn.danger {
    background-color: #a13333;
    border-color: #c94e4e;
}
.toolbar-btn.danger:hover {
    background-color: #802424;
}

/* --- Sliders Group --- */
.toolbar-group.sliders {
    display: grid; /* Use Grid for perfect alignment */
    grid-template-columns: auto 1fr; /* Label, then slider */
    grid-template-rows: auto auto;
    gap: 2px 8px; /* Row gap, Column gap */
    align-items: center;
    font-size: 12px;
    color: #ccc;
    padding-right: 15px;
}
.toolbar-group.sliders label {
    grid-column: 1 / 2; /* Labels in the first column */
}
.toolbar-group.sliders input[type="range"] {
    grid-column: 2 / 3; /* Sliders in the second column */
    width: 120px;
    margin: 0;
}
.toolbar-group.sliders .toggle-label {
    grid-column: 1 / -1; /* Span across both columns */
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* --- Crop Selection Box --- */
.map-crop-selection {
    position: absolute;
    border: 2px dashed var(--accent-primary, #00aeff);
    background-color: rgba(0, 174, 255, 0.15);
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none; /* Allow mouse events to pass through */
}

#activeMapPreview{
    max-height: 300px;
}

/* Add this CSS to your stylesheet to fix the double selection box glitch */
.map-crop-selection {
    border: 2px dashed rgba(0, 174, 255, 0.9) !important; /* A clear, single dashed border */
    outline: none !important;                           /* Explicitly remove any outline */
    box-shadow: none !important;                        /* Remove any shadow that might look like a box */
    background-color: rgba(0, 174, 255, 0.15);          /* A light, transparent fill color */
}

/* This is a safeguard to ensure pseudo-elements aren't creating a second box */
.map-crop-selection::before,
.map-crop-selection::after {
    display: none !important;
    content: none !important;
}

/*
  This rule replaces the inline style you just removed.
  It applies the border to the map preview by default.
*/
#activeMapPreview {
    border: 2px solid var(--accent-primary, #00aeff);
    max-height: 300px; /* You already had this rule, keeping it */
}

/*
  This new rule will make the border transparent when the image
  has the 'is-cropping' class, which we will add via JavaScript.
*/
#activeMapPreview.is-cropping {
    border-color: transparent;
}

.map-crop-selection { pointer-events: none; }
#selection-box { pointer-events: none; }

/* =================================================================== */
/* Map Waypoint Modal & Path Configuration (Full Styles)
/* =================================================================== */
/* =================================================================== */
/* Map Waypoint Modal & Path Configuration (Full Styles with Tools)
/* =================================================================== */

/* --- 1. Modal Backdrop & Visibility --- */
#map-waypoint-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 25, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1234234324324320000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#map-waypoint-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- 2. Modal Content & Layout --- */
#map-waypoint-modal .sce-modal-content {
    background-color: #1e1e2f;
    border: 1px solid #3a3a5a;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e0e0e0;
}

#map-waypoint-modal .sce-modal-header {
    padding: 12px 20px;
    border-bottom: 1px solid #3a3a5a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#map-waypoint-modal .sce-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* --- 3. Main Two-Column Content Panel --- */
.action-map-panel-content {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    padding: 15px;
    gap: 15px;
}

/* --- 4. Sidebar (Controls) Styling --- */
.action-map-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;
}

.map-path-controls {
    border: 1px solid #3a3a5a;
    border-radius: 6px;
    padding: 15px;
    background-color: #25253a;
}

.map-path-controls .setting-row {
    margin-bottom: 15px;
}
.map-path-controls .setting-label .title {
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    display: block;
}
.map-path-controls .setting-label .description {
    font-size: 0.8rem;
    color: #a0a0b8;
}

/* NEW: Make "Set Point" button more obvious when active */
#modal-map-set-point-mode.active {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6);
    border-color: #007bff;
}


.map-path-list-container {
    flex-grow: 1;
    min-height: 175px;
    display: flex;
    flex-direction: column;
}

#modal-map-path-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    overflow-y: auto;
    border: 1px solid #3a3a5a;
    border-radius: 6px;
    background-color: #25253a;
    flex-grow: 1;
}

#modal-map-path-list li {
    padding: 8px 12px;
    border-bottom: 1px solid #3a3a5a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

#modal-map-path-list li:last-child {
    border-bottom: none;
}

.map-delete-point-btn {
    background-color: #e53935;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    transition: background-color 0.2s;
}

.map-delete-point-btn:hover {
    background-color: #f44336;
}

/* --- 5. Map Viewer & Waypoint Indicators --- */
.action-map-viewer {
    flex-grow: 1;
    min-width: 0;
    position: relative; /* For positioning the toolbar */
}

#modal-map-viewer-container {
    width: 100%;
    height: 100%;
    background-color: #12121e;
    border-radius: 6px;
    position: relative;
    overflow: hidden; /* Hide overflow, we control it with pan/zoom */
    cursor: grab; /* Default cursor is for panning */
}

/* NEW: Add cursor states for different actions */
#modal-map-viewer-container.is-panning {
    cursor: grabbing;
}
#modal-map-viewer-container.is-setting-point {
    cursor: crosshair;
}

#modal-map-viewer-container img {
    display: block;
    max-width: none;
    /* NEW: Use transform for pan/zoom and set origin */
    transform-origin: 0 0;
    pointer-events: none; /* Prevent dragging the image itself */
}

/* Waypoint Dot & Path Styles */
.waypoint-dot, .waypoint-path {
    position: absolute;
    transform-origin: 0 0;
    pointer-events: none; /* Waypoints should not be interactive */
    z-index: 10;
}

.waypoint-dot {
    width: 24px;
    height: 24px;
    background-color: rgba(29, 161, 242, 0.9);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(29, 161, 242, 0.7);
}

.waypoint-path {
    height: 3px;
    background: linear-gradient(90deg, rgba(29, 161, 242, 0.8), rgba(29, 242, 187, 0.8));
    transform-origin: 0 50%;
}

/* --- 6. NEW: Map Toolbar --- */
.modal-map-toolbar {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 20;
    background-color: rgba(30, 30, 47, 0.8);
    border: 1px solid #3a3a5a;
    border-radius: 6px;
    display: flex;
    gap: 4px;
    padding: 4px;
}

.modal-map-toolbar button {
    background-color: #25253a;
    border: 1px solid #3a3a5a;
    color: #e0e0e0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-map-toolbar button:hover {
    background-color: #3a3a5a;
    border-color: #5a5a7a;
}

.modal-map-toolbar button svg {
    width: 100%;
    height: 100%;
}


/* --- 7. Footer & Buttons --- */
#map-waypoint-modal .sce-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #3a3a5a;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #25253a;
    flex-shrink: 0;
}

/* In your stylesheet, REPLACE the map toolbar styles with this block */

/* --- 6. Map Toolbar --- */
.modal-map-toolbar {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 20;
    background-color: rgba(30, 30, 47, 0.8);
    border: 1px solid #3a3a5a;
    border-radius: 6px;
    display: flex;
    gap: 4px;
    padding: 4px;
    backdrop-filter: blur(4px);
}

.modal-map-toolbar button {
    background-color: #25253a;
    border: 1px solid #3a3a5a;
    color: #e0e0e0;
    width: 36px;   /* Slightly larger for better touch interaction */
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex; /* Ensures content inside can be centered */
    align-items: center; /* Vertically centers the SVG */
    justify-content: center; /* Horizontally centers the SVG */
    padding: 7px; /* Adjust padding for icon size */
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-map-toolbar button:hover {
    background-color: #3a3a5a;
    border-color: #5a5a7a;
}

.modal-map-toolbar button svg {
    width: 100%;
    height: 100%;
}

/* --- CSS for Missing Asset Indicator --- */

/* Adds a red border to the bottom of the action element */
.timeline-keys.action-missing-assets {
    /* border-bottom: 3px solid #e53e3e; 
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3); */
}

/* Styles the "Provide Assets" text label */
.asset-warning-indicator {
    position: absolute;
    bottom: -18px; /* Position it just below the element */
    left: 50%;
    transform: translateX(-50%);
    background-color: #d9232378;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* So it doesn't interfere with clicks */
}

/* Add this to your main stylesheet */
#world-map-cropper-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 100034434343434434340;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#world-map-cropper-instructions {
    color: white;
    font-size: 1.2em;
    padding: 10px 20px;
    background: rgba(20, 20, 20, 0.9);
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #555;
    text-align: center;
    z-index: 9999349343493434343434343;
}

.cropper-buttons {
    margin-top: 10px;
}

.cropper-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 5px;
}

#world-map-cropper-confirm {
    background-color: #28a745;
    color: white;
}

#world-map-cropper-cancel {
    background-color: #dc3545;
    color: white;
}

#world-map-cropper-img {
    max-width: 90vw;
    max-height: 80vh;
    border: 2px solid #fff;
    cursor: crosshair;
}

#world-map-cropper-selection {
    position: absolute;
    border: 2px dashed #00aeff;
    background-color: rgba(0, 174, 255, 0.2);
    display: none;
}

/* Add this to your main stylesheet */

/* Style for the disabled "Generate Path" button */
#modal-map-generate-path.btn-v2-disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Styles for the new Path Generator Modal */
#path-generator-animation-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 5px;
    min-height: 100px;
    background-color: #222;
}

#path-generator-animation-container .template-cutout {
    width: 24px;  /* Slightly larger than 20px to accommodate a border */
    height: 24px;
    border: 2px solid transparent;
    border-radius: 3px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#path-generator-progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #333;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

#path-generator-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--accent-primary, #00aeff);
    transition: width 0.2s linear;
}

#path-generator-status-text {
    font-size: 0.9em;
    color: #ccc;
    text-align: center;
}

#path-generator-modal{
    z-index: 2939293293292;
}

/* --- Styling for Generated Path Template Viewer --- */

/* The grid container for the template images */
#modal-template-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 8px; /* Spacing between images */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 8px;
    max-height: 150px; /* Limit height and allow scrolling */
    overflow-y: auto;
    border: 1px solid #4a4a52;
}

/* Individual template images in the sidebar list */
.template-preview-image {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 3px;
    background-color: #2f3542;
    cursor: pointer;
    transition: all 0.2s ease;
    object-fit: cover; /* Ensures images fill the space nicely */
}

/* Highlight effect on hover */
.template-preview-image:hover {
    border-color: #00aeff;
    transform: scale(1.1);
}

/* The highlighter box that appears over the map */
#modal-map-template-highlighter {
    position: absolute;
    display: none; /* Hidden by default */
    width: 20px;
    height: 20px;
    border: 2px solid #ffdd00; /* Bright yellow border */
    box-shadow: 0 0 10px rgba(255, 221, 0, 0.7);
    background-color: rgba(255, 221, 0, 0.2);
    border-radius: 2px;
    pointer-events: none; /* Prevents it from interfering with mouse events */
    z-index: 1001; /* Ensure it's above the map image */
}

/* --- Path Library Controls --- */
.path-library-controls {
    display: flex;
    gap: 8px;
}
.path-library-controls select {
    flex-grow: 1; /* Make the dropdown take up available space */
}
.path-library-controls button {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: #4a4a52;
    border: 1px solid #5f5f68;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.path-library-controls button:hover {
    background-color: #5f5f68;
}

/* --- Draggable Waypoints & Obstacles --- */
.waypoint-dot.draggable {
    cursor: grab;
}
.waypoint-dot.dragging {
    cursor: grabbing;
    background-color: #ffdd00; /* Highlight color while dragging */
    border-color: #fff;
}

/* Style for Obstacle Zones on the map */
.obstacle-zone {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3);
    border: 1px dashed rgba(255, 100, 100, 0.7);
    border-radius: 2px;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 1000;
}

/* --- Cursor for Obstacle Drawing --- */
#modal-map-viewer-container.is-drawing-obstacle {
    cursor: crosshair;
}

/* --- Active State for Obstacle Button --- */
#modal-map-set-obstacle-mode.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Filename: styles.css */

/* --- 1. VARIABLES & GENERAL STYLES --- */
:root {
    --bg-primary: #18191c;
    --bg-secondary: #212328;
    --bg-tertiary-hover: #2c2f35;
    --border-color: #35383e;
    --text-primary: #e6e7e9;
    --text-secondary: #a0a4ac;
    --accent-starter: #23a55a;
    --accent-pro: #3498db;
    --accent-elite: #9b59b6;
    --status-inactive: #f04747;
    --ping-good: #23a55a;
    --ping-medium: #f1c40f;
    --ping-bad: #f04747;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#proxy-config-container * { box-sizing: border-box; }

#proxy-config-container {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 28px;
    padding-top: 0px;
    border-radius: 8px;
}

.proxy-view { display: none; }
.proxy-view.active { display: block; }

/* --- 2. HEADER & STATUS --- */
.csm-proxy-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 24px;
}
.csm-field-description { font-size: 15px; color: var(--text-secondary); line-height: 1.6; max-width: 600px; }
.csm-proxy-status { display: flex; align-items: center; }
.csm-status-badge { padding: 5px 12px; border-radius: 16px; font-weight: 600; font-size: 13px; }
.csm-status-badge.csm-status-inactive { background-color: rgba(240, 71, 71, 0.15); color: var(--status-inactive); }

/* --- 3. ACTIVE PROXY CARD --- */
.active-proxy-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-starter);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}
.active-proxy-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.active-proxy-header h5 { margin: 0; font-size: 15px; font-weight: 600; flex-grow: 1; }
.active-dot { width: 10px; height: 10px; background-color: var(--accent-starter); border-radius: 50%; box-shadow: 0 0 8px var(--accent-starter); }
.disconnect-button {
    background-color: #3b4048; color: var(--text-secondary); border: none; border-radius: 5px;
    padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.2s;
}
.disconnect-button:hover { background-color: var(--status-inactive); color: white; }
.active-proxy-body { display: grid; gap: 8px; font-size: 14px; }
.proxy-info-line { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.proxy-info-line svg { width: 16px; height: 16px; color: var(--text-primary); }
.proxy-info-line strong { color: var(--text-primary); font-weight: 500; }

/* --- 4. TIER CARDS --- */
#csm-proxy-tiers-container { display: grid; gap: 16px; }
.proxy-tier-card {
    background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px;
    padding: 20px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: all 0.2s ease;
}
.proxy-tier-card:hover { transform: translateY(-3px); border-color: var(--accent-pro); }
.proxy-tier-card.starter:hover { border-color: var(--accent-starter); }
.proxy-tier-card.pro:hover { border-color: var(--accent-pro); }
.proxy-tier-card.elite:hover { border-color: var(--accent-elite); }
.tier-info { display: flex; align-items: center; gap: 16px; }
.tier-dot { width: 12px; height: 12px; border-radius: 50%; }
.tier-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.tier-price { font-size: 14px; color: var(--text-secondary); }
.tier-arrow { color: var(--text-secondary); }

/* --- 5. PROXY LIST VIEW --- */
.proxy-back-button, .csm-action-button {
    border: none; cursor: pointer; transition: all 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; border-radius: 6px; padding: 10px 16px;
}
.proxy-back-button { background: none; color: var(--text-secondary); gap: 8px; margin-bottom: 20px; padding: 0; }
.proxy-back-button:hover { color: var(--text-primary); }
.proxy-back-button svg { width: 20px; height: 20px; }
.proxy-list-header { margin-bottom: 16px; font-size: 18px; }
#csm-proxy-list-container { display: grid; gap: 12px; }
.csm-footer { margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 20px; text-align: right; }
.csm-action-button { background-color: var(--accent-pro); color: white; }
.csm-action-button:hover { opacity: 0.9; }

/* --- 6. PROXY LIST ITEM CARD (NEW) --- */
.proxy-list-item {
    background-color: var(--bg-secondary); border: 2px solid var(--border-color);
    border-radius: 8px; padding: 16px; display: grid;
    grid-template-columns: auto 1fr auto; align-items: center;
    gap: 16px; cursor: pointer; transition: border-color 0.2s ease;
}
.proxy-list-item:hover { border-color: #555; }
.proxy-list-item.selected { border-color: var(--accent-pro); }
.proxy-list-item input[type="radio"] { display: none; } /* Hide the actual radio button */
.proxy-flag-icon { font-size: 24px; }
.proxy-info-group { display: flex; flex-direction: column; gap: 4px; }
.proxy-location { font-weight: 600; color: var(--text-primary); }
.proxy-ip { font-family: monospace; font-size: 13px; color: var(--text-secondary); }
.proxy-ping-indicator { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ping-dot { width: 10px; height: 10px; border-radius: 50%; }
.ping-dot.good { background-color: var(--ping-good); box-shadow: 0 0 8px var(--ping-good); }
.ping-dot.medium { background-color: var(--ping-medium); box-shadow: 0 0 8px var(--ping-medium); }
.ping-dot.bad { background-color: var(--ping-bad); box-shadow: 0 0 8px var(--ping-bad); }

/* Filename: styles.css (add this to your existing file) */

/* --- PROXY LIST CONTROLS --- */
.proxy-list-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
}

.generate-btn {
    padding: 8px 16px;
    display: flex;
    gap: 8px;
    background-color: var(--accent-starter);
    font-size: 14px;
}

.generate-btn svg {
    width: 20px;
    height: 20px;
}

/* --- CUSTOM SELECT DROPDOWN --- */
.custom-select-wrapper {
    position: relative;
    width: 250px;
    font-size: 14px;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--accent-pro);
}

.custom-select-trigger .arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.custom-select-wrapper.open .arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.custom-select-wrapper.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-option {
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-select-option:hover {
    background-color: var(--bg-tertiary-hover);
}

/* UPDATED TIER CARD STYLING */
.tier-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.tier-features li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 4px;
}
.tier-features li::before {
    content: '✓';
    color: var(--accent-starter);
    position: absolute;
    left: 0;
    top: 0;
}

/* PROXY MANAGEMENT HEADER & QUOTA */
.proxy-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.proxy-quota {
    background-color: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}
.proxy-quota strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ASSIGNED & FINDER SECTIONS */
#assigned-proxies-section, .proxy-finder-section {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}
h5 {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: var(--text-secondary);
}
.empty-state {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}
.proxy-list-item.assigned {
    border-color: var(--accent-starter);
    background-color: #1c2722; /* A subtle green background */
    cursor: default;
}

/* CONFIRMATION MODAL */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.confirmation-modal {
    background-color: var(--bg-secondary);
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    border-top: 4px solid var(--accent-pro);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .confirmation-modal {
    transform: scale(1);
}
.confirmation-modal h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
}
.confirmation-modal p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}
.modal-proxy-card {
    margin-bottom: 16px;
}
.modal-quota-text {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 6px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}
.modal-button {
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.modal-button:hover { opacity: 0.9; }
.modal-button.primary { background-color: var(--accent-pro); color: white; }
.modal-button.secondary { background-color: #3b4048; color: var(--text-primary); }

/* Filename: styles.css (add or replace these styles) */

/* REVISED PROXY LIST ITEM & HIDDEN RADIO BUTTON */
.proxy-list-item {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    /* The label is the parent, so we position relative to it */
    position: relative; 
}
.proxy-list-item:hover {
    border-color: #555;
}

/* This is the magic for selecting by clicking the card */
.proxy-list-item input[type="radio"] {
    /* Hide the radio button visually but keep it functional */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

/* Style for when the radio button inside is checked */
input[type="radio"]:checked + .proxy-card-content {
    border-color: var(--accent-pro);
}

/* The card content is now in a separate div */
.proxy-card-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    border: 2px solid transparent; /* This border will change color on selection */
    border-radius: 6px; /* Match the parent's rounding */
    padding: 0; /* Padding is on the parent label */
}

/* --- NEW STYLES for Assigned Proxy Cards --- */
.assigned-proxy-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    transition: border-color 0.2s ease;
}

.assigned-proxy-card.active {
    border-left-color: var(--accent-starter);
    background-color: #1c2722;
}

.assigned-proxy-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.proxy-status-badge {
    background-color: rgba(35, 165, 90, 0.2);
    color: var(--accent-starter);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.action-button {
    background-color: #3b4048;
    color: var(--text-primary);
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.activate:hover {
    background-color: var(--accent-pro);
}

.action-button.disconnect {
    background-color: #583131;
}
.action-button.disconnect:hover {
    background-color: var(--status-inactive);
}

/* Add this to your main CSS file for visual feedback on multi-selected items */
/* Add this to your main CSS file for distinct visual feedback */

/* Style for secondary selections (blue outline) */
.timeline-keys.multi-selected {
    outline: 2px solid #3b82f6 !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

#str-task-panel-wrapper {
    background-color: #1a1c24;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    width: 100%;
    max-width: 480px;
    margin: 40px auto;
    display: none;
    flex-direction: column;
    border: 1px solid #2d303a;
    position: relative;
    z-index: 9999999999;
}

.str-panel-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    border-bottom: 1px solid #2d303a;
}

.str-header-main {
    flex-grow: 1;
    text-align: center;
}

.str-panel-title {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.str-header-icon-btn {
    background: transparent;
    border: none;
    color: #8a91a8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.str-header-icon-btn:hover {
    background-color: #2d303a;
    color: #ffffff;
}

.str-panel-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.str-properties-list {
    list-style: none;
    margin: 0;
    padding: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #2d303a;
}

.str-property-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    min-height: 28px;
}

.str-property-label {
    color: #8a91a8;
    display: flex;
    align-items: center;
    gap: 12px;
}

.str-property-value {
    color: #e0e0e0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.str-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #8a91a8;
}

.str-icon svg {
    width: 100%;
    height: 100%;
}

.str-value-badge-priority {
    background-color: #f59e0b;
    color: #1a1c24;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.str-value-badge-status {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* --- DESCRIPTION SECTION FIXES START HERE --- */

.str-description-container {
    background-color: #252831;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #2d303a;
}

.str-desc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.str-desc-title {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
}

.str-desc-edit-btn {
    background: none;
    border: none;
    color: #8a91a8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.str-desc-edit-btn:hover {
    background-color: #3c4051;
    color: #fff;
}

#str-description-text {
    font-size: 14px;
    line-height: 1.6;
    color: #b0b8d3;
    margin: 0;
    padding: 0; /* Fix for potential inherited padding */
}

#str-description-input {
    width: 100%;
    box-sizing: border-box; /* Ensures padding is included in width */
    background-color: #1a1c24;
    border: 1px solid #3c4051;
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 10px;
    resize: vertical;
}
#str-description-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.str-desc-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* LOGIC FOR HIDING/SHOWING EDIT ELEMENTS */
.str-desc-edit {
    display: none; /* Hide all edit-related elements by default */
}

.str-description-container.str-desc-editing .str-desc-view {
    display: none; /* Hide the <p> tag when editing */
}

.str-description-container.str-desc-editing .str-desc-edit {
    display: block; /* Show the <textarea> when editing */
}

.str-description-container.str-desc-editing .str-desc-actions {
    display: flex; /* Show the action buttons when editing */
}


.str-desc-action-btn {
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.str-btn-primary {
    background-color: #3b82f6;
    color: #fff;
}
.str-btn-primary:hover {
    background-color: #2563eb;
}

.str-btn-secondary {
    background-color: #3c4051;
    color: #e0e0e0;
}
.str-btn-secondary:hover {
    background-color: #4d536a;
}

/* --- NEW "Expand" Button Style --- */
.str-header-icon-btn {
    background: none;
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.str-header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.frames-sec-title { 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- NEW Modal Styles --- */
.str-modal-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10023423432432423400;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}
.str-modal-container {
    width: 90%;
    max-width: 800px;
    height: 80vh;
    background-color: #2a2f35;
    border-radius: 12px;
    border: 1px solid #444;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.str-modal-header {
    padding: 12px 20px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.str-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0e0e0;
}
.str-modal-body {
    flex-grow: 1;
    overflow: hidden;
}
/* =================================================================== */
/* V4.1 - Modern Redesign with Enhanced Visual Feedback              */
/* =================================================================== */

/* --- FONT & THEME DEFINITIONS --- */
:root {
    --tm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tm-bg-overlay: rgba(0, 0, 0, 0.4);
    --tm-bg-modal: #1e1e1e; /* Darker main background */
    --tm-bg-content: #2a2a2a; /* Slightly lighter for content areas */
    --tm-bg-hover: #3c3c3c;
    --tm-bg-active: #4a4a4a;
    
    --tm-text-primary: #e0e0e0;
    --tm-text-secondary: #a0a0a0;
    --tm-text-placeholder: #6e6e6e;
    
    --tm-border-color: #383838;
    --tm-accent-primary: #007aff; /* Apple's blue for primary actions */
    --tm-accent-secondary: #34c759; /* Green for status */
    --tm-accent-destructive: #ff3b30; /* Red for delete actions */
    
    --tm-border-radius-lg: 12px;
    --tm-border-radius-md: 8px;
    --tm-border-radius-sm: 6px;

    --tm-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* --- DRAG & DROP GLOBAL STYLE --- */
body.is-dragging-globally {
    cursor: grabbing;
    user-select: none;
}

/* --- MODAL OVERLAY & CONTAINER --- */
.str-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background-color: var(--tm-bg-overlay);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.str-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.str-modal-container {
    width: 380px;
    max-height: 90vh;
    background-color: var(--tm-bg-modal);
    border-radius: var(--tm-border-radius-lg);
    box-shadow: var(--tm-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--tm-font-family);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.str-modal-overlay.visible .str-modal-container {
    transform: scale(1);
}


/* --- MODAL HEADER --- */
.str-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tm-border-color);
    flex-shrink: 0;
}

.str-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tm-text-primary);
}

.str-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.str-header-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--tm-text-secondary);
    border-radius: var(--tm-border-radius-sm);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.str-header-icon-btn:hover {
    color: var(--tm-text-primary);
    background-color: var(--tm-bg-hover);
}

.str-header-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* --- MODAL BODY & NAVIGATION --- */
.str-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px;
}

.str-task-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- FOLDER (GROUP) STYLES --- */
.tm-folder-header {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--tm-border-radius-md);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.tm-folder-header:hover {
    background-color: var(--tm-bg-content);
}

.tm-folder-arrow {
    display: grid;
    place-items: center;
    color: var(--tm-text-secondary);
    transition: transform 0.2s ease;
}

.tm-folder.is-expanded > .tm-folder-header .tm-folder-arrow {
    transform: rotate(90deg);
}

.tm-folder-name {
    flex-grow: 1;
    margin-left: 8px;
    font-weight: 500;
    color: var(--tm-text-primary);
}

.tm-task-count {
    font-size: 0.8rem;
    color: var(--tm-text-secondary);
    background-color: var(--tm-bg-content);
    padding: 2px 8px;
    border-radius: 12px;
}

.tm-folder-content {
    max-height: 0;
    overflow: hidden;
    padding-left: 20px;
    transition: max-height 0.3s ease-out;
    position: relative; /* For empty drop target pseudo-element */
}

/* --- TASK ITEM STYLES --- */
.tm-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--tm-border-radius-md);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.tm-task-item:hover {
    background-color: var(--tm-bg-hover);
}

.tm-task-item.active {
    background-color: var(--tm-bg-active);
}

.tm-task-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    /* background-color: var(--tm-accent-primary); */
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tm-task-item.active .tm-task-indicator {
    opacity: 1;
}

.tm-task-details {
    flex-grow: 1;
}

.tm-task-name {
    color: var(--tm-text-primary);
    font-weight: 500;
    display: block;
}

.tm-task-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--tm-text-secondary);
    margin-top: 4px;
    justify-content: space-between;
}

.tm-task-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tm-task-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tm-accent-secondary);
}

.tm-task-status.is-inactive .tm-task-status-dot {
    background-color: var(--tm-text-placeholder);
}

/* --- DRAG & DROP VISUALS --- */
.tm-task-item.is-dragging {
    opacity: 0.5;
    background: var(--tm-bg-active);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#tm-drop-indicator {
    height: 2px;
    background-color: var(--tm-accent-primary);
    border-radius: 1px;
    margin: 2px 0;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tm-folder-content.is-empty-drop-target {
    min-height: 50px;
    background-color: rgba(0, 122, 255, 0.05);
    border: 1px dashed var(--tm-accent-primary);
    border-radius: var(--tm-border-radius-md);
    margin-top: 4px;
}
.tm-folder-content.is-empty-drop-target::before {
    content: 'Drop to add';
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: var(--tm-accent-primary);
    font-size: 0.9rem;
    font-weight: 500;
}


/* --- MODAL FOOTER --- */
.str-modal-footer {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--tm-border-color);
    background-color: var(--tm-bg-modal);
}

.str-footer-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--tm-bg-content);
    border: none;
    padding: 10px;
    border-radius: var(--tm-border-radius-md);
    color: var(--tm-text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.str-footer-btn:hover {
    background-color: var(--tm-bg-hover);
}

.str-footer-btn svg {
    width: 18px;
    height: 18px;
    color: var(--tm-text-secondary);
}


/* --- NEW: Task Manager V5 Styles --- */

/* Header Controls */
.tm-controls-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}
.tm-select {
    background-color: var(--tm-bg-content, #2f3640);
    color: var(--tm-text-secondary, #b0b8c4);
    border: 1px solid var(--tm-border-color, #4a5464);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.875rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
}
.tm-filter-group {
    display: flex;
    background-color: var(--tm-bg-content, #2f3640);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--tm-border-color, #4a5464);
}
.tm-filter-group .str-header-icon-btn {
    border-radius: 4px;
    background-color: transparent;
}
.tm-filter-group .str-header-icon-btn.active {
    background-color: var(--tm-accent-color, #007bff);
}
.tm-filter-group .str-header-icon-btn.active svg {
    stroke: white;
}

/* Group Header Summary */
.tm-group-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--tm-text-secondary, #b0b8c4);
    padding-right: 10px;
}
.tm-group-summary .summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tm-group-summary .summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.summary-dot.active { background-color: #28a745; }
.summary-dot.inactive { background-color: #6c757d; }
.summary-dot.unsaved { background-color: #fd7e14; }

/* Task Item Enhancements */
.tm-task-item .tm-task-name {
    display: flex;
    align-items: center;
}
.tm-unsaved-indicator {
    width: 6px;
    height: 6px;
    background-color: #fd7e14;
    border-radius: 50%;
    margin-left: 8px;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* .tm-task-meta span:not(:last-child)::after {
    content: '•';
    margin: 0 6px;
    color: var(--tm-text-tertiary, #6c757d);
} */

.tm-task-item.is-selected {
    background-color: var(--tm-accent-color-faded, rgba(0, 123, 255, 0.2)) !important;
    border-left-color: var(--tm-accent-color, #007bff) !important;
}

/* Enhanced Context Menu */
.tm-context-menu .tm-context-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -5px;
    min-width: 150px;
    background-color: var(--tm-bg-menu, #2c313a);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 5px;
    z-index: 1001;
    border: 1px solid var(--tm-border-color, #4a5464);
}
.tm-context-menu .tm-context-item:hover > .tm-context-submenu {
    display: block;
}
.tm-context-submenu .tm-context-item {
    padding: 8px 12px;
}

/* Custom Dialog Modals */
.tm-dialog-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999999999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.tm-dialog-overlay.visible {
    opacity: 1;
}
.tm-dialog-box {
    background-color: var(--tm-bg-modal, #252932);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
.tm-dialog-overlay.visible .tm-dialog-box {
    transform: scale(1);
}
.tm-dialog-box h4 { margin-top: 0; color: var(--tm-text-primary, #ffffff); }
.tm-dialog-box p { margin: 8px 0 16px; color: var(--tm-text-secondary, #b0b8c4); }
.tm-dialog-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--tm-border-color, #4a5464);
    background-color: var(--tm-bg-content, #2f3640);
    color: var(--tm-text-primary, #ffffff);
    margin-bottom: 20px;
    box-sizing: border-box;
}
.tm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.tm-dialog-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
.tm-btn-primary { background-color: var(--tm-accent-color, #007bff); color: white; }
.tm-btn-primary:hover { background-color: #0069d9; }
.tm-btn-secondary { background-color: var(--tm-bg-content, #2f3640); color: var(--tm-text-primary, #ffffff); border: 1px solid var(--tm-border-color, #4a5464); }
.tm-btn-secondary:hover { background-color: #4a5464; }
.tm-btn-danger { background-color: #dc3545; color: white; }
.tm-btn-danger:hover { background-color: #c82333; }


/* =================================================================== */
/* BOT HUB STYLES (V4.0 - Dark Mode, Redesigned Detail View)       */
/* =================================================================== */

:root {
    --hub-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hub-bg-color: #1a1a1a;
    --hub-content-bg-color: #2a2a2a;
    --hub-border-color: #38383a;
    --hub-text-primary: #f5f5f7;
    --hub-text-secondary: #8e8e93;
    --hub-accent-color: #0a84ff;
    --hub-selected-row-bg: rgba(10, 132, 255, 0.2);
    --hub-selected-row-border: #0a84ff;
    --hub-danger-color: #ff453a;
    --status-running-bg: rgba(50, 215, 75, 0.15);
    --status-running-text: #32d74b;
    --status-error-bg: rgba(255, 69, 58, 0.2);
    --status-error-text: #ff453a;
    --status-queued-bg: rgba(142, 142, 147, 0.2);
    --status-queued-text: #8e8e93;
    --status-complete-bg: rgba(100, 210, 255, 0.2);
    --status-complete-text: #64d2ff;
}

body, html {
    font-family: var(--hub-font-family);
    background-color: #121212;
}

#open-bot-hub-btn {
    position: fixed; bottom: 20px; right: 20px;
    padding: 12px 20px; background-color: #0a84ff;
    color: white; border: none; border-radius: 8px;
    font-weight: 600; cursor: pointer; z-index: 9999;
}

/* --- Modal Base --- */
#bot-hub-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; align-items: center; justify-content: center;
    z-index: 10034243242424300; opacity: 0;
    backdrop-filter: blur(8px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#bot-hub-modal-overlay.visible { display: flex; opacity: 1; }

.hub-modal-container {
    background-color: var(--hub-bg-color);
    border-radius: 14px;
    width: 95%; max-width: 1400px;
    height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 50px rgba(0,0,0,0.4);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--hub-border-color);
    color: var(--hub-text-primary);
    overflow: hidden;
}
#bot-hub-modal-overlay.visible .hub-modal-container { transform: translateY(0) scale(1); }

/* --- View Management --- */
.hub-view {
    display: none; flex-direction: column;
    width: 100%; height: 100%; overflow: hidden;
}
.hub-view.active { display: flex; }

/* --- Main View Header & Tabs --- */
.hub-modal-header {
    display: flex; justify-content: space-between; align-items: stretch;
    padding: 0 24px; border-bottom: 1px solid var(--hub-border-color);
    flex-shrink: 0;
}
.hub-tabs { display: flex; align-items: center; gap: 24px; }
.hub-tab {
    font-size: 15px; font-weight: 600; padding: 16px 0;
    color: var(--hub-text-secondary); cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.hub-tab:hover { color: var(--hub-text-primary); }
.hub-tab.active { color: var(--hub-text-primary); border-bottom-color: var(--hub-text-primary); }
.hub-tab-count {
    background-color: var(--hub-content-bg-color); color: var(--hub-text-secondary);
    font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
}
.hub-tab.active .hub-tab-count { background-color: var(--hub-text-primary); color: var(--hub-bg-color); }
.hub-header-actions { display: flex; align-items: center; gap: 12px; }

#hub-filter-btn, #hub-close-btn {
    background-color: transparent; border: none; color: var(--hub-text-secondary);
    padding: 8px; cursor: pointer; border-radius: 8px;
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}
#hub-filter-btn { border: 1px solid var(--hub-border-color); }
#hub-filter-btn:hover, #hub-close-btn:hover { background-color: var(--hub-content-bg-color); color: var(--hub-text-primary); }

/* --- Main View Body & List --- */
#hub-modal-body {
    flex-grow: 1; overflow-y: auto;
    padding: 8px 12px 24px 12px;
}
#hub-modal-body::-webkit-scrollbar { width: 8px; }
#hub-modal-body::-webkit-scrollbar-track { background: transparent; }
#hub-modal-body::-webkit-scrollbar-thumb { background-color: var(--hub-border-color); border-radius: 4px; }

.hub-bot-list-header, .hub-bot-list-row {
    display: grid; grid-template-columns: 0.3fr 2.2fr 1.5fr 1fr 1fr 0.5fr;
    gap: 16px; align-items: center; padding: 0 12px;
}
.hub-bot-list-header {
    color: var(--hub-text-secondary); font-size: 12px; font-weight: 500;
    text-transform: uppercase; position: sticky; top: -8px;
    padding-top: 8px; padding-bottom: 8px;
    background: var(--hub-bg-color); z-index: 10;
    border-bottom: 1px solid var(--hub-border-color);
}
.hub-header-cell { cursor: pointer; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
.hub-header-cell:hover { color: var(--hub-text-primary); }
.hub-header-cell::after {
    content: ''; opacity: 0; transition: opacity 0.2s, transform 0.2s;
    width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.hub-header-cell.sort-asc::after, .hub-header-cell.sort-desc::after { opacity: 1; }
.hub-header-cell.sort-asc::after { border-bottom: 5px solid var(--hub-text-secondary); }
.hub-header-cell.sort-desc::after { border-top: 5px solid var(--hub-text-secondary); }

.hub-bot-list-row {
    font-size: 14px; transition: background-color 0.15s, border-color 0.15s;
    border-radius: 8px; margin-top: 8px; user-select: none;
    border: 1px solid var(--hub-border-color); min-height: 60px;
    cursor: pointer;
}
.hub-bot-list-row:hover { background-color: var(--hub-content-bg-color); }
.hub-bot-list-row.selected { background-color: var(--hub-selected-row-bg); border-color: var(--hub-selected-row-border); }

.step-indicator {
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--hub-text-secondary);
    background-color: var(--hub-content-bg-color); border: 1px solid var(--hub-border-color);
    width: 28px; height: 28px; border-radius: 50%; margin: 0 auto;
}
.hub-bot-list-row.selected .step-indicator {
    background-color: var(--hub-accent-color); border-color: var(--hub-accent-color); color: var(--hub-text-primary);
}

.bot-name-cell .bot-name { font-weight: 600; }
.goal-cell { font-family: monospace; font-size: 13px; color: var(--hub-text-secondary); }

.status-badge {
    padding: 4px 10px; border-radius: 16px; font-weight: 600;
    font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }

.status-badge[data-status="Running"] { background-color: var(--status-running-bg); color: var(--status-running-text); }
.status-badge[data-status="Running"]::before { background-color: var(--status-running-text); }
.status-badge[data-status="Error"] { background-color: var(--status-error-bg); color: var(--status-error-text); }
.status-badge[data-status="Error"]::before { background-color: var(--status-error-text); }
.status-badge[data-status="Queued"], .status-badge[data-status="Not Started"] { background-color: var(--status-queued-bg); color: var(--status-queued-text); }
.status-badge[data-status="Queued"]::before, .status-badge[data-status="Not Started"]::before { background-color: var(--status-queued-text); }
.status-badge[data-status="Complete"] { background-color: var(--status-complete-bg); color: var(--status-complete-text); }
.status-badge[data-status="Complete"]::before { background-color: var(--status-complete-text); }

.action-cell { display: flex; justify-content: flex-end; gap: .5em;}
.action-cell .hub-action-btn {
    width: 32px; height: 32px; border-radius: 8px; background-color: transparent;
    border: none; color: var(--hub-text-secondary);
    cursor: pointer; transition: all 0.2s;
    display: flex; justify-content: center; align-items: center;
}
.hub-bot-list-row:hover .hub-action-btn { background-color: #3f3f41; }
.hub-bot-list-row.selected .hub-action-btn { background-color: var(--hub-text-primary); color: var(--hub-bg-color); }

/* --- Main View Footer --- */
.hub-modal-footer {
    padding: 16px 24px; border-top: 1px solid var(--hub-border-color);
    display: flex; justify-content: flex-end; flex-shrink: 0;
}
#hub-create-sequence-btn {
    background-color: #105950;
    color: #ffffff;
    border: none; padding: 10px 20px; font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer; transition: background-color 0.2s;
    display: flex; align-items: center; gap: 8px;
    transition: .2s ease-in-out
}

/* --- Main View Expandable Sequence Content --- */
.hub-sequence-task-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background-color: rgba(0,0,0,0.1);
    padding: 0; /* JS will control padding when content exists */
    margin: 0 12px;
    border-top: 1px solid #1a1a1a;
}
.hub-bot-list-row.is-expanded .hub-sequence-task-list {
    padding: 12px 0;
}
.hub-inner-task-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--hub-text-secondary);
}
.hub-inner-task-item.complete { text-decoration: line-through; }
.hub-inner-task-item .task-status-icon {
    margin-right: 12px;
    font-size: 1.1em;
    color: #32d74b;
}
.hub-inner-task-item.complete .task-status-icon {
    color: var(--status-complete-text);
}

/* --- Drag & Drop Visuals --- */
.hub-bot-list-row[draggable="true"] { cursor: grab; }
.hub-bot-list-row.dragging { opacity: 0.4; background: var(--hub-selected-row-bg); cursor: grabbing; }
.drag-over-indicator { height: 2px; background-color: var(--hub-accent-color); margin: 4px 12px; border-radius: 1px; }

/* --- Detailed Sequence View --- */
.hub-detail-header {
    display: flex; align-items: center; padding: 12px 16px;
    border-bottom: 1px solid var(--hub-border-color);
    background-color: var(--hub-content-bg-color); flex-shrink: 0;
}
.hub-back-btn {
    background: none; border: none; color: var(--hub-accent-color);
    display: flex; align-items: center; cursor: pointer;
    font-size: 1em; font-weight: 500; padding: 6px;
    margin-left: -6px; border-radius: 8px; transition: background-color 0.2s ease;
}
.hub-back-btn:hover { background-color: rgba(255, 255, 255, 0.08); }
.hub-back-btn svg { margin-right: 4px; }
#hub-detail-title { margin: 0; padding: 0 16px; font-size: 1.2em; font-weight: 600; }

.hub-detail-body { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; flex-grow: 1; overflow: hidden; }
.hub-detail-panel {
    padding: 20px; display: flex; flex-direction: column;
    overflow-y: auto; border-right: 1px solid var(--hub-border-color);
}
.hub-detail-panel:last-child { border-right: none; }
.hub-detail-panel h4 {
    margin-top: 0; margin-bottom: 16px; color: var(--hub-text-secondary);
    text-transform: uppercase; font-size: 0.8em; font-weight: 600;
}

#hub-detail-info-panel .info-grid { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; }
#hub-detail-info-panel .info-key { font-weight: 600; color: var(--hub-text-secondary); }
#hub-detail-info-panel .info-value { text-align: right; font-weight: 500; }
#hub-detail-info-panel .status-badge { justify-content: center; }

#hub-detail-tasks-list { display: flex; flex-direction: column; gap: 8px; }
.hub-detail-task-item {
    display: flex; align-items: center; padding: 12px;
    border-radius: 8px; background-color: var(--hub-content-bg-color);
    cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
}
.hub-detail-task-item:hover { background-color: #3a3a3c; }
.hub-detail-task-item.selected { background-color: var(--hub-selected-row-bg); border-color: var(--hub-selected-row-border); }
.hub-detail-task-item.complete { color: var(--hub-text-secondary); }
.hub-detail-task-item .task-status-icon { margin-right: 12px; font-size: 1.1em; color: #32d74b; }
.hub-detail-task-item.complete .task-status-icon { color: var(--status-complete-text); }
.hub-detail-task-item.selected .task-name { font-weight: 600; }

.hub-detail-data-tabs {
    display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--hub-border-color);
}
.hub-data-tab {
    background: none; border: none; color: var(--hub-text-secondary);
    padding: 0 4px 12px 4px; margin-right: 20px; font-size: 1em; font-weight: 600;
    cursor: pointer; position: relative; border-bottom: 2px solid transparent;
}
.hub-data-tab.active { color: var(--hub-text-primary); border-bottom-color: var(--hub-accent-color); }

.hub-detail-content { display: none; }
.hub-detail-content.active { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
#hub-detail-log-content { flex-grow: 1; overflow-y: auto; }
.hub-log-entry { padding: 4px 0; font-size: 0.9em; display: flex; gap: 12px; font-family: monospace;}
.log-timestamp { color: var(--hub-text-secondary); flex-shrink: 0; }
.hub-variable-list { margin-bottom: 20px; flex-grow: 1; overflow-y: auto; }
.hub-variable-row {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px;
    align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hub-border-color);
}
.hub-var-key { font-weight: 500; color: var(--hub-text-secondary); font-size: 0.9em;}
.hub-var-value { background: none; border: none; color: var(--hub-text-primary); font-family: monospace; }
.hub-var-value[contenteditable="true"]:focus { outline: 1px solid var(--hub-accent-color); border-radius: 4px; background-color: var(--hub-content-bg-color); }

.hub-secondary-btn {
    background-color: var(--hub-content-bg-color); color: var(--hub-text-primary);
    border: 1px solid var(--hub-border-color); border-radius: 8px; padding: 8px 16px;
    font-weight: 600; cursor: pointer; transition: background-color 0.2s; margin-top: auto;
}
.hub-secondary-btn:hover { background-color: #3f3f41; }
.hub-empty-state, .hub-empty-state-small { text-align: center; padding: 40px; color: var(--hub-text-secondary); }

/* --- Context Menu --- */
.hub-context-menu {
    display: none; position: fixed; z-index: 1000343433434341;
    background-color: var(--hub-content-bg-color); border: 1px solid var(--hub-border-color);
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 6px; min-width: 200px;
    color: #fdfdfd;
}
.hub-context-item {
    display: flex; align-items: center; padding: 8px 12px; cursor: pointer;
    border-radius: 5px; font-size: 14px; transition: background-color 0.15s, color 0.15s;
}
.hub-context-item:hover { background-color: var(--hub-accent-color); color: white; }
.hub-context-item:hover svg { color: white; }
.hub-context-item svg { width: 16px; height: 16px; margin-right: 12px; color: var(--hub-text-secondary); transition: color 0.15s; }
.hub-context-divider { height: 1px; background-color: var(--hub-border-color); margin: 6px 0; }
.hub-context-item--delete { color: var(--hub-danger-color); }
.hub-context-item--delete:hover { background-color: rgba(255, 69, 58, 0.15); }
.hub-context-item--delete:hover svg { color: var(--hub-danger-color); }

/* --- Main View Sub-Header for Logs/Variables --- */
.hub-sub-header { display: none;     padding: 3px 0px;
    padding-bottom: 13px; background-color: var(--hub-bg-color); border-bottom: 1px solid var(--hub-border-color); }
.hub-log-filter-tabs { display: flex; gap: 8px; }
.hub-log-filter-btn {
    background-color: var(--hub-content-bg-color); border: 1px solid var(--hub-border-color);
    color: var(--hub-text-secondary); padding: 6px 12px; border-radius: 8px;
    font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.hub-log-filter-btn:hover { background-color: #3f3f41; color: var(--hub-text-primary); }
.hub-log-filter-btn.active { background-color: var(--hub-accent-color); border-color: var(--hub-accent-color); color: white; }

.log-row { grid-template-columns: 1.5fr 3.5fr 1.5fr; cursor: default; }
.log-row:hover { background: none; }
.log-cell-details.error-log { color: var(--hub-danger-color); }

.hub-var-sequence-group { margin-bottom: 16px; border: 1px solid var(--hub-border-color); border-radius: 8px; background-color: #242426; }
.hub-var-sequence-header { font-size: 1.1em; font-weight: 600; padding: 12px 16px; background-color: var(--hub-content-bg-color); }
.hub-var-task-header { font-size: 0.9em; font-weight: 500; padding: 10px 16px; background-color: rgba(255, 255, 255, 0.05); color: var(--hub-text-secondary); }
.var-row { grid-template-columns: 1.5fr 4fr; padding: 10px 16px; }

.hub-bot-list-row.var-row {
    margin: 1em;
}

/* =================================================================== */
/* BOT HUB V4.1 - Redesigned Sequence Detail View CSS                  */
/* =================================================================== */

/* --- Status Badge (used in this view) --- */
.status-badge {
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.status-badge[data-status="Running"] { background-color: var(--status-running-bg); color: var(--status-running-text); }
.status-badge[data-status="Running"]::before { background-color: var(--status-running-text); }
.status-badge[data-status="Error"] { background-color: var(--status-error-bg); color: var(--status-error-text); }
.status-badge[data-status="Error"]::before { background-color: var(--status-error-text); }
.status-badge[data-status="Queued"], .status-badge[data-status="Not Started"] { background-color: var(--status-queued-bg); color: var(--status-queued-text); }
.status-badge[data-status="Queued"]::before, .status-badge[data-status="Not Started"]::before { background-color: var(--status-queued-text); }
.status-badge[data-status="Complete"] { background-color: var(--status-complete-bg); color: var(--status-complete-text); }
.status-badge[data-status="Complete"]::before { background-color: var(--status-complete-text); }

/* --- Detail View Container & Header --- */
.hub-detail-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--hub-border-color);
    background-color: var(--hub-bg-color); /* Slightly different from main BG for depth */
    flex-shrink: 0;
}

.hub-back-btn {
    background: none;
    border: none;
    color: var(--hub-accent-color);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    padding: 6px;
    margin-left: -6px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.hub-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
.hub-back-btn svg {
    margin-right: 4px;
}

#hub-detail-title {
    margin: 0;
    padding: 0 16px;
    font-size: 1.25em; /* Slightly larger title */
    font-weight: 600;
}

/* --- Three-Panel Layout --- */
.hub-detail-body {
    display: grid;
    /* Adjusted column sizing for better balance */
    grid-template-columns: minmax(200px, 1fr) 1.5fr 2fr;
    flex-grow: 1;
    overflow: hidden;
}

.hub-detail-panel {
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--hub-border-color);
}
.hub-detail-panel:last-child {
    border-right: none;
}
.hub-detail-panel h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--hub-text-secondary);
    text-transform: uppercase;
    font-size: 0.75em; /* 12px */
    font-weight: 600;
    letter-spacing: 0.8px;
}

/* --- Left Panel: Sequence Info --- */
#hub-detail-info-panel .info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 12px;
}
#hub-detail-info-panel .info-key {
    font-weight: 500;
    font-size: 0.875em; /* 14px */
    color: var(--hub-text-secondary);
}
#hub-detail-info-panel .info-value {
    text-align: right;
    font-weight: 400;
    font-size: 12px;
}
#hub-detail-info-panel .status-badge {
    justify-content: center;
    width: fit-content;
    margin-left: auto;
}

/* --- Middle Panel: Task Timeline --- */
#hub-detail-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hub-detail-task-item {
    display: flex;
    align-items: center;
    padding: 11px;
    border-radius: 8px;
    background-color: #2323239c;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--hub-content-bg-color);
    font-size: 13px;
}
.hub-detail-task-item:hover {
    background-color: #3a3a3c;
}
.hub-detail-task-item.selected {
    background-color: var(--hub-selected-row-bg);
    border-color: var(--hub-selected-row-border);
}

.hub-detail-task-item .task-status-icon {
    margin-right: 12px;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--status-running-text); /* Green dot for active */
}
.hub-detail-task-item.complete .task-status-icon {
    color: var(--hub-accent-color); /* Blue check for complete */
}
.hub-detail-task-item .task-name {
    font-weight: 500;
}
.hub-detail-task-item.selected .task-name {
    font-weight: 500;
}
.hub-detail-task-item.complete {
    color: var(--hub-text-secondary);
}
.hub-detail-task-item.selected.complete {
    color: var(--hub-text-primary);
}


/* --- Right Panel: Data (Logs & Variables) --- */
.hub-detail-data-tabs {
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hub-border-color);
}
.hub-data-tab {
    background: none;
    border: none;
    color: var(--hub-text-secondary);
    padding: 0 4px 12px 4px;
    margin-right: 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.hub-data-tab.active {
    color: var(--hub-text-primary);
    border-bottom-color: var(--hub-accent-color);
}
.hub-detail-content {
    display: none;
}
.hub-detail-content.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}
#hub-detail-log-content, .hub-variable-list {
    flex-grow: 1;
    overflow-y: auto;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.hub-log-entry {
    padding: 4px 0;
    font-size: 0.85em; /* 13.6px */
    display: flex;
    gap: 16px;
}
.log-timestamp {
    color: var(--hub-text-secondary);
    flex-shrink: 0;
}
.log-message {
    color: var(--hub-text-primary);
}

.hub-variable-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--hub-border-color);
    font-size: 0.85em;
}
.hub-var-key {
    color: var(--hub-text-secondary);
}
.hub-var-value {
    background: none;
    border: none;
    color: var(--hub-text-primary);
    padding: 2px;
}
.hub-var-value[contenteditable="true"]:focus {
    outline: 1px solid var(--hub-accent-color);
    border-radius: 4px;
    background-color: var(--hub-content-bg-color);
}

.hub-secondary-btn {
    background-color: var(--hub-content-bg-color);
    color: var(--hub-text-primary);
    border: 1px solid var(--hub-border-color);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: auto; /* Pushes to the bottom */
}
.hub-secondary-btn:hover {
    background-color: #3f3f41;
}

.hub-empty-state-small {
    padding: 20px;
    text-align: center;
    color: #555;
    font-style: italic;
    font-family: var(--hub-font-family);
}

/* Main Button Styling */
/* Keyframe animation for subtle background color change - FASTER AND SMOOTHER */
@keyframes pulse-dark-blue {
    0% {
      background: linear-gradient(145deg, #005ecb, #192a4b);
    }
    100% {
        background: linear-gradient(145deg, #005ecb, #192a4b);
    }
  }
  
  /* Main Button Styling */
  #open-bot-hub-btn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 99999;
      
      width: 44px;
      height: 44px;
      
      padding: 0;
      border: none;
      border-radius: 50%;
      box-shadow: 
          0 4px 12px rgba(0, 41, 92, 0.4),
          0 2px 4px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Removed transform from transition as it's no longer used on hover */
      transition: box-shadow 0.2s ease-in-out; 
      overflow: visible;
  
      /* UPDATED: Faster animation duration */
      animation: pulse-dark-blue 6s ease-in-out infinite; /* Changed from 10s to 6s */
  }
  
  #open-bot-hub-btn:hover {
      box-shadow: 
          0 7px 18px rgba(0, 91, 203, 0.5),
          0 3px 6px rgba(0, 0, 0, 0.25);
      /* Removed: transform: translateY(-2px); */
  }
  
  #open-bot-hub-btn:active {
      transform: translateY(1px); /* Click effect still remains */
      box-shadow: 0 2px 8px rgba(0, 91, 203, 0.4);
  }
  
  /* --- Outer Rings --- */
  #open-bot-hub-btn::before {
      content: '';
      position: absolute;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      border: 1px solid rgba(0, 107, 255, 0.5); 
      border-radius: 50%;
      transition: all 0.3s ease-in-out; /* Slightly faster ring transition */
      opacity: 0.7;
  }
  
  #open-bot-hub-btn::after {
      content: '';
      position: absolute;
      width: calc(100% + 8px);
      height: calc(100% + 8px);
      border: 1px solid rgba(0, 107, 255, 0.25); 
      border-radius: 50%;
      transition: all 0.3s ease-in-out; /* Slightly faster ring transition */
      opacity: 0.5;
  }
  
  #open-bot-hub-btn:hover::before {
      border-color: rgba(42, 148, 255, 0.8);
      transform: scale(1.03);
      opacity: 1;
  }
  
  #open-bot-hub-btn:hover::after {
      border-color: rgba(42, 148, 255, 0.5);
      transform: scale(1.05);
      opacity: 0.8;
  }
  
  /* --- Pure CSS "O" Icon Styling --- */
  #open-bot-hub-btn span {
      display: block;
      position: relative;
      
      width: 22px; 
      height: 22px;
      
      border-radius: 50%;
      background-color: #e0f2ff;
      box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
      z-index: 1; 
  }
  
  #open-bot-hub-btn span::before {
      content: '';
      position: absolute;
      
      top: 5px;
      left: 5px;
      
      width: 12px;
      height: 12px;
      
      background: linear-gradient(145deg, #0a84ff, #005ecb);
      border-radius: 50%;
      box-shadow: 
          inset 0 1px 2px rgba(255, 255, 255, 0.5),
          0 1px 1px rgba(0, 0, 0, 0.2);
  }

  /* =================================================================== */
/* CSS for Bot Hub Profile Manager (New Elements)                      */
/* =================================================================== */

/* --- Main container for the profile selector --- */
#hub-profile-manager {
    display: flex;
    align-items: center;
    gap: 8px; /* Spacing between label, select, and button */
    margin-right: 16px; /* Space between this and the next button */
}

/* --- Label for the dropdown ("Active Profile:") --- */
#hub-profile-manager label {
    color: #cccccc;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap; /* Prevents the label from wrapping */
}

/* --- The profile selector dropdown itself --- */
#hub-profile-selector {
    background-color: #2a2a2e; /* Dark background for the dropdown */
    color: #f0f0f0; /* Light text color */
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: inherit; /* Use the same font as the rest of the modal */
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#hub-profile-selector:hover {
    border-color: #666;
}

#hub-profile-selector:focus {
    outline: none;
    border-color: #0d6efd; /* A blue accent color on focus */
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* --- The '+' button for creating new profiles --- */
#hub-manage-profiles-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: #33373a;
    color: #cccccc;
    border: 1px solid #555;
    border-radius: 50%; /* Makes the button a circle */
    font-size: 20px;
    font-weight: bold;
    line-height: 1; /* Helps with vertical alignment of the '+' */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#hub-manage-profiles-btn:hover {
    background-color: #44494d;
    color: #ffffff;
    border-color: #777;
}

/*
=================================================
 CSS for NEW Bot Hub Client & Run Controls
=================================================
*/

/* --- Main Header Action Bar Layout --- */
.hub-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --- Vertical Divider --- */
.hub-header-divider {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    align-self: center;
}

/* --- Client Selector Container --- */
#hub-client-manager {
    display: flex;
    align-items: center;
    gap: 8px;
}

#hub-client-manager label {
    font-size: 14px;
    color: #a0a0a0;
    white-space: nowrap;
}

/* --- Shared Style for Profile and Client Dropdowns --- */
#hub-profile-selector,
#hub-client-selector {
    background-color: #2a2a2e;
    border: 1px solid #444;
    color: #eee;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 14px;
}

#hub-profile-selector:focus,
#hub-client-selector:focus {
    outline: none;
    border-color: #007bff;
}

#hub-client-selector:disabled {
    background-color: #222;
    color: #777;
    cursor: not-allowed;
}

/* --- Run Controls (Timer and Buttons) --- */
#hub-run-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Runtime Display --- */
#hub-runtime-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #ccc;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 5px;
}

#hub-runtime-timer {
    font-weight: 600;
    color: #4CAF50; /* A green color to indicate 'running' */
    font-family: 'Courier New', Courier, monospace;
}

/* --- Start/Stop Buttons --- */
#hub-start-all-btn,
#hub-stop-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

#hub-start-all-btn svg,
#hub-stop-all-btn svg {
    width: 16px;
    height: 16px;
}

/* Specific button colors */
#hub-start-all-btn {
    background-color: #105950; /* Teal */
}

#hub-start-all-btn:hover {
    background-color: #268a7e;
}

#hub-stop-all-btn {
    background-color: #512115; /* Burnt Sienna */
}

#hub-stop-all-btn:hover {
    background-color: #d16245;
}


/*
=================================================
 CSS for Detailed Task Statuses
=================================================
*/

.hub-inner-task-item,
.hub-detail-task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.hub-detail-task-item {
    cursor: pointer;
}

.hub-detail-task-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hub-detail-task-item.selected {
    background-color: rgba(0, 123, 255, 0.15);
}

.task-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Pending (Default) Status */
.task-status--pending .task-status-icon {
    background-color: #6c757d; /* Gray */
}

/* Running Status */
.task-status--running {
    color: #00c8ff; /* Light Blue Text */
}
.task-status--running .task-status-icon {
    background-color: #00c8ff;
    /* Pulsing animation to indicate activity */
    animation: pulse 1.5s infinite ease-in-out;
}

/* Complete Status */
.task-status--complete {
    color: #8c8c8c; /* Muted gray text for completed tasks */
    text-decoration: line-through;
}
.task-status--complete .task-status-icon {
    background-color: #28a745; /* Green */
    /* Checkmark icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px 7px;
}

/* Failed Status */
.task-status--failed {
    color: #ff5c5c; /* Reddish text */
}
.task-status--failed .task-status-icon {
    background-color: #dc3545; /* Red */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(0, 200, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 200, 255, 0);
    }
}

/* =================================================================== */
/* =================== NEW: WATCHERS PANEL STYLES ==================== */
/* =================================================================== */

/* Main container for the watchers section at the bottom */
#hub-watchers-panel {
    border-top: 1px solid #444;
    padding: 15px 20px;
    background-color: #1e1e1e; /* Slightly different background to distinguish */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Header for the watchers section (Title + Action Buttons) */
.hub-watchers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hub-watchers-header h4 {
    margin: 0;
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 600;
}

.hub-watchers-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Container for the horizontally scrolling watcher cards */
#hub-watchers-list-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px; /* Space for the scrollbar */
}

/* Custom scrollbar for the watchers list */
#hub-watchers-list-container::-webkit-scrollbar {
    height: 6px;
}
#hub-watchers-list-container::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 3px;
}
#hub-watchers-list-container::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}
#hub-watchers-list-container::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Individual watcher card */
.hub-watcher-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 12px;
    width: 240px; /* Fixed width for cards */
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hub-watcher-card:hover {
    background-color: #333;
    border-color: #555;
}

/* Status indicator dot on the left of the card */
.watcher-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #666; /* Default/paused color */
}

.watcher-status-indicator[data-status="running"] {
    background-color: #28a745; /* Green for running */
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
}

.watcher-status-indicator[data-status="paused"] {
    background-color: #6d6868;
}

/* Container for watcher name and run details */
.watcher-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden; /* Prevents long text from breaking layout */
}

.watcher-name {
    color: #1e1e1ee0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
}

.watcher-run-details {
    font-size: 12px;
    color: #000000bf;
}

/* Container for the action buttons on the right of the card */
.watcher-actions {
    display: flex;
    align-items: center;
}

/* Individual icon button on watcher cards */
.hub-icon-btn {
    background: none;
    border: none;
    color: #3f3535;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.hub-icon-btn:hover {
    color: #fff;
    background-color: #444;
}

/* =================================================================== */
/* ================= NEW: SEQUENCE WAITING STATE ===================== */
/* =================================================================== */

/* Style for the sequence row when it's in a waiting state */
.hub-bot-list-row-wrapper.is-waiting {
    opacity: 0.6;
    pointer-events: none; /* Disables interaction with the row */
    user-select: none;
}

/* Specific styling for the "Waiting" status badge */
.status-badge[data-status="Waiting"] {
    background-color: #3a4a6e;
    color: #a7c0ff;
}

/* Override for the disabled Start button */
#hub-start-all-btn:disabled {
    background-color: #333 !important;
    color: #777 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

#hub-start-all-btn:disabled svg {
    stroke: #777 !important;
}


/* =================================================================== */
/* ============== NEW: WATCHER CONFIGURATION MODAL =================== */
/* =================================================================== */

#hub-watcher-config-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 143543543543553533453001;
}

#hub-watcher-config-modal-overlay.visible {
    display: flex;
}

.hub-config-modal-container {
    background-color: #2c2c2e;
    border-radius: 8px;
    padding: 25px 30px;
    width: 100%;
    max-width: 450px;
    border: 1px solid #444;
}

#hub-watcher-config-form h3 {
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
    color: #f0f0f0;
}

.hub-form-group {
    margin-bottom: 18px;
}

.hub-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-size: 14px;
}

.hub-form-group input[type="text"],
.hub-form-group input[type="number"],
.hub-form-group select {
    width: 100%;
    padding: 10px;
    background-color: #222;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 14px;
}

.hub-form-group input:focus, .hub-form-group select:focus {
    outline: none;
    border-color: #007bff;
}

.hub-radio-group {
    display: flex;
    gap: 10px;
}

.hub-radio-group input[type="radio"] {
    display: none;
}

.hub-radio-group label {
    flex-grow: 1;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hub-radio-group input[type="radio"]:checked + label {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.hub-input-with-select {
    display: flex;
}

.hub-input-with-select input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.hub-input-with-select select {
    width: 120px;
    flex-shrink: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.hub-config-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

#hub-add-watcher-btn{
    background-color: var(--hub-text-primary);
    color: var(--hub-bg-color);
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    height: 36px !important;
    gap: 8px;
}

#hub-watcher-config-save-btn{
    background-color: #125b36;
    color: var(--hub-text-primary);
    border: 1px solid #125b36;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: auto;
}

.hub-form-group small{
    color: #bdbdbd;
    position: relative;
    top: .3em;
    left: .05em;
    font-size: 12px;
}