/* ── VendSoli Chat ───────────────────────────────────────────────────────── */

/* Layout */
.chat-app { padding:0!important; height:calc(100vh - 57px); overflow:hidden; display:flex; flex-direction:row; position:relative; }
.chat-layout { display:flex; height:100%; overflow:hidden; width:100%; position:relative; }

/* Sidebar */
.chat-sidebar { width:340px; min-width:280px; display:flex; flex-direction:column; background:#fff; border-right:1px solid #e2e8f0; flex-shrink:0; transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:20; }
.chat-sidebar.hidden { display:none; }
.chat-sidebar-tabs { display:flex; border-bottom:1px solid #e2e8f0; flex-shrink:0; }
.chat-tab { flex:1; padding:.85rem .5rem; background:none; border:none; font-size:.8rem; font-weight:600; color:#64748b; cursor:pointer; border-bottom:3px solid transparent; transition:all .2s; }
.chat-tab.active { color:#a855f7; border-bottom-color:#a855f7; }
.tab-panel { display:none; flex:1; overflow-y:auto; flex-direction:column; min-height:0; }
.tab-panel.active { display:flex; flex-direction:column; }

/* Sidebar search */
.sidebar-search { position:relative; padding:.75rem 1rem; flex-shrink:0; background:#fff; border-bottom:1px solid #f1f5f9; }
.sidebar-search-icon { position:absolute; left:1.75rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.8rem; pointer-events:none; }
.sidebar-search-input { width:100%; padding:.5rem .75rem .5rem 2.25rem; border:1.5px solid #e2e8f0; border-radius:20px; font-size:.85rem; background:#f1f5f9; outline:none; box-sizing:border-box; transition:border .2s,background .2s; }
.sidebar-search-input:focus { border-color:#a855f7; background:#fff; }

/* Conversation items */
.conv-item { display:flex; align-items:center; gap:.875rem; padding:.875rem 1rem; cursor:pointer; border-bottom:1px solid #f8fafc; transition:background .15s; min-height:68px; }
.conv-item:hover,.conv-item.active { background:#faf5ff; }
.conv-avatar { width:46px; height:46px; min-width:46px; border-radius:50%; background:linear-gradient(135deg,#a855f7,#10b981); color:#fff; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.conv-avatar.group-avatar { background:linear-gradient(135deg,#10b981,#a855f7); }
.conv-info { flex:1; min-width:0; }
.conv-name { font-weight:600; font-size:.9rem; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-last { font-size:.78rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv-meta { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.conv-time { font-size:.68rem; color:#94a3b8; }
.unread-badge { background:#a855f7; color:#fff; border-radius:999px; font-size:.68rem; font-weight:700; padding:2px 7px; min-width:20px; text-align:center; }
.conv-empty { text-align:center; padding:3rem 1.5rem; color:#94a3b8; font-size:.875rem; line-height:1.8; }
.conv-empty i { font-size:1.8rem; display:block; margin-bottom:.75rem; opacity:.35; }

/* Main area */
.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; background:#f0ebe8; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; gap:1rem; background:#f8fafc; }
.chat-empty-icon { font-size:3rem; opacity:.25; }
.chat-empty h3 { margin:0; font-size:1.1rem; color:#64748b; }
.chat-empty p { margin:0; font-size:.85rem; }

/* Chat window */
.chat-window { flex:1; display:flex; flex-direction:column; min-height:0; }

/* Header */
.chat-window-header { display:flex; align-items:center; gap:.875rem; padding:.875rem 1rem; background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(168,85,247,.25); }
.back-btn { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; padding:.25rem .5rem; display:none; min-width:36px; min-height:36px; align-items:center; justify-content:center; }
.chat-window-avatar { width:40px; height:40px; min-width:40px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.chat-window-info { flex:1; min-width:0; }
.chat-window-name { font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-window-sub { font-size:.75rem; opacity:.85; margin-top:1px; min-height:1em; }
.chat-action-btn { background:none; border:none; color:#fff; font-size:1rem; cursor:pointer; padding:.4rem; opacity:.8; }
.chat-action-btn:hover { opacity:1; }

/* Messages area */
.messages-area { flex:1; overflow-y:auto; padding:1rem .75rem; display:flex; flex-direction:column; gap:.25rem; scroll-behavior:smooth; background: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='%23a855f7' fill-opacity='0.03'%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"); }
.messages-area::-webkit-scrollbar { width:4px; }
.messages-area::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

/* Date divider */
.msg-date-divider { display:flex; align-items:center; justify-content:center; margin:.75rem 0 .5rem; }
.msg-date-divider span { background:rgba(255,255,255,.85); backdrop-filter:blur(4px); color:#64748b; font-size:.72rem; font-weight:600; padding:.25rem .75rem; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* System message */
.msg-system { text-align:center; font-size:.78rem; color:#a855f7; background:rgba(168,85,247,.08); border-radius:12px; padding:.4rem 1rem; margin:.5rem auto; max-width:80%; }

/* Message bubbles */
.message { display:flex; align-items:flex-end; gap:.5rem; max-width:75%; margin:.15rem 0; }
.message.sent { align-self:flex-end; flex-direction:row-reverse; }
.message.received { align-self:flex-start; }
.msg-avatar { width:28px; height:28px; min-width:28px; border-radius:50%; background:linear-gradient(135deg,#a855f7,#10b981); color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:2px; }
.msg-body { display:flex; flex-direction:column; gap:2px; }
.msg-sender { font-size:.7rem; font-weight:600; color:#a855f7; margin-left:4px; }
.msg-bubble { padding:.55rem .75rem; border-radius:18px; max-width:100%; word-break:break-word; line-height:1.45; cursor:context-menu; position:relative; }
.sent .msg-bubble { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(168,85,247,.3); }
.received .msg-bubble { background:#fff; color:#1e293b; border-bottom-left-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.msg-text { white-space:pre-wrap; }
.msg-text a { color:inherit; opacity:.85; }
.sent .msg-text a { color:#e9d5ff; }

/* Media */
.msg-img-wrap { margin:-.2rem -.4rem .25rem; border-radius:14px 14px 0 0; overflow:hidden; }
.msg-img { max-width:260px; max-height:300px; width:100%; display:block; cursor:pointer; object-fit:cover; }
.msg-video { max-width:260px; width:100%; border-radius:10px; }
.msg-audio { max-width:240px; width:100%; margin:.25rem 0; }
.msg-file { display:flex; align-items:center; gap:.5rem; padding:.5rem; background:rgba(255,255,255,.15); border-radius:8px; font-size:.82rem; text-decoration:none; color:inherit; }

/* Timestamp + ticks */
.msg-meta { display:flex; align-items:center; justify-content:flex-end; gap:.3rem; margin-top:.2rem; }
.msg-time { font-size:.65rem; opacity:.65; white-space:nowrap; }
.msg-ticks { font-size:.72rem; font-weight:700; line-height:1; }
.msg-ticks.sent      { color:rgba(255,255,255,.6); }
.msg-ticks.delivered { color:rgba(255,255,255,.85); }
.msg-ticks.read      { color:#a7f3d0; }
.received .msg-ticks { display:none; }

/* Reactions */
.msg-reactions { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.2rem; }
.msg-reaction { background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:.1rem .4rem; font-size:.8rem; cursor:pointer; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.msg-reaction:hover { transform:scale(1.15); }

/* Typing indicator */
.typing-indicator { display:inline-flex; align-items:center; gap:3px; }
.typing-indicator span { width:5px; height:5px; background:#10b981; border-radius:50%; animation:typing-bounce .8s infinite; }
.typing-indicator span:nth-child(2) { animation-delay:.15s; }
.typing-indicator span:nth-child(3) { animation-delay:.3s; }
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* Context menu */
.msg-ctx-menu { background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.15); min-width:160px; overflow:hidden; animation:fadeIn .12s ease; }
.msg-ctx-item { padding:.7rem 1rem; font-size:.85rem; cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:.5rem; }
.msg-ctx-item:hover { background:#faf5ff; }
.msg-ctx-item.danger { color:#ef4444; }
.msg-ctx-item.danger:hover { background:#fff5f5; }

/* Footer / input */
.chat-footer { background:#fff; padding:.625rem .875rem; border-top:1px solid #f1f5f9; flex-shrink:0; }
.image-preview { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.preview-item { position:relative; }
.preview-img { width:64px; height:64px; object-fit:cover; border-radius:10px; border:2px solid #e2e8f0; }
.preview-file { display:flex; align-items:center; gap:.4rem; background:#f1f5f9; border-radius:8px; padding:.35rem .6rem; font-size:.75rem; color:#475569; max-width:160px; overflow:hidden; }
.preview-remove { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#ef4444; color:#fff; border:none; cursor:pointer; font-size:.6rem; display:flex; align-items:center; justify-content:center; }
.message-input-row { display:flex; align-items:flex-end; gap:.5rem; }
.attach-btn { background:none; border:none; color:#94a3b8; font-size:1.1rem; cursor:pointer; padding:.4rem; flex-shrink:0; transition:color .2s; }
.attach-btn:hover { color:#a855f7; }
.message-input { flex:1; padding:.55rem .875rem; border:1.5px solid #e2e8f0; border-radius:22px; font-size:.9rem; resize:none; outline:none; max-height:120px; line-height:1.4; font-family:inherit; transition:border .2s; }
.message-input:focus { border-color:#a855f7; }
.send-btn { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; border:none; border-radius:50%; width:42px; height:42px; min-width:42px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; box-shadow:0 2px 8px rgba(168,85,247,.4); transition:transform .15s,box-shadow .15s; }
.send-btn:hover { transform:scale(1.07); box-shadow:0 4px 14px rgba(168,85,247,.5); }
.send-btn:disabled { opacity:.6; transform:none; cursor:not-allowed; }

/* Loading / toast */
.chat-loading-msgs { text-align:center; padding:2rem; color:#94a3b8; font-size:.875rem; }
.vs-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(12px); background:#1e293b; color:#fff; padding:.6rem 1.25rem; border-radius:10px; font-size:.875rem; font-weight:600; z-index:9999; box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:0; transition:opacity .25s,transform .25s; pointer-events:none; white-space:nowrap; }
.vs-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.vs-toast a { color:#a5f3fc; }
.vs-toast-error { background:#ef4444; }
.vs-toast-success { background:#10b981; }

/* ── Mobile (≤ 768px) ────────────────────────────────────────────────────── */
@media (max-width:768px) {
    /* Sidebar overlays full screen */
    .chat-sidebar {
        position:absolute;
        inset:0;
        width:100% !important;
        min-width:unset;
        height:100%;
        z-index:20;
        transform:translateX(0);
        display:flex !important;
    }
    /* Slide off-screen left — smooth transition, no display:none flicker */
    .chat-sidebar.hidden {
        display:flex !important;
        transform:translateX(-100%);
        pointer-events:none;
    }
    /* Main always full-width */
    .chat-main { width:100%; position:absolute; inset:0; }
    /* Show the back arrow in the chat header */
    .back-btn { display:flex !important; }
    /* Bigger touch targets */
    .conv-item { min-height:72px; padding:.9rem 1rem; }
    .conv-avatar { width:48px; height:48px; min-width:48px; }
    .chat-tab { padding:.9rem .5rem; }
    /* Wider bubbles */
    .message { max-width:88%; }
    .msg-img  { max-width:200px; }
    /* Safe-area inset for iOS home bar */
    .chat-footer { padding-bottom:max(.625rem, env(safe-area-inset-bottom)); }
    .send-btn { width:46px; height:46px; min-width:46px; }
}

/* ── Very small screens (≤ 380px) ────────────────────────────────────────── */
@media (max-width:380px) {
    .conv-name { font-size:.82rem; }
    .conv-last { font-size:.72rem; }
    .msg-bubble { font-size:.84rem; }
    .chat-action-btn:not(:last-child) { display:none; }
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
.dark-mode .chat-sidebar { background:#1e1e2e; border-color:#2d2d3e; }
.dark-mode .chat-tab { color:#94a3b8; }
.dark-mode .chat-tab.active { color:#c084fc; border-bottom-color:#c084fc; }
.dark-mode .conv-item:hover,.dark-mode .conv-item.active { background:#2d1b4e; }
.dark-mode .conv-name { color:#e2e8f0; }
.dark-mode .sidebar-search-input { background:#2d2d3e; border-color:#3d3d5e; color:#e2e8f0; }
.dark-mode .sidebar-search-input:focus { border-color:#c084fc; background:#1e1e2e; }
.dark-mode .received .msg-bubble { background:#2d2d3e; color:#e2e8f0; }
.dark-mode .messages-area { background:#1a1a2e; }
.dark-mode .chat-footer { background:#1e1e2e; border-color:#2d2d3e; }
.dark-mode .message-input { background:#2d2d3e; border-color:#3d3d5e; color:#e2e8f0; }
.dark-mode .message-input:focus { border-color:#c084fc; }
.dark-mode .msg-date-divider span { background:rgba(30,30,46,.9); color:#94a3b8; }
.dark-mode .msg-reaction { background:#2d2d3e; border-color:#3d3d5e; }
.dark-mode .msg-ctx-menu { background:#2d2d3e; }
.dark-mode .msg-ctx-item:hover { background:#1a1a2e; }
.dark-mode .vs-toast { background:#2d2d3e; }


/* === migrated from chat/index.html === */
.vs-modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        z-index: 9999; display: flex; align-items: center; justify-content: center;
    }
    .vs-modal-overlay .vs-modal {
        background: #fff; border-radius: 12px; padding: 1.5rem;
        width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .vs-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
    .vs-modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:#666; }
    .vs-modal h3 { margin:0; font-size:1.1rem; }
    .vs-modal label { display:block; font-size:0.85rem; font-weight:600; margin:0.75rem 0 0.25rem; }
    .vs-select { width:100%; }