/* ==========================================
   RESET
========================================== */

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

/* ==========================================
   WRAPPER
========================================== */


 
 
 
 
 
 
 
 
 
 
.ag-wrapper{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#0f1724;
    color:#fff;
}
 
 
 .ag-page{

    width:100%;

    background:#0f1724;

    padding:0 24px;

}

.ag-page .ag-wrapper{

    max-width:1600px;

    margin:0 auto;

}
 
 
 
 
 
 
 
 
 
 
 
/* ==========================================
   TOP AREA
========================================== */





.ag-panel-header,
.ag-topic-counter,
.ag-topic-selection-title,
.ag-selected-count{
    color:#ffffff !important;
}

.ag-topic-btn,
.ag-topic-card{
    color:#ffffff;
}



.ag-top{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 320px;
    gap:20px;
}

.ag-results{
    min-width:0;
}


/* ==========================================
   PROGRESS
========================================== */

/* ==========================================
   TIMELINE
========================================== */

.ag-progress{
    background:#182232;
    border-radius:16px;
    height:350px;
    padding:25px;
    overflow-y:auto;
    overflow-x:hidden;
}



/* ==========================================
   WORKFLOW SCROLLBAR
========================================== */

.ag-progress::-webkit-scrollbar{
    width:10px;
}

.ag-progress::-webkit-scrollbar-track{
    background:#101924;
    border-radius:20px;
}

.ag-progress::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #3b82f6,
        #22c55e
    );
    border-radius:20px;
    border:2px solid #101924;
}

.ag-progress::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        #60a5fa,
        #4ade80
    );
}

/* Firefox */

.ag-progress{
    scrollbar-width:thin;
    scrollbar-color:#3b82f6 #101924;
}










.ag-progress-title{

    font-size:20px;
    font-weight:700;

    margin-bottom:30px;

    text-align:center;

    color:#ffffff;
}

.ag-timeline{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.ag-node{
    padding:6px 10px;
    border-radius:10px;
    transition:0.2s;
}

.ag-node.active{
    background:rgba(59,130,246,0.15);
    border-left:3px solid #3b82f6;
}

.ag-node.completed{
    background:rgba(34,197,94,0.10);
}



.ag-dot{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#4c5c73;

    border:2px solid #6c7d96;

    flex-shrink:0;

    transition:.25s;
}

.ag-label{

    margin-left:15px;

    font-size:15px;

    color:#c8d2df;

    font-weight:500;
}

.ag-line{

    width:2px;

    height:28px;

    margin-left:8px;

    background:#3a485c;
}

/* COMPLETED */

.ag-node.completed .ag-dot{

    background:#22c55e;

    border-color:#22c55e;

    box-shadow:0 0 10px rgba(34,197,94,.5);
}

.ag-node.completed .ag-label{

    color:#ffffff;
}

/* ACTIVE */

.ag-node.active .ag-dot{

    background:#3b82f6;

    border-color:#3b82f6;

    box-shadow:0 0 14px rgba(59,130,246,.7);
}

.ag-node.active .ag-label{

    color:#ffffff;

    font-weight:700;
}

/* ==========================================
   RESULTS
========================================== */

.ag-results{
    background:#182232;
    border-radius:16px;

    display:flex;
    flex-direction:column;

    min-height:0;
}

.ag-results-header{

    padding:18px 20px;

    font-size:22px;
    font-weight:700;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.ag-results-content{

    flex:1;

    padding:25px;

    overflow-y:auto;
}






.ag-emotion-intensity-wrap{
    margin-top:20px;
    padding:18px;
    border-radius:14px;

    background: linear-gradient(145deg, #141f2e, #101924);
    border:1px solid rgba(255,255,255,.06);

    position:relative;
}


.ag-emotion-slider::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;

    background:#ffffff;
    border:3px solid #3b82f6;

    box-shadow:0 0 15px rgba(59,130,246,.6);
    transition:.2s;
}

.ag-emotion-slider::-webkit-slider-thumb:hover{
    transform:scale(1.2);
}




.ag-emotion-intensity-wrap {
    position: relative;
}

.ag-slider-scale {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px; /* πάνω από track */
    height: 12px;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,.35) 0px,
            rgba(255,255,255,.35) 1px,
            transparent 1px,
            transparent 25%
        );
}


.ag-slider-labels{
    display:flex;
    justify-content:space-between;

    margin-top:8px;
    font-size:11px;
    color:#94a3b8;
}


.ag-generate-btn{
    margin-top:18px;
    width:100%;

    padding:16px;

    border:none;
    border-radius:14px;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    color:#fff;

    background: linear-gradient(135deg, #3b82f6, #22c55e);

    box-shadow:0 10px 25px rgba(59,130,246,.25);

    transition:.25s ease;
}

.ag-generate-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(59,130,246,.35);
}



