/* =========================
🚀 WORKSPACE ROOT
========================= */

.add-result-workspace{

    position: relative;

    width: 100%;

    min-height: 100vh;

    background: #f5f7fb;
}




/* =========================
🧠 WORKSPACE SHELL
========================= */

.workspace-shell{

    position: relative;

    width: 100%;

    min-height: 100vh;

    background: #f5f7fb;

    color: #111827;

    display: flex;

    flex-direction: column;

    overflow: visible;
}


/* =========================
📦 RUNTIME SECTION
========================= */

.workspace-runtime-section{

    display: none;
}

.workspace-runtime-section.active{

    display: block;
}

/* =========================
📌 HEADER
========================= */

.workspace-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 26px 32px;

    border-bottom: 1px solid #e5e7eb;

    background: #ffffff;

    flex-shrink: 0;
}

.workspace-header h2{

    margin: 6px 0 0;

    font-size: 28px;

    font-weight: 700;

    color: #111827;
}

.workspace-header small{

    color: #6b7280;

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================
❌ CLOSE
========================= */

.close-workspace-btn{

    width: 42px;

    height: 42px;

    border-radius: 12px;

    border: none;

    background: #f3f4f6;

    color: #111827;

    cursor: pointer;

    font-size: 18px;

    transition: .25s;
}

.close-workspace-btn:hover{

    background: #e5e7eb;
}


/* =========================
🧭 STEPS
========================= */

.workspace-steps{

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 20px 32px;

    border-bottom: 1px solid #e5e7eb;

    overflow-x: auto;

    flex-shrink: 0;

    background: #ffffff;
}

.workspace-step{

    min-width: 150px;

    padding: 14px 18px;

    border-radius: 14px;

    background: #ffffff;

    color: #6b7280;

    border: 1px solid #e5e7eb;

    font-size: 14px;

    font-weight: 600;

    text-align: center;

    transition: .25s;
}


/* =========================
🧩 BODY
========================= */

.workspace-body{

    flex: 1;

    display: grid;

    grid-template-columns: 1fr 360px;

    overflow: hidden;
}


/* =========================
🧠 MAIN
========================= */

.workspace-main{

    display: flex;

    flex-direction: column;

    overflow: hidden;
}


/* =========================
📜 STEP CONTENT
========================= */

.workspace-step-content{

    flex: 1;

    overflow-y: auto;

    padding: 32px;
}





/* =========================
🧠 SECTION HEAD
========================= */

.runtime-section-head{

    margin-bottom: 24px;
}

.runtime-section-head h3{

    margin: 0 0 10px;

    font-size: 24px;

    font-weight: 700;

    color: #111827;
}

.runtime-section-head p{

    margin: 0;

    color: #6b7280;

    line-height: 1.7;
}


/* =========================
🎛 MODE GRID
========================= */

.runtime-mode-grid{

    display: flex;

    gap: 16px;

    margin-bottom: 24px;
}

.runtime-mode-btn{

    flex: 1;

    padding: 16px;

    border: 1px solid #d1d5db;

    border-radius: 16px;

    background: #ffffff;

    color: #6b7280;

    cursor: pointer;

    font-weight: 600;

    transition: .25s;
}

.runtime-mode-btn:hover{

    border-color: #1877f2;

    color: #1877f2;
}



/* =========================
📦 CARD
========================= */

.runtime-card{

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    padding: 24px;

    box-shadow:

    0 1px 2px rgba(0,0,0,.04),

    0 6px 24px rgba(15,23,42,.04);
}


/* =========================
🧱 GRID
========================= */

.runtime-grid{

    display: grid;

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

    gap: 18px;
}


/* =========================
🏷 LABELS
========================= */

.runtime-card label{

    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    color: #6b7280;

    font-weight: 600;
}


/* =========================
⌨ INPUTS
========================= */

.runtime-card input,
.runtime-card select{

    width: 100%;

    height: 52px;

    border-radius: 14px;

    border: 1px solid #d1d5db;

    background: #ffffff;

    color: #111827;

    padding: 0 16px;

    font-size: 14px;

    outline: none;

    transition: .2s;
}

.runtime-card input:focus,
.runtime-card select:focus{

    border-color: #1877f2;

    box-shadow:
    0 0 0 4px rgba(24,119,242,.12);
}


/* =========================
🔘 ACTIONS
========================= */

.workspace-actions{

    display: flex;

    justify-content: space-between;

    padding: 24px 32px;

    border-top: 1px solid #e5e7eb;

    background: #ffffff;

    flex-shrink: 0;
}


/* =========================
🔘 BUTTONS
========================= */

.workspace-btn{

    min-width: 160px;

    height: 52px;

    border: none;

    border-radius: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;
}

.workspace-btn.primary{

    background: #1877f2;

    color: #fff;
}

.workspace-btn.primary:hover{

    background: #1664d9;
}

.workspace-btn.secondary{

    background: #f3f4f6;

    color: #111827;
}

.workspace-btn.secondary:hover{

    background: #e5e7eb;
}


/* =========================
🤖 SIDEBAR
========================= */

.workspace-sidebar{

    border-left: 1px solid #e5e7eb;

    background: #f9fafb;

    overflow-y: auto;

    padding: 24px;
}


/* =========================
🧠 SIDEBAR CARD
========================= */

.workspace-sidebar-card{

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    padding: 22px;

    margin-bottom: 20px;

    box-shadow:

    0 1px 2px rgba(0,0,0,.04),

    0 6px 24px rgba(15,23,42,.04);
}


/* =========================
🤖 AI
========================= */

.workspace-ai-runtime{

    color: #374151;

    line-height: 1.8;

    font-size: 14px;
}


/* =========================
📋 SUMMARY
========================= */

.workspace-summary{

    color: #374151;

    line-height: 1.8;

    font-size: 14px;
}


/* =========================
🙈 HIDDEN
========================= */

.hidden{

    display: none !important;
}


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

@media(max-width:1100px){

    .workspace-body{

        grid-template-columns: 1fr;
    }

    .workspace-sidebar{

        border-left: none;

        border-top: 1px solid #e5e7eb;
    }
}

@media(max-width:768px){

    .workspace-header{

        padding: 20px;
    }

    .workspace-step-content{

        padding: 20px;
    }

    .workspace-actions{

        padding: 20px;
    }

    .runtime-grid{

        grid-template-columns: 1fr;
    }

    .runtime-mode-grid{

        flex-direction: column;
    }

    .workspace-step{

        min-width: 130px;
    }
}

/* =========================
🚨 TOAST
========================= */

.workspace-toast{

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 999999;

    padding: 14px 20px;

    border-radius: 12px;

    color: #fff;

    font-size: 14px;

    opacity: 0;

    transform: translateY(20px);

    transition: all .3s ease;
}

.workspace-toast.show{

    opacity: 1;

    transform: translateY(0);
}

.workspace-toast.success{

    background: #16a34a;
}

.workspace-toast.error{

    background: #dc2626;
}