/* =================================================================
   Chat Page — System-aligned redesign
   Brand:  #0f172a (slate)  |  #16a34a (green)  |  #2563eb (blue)
   Palette scoped to this stylesheet only — does not touch the shared
   app theme (main-theme.css), so no other page is affected.
   ================================================================= */

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
    --brand:      #0f172a;
    --brand-dark: #0a0f1c;
    --accent:     #2563eb;
    --accent-dk:  #1d4ed8;
    --success:    #16a34a;
    --success-dk: #15803d;
    --surface:    #ffffff;
    --bg:         #f3f4f8;
    --border:     #e4e6eb;
    --text-main:  #1e1f26;
    --text-sub:   #6b7280;
    --text-light: #a0aab4;
    --wa:         #25d366;
    --fb:         #1877f2;
    --ig-grad:    linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    --viber:      #665cac;
    --email:      #e74c3c;
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
}

/* ── Layout ────────────────────────────────────────────────────── */
.chat-page-wrapper {
    background: var(--bg);
    min-height: calc(100vh - 120px);
    padding: 0;
}

.chat-page-container {
    display: flex;
    height: calc(100vh - 120px);
    margin: 0;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   LEFT PANEL
   ═══════════════════════════════════════════════════════ */
.chat-list-panel {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 0 !important;
}

/* Header */
.chat-list-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 14px 12px;
    flex-shrink: 0;
}

.clh-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.clh-title i { font-size: 16px; color: var(--brand); }

.inbox-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
    animation: pulse 1.6s ease-in-out infinite;
}

/* Search */
.chat-search-box {
    position: relative;
    margin-bottom: 10px;
}

.chat-search-box .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sub);
    font-size: 13px;
    z-index: 1;
}

.chat-search-box input.form-control {
    padding-left: 32px !important;
    height: 34px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    font-size: 13px;
    background: var(--bg);
    color: var(--text-main) !important;
}

.chat-search-box input.form-control::placeholder { color: var(--text-light); }

.chat-search-box input.form-control:focus {
    background: var(--surface) !important;
    border-color: var(--brand) !important;
    box-shadow: none !important;
    outline: none;
}

/* Filter tabs */
.chat-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 13px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-sub);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
    outline: none;
}

/* Channel filters are round icon buttons; only "All" keeps a text pill. */
.filter-btn:not(.filter-btn-all) {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    position: relative;
}

.filter-btn i { font-size: 13px; }

.filter-btn:hover {
    background: var(--surface);
    border-color: var(--text-light);
}

.filter-btn.active {
    color: #fff !important;
    border-color: transparent !important;
}
.filter-btn-all.active     { background: var(--brand) !important; }
.filter-btn-whatsapp.active  { background: var(--wa) !important; }
.filter-btn-facebook.active  { background: var(--fb) !important; }
.filter-btn-instagram.active { background: var(--ig-grad) !important; }
.filter-btn-agent.active     { background: var(--accent) !important; }

/* Tint the icon by channel even when inactive, so the row reads as colorful at a glance */
.filter-btn-whatsapp  i { color: var(--wa); }
.filter-btn-facebook  i { color: var(--fb); }
.filter-btn-instagram i { color: #cc2366; }
.filter-btn-agent     i { color: var(--brand); }
.filter-btn.active i { color: #fff; }

.agent-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 10px;
    min-width: 14px;
    line-height: 14px;
    text-align: center;
    border: 1.5px solid var(--surface);
}

.filter-btn.active .agent-count-badge { background: #fff; color: var(--accent); }

/* ─── Pending Section ─────────────────────────────────────────── */
.pending-section {
    flex-shrink: 0;
    border-bottom: 2px solid var(--border);
}

.pending-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: background .2s;
}

.pending-header:hover {
    background: var(--bg);
}

.pending-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pending-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    font-size: 13px;
}

.pending-icon-wrap.has-items { animation: pulse 1.6s ease-in-out infinite; color: var(--accent); }

.pending-label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.pending-chevron { color: var(--text-sub); font-size: 11px; }

.pending-count-pill {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 22px;
    text-align: center;
}

.pending-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phr-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s;
    color: #fff;
}

.phr-btn:hover { transform: scale(1.12); }

.phr-accept { background: #27ae60; }
.phr-reject { background: #e74c3c; }

/* Pending list */
.pending-list {
    max-height: 380px;
    overflow-y: auto;
    background: #f8fafc;
}

.pending-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-sub);
    background: #f8fafc;
}