.ag-emotion-slider{
    width:100%;
    appearance:none;
    height:6px;
    border-radius:20px;

    background: linear-gradient(90deg,
        #3b82f6,
        #22c55e,
        #f59e0b,
        #ef4444
    );

    outline:none;
    cursor:pointer;
}



/* ==========================================
   BOTTOM AREA
========================================== */

.ag-bottom{

    min-height:250px;
    height:auto;

    background:#121b29;

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px;

    display:flex;
    flex-direction:column;
}

.ag-panel-header{

    font-size:22px;
    font-weight:700;

    margin-bottom:25px;
}

/* ==========================================
   OPTIONS
========================================== */

.ag-options{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}


.ag-option{

    height:90px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:#243245;

    color:#ffffff;

    font-size:16px;
    font-weight:600;

    transition:.2s;
}

.ag-option:hover{

    background:#33507a;
}

/* ==========================================
   TOPIC BUTTONS
========================================== */

.ag-topic-btn{
    background:#243245;
    color:#ffffff;

    border:2px solid transparent;

    transition:
        background .25s,
        border-color .25s,
        box-shadow .25s,
        transform .2s;
}

.ag-topic-btn:hover{
    background:#30445f;
}

.ag-topic-btn.active{

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

    border-color:#60a5fa;

    color:#ffffff;

    box-shadow:
        0 0 18px rgba(59,130,246,.45);

    transform:translateY(-2px);
}

.ag-topic-btn:disabled{

    opacity:.35;
    filter:grayscale(.3);
    cursor:not-allowed;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

    .ag-top{

        grid-template-columns:
            1fr;

        overflow:auto;
    }

    

    .ag-options{

        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:700px){

    .ag-options{

        grid-template-columns:
            1fr;
    }
}

/* ==========================================
   AI WORKSPACE
========================================== */

.ag-workspace-status{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:15px;

    margin-bottom:25px;
}

.ag-status-card{

    background:#223146;

    border-radius:12px;

    padding:15px;
}

.ag-status-label{

    font-size:12px;

    color:#91a4bc;

    text-transform:uppercase;

    margin-bottom:8px;
}

.ag-status-value{

    font-size:16px;

    font-weight:700;

    color:#ffffff;
}

.ag-workspace-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:20px 0;
}

.ag-workspace-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:15px;
}


.ag-workspace-body{

    min-height:300px;
    height:auto;

    border-radius:14px;

    background:#101924;

    border:1px solid rgba(255,255,255,.08);

    padding:20px;

    line-height:1.8;

    color:#d2dbe6;

    overflow:visible;
}


.ag-prompt-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

    margin-bottom:25px;
}

.ag-prompt-card{

    background:#1b2a3d;

    border-radius:12px;

    padding:15px;
}

.ag-prompt-label{

    font-size:12px;

    text-transform:uppercase;

    color:#8fa7c6;

    margin-bottom:8px;
}

.ag-prompt-value{

    font-size:15px;

    color:#ffffff;

    font-weight:600;
}

.ag-final-prompt{

    background:#101924;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:20px;

    line-height:1.8;
}

.ag-emotion-grid,
.ag-emotion-grid-secondary{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;
}

.ag-emotion-btn,
.ag-emotion2-btn{

    min-height:60px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:#dbe7f5;

    transition:all .25s ease;
}

.ag-emotion-btn{

    background:#243245;
}

.ag-emotion-btn:hover{

    background:#30445f;

    color:#ffffff;
}

.ag-emotion-btn.active{

    background:#3b82f6;

    color:#ffffff;

    box-shadow:0 0 15px rgba(59,130,246,.4);
}

.ag-emotion2-btn{

    background:#1b2a3d;

    color:#c8d2df;
}

.ag-emotion2-btn:hover{

    background:#2b3d56;

    color:#ffffff;
}

.ag-emotion2-btn.active{

    background:#22c55e;

    color:#ffffff;

    box-shadow:0 0 15px rgba(34,197,94,.4);
}


.ag-artwork-tools{

    display:flex;
    gap:12px;

    margin-bottom:20px;
}

.ag-tool-btn{

    background:#243245;

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.ag-tool-btn:hover{

    background:#3b82f6;
}

.ag-artwork-container{

    display:flex;

    justify-content:center;
}

.ag-final-image{

    max-width:100%;

    border-radius:16px;

    box-shadow:0 10px 40px rgba(0,0,0,.4);
}




.ag-image-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    cursor:pointer;
}

.ag-image-modal-inner{

    width:90vw;
    height:90vh;

    display:flex;

    justify-content:center;

    align-items:center;
}

.ag-image-modal img{

    max-width:100%;
    max-height:100%;

    border-radius:12px;
}

/* ==========================================
   GENERATE ARTWORK BUTTON
========================================== */

#ag-generate-artwork{

    display:block;

   width:100%;
max-width:600px;
    height:50px;

    margin:30px auto;

    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:#ffffff;

    font-size:22px;
    font-weight:700;

    border:none;
    border-radius:18px;

    box-shadow:0 10px 30px rgba(34,197,94,.35);

    transition:.25s ease;
}

