/* =========================
   style.css PART 1
   Replace the TOP HALF of your style.css with this
========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

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

body{
    font-family:'Inter',sans-serif;
    background:#f7f7f7;
    display:flex;
    height:100vh;
    overflow:hidden;
}



/* ---------- LOGO ---------- */

.logo{
    font-family:'Poppins',sans-serif !important;
    font-size:38px;
    font-weight:700;
    margin-bottom:20px;
}



/* ---------- LEFT PANEL ---------- */

.left-panel{

    width:250px;

    min-width:250px;

    background:white;

    border-right:1px solid #e8e8e8;

    padding:25px;

    overflow-y:auto;
}

.description{

    color:#666;

    line-height:1.6;

    margin-bottom:25px;

}


.feature-box{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:18px;

    padding:16px;

    margin-bottom:15px;

}

.feature-box h3{

    margin-bottom:8px;

    font-size:16px;

}

.feature-box p{

    font-size:14px;

    color:#666;

    line-height:1.5;

}


.left-panel button{

    width:100%;

    margin-top:14px;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#222;

    color:white;

    cursor:pointer;

}

.left-panel button:hover{

    background:#444;

}



/* ---------- CENTER ---------- */

.workspace{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}



/* ---------- TOOLBAR ---------- */

.toolbar{

    background:white;

    border-bottom:1px solid #e8e8e8;

    padding:15px;

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.toolbar button,
.toolbar select{

    border:none;

    background:#efefef;

    border-radius:14px;

    padding:12px 18px;

    cursor:pointer;

}


.toolbar button:hover{

    background:#e3e3e3;

}


.share-button{

    margin-left:auto;

    background:#222 !important;

    color:white !important;

}

.share-button:hover{

    background:#444 !important;

}

.logo-link{

    text-decoration:none;

    color:inherit;

}



/* ---------- PAGE CONTENT ---------- */

.page-content{

    overflow-y:auto;

    padding:40px;

}


.page-section{

    margin-bottom:50px;

}


.page-section h1{

    font-size:42px;

    margin-bottom:25px;

}



/* ---------- CREATE CARD ---------- */

.exploration-card{

    max-width:700px;

    width:100%;

    height:230px;

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:black;

    transition:.2s;

}

.exploration-card:hover{

    transform:translateY(-2px);

}


.plus-circle{

    width:60px;

    height:60px;

    border-radius:50%;

    border:2px solid #222;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:20px;

}



/* ---------- RIGHT PANEL ---------- */

.right-panel{

    width:350px;

    min-width:350px;

    background:white;

    border-left:1px solid #e8e8e8;

    padding:20px;

    overflow-y:auto;
}


.panel-section{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:24px;

    padding:20px;

    margin-bottom:25px;

}


.panel-section h2{

    margin-bottom:15px;

}


.panel-section label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

}


.panel-section textarea{

    width:100%;

    min-height:90px;

    border:1px solid #ddd;

    border-radius:14px;

    padding:16px;

    resize:none;

}



/* ---------- IDEA PAGE ---------- */

.page-subtitle{

    color:#666;

    margin-bottom:35px;

}


.question-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


.question-card{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:22px;

    padding:25px;

}


.question-card h3{

    margin-bottom:18px;

}


.question-card textarea{

    width:100%;

    min-height:180px;

    border:1px solid #ddd;

    border-radius:14px;

    padding:18px;

}



/* ---------- BUTTONS ---------- */

.navigation-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}


.primary-btn,
.secondary-btn{

    padding:14px 28px;

    border:none;

    border-radius:14px;

    cursor:pointer;

}


.primary-btn{

    background:#222;

    color:white;

}


.secondary-btn{

    background:#ececec;

}



/* ---------- FEEDBACK PAGE ---------- */

.feedback-grid{

    display:grid;

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

    gap:25px;

}


.feedback-type-card{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:22px;

    padding:25px;

    min-height:180px;

    cursor:pointer;

    transition:.2s;

}


.feedback-type-card:hover{

    transform:translateY(-2px);

}


.feedback-type-card h3{

    margin-bottom:15px;

}


.feedback-type-card p{

    color:#666;

    line-height:1.6;

}



/* selected feedback */

.selected-feedback{

    background:#222 !important;

    color:white !important;

}


.selected-feedback p{

    color:white !important;

}

/* =========================
   style.css PART 2
   ADD THIS BELOW PART 1
========================= */


/* ---------- BOARD ---------- */

#board{

    flex:1;

    position:relative;

    overflow:auto;

    min-width:0;

    background-image:
    radial-gradient(#dddddd 1px, transparent 1px);

    background-size:25px 25px;
}


#canvasContainer{

    position:relative;

    width:2000px;

    height:2000px;

    min-width:2000px;

    min-height:2000px;
}



/* ---------- DRAWING CANVAS ---------- */

#drawingCanvas{

    position:absolute;

    inset:0;

}



/* ---------- FEEDBACK CARD ---------- */

.feedback-card{

    margin-top:18px;

}



/* ---------- AI ---------- */

#aiOutput{

    margin-top:15px;

    background:white;

    border:1px solid #ddd;

    border-radius:16px;

    padding:16px;

    line-height:1.6;

}



/* ---------- PANEL BUTTONS ---------- */

.panel-section button{

    width:100%;

    margin-top:12px;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#222;

    color:white;

    cursor:pointer;

}



/* ---------- STICKY ---------- */

.sticky{

    position:absolute;

    width:220px;

    min-height:170px;

    background:#fff3a7;

    padding:18px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.1);

    cursor:move;

}



/* ---------- TEXT BLOCK ---------- */

.text-block{

    position:absolute;

    min-width:220px;

    min-height:80px;

    background:white;

    border-radius:18px;

    padding:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    cursor:move;

}



/* ---------- IMAGES ---------- */

.uploaded-image{

    position:absolute;

    width:250px;

    height:250px;

    overflow:hidden;

    resize:both;

    cursor:move;

    border-radius:18px;

    border:3px solid transparent;

    background:white;

    min-width:100px;

    min-height:100px;

}



/* ---------- SHAPES ---------- */

.shape{

    position:absolute;

    cursor:move;

    border:3px solid transparent;

    resize:both;

    overflow:auto;

    min-width:50px;

    min-height:50px;

}


.square{

    width:140px;

    height:140px;

    background:#111;

}


.circle{

    width:140px;

    height:140px;

    background:#111;

    border-radius:50%;

}


.line{

    width:200px;

    height:4px;

    background:#111;

}


.triangle{

    width:0;

    height:0;

    border-left:70px solid transparent;

    border-right:70px solid transparent;

    border-bottom:120px solid #111;

}



/* ---------- SELECTED ---------- */

.selected{

    border-color:#2d7dff !important;

}



/* ---------- SHARE MODAL ---------- */

.share-modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

}


.share-box{

    width:400px;

    background:white;

    border-radius:24px;

    padding:30px;

}


.share-box input{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    margin-bottom:15px;

}


.share-box button{

    width:100%;

    margin-top:10px;

    padding:14px;

}



/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:8px;

    height:8px;

}


::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:100px;

}