/* Full-screen reset */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
body{height:100vh;width:100vw;background:#f0f0f0;display:flex;justify-content:center;align-items:center;overflow:hidden;}
.chat-container{display:flex;flex-direction:column;width:100%;height:100%;background:#fff;}

/* Header */
header{background:#075E54;color:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px rgba(0,0,0,0.2);}
header h1{font-size:22px;}
header button{padding:5px 10px;border:none;border-radius:5px;cursor:pointer;}

/* Chat Box */
.chat-box{flex:1;padding:10px;overflow-y:auto;display:flex;flex-direction:column;background:#ece5dd;scroll-behavior:smooth;}

/* Ask Box */
.ask-box{display:flex;border-top:1px solid #ccc;padding:10px;}
.ask-box input{flex:1;padding:15px;border-radius:25px;border:none;outline:none;font-size:16px;}
.ask-box button{margin-left:10px;padding:15px 20px;border-radius:25px;border:none;background:#25D366;color:#fff;font-weight:bold;cursor:pointer;}

/* Chat bubbles */
.bubble{max-width:70%;padding:10px 15px;margin:5px 0;border-radius:20px;position:relative;animation:pop 0.3s ease;display:inline-block;}
.question{background:#dcf8c6;align-self:flex-start;}
.answer{background:linear-gradient(120deg,#34b7f1,#25d366);color:#fff;align-self:flex-end;}

/* Vote button */
.vote-btn{background:#fff;border:1px solid #ccc;padding:4px 8px;border-radius:12px;font-size:12px;cursor:pointer;margin-left:5px;transition:0.2s;}
.vote-btn:hover{transform:scale(1.2);}

/* Pop animation */
@keyframes pop{0%{transform:scale(0.5);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* Typewriter animation */
.typewriter span{display:inline-block;opacity:0;animation:typing 0.03s forwards;}
@keyframes typing{to{opacity:1;}}

/* Leaderboard */
.leaderboard{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;padding:20px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.3);z-index:10;transition:transform 0.3s ease;}
.leaderboard.active{transform:translate(-50%,-50%) scale(1);}
.leaderboard h2{margin-bottom:10px;}
.leaderboard ul{list-style:none;}
.leaderboard button{margin-top:10px;padding:5px 10px;cursor:pointer;}

/* Responsive */
@media(max-width:768px){.bubble{max-width:90%;}}