/* AI TOOL */

.ai-page{
background:#f3f4f6;
height:calc(100vh - 82px);
overflow:hidden;
}

/* LAYOUT */

.ai-layout{
display:grid;
grid-template-columns:220px minmax(0,1fr) 190px;
height:100%;
max-width:1600px;
margin:auto;
}

/* SIDEBAR */

.ai-sidebar{
background:#fff;
border-right:1px solid #ececec;
padding:24px 18px;
overflow-y:auto;
}

.ai-brand h2{
font-size:28px;
font-weight:800;
line-height:1;
margin-bottom:12px;
letter-spacing:-1px;
}

.ai-brand p{
font-size:13px;
line-height:1.8;
color:#6b7280;
}

.sidebar-section{
margin-top:32px;
}

.sidebar-title{
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:14px;
color:#6b7280;
}

.ai-suggestions,
.recent-list{
display:flex;
flex-direction:column;
gap:10px;
}

.suggestion-btn,
.recent-item{
background:#f9fafb;
border:1px solid #ececec;
padding:14px;
border-radius:16px;
font-size:13px;
line-height:1.6;
cursor:pointer;
transition:.2s;
text-align:left;
font-family:inherit;
}

.suggestion-btn:hover{
background:#fff;
transform:translateY(-1px);
}

/* MAIN */

.ai-main{
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
}

/* TOPBAR */

.ai-topbar{
padding:18px 26px;
background:#fff;
border-bottom:1px solid #ececec;
flex-shrink:0;
}

.ai-topbar h1{
font-size:34px;
font-weight:700;
letter-spacing:-1.5px;
margin-bottom:4px;
line-height:1.1;
}

.ai-topbar p{
font-size:14px;
color:#6b7280;
}

/* CHAT */

.ai-chat{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:24px;
display:flex;
flex-direction:column;
gap:20px;
scroll-behavior:smooth;
}

/* CHAT CARD */

.ai-card{
background:#fff;
border:1px solid #ececec;
border-radius:20px;
padding:16px;
width:100%;
max-width:820px;
margin:auto;
box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.welcome-card{
padding:26px;
}

.ai-card h2{
font-size:20px;
margin-bottom:10px;
}

.ai-card p{
font-size:14px;
line-height:1.8;
color:#6b7280;
}

/* USER MESSAGE */

.user-message{
margin-left:auto;
background:#0f172a;
color:#fff;
padding:14px 18px;
border-radius:18px 18px 6px 18px;
max-width:420px;
font-size:14px;
line-height:1.6;
word-break:break-word;
}

/* GENERATED */

.generated-title{
font-size:20px;
margin-bottom:16px;
font-weight:700;
}

.ai-image-wrapper{
margin-top:14px;
border-radius:18px;
overflow:hidden;
background:transparent;
display:flex;
justify-content:center;
}

.generated-image{
width:100%;
max-width:700px;
max-height:420px;
object-fit:cover;
display:block;
border-radius:18px;
margin:auto;
box-shadow:0 6px 24px rgba(0,0,0,.08);
}

/* VARIATIONS */

.variation-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:16px;
}

.variation-btn{
padding:10px 14px;
border:none;
background:#f3f4f6;
border-radius:999px;
font-size:12px;
font-weight:600;
cursor:pointer;
}

/* DOWNLOAD */

.download-row{
margin-top:18px;
}

.download-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 16px;
background:#0f172a;
color:#fff;
border-radius:14px;
text-decoration:none;
font-size:13px;
font-weight:700;
}

/* CTA */

.designer-cta{
margin-top:20px;
background:#0b132b;
padding:22px;
border-radius:20px;
color:#fff;
}

.designer-cta h3{
font-size:20px;
margin-bottom:8px;
}

.designer-cta p{
font-size:13px;
line-height:1.7;
margin-bottom:16px;
color:#d1d5db;
}

.cta-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 16px;
background:#8b5cf6;
color:#fff;
border-radius:14px;
text-decoration:none;
font-size:13px;
font-weight:700;
}

/* INPUT */

.ai-input-area{
padding:18px 24px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
border-top:1px solid #ececec;
flex-shrink:0;
}

#aiForm{
display:flex;
gap:14px;
align-items:flex-end;
max-width:860px;
margin:auto;
}

.ai-prompt-box{
flex:1;
background:#fff;
border:1px solid #ececec;
border-radius:22px;
padding:16px;
}

.ai-prompt-box textarea{
width:100%;
border:none;
outline:none;
resize:none;
background:transparent;
font-size:15px;
font-family:inherit;
min-height:70px;
line-height:1.7;
color:#111827;
}

.ai-options{
display:flex;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
}

.ai-options input{
padding:12px 14px;
border-radius:12px;
border:1px solid #ececec;
font-size:13px;
width:160px;
}

/* UPLOAD */

.upload-row{
margin-top:16px;
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}

.upload-box{
padding:12px 14px;
border:1px dashed #cbd5e1;
border-radius:12px;
background:#f8fafc;
font-size:12px;
font-weight:600;
cursor:pointer;
}

.upload-box input{
display:none;
}

.preview-image{
width:70px;
height:70px;
object-fit:cover;
border-radius:12px;
border:1px solid #ececec;
}

/* BUTTON */

.ai-generate-btn{
height:54px;
padding:0 24px;
background:#0f172a;
color:#fff;
border:none;
border-radius:16px;
font-size:14px;
font-weight:700;
cursor:pointer;
flex-shrink:0;
}

/* LOADING */

.ai-loading{
display:flex;
align-items:center;
gap:14px;
font-size:14px;
color:#6b7280;
}

.ai-loader{
width:18px;
height:18px;
border:2px solid #ececec;
border-top:2px solid #111827;
border-radius:50%;
animation:spin 1s linear infinite;
}

/* ERROR */

.ai-error{
padding:14px;
background:#fef2f2;
border:1px solid #fecaca;
border-radius:14px;
color:#dc2626;
font-size:14px;
}

/* RIGHT PANEL */

.ai-right-panel{
background:#fff;
border-left:1px solid #ececec;
padding:18px;
overflow-y:auto;
}

.right-card{
background:#f9fafb;
padding:18px;
border-radius:18px;
margin-bottom:16px;
}

.right-card h3{
font-size:16px;
margin-bottom:14px;
}

.budget-value{
font-size:24px;
font-weight:800;
line-height:1.2;
}

.tag-list{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.tag{
padding:8px 10px;
background:#fff;
border-radius:999px;
font-size:11px;
font-weight:600;
}

.designer-mini-list{
display:flex;
flex-direction:column;
gap:10px;
}

.designer-mini-list a{
text-decoration:none;
font-size:13px;
font-weight:700;
color:#111827;
}

/* ANIMATION */

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

/* RESPONSIVE */

@media(max-width:1200px){

.ai-layout{
grid-template-columns:1fr;
}

.ai-sidebar,
.ai-right-panel{
display:none;
}

}

@media(max-width:768px){

.ai-page{
height:auto;
}

.ai-topbar{
padding:16px;
}

.ai-topbar h1{
font-size:28px;
}

.ai-chat{
padding:16px;
}

.ai-card{
padding:16px;
}

#aiForm{
flex-direction:column;
align-items:stretch;
}

.ai-options input{
width:100%;
}

.ai-generate-btn{
width:100%;
}

.generated-image{
max-height:420px;
}

}