#ag-generate-artwork:hover:not(:disabled){

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(34,197,94,.5);
}

#ag-generate-artwork:disabled{

    opacity:.5;

    cursor:not-allowed;

    background:#3d4d61;

    box-shadow:none;
}

.ag-confirm-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999999;
}

.ag-confirm-box{

    width:700px;
    max-width:90vw;

    background:#182232;

    border-radius:18px;

    padding:30px;

    color:#fff;

    box-shadow:0 0 40px rgba(0,0,0,.5);
}

.ag-confirm-box h2{

    margin-bottom:20px;
}

.ag-confirm-section{

    line-height:1.8;

    margin-bottom:25px;
}

.ag-confirm-warning{

    font-size:18px;
    font-weight:700;

    margin-bottom:15px;
}

.ag-confirm-terms{

    color:#b9c7d9;

    margin-bottom:25px;
}

.ag-confirm-terms a{

    color:#22c55e;
}

.ag-confirm-actions{

    display:flex;
    justify-content:flex-end;
    gap:15px;
}

#ag-cancel-generation{

    padding:12px 24px;

    border:none;
    border-radius:10px;

    cursor:pointer;
}

#ag-confirm-generation{

    padding:12px 24px;

    border:none;
    border-radius:10px;

    cursor:pointer;

    background:#22c55e;
    color:#fff;
}







/* =========================
   ART GENESIS PROGRESS BAR
========================= */

.lh-progress-wrap {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
}

.lh-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 0.5px;
}

.lh-progress-bg {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.lh-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
    background: linear-gradient(
        90deg,
        #4f46e5 0%,
        #7c3aed 50%,
        #06b6d4 100%
    );
    box-shadow:
        0 0 12px rgba(124,58,237,.45),
        0 0 25px rgba(6,182,212,.25);
}

/* Error Box */

.ag-error-box {
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 60, 60, 0.08);
    border: 1px solid rgba(255, 60, 60, 0.25);
    color: #ffb3b3;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
}





.ag-google-login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:16px;
    padding:14px 22px;

    border-radius:12px;
    border:none;

    background:#ffffff;
    color:#111827;

    font-weight:700;
    font-size:15px;

    text-decoration:none;

    transition:.2s ease;
}

.ag-google-login-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}





















/* ==========================================
   AI MONITOR SPLIT
========================================== */

.ag-monitor{
    display:flex;
    flex-direction:column;
    gap:15px;

    height:520px; /* σταθερό compact ύψος */
}

.ag-monitor-top,
.ag-monitor-bottom{
    background:#182232;
    border-radius:16px;

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.ag-monitor-top{
    flex:1;
    min-height:0;
}

.ag-monitor-bottom{
    flex:1;
    min-height:0;
}

/* HEADERS */

.ag-monitor-header{
    padding:18px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* AI LOG */

.ag-monitor-log{
    flex:1;
    min-height:0;

    padding:15px;

    overflow-y:auto;
    overflow-x:hidden;

    font-family:Consolas, monospace;
    font-size:13px;
}

/* GALLERY */

.ag-artist-gallery{
    flex:1;
    min-height:0;

    padding:15px;

    overflow-y:auto;
}

/* SCROLLBARS */

.ag-monitor-log::-webkit-scrollbar,
.ag-artist-gallery::-webkit-scrollbar{
    width:10px;
}

.ag-monitor-log::-webkit-scrollbar-track,
.ag-artist-gallery::-webkit-scrollbar-track{
    background:#101924;
    border-radius:20px;
}

.ag-monitor-log::-webkit-scrollbar-thumb,
.ag-artist-gallery::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #3b82f6,
        #22c55e
    );
    border-radius:20px;
    border:2px solid #101924;
}

/* GALLERY ITEMS */

.ag-gallery-item{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
}

.ag-gallery-thumb{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
}

.ag-gallery-meta{
    flex:1;
    min-width:0;
}

.ag-gallery-title{
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ag-gallery-category{
    font-size:12px;
    color:#94a3b8;
}







/* ==========================================
   FORCE WHITE TEXT
========================================== */

.ag-selected-count,
.ag-selection-count,
.ag-topic-count,
.ag-login-lock{
    color:#ffffff !important;
}

.ag-login-lock a{
    color:#22c55e !important;
    font-weight:700;
    text-decoration:none;
}

.ag-login-lock a:hover{
    color:#4ade80 !important;
}


#ag-topic-counter{
    margin-top:20px;
    margin-bottom:10px;

    font-weight:600;
    font-size:14px;

    color:#cbd5e1 !important;
}



.ag-options {
    position: relative;
    overflow: visible;
}



.ag-grid-locked .ag-option {
    filter: blur(1px);
    opacity: 0.9;
}



.ag-lock-msg {
    position:absolute;
    left:400px;
    bottom:150px;
    padding: 22px 28px;
    border-radius: 14px;
     background:black;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}