* { box-sizing: border-box; }
html, body {
    margin: 0;
    overflow-x: hidden; /* mobile par kabhi bhi left-right scroll na ho */
}
body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    background: #ECE5DD;
}

/* ================= AUTH PAGES ================= */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #075E54, #25D366);
}
.auth-box {
    background: #fff;
    padding: 40px 36px;
    border-radius: 12px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.auth-logo { font-size: 48px; margin-bottom: 8px; }
.auth-box h2 { margin: 0 0 4px; color: #075E54; }
.auth-sub { color: #667781; margin-bottom: 20px; font-size: 14px; }
.auth-box form { display: flex; flex-direction: column; gap: 12px; }
.auth-box input, .auth-box textarea {
    padding: 12px 14px;
    border: 1px solid #d1d7db;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.auth-box input:focus { border-color: #25D366; }
.btn-primary {
    background: #075E54;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    margin-top: 6px;
}
.btn-primary:hover { background: #0a7d6f; }
.btn-secondary {
    background: #e9edef; color: #111b21; border: none;
    padding: 12px; border-radius: 8px; cursor: pointer;
}
.auth-error {
    background: #fde2e1; color: #c0392b; padding: 10px;
    border-radius: 6px; font-size: 13px; margin-bottom: 14px;
}
.auth-success {
    background: #dcf8e6; color: #1e7e34; padding: 10px;
    border-radius: 6px; font-size: 13px; margin-bottom: 14px;
}
.auth-switch { margin-top: 18px; font-size: 13px; color: #667781; }
.auth-switch a { color: #075E54; font-weight: 600; text-decoration: none; }

/* ================= APP LAYOUT ================= */
#app {
    display: flex;
    height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background: #ECE5DD;
}

/* ---- Sidebar (classic WhatsApp - light) ---- */
.sidebar {
    width: 380px;
    min-width: 300px;
    background: #ffffff;
    border-right: 1px solid #e9edef;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    background: #f0f2f5;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9edef;
}
.me { display: flex; align-items: center; gap: 10px; color: #111b21; font-weight: 600; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.header-actions button, .logout-link {
    background: none; border: none; color: #54656f; font-size: 19px;
    cursor: pointer; text-decoration: none; position: relative;
}
.icon-svg {
    width: 20px; height: 20px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle; display: inline-block;
}
.call-btn .icon-svg, .call-controls button .icon-svg { width: 22px; height: 22px; }
.avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: #25D366; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700;
    flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.notice-bell { position: relative; }
.badge-dot {
    position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
    background: #e53935; border-radius: 50%; display: inline-block;
}
.app-brand { padding: 6px 16px 0; color: #075E54; font-weight: 700; font-size: 13px; letter-spacing: .3px; }

.search-box { padding: 8px 12px; background: #ffffff; }
.search-box input {
    width: 100%; padding: 9px 14px; border-radius: 20px; border: none;
    background: #f0f2f5; color: #111b21; outline: none; font-size: 14px;
}

.tabs { display: flex; background: #ffffff; border-bottom: 1px solid #e9edef; }
.tab-btn {
    flex: 1; background: none; border: none; color: #54656f; padding: 10px;
    cursor: pointer; font-size: 14px; border-bottom: 3px solid transparent;
}
.tab-btn.active { color: #00a884; border-bottom-color: #00a884; font-weight: 600; }

.chat-list { flex: 1; overflow-y: auto; }
.chat-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    cursor: pointer; border-bottom: 1px solid #f0f2f5;
}
.chat-item:hover { background: #f5f6f6; }
.chat-item.active { background: #f0f2f5; }
.chat-item-info { flex: 1; min-width: 0; }
.chat-item-top { display: flex; justify-content: space-between; }
.chat-item-name { color: #111b21; font-size: 15px; font-weight: 500; }
.chat-item-time { color: #667781; font-size: 11px; }
.chat-item-bottom { display: flex; justify-content: space-between; align-items: center; }
.chat-item-last { color: #667781; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.unread-badge {
    background: #25D366; color: #fff; border-radius: 50%;
    min-width: 20px; height: 20px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* ---- Chat area ---- */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #efeae2;
    position: relative;
}
.empty-state {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; color: #667781; text-align: center; padding: 40px;
    background: #f7f8fa;
}
.empty-icon { font-size: 64px; margin-bottom: 12px; }
.empty-state h2 { color: #41525d; font-weight: 300; }

.chat-window { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-header {
    background: #f0f2f5; padding: 10px 16px; display: flex;
    align-items: center; justify-content: space-between; border-bottom: 1px solid #e9edef;
}
.chat-header-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#backBtn { display: none; background: none; border: none; color: #54656f; font-size: 20px; cursor: pointer; }
.chat-title { color: #111b21; font-size: 16px; font-weight: 500; }
.chat-subtitle { color: #667781; font-size: 12px; }
.chat-header-actions button {
    background: none; border: none; font-size: 18px; color: #54656f; cursor: pointer;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 8%;
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23ded9cf' fill-opacity='0.6'%3E%3Ccircle cx='10' cy='10' r='1.5'/%3E%3Ccircle cx='40' cy='30' r='1.5'/%3E%3Ccircle cx='25' cy='50' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.msg-row { display: flex; margin-bottom: 4px; }
.msg-row.sent { justify-content: flex-end; }
.msg-row.received { justify-content: flex-start; }
.bubble {
    max-width: 65%;
    padding: 6px 9px 8px 9px;
    border-radius: 8px;
    position: relative;
    font-size: 14.2px;
    line-height: 1.4;
    box-shadow: 0 1px .5px rgba(0,0,0,.13);
}
.msg-row.sent .bubble { background: #DCF8C6; color: #111b21; border-top-right-radius: 0; }
.msg-row.received .bubble { background: #ffffff; color: #111b21; border-top-left-radius: 0; }
.bubble .sender-name { font-size: 12.5px; font-weight: 700; color: #00a884; margin-bottom: 2px; }
.bubble .msg-time { font-size: 10.5px; color: #667781; text-align: right; margin-top: 3px; }
.msg-ticks {
    font-size: 12.5px; letter-spacing: -2px; margin-left: 4px; color: #8696a0; font-weight: 700;
}
.msg-ticks.read { color: #53bdeb; }
.bubble img.msg-image {
    max-width: 260px; max-height: 320px; border-radius: 6px; display: block;
    -webkit-user-drag: none; user-select: none; pointer-events: auto;
}
.bubble audio { width: 230px; height: 36px; }
.bubble video.msg-video {
    max-width: 280px; max-height: 320px; border-radius: 6px; display: block;
    -webkit-user-drag: none; user-select: none;
}
.file-bubble {
    display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.04);
    padding: 8px 10px; border-radius: 8px; cursor: pointer; min-width: 200px;
}
.file-bubble .file-icon { font-size: 24px; }
.file-bubble .file-name { font-size: 13.5px; word-break: break-all; }
.msg-actions {
    position: absolute; top: -10px; right: -6px; display: none;
    background: #fff; border: 1px solid #e9edef; border-radius: 50%; width: 26px; height: 26px;
    align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: #54656f;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.bubble { position: relative; }
.msg-row:hover .msg-actions { display: flex; }

.chat-input-bar {
    display: flex; align-items: center; gap: 8px;
    background: #f0f2f5; padding: 10px 16px;
}
.chat-input-bar input[type=text] {
    flex: 1; padding: 10px 14px; border-radius: 20px; border: none;
    background: #ffffff; color: #111b21; outline: none; font-size: 15px;
}
.chat-input-bar button {
    background: none; border: none; font-size: 20px; color: #54656f; cursor: pointer;
}

.recording-bar {
    background: #f0f2f5; padding: 10px 16px; display: flex; align-items: center;
    gap: 10px; color: #111b21;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.recording-bar button {
    margin-left: auto; background: #00a884; border: none; color: #fff;
    padding: 6px 12px; border-radius: 16px; cursor: pointer; font-weight: 600;
}
#cancelRecBtn { background: #8696a0 !important; color: #fff !important; }

/* ---- Modal (new group / forward / status / notices) ---- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-box {
    background: #ffffff; padding: 24px; border-radius: 10px;
    width: 100%; max-width: 380px; color: #111b21;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.modal-box h3 { margin-top: 0; color: #075E54; }
.modal-box input, .modal-box textarea {
    width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 6px;
    border: 1px solid #d1d7db; background: #f7f8fa; color: #111b21; outline: none;
}
.member-check-list { max-height: 220px; overflow-y: auto; margin-bottom: 14px; }
.member-check-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Admin Panel ---- */
.admin-wrapper { padding: 24px 32px; color: #111b21; background: #f7f8fa; min-height: 100vh; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.admin-header h2 { margin: 0; color: #075E54; }
.admin-stats { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-card { background: #ffffff; padding: 12px 18px; border-radius: 8px; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card.pending { border-left: 4px solid #f0ad4e; }
.stat-card.active { border-left: 4px solid #00a884; }
.stat-card.blocked { border-left: 4px solid #e53935; }
.admin-table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f2f5; font-size: 13.5px; }
.admin-table th { background: #f0f2f5; color: #54656f; font-weight: 600; }
.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge.pending { background: #f0ad4e33; color: #a06b1f; }
.badge.active { background: #00a88433; color: #06231d; }
.badge.blocked { background: #e5393533; color: #a12b26; }
.action-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-approve, .btn-block {
    border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.btn-approve { background: #00a884; color: #fff; }
.btn-block { background: #e53935; color: #fff; }
.notice-form { display: flex; flex-direction: column; gap: 10px; max-width: 500px; margin-top: 12px; }
.notice-form input, .notice-form textarea {
    padding: 10px; border-radius: 6px; border: 1px solid #d1d7db; background: #fff; color: #111b21; outline: none;
}
.notice-form textarea { min-height: 80px; }
@media (max-width: 700px) {
    .admin-wrapper { padding: 16px; }
    .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- Voice / Video Call ---- */
.call-box { text-align: center; }
.call-avatar {
    width: 80px; height: 80px; font-size: 30px; margin: 0 auto 14px;
}
.call-actions { display: flex; justify-content: center; gap: 16px; margin-top: 20px; }
.call-btn {
    border: none; padding: 12px 20px; border-radius: 30px; font-size: 14px;
    cursor: pointer; font-weight: 600;
}
.call-btn.accept { background: #00a884; color: #fff; }
.call-btn.reject { background: #e53935; color: #fff; }

.call-screen {
    position: fixed; inset: 0; background: #111b21; z-index: 100;
    display: flex; flex-direction: column;
}
.call-screen-header {
    padding: 16px; text-align: center; color: #e9edef; display: flex;
    flex-direction: column; gap: 4px;
}
#activeCallStatus { color: #8696a0; font-size: 13px; }
.call-video-area { flex: 1; position: relative; background: #000; }
.call-grid {
    width: 100%; height: 100%; display: grid; gap: 4px; padding: 4px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.call-grid video {
    width: 100%; height: 100%; object-fit: cover; background: #111; border-radius: 6px;
}
.call-tile { position: relative; background: #111; border-radius: 6px; overflow: hidden; }
.call-tile .tile-name {
    position: absolute; bottom: 6px; left: 8px; color: #fff; font-size: 12px;
    background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 10px;
}
#localVideo {
    position: absolute; bottom: 16px; right: 16px; width: 140px; height: 100px;
    border-radius: 8px; object-fit: cover; border: 2px solid #202c33; background: #111; z-index: 5;
}
.call-controls {
    display: flex; justify-content: center; gap: 20px; padding: 20px;
}
.call-controls button {
    width: 54px; height: 54px; border-radius: 50%; border: none; font-size: 20px;
    background: #2a3942; color: #e9edef; cursor: pointer;
}
.call-controls button.muted { background: #e53935; }
.call-controls button.hangup { background: #e53935; }

/* ---- Status (Stories) ---- */
.status-viewer {
    position: fixed; inset: 0; background: #000; z-index: 100;
    display: flex; flex-direction: column;
}
.status-viewer-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff;
    background: rgba(0,0,0,.4);
}
.status-viewer-header span:first-child { font-weight: 600; }
.status-viewer-header #statusViewerTime { color: #ccc; font-size: 12px; flex: 1; }
.status-viewer-header button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.status-viewer-body {
    flex: 1; display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: 20px; text-align: center; padding: 30px; word-break: break-word;
}
.status-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; }
.status-ring { border: 2.5px solid #00a884; border-radius: 50%; padding: 2px; }

/* ---- Notices (HR policy) ---- */
.notice-modal-box { max-width: 480px; text-align: left; }
.notice-list { max-height: 300px; overflow-y: auto; }
.notice-card {
    background: #f7f8fa; padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #eee;
}
.notice-card h4 { margin: 0 0 4px; color: #075E54; font-size: 14px; }
.notice-card p { margin: 0 0 6px; font-size: 13.5px; color: #333; white-space: pre-wrap; }
.notice-card .notice-meta { font-size: 11px; color: #8696a0; }
.weather-widget { display: flex; gap: 10px; margin-bottom: 14px; }
.weather-card {
    flex: 1; background: linear-gradient(135deg, #075E54, #128C7E); color: #fff;
    border-radius: 10px; padding: 12px; text-align: center;
}
.weather-city { font-size: 12px; font-weight: 600; opacity: .9; }
.weather-icon { font-size: 26px; margin: 4px 0; }
.weather-temp { font-size: 20px; font-weight: 700; }
.weather-cond { font-size: 11px; opacity: .85; }
.cricket-score-line { font-size: 13px; color: #333; margin: 2px 0; }

/* ---- Chat search ---- */
.chat-search-bar {
    display: flex; align-items: center; gap: 8px; background: #f0f2f5; padding: 8px 16px;
}
.chat-search-bar input {
    flex: 1; padding: 8px 14px; border-radius: 20px; border: none; background: #fff; outline: none;
}
.chat-search-bar button { background: none; border: none; font-size: 16px; cursor: pointer; color: #54656f; }
.chat-search-results { flex: 1; overflow-y: auto; padding: 10px 16px; background: #efeae2; }
.search-result-item {
    background: #fff; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13.5px;
}

/* ---- Media & Docs gallery ---- */
.media-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 60vh; overflow-y: auto; }
.gallery-tile { background: #f7f8fa; border-radius: 8px; overflow: hidden; text-align: center; padding: 4px; }
.gallery-tile img, .gallery-tile video { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; }
.gallery-tile.gallery-file { padding: 12px 4px; }
.gallery-tile .file-icon { font-size: 26px; }
.gallery-meta { font-size: 10px; color: #8696a0; margin-top: 3px; word-break: break-word; }

/* ---- Status footer: hearts + comments ---- */
.status-viewer-footer {
    background: rgba(0,0,0,.6); padding: 10px 16px; display: flex; flex-direction: column; gap: 8px;
}
.status-heart-btn {
    background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; align-self: flex-start;
}
.status-heart-btn.hearted { transform: scale(1.05); }
.status-comments-list { max-height: 90px; overflow-y: auto; color: #eee; font-size: 12.5px; }
.status-comment-item { margin-bottom: 4px; }
.status-comment-input-row { display: flex; gap: 8px; }
.status-comment-input-row input {
    flex: 1; padding: 8px 12px; border-radius: 16px; border: none; outline: none;
}
.status-comment-input-row button {
    background: #00a884; color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
}

/* ---- Rate tabs (reuse news-tab-btn style) ---- */
.rate-tab-btn {
    flex: 1; background: #f0f2f5; border: none; padding: 8px; cursor: pointer; font-size: 12.5px;
    border-radius: 6px; margin: 0 3px; color: #54656f;
}
.rate-tab-btn.active { background: #00a884; color: #fff; font-weight: 600; }
.reel-category-tag {
    display: inline-block; background: #00a884; color: #fff; font-size: 10.5px;
    padding: 2px 10px; border-radius: 10px; margin-bottom: 8px; font-weight: 600;
}
.reels-modal-box { max-width: 420px; height: 85vh; display: flex; flex-direction: column; }
.reels-feed-container {
    flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}
.reel-feed-item {
    scroll-snap-align: start; min-height: 90%; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 16px 4px; border-bottom: 1px solid #f0f2f5;
}
.reel-feed-item .notice-meta { text-align: center; width: 100%; margin-top: 8px; }
.reel-caption { font-size: 13px; color: #333; margin: 8px 0 0; text-align: center; }
.yt-embed-wrap { position: relative; width: 100%; padding-top: 177.77%; max-width: 260px; margin: 0 auto; }
.yt-embed-wrap iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; border: none;
}
#categoryFilterSelect, #reelCategorySelect {
    width: 100%; padding: 8px; margin-bottom: 8px; border-radius: 6px; border: 1px solid #d1d7db;
    background: #f7f8fa; color: #111b21;
}
.reel-search-row { display: flex; gap: 6px; margin-bottom: 10px; }
.reel-search-row input {
    flex: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid #d1d7db; outline: none;
}
.reel-search-row button {
    background: #00a884; color: #fff; border: none; padding: 0 14px; border-radius: 6px; cursor: pointer;
}

@media (max-width: 480px) {
    #localVideo { width: 100px; height: 76px; }
}

/* ---- Responsive: mobile + laptop ---- */
@media (max-width: 820px) {
    .sidebar { width: 100%; min-width: 0; }
    .chat-area { display: none; width: 100%; min-width: 0; }
    #app.chat-open .sidebar { display: none; }
    #app.chat-open .chat-area { display: flex; }
    #backBtn { display: inline-block; }
    .bubble { max-width: 82%; }
    .bubble img.msg-image, .bubble video.msg-video { max-width: 100%; }
    .messages-container { padding: 12px 4%; }
    .modal-box { max-width: 92%; }

    /* Flexbox ka aam issue: flex children apni content se chhote nahi hotay jab tak
       min-width:0 na diya jaye - isi wajah se chat header/messages left-right scroll
       kar rahe thay. Yeh fix un sab jagah lagaya gaya hai jahan flex nested hai. */
    .chat-window, .chat-header, .chat-header-info, .messages-container,
    .header-actions, .chat-header-actions, .me, .sidebar {
        min-width: 0;
    }
    .chat-title, .chat-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-header-info > div:last-child { min-width: 0; overflow: hidden; flex: 1; }
}
@media (max-width: 480px) {
    .sidebar-header .me span { font-size: 14px; }
    .chat-input-bar button { font-size: 18px; }
    .chat-title { font-size: 14.5px; }

    /* Header ke bohot saare icons (theme/rates/news/reels/notice/group/admin) ek chhoti
       screen par cramp na ho jayen - thoda gap kam, icon size chhota, aur zarurat par
       horizontally scroll ho jaye (WhatsApp mobile jesa compact header). */
    .sidebar-header { padding: 8px 10px; }
    .header-actions { gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 55vw; }
    .header-actions::-webkit-scrollbar { display: none; }
    .header-actions .icon-svg { width: 18px; height: 18px; }
    .me { gap: 6px; }
    .me .avatar { width: 34px; height: 34px; }

    /* Chat header (call/search/mute/reminder/print icons) bhi isi tarah compact/scrollable */
    .chat-header-actions { gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .chat-header-actions::-webkit-scrollbar { display: none; }
    .chat-header-actions .icon-svg { width: 18px; height: 18px; }
    .chat-header { padding: 8px 10px; }

    .chat-input-bar { padding: 8px 10px; gap: 5px; }
    .chat-input-bar .icon-svg { width: 20px; height: 20px; }

    .emoji-picker { width: 220px; grid-template-columns: repeat(6, 1fr); }
    .media-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Message actions (edit/delete/forward icons), edited/deleted state ---- */
.msg-actions {
    position: absolute; top: -10px; right: -6px; display: none; gap: 4px;
    align-items: center;
}
.msg-action-icon {
    background: #fff; border: 1px solid #e9edef; border-radius: 50%; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .15s;
}
.msg-action-icon:hover { transform: scale(1.15); }
.msg-row:hover .msg-actions { display: flex; }
.msg-deleted { font-style: italic; color: #8696a0; font-size: 13px; }
.edited-tag { font-size: 10px; color: #8696a0; font-style: italic; margin-right: 3px; }
.edit-textarea {
    width: 100%; min-height: 50px; border-radius: 6px; border: 1px solid #d1d7db;
    padding: 6px; font-size: 13.5px; font-family: inherit; margin-bottom: 4px;
}
.edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.edit-actions button {
    border: none; padding: 4px 10px; border-radius: 12px; font-size: 11.5px; cursor: pointer;
}
.edit-save-btn { background: #00a884; color: #fff; }
.edit-cancel-btn { background: #e9edef; color: #111b21; }
.mute-indicator { font-size: 12px; margin-left: 4px; }
.muted-active { color: #e53935 !important; }
.system-message {
    text-align: center; color: #667781; background: #fff3cd; padding: 6px 14px;
    border-radius: 8px; font-size: 12.5px; margin: 10px auto; max-width: 80%; display: table;
}

/* ---- Status seen/unseen rings (WhatsApp jesa) ---- */
.status-ring-unseen { border: 2.5px solid #25D366; padding: 2px; }
.status-ring-seen { border: 2.5px solid #8696a0; padding: 2px; }
.status-ring-mine { border: 2.5px solid #00a884; padding: 2px; }

/* ---- Emoji Picker ---- */
.emoji-picker {
    position: absolute; bottom: 46px; left: 0; background: #fff; border: 1px solid #e9edef;
    border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.2); padding: 10px;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 260px; z-index: 40;
}
.emoji-item {
    font-size: 20px; cursor: pointer; text-align: center; padding: 4px; border-radius: 6px;
    transition: transform .1s;
}
.emoji-item:hover { background: #f0f2f5; transform: scale(1.2); }

/* ---- News tabs ---- */
.news-tab-btn {
    flex: 1; background: #f0f2f5; border: none; padding: 8px; cursor: pointer; font-size: 12.5px;
    border-radius: 6px; margin: 0 3px; color: #54656f;
}
.news-tab-btn.active { background: #00a884; color: #fff; font-weight: 600; }

/* ---- Connection status banner (net band/reconnect hone par) ---- */
#connStatusBanner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    color: #fff; text-align: center; font-size: 12.5px; padding: 6px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ================= DARK THEME (toggle) ================= */
body.dark-theme { background: #0b141a; }
.dark-theme #app { background: #0b141a; }
.dark-theme .sidebar { background: #111b21; border-right-color: #222d34; }
.dark-theme .sidebar-header { background: #202c33; border-bottom-color: #222d34; }
.dark-theme .me { color: #e9edef; }
.dark-theme .header-actions button, .dark-theme .logout-link { color: #aebac1; }
.dark-theme .app-brand { color: #00a884; }
.dark-theme .search-box input { background: #202c33; color: #d1d7db; }
.dark-theme .tabs { background: #111b21; border-bottom-color: #222d34; }
.dark-theme .tab-btn { color: #8696a0; }
.dark-theme .chat-item { border-bottom-color: #1c262c; }
.dark-theme .chat-item:hover { background: #202c33; }
.dark-theme .chat-item.active { background: #2a3942; }
.dark-theme .chat-item-name { color: #e9edef; }
.dark-theme .chat-item-time, .dark-theme .chat-item-last { color: #8696a0; }
.dark-theme .chat-area { background: #0b141a; }
.dark-theme .empty-state { background: #0b141a; color: #8696a0; }
.dark-theme .empty-state h2 { color: #e9edef; }
.dark-theme .chat-header { background: #202c33; border-bottom-color: #222d34; }
.dark-theme .chat-title { color: #e9edef; }
.dark-theme .chat-subtitle { color: #8696a0; }
.dark-theme .chat-header-actions button, .dark-theme #backBtn { color: #aebac1; }
.dark-theme .messages-container { background-color: #0b141a; }
.dark-theme .msg-row.sent .bubble { background: #005c4b; color: #e9edef; }
.dark-theme .msg-row.received .bubble { background: #202c33; color: #e9edef; }
.dark-theme .bubble .msg-time { color: #8696a0; }
.dark-theme .file-bubble { background: rgba(255,255,255,.06); }
.dark-theme .chat-input-bar { background: #202c33; }
.dark-theme .chat-input-bar input[type=text] { background: #2a3942; color: #d1d7db; }
.dark-theme .chat-input-bar button { color: #aebac1; }
.dark-theme .modal-box { background: #202c33; color: #e9edef; }
.dark-theme .modal-box h3 { color: #00a884; }
.dark-theme .modal-box input, .dark-theme .modal-box textarea { background: #2a3942; color: #e9edef; border-color: #3b4a54; }
.dark-theme .notice-card { background: rgba(255,255,255,.05); border-color: #333; }
.dark-theme .notice-card p { color: #d1d7db; }

/* ================= 3D / ANIMATED THEME ENHANCEMENTS ================= */
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-row { animation: bubbleIn .22s ease-out; }

@keyframes modalPop {
    from { opacity: 0; transform: scale(.85) perspective(600px) rotateX(6deg); }
    to { opacity: 1; transform: scale(1) perspective(600px) rotateX(0); }
}
.modal-box, .call-box { animation: modalPop .25s cubic-bezier(.34,1.56,.64,1); }

.chat-item {
    transition: transform .18s ease, box-shadow .18s ease, background .15s;
}
.chat-item:hover {
    transform: translateX(3px) scale(1.01);
    box-shadow: -3px 0 0 #25D366 inset;
}

.avatar { transition: transform .25s ease, box-shadow .25s ease; }
.avatar:hover { transform: perspective(300px) rotateY(8deg) scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,.2); }

.sidebar-header {
    background: linear-gradient(120deg, #f0f2f5, #e8f7ef, #f0f2f5);
    background-size: 200% 200%;
    animation: shimmerHeader 6s ease infinite;
}
@keyframes shimmerHeader {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#sendBtn, .btn-primary {
    transition: transform .15s ease, box-shadow .15s ease;
}
#sendBtn:hover, .btn-primary:hover { transform: scale(1.08) translateY(-1px); box-shadow: 0 3px 10px rgba(0,168,132,.35); }
#sendBtn:active { transform: scale(.92); }

.call-screen { background: linear-gradient(135deg, #0b141a, #111b21, #0b141a); background-size: 200% 200%; animation: shimmerHeader 8s ease infinite; }

.tab-btn { transition: color .2s, border-color .2s; }

/* ---- Print ---- */
.print-only { display: none; }
@media print {
    .sidebar, .chat-header-actions, .chat-input-bar, .recording-bar { display: none !important; }
    #app > *:not(.chat-area) { display: none !important; }
    #app #printArea { display: block !important; }
    #chatWindow, #messagesContainer { display: none !important; }
}