/* ============================================================
   BzWhaChat Core Styles - Complete v4
   Fixes: adds chat-input-bar styles, iOS keyboard safety (100dvh + safe-area-inset), scroll optimizations
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f0f4f6;
    color: #222;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: #0088cc; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ============================================================
   AUTH PAGES (login, register, verify-otp)
   ============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #0088cc 0%, #005f92 100%);
}
.auth-box {
    background: #fff; border-radius: 16px;
    padding: 34px 28px; max-width: 420px; width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.auth-logo { text-align: center; margin-bottom: 26px; }
.logo-circle {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #0088cc, #005f92); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: 14px;
    box-shadow: 0 8px 20px rgba(0, 136, 204, .35);
}
.auth-logo h1 { font-size: 26px; color: #222; margin-bottom: 4px; font-weight: 600; }
.auth-logo p { color: #7b8a95; font-size: 14px; }
.auth-footer {
    text-align: center; margin-top: 22px; padding-top: 20px;
    border-top: 1px solid #eef1f3; font-size: 14px; color: #666;
}
.auth-footer a { font-weight: 600; }
.otp-input { text-align: center; font-size: 22px; font-weight: 600; letter-spacing: 10px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: 13px; color: #555;
    margin-bottom: 6px; font-weight: 500;
}
.form-control {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid #e0e5e9; border-radius: 8px;
    font-size: 15px; font-family: inherit;
    background: #fff; outline: none;
    transition: border-color .15s;
}
.form-control:focus {
    border-color: #0088cc;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, .12);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #0088cc, #006ba6); color: #fff;
    padding: 13px 20px; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    text-decoration: none; transition: transform .1s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(0, 136, 204, .3);
}
.btn-primary:hover, .btn-primary:focus { text-decoration: none; box-shadow: 0 6px 16px rgba(0, 136, 204, .4); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: #0088cc; font-size: 14px; text-decoration: none;
    margin-bottom: 18px; font-weight: 500;
}
.btn-back:hover { text-decoration: none; opacity: .8; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: 12px 14px; border-radius: 8px; margin-bottom: 16px;
    font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger, .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background: #cce5ff; color: #004085; border: 1px solid #b8d4ff; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffe8a1; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #0088cc 0%, #005f92 55%, #003f66 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.landing-content { max-width: 500px; text-align: center; }
.landing-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100px; height: 100px; background: rgba(255, 255, 255, .12);
    border-radius: 24px; font-size: 44px; margin-bottom: 22px;
    backdrop-filter: blur(10px);
}
.landing-content h1 { font-size: 40px; margin-bottom: 10px; font-weight: 700; }
.landing-content p { font-size: 17px; opacity: .9; margin-bottom: 30px; line-height: 1.5; }
.features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
.feature-mini {
    background: rgba(255, 255, 255, .1); padding: 16px 10px; border-radius: 12px;
    text-align: center; backdrop-filter: blur(10px);
}
.feature-mini i { font-size: 22px; margin-bottom: 6px; display: block; }
.feature-mini span { font-size: 12px; font-weight: 500; }
.landing-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-landing {
    padding: 13px 26px; border-radius: 24px; text-decoration: none;
    font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; transition: transform .1s;
}
.btn-landing:hover { text-decoration: none; transform: translateY(-1px); }
.btn-landing-primary { background: #fff; color: #0088cc; }
.btn-landing-outline {
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px);
}
@media (max-width: 480px) {
    .landing-content h1 { font-size: 32px; }
    .features-row { grid-template-columns: 1fr; }
    .landing-buttons { flex-direction: column; }
    .btn-landing { justify-content: center; }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-container {
    max-width: 520px; margin: 30px auto; padding: 24px;
    background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.profile-header {
    text-align: center; padding-bottom: 20px;
    border-bottom: 1px solid #eef1f3; margin-bottom: 22px;
}
.profile-avatar-wrap { display: inline-block; }
.profile-header h2 { font-size: 20px; margin-top: 14px; color: #222; }
.profile-header p { color: #7b8a95; font-size: 13px; margin-top: 4px; }

/* ============================================================
   APP LAYOUT (chats, chat window)
   Uses 100dvh so iOS Safari keyboard doesn't crop the layout
   ============================================================ */
.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    max-width: 1400px; margin: 0 auto; background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .06);
}
@media (max-width: 768px) {
    .app-container { flex-direction: column; }
    .app-container.chat-open .sidebar { display: none; }
    .app-container:not(.chat-open) .chat-window .no-chat-selected { display: flex; }
    .app-container:not(.chat-open) .chat-window > *:not(.no-chat-selected) { display: none; }
}

.sidebar {
    width: 380px; background: #fff;
    border-right: 1px solid #e7eaf0;
    display: flex; flex-direction: column; flex-shrink: 0;
}
@media (max-width: 768px) { .sidebar { width: 100%; } }

