/**
 * Layout Feel — editor shell tweaks (uses same base as TextoFX)
 * @author SteveManchado
 */

.pt-tab-btn.active.pt-accent-emerald {
    color: #34d399;
    border-bottom-color: #34d399;
}

#pt-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 240px;
    border: none;
    background: transparent;
}

@media (min-width: 768px) {
    #pt-preview-frame {
        min-height: 0;
    }
}

/* Panel splitter (Layout Feel) */
.app-main--split {
    --split-left-pct: 50%;
}

@media (min-width: 768px) {
    .app-main--split .app-panel--left {
        width: var(--split-left-pct, 50%);
        max-width: none;
        flex: 0 0 var(--split-left-pct, 50%);
    }

    .app-main--split .app-panel--right {
        flex: 1 1 0%;
        min-width: 0;
    }

    .app-splitter {
        display: flex;
        flex: 0 0 6px;
        width: 6px;
        cursor: col-resize;
        align-self: stretch;
        background: #1e293b;
        border-left: 1px solid #334155;
        border-right: 1px solid #334155;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .app-splitter:hover,
    .app-splitter:focus-visible {
        background: #334155;
    }

    .app-splitter.is-dragging {
        background: #475569;
    }
}

@media (max-width: 767px) {
    .app-splitter {
        display: none;
    }
}

body.app-splitter-active {
    cursor: col-resize;
    user-select: none;
}