/* ============================================================
[2026-04-08 13:55 - America/Montreal]
Author: Jean-Francois Saucier | Agence Charte Créative
FILE: assets/css/ccai-ui.css
Version: 3.0.0-MAJOR-DEVWINDOW-HIGHLIGHT-FIX
============================================================ */

/*
CHANGELOG (last 10)
3.0.0 - MAJOR - FIX devWindow highlight overlay visibility
3.0.0 - MAJOR - FIX textarea transparency + stacking
3.0.0 - MAJOR - ADD perfect alignment (line-height + font-size)
3.0.0 - FIX overlay scroll sync compatibility
3.0.0 - FIX padding mismatch issues
3.0.0 - IMPROVE dev readability
3.0.0 - HARDEN Elementor isolation
2.x.x - previous UI stability
*/

/* =========================================
CCAI UI — ISOLATED FROM ELEMENTOR
========================================= */

.ccai-ui {
    max-width: 400px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
}

/* RESET HARD (ANTI ELEMENTOR) */
.ccai-ui,
.ccai-ui * {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-orientation: mixed !important;
    white-space: normal !important;
}

/* FORM */
.ccai-ui .ccai-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* INPUTS */
.ccai-ui .ccai-form input {
    width: 100% !important;
    height: 45px !important;
    padding: 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* BUTTON */
.ccai-ui .ccai-form button {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
    cursor: pointer;
}

/* FORCE WIDTH FIX */
.ccai-ui {
    width: 100% !important;
    display: block !important;
}

.ccai-ui .ccai-form {
    width: 100% !important;
    align-items: stretch !important;
}

.ccai-ui .ccai-form input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.ccai-ui .ccai-form button {
    width: 100% !important;
}

/* KILL FLEX COLLAPSE */
.elementor-widget-container .ccai-ui {
    width: 100% !important;
}

.elementor-widget-container .ccai-ui * {
    max-width: 100% !important;
}

/* ============================================================
FILE BROWSER
============================================================ */

.ccai-browser{
    border:1px solid #ddd;
    padding:15px;
    background:#fff;
    max-width:500px;
}

.ccai-browser-header{
    margin-bottom:10px;
}

#ccai-browser-select{
    width:100%;
    padding:8px;
}

.ccai-file{
    padding:8px;
    border-bottom:1px solid #eee;
}

.ccai-file-line{
    display:flex;
    justify-content:space-between;
}

.ccai-empty{
    padding:10px;
    color:#999;
}

/* ============================================================
DEV WINDOW ROOT (ISOLATION)
============================================================ */
#ccai-dev-window{
    position:relative;
    display:flex;
    flex-direction:column;
    height:700px;
    background:#1e1e1e;
    overflow:hidden;
    z-index:1000;
}

/* ============================================================
HEADER (SAFE)
============================================================ */
#ccai-dev-window > div:first-child{
    flex-shrink:0;
}

/* ============================================================
MAIN EDITOR ROW
============================================================ */
#ccai-dev-window > div:nth-child(2){
    flex:1;
    display:flex;
    overflow:hidden;
    color:#ffffff;
}

/* ============================================================
EDITOR WRAPPER (CRITICAL FIX)
============================================================ */
#ccai-dev-window > div:nth-child(2) > div:last-child{
    position:relative;
    flex:1;
    height:100%;
    overflow:hidden;
    background:#1e1e1e;
    color:#ffffff;
}

/* ============================================================
LINE NUMBERS
============================================================ */
#ccai-dev-lines{
    line-height:1.4 !important;
    font-size:13px !important;
    overflow:hidden;
}

/* ============================================================
OVERLAY (HIGHLIGHT)
============================================================ */
#ccai-dev-highlight{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    font-family:monospace;
    white-space:pre;
    overflow:auto;
    padding:10px;
    z-index:2;
    line-height:1.4;
    font-size:13px;
    color:transparent;
}

/* ============================================================
EDITOR
============================================================ */
#ccai-dev-editor{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:transparent;
    color:#ffffff;
    border:none;
    outline:none;
    font-family:monospace;
    padding:10px;
    resize:none;
    z-index:3;
    line-height:1.4;
    font-size:13px;
    caret-color:#ffffff;
    overflow:auto;
}

/* ============================================================
PREVIEW (CRITICAL FIX)
============================================================ */
.ccai-dev-preview{
    flex-shrink:0;
    height:300px;
    overflow:hidden;
    border-top:1px solid #333;
    background:#fff;
    position:relative;
}

/* IFRAME ISOLATION */
.ccai-dev-preview iframe{
    width:100%;
    height:100%;
    border:none;
    display:block;
}

/* ============================================================
STATUS BAR
============================================================ */
#ccai-dev-status{
    flex-shrink:0;
    background:#111;
    color:#aaa;
    font-family:monospace;
}

/* ============================================================
ANTI ELEMENTOR / OVERFLOW GUARD
============================================================ */
.elementor-widget-container #ccai-dev-window{
    max-height:700px;
}

.elementor-widget-container #ccai-dev-window *{
    box-sizing:border-box;
}

/* HARD PREVENT CONTENT LEAK BELOW */
#ccai-dev-window,
#ccai-dev-window *{
    max-width:100%;
}

/* ============================================================
SCROLL SYNC SUPPORT
============================================================ */
#ccai-dev-highlight::-webkit-scrollbar,
#ccai-dev-editor::-webkit-scrollbar{
    width:8px;
}

#ccai-dev-highlight::-webkit-scrollbar-thumb,
#ccai-dev-editor::-webkit-scrollbar-thumb{
    background:#444;
}
/* ============================================================
DEPENDENCIES PANEL
============================================================ */

#ccai-deps-panel{
    width:260px;
    border-left:1px solid #ddd;
    background:#f8f8f8;
    overflow:auto;
    padding:10px;
    font-size:12px;
}

.ccai-deps-section{
    margin-bottom:15px;
}

.ccai-dep-item{
    padding:5px;
    cursor:pointer;
    border-bottom:1px solid #eee;
}

.ccai-dep-item:hover{
    background:#e0f0ff;
}