/* ===============================
   GLOBAL
================================ */

body{

font-family: Arial, sans-serif;
background:#eef2f7;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;

}


/* ===============================
   CHAT CONTAINER
================================ */

.chat-container{

width:380px;
max-width:95%;
height:600px;
background:white;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
display:flex;
flex-direction:column;
overflow:hidden;

}


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

.chat-header{

background:linear-gradient(135deg,#007bff,#0056b3);
color:white;
padding:15px;
font-weight:bold;
text-align:center;
font-size:18px;

}


/* ===============================
   CHATBOX
================================ */

.chatbox{

flex:1;
overflow-y:auto;
padding:10px;
background:#f5f7fb;

}


/* ===============================
   BOT MESSAGE
================================ */

.bot{

background:#e9eef6;
padding:10px;
border-radius:10px;
margin-bottom:8px;
max-width:80%;

}


/* ===============================
   USER MESSAGE
================================ */

.user{

background:#007bff;
color:white;
padding:10px;
border-radius:10px;
margin-bottom:8px;
max-width:75%;
margin-left:auto;
text-align:right;

}


/* ===============================
   OPTION BUTTONS
================================ */

.options button{

width:100%;
padding:10px;
margin:5px 0;
border:none;
border-radius:8px;
background:#dce7f7;
cursor:pointer;
font-weight:bold;

}

.options button:hover{

background:#c3d7f5;

}


/* ===============================
   INPUT AREA
================================ */

.input-area{

display:flex;
border-top:1px solid #ddd;

}

.input-area input{

flex:1;
border:none;
padding:12px;
font-size:14px;

}

.input-area button{

background:#007bff;
color:white;
border:none;
padding:12px 15px;
cursor:pointer;

}


/* ===============================
   3D COLLEGE CARD
================================ */

.college-card{

background:linear-gradient(145deg,#ffffff,#e6ecf5);
border-radius:12px;
padding:15px;
margin-bottom:12px;
box-shadow:
5px 5px 15px rgba(0,0,0,0.2),
-5px -5px 15px rgba(255,255,255,0.7);
transition:0.3s;

}

.college-card:hover{

transform:translateY(-3px);
box-shadow:
8px 8px 20px rgba(0,0,0,0.25),
-8px -8px 20px rgba(255,255,255,0.8);

}


.college-title{

font-size:16px;
font-weight:bold;
color:#007bff;

}

.college-distance{

font-size:13px;
color:#555;
margin-top:4px;

}

.college-courses{

font-size:13px;
margin-top:5px;

}


.college-card button{

margin-top:8px;
background:#28a745;
color:white;
border:none;
padding:6px 10px;
border-radius:6px;
cursor:pointer;

}

.college-card button:hover{

background:#1f8a37;

}


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

@media(max-width:600px){

.chat-container{

width:100%;
height:100vh;
border-radius:0;

}

.chat-header{

font-size:16px;

}

.bot,.user{

font-size:14px;

}

}


/* =========================================================
   🔽🔽 FINAL FIXED ADDITIONS (WORKING)
========================================================= */

/* ---------- BACKGROUND IMAGE ---------- */

body{
    background: url('../images/screen.png') no-repeat center center fixed;
    background-size: cover;
}


/* ---------- REMOVE CENTER ALIGN ---------- */

body{
    display:block !important;
    height:auto !important;
}


/* ---------- CHAT POSITION ---------- */

.chat-container{
    position: fixed !important;
    bottom: 20px;
    right: 20px;
}


/* ---------- MOBILE IMPROVEMENT ---------- */

@media(max-width:768px){

.chat-container{
    width:95%;
    height:85vh;
    left:2.5%;
    right:2.5%;
    bottom:10px;
    border-radius:10px;
}

.chatbox{
    height:calc(100% - 110px);
}

}

/* ===============================
   FINAL FIX (WORKING)
================================ */

/* ---- BACKGROUND FIX ---- */

html, body{
    background: url('../images/screen.png') no-repeat center center fixed !important;
    background-size: cover !important;
}


/* ---- FORCE CHAT POSITION ---- */

.chat-container{
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;

    margin: 0 !important;
}


/* ---- BREAK FLEX CENTER ---- */

body{
    display: block !important;
}


/* ---- MOBILE FIX ---- */

@media(max-width:768px){

.chat-container{
    width:95% !important;
    height:85vh !important;

    left:2.5% !important;
    right:2.5% !important;
    bottom:10px !important;
}

}