* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; }

body { background: #0b0f19; color: #fff; height: 100vh; overflow: hidden; }

.chat-app { display: flex; flex-direction: column; height: 100vh; }

/* Fixed Header */
.top-bar {
    position: fixed; top: 0; width: 100%; height: 65px;
    background: #161d2f; z-index: 1000; border-bottom: 1px solid #1f2937;
    padding: 0 15px; display: flex; align-items: center;
}

.header-content { display: flex; align-items: center; width: 100%; gap: 15px; }

.admin-profile { flex: 1; display: flex; align-items: center; gap: 10px; }
.avatar-wrapper { position: relative; }
.avatar-wrapper img { width: 40px; height: 40px; border-radius: 10px; }
.status-dot { 
    position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; 
    background: #22c55e; border-radius: 50%; border: 2px solid #161d2f; 
}

.admin-details h4 { font-size: 15px; font-weight: 600; }
.admin-details p { font-size: 11px; color: #94a3b8; }

/* Chat Main (Scroll) */
.chat-main {
    flex: 1; margin-top: 65px; margin-bottom: 75px; 
    overflow-y: auto; padding: 20px 15px;
    display: flex; flex-direction: column; gap: 15px;
}

.msg-time-label { text-align: center; font-size: 11px; color: #4b5563; margin: 10px 0; }

.bubble { max-width: 80%; padding: 10px 14px; border-radius: 15px; font-size: 14px; position: relative; }
.bot .bubble { background: #1f2937; border-bottom-left-radius: 2px; align-self: flex-start; }
.user .bubble { background: #22c55e; color: white; border-bottom-right-radius: 2px; align-self: flex-end; }
.msg.user { align-self: flex-end; }

.time { display: block; font-size: 9px; opacity: 0.6; text-align: right; margin-top: 4px; }

/* Fixed Footer */
.bottom-bar {
    position: fixed; bottom: 0; width: 100%; height: 75px;
    background: #161d2f; padding: 12px 15px; z-index: 1000;
}

.input-wrapper {
    background: #0b0f19; border-radius: 25px; padding: 5px 5px 5px 15px;
    display: flex; align-items: center; gap: 10px;
}

#userInp { flex: 1; background: none; border: none; color: white; outline: none; font-size: 14px; }

.action-btn { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }

.send-circle {
    width: 40px; height: 40px; background: #22c55e; border: none; 
    border-radius: 50%; color: white; display: flex; align-items: center; 
    justify-content: center; cursor: pointer; transition: 0.2s;
}
.send-circle:active { transform: scale(0.9); }