/**
 * Стили для плагина Mix Of Code Editor v2.0
 * Адаптировано под стилистику Mix Of Translit
 */

/* ============================================================
   1. CSS-ПЕРЕМЕННЫЕ И БАЗОВЫЙ КОНТЕЙНЕР
   ============================================================ */
.moce-wrapper {
    --moce-color-bg-light: #ffffe0;
    --moce-color-bg: #fbfbc8;
    --moce-color-text: #381400;
    --moce-color-primary: #664735;
    --moce-color-border: rgba(102, 71, 53, 0.2);
    --moce-color-shadow: rgba(56, 20, 0, 0.15);
    --moce-color-shadow-primary: rgba(102, 71, 53, 0.4);
    --moce-color-white: #ffffe0;
    --moce-color-dark: #381400;
    
    --moce-gradient-main: linear-gradient(145deg, var(--moce-color-bg-light) 0%, var(--moce-color-bg) 100%);
    --moce-gradient-primary: linear-gradient(135deg, var(--moce-color-primary) 0%, var(--moce-color-dark) 100%);
    --moce-gradient-top-line: linear-gradient(90deg, var(--moce-color-primary), var(--moce-color-dark), var(--moce-color-primary));
    --moce-gradient-header-bg: linear-gradient(161deg, #d0c79a 0%, #a39c7b 100%);
    
    --moce-radius: 16px;
    --moce-radius-sm: 8px;
    --moce-radius-icon: 14px;
    
    --moce-shadow: 0 20px 60px var(--moce-color-shadow);
    --moce-shadow-sm: 0 4px 12px rgba(102, 71, 53, 0.15);
    --moce-shadow-primary: 0 4px 15px rgba(102, 71, 53, 0.3);
    
    --moce-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --moce-font-family-mono: 'SF Mono', Monaco, 'Courier New', monospace;
    --moce-transition: 0.2s ease;

    max-width: 1400px;
    margin: 30px auto;
    padding: 30px;
    background: var(--moce-gradient-main);
    border: 1px solid var(--moce-color-border);
    border-radius: var(--moce-radius);
    box-shadow: var(--moce-shadow);
    color: var(--moce-color-text);
    font-family: var(--moce-font-family);
    position: relative;
    overflow: hidden;
}

.moce-wrapper, .moce-wrapper *, .moce-wrapper *::before, .moce-wrapper *::after {
    box-sizing: border-box;
}

/* ============================================================
   2. ВЕРХНЯЯ ДЕКОРАТИВНАЯ ЛИНИЯ
   ============================================================ */
.moce-top-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 15px;
    background: var(--moce-gradient-top-line);
    background-size: 200% 100%;
    animation: moceGradientShift 3s linear infinite;
    border-radius: var(--moce-radius) var(--moce-radius) 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .moce-top-line { animation: none; }
}

/* ============================================================
   3. ЗАГОЛОВОК И КНОПКИ
   ============================================================ */
.moce-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--moce-color-border);
}

.moce-logo-wrap {
    flex-shrink: 0;
    width: 56px; height: 56px;
    background: var(--moce-gradient-primary);
    border-radius: var(--moce-radius-icon);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px var(--moce-color-shadow-primary);
}

.moce-logo-svg { width: 28px; height: 28px; color: var(--moce-color-white); }
.moce-header-text { flex: 1; }
.moce-header-text h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--moce-color-dark); }
.moce-subtitle { margin: 4px 0 0 0; font-size: 13px; color: var(--moce-color-primary); }
.moce-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.moce-header-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    background: var(--moce-gradient-primary);
    border: none; border-radius: var(--moce-radius-sm);
    color: var(--moce-color-white);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all var(--moce-transition);
    font-family: inherit;
}

.moce-header-btn:hover { transform: translateY(-2px); box-shadow: var(--moce-shadow-primary); }
.moce-header-btn:active { transform: translateY(0); }

