* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #0f0f0f;
    color: #ffffff;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    position: relative;
    background-color: #000;
}

.editor-panel {
    width: calc(100% - 404px);
    min-width: 300px;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
    position: relative;
    margin: 1rem;
    flex: none; 
}

.ai-panel {
    width: 400px;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    flex: none;
    box-shadow: 0px 6px 16px 15px #000000d9 !important;
}


.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;
}

body.resizing {
    cursor: col-resize !important;
    user-select: none;
}

body.resizing * {
    cursor: col-resize !important;
    user-select: none;
}








/* AI Panel */
.ai-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    background: #000;
}
.fitem{position:fixed;right: 10px;top: 16px;z-index: 4;background-color: #232329;padding: 2px 3px 0px 3px;border-radius:6px;border: none;width: 37px;height: 37px;}
.fitem svg{fill:#FFF;}
.fitem:hover,.user-avatar:hover{background-color:#333333; cursor:pointer;}


.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-color: #232329;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  min-width: 36px;
  min-height: 36px;
  color: #fff;
  float: right;
  position: fixed;
  top: 17px;
  right: 58px;
  z-index: 1;
  }
.user-avatar:hover{cursor:pointer;}
.user-avatar .fas{font-size: 18px;}
#glmn {
  position: absolute;
  width: 215px;
  height: 291px;
  margin: 0px 0px 0px 0px;
  right: -49px;
  top: 45px;
  border-radius: 8px;
  padding: 15px 20px 15px 20px;
  color: #ffffff;
  display: none;
  font-size: 14px;
  background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%), linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%) !important;
  box-shadow: 0px 0px 35px 10px #00000099;
}

#glmn a{float:left;width:100%;color: #ffffff;text-decoration:none;margin: 0px 0px 15px 0px;}
#glmn a:hover{text-decoration:underline;}
#glmn a.exit{
    text-align: right;
    color: #fff;
    font-size: 13px;
    margin: 22px -15px -30px 5px;
    width: auto;
    float: right;
    background-color: #000;
    border-radius: 4px;
    padding: 0px 5px 3px 5px;
    }






















.ai-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.ai-status {
    font-size: 14px;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Chat */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #232329;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    max-width: 90%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.4;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    align-self: flex-end;
    color: #ffffff;
    margin: 0 2rem 0 0;
    background-color: #00000030;
}
.message.user img{/* filter: invert(1); */}
.message.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
}
.message ul{margin:0px 0px 0px 10px;}
.chat-input-container {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    margin: 1rem 2rem 0rem 0rem;
}



.BaseBox {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px 5px 4px;
            border-radius: 5px;
            background-color: #3f3f3f;
            cursor: pointer;
            font-size: 0.9rem;
            width: 203px;
            margin: -32px 0px 11px 0px;
        }
.BaseBox select{cursor:pointer; width: 192px;float:left;clear:both;background-color: #3f3f3f;border: none;color: #ffffff;font-size: 13px;/* font-weight: 600; */padding: 0px 5px 0px 0px;outline: none;}
.BaseBox select:focus, .BaseBox select:active {
    border: none;
    outline: none;
    box-shadow: none;
}



.chat-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    resize: none;
    outline: none;
    transition: all 0.2s ease;
}

.chat-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chat-input::placeholder {
    color: #a0a0a0;
}