.pending-empty i { color: var(--brand); opacity: .5; font-size: 15px; }

.pending-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    transition: background .15s;
    animation: fadeInDown .25s ease;
}

.pending-item:hover { background: #eef2f7; }
.pending-item:last-child { border-bottom: none; }

.pi-avatar {
    position: relative;
    margin-right: 12px;
    flex-shrink: 0;
}

.pi-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand);
}

.pi-channel-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    border: 1.5px solid #fff;
    background: var(--brand);
}

.pi-channel-dot.whatsapp  { background: var(--wa); }
.pi-channel-dot.facebook  { background: var(--fb); }
.pi-channel-dot.instagram { background: var(--ig-grad); }
.pi-channel-dot.viber     { background: var(--viber); }
.pi-channel-dot.email     { background: var(--email); }

.pi-body {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.pi-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
}

.pi-time {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 400;
}

.pi-msg {
    font-size: 12px;
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 3px;
}

.pi-phone { font-size: 11px; color: var(--text-sub); }
.pi-phone i { margin-right: 4px; color: #27ae60; }

.pi-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.pia-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.pia-btn:hover { transform: scale(1.12); }

.pia-accept { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.pia-accept:hover { box-shadow: 0 3px 10px rgba(39,174,96,.4); }

.pia-reject { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.pia-reject:hover { box-shadow: 0 3px 10px rgba(231,76,60,.4); }

/* ─── Chat List Body ──────────────────────────────────────────── */
.chat-list-body {
    flex: 1;
    overflow: hidden;
}

.no-chats-message {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-light);
}

.no-chats-message i { display: block; margin-bottom: 12px; }

.no-chats-message p { font-size: 13px; margin: 0; }

/* Chat item */
.chat-list-item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
    position: relative;
}

.chat-list-item:hover { background: #f1f5f9; }

.chat-list-item.active {
    background: #eef2f7;
    border-left: 3px solid var(--brand);
}

.chat-list-item.unread { background: #f8fafc; }
.chat-list-item.unread .chat-name { font-weight: 700; }

/* Avatar */
.chat-avatar {
    position: relative;
    margin-right: 11px;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.chat-list-item.active .chat-avatar img { border-color: var(--brand); }

.status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--text-light);
}

.status-indicator.online { background: #2ecc71; }
.status-indicator.offline { background: var(--text-light); }

.channel-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    background: var(--brand);
    border: 1.5px solid #fff;
}

.channel-badge.whatsapp  { background: var(--wa); }
.channel-badge.facebook  { background: var(--fb); }
.channel-badge.instagram { background: var(--ig-grad); }
.channel-badge.viber     { background: var(--viber); }
.channel-badge.email     { background: var(--email); }
.channel-badge.internal  { background: var(--accent); }

/* Chat info */
.chat-info { flex: 1; min-width: 0; overflow: hidden; }

.chat-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time { font-size: 10px; color: var(--text-light); flex-shrink: 0; margin-left: 6px; }

.chat-preview {
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-msg { color: var(--text-light); font-style: italic; }

/* Agent status */
.agent-status-label {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    text-transform: capitalize;
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 6px;
}

.agent-status-label.online,
.agent-status-label.Available   { background: #27ae60; color: #fff; }
.agent-status-label.offline,
.agent-status-label.NotAvailable{ background: var(--text-light); color: #fff; }
.agent-status-label.busy,
.agent-status-label.Busy        { background: #e74c3c; color: #fff; }

/* Agent actions */
.chat-list-item.agent-item { cursor: default; }

.agent-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .25s ease;
}

.chat-list-item.agent-item:hover .agent-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-agent-action {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    transition: background .15s, transform .15s;
}

.btn-agent-action:hover {
    background: var(--accent);
    transform: scale(1.1);
}

/* Badges */
.chat-badges { margin-left: 8px; flex-shrink: 0; }

.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════
   RIGHT PANEL — Conversation
   ═══════════════════════════════════════════════════════ */
.chat-conversation-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding: 0 !important;
}

/* Empty state */
.no-chat-selected {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state { text-align: center; color: var(--text-sub); }

.empty-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    opacity: .25;
}

.empty-icon-wrap i { font-size: 36px; color: #fff; }

.empty-state h3 { font-size: 18px; color: var(--text-main); font-weight: 600; margin-bottom: 6px; }
.empty-state p  { font-size: 13px; color: var(--text-sub); margin: 0; }

/* Conversation layout */
.chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.header-left { display: flex; align-items: center; gap: 12px; }

.user-avatar { position: relative; }

.user-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--text-light);
}

.status-dot.online { background: #2ecc71; }

.user-info h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.user-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.user-status-txt { font-size: 12px; color: #2ecc71; }
.user-status-txt.offline { color: var(--text-light); }

.channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #fff;
    background: var(--brand);
}

.channel-pill.whatsapp  { background: var(--wa); }
.channel-pill.facebook  { background: var(--fb); }
.channel-pill.instagram { background: var(--ig-grad); }
.channel-pill.viber     { background: var(--viber); }
.channel-pill.email     { background: var(--email); }
.channel-pill.internal  { background: var(--accent); }

/* Header buttons */
.header-right { display: flex; align-items: center; gap: 8px; }

.hdr-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}

.hdr-btn:hover {
    background: var(--brand);
    color: #fff;
    transform: scale(1.08);
}

.hdr-btn-end:hover { background: #e74c3c; }

/* Message body */
.conversation-body {
    flex: 1;
    padding: 18px 20px;
    overflow-y: auto;
    background: var(--bg);
}

.loading-messages { padding: 30px; color: var(--text-sub); text-align: center; }
.loading-messages i { color: var(--brand); }

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
    color: var(--text-sub);
    cursor: pointer;
    transition: all .15s;
    margin-bottom: 16px;
}

.btn-load-more:hover { border-color: var(--brand); color: var(--brand); }

/* Date separator */
.date-separator { text-align: center; margin: 18px 0; }

.date-separator span {
    background: var(--border);
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-sub);
}

/* System message */
.system-message {
    text-align: center;
    margin: 12px 0;
    font-size: 12px;
    color: var(--text-sub);
    font-style: italic;
}

.system-message i { margin-right: 4px; }

/* Messages */
.message {
    display: flex;
    margin-bottom: 14px;
    max-width: 72%;
}

.message.sent     { margin-left: auto; justify-content: flex-end; }
.message.received { margin-right: auto; }

.message-avatar { margin-right: 8px; flex-shrink: 0; }

.message-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.message-content { max-width: 100%; }

.message-bubble {
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}

.message.sent .message-bubble {
    /* WhatsApp's actual sent-bubble color is pale green with dark text — a solid vivid
       green with white text (the previous attempt) doesn't have enough contrast to read. */
    background: #D9FDD3;
    color: #111b21;
    border-bottom-right-radius: 4px;
}
.message.sent .msg-doc-icon { background: rgba(0,0,0,.08); color: #128C7E; }

.message.received .message-bubble {
    background: var(--surface);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.message-bubble.fallback {
    background: #f0f0f0;
    color: var(--text-sub);
    font-size: 11px;
}

/* Loading state while an incoming WA attachment is fetched + saved to fileservice */
.msg-media-loading {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; opacity: .8; padding: 4px 2px;
    min-width: 160px;
}
.msg-media-loading .fa-spinner { font-size: 13px; }

/* ── Media in message bubbles ── */
.msg-media { margin: -2px 0; }
.msg-media-img {
    max-width: 240px; max-height: 280px; width: 100%;
    border-radius: 12px; display: block; cursor: zoom-in; object-fit: cover;
}
.msg-media-audio { width: 240px; max-width: 100%; display: block; }

.msg-video-thumb { position: relative; display: inline-block; cursor: pointer; border-radius: 12px; overflow: hidden; }
.msg-video-thumb .msg-media-video { max-width: 260px; width: 100%; border-radius: 12px; display: block; background: #000; pointer-events: none; }
.msg-video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; padding-left: 3px;
}
.msg-video-thumb:hover .msg-video-play { background: rgba(0,0,0,.75); }

/* Document card */
.msg-doc {
    display: flex; align-items: center; gap: 10px;
    min-width: 210px; max-width: 280px; padding: 4px 2px;
    text-decoration: none; color: inherit; cursor: pointer;
}
.msg-doc:hover .msg-doc-name { text-decoration: underline; }
.msg-doc-icon {
    width: 40px; height: 40px; border-radius: 9px;
    background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 18px;
}
.message.received .msg-doc-icon { background: rgba(15,23,42,.08); color: var(--brand); }
.msg-doc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-doc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-doc-sub { font-size: 10.5px; opacity: .8; }
.msg-doc-dl { font-size: 14px; opacity: .85; flex-shrink: 0; }

/* ── Media lightbox modal ── */
.media-modal-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(20, 12, 28, .78);
    display: flex; align-items: center; justify-content: center;
    padding: 30px; animation: mmFade .18s ease;
}
@keyframes mmFade { from { opacity: 0; } to { opacity: 1; } }
.media-modal {
    background: var(--surface); border-radius: var(--radius-md);
    max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: mmZoom .2s ease;
}
@keyframes mmZoom { from { transform: scale(.94); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.media-modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
}
.media-modal-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-modal-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mm-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; text-decoration: none; transition: background .15s;
}
.mm-btn:hover { background: rgba(255,255,255,.35); color: #fff; }
.media-modal-body {
    padding: 14px; overflow: auto;
    display: flex; align-items: center; justify-content: center; background: #f4f1f7;
}
.mm-img   { max-width: 84vw; max-height: 78vh; border-radius: 6px; display: block; }
.mm-video { width: min(88vw, 900px); height: auto; max-height: 80vh; border-radius: 6px; background: #000; }
.mm-audio { width: min(70vw, 420px); }
.mm-frame { width: 82vw; height: 80vh; border: none; background: #fff; }
.mm-doc-fallback { text-align: center; padding: 30px 24px; color: var(--text-sub); }
.mm-doc-fallback > i { font-size: 56px; color: var(--brand); margin-bottom: 12px; display: block; }
.mm-doc-name { font-size: 14px; font-weight: 600; color: var(--text-main); margin: 0 0 4px; word-break: break-word; }
.mm-doc-hint { font-size: 12px; margin: 0 0 14px; }
.mm-loading { text-align: center; padding: 40px 24px; color: var(--text-sub); }
.mm-loading .fa-spinner { color: var(--brand); margin-bottom: 10px; }

.message-meta {
    display: flex;
    align-items: center;
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-light);
    gap: 4px;
}

.message.sent .message-meta     { justify-content: flex-end; }
.message.received .message-meta { justify-content: flex-start; margin-left: 4px; }

.msg-status.seen i { color: var(--brand); }

/* Typing */
.typing-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background: var(--text-light);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -.32s; }
.typing-dots span:nth-child(2) { animation-delay: -.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1); }
}

/* ─── Footer / Input ──────────────────────────────────────────── */
.conversation-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    flex-shrink: 0;
}

/* Quick replies */
.quick-replies {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 8px;
}

.qr-close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px;
}

