/* ═══════════════════════════════════════════════════════════════
   PC WEB APP OVERHAUL, part 5: Messages page (Ren 2026-11-06).
   Desktop only (body.dx.dx-msg); phone unchanged. Logic: deskx6.js.
   ═══════════════════════════════════════════════════════════════ */
#dxMsgPage { display: none; }
body.dx.dx-msg { overflow: hidden !important; --dx6-l: calc(max(0px, (100vw - 1200px) / 2) + 24px); }
body.dx.dx-msg #dxMsgPage { display: block; position: fixed; left: 0; right: 0; top: var(--dx6-top, 184px); bottom: 0; z-index: 10003; background: var(--dx-bg); font-family: Inter, sans-serif; }
#dxMsgPage .dx6-in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 20px 24px; box-sizing: border-box; display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; gap: 16px; }
#dxMsgPage .dx6-list { grid-column: 1; }
#dxMsgPage .dx6-empty { grid-column: 2; background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dx-mut); text-align: center; }
#dxMsgPage .dx6-empty span { width: 72px; height: 72px; border-radius: 50%; background: #e5f5e8; color: var(--dx-g); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
#dxMsgPage .dx6-empty b { font-size: 18px; color: var(--dx-ink); }
#dxMsgPage .dx6-empty p { margin: 0; font-size: 14px; }
#dxMsgPage .dx6-side { grid-column: 3; background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 14px; padding: 24px 20px; display: none; flex-direction: column; align-items: center; text-align: center; gap: 4px; align-self: start; color: var(--dx-ink); }
#dxMsgPage .dx6-side.on { display: flex; }
#dxMsgPage .dx6-av { width: 84px; height: 84px; border-radius: 50%; background: #e6f0fc; color: #1f6fd1; font: 800 30px Inter, sans-serif; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; text-transform: uppercase; }
#dxMsgPage .dx6-nm { font-size: 18px; word-break: break-all; }
#dxMsgPage .dx6-side small { color: var(--dx-mut); font-size: 13px; }
#dxMsgPage .dx6-vp { width: 100%; margin: 14px 0 6px; background: transparent; border: 1.5px solid var(--dx-g); color: var(--dx-g); border-radius: 10px; padding: 10px; font: 700 14px Inter, sans-serif; cursor: pointer; }
#dxMsgPage .dx6-vp:hover { background: #e5f5e8; }
#dxMsgPage .dx6-row { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dx-line); font-size: 13.5px; text-align: left; }
#dxMsgPage .dx6-row span { color: var(--dx-mut); }
#dxMsgPage .dx6-row b { text-align: right; }
#dxMsgPage .dx6-note { width: 100%; box-sizing: border-box; margin-top: 12px; background: #f1f6f2; border-radius: 10px; padding: 12px; font-size: 12.5px; color: var(--dx-mut); text-align: left; display: flex; gap: 8px; align-items: flex-start; }
body.dx.dark-mode #dxMsgPage .dx6-note { background: rgba(255, 255, 255, .05); }
@media (max-width: 1180px) {
  #dxMsgPage .dx6-in { grid-template-columns: 300px minmax(0, 1fr); }
  #dxMsgPage .dx6-side { display: none !important; }
}

/* the real list and conversation, placed over the columns */
body.dx.dx-msg #chatContactsPanel {
  display: flex !important; position: fixed !important; left: var(--dx6-l) !important; right: auto !important; width: 320px !important;
  top: calc(var(--dx6-top, 184px) + 20px) !important; bottom: 20px !important; max-height: none !important;
  border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--dx-line) !important; animation: none !important;
}
body.dx.dx-msg #chatContactsPanel .chat-contacts-header { background: var(--dx-card) !important; color: var(--dx-ink) !important; border-bottom: 0 !important; padding: 18px 18px 8px !important; }
body.dx.dx-msg #chatContactsPanel .chat-contacts-header h4 { color: var(--dx-ink) !important; font: 800 20px Outfit, Inter, sans-serif !important; letter-spacing: -.3px; }
body.dx.dx-msg #chatContactsPanel .chat-contacts-header h4 .lucide-ico, body.dx.dx-msg #chatContactsPanel .cc-chats-hbtns { display: none !important; }
body.dx.dx-msg #chatContactsPanel .chat-contacts-search { display: block !important; background: var(--dx-card) !important; border: 0 !important; padding: 4px 14px 10px !important; }
body.dx.dx-msg #chatContactsPanel .chat-contacts-search input { border-radius: 10px !important; padding: 11px 14px !important; font-size: 14px !important; background: #f1f4f2 !important; border: 0 !important; color: var(--dx-ink) !important; }
body.dx.dx-msg #chatContactsPanel .chat-contacts-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none !important; padding: 0 6px 10px !important; }

body.dx.dx-msg #chatboxPanel.open {
  display: flex !important; position: fixed !important; left: calc(var(--dx6-l) + 336px) !important; right: calc(var(--dx6-l) + 316px) !important;
  width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; transform: none !important;
  top: calc(var(--dx6-top, 184px) + 20px) !important; bottom: 20px !important;
  border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--dx-line) !important; animation: none !important;
}
@media (max-width: 1180px) { body.dx.dx-msg #chatboxPanel.open { right: var(--dx6-l) !important; left: calc(var(--dx6-l) + 316px) !important; } body.dx.dx-msg #chatContactsPanel { width: 300px !important; } }
body.dx.dx-msg #chatboxPanel .chatbox-back-btn,
body.dx.dx-msg #chatboxPanel .chat-expand-toggle-btn,
body.dx.dx-msg #chatboxPanel [onclick="minimizeChat()"],
body.dx.dx-msg #chatboxBackdrop, body.dx.dx-msg #chatFab, body.dx.dx-msg #chatBubble { display: none !important; }
/* light conversation header, like the samples */
body.dx.dx-msg #chatboxPanel .chatbox-header { background: var(--dx-card) !important; border-bottom: 1px solid var(--dx-line) !important; padding: 14px 18px !important; }
body.dx.dx-msg #chatboxPanel .chatbox-name { color: var(--dx-ink) !important; font-size: 16px !important; }
body.dx.dx-msg #chatboxPanel .chatbox-status { color: var(--dx-g) !important; font-size: 12.5px !important; }
body.dx.dx-msg #chatboxPanel .chatbox-avatar { width: 44px !important; height: 44px !important; background: #e6f0fc !important; color: #1f6fd1 !important; font-size: 17px !important; }
body.dx.dx-msg #chatboxPanel .chatbox-header .chatbox-action-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #f1f4f2 !important; color: var(--dx-ink) !important; border: 0 !important; }
body.dx.dx-msg #chatboxPanel .chatbox-header .chatbox-call-btn { background: #e5f5e8 !important; color: var(--dx-g) !important; }
body.dx.dx-msg #chatboxPanel .chatbox-header .chatbox-action-btn .lucide-ico { width: 17px !important; height: 17px !important; }
body.dx.dx-msg #chatboxPanel .chatbox-messages { background: #f6f8f7 !important; }
body.dx.dark-mode.dx-msg #chatboxPanel .chatbox-messages { background: transparent !important; }
body.dx.dark-mode.dx-msg #chatContactsPanel .chat-contacts-search input { background: rgba(255,255,255,.06) !important; }