:root {
    --primary: #25D366;
    --primary-dark: #128C7E;
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f2f5;
    --text-primary: #111b21;
    --text-secondary: #667781;
    --msg-out: #d9fdd3;
    --msg-in: #ffffff;
    --border: #e9edef;

    --viewer-bg: #0b141a;
    --viewer-bar: #202c33;
    --viewer-text: #e9edef;

    --danger: #f15c6d;

    /* Voice player tokens */
    --voice-bar-played: #00a884;
    --voice-bar-unplayed: #9d9d9d;
    --voice-cursor: #00a884;
    --voice-play-btn: #00a884;
    --voice-play-btn-hover: #008f72;
}

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

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

/* ─────────────────────────── Sidebar ─────────────────────────── */
.sidebar {
    width: 400px; min-width: 300px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.sidebar-header {
    padding: 10px 16px; background: var(--bg-tertiary);
    display: flex; justify-content: space-between; align-items: center;
    height: 60px;
}
.user-avatar { display: flex; align-items: center; gap: 10px; }
.user-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.header-actions { display: flex; gap: 8px; }
.search-container { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.search-box {
    background: var(--bg-primary); border-radius: 8px;
    padding: 8px 14px; display: flex; align-items: center; gap: 12px;
}
.search-box svg { color: var(--text-secondary); flex-shrink: 0; }
.search-box input {
    background: none; border: none; color: var(--text-primary);
    font-size: 14px; width: 100%; outline: none;
}
.search-box input::placeholder { color: var(--text-secondary); }
.conversations-list { flex: 1; overflow-y: auto; }
.conversation-item {
    padding: 12px 16px; display: flex; align-items: center;
    gap: 12px; cursor: pointer; transition: background 0.2s;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.conversation-item:hover, .conversation-item.active { background: var(--bg-tertiary); }
.conversation-item img {
    width: 49px; height: 49px; border-radius: 50%; flex-shrink: 0; background: #ddd;
}
.conv-info { flex: 1; min-width: 0; }
.conv-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 4px;
}
.conv-header h4 { font-size: 16px; font-weight: 500; }
.conv-time { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.conv-preview p {
    font-size: 13px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─────────────────────────── Main Chat ─────────────────────────── */
.main-chat {
    flex: 1; display: flex; flex-direction: column;
    position: relative; background: #efeae2; min-width: 0;
}
.chat-header {
    padding: 10px 16px; background: var(--bg-tertiary);
    display: flex; justify-content: space-between; align-items: center;
    height: 60px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.contact-info { display: flex; align-items: center; gap: 15px; }
.contact-info img { width: 40px; height: 40px; border-radius: 50%; background: #ddd; }
.contact-details h3 { font-size: 16px; font-weight: 500; }
.contact-details span { font-size: 13px; color: var(--text-secondary); }
.chat-tabs {
    display: flex; gap: 4px; background: var(--bg-secondary);
    padding: 4px; border-radius: 10px; border: 1px solid var(--border);
}
.chat-tab {
    background: none; border: none; padding: 6px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit;
}
.chat-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.chat-tab.active { background: var(--primary); color: #ffffff; }
.tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ─────────────────────────── Messages ─────────────────────────── */
.messages-container {
    flex: 1; overflow-y: auto; padding: 20px 60px;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.welcome-message {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; color: var(--text-secondary); text-align: center;
}
.welcome-message svg { margin-bottom: 20px; opacity: 0.5; }
.welcome-message h2 { font-size: 28px; font-weight: 300; color: var(--text-primary); margin-bottom: 8px; }
.welcome-message p { font-size: 14px; }
.message {
    max-width: 65%; margin-bottom: 3px; padding: 6px 7px 8px 9px;
    position: relative; word-wrap: break-word;
    animation: fadeIn 0.3s ease; box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.message.sent { margin-left: auto; background: var(--msg-out); border-radius: 7.5px 0 7.5px 7.5px; }
.message.received { margin-right: auto; background: var(--msg-in); border-radius: 0 7.5px 7.5px 7.5px; }
.message p { font-size: 14.2px; line-height: 19px; margin-bottom: 2px; white-space: pre-wrap; }
.message p a { color: #039be5; text-decoration: underline; cursor: pointer; word-break: break-all; }
.msg-time { font-size: 11px; color: rgba(0,0,0,0.45); float: right; margin-left: 8px; margin-top: 2px; }
.msg-image { max-width: 250px; max-height: 250px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; display: block; }
.link-preview {
    border-left: 3px solid var(--primary);
    padding: 8px 10px; margin: 4px 0;
    background: rgba(0,0,0,0.05); border-radius: 4px; cursor: pointer;
}
.preview-title { font-weight: 500; font-size: 13px; }
.preview-url { font-size: 11px; color: var(--primary); word-break: break-all; }
.typing-indicator {
    padding: 8px 12px; background: var(--msg-in);
    border-radius: 0 7.5px 7.5px 7.5px; width: fit-content;
    margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.typing-indicator span {
    width: 8px; height: 8px; background: var(--text-secondary);
    border-radius: 50%; animation: typing 1.4s infinite; display: inline-block;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
.typing-indicator small { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

.message-input-container {
    padding: 8px 16px; background: var(--bg-tertiary);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.input-actions { display: flex; gap: 4px; }
.input-field { flex: 1; background: var(--bg-secondary); border-radius: 8px; padding: 9px 12px; }
.input-field input {
    background: none; border: none; color: var(--text-primary);
    font-size: 15px; width: 100%; outline: none;
}
.input-field input::placeholder { color: var(--text-secondary); }
.icon-btn {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.logout-btn { color: var(--danger) !important; }
.send-btn {
    background: var(--primary); border: none; color: white;
    width: 45px; height: 45px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.send-btn:hover { background: var(--primary-dark); }

.emoji-picker {
    position: absolute; bottom: 65px; left: 20px;
    background: white; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000; width: 360px; max-height: 400px; overflow: hidden;
}
.emoji-categories { display: flex; padding: 8px; border-bottom: 1px solid var(--border); gap: 4px; }
.emoji-cat { background: none; border: none; font-size: 18px; padding: 6px 10px; cursor: pointer; border-radius: 6px; }
.emoji-cat:hover, .emoji-cat.active { background: var(--bg-tertiary); }
.emoji-grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 4px; padding: 10px; max-height: 300px; overflow-y: auto;
}
.emoji-grid button {
    background: none; border: none; font-size: 22px; cursor: pointer;
    padding: 6px; border-radius: 8px; transition: background 0.15s;
}
.emoji-grid button:hover { background: var(--bg-tertiary); transform: scale(1.2); }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; animation: fadeIn 0.2s ease;
}
.modal-content {
    background: white; border-radius: 12px;
    width: 90%; max-width: 480px; max-height: 70vh; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-header {
    padding: 16px 20px; background: #00a884; color: white;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-close { background: none; border: none; color: white; font-size: 28px; cursor: pointer; padding: 0 4px; line-height: 1; }
.modal-close:hover { opacity: 0.8; }
.modal-search { padding: 12px 16px; border-bottom: 1px solid #e9edef; }
.modal-search input {
    width: 100%; padding: 10px 14px; border: 1px solid #ddd;
    border-radius: 8px; font-size: 14px; outline: none; font-family: 'Inter', sans-serif;
}
.modal-search input:focus { border-color: #00a884; }
.user-list { max-height: 350px; overflow-y: auto; padding: 8px 0; }
.no-users { padding: 30px; text-align: center; color: #8696a0; font-size: 14px; }
.user-item {
    padding: 10px 20px; display: flex; align-items: center;
    gap: 12px; cursor: pointer; transition: background 0.15s;
}
.user-item:hover { background: #f5f6f6; }
.user-item img { width: 45px; height: 45px; border-radius: 50%; background: #ddd; flex-shrink: 0; }
.user-item-info { flex: 1; min-width: 0; }
.user-item-info .user-name { font-size: 15px; font-weight: 500; color: #111b21; }
.user-item-info .user-email { font-size: 13px; color: #667781; }
.user-item-info .user-role { font-size: 11px; color: #00a884; text-transform: uppercase; font-weight: 600; }
.add-user-btn {
    background: #00a884; color: white; border: none;
    padding: 7px 18px; border-radius: 20px;
    font-size: 13px; font-weight: 500; cursor: pointer; flex-shrink: 0;
}
.add-user-btn:hover { background: #008069; }

@keyframes typing { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.6; }
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@keyframes flashHighlight {
    0%   { background-color: rgba(37, 211, 102, 0.35); }
    100% { background-color: inherit; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

@media (max-width: 768px) {
    .sidebar { width: 100%; min-width: unset; }
    .main-chat { display: none; }
    .main-chat.active { display: flex; position: absolute; top:0; left:0; width:100%; height:100%; }
    .messages-container { padding: 15px; }
    .message { max-width: 85%; }
    .chat-tabs { padding: 2px; }
    .chat-tab { padding: 4px 8px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   WEEK 3 — MEDIA LIBRARY + VIEWER
   ═══════════════════════════════════════════════════════════════════ */

.media-grid {
    flex: 1; overflow-y: auto; padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: 140px; gap: 6px;
    background: #efeae2; align-content: start;
}
.media-cell {
    position: relative; width: 100%; height: 100%;
    min-width: 0; min-height: 0;
    background: #d9d9d9; border-radius: 6px; overflow: hidden;
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
    display: block;
}
.media-cell:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.media-cell::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite; z-index: 0;
}
.media-cell img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    background: #d9d9d9; z-index: 1;
}
.media-cell .video-badge {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 4px;
    font-variant-numeric: tabular-nums; z-index: 2;
}
.media-cell .video-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,0.5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; pointer-events: none; z-index: 2;
}
.media-list {
    flex: 1; overflow-y: auto; padding: 12px 20px;
    background: #efeae2; display: flex; flex-direction: column; gap: 8px;
}
.media-list-row {
    background: #ffffff; border-radius: 8px;
    padding: 10px 14px; display: flex; align-items: center;
    gap: 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background 0.15s;
}
.media-list-row:hover { background: #f5f6f6; }
.media-list-row .row-icon {
    font-size: 28px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); border-radius: 8px; flex-shrink: 0;
}
.media-list-row .row-info { flex: 1; min-width: 0; }
.media-list-row .row-name {
    font-size: 14px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-list-row .row-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.media-list-row .row-action { color: var(--text-secondary); font-size: 18px; padding: 4px 8px; }
.media-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); background: #efeae2;
    font-size: 14px; text-align: center; padding: 40px;
}
.bubble-image, .bubble-video {
    position: relative; display: block; width: 280px; height: 280px;
    max-width: 100%; border-radius: 6px; overflow: hidden;
    cursor: pointer; margin-bottom: 4px; background: #d9d9d9;
}
.bubble-image::before, .bubble-video::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite; z-index: 0;
}
.bubble-image img, .bubble-video img {
    position: absolute; inset: 0; display: block;
    width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.bubble-video .video-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; pointer-events: none; z-index: 2;
}
.bubble-video .video-badge {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.65); color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 4px; z-index: 2;
}
.bubble-doc {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: rgba(0,0,0,0.05);
    border-radius: 6px; cursor: pointer; max-width: 320px;
}
.bubble-doc .doc-icon { font-size: 24px; flex-shrink: 0; }
.bubble-doc .doc-info { flex: 1; min-width: 0; }
.bubble-doc .doc-name {
    font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bubble-doc .doc-size { font-size: 11px; color: var(--text-secondary); }
.bubble-progress {
    padding: 8px 12px; background: rgba(0,0,0,0.05);
    border-radius: 6px; font-size: 12px; color: var(--text-secondary);
}
.viewer-overlay {
    position: fixed; inset: 0;
    background: rgba(11, 20, 26, 0.98);
    z-index: 3000; display: flex; flex-direction: column;
    animation: fadeIn 0.15s ease;
}
.viewer-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; background: var(--viewer-bar);
    color: var(--viewer-text); flex-shrink: 0;
}
.viewer-meta { min-width: 0; }
.viewer-name {
    font-size: 15px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-sub { font-size: 12px; color: #8696a0; margin-top: 2px; }
.viewer-actions { display: flex; gap: 4px; flex-shrink: 0; }
.viewer-btn { color: var(--viewer-text) !important; font-size: 20px; width: 40px; height: 40px; padding: 0 !important; }
.viewer-btn:hover { background: rgba(255,255,255,0.1) !important; }
.viewer-body {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow: hidden; min-height: 0;
}
.viewer-body img, .viewer-body video {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;
}
.viewer-body audio { width: 480px; max-width: 90%; }
.viewer-loading { color: var(--viewer-text); font-size: 14px; opacity: 0.7; }
.viewer-bottombar {
    padding: 12px 20px; background: var(--viewer-bar);
    color: var(--viewer-text); flex-shrink: 0;
    font-size: 12px; display: flex; justify-content: center;
}
.viewer-info { color: #8696a0; }

/* ═══════════════════════════════════════════════════════════════════
   WEEK 4 — Push 1: REPLY
   ═══════════════════════════════════════════════════════════════════ */

.reply-strip {
    display: flex; align-items: stretch; gap: 10px;
    padding: 8px 16px; background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    animation: slideUp 0.15s ease;
}
.reply-strip-accent { width: 4px; border-radius: 2px; background: var(--primary); flex-shrink: 0; }
.reply-strip-body { flex: 1; min-width: 0; }
.reply-strip-sender { font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 2px; }
.reply-strip-text {
    font-size: 13px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-strip-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 18px; cursor: pointer; padding: 0 8px;
    border-radius: 50%; transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.reply-strip-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.msg-chevron {
    position: absolute; top: 2px; right: 2px;
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.06); color: var(--text-secondary);
    font-size: 14px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    padding: 0; font-family: inherit; z-index: 3;
}
.message:hover .msg-chevron,
.message.menu-open .msg-chevron { display: flex; }
.msg-chevron:hover { background: rgba(0,0,0,0.12); color: var(--text-primary); }
.msg-context-menu {
    position: fixed; background: #ffffff;
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    padding: 6px 0; min-width: 180px; z-index: 4000;
    animation: fadeIn 0.12s ease;
}
.msg-context-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; background: none; border: none;
    padding: 10px 16px; font-size: 14px;
    color: var(--text-primary); cursor: pointer;
    font-family: inherit; text-align: left;
}
.msg-context-item:hover { background: var(--bg-tertiary); }
.msg-context-item .ctx-icon { font-size: 16px; width: 20px; text-align: center; color: var(--text-secondary); }
.msg-context-item .ctx-label { flex: 1; }
.msg-context-item[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.reply-quote {
    display: flex; align-items: stretch; gap: 8px;
    background: rgba(0,0,0,0.06); border-radius: 5px;
    padding: 5px 8px; margin-bottom: 5px;
    cursor: pointer; max-width: 100%; overflow: hidden;
}
.reply-quote-accent { width: 3px; border-radius: 2px; background: var(--primary); flex-shrink: 0; }
.reply-quote-body { flex: 1; min-width: 0; }
.reply-quote-sender { font-size: 11.5px; font-weight: 600; color: var(--primary); margin-bottom: 1px; }
.reply-quote-text {
    font-size: 12.5px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-quote.is-deleted .reply-quote-sender { color: var(--text-secondary); }
.reply-quote.is-deleted .reply-quote-text { font-style: italic; }
.message.flash { animation: flashHighlight 1.2s ease; }

/* ═══════════════════════════════════════════════════════════════════
   WEEK 4 — Push 2: DELETE
   ═══════════════════════════════════════════════════════════════════ */

.message.message-deleted {
    background: rgba(0,0,0,0.03) !important;
    box-shadow: none !important;
}
.message.message-deleted .msg-time { opacity: 0.6; }
.deleted-placeholder {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-style: italic;
    color: var(--text-secondary); padding: 2px 0;
}
.deleted-placeholder .del-icon { font-style: normal; font-size: 14px; opacity: 0.7; }
.dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 5000; animation: fadeIn 0.15s ease;
}
.dialog-card {
    background: #ffffff; border-radius: 14px;
    width: 90%; max-width: 380px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    animation: slideUp 0.15s ease;
}
.dialog-title {
    padding: 18px 22px 14px; font-size: 17px; font-weight: 600;
    color: var(--text-primary); border-bottom: 1px solid var(--border);
}
.dialog-options { display: flex; flex-direction: column; padding: 6px 0 4px; }
.dialog-option {
    display: flex; align-items: center; gap: 14px;
    width: 100%; background: none; border: none;
    padding: 14px 22px; font-size: 15px;
    color: var(--text-primary); cursor: pointer;
    font-family: inherit; text-align: left;
    transition: background 0.12s;
}
.dialog-option:hover { background: var(--bg-tertiary); }
.dialog-option-icon {
    font-size: 18px; width: 26px; text-align: center;
    color: var(--text-secondary); flex-shrink: 0;
}
.dialog-option-label {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.dialog-option-sub {
    font-size: 12px; color: var(--text-secondary); font-weight: 400;
}
.dialog-option-cancel {
    border-top: 1px solid var(--border);
    margin-top: 4px; color: var(--text-secondary);
}
.dialog-option-cancel .dialog-option-icon { color: var(--text-secondary); }
.dialog-option-cancel:hover { background: rgba(0,0,0,0.03); color: var(--text-primary); }
.dialog-option[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   WEEK 4 — Push 3: FORWARD
   ═══════════════════════════════════════════════════════════════════ */

.forwarded-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 3px;
    opacity: 0.85;
}
.forwarded-label .fw-icon {
    font-style: normal;
    font-size: 12px;
    opacity: 0.9;
}
.picker-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 5000; animation: fadeIn 0.15s ease;
}
.picker-card {
    background: #ffffff; border-radius: 14px;
    width: 90%; max-width: 440px; max-height: 80vh; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    animation: slideUp 0.15s ease;
}
.picker-header {
    padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.picker-header h3 { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.picker-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 20px; cursor: pointer; padding: 4px 8px;
    border-radius: 50%; transition: background 0.15s, color 0.15s;
}
.picker-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.picker-search {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; background: var(--bg-primary);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.picker-search svg { color: var(--text-secondary); flex-shrink: 0; }
.picker-search input {
    background: none; border: none; color: var(--text-primary);
    font-size: 14px; width: 100%; outline: none; font-family: inherit;
}
.picker-search input::placeholder { color: var(--text-secondary); }
.picker-list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
.picker-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; cursor: pointer;
    transition: background 0.12s;
    border: none; background: none;
    width: 100%; text-align: left; font-family: inherit;
}
.picker-item:hover { background: var(--bg-tertiary); }
.picker-item img {
    width: 42px; height: 42px; border-radius: 50%;
    background: #ddd; flex-shrink: 0;
}
.picker-item-info { flex: 1; min-width: 0; }
.picker-item-name {
    font-size: 15px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-item-sub {
    font-size: 12.5px; color: var(--text-secondary); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text-secondary); font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   WEEK 4 — Push 5: VOICE RECORDING
   ═══════════════════════════════════════════════════════════════════ */

.mic-btn {
    background: var(--primary);
    border: none;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}
.mic-btn:hover { background: var(--primary-dark); }
.mic-btn:active,
.mic-btn.recording {
    background: var(--danger);
    transform: scale(1.08);
}

.recording-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    animation: slideUp 0.15s ease;
    flex-shrink: 0;
}
.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    animation: pulseDot 1s infinite;
    flex-shrink: 0;
}
.recording-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    flex-shrink: 0;
}
.recording-waveform {
    flex: 1;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
}
.recording-waveform span {
    flex: 1;
    min-width: 2px;
    height: 20%;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: height 0.08s ease-out;
}
.recording-hint {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.recording-cancel {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background 0.15s;
    flex-shrink: 0;
}
.recording-cancel:hover { background: rgba(241, 92, 109, 0.12); }
.recording-strip.slide-cancel {
    background: rgba(241, 92, 109, 0.08);
}
.recording-strip.slide-cancel .recording-hint {
    color: var(--danger);
    font-weight: 600;
}
.message-input-container.recording .input-actions,
.message-input-container.recording .input-field,
.message-input-container.recording .send-btn {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WEEK 4 — Push 6: VOICE PLAYER (WhatsApp-style)
   ═══════════════════════════════════════════════════════════════════
   DOM produced by `renderVoicePlayer()` in app.js:

   .bubble-voice
     .voice-player  [data-media-id, data-duration]
       .voice-play-btn
         .icon-play   ▶
         .icon-pause  ❚❚
       .voice-waveform
         .voice-waveform-bars    (grey background bars)
         .voice-waveform-played  (green overlay, clip-path animated)
         .voice-waveform-cursor  (small dot)
       .voice-time                0:23

   NOTE: No CSS transitions on the waveform or cursor. The VoicePlayer
   module updates them every animation frame (via requestAnimationFrame),
   which produces smooth motion at 60 fps. Adding CSS transitions on top
   causes every frame's update to interrupt the previous transition —
   which manifested as flickering/blinking of the played overlay.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────────── */
.bubble-voice {
    display: block;
    width: 100%;
    max-width: 340px;
    min-width: 240px;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Player row: button | waveform | time ────────────────────────── */
.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 2px;
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — Push 3: Read-receipt ticks
   ═══════════════════════════════════════════════════════════════════
   Rendered inside .msg-time for OWN messages only. Two states:

     ✓   grey  — sent (server received)
     ✓✓  blue  — read (recipient opened the message)

   The unicode glyphs are used directly (no SVG) so the DOM stays
   tiny and matches the rest of the app's minimal styling.
   ═══════════════════════════════════════════════════════════════════ */

/* Tick span — inline, right after the timestamp. */
.msg-tick {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);   /* grey — matches .msg-time */
    vertical-align: -1px;
    letter-spacing: -1.5px;       /* pull ✓✓ together */
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s ease;
}

/* Read state — WhatsApp blue. */
.msg-tick.read {
    color: #53bdeb;
}

/* ── Round play / pause button ───────────────────────────────────── */
.voice-play-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: none;
    background: var(--voice-play-btn);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    /* Only transition the background color — never the layout. */
    transition: background 0.15s;
}
.voice-play-btn:hover  { background: var(--voice-play-btn-hover); }
.voice-play-btn:active { transform: scale(0.94); }

/* Icon swap: ▶ by default; flip to ❚❚ when .is-playing. */
.voice-play-btn .icon-play  { display: block; }
.voice-play-btn .icon-pause { display: none; }

.voice-play-btn.is-playing .icon-play  { display: none; }
.voice-play-btn.is-playing .icon-pause { display: block; }

/* Uploading state (optimistic bubble) */
.bubble-voice.is-uploading .voice-play-btn {
    background: #b8b8b8;
    cursor: default;
    color: #f0f0f0;
}

/* ── Waveform container — the drag surface ───────────────────────── */
.voice-waveform {
    position: relative;
    flex: 1 1 auto;
    height: 30px;
    min-width: 0;
    cursor: pointer;
    /* Prevent iOS/Android from hijacking the horizontal drag. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Grey bars — the base layer. */
.voice-waveform-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.voice-waveform-bars span {
    flex: 1 1 auto;
    min-width: 2px;
    border-radius: 1px;
    background: var(--voice-bar-unplayed);
}

/* Green overlay — full width, clipped from the right via clip-path.
   NO CSS transition — the rAF loop in VoicePlayer drives 60 fps updates.
   clip-path is a compositor-friendly property here, and updating it
   directly is cheaper than interrupting a transition every 16 ms. */
.voice-waveform-played {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    width: 100%;
    clip-path: inset(0 100% 0 0);
}
.voice-waveform-played span {
    flex: 1 1 auto;
    min-width: 2px;
    border-radius: 1px;
    background: var(--voice-bar-played);
}

/* Cursor dot — also no CSS transition. */
.voice-waveform-cursor {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--voice-cursor);
    box-shadow: 0 0 0 2px #ffffff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.voice-waveform:hover .voice-waveform-cursor {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 168, 132, 0.25);
}

/* ── Time label ──────────────────────────────────────────────────── */
.voice-time {
    flex: 0 0 auto;
    min-width: 36px;
    font-size: 11.5px;
    color: var(--text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — Push 4: Reactions
   ═══════════════════════════════════════════════════════════════════
   Two surfaces:

     1. .reaction-picker  — a small horizontal emoji bar shown when
        the user clicks "React" in the message context menu.

     2. .msg-reactions    — the chip row rendered inside each bubble
        once at least one reaction exists.

   IMPORTANT: The picker is toggled via inline style.display
   (none ⇄ flex). CSS animations do NOT reliably replay on elements
   that were display:none when the animation was first applied — the
   element stays frozen at the animation's "from" keyframe (opacity 0).
   To avoid this trap we disable animations entirely on the picker and
   pin the resting state with !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The picker ──────────────────────────────────────────────────── */

.reaction-picker {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    z-index: 9999;

    /* Pin the resting state. Nothing can hide the picker once
       display flips to flex — no stuck keyframe, no override. */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}

/* ── Emoji buttons inside the picker ────────────────────────────── */

.reaction-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    font-family: inherit;
    transition: transform 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.reaction-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.2);
}
.reaction-btn:active {
    transform: scale(0.95);
}

/* ── The chip row inside a bubble ───────────────────────────────── */

.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 3px 0 2px;
    max-width: 100%;
}

.msg-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    transition: background 0.12s ease, border-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.msg-reaction-chip:hover {
    background: rgba(0, 0, 0, 0.10);
}
.msg-reaction-chip.mine {
    background: rgba(37, 211, 102, 0.15);
    border-color: rgba(37, 211, 102, 0.55);
}

.msg-reaction-chip .chip-emoji {
    font-size: 14px;
    line-height: 1;
}
.msg-reaction-chip .chip-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.msg-reaction-chip.mine .chip-count {
    color: var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — Push 6: Sidebar context menu
   ═══════════════════════════════════════════════════════════════════
   Reuses the `.msg-context-menu` visual language so both menus
   feel like the same component. Only the positioning + the row
   highlight are new.
   ═══════════════════════════════════════════════════════════════════ */

.conv-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 6px 0;
    min-width: 200px;
    z-index: 4100;               /* above the sidebar, below the message menu */
    animation: fadeIn 0.12s ease;
}

/* Row highlight — applied while its context menu is open. */
.conversation-item.ctx-open {
    background: var(--bg-tertiary);
}


/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — Push 6b: Sidebar filter tabs + badges
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tab strip below the search box ─────────────────────────────── */
.sidebar-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow-x: auto;
    flex-shrink: 0;
}

.sidebar-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 16px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.sidebar-tab:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}
.sidebar-tab.active {
    background: var(--primary);
    color: #ffffff;
}

/* Push the Archived tab to the far right. */
.sidebar-tab-archived {
    margin-left: auto;
}
.sidebar-tab-archived .tab-icon {
    font-size: 13px;
    line-height: 1;
}
.sidebar-tab-archived .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sidebar-tab-archived.active .tab-badge {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* ── Archived view: a small bar above the list ──────────────────── */
.archived-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.archived-bar .archived-back {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    font-family: inherit;
}
.archived-bar .archived-back:hover {
    color: var(--primary-dark);
}
.archived-bar .archived-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.archived-bar .archived-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Pin + mute badges in the sidebar row ───────────────────────── */
.conv-badge-icon {
    display: inline-block;
    margin-right: 3px;
    font-size: 12px;
    line-height: 1;
    vertical-align: -1px;
    opacity: 0.85;
}
.conv-badge-icon.pinned {
    /* Slight rotation so the pin looks "stuck in". */
    transform: rotate(-15deg);
    opacity: 0.9;
}
.conv-badge-icon.muted {
    opacity: 0.75;
}

/* ── Delete-chat warning modal ──────────────────────────────────── */
.dialog-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 22px 4px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.dialog-warning .warning-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.3;
}
.dialog-option-danger {
    color: var(--danger) !important;
}
.dialog-option-danger .dialog-option-icon {
    color: var(--danger) !important;
}
.dialog-option-danger:hover {
    background: rgba(241, 92, 109, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — Push 7 + Presence
   ═══════════════════════════════════════════════════════════════════
   Wrappers so the presence dot can be absolutely positioned over
   the avatar's bottom-right corner. Applies to both the sidebar
   row and the chat header.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Avatar wrapper (sidebar row) ───────────────────────────────── */
.conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 49px;
    height: 49px;
}
.conv-avatar-wrap img {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #ddd;
    display: block;
}

/* ── Avatar wrapper (chat header) ───────────────────────────────── */
.contact-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.contact-avatar-wrap img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    display: block;
}

/* ── The dot itself ─────────────────────────────────────────────── */
.presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    background: #b0b0b0;
    box-sizing: border-box;
    transition: background 0.15s ease;
    pointer-events: none;
}
.contact-avatar-wrap .presence-dot {
    width: 11px;
    height: 11px;
    border-color: var(--bg-tertiary);
}
.presence-dot.online  { background: #25D366; }
.presence-dot.offline { background: #b0b0b0; }

/* ── Chat header status text ────────────────────────────────────── */
#chatStatus.online  { color: var(--primary); }
#chatStatus.offline { color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 — In-chat search
   ═══════════════════════════════════════════════════════════════════ */

/* ── Right side of the chat header (search + tabs) ──────────────── */
.chat-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.chat-search-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

/* ── The search bar ─────────────────────────────────────────────── */
.chat-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    animation: slideUp 0.12s ease;
    flex-shrink: 0;
}

.chat-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 6px 14px;
}
.chat-search-input svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.chat-search-input input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    min-width: 0;
}
.chat-search-input input::placeholder {
    color: var(--text-secondary);
}

.chat-search-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}
.chat-search-count.empty {
    color: var(--danger);
}

.chat-search-nav {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.chat-search-nav:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

/* ── Highlight ──────────────────────────────────────────────────── */
/* Rendered inside .message p elements when a match is found. */
mark.cs-hit {
    background: #fff3a3;              /* WhatsApp-ish yellow */
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    /* Suppress the browser's default yellow; ours is better tuned. */
    color: #111b21;
}
mark.cs-hit.current {
    background: #ffb703;              /* Deeper orange for the active hit */
    outline: 2px solid rgba(255, 183, 3, 0.5);
    outline-offset: -1px;
}

/* ── Responsive: shrink the search bar on mobile ────────────────── */
@media (max-width: 768px) {
    .chat-search-bar { padding: 6px 8px; }
    .chat-search-count { min-width: 56px; font-size: 11px; }
    .chat-search-nav { width: 26px; height: 26px; font-size: 12px; }
    .chat-search-input { padding: 5px 10px; }
    .chat-search-input input { font-size: 13px; }
}


/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bubble-voice { min-width: 200px; max-width: 260px; }
    .voice-time   { font-size: 11px; min-width: 32px; }
}
@media (min-width: 1024px) {
    .bubble-voice { max-width: 360px; }
}