.sidebar-header {
    background: #0088cc; color: #fff; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sidebar-header .user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sidebar-header .user-info h3 {
    font-size: 16px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
}
.sidebar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sidebar-actions .icon-btn, .icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; color: #fff; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 16px; transition: background .15s;
}
.sidebar-actions .icon-btn:hover, .icon-btn:hover { background: rgba(255, 255, 255, .15); text-decoration: none; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 6px;
    background: #fff; border: 1px solid #e7eaf0; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    min-width: 200px; z-index: 100; overflow: hidden;
}
.dropdown-menu.show { display: block; }
.dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; color: #333; font-size: 14px;
    border-bottom: 1px solid #f4f6f8;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: #f4f6f8; text-decoration: none; }
.dropdown-menu a i { width: 18px; color: #0088cc; }

/* Search bar */
.search-bar { padding: 10px 14px; background: #f0f4f6; }
.search-bar input {
    width: 100%; padding: 10px 14px; border: none; border-radius: 22px;
    background: #fff; font-size: 14px; outline: none;
}
.search-bar input:focus { box-shadow: 0 0 0 2px rgba(0, 136, 204, .25); }

/* Chat list */
.chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.chat-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid #f0f4f6;
    text-decoration: none; color: #222; transition: background .1s;
}
.chat-item:hover { background: #f7fafc; text-decoration: none; }
.chat-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: #0088cc; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 20px; flex-shrink: 0; overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-info { flex: 1; min-width: 0; }
.chat-info .top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-info .name {
    font-weight: 500; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
}
.chat-info .time { font-size: 12px; color: #888; flex-shrink: 0; }
.chat-info .last-msg {
    color: #666; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.unread-badge {
    background: #25d366; color: #fff; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; min-width: 20px; text-align: center; flex-shrink: 0;
}

/* Chat window */
.chat-window {
    flex: 1; display: flex; flex-direction: column;
    background: #e7ebef; min-width: 0; min-height: 0;
}
.no-chat-selected {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #90a4ae; text-align: center; padding: 40px;
}
.no-chat-selected .big-icon { font-size: 80px; color: #cfd8dc; margin-bottom: 20px; }
.no-chat-selected h3 { font-size: 22px; margin-bottom: 8px; color: #546e7a; }
.no-chat-selected p { font-size: 14px; line-height: 1.6; }

/* Chat header */
.chat-header {
    background: #0088cc; color: #fff;
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    flex-shrink: 0;
}
.chat-header .back-btn { color: #fff; font-size: 18px; text-decoration: none; padding: 6px 10px; margin-left: -6px; }
.chat-header h4 {
    font-size: 15px; font-weight: 600; color: #fff;
    display: flex; align-items: center;
}
.chat-header .status { font-size: 12px; color: rgba(255, 255, 255, .8); }
.chat-header .status.online { color: #a5f3d5; }

/* Messages area */
.messages-area {
    flex: 1; overflow-y: auto; padding: 12px 16px 16px;
    background: #e7ebef;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(0, 136, 204, .04) 0, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(37, 211, 102, .03) 0, transparent 40%);
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.msg-row { display: flex; margin-bottom: 6px; }
.msg-row.sent { justify-content: flex-end; }
.msg-row.received { justify-content: flex-start; }

.msg-bubble {
    max-width: 70%; padding: 8px 12px; border-radius: 12px;
    position: relative; word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}

.msg-row.sent .msg-bubble { background: #0088cc; color: #fff; border-bottom-right-radius: 4px; }
.msg-row.received .msg-bubble { background: #fff; color: #222; border-bottom-left-radius: 4px; }

.msg-text { font-size: 14px; line-height: 1.4; }

.msg-meta {
    font-size: 11px; margin-top: 3px;
    display: flex; justify-content: flex-end; gap: 4px; align-items: center; opacity: .75;
}

.msg-row.received .msg-meta { color: #666; }
.msg-row.sent .msg-meta { color: rgba(255, 255, 255, .85); }

.msg-ticks { font-size: 12px; letter-spacing: -1px; }
.msg-ticks.read { color: #7dfbff; }

/* ============================================================
   CHAT INPUT BAR — was completely missing before
   Keyboard-safe on iOS via safe-area-inset padding
   ============================================================ */
.chat-input-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    background: #f0f2f5;
    border-top: 1px solid #d6dae0;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.chat-input-bar .attach-btn,
.chat-input-bar .voice-btn,
.chat-input-bar .send-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: none; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: transform .1s, background .15s;
    padding: 0;
}
.chat-input-bar .attach-btn { background: transparent; color: #54656f; }
.chat-input-bar .attach-btn:active { background: rgba(0,0,0,.06); transform: scale(.94); }
.chat-input-bar .voice-btn, .chat-input-bar .send-btn {
    background: #0088cc; color: #fff;
    box-shadow: 0 1px 4px rgba(0, 136, 204, .3);
}
.chat-input-bar .voice-btn:active, .chat-input-bar .send-btn:active {
    transform: scale(.94); background: #006ba6;
}
.chat-input-bar input[type=text] {
    flex: 1;
    padding: 11px 16px;
    border: none; border-radius: 22px;
    background: #fff; font-size: 15px;
    outline: none; min-width: 0; font-family: inherit;
    color: #111;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.chat-input-bar input[type=text]::placeholder { color: #8696a0; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd8dc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #90a4ae; }

/* Hide scrollbar on horizontal status bar */
.status-bar::-webkit-scrollbar { display: none; }
.status-bar { -ms-overflow-style: none; scrollbar-width: none; }