/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { height:100%; font-family:'Inter', sans-serif; background:#0f111a; color:#e0e0e0; scroll-behavior:smooth; }
a { text-decoration:none; }

/* Header */
header {
    background: linear-gradient(90deg,#161a2b,#1b2032);
    padding:1.2rem 2rem; text-align:center; font-size:2rem;
    font-weight:700; color:#ffd166; letter-spacing:1px;
    box-shadow:0 4px 20px rgba(0,0,0,0.6);
}

/* Navigation */
nav {
    display:flex; justify-content:center; gap:2rem; margin:1rem 0;
}
nav a {
    padding:0.5rem 1rem; border-radius:10px; font-weight:500;
    color:#e0e0e0; transition: all 0.3s ease;
}
nav a:hover { background:#4fd1c5; color:#0f111a; transform:scale(1.05); }

/* Sections */
section { padding:2rem; min-height:calc(100% - 150px); }
.hidden { display:none; }

/* Landing */
#landing { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1rem; }
.btn {
    padding:1rem 2rem; font-size:1.3rem; font-weight:600; border:none; border-radius:14px;
    background:#4fd1c5; color:#0f111a; cursor:pointer; transition:0.3s; margin:0.5rem;
}
.btn:hover { transform:scale(1.05); background:#3bb7aa; }

/* Map */
#map { width:100%; height:80vh; border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,0.6); transition: all 0.3s ease; }
#map:hover { transform: scale(1.01); }

/* AI Chat */
#chat { display:flex; flex-direction:column; height:80%; max-width:700px; margin:0 auto; }
#messages {
    flex:1; overflow-y:auto; padding:1rem; background:#161a2b;
    border-radius:20px; box-shadow: inset 0 0 15px rgba(0,0,0,0.4); margin-bottom:1rem;
}
.message { margin-bottom:0.8rem; line-height:1.5; padding:0.5rem 0.8rem; border-radius:12px; max-width:80%; word-wrap:break-word; }
.user { align-self:flex-end; background:#ffd166; color:#0f111a; border-top-right-radius:0; }
.bot { align-self:flex-start; background:#4fd1c5; color:#0f111a; border-top-left-radius:0; }

#inputContainer { display:flex; gap:0.5rem; }
#prompt { flex:1; padding:0.7rem; border-radius:15px; border:none; outline:none; background:#161a2b; color:#e0e0e0; font-size:1rem; }
#sendBtn { padding:0.7rem 1.5rem; border:none; border-radius:15px; background:#4fd1c5; color:#0f111a; font-weight:600; cursor:pointer; transition:0.3s; }
#sendBtn:hover { transform:scale(1.05); background:#3bb7aa; }

/* Scrollbar */
#messages::-webkit-scrollbar { width:10px; }
#messages::-webkit-scrollbar-track { background:#161a2b; border-radius:20px; }
#messages::-webkit-scrollbar-thumb { background:#4fd1c5; border-radius:20px; }

/* Responsive */
@media(max-width:768px){
    header { font-size:1.6rem; }
    .btn { font-size:1.1rem; padding:0.8rem 1.5rem; }
    #map { height:60vh; }
    #chat { max-width:95%; }
}