/* --- Color Palette Definition --- */
:root {
    --primary-color: #007bff; --primary-hover-color: #0056b3;
    --bg-color: #f8f9fa; --ui-color: #ffffff; --ui-glass-color: rgba(255, 255, 255, 0.9);
    --text-color: #212529; --text-muted-color: #6c757d; --border-color: #dee2e6;
    --icon-filter: none; --btn-close-filter: none;
    --menu-width: 300px;
}
[data-theme="dark"] {
    --bg-color: #1a1a1a; --ui-color: #2c2c2c; --ui-glass-color: rgba(44, 44, 44, 0.7);
    --text-color: #f8f9fa; --text-muted-color: #c7d1da; --border-color: rgba(255, 255, 255, 0.15);
    --icon-filter: brightness(0) invert(1); --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- General Styles --- */
html, body {
    overflow: hidden; width: 100%; height: 100%;
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
}
#gscreen {
    width: 100%; height: 100%; touch-action: none;
    position: absolute; top: 0; left: 0; z-index: 1;
}

/* --- Floating Menu & Toggle --- */
#floating-ui-container {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1000; 
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}
#floating-ui-container.menu-is-open {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.btn.floating-action-btn {
    pointer-events: auto;
    position: absolute;
    top: 15px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background-color: var(--ui-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#menu-toggle {
    left: 15px;
    z-index: 1002;
}

#floating-menu {
    pointer-events: auto; 
    position: absolute; top: 0; left: 0;
    width: var(--menu-width);
    max-width: 85vw;
    height: 100%;
    background: var(--ui-glass-color);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid var(--border-color);
    color: var(--text-color);
    transform: translateX(calc(-1 * var(--menu-width)));
    transition: transform 0.3s ease;
    display: flex; flex-direction: column;
    z-index: 1001;
}

#floating-menu.open {
    transform: translateX(0);
}
.menu-header { 
    padding: 20px; 
    border-bottom: 1px solid var(--border-color);
    padding-left: calc(50px + 15px + 15px);
    min-height: 80px;
    display: flex;
    align-items: center;
}
.menu-header h3 { margin: 0; color: var(--primary-color); font-weight: 600; }
.menu-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); margin-top: auto; }

/* --- Accordion Styling --- */
#controlAccordion { overflow-y: auto; flex-grow: 1; }
.accordion-item { background-color: transparent; border: none; border-bottom: 1px solid var(--border-color); }
.accordion-header { margin: 0; }
.accordion-button { background-color: rgba(0,0,0,0.03); color: var(--text-color); font-size: 1rem; font-weight: 500; }
.accordion-button:not(.collapsed) { background-color: var(--primary-color); color: white; box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { filter: var(--icon-filter); }
.accordion-body { background-color: rgba(0,0,0,0.05); color: var(--text-color); font-size: 0.9rem; }
.accordion-body h5 { color: var(--text-muted-color); margin-top: 10px; margin-bottom: 15px; font-size: 0.8rem; text-transform: uppercase; }

/* --- Forms, Buttons & Modals --- */
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-hover-color); border-color: var(--primary-hover-color); }
.btn-outline-custom { border-color: var(--text-muted-color); color: var(--text-muted-color); }
.btn-check:checked+.btn-outline-custom { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.modal-content { background-color: var(--ui-color); color: var(--text-color); border: 1px solid var(--border-color); }
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }
.btn-close { filter: var(--btn-close-filter); }
.form-control, .form-select { background-color: var(--bg-color); color: var(--text-color); border-color: var(--border-color); }
.form-control:focus, .form-select:focus { background-color: var(--bg-color); color: var(--text-color); border-color: var(--primary-color); box-shadow: none; }

/* Model Previews Gallery for Mobile */
#model-previews-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    max-height: 45vh;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
}
.model-preview-card { cursor: pointer; border: 2px solid transparent; border-radius: 0.25rem; padding: 0.5rem; text-align: center; transition: all 0.2s ease; }
.model-preview-card.selected { background-color: rgba(0, 123, 255, 0.2); border-color: var(--primary-color); }
.model-preview-image-wrapper { position: relative; width: 100%; height: 80px; margin-bottom: 0.5rem; }
.model-preview-image-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.model-preview-card span { font-size: 0.75rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* --- Стили для "тост"-уведомлений --- */
#message-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    /* Сдвигаем элемент, чтобы он был по центру */
    transform: translate(-50%, 150%); 
    
    max-width: 90%; /* Чтобы не прилипал к краям на маленьких экранах */
    padding: 12px 20px;
    
    background-color: var(--ui-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    
    /* Увеличиваем шрифт для читаемости */
    font-size: 16px; 
    line-height: 1.4;
    text-align: center;
    
    /* Анимация появления/исчезновения */
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    
    z-index: 9999; /* Поверх всего */
    pointer-events: none; /* Чтобы не мешал кликать "сквозь" него */
}

#message-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}


/* --- Стили для "тост"-уведомлений --- */
#message-toast {
    position: fixed;
    bottom: 25px; /* Чуть выше для десктопа */
    left: 50%;
    transform: translate(-50%, 150%); 
    
    /* Можно сделать чуть шире для десктопа */
    max-width: 600px; 
    
    padding: 14px 22px;
    
    /* Используем наши CSS переменные для поддержки тем */
    background-color: var(--ui-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    
    /* Шрифт чуть крупнее */
    font-size: 17px; 
    line-height: 1.5;
    text-align: center;
    
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    
    z-index: 9999;
    pointer-events: none;
}

#message-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}