* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
.none{display:none;}
body {
            display: flex;
            background-color: #1a1a1a;
            color: #ffffff;
            height: 100svh;
        }
        .sidebar {
            min-width: 250px;
            width: 280px;
            height: 100vh;
            background-color: #212121;
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 10;
            flex-shrink: 0;
        }
.sidebar.collapsed {
    width: 60px;
    min-width: 60px;
}
.sidebar.collapsed #analizx{display:none;}
.sidebar.collapsed .chat-item .menu {
  visibility: visible;
  background-color: #2a2a2a00;
  color: #646464;
}
.sidebar.collapsed .chat-item.active .menu {
  background-color: #33333300;
  color: #646464;
  }
.sidebar.collapsed .chat-item span,
.sidebar.collapsed .settings-btn span,
.sidebar.collapsed .new-chat-btn span,
.sidebar.collapsed .recent-header {
    display: none;
}
.sidebar.collapsed .new-chat-btn {
    padding: 7px;
    justify-content: center;
    height: 31px;
}
.sidebar.collapsed .chat-item {
    padding: 10px;
    justify-content: center;
    border-radius: 0;
margin: 0;
max-width: 60px;
}
.sidebar.collapsed .chat-item .fas{color:#5b5b5b}
.sidebar.collapsed .chat-item.active .fas{color:#d4d4d4}
.sidebar.collapsed .settings-btn {
    justify-content: center;
    font-size: 20px;
}

        .sidebar-header {
            padding: 12px 20px 12px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* border-bottom: 1px solid #333; */
        }

        .new-chat-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            margin: 15px;
            border: 1px solid #202020;
            border-radius: 5px;
            background: none;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: #1a1a1a;
            font-size: 15px;
        }

        .new-chat-btn:hover {
            background-color: #333;
        }
.new-chat-btn.new-chat-obrabotka{background-color:#F00; cursor: not-allowed; }
        .recent-header {
            padding: 10px 20px;
            color: #888;
            font-size: 0.85rem;
        }

        .chat-list {
            flex-grow: 1;
            overflow-y: auto;
            position: relative;
        }

        .chat-item {
            padding: 10px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 3px solid transparent;
            transition: background-color 0.2s;
            /* white-space: nowrap; */
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            max-width: 250px;
            border-radius: 0 0px 0px 0;
margin: 0 0 0px 0px;
        }

        .chat-item:hover {
            background-color: #333;
        }

        .chat-item.active {
            background-color: #333;
            border-left-color: #97b1ff;
        }
.chat-item .menu{float:right;background-color: #1a1a1a00;padding: 5px 0px 5px 0px;border-radius: 6px;visibility: hidden;width: 15px;height: 24px;margin: -6px 0px -7px 0px;min-width: 15px;min-height: 24px;font-size: 14px;font-weight: 600;text-align: center;color: #898989;}
.chat-item .menu:hover{color:#000;background-color: #ffffff; cursor:pointer;}
.chat-item:hover .menu{visibility:visible}
.sidebar-footer {
            padding: 15px;
            /* border-top: 1px solid #333; */
        }
.chat-item:hover .menu{display:block;}
.message:hover .user-avatar{z-index: 5;}
.message:hover .mnu{visibility: visible; z-index: 4; background-color:#262626; color:#fff;}
.menu_box,#setx{
    position: absolute;
    left: 22px;
    width: 210px;
    height: 123px;
    z-index: 1000;
    float: right;
    background-color: #585858;
    display: none;
    border-radius: 9px;
    padding: 5px 0px 0px 0px;
    margin: 29px 0px -135px -19px;
}
#setx{margin: -112px 0px 35px -12px;padding: 10px 15px;width: 170px;height: 110px;}
#setx a{color:#EEE;float: left;text-decoration: none;}
.foradm{/* visibility:hidden; *//* height: 0px; */}
#setx a:hover{text-decoration:underline;}
.menu_box button{float:left;clear:both;text-align:left;width: 100%;display:block;background-color: #585858;color: #FFF;margin: 0px 0px 1px 0px;padding: 10px 0px 10px 0px;border: none;}
.menu_box button i{margin:2px 15px 0px 15px;float:left;color: #c5c5c5 !important;}
        .settings-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            padding: 5px;
            transition: color 0.2s;
            font-size: 16px;
        }
.menu_box button:hover{cursor:pointer; background-color:#333333}
        .settings-btn:hover {
            color: #fff;
        }
.menu_box button.dl{border-top:1px solid #b2b2b2; margin-top:-1px;}
        /* Main chat area */
        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 100svh;
            position: relative;
            overflow: hidden;
            background-color: #1a1a1a;
            max-height: 100svh;
            padding: 0px;
            margin: 0px;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            /* border-bottom: 1px solid #333; */
            min-width: 240px;
            /* background-color: #000000; */
            z-index: 1;
        }
.top-bar .menu-toggle {
    display: none;
}



#analizx{float:left;clear:both;font-size: 12px;color: #afaa84;border-top: 1px solid #eeeeee30;padding: 7px 0px 0px 6px;width: 100%;}
        .model-selector {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #2a2a2a;
            cursor: pointer;
            font-size: 0.9rem;
            /* width: 224px; */
        }
.model-selector select{width: 186px;float:left;clear:both;background-color: #2a2a2a;border: none;color: #97bfff;font-size: 13px;font-weight: 600;padding: 0px 5px 0px 0px;outline: none;}
.model-selector select:focus, .model-selector select:active {
    border: none;
    outline: none;
    box-shadow: none;
}

#glmn {
  position: absolute;
  width: 185px;
  height: 85px;
  background-color: #2a2a2a;
  margin: 0px 0px 0px 0px;
  right: 9px;
  top: 51px;
  border-radius: 8px;
  padding: 15px 20px 15px 20px;
  color: #FFF;
  display: none;
  font-size: 14px;
}

#glmn a{float:left; width:100%; color:#FFF; text-decoration:none; margin:0px 0px 10px 0px;}
#glmn a:hover{text-decoration:underline;}
#glmn a.exit{text-align: right;
    color: #fff;
    font-size: 13px;
    margin: 8px -9px -24px 5px;
    width: auto;
    float: right;
    background-color: #000;
    border-radius: 4px;
    padding: 0px 5px 3px 5px;}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: #2a2a2a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0 -5px 0px 0px;
  z-index: 1;
  min-width: 30px;
  min-height: 30px;
        }
.top-bar .user-avatar:hover{cursor:pointer;}
.message .user-avatar{background-color: #444;border-radius: 50%;}
.user-avatar .loader-icon{width:24px; min-width:24px; height:24px;}
.user-avatar .fa-user{padding:10px}
.user-avatar .fa-robot{padding:10px}

        .menu-toggle {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 5px;
        }

        /* Message area */
        .message-area {
            flex-grow: 1;
            overflow-y: auto;
            padding: 0px 0px 50px 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 200px;
            margin: 0px 0px 60px 0px;
        }

        .message-container {
            display: flex;
            flex-direction: column;
            justify-content: normal;
            min-height: 100%;
            overflow-y: auto;
            overflow-x: auto;
            /* max-width: 1200px; */
            /* margin: 0 auto; */
            /* min-width: 50%; */
        }
/* Chrome, Safari, Edge */
.message-container::-webkit-scrollbar {
    width: 8px;
    height:8px;
}

.message-container::-webkit-scrollbar-track {
    background-color: #222;
    border-radius: 4px;
}

.message-container::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 4px;
}

/* Firefox */
.message-container {
    scrollbar-width: thin;
    scrollbar-color: #000 #222;
}
.message {
            display: flex;
            gap: 15px;
            margin: 0px 20px 20px 0px;
        }
.message .mnu{
  position: relative;
  width: 30px;
  min-width: 30px;
  padding: 11px 0px 0px 8px;
  height: 100px;
  border-radius: 0px 0px 18px 18px;
  margin: 18px -2px -101px -40px;
  color: #fff;
  visibility: hidden;
  float: left;
  background-color: #2c2c2c;
  left: 0px;
  z-index: 2;
  }
.message .mnu:hover{background-color: #000; color:#FFF;}
.message .mnu i{margin: 6px 14px 6px 0px;float: left;clear: both;}
.message .mnu i.fa-download{margin: 6px 14px 10px 0px;}
.message .mnu i:hover{color:#97b1ff; cursor:pointer;}
.message .mnu2{width: 30px;min-width: 30px;height: 102px;padding: 11px 0px 0px 8px;margin: 18px -2px -101px -40px;z-index: 0;}
.user-message{
        background-color: #ffffff14;
        padding: 3px 16px 3px 3px;
        border-radius: 18px 18px 18px 18px;
        width: fit-content;
        }
.user-message .user-avatar{z-index: 3;}
.ai-message{
        background-color: #ffffff14;
        padding: 3px 10px 3px 3px;
        border-radius: 18px 18px;
        width: fit-content;
        }
.ai-message .user-avatar{z-index: 1;}
.ai-message .message-content{margin:2px 0px 0px 0px;}
        .message-content {
            /*! flex-grow: 1; */
            line-height: 1.7;
            font-size: 16px;
            float: left;
        }

        /* Input area */
        .input-area {
            padding: 20px;
            /*! display: flex; */
            /*! align-items: center; */
            transition: all 0.3s ease;
            display: block;
        }

.input-area.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 700px;
}








#upload-area .tab{background-color:#FFF; float: left; height: 25px; padding: 3px 5px 10px 10px;
position: absolute; z-index: 1234;
margin: -17px 0px -10px 0px;
left: 0px;
top: 0px;
border-radius: 6px 6px 0 0;
font-size:13px;
/*! border: 1px dashed #000; */
border-bottom: none;
}
#upload-area .tab div{float: left;clear:none;margin: 0px 10px 0px 0px; 
/*! background-color:#EEE; */border-right: 1px solid #DDD;padding: 0px 10px 0px 0px;cursor: pointer;}
/*#upload-area:hover .tab{background-color: #e7f5ff;}*/
#upload-area .tab div.tact{text-decoration: underline; color:#000;}
#upload-area .tab div:hover{text-decoration: underline;}
#upload-area .tab div.tab3{border-right: 0px;margin: 0px 0px 0px 0px;}
#upload-area .tab div.hidex{float:right;border-right: 0px;margin: -4px -15px 0px 0px;background-color: #b5b5b5;border-radius: 4px;position: relative;z-index: 1;width: 25px;height: 25px;color: #FFF;text-decoration: none;}
#upload-area .tab div.hidex:hover{background-color:#e91e63;}
#upload-area .tab div.hidex i{display:block;margin: 5px 0px 0px 5px;transform: rotate(-45deg);font-size: 17px;}



#upload-area.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    max-width: 650px;
    margin: -95px 0% 86px 0%;
}
.input-area.bottom {
    position: absolute;
    transform: none;
    width: 100%;
    bottom: 24px;
    left: 0;
    padding-bottom: 16px;
}

        .input-container {
            display: flex;
            align-items: center;
            width: 100%;
            border-radius: 10px 10px 0px 0px;
            background-color: #2a2a2a;
            padding: 10px 15px;
            transition: border-color 0.2s;
            overflow: hidden;
            min-width: 240px;
            z-index: 3;
            position: relative;
            background-color: #2a2a2acf;
        }

        .input-container:focus-within {
            border-color: #8ab4f8;
        }

        .input-field {
            flex-grow: 1;
            background: none;
            border: none;
            color: #fff;
            font-size: 18px;
            resize: none;
            outline: none;
            padding: 0px;
            max-height: 95vh;
            overflow-y: auto;
            min-height: 26px;
        }

        .input-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
.input-actions .add-btn{border-radius:50%;border: 2px solid #88888840;height: 29px;width: 29px;text-align: center;line-height: 0;padding: 0px;}
        .input-btn {
            background: none;
            border: none;
            color: #888;
            cursor: pointer;
            padding: 5px;
            transition: color 0.2s;
            font-size: 1.1rem;
        }
        .input-btn:hover {
            color: #fff;
        }
.input-btn.boxfileshow{color:#000; background-color:#8BC34A;}
        .send-btn {
            color: #828589;
        }

        /* Dark mode specific styles */
        .dark-mode .sidebar {
            background-color: #212121;
        }

        .dark-mode .main-content {
            background-color: #000000;
        }

        /* Helper classes */
        .d-none {
            display: none;
        }








 



/* Responsive styles */
@media (max-width: 768px) 
{
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        /* height: 100vh; */
        z-index: 10;
    }
.input-area.centered {
        width: 100%;
        top: 45%;
    }
.input-area.bottom {
        position: absolute;
        padding: 10px;
        bottom: 25px;
    }
.input-field {
    font-size: 13px;
    min-height: 18px;
}
.message-content {
    line-height: 17px;
    font-size: 13px;
    margin: 0px 0px 4px 0px;
    min-height: 20px;
}
.ai-message .message-content{margin: 37px -10px 0px -38px;}
.user-message .user-avatar {
  width: 18px;
  height: 18px;
  margin: -3px -11px -15px -3px;
  padding: 14px;
}
.chat-item,.new-chat-btn,.settings-btn {font-size: 13px;}
.chat-item .menu {visibility: visible;}
.message-area{
    padding: 0px 10px 20px 10px;
}
.ai-message {padding: 0px 0px 0px 0px;}
.user-message {padding: 3px 15px 3px 3px;margin: 0px 10px 20px 0px;}
.message .mnu1 {/* visibility: visible; */margin: 18px -9px -101px -33px;}
.message .mnu2 {
  visibility: visible;
  width: 112px;
  min-width: 112px;
  margin: 0px -75px -101px -20px;
  height: 30px;
  border-radius: 0px 18px 18px 0px;
  padding: 1px 0px 0px 21px;
  z-index: 0;
}
.message .mnu2 i{float: left;clear: none;margin: 6px 14px 6px 0px;}
.message .mnu1 i{}

#upload-area .instruct{font-size:12px;}
.toggle-label{font-size:10px;}
  
}
/* Responsive styles */




















.message-content a {color: #7288f7;}
.message-content a:hover {color: #B079F3;}
.message-content ol, .message-content ul {/* color: #F7F79B; */margin-left: 1em;padding: .5rem;}
.message-content li {margin-bottom: 0.5rem;}
.message-content strong, .message-content b {color: #60d8da;}
.message-content ol li {} 
.message-content ul li {/* color: #FFF0B4; */}
.message-content ul li strong,.message-content ul li b{color: #F9BD70;}
.message-content ol li strong,.message-content ol li b{color: #f92472;}
.message-content ol li p strong,.message-content ul li p strong{color: #FFEF00;}
.message-content i, .message-content em {color: #FFF;}
.message-content h1,.message-content h1 strong{color: #9EC8FF;line-height:2.2rem;font-size: 20px;} 
.message-content h1{margin: 1rem 0;}
.message-content h2 ,.message-content h2 strong{color: #FFD700;font-size: 20px;}
.message-content h2{margin: 1.5rem 0;}
.message-content h3,.message-content h3 strong{color: #00FF58;font-size: 20px;}
.message-content h3{margin: 1rem 0;}
.message-content h4,.message-content h4 strong{color: #B633FF;font-size: 20px;}
.message-content h4{margin: .5rem 0;}
.message-content h5,.message-content h5 strong{color: #B600FF;font-size: 20px;}
.message-content h5{margin: .3rem 0;}
.message-content h6,.message-content h6 strong{color: #F29595;font-size: 20px;}
.message-content h6{margin: .1rem 0;}
.message-content li p{display: contents;}








.message-content table {width: 100%;border: none;border-collapse: separate;float: left;clear: both;margin: 10px 0px 10px 0px;border-spacing: 1px;background-color: #c9c9c9;border-radius: 10px;overflow: hidden;border: 2px solid #c9c9c9;}
.message-content table thead th {font-weight: bold;text-align: left;padding: 10px 15px;/* background: #ffffff; */font-size: 15px;color: #000;}
.message-content table tr th:first-child, .message-content table tr td:first-child {
}
.message-content table tr th strong, .message-content table tr th b{color:#000}
.message-content table tr th:last-child, .message-content table tr td:last-child {border-right: none;}
.message-content table thead tr th:first-child {border-radius: 6px 0 0 0;}
.message-content table thead tr th:last-child {border-radius: 0 6px 0 0;}
.message-content table tbody td {text-align: left;border: none;padding: 10px 15px;font-size: 14px;vertical-align: top;}
.message-content table tbody tr:last-child td{}
.message-content table tbody tr:last-child td:first-child {}
.message-content table tbody tr:last-child td:last-child {border-radius: 0 0 10px 0;}
.message-content table tbody tr:nth-child(1n),.message-content table tbody tr:nth-child(1n) strong{background: #646464;color: #FFF;}
.message-content table tbody tr:nth-child(even),.message-content table tbody tr:nth-child(even) strong {background: #aeaeae; color: #000;}
.message-content ol ul,.message-content ul ol{margin: 0px; padding: 0px;}
.message-content ol ul li,.message-content ul ol li{/* color:#FFF0B4; */}
.message-content table tbody td a {
    color: #ffe500;
}











#mikrfn{background-color: #000000c2;width:100%;height:100%;position: fixed;z-index: 1051;left: 0;top: 0;background-image: linear-gradient(to right,#000000 0, #ffffff 100%);/* filter: opacity(0.95); */display: none;}
#mikrBtn.startM,#mikrBtn.stopM{background-position: center;background-repeat: no-repeat;background-size: 150px 200px;width: 275px;height: 275px;border: 9px solid #fff;border-radius: 50%;clear: both;box-shadow: 1px 2px 5px #00000036;background-color: #ffffff;background-image: url(../img/m3.svg?x=1);}
#mikrBtn.startM{background-image: url("../img/m2.svg?x=1");}             
#mikrBtn.stopM{background-image: url("../img/m3.svg?x=1");  background-color: #afdcff; border-color: #afdcff;}
#mikrBtn.mikrObr{background-image: url("../img/loader.gif") !important;background-size: 128px;}
#mikrBtn:hover{cursor: pointer;}
#mikrBtn .time{position:relative;left: 83px;top: 248px;background-color: #fff;text-align:center;border-radius: 16px;font-size: 16px;width: 90px;color: #000;}
#mikrBtn.startM .time{/* display:none; */}
#mikrBtn{margin: 200px auto 0px auto;float: none;}
#mikrBtn:hover{ box-shadow:0px 0px 100px #adcbe2;}
#mikrfn svg{fill: #000;width: 60px;height:60px;position:absolute;top:20px;right: 50%;margin-right: -30px;}
#mikrfn svg:hover{fill:#F00;}





#setx button svg{border-radius: 50%;padding: 5px;margin: 7px 0px -27px 24px;}
#setx button:hover svg{background-color:#262626;}
#setx .temaLight .lightToggleIcon{display: block;}
#setx .temaLight .darkToggleIcon{display: none;}
#setx .temaDark .lightToggleIcon{display: none;}
#setx .temaDark .darkToggleIcon{display: block;}

#setx button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    float: left;
    clear: both;
    color: #ffffff;
    font-weight: bold;
    margin: 7px 0px 0px 0px;
}
#setx button svg {
    border-radius: 50%;
    padding: 5px;
    margin: 3px -50px -27px 48px;
    width: 37px;
    height: 37px;
}
#setx .temaLight .lightToggleIcon {
    display: block;
}
#setx .temaLight .darkToggleIcon {
    display: none;
}

pre code.hljs {
  border-radius: 6px;
  margin: 1rem 0rem;
  white-space: break-spaces;
}

















body.temaLight{background-color: #ffffff !important; color: #000000;}
.temaLight .main-content {background-color: #ffffff;}
.temaLight .sidebar {background-color: #f0f0f0;}
.temaLight .menu-toggle {color: #000000;}
.temaLight .new-chat-btn {background-color: #000;border: #000;color: #fff;}
.temaLight .new-chat-btn:hover {background-color: #FFF; border:#FFF; color:#000;}
.temaLight .chat-item {background-color: #e1e1e1; color:#000;}
.temaLight .chat-item.active {
background-color: #FFF;
border-left-color: #ff0e52;
color:#000;
}
.temaLight .sidebar.collapsed .chat-item.active {
    background-color: #000;
    border-left-color: #ff0e52;
    color: #FFF;
}
.temaLight .chat-item .menu {background-color: #f0f0f0; color:#999}
.temaLight .chat-item .menu:hover{color:#000}
.temaLight .chat-item:hover{background-color:#FFF; color:#000;}
.temaLight .menu_box button:hover{background-color:#EEE; color:#000;}
.temaLight .menu_box, .temaLight #setx {background-color: #ffffff;color:#000;box-shadow: 6px 6px 18px #00000047, -5px -5px 31px #ffffff;}
.temaLight .menu_box button{background-color: #ffffff;color:#000;}
.temaLight .menu_box button.dl {border-top: 1px solid #d0d0d0;}
.temaLight #setx button{color:#000;}
.temaLight #setx button:hover svg{background-color:#c8f199;}
.temaLight #setx a {color: #2196F3;}
.temaLight .model-selector{background-color: #f0f0f0;}
.temaLight  select {
    width: 186px;
    background-color: #f0f0f0;
    color: #000000;
}
.temaLight .user-avatar {background-color: #f0f0f0; color:#000;}
.temaLight .input-container {background-color: #f0f0f0;background-color: #FFF;box-shadow: 0px 2px 7px #00000047;}
.temaLight .input-container textarea{ color:#000;}
.temaLight .settings-btn:hover {color: #000;}
.temaLight .user-message{background-color: #f0f0f0;color: #000;}
.temaLight .ai-message {background-color: #ffffff; color: #000;}
.temaLight .input-btn:hover {color: #000;}
.temaLight .message .mnu{color:#000; background-color:#FFF;box-shadow: 0px 2px 7px #00000047;}
.temaLight .message-container::-webkit-scrollbar-track {background-color: #f0f0f0;}
.temaLight .message-container::-webkit-scrollbar-thumb {background-color: #000;}
.temaLight .message-container {scrollbar-width: thin; scrollbar-color: #fff #f0f0f0;}
.temaLight .message-content i,.temaLight  .message-content em {color: #000;}
.temaLight .message-content a {color: #7288f7;}
.temaLight .message-content a:hover {color: #B079F3;}
.temaLight .message-content ol,.temaLight  .message-content ul {/* color: #F7F79B; */}
.temaLight .message-content strong,.temaLight  .message-content b {color: #2d999b;}
.temaLight .message-content ul li strong,.temaLight .message-content ul li b{color: #1ABB0E;}
.temaLight .message-content ol li strong,.temaLight .message-content ol li b{color: #f92472;}
.temaLight .message-content i,.temaLight .message-content em {color: #000;}
.temaLight .message-content h1,.temaLight .message-content h1 strong{color: #0070d2; line-height:2.2rem;} 
.temaLight .message-content h2 ,.temaLight .message-content h2 strong{color: #ff0e52;}
.temaLight .message-content h3,.temaLight .message-content h3 strong{color: #00A881;}
.temaLight .message-content h4,.temaLight .message-content h4 strong{color: #9600EA;}
.temaLight .message-content h5,.temaLight .message-content h5 strong{color: #FF6000;}
.temaLight .message-content h6,.temaLight .message-content h6 strong{color: #3B38A6;}
.temaLight .message-content table {background-color: #f0f0f0;border: 2px solid #f0f0f0;}
.temaLight .message-content table thead th {color: #000;}
.temaLight .message-content table tbody tr:nth-child(1n){background: #ffffff;}
.temaLight .message-content table tbody tr:nth-child(even) {background: #f0f0f0; color: #000;}
.temaLight .upload-box,.temaLight #kreativ1,.temaLight #upload-area .tab,.temaLight #kreativ1 .uroven_kr{background-color: #5c5c5c;color: #FFF;}
.temaLight #upload-area .tab div{color:#EEE;border-right: 1px solid #838383;}
.temaLight #upload-area .tab div.tact{color:#ff0e52}
.temaLight #upload-area .tab div.tab3{border-right: 0px;}
.temaLight .toggle-container{
    background-color: #ffffff !important;
    box-shadow: -3px 7px 11px #00000021;
}


.upload-box {
    padding: 20px 10px 20px 10px;
    text-align: center;
    position: relative;
    margin: -50px 1% 110px 1%;
    width: 98%;
    background-color: #ffffff;
    height: 120px;
    border-radius: 10px;
    color: #686868;
    display: flex;
    transition: all 0.3s ease;
    z-index: 3;
}
#upload-area .instruct{width:100%;margin: 5px 0px 10px 0px;border: 1px dashed #c7c7c7;height: 48px;display: flex;align-items: center; justify-content: center;padding: 0px;word-break: break-word;font-size: 14px;cursor: pointer;display: none;}
#upload-area .instruct.displ-flex{display:flex !important;}
/*
.upload-box:hover{background-color: #000000; transition: all 0s ease;}
.upload-box.drag-over {
    background-color: #e7f5ff;
}
*/
.preview-container {
    display: flex;
    flex-wrap: nowrap;
    margin: -12px -100% -17px 0px;
    width: 100%;
    clear: both;
    padding: 0px;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
}
.file-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #4ba14e;
    padding: 2px 10px 5px 10px;
    border-radius: 5px;
    margin: 8px 10px 0px 0px;
    color: #FFF;
    height: 31px;
    min-height: 31px;
}
.file-item span{font-size: 12px;line-height: 12px;white-space: break-spaces;word-break: break-word;}
.file-item-image{height: auto;margin: 0px 13px 4px 0px;background: #000000;padding: 2px 10px 5px 9px;border-radius: 11px;}
.preview-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
    margin: 3px 0px 0px -4px;
}
.remove-file {
    background: black;
    color: white;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 0px;
    padding: 0px 0px 7px 0px;
    font-size: 27px;
    border-radius: 50%;
    margin: 0px -16px -3px 5px;
    min-width: 24px;
    min-height: 24px;
}
.remove-file:hover{color:#FFF; background-color:#F00;}
#file-preview, #box_data,#box_prompt{display:none;width: 100%;height: 100%;margin: 0px 0px 0px 0px;}
#file-preview.displ-flex{display:flex !important;}
#box_prompt{display:block;float: left;clear: both;}
#autoriz_no{float: none;clear: both;width: 100%;margin: 0px auto 0px auto;text-align: center;}
#prompt{width:100%;min-width: 100%;height: 42px;min-height: 55px;padding: 5px 5px 5px 5px;border: 1px solid #EEE;background-color: #EEE;border-radius: 6px;margin: -7px 0px 19px 0px;max-width: 100%;font-size: 14px;float: left;clear: both;z-index: 1234;position: relative;resize: none;outline: none;}
#prompt.resz{height: 172px;}
#btnsv.resz{margin: -14px 0px 0px 0px;}
#box_data{float:left;/* background-color: #f1f1f17d; */margin: -9px 0px -10px 0px;clear:both;text-align:left;padding:10px;height: 100%;font-size: 12px;}
#box_data .toggle-label{color:#000;}
.toggle-container {
            display: flex;
            align-items: center;
            margin: -1px 0 -116px 0%;
            position: relative;
            z-index: 3;
            padding: 6px 9px 6px 10px;
            background-color: #2a2a2a;
            border-radius: 0px 0px 10px 10px;
            font-size: 11px;
            color: #707070;
            left: 0px;
            /*! background-color: #F00; */
            /*! width: 250px; */
            min-width: 100%;
            clear: both;
            float: left;
        }
.toggle-container label{width: 75px;float: left;}
.toggle-container label:hover{color:#cecece;}
.input-area.centered .toggle-container {background-color: #2a2a2a;color:#000;background-color: #2a2a2acf;}
.toggle-switch {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 15px;
        }
.toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
.slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0px;
            right: 0px;
            bottom: 0;
            background-color: #404040;
            transition: .4s;
            border-radius: 34px;
        }
.slider:before {
            position: absolute;
            content: "";
            height: 7px;
            width: 7px;
            left: 5px;
            bottom: 4px;
            background-color: #888888;
            transition: .4s;
            border-radius: 50%;
        }
input:checked + .slider {background-color: #404040;}
input:checked + .slider:before {transform: translateX(13px);background-color: #97b1ff;
}
.toggle-label {
        user-select: none;
        cursor: pointer;
        margin: -10px 15px 0px 4px;
        position: relative;
        top: -1px;
        color: #787878;
        }

#kreativ1 {
    width: 255px;
    margin: -5px 0px 0px -10px;
    background-color: #ffffff;
    position: relative;
    padding: 10px 0px 4px 0px;
    border-radius: 0px 0px 13px 6px;
    height: auto;
    z-index: 12;
    float: left;
    clear: both;
    display: block;
}
#kreativ1 .uroven_kr {
    margin: -18px 0px -100px 0px;
    font-size: 11px;
    background-color: #ffffff;
    color: #8f8f8f;
    position: relative;
    z-index: 2;
    width: 170px;
    height: 18px;
    text-align: left;
    border-radius: 8px 8px 0px 0px;
    padding: 2px 0px 0px 10px;
    font-weight: 400;
    text-shadow: none;
    /*! float: left; */
    /*! clear: both; */
    float: left;
    clear: both;
}
#kreativ1 input {
    border: 1px solid #cdcdcd;
    border-radius: 4px;
}
#kreativ1 input[type="text"] {
    width: 37px;
    height: 23px;
    padding: 0px 4px 0px 4px;
    border-radius: 11px;
    margin: -23px 4px 0px -4px;
    font-size: 10px;
    border: 1px solid #83838300;
    text-align: center;
    background-color: #e1e1e1;
    color: #6c6c6c;
    display: block;
    float: right;
    z-index: 123;
    position: relative;
    clear: both;
}
#kreativ1 input[type="range" i] {
  width: 200px;
  height: 18px;
  outline: 0;
  margin: 103px 0px 0px 7px;
  float: left;
  clear: both;
  margin: 0px 0px 0px 7px;
  display: block;
  position: relative;
}







#box_prompt:hover, #box_data:hover{cursor: auto;}
#btnsv{float:right;background-color: #767676;color:#FFF;font-size: 12px;padding: 2px 7px 3px 7px;border-radius: 8px;margin: 8px -7px 0px 0px;cursor: pointer;}
#btnsv:hover{background-color:#8bc34a}


thought,.thought 
{font-weight: 600;font-size: 13px;padding: 10px;border-radius: 8px;color: #ffcbdc;line-height: 18px;background-color: #2A2A2A;width: 100%;display: block;background-color: #FFFCD2;color: #6a3c49;float: left;margin: 0px 0px 20px 0px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-weight: 500;}
thought.fa-brain::before,.thought.fa-brain::before 
{
font-family: "Font Awesome 6 Free";
font-size: 24px;
float:left; margin: 7px 10px 5px 5px;
font-weight: bold;
}
.thought paragraph{float: left;clear: both;width: 100%;margin: 0px 0px 10px 0px;font-weight: 600;font-size: 14px;/* display: block; */}
.thought > paragraph:first-child {float: none; clear: none; display: block;}
.thought > paragraph:last-child {margin-bottom: 0px;}

             
.fas.fa-stop{
    border: 3px solid #828589;
    padding: 5px 0.5px 0px 0px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin: -10px -6px -10px 0px;
    position: relative;
    }
.stream-interrupted{color:#ff0000;}
#site_link{width:100%;padding:5px 10px;border-radius:6px;border: 1px solid #00000000;font-size: 16px;margin:0px 0px 10px 0px;background-color: #EEE;color: #000;}
#box_data .nonactive .toggle-switch{filter: invert(0.9) opacity(0.2);}
#box_data .nonactive .toggle-label {color:#999;}
#inputArea .smsct{display:none;float: left;clear: none;font-size: 17px;margin: -15px 0px 0px 38px;}
#inputArea .bgsct .fas{font-size: 15px;margin: 1px -30px -23px 36px;float: left;}


processes,.processes {font-size: 15px;padding: 10px;border-radius: 8px;line-height: 18px;background-color: #2a2a2a;width: 100%;display: block;color: #fffb84;float: left;margin: 0px 0px 10px 0px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-weight: 400;clear: both;}
.processes.fas::before {font-family: "Font Awesome 6 Free";font-size: 16px;float:left;margin: 0px 5px 0px 0px;font-weight: bold;}
.sidebar.collapsed .chat-list .chat-item{display:none;}

.cthth_nero {
    float: left;
    clear: both;
    margin: 0px -92px 0px 12px;
    padding: 2px 0px 2px 0px;
    z-index: 2;
    position: relative;
    height: 20px;
    background-color: #2a2a2a;
    border-radius: 6px;
}
.cthth_nero div.nro {
    border-radius: 7px;
    height: 18px;
    padding: 1px 5px 0px 5px;
    line-height: 14px;
    width: 70px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    color: #b5ffb5;
    overflow: hidden;
}
.cthth_nero div.nro:hover{color:#FFEB3B}




















.sidebar2{
    margin: 15px 15px 12px 0px;
    height: auto;
    border-radius: 10px 17px 10px 0px;
    max-width: 50%;
    color: #000;
    flex-direction: row;
    padding: 10px 10px 0px 0px;
    display: none;
    width: 50%;
}

/*
.sidebar2 {
    margin: 15px 15px 12px 0px;
    height: calc(100vh - 30px); 
    border-radius: 10px;
    max-width: 50%;
    color: #000;
    flex-direction: column; 
    padding: 0; 
    min-width: 300px; 
    display: none; 
    background-color: #2a2a2a;
    overflow: hidden; 
}
*/


.dark-mode .sidebar2{background-color: #ffffff12;background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, #00000000 1px), radial-gradient(circle at 20% 80%, rgb(180 180 180 / 0%) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgb(255 255 255 / 30%) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgb(255 255 255 / 20%) 0%, transparent 50%), linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #4c5b83 100%);background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;background-position: 0 0;background-repeat: repeat;background-attachment: fixed;box-shadow: 0px 0px 35px 10px #00000099 inset;}
.sidebar2 .content
{
  overflow-y: auto;
  max-height: 95vh;
  padding: 10px;
  width: 100%;
  max-width: 100%;
}
.sidebar2 .content::-webkit-scrollbar,.chat-list::-webkit-scrollbar {width: 8px; height:8px;}
.sidebar2 .content::-webkit-scrollbar-track,.chat-list::-webkit-scrollbar-track { background-color: #9E9E9E; border-radius: 4px;}
.sidebar2 .content::-webkit-scrollbar-thumb,.chat-list::-webkit-scrollbar-thumb { background-color: #4a4a4a; border-radius: 4px;}
.sidebar2 .content,.chat-list {scrollbar-width: thin; scrollbar-color: #000 #222;}



.resizer {
    width: 6px;
    cursor: col-resize;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    background: linear-gradient(179deg, #000 1px, transparent 1px, transparent 1px),
        linear-gradient(#666 2px, transparent 1px, transparent 1px);
    background-size: 2px 100%, 100% 3px;
    background-repeat: repeat-y;
}

.resizer:hover {
 background: linear-gradient(179deg, #000 1px, transparent 1px, transparent 1px),
        linear-gradient(#787878 2px, transparent 1px, transparent 1px);
 background-size: 1px 100%, 100% 3px;
 background-repeat: repeat-y;
 width: 6px;
}








@media (max-width: 768px) 
{
  .sidebar2 {
    display: none;
  }
  .main-content {
    flex: 2;
  }
}
@media (max-width: 480px) 
{
  .sidebar2 {
    display: none !important;
  }
  .model-selector select{width: 90px;}
  #artefakt{display:none;}
  #n8n-webhook-id{width: 148px !important;}
}
@media (min-width: 769px) and (max-width: 1024px) 
{
  .sidebar2 {
    width: 15%;
    min-width: 8%;
    max-width: 30%;
  }
}












#artefakt{
    position: absolute;
    right: 60px;
    top: 17px;
    font-size: 21px;
    color: #8d8d8d;
}
#artefakt:hover,#artefakt.artefaktact{cursor: pointer;color: #ffffff;}

#clearCd{
    background-color:#ffffff00;
    border-radius:6px;
    border:none;
    margin: 0px -10px 0px 0px;
    position: absolute;
    right: 64px;
    top: 21px;
    }
#clearCd i{color: #8d8d8d;font-size: 20px;}
#clearCd:hover i{color:#ffffff; cursor: pointer;}







.sldmenu {
    width: calc(100% - 20px);
    /* height: 32px; */
    /* background-color: #dfdfdf; */
    margin: 5px 0px -20px 15px;
    flex-shrink: 0;
    border-radius: 14px;
}
.sldmenu .hidex2 {
    float: right;
    border-right: 0px;
    margin: -10px -10px 0px 0px;
    background-color: #7b0000;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    width: 25px;
    height: 25px;
    color: #FFF;
    text-decoration: none;
}
.sldmenu .hidex2 i {
    display: block;
    margin: 2px 0px 0px 4px;
    transform: rotate(-45deg);
    font-size: 17px;
}
.sldmenu .hidex2:hover{cursor:pointer; background-color:#F00;}


hr{border:.1px solid #ffffff2b;}





#inputArea.drag-over-input .input-container{
    border: 2px dashed #97bfff;
    background-color: rgba(0, 123, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
}



.n8n-webhook-container{float:left;clear:both;z-index: 1;}
#n8n-webhook-id{margin:0px 10px 0px 0px;background-color:#000;color:#FFEB3B;font-size:12px;border:none;padding:4px 6px;border-radius:4px;width: 230px;}
#save-n8n-hook-btn{background:none;color:#fff;border:none;margin: -5px -1px -3px 10px;font-size: 22px;}
#save-n8n-hook-btn:hover{color:#4CAF50; cursor:pointer}






















#btn-to-knowledge {
    background: #ffffff24;
    border: 1px solid #ffffff00;
    color: #a6a6a6;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 15px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 33px;
    position: absolute;
    right: 79px;
    top: 13px;
}
#btn-to-knowledge:hover {
    background: rgb(255 255 255 / 20%);
    color: #fff;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
#btn-to-knowledge i {color: #78a2f4;}
#pkg-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(2px);
    z-index: 9998; display: none;
}
#pkg-preview-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #1e1e1e; border: 1px solid #444;
    width: 600px; max-width: 90%;
    z-index: 9999; display: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}
.pkg-header {
    background: #252525; padding: 15px 20px;
    font-size: 18px; font-weight: bold; color: #fff;
    border-bottom: 1px solid #333;
}
.pkg-body { padding: 20px; }
.pkg-body label { color: #888; font-size: 12px; display: block; margin-bottom: 5px; }
#pkg-preview-content {
    width: 100%;
    height: 450px;
    background: #2d2d2d;
    border: 1px solid #444;
    color: #ddd;
    padding: 10px;
    border-radius: 6px;
    resize: vertical;
    outline: none;
    font-size: 14px;
}
#pkg-preview-content:focus { border-color: #666; }
.pkg-footer {
    padding: 15px 20px; background: #252525;
    text-align: right; border-top: 1px solid #333;
}
#pkg-save-btn {
    background: #4caf50; color: #fff; border: none;
    padding: 8px 20px; border-radius: 4px; cursor: pointer;
    font-weight: 500;
}
#pkg-save-btn:hover { background: #43a047; }
#pkg-cancel-btn {
    background: transparent; color: #aaa; border: none;
    padding: 8px 15px; cursor: pointer; margin-right: 10px;
}
#pkg-cancel-btn:hover { color: #fff; }
#pkg-graph-container {
    width: 100%;
    height: 100%; 
    background: #1e1e1e;
    cursor: grab;
}
#pkg-graph-container:active {
    cursor: grabbing;
}
div.vis-network-tooltip {
    position: absolute;
    visibility: hidden;
    padding: 5px;
    white-space: nowrap;
    font-family: verdana;
    font-size: 14px;
    color: #000000;
    background-color: #f5f4ed;
    border-radius: 3px;
    border: 1px solid #808074;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    z-index: 100;
}
.tag-badge {
    display: inline-block;
    background: #333;
    color: #f0f287;
    padding: 2px 8px 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin: 5px 0px 0px 0px;
}
.sidebar2 .content .graph-header {
    padding: 10px;
    color: #888;
    font-size: 12px;
    border-bottom: 1px solid #333;
    background: #252525;
    z-index: 10;
}

.sidebar2 .content {
    display: block; 
    position: relative;
    flex-grow: 1;
    height: calc(100vh - 50px);
    width: 100%;
    overflow: hidden;
}


::-webkit-scrollbar{width: 8px; height:8px;}
::-webkit-scrollbar-track { background-color: #9E9E9E; border-radius: 4px;}
::-webkit-scrollbar-thumb { background-color: #4a4a4a; border-radius: 4px;}
body {scrollbar-width: thin; scrollbar-color: #000 #222;}



.copy-code-btn {
    position: sticky;
    top: 10px;
    float: right;
    margin: 8px 10px 0 -40px;
    z-index: 10;
    background-color: #0000006e;
    border: 1px solid #5c5c5c00;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.2s ease;
}
.copy-code-btn i{color: #ffffff !important;}
.copy-code-btn:hover {
    opacity: 1;
    background-color: #000000;
}

.copy-code-btn.copied {
    border-color: #4CAF50;
    color: #4CAF50;
    opacity: 1;
}
.copy-code-btn.copied i{color: #4CAF50 !important;}
.temaLight .copy-code-btn {
    background-color: #e0e0e0;
    border-color: #ccc;
    color: #555;
}
.temaLight .copy-code-btn:hover {
    background-color: #fff;
    color: #000;
}




































#graph-canvas {
position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1; /* Чтобы был НАД черным фоном, но ПОД текстом */
    pointer-events: none;
    background: transparent !important;
    display: none;
}
.search-container-selector {
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}