/* Кнопка Авто */
#moce-auto-run-btn {
    background: rgba(102, 71, 53, 0.08);
    border: 1px solid var(--moce-color-border);
    color: var(--moce-color-text);
}
#moce-auto-run-btn.active {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50; color: #4caf50;
}
.moce-auto-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--moce-color-primary);
    transition: background var(--moce-transition);
}
#moce-auto-run-btn.active .moce-auto-dot {
    background: #4caf50; box-shadow: 0 0 8px #4caf50;
    animation: mocePulse 2s infinite;
}

/* ============================================================
   4. ОСНОВНАЯ ОБЛАСТЬ И РЕДАКТОРЫ
   ============================================================ */
.moce-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    min-height: 600px;
}

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

.moce-editor-panel {
    height: 250px;
    display: flex; flex-direction: column;
    background: rgba(251, 251, 200, 0.6);
    border: 1px solid var(--moce-color-border);
    border-radius: var(--moce-radius-sm);
    overflow: hidden;
}

.moce-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
    background: var(--moce-gradient-header-bg);
    border-bottom: 1px solid var(--moce-color-border);
    flex-shrink: 0;
}

.moce-panel-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    color: var(--moce-color-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}

.moce-lang-dot { width: 8px; height: 8px; border-radius: 50%; }
.moce-lang-html { background: #e34c26; }
.moce-lang-css { background: #2965f1; }
.moce-lang-js { background: #f7df1e; }
.moce-lang-preview { background: #4caf50; }

.moce-panel-actions { display: flex; gap: 4px; }

.moce-panel-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent; border-radius: 6px;
    color: var(--moce-color-primary);
    cursor: pointer; transition: all var(--moce-transition);
}

.moce-panel-btn:hover {
    background: rgba(102, 71, 53, 0.1);
    border-color: var(--moce-color-border);
    color: var(--moce-color-dark);
}

.moce-panel-btn.copied { background: #4caf50; color: var(--moce-color-white); }

.moce-editor-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* Анимация скрытия/показа */
.moce-editor-panel.hidden .moce-editor-wrap {
    display: none;
}

.moce-editor-panel.hidden .moce-panel-header {
    border-bottom: 1px solid var(--moce-color-border);
}

.moce-toggle-btn {
    opacity: 0.7;
    transition: all var(--moce-transition);
}

.moce-toggle-btn:hover {
    opacity: 1;
}

.moce-editor-panel.hidden .moce-toggle-btn {
    opacity: 1;
    color: #f44336;
}

/* Анимация для плавного сворачивания */
.moce-editor-panel .moce-editor-wrap {
    transition: all 0.3s ease;
    overflow: hidden;
}

.moce-editor-panel.hidden .moce-editor-wrap {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
    min-height: 0 !important;
}

/* Интеграция CodeMirror */
.moce-editor-wrap .CodeMirror {
    height: 100%;
    font-size: 13px;
    font-family: var(--moce-font-family-mono);
}
.moce-editor-wrap .CodeMirror-gutters {
    border-right: 1px solid var(--moce-color-border);
}

/* ============================================================
   5. ПРЕВЬЮ И ФУТЕР
   ============================================================ */
.moce-preview {
    display: flex; flex-direction: column;
    background: rgba(251, 251, 200, 0.6);
    border: 1px solid var(--moce-color-border);
    border-radius: var(--moce-radius-sm);
    overflow: hidden;
}

.moce-preview-wrap { flex: 1; background: #ffffff; position: relative; }

.moce-preview-frame {
    width: 100%; height: 100%; min-height: 400px;
    border: none; display: block; background: #ffffff;
}

.moce-footer {
    margin-top: 20px; padding-top: 15px;
    border-top: 1px solid var(--moce-color-border);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
}

.moce-footer-text { font-size: 12px; color: var(--moce-color-primary); }
.moce-footer-hint {
    font-size: 11px; color: rgba(56, 20, 0, 0.4);
    font-family: var(--moce-font-family-mono);
}

/* ============================================================
   6. ПОЛНЫЙ ЭКРАН И АНИМАЦИИ
   ============================================================ */
.moce-wrapper.fullscreen {
    position: fixed; inset: 0; z-index: 99999;
    margin: 0; border-radius: 0; max-width: none; overflow-y: auto;
}
.moce-wrapper.fullscreen .moce-main { min-height: calc(100vh - 200px); }
.moce-wrapper.fullscreen .moce-top-line { border-radius: 0; }

@keyframes moceGradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes mocePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   7. УВЕДОМЛЕНИЯ (TOAST)
   ============================================================ */
.moce-toast {
    position: fixed;
    padding: 6px 14px;
    border-radius: var(--moce-radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 100000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    animation: moceToastFadeIn 0.2s ease forwards;
}

@keyframes moceToastFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.moce-toast.success { background: #4caf50; color: #fff; }
.moce-toast.error { background: #f44336; color: #fff; }

/* ============================================================
   8. АДАПТИВНОСТЬ И ДОСТУПНОСТЬ
   ============================================================ */
@media (max-width: 900px) {
    .moce-main { grid-template-columns: 1fr; }
    .moce-preview { min-height: 400px; }
    .moce-header { flex-direction: column; align-items: flex-start; }
    .moce-header-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 600px) {
    .moce-wrapper { padding: 20px 15px; margin: 15px 10px; }
    .moce-header-btn span { display: none; }
    .moce-header-btn { padding: 10px 12px; }
    .moce-header-text h2 { font-size: 20px; }
}

@media (prefers-contrast: high) {
    .moce-wrapper { border-width: 2px; border-color: var(--moce-color-dark); }
    .moce-editor-panel, .moce-preview { border-width: 2px; }
    .moce-header-btn { border: 2px solid var(--moce-color-white); }
}

.moce-header-btn:focus-visible, .moce-panel-btn:focus-visible {
    outline: 2px solid var(--moce-color-primary); outline-offset: 2px;
}
.moce-header-btn:focus:not(:focus-visible), .moce-panel-btn:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   9. АКЦЕНТНЫЕ КНОПКИ И ВЫПАДАЮЩЕЕ МЕНЮ ТЕМ
   ============================================================ */
.moce-btn-demo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
.moce-btn-demo:hover { box-shadow: 0 8px 20px rgba(118, 75, 162, 0.4); }
.moce-btn-danger { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important; }
.moce-btn-danger:hover { box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4); }

.moce-theme-dropdown { position: relative; display: inline-block; }
.moce-theme-btn { display: inline-flex; align-items: center; gap: 6px; }
.moce-dropdown-arrow { transition: transform 0.2s ease; }
.moce-theme-dropdown.open .moce-dropdown-arrow { transform: rotate(180deg); }

.moce-theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--moce-color-white);
    border: 1px solid var(--moce-color-border);
    border-radius: var(--moce-radius-sm);
    box-shadow: var(--moce-shadow-sm);
    list-style: none; margin: 0; padding: 6px;
    min-width: 160px; z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s ease;
}

.moce-theme-dropdown.open .moce-theme-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.moce-theme-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 12px;
    background: transparent; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 500;
    color: var(--moce-color-text);
    cursor: pointer; transition: all var(--moce-transition);
    text-align: left; font-family: inherit;
}

.moce-theme-option:hover { background: rgba(102, 71, 53, 0.08); color: var(--moce-color-dark); }
.moce-theme-option.active { background: var(--moce-gradient-primary); color: var(--moce-color-white); font-weight: 600; }

.moce-theme-option::before {
    content: ''; width: 12px; height: 12px;
    border-radius: 50%; border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.moce-theme-option[data-theme="dracula"]::before { background: #282a36; }
.moce-theme-option[data-theme="material"]::before { background: #263238; }
.moce-theme-option[data-theme="eclipse"]::before { background: #ffffff; }
.moce-theme-option[data-theme="monokai"]::before { background: #272822; }

/* ============================================================
   10. ИКОНКИ, EMOJI FALLBACK И МОДАЛЬНОЕ ОКНО
   ============================================================ */
.moce-logo-icon {
    font-size: 28px; color: var(--moce-color-white);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.moce-header-btn i[class^="mix-"], .moce-header-btn .moce-emoji-icon,
.moce-panel-btn i[class^="mix-"], .moce-panel-btn .moce-emoji-icon {
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}

.moce-emoji-icon {
    font-style: normal;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.moce-footer-hint .moce-emoji-icon, .moce-footer-hint i[class^="mix-"] {
    margin-right: 4px; vertical-align: middle;
}

/* Модальное окно */
.moce-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(56, 20, 0, 0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100001;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.moce-modal-overlay.active { opacity: 1; visibility: visible; }

.moce-modal {
    background: #fbfbc8;
    border: 1px solid var(--moce-color-border);
    border-radius: var(--moce-radius);
    padding: 32px 36px;
    max-width: 400px; width: 90%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(56, 20, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s ease;
}
.moce-modal-overlay.active .moce-modal { transform: scale(1) translateY(0); }

.moce-modal-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 24px;
}

.moce-modal-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--moce-color-dark); }
.moce-modal-text { margin: 0 0 24px; font-size: 14px; color: var(--moce-color-primary); line-height: 1.5; }
.moce-modal-actions { display: flex; gap: 10px; justify-content: center; }

.moce-modal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px;
    border-radius: var(--moce-radius-sm);
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all var(--moce-transition);
    border: none; font-family: inherit;
}

.moce-modal-cancel {
    background: rgba(102, 71, 53, 0.08);
    color: var(--moce-color-text);
    border: 1px solid var(--moce-color-border);
}
.moce-modal-cancel:hover { background: rgba(102, 71, 53, 0.15); }

.moce-modal-confirm {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
}
.moce-modal-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4); }
.moce-modal-confirm:active { transform: translateY(0); }

/* ============================================================
   11. КАСТОМИЗАЦИЯ СКРОЛЛБАРОВ
   ============================================================ */

/* Для WebKit браузеров (Chrome, Safari, Edge) */
.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-track {
    background: rgba(102, 71, 53, 0.05);
    border-radius: 4px;
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: var(--moce-color-primary);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--moce-color-dark);
}

/* Для Firefox */
.moce-editor-wrap .CodeMirror-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--moce-color-primary) rgba(102, 71, 53, 0.05);
}

/* Для IE и Edge (старые версии) */
.moce-editor-wrap .CodeMirror-scroll {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Убираем скроллбар, когда он не нужен */
.moce-editor-wrap .CodeMirror-scroll {
    overflow: auto !important;
}

/* Кастомизация для разных тем */
.moce-wrapper .CodeMirror {
    scrollbar-color: #c1b88f rgba(102, 71, 53, 0.05) !important;
}

/* Для темной темы скроллбар светлее */
.moce-wrapper .CodeMirror.cm-s-dracula .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

.moce-wrapper .CodeMirror.cm-s-dracula .CodeMirror-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.moce-wrapper .CodeMirror.cm-s-material .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

.moce-wrapper .CodeMirror.cm-s-monokai .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   12. АНИМАЦИЯ ДЛЯ СКРОЛЛБАРА (опционально)
   ============================================================ */
.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb {
    transition: background 0.3s ease;
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--moce-color-dark);
    cursor: pointer;
}

/* Делаем скроллбар тоньше на мобильных */
@media (max-width: 600px) {
    .moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* ============================================================
   13. СКРОЛЛБАР ВСЕГДА ВИДЕН
   ============================================================ */

/* Принудительно показываем скроллбар */
.moce-editor-wrap .CodeMirror-scroll {
    overflow: scroll !important;
    overflow-x: auto !important;
    overflow-y: scroll !important;
}

/* Для WebKit браузеров (Chrome, Safari, Edge) - скроллбар всегда виден */
.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    -webkit-appearance: none;
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-track {
    background: rgba(102, 71, 53, 0.08);
    border-radius: 4px;
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: var(--moce-color-primary);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--moce-color-dark);
}

/* Для Firefox */
.moce-editor-wrap .CodeMirror-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--moce-color-primary) rgba(102, 71, 53, 0.08);
}

/* Отключаем авто-скрытие скроллбара в macOS */
.moce-editor-wrap .CodeMirror-scroll {
    -webkit-overflow-scrolling: touch;
}

/* Для macOS скроллбар всегда виден (отключаем авто-скрытие) */
@supports (-webkit-appearance: none) {
    .moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    
    .moce-editor-wrap .CodeMirror-scroll::-webkit-scrollbar-thumb {
        -webkit-appearance: none;
    }
}