.ml-chats { width:100%; min-width:0; margin:24px 0; font:14px/1.45 Arial,sans-serif; color:#23384a; }
.ml-chats * { box-sizing:border-box; }
.ml-chats a { color:#366697; text-decoration:none; }
.ml-chats a:hover { text-decoration:underline; }
.ml-chats-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:14px; }
.ml-chats-toolbar h2 { font-size:24px; margin:0 auto 0 0; }
.ml-chats-layout { display:grid; grid-template-columns:minmax(240px, 34%) minmax(0, 1fr); height:640px; max-height:80vh; min-height:440px; border:1px solid #ccd8e3; border-radius:10px; overflow:hidden; background:#fff; }
.ml-chat-sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid #dce4eb; }
.ml-chat-sidebar-heading { padding:17px 15px; font-size:17px; font-weight:bold; border-bottom:1px solid #e4eaf0; }
.ml-chat-sidebar-heading span { display:block; font-size:12px; font-weight:normal; color:#758594; margin-top:3px; }
.ml-chat-contacts { flex:1; overflow-y:auto; min-height:0; }
.ml-chats .ml-chat-contact { display:flex; position:relative; align-items:center; gap:10px; padding:15px 12px; border-bottom:1px solid #edf0f4; color:inherit; text-decoration:none; }
.ml-chats .ml-chat-contact:hover { background:#f4f8fc; }
.ml-chats .ml-chat-contact.is-active { background:#e9f2fb; box-shadow:inset 3px 0 #366697; }
.ml-chat-avatar { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:#dce9f5; color:#366697; font-size:17px; font-weight:bold; text-transform:uppercase; }
.ml-chat-contact-body { flex:1; min-width:0; }
.ml-chat-contact-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 7px; }
.ml-chat-contact-top strong { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ml-chat-contact-top time { font-size:10px; color:#7b8793; white-space:nowrap; }
.ml-chat-preview { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#6b7884; margin-top:5px; }
.ml-chat-unread { background:#366697; color:white; border-radius:12px; padding:2px 6px; min-width:20px; text-align:center; font-size:11px; flex-shrink:0; }
.ml-chat-pagination { display:flex; gap:12px; align-items:center; justify-content:center; padding:10px; font-size:12px; }
.ml-chat-pagination:empty { display:none; }
.ml-chat-conversation { min-width:0; min-height:0; display:flex; flex-direction:column; background:#f5f7fa; }
.ml-chat-header { display:flex; align-items:center; gap:14px; padding:17px 20px; min-height:70px; border-bottom:1px solid #dce4eb; background:#fff; }
.ml-chat-header strong { flex:1; overflow-wrap:anywhere; }
.ml-chat-header a { font-size:12px; }
.ml-chat-back { display:none; }
.ml-chat-history { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.ml-chat-day { text-align:center; color:#83909d; font-size:11px; margin:6px 0; }
.ml-chat-message { align-self:flex-start; max-width:86%; background:white; border:1px solid #e0e6ee; border-radius:12px 12px 12px 2px; padding:10px 13px 7px; flex-shrink:0; overflow-wrap:anywhere; }
.ml-chat-message--mine { align-self:flex-end; background:#e4effb; border-color:#d4e4f6; border-radius:12px 12px 2px 12px; }
.ml-chat-subject { font-size:11px; color:#71849a; margin-bottom:5px; }
.ml-chat-text { white-space:normal; }
.ml-chat-time { display:block; text-align:right; color:#82909e; font-size:10px; margin-top:5px; }
.ml-chat-message-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-top:5px; }
.ml-chat-message-meta .ml-chat-time { margin:0; }
.ml-chat-ticks { display:inline-block; color:#8a929b; font-size:15px; font-weight:bold; line-height:18px; letter-spacing:-4px; padding-right:4px; cursor:default; }
.ml-chat-ticks.is-read { color:#218838; }
.ml-chat-ticks:focus { outline:1px dotted currentColor; }
.ml-chat-presence { font-size:11px; font-weight:normal; white-space:nowrap; }
.ml-chat-presence.is-online { color:#218838; }
.ml-chat-presence.is-offline { color:#c23d3d; }
.ml-chat-contact-name, .ml-chat-header-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; min-width:0; }
.ml-chat-header-name { flex:1; }
.ml-chat-header .ml-chat-header-name strong { flex:0 1 auto; }
.ml-chat-older { text-align:center; font-size:12px; }
.ml-chat-older a { margin:0 8px; display:inline-block; }
.ml-chats .ml-chat-compose { margin:0; padding:12px 16px; background:#fff; border-top:1px solid #dce4eb; }
.ml-chat-compose-label { display:block; font-size:12px; margin-bottom:6px; }
.ml-chat-compose-row { display:flex; align-items:flex-end; gap:10px; }
.ml-chats .ml-chat-compose textarea { flex:1; min-width:0; width:100%; margin:0; max-height:150px; min-height:60px; border:1px solid #cbd7e3; border-radius:7px; padding:10px; resize:vertical; font:14px/1.4 Arial,sans-serif; background:white; color:#23384a; }
.ml-chats .ml-chat-compose button { border:0; border-radius:6px; padding:12px 14px; background:#366697; color:white; cursor:pointer; font:14px Arial,sans-serif; }
.ml-chats .ml-chat-compose button:disabled { opacity:.6; cursor:wait; }
.ml-chat-placeholder { margin:auto; text-align:center; padding:25px; color:#81909e; }
.ml-chat-placeholder span { font-size:42px; }
.ml-chat-placeholder h3 { color:#486078; font-size:20px; }
.ml-chat-error { margin:10px; padding:10px; color:#983a34; background:#fff0ef; border-radius:5px; }
.ml-chat-empty, .ml-chat-system { padding:18px; color:#718191; }
@media(max-width:760px) {
  .ml-chats-layout { display:block; height:650px; max-height:85vh; min-height:400px; }
  .ml-chat-sidebar { height:100%; border:0; }
  .ml-chat-conversation { display:none; height:100%; }
  .ml-chats--selected .ml-chat-sidebar { display:none; }
  .ml-chats--selected .ml-chat-conversation { display:flex; }
  .ml-chat-back { display:inline; }
  .ml-chat-history { padding:12px; }
  .ml-chat-header { padding:14px 12px; }
  .ml-chat-message { max-width:94%; }
  .ml-chats .ml-chat-compose { padding:10px; }
  .ml-chat-compose-row { flex-wrap:wrap; }
  .ml-chats .ml-chat-compose textarea { flex-basis:100%; }
  .ml-chat-compose-row button { margin-left:auto; }
}