.send-button {
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.send-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.send-button:active {
    transform: translateY(0);
}

.send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Excalidraw */
.excalidraw-container {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.toolbar {
    position: absolute;
    top: 20px;
    left: 65px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.toolbar-button {
    padding: 8px 12px;
    background: rgb(255 255 255 / 14%);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    color: #fff;
    width: 190px;
    margin: 0px -5px 10px -7px;
    float: left;
    display: block;
}

.toolbar-button:hover {
    background: #4CAF50;
    transform: translateY(-1px);
    color:#FFF;
}

/* Loading Indicator */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 1000;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .editor-panel {
        flex: 1;
        border-radius: 12px 12px 0 0;
        width: 90%;
    }

    .ai-panel {
        flex: 0 0 300px;
        border-radius: 0 0 12px 12px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .resizer {
        width: 100%;
        height: 4px;
        cursor: row-resize;
    }

    .resizer:hover {
        height: 6px;
        width: 100%;
    }

    .resizer::after {
        width: 40px;
        height: 20px;
    }
    .user-avatar{display:none}
}


.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}











.excalidraw .dropdown-menu .dropdown-menu-group {display: none;}
/*
.excalidraw-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), 
                      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), 
                      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), 
                      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%), 
                      linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
    background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0;
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
}

.excalidraw-container {
    position: relative;
}


.excalidraw .excalidraw-canvas-container {
    background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%) !important;
    background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
}
*/

.excalidraw[data-theme="dark"] {
    --canvas-background: transparent !important;
}

.excalidraw-container {
    background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%) !important;
    background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    box-shadow: 0px 0px 35px 10px #00000099 inset;
}
/*
.excalidraw-container {
border-bottom-width: 0 !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%), linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%) !important;
    background-size: 5px 5px,5px 5px, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: repeat;
}*/


.app-container.fullscreen .editor-panel {
    width: 100% !important;
    margin: 0px;
    border-radius: 0px;
}

.app-container.fullscreen .excalidraw-container {
    border-radius: 0px;
}

.app-container.fullscreen .resizer,
.app-container.fullscreen .ai-panel {
    display: none;
}
.app-container.fullscreen .excalidraw .App-menu_top>*:last-child{margin:0px 40px 0px 0px;}
.excalidraw .App-toolbar,.excalidraw.theme--dark.excalidraw .App-menu__left,.excalidraw .App-menu_top>*:last-child {box-shadow: 0px 6px 15px 2px #00000087;border-radius: 12px;background-color: #000;}
.excalidraw .sidebar-trigger{box-shadow: none;border-radius: 12px;display: none;}
.zoom-actions, .undo-redo-buttons,.excalidraw .help-icon {
    box-shadow: 0px 6px 15px 2px #00000087;
    border-radius: 12px;
    background-color: #000;
    display: none;
}
.zoom-button, .undo-redo-buttons button{background-color: #000 !important;}
.excalidraw .main-menu-trigger {
    box-shadow: 0 0 0 1px var(--color-surface-lowest);
    background-color: #000 !important;
}
.excalidraw .dropdown-menu .dropdown-menu-container {
    background-color: #000 !important;
}
.excalidraw .layer-ui__wrapper .disable-zen-mode{background-color:#ffffff1a; border:none;; font-weight:100; font-size:12px;letter-spacing:1px}
.excalidraw .layer-ui__wrapper .disable-zen-mode:hover{background-color:#00000026;}
.excalidraw.theme--dark .HintViewer {
    color: #FFF; font-size:14px;
} 












[data-testid="help-menu-item"] {
    display: none !important;
}

[data-testid="clear-canvas-button"] {
    display: none !important;
}

[data-testid="clear-canvas-button"] + div {
    height: 0 !important;
    margin: 0 !important;
    display: none !important;
}

.dropdown-menu-group {
    display: none !important;
}

.dropdown-menu-group + div {
    height: 0 !important;
    margin: 0 !important;
    display: none !important;
}


.cthth_nero {
    float: right;
    clear: both;
    margin: -39px 0px 0px 0px;
    padding: 1px 0px 2px 0px;
    z-index: 2;
    position: relative;
    height: 27px;
    background-color: #575757;
    border-radius: 6px;
}
.cthth_nero div.nro {
    border-radius: 7px;
    height: 28px;
    padding: 5px 5px 0px 5px;
    line-height: 14px;
    width: 90px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: #ffffff;
    overflow: hidden;
}
.cthth_nero div.nro:hover{color:#E91E63}








@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes loading-dots {
    0% { content: '...'; }
    33% { content: '. .'; }
    66% { content: '. . .'; }
    100% { content: '...'; }
}
.send-button:disabled {
    opacity: 0.7; 
    cursor: wait;
    transform: none;
    box-shadow: none;
    color: transparent !important; 
    position: relative;
}
.send-button:disabled::after {
    content: '...'; 
    color: white; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    animation: loading-dots 1.5s infinite steps(3); 
}
.message.ai div:has(> p:contains("Думаю")) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.message.ai div:has(> p:contains("Думаю")) p:after {
    content: '...';
    display: inline-block;
    vertical-align: middle;
    animation: loading-dots 1.5s infinite steps(3);
}
.message.ai div p {
    font-weight: normal; 
    margin: 0;
}




.loader{height: 11px;vertical-align: middle;margin-left: 5px;border-radius: 8px;}
.robot{font-size: 22px;margin: -6px 9px -3px 0px;float: left;}