.qr-list { display: flex; flex-wrap: wrap; gap: 6px; }

.qr-item {
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    color: var(--text-main);
}

.qr-item:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* Input area */
.message-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mia-left, .mia-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.mia-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
}

.mia-icon-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.mia-input { flex: 1; }

.chat-input.form-control {
    border-radius: 22px !important;
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px;
    border: 1px solid var(--border) !important;
    transition: border-color .2s !important;
}

.chat-input.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}

.btn-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 3px 10px rgba(15,23,42,.35);
    flex-shrink: 0;
}

.btn-send:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(238,67,126,.45);
}

/* File preview */
.file-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 7px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.fp-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); }
.fp-info i { color: var(--brand); }
.fp-actions { display: flex; gap: 6px; }

/* Upload progress */
.upload-progress { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════
   THIRD PANEL — Profile
   ═══════════════════════════════════════════════════════ */
.profile-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 0 !important;
    animation: slideInPanel .25s ease;
}

@keyframes slideInPanel {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.profile-panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.profile-panel-header h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-main); }
.profile-panel-header h4 i { margin-right: 8px; color: var(--brand); }

.pph-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s, transform .2s;
}

.pph-close:hover { background: var(--brand); color: #fff; transform: rotate(90deg); }

.profile-panel-body { flex: 1; padding: 0 0 8px; overflow-y: auto; }

/* ── Hero card ── */
.profile-hero {
    position: relative;
    text-align: center;
    padding: 0 18px 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.profile-cover {
    height: 78px;
    margin: 0 -18px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-top: -46px;
}

.profile-avatar-large {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface);
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(15,23,42,.28);
    display: block;
}

.profile-presence {
    position: absolute;
    right: 6px;
    bottom: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: #b6b6c2;
}
.profile-presence.online  { background: #2ecc71; }
.profile-presence.offline { background: #b0b6bf; }

.profile-name {
    margin: 10px 0 2px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.profile-subline {
    font-size: 12.5px;
    color: var(--text-sub);
    margin-bottom: 10px;
    letter-spacing: .2px;
}

.profile-badges {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.profile-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 16px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.profile-status-badge.online  { background: rgba(46,204,113,.14); color: #1e8e4f; }
.profile-status-badge.offline { background: rgba(127,140,141,.16); color: #6b7280; }

.profile-channel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 16px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #fff;
    background: var(--brand);
}
.profile-channel.whatsapp  { background: linear-gradient(135deg, #25D366, #128C7E); }
.profile-channel.facebook  { background: linear-gradient(135deg, #1877F2, #0d5bbd); }
.profile-channel.instagram { background: var(--ig-grad); }
.profile-channel.viber     { background: linear-gradient(135deg, #665cac, #574e94); }
.profile-channel.email     { background: linear-gradient(135deg, #3498db, #2980b9); }

/* ── Quick actions ── */
.profile-quick-actions {
    display: flex;
    gap: 8px;
    padding: 0 18px;
    margin-bottom: 18px;
}
.pqa-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.pqa-btn i { font-size: 15px; }
.pqa-btn:hover {
    background: #fff;
    border-color: var(--brand);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--brand-dark);
}

/* Primary quick actions (Video Call / Create Ticket) — solid horizontal pills */
.pqa-btn-primary {
    flex-direction: row;
    gap: 7px;
    padding: 11px 8px;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-size: 12.5px;
}
.pqa-btn-primary i { font-size: 14px; }
.pqa-btn-primary:hover {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
    color: #fff;
}
.pqa-btn-primary[disabled] {
    background: var(--text-light);
    border-color: var(--text-light);
    color: #fff;
    cursor: not-allowed;
    opacity: .7;
}
.pqa-btn-primary[disabled]:hover {
    background: var(--text-light);
    border-color: var(--text-light);
    transform: none;
}

/* ── Section title ── */
.profile-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-light);
    padding: 0 18px;
    margin: 0 0 8px;
}

/* ── Information rows ── */
.profile-details-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: 0 18px 16px;
    overflow: hidden;
}

.profile-detail-item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.profile-detail-item:last-child { border-bottom: none; }
.profile-detail-item:hover { background: var(--bg); }

.detail-icon {
    width: 34px;
    height: 34px;
    background: rgba(15,23,42,.08);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.detail-icon i { color: var(--brand); font-size: 14px; }

.detail-content { flex: 1; min-width: 0; }

.detail-label {
    font-size: 10px;
    color: var(--text-sub);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

.detail-value { font-size: 13px; color: var(--text-main); font-weight: 500; word-break: break-word; }

/* ── Secondary details (Email, Roles, ...) — plain rows, no icon box ── */
.profile-plain-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 18px;
    margin-bottom: 16px;
}
.profile-plain-item .detail-label { margin-bottom: 3px; }

/* ── Tags ── */
.profile-tags-wrap { padding: 0 18px; }
.profile-tag {
    display: inline-block;
    background: rgba(15,23,42,.08);
    color: var(--brand);
    padding: 4px 11px;
    border-radius: 14px;
    font-size: 11px;
    margin: 0 4px 5px 0;
    font-weight: 600;
}

.profile-panel-footer {
    padding: 14px 18px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.ppf-loading {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; opacity: .8; padding: 6px 2px;
}

.ppf-btn {
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    transition: transform .15s, box-shadow .15s !important;
    border: none !important;
}

.ppf-btn:hover { transform: translateY(-1px); }

.ppf-btn.btn-success {
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}

.ppf-btn.btn-primary {
    background: linear-gradient(135deg, var(--brand), #334155) !important;
}

/* 3-col transition */
.chat-list-panel,
.chat-conversation-panel { transition: all .3s ease; }

/* Social inbox badge (left menu) */
.social-inbox-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Pop-out button on chat list items */
.btn-popout {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    margin-top: 4px;
    padding: 0;
}

.chat-list-item:hover .btn-popout {
    display: flex;
}

.btn-popout:hover {
    background: var(--accent);
    transform: scale(1.12);
}

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.06); opacity: .85; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .profile-open .chat-list-panel { display: none; }
    .profile-open .chat-conversation-panel { width: 50% !important; }
    .profile-open .profile-panel { width: 50% !important; }
}

@media (max-width: 991px) {
    .chat-page-container {
        flex-direction: column;
        height: auto;
    }

    .chat-list-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 42vh; }
    .chat-conversation-panel { min-height: 58vh; }
    .message { max-width: 86%; }
}

@media (max-width: 767px) {
    .chat-list-header { padding: 12px; }
    .conversation-header { padding: 10px 14px; }
    .conversation-body { padding: 12px; }
    .conversation-footer { padding: 10px 12px; }
    .message { max-width: 90%; }
    .filter-btn { padding: 3px 9px; font-size: 10px; }
}