/* Messenger floating-window mode (desktop only). * * On screens ≥768 px the messenger opens as a non-modal, draggable, * resizable floating window. The page underneath stays fully interactive * (no backdrop, no pointer-events block, body scroll restored). On * smaller screens we leave the existing Materialize full-screen modal * behaviour completely alone. * * `.floating` is added by chat.js once Materialize's open animation * finishes. The same JS: * - removes the inline body overflow lock Materialize writes * - kills the .modal-overlay element with display:none (inline) * - clears Materialize's inline top/left/transform on #message_box * - calls jQuery UI .draggable() + .resizable() * * IMPORTANT: positioning + sizing rules in here MUST NOT use !important. * jQuery UI writes its drag/resize results as plain inline styles, and * CSS !important would beat them every frame, pinning the window. */ @media (min-width: 768px) { /* Belt-and-suspenders: even though chat.js hides the overlay via an * inline display:none on the actual element, this rule covers the * case where Materialize injects a *new* overlay (e.g. when the * conversation view re-runs modal init). */ body.has-floating-messenger .modal-overlay { display: none !important; } /* These !important rules ARE needed — Materialize's modal CSS sets * these and we have to win the cascade. None of them are values * jQuery UI ever writes to the element. */ #message_box.floating { position: fixed; margin: 0 !important; max-width: none !important; max-height: none !important; transform: none !important; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12); z-index: 1100; overflow: hidden; /* Default fallback if JS hasn't applied an initial inline rect yet * — these are plain (no !important) so jQuery UI can override. */ top: 80px; left: auto; right: 24px; bottom: auto; width: 425px; height: 640px; min-width: 320px; min-height: 360px; } /* The header bar doubles as the drag handle. Cursor hint + suppress * accidental text selection while dragging. */ #message_box.floating .msg_header { cursor: move; user-select: none; } /* jQuery UI resizable handles. Default handles are invisible 7×7 px * tiles — make the SE corner visibly grabable. */ #message_box.floating .ui-resizable-handle { background: transparent; } #message_box.floating .ui-resizable-se { width: 16px; height: 16px; right: 2px; bottom: 2px; cursor: nwse-resize; background-image: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.18) 60%, transparent 60%, transparent 75%, rgba(0,0,0,0.18) 75%, rgba(0,0,0,0.18) 85%, transparent 85%); } #message_box.floating .ui-resizable-n, #message_box.floating .ui-resizable-s { height: 8px; } #message_box.floating .ui-resizable-e, #message_box.floating .ui-resizable-w { width: 8px; } /* While the user is actively dragging or resizing, suppress text * selection inside message content so a drag doesn't accidentally * select message text. */ body.messenger-dragging { user-select: none; -webkit-user-select: none; } body.messenger-dragging #message_box .msg_container, body.messenger-dragging #message_box .chat_body_content { pointer-events: none; } /* Container query target: at narrow floating-window widths, the chat * header used to wrap the "Admin" badge, the contact name, the "Video * Call" label, and the "Last Active" line one character per line. We * hide the inline toolbar label and trim padding so everything fits. */ #message_box.floating { container-type: inline-size; container-name: dtmsgbox; } @container dtmsgbox (max-width: 520px) { #message_box.floating .chat_conversations .chat_toolbar .dt-toolbar-label { display: none; } #message_box.floating .chat_conversations .chat_toolbar .dt-toolbar-action { padding: 0 4px; } #message_box.floating .chat_conversations .chat_header { padding: 6px 8px; min-height: 56px; } #message_box.floating .chat_conversations .chat_participant .c_avatar { width: 32px; min-width: 32px; height: 32px; margin-right: 6px; } } } /* Chat-conversation header truncation — always on. Without min-width:0 on * the flex children, the contact name + "Admin" badge + "Last Active" line * cannot shrink below their content width, so at any narrow viewport * (resized floating window OR a small mobile screen) the text wraps one * character per line. The cascade below lets every text node collapse to * single-line + ellipsis instead. * * Lives outside the @media (min-width: 768px) wrapper above because the * issue also surfaces on small mobile devices in the legacy modal mode. */ .dt_msg_box .modal-content .chat_conversations .chat_participant { min-width: 0; overflow: hidden; } .dt_msg_box .modal-content .chat_conversations .chat_participant .c_name { min-width: 0; flex: 1 1 auto; overflow: hidden; } .dt_msg_box .modal-content .chat_conversations .chat_participant .c_name > a, .dt_msg_box .modal-content .chat_conversations .chat_participant .c_name .name, .dt_msg_box .modal-content .chat_conversations .chat_participant .c_name .last_seen { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Keep the toolbar on its own non-shrinking row to the right of the * participant block — without flex-shrink:0 it competes with the name for * space and the buttons end up stacked. */ .dt_msg_box .modal-content .chat_conversations .chat_toolbar { flex-shrink: 0; gap: 4px; } /* The inline "Video call" anchor (was style="color:black"). Move colour * + alignment into a class so the markup stops carrying inline style and * the icon+label can be hidden together at narrow widths. */ .dt_msg_box .chat_toolbar .dt-toolbar-action { display: inline-flex; align-items: center; gap: 6px; color: #1c1e21; padding: 0 8px; white-space: nowrap; } .dt_msg_box .chat_toolbar .dt-toolbar-action:hover { color: #000; }