/* Meridiam messenger styles — extracted from index.html (build 783) */
html[data-theme="light"] .msg-compose { background: var(--bg-surface); border-top-color: var(--border); }
html[data-theme="light"] .msg-bubble { background: var(--bg-elevated); color: var(--text-primary); }
html[data-theme="light"] .msg-bubble.me { background: var(--accent-bg); color: var(--accent-text); }
html[data-theme="light"] .msg-sidebar { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-sidebar-head { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-sidebar-head input { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-ctx-menu { background: var(--bg-surface); border-color: var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
html[data-theme="light"] .msg-ctx-item { color: var(--text-primary); }
html[data-theme="light"] .msg-ctx-item:hover { background: var(--bg-elevated); }
html[data-theme="light"] .msg-ctx-sep { border-color: var(--border); }
html[data-theme="light"] .msg-filter-bar { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-filter-btn { color: var(--text-secondary); border-color: var(--border); }
html[data-theme="light"] .msg-filter-btn:hover { color: var(--text-primary); border-color: #94a3b8; }
html[data-theme="light"] .msg-filter-btn.active { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent); }
html[data-theme="light"] .msg-conv-item { border-color: var(--border); }
html[data-theme="light"] .msg-conv-item:hover { background: var(--bg-elevated); }
html[data-theme="light"] .msg-conv-item.active { background: var(--accent-bg); }
html[data-theme="light"] .msg-conv-more { color: var(--text-muted); }
html[data-theme="light"] .msg-chat { background: var(--bg-base); }
html[data-theme="light"] .msg-chat-head { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-compose { background: var(--bg-surface); border-top-color: var(--border); }
html[data-theme="light"] .msg-attach-btn { color: var(--text-muted); }
html[data-theme="light"] .msg-attach-preview { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .msg-attach-chip { background: var(--bg-elevated); color: var(--text-primary); }
html[data-theme="light"] .msg-file-attachment { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-new-modal-box { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-reaction-chip { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .msg-emoji-picker { color: var(--text-muted); }
html[data-theme="light"] .msg-emoji-panel { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-emoji-panel-tabs { border-color: var(--border); }
html[data-theme="light"] .msg-emoji-panel-search { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-compose-reply { background: var(--bg-elevated); border-color: var(--border); }
html[data-theme="light"] .msg-conv-name { color: var(--text-primary); }
html[data-theme="light"] .msg-chat-head-name { color: var(--text-primary); }
html[data-theme="light"] .msg-file-name { color: var(--text-primary); }
html[data-theme="light"] .msg-reply-preview { background: var(--bg-elevated); border-color: var(--border); }
/* Build 970 (#123) — light-theme override for pinned bar background.
Without this, the dark translucent blue (#1e3a5f30) sat on the light
paper, looking jarring. Now uses an accent-tinted surface that blends
with the light theme. */
html[data-theme="light"] .msg-pinned-bar { background: rgba(59, 130, 246, 0.06); border-bottom-color: var(--border); color: #2563eb; }
html[data-theme="light"] .msg-pinned-bar:hover { background: rgba(59, 130, 246, 0.12); }
html[data-theme="light"] .msg-pinned-panel { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
html[data-theme="light"] .msg-pinned-panel h4 { color: var(--text-primary); }
html[data-theme="light"] .msg-pinned-item { background: var(--bg-elevated); color: var(--text-primary); }
html[data-theme="light"] .msg-pinned-item-time, html[data-theme="light"] .msg-pinned-item-sender { color: var(--text-muted); }
html[data-theme="light"] .msg-search-bar { background: var(--bg-surface); border-bottom-color: var(--border); }
html[data-theme="light"] .msg-search-bar input { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-attach-preview { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-compose-reply { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-mention-dropdown { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-mention-dropdown-item { color: var(--text-primary); }
html[data-theme="light"] .msg-broadcast-modal-box { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-forward-modal-box { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-forward-conv-item { color: var(--text-primary); }
html[data-theme="light"] .msg-edit-box { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .msg-bubble-actions button { background: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
html[data-theme="light"] .msg-bubble-actions button:hover { background: var(--bg-elevated); color: var(--text-primary); }
html[data-theme="light"] .msg-bubble.sent { background: #3b82f6; color: #ffffff; border: none; }
html[data-theme="light"] .msg-bubble.sent .msg-bubble-time { color: rgba(255,255,255,0.65) !important; }
html[data-theme="light"] .msg-bubble.received { background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--text-primary); }
html[data-theme="light"] .msg-conv-avatar:not([style*="background"]) { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
html[data-theme="light"] .msg-chat-head-avatar:not([style*="background"]) { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }
html[data-theme="light"] .msg-recv-avatar:not([style*="background"]) { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #93c5fd !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
html[data-theme="light"] .msg-unread-sep { color: #3b82f6; }
html[data-theme="light"] .msg-unread-sep::before, html[data-theme="light"] .msg-unread-sep::after { background: #3b82f6; }
html[data-theme="light"] .msg-bubble-time { color: var(--text-muted) !important; }
html[data-theme="light"] .msg-date-sep { color: var(--text-secondary); }
html[data-theme="light"] .msg-file-size { color: var(--text-muted); }
html[data-theme="light"] .msg-compose textarea { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .msg-compose textarea::placeholder { color: var(--text-muted); }
html[data-theme="light"] .msg-send-btn:disabled { background: #cbd5e1; }
html[data-theme="light"] .msg-conv-preview { color: var(--text-secondary); }
html[data-theme="light"] .msg-conv-time { color: var(--text-muted); }
html[data-theme="light"] .msg-conv-title { color: var(--text-muted); }
.msg-voice-player { display:flex; align-items:center; gap:8px; padding:4px 0; }
.msg-voice-play { background:none; border:none; color:var(--accent-text); cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent-bg); }
.msg-voice-wave { flex:1; height:28px; display:flex; align-items:center; gap:1px; }
.msg-voice-wave span { display:inline-block; width:3px; border-radius:2px; background:var(--accent-text); opacity:0.5; }
.msg-voice-duration { font-size:11px; color:var(--text-muted); font-family:monospace; }
.tk-sidebar:hover .sb-edge-toggle, .msg-sidebar:hover .sb-edge-toggle, .sb-edge-toggle.visible { opacity:1; }
.tk-sidebar.collapsed ~ .sb-edge-expand, .msg-sidebar.collapsed ~ .sb-edge-expand { display:flex; }
.msg-call-btn:hover { color:#3b82f6 !important; }
.msg-layout { display: flex; height: calc(100vh - 62px); overflow: hidden; position: relative; }
.msg-sidebar { width: 280px; min-width: 280px; background: #0d1526; border-right: 1px solid #1e293b; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: width 0.2s, min-width 0.2s; }
.msg-sidebar.collapsed { width: 0; min-width: 0; border-right: none; overflow: hidden; }
.msg-sidebar-head { padding: 16px; border-bottom: 1px solid #1e293b; display: flex !important; align-items: center; gap: 10px; flex-shrink: 0; min-height: 50px; background: #0d1526; z-index: 5; }
.msg-sidebar-head input { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 8px 12px; color: #f1f5f9; font-size: 12px; font-family: inherit; outline: none; }
.msg-sidebar-head input:focus { border-color: #3b82f6; }
.msg-new-btn { background: #3b82f6; border: none; border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; flex-shrink: 0; transition: background 0.15s; }
.msg-new-btn:hover { background: #2563eb; }
.msg-ctx-menu { position:fixed;z-index:300;background:#1e293b;border:1px solid #334155;border-radius:10px;padding:6px 0;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:none; }
.msg-ctx-menu.open { display:block; }
.msg-ctx-item { display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;color:#e2e8f0;cursor:pointer;transition:background 0.12s;font-family:inherit; }
.msg-ctx-item:hover { background:#334155; }
.msg-ctx-item svg { flex-shrink:0;width:16px;height:16px;color:#64748b; }
.msg-ctx-item.danger { color:#f87171; }
.msg-ctx-item.danger svg { color:#f87171; }
.msg-ctx-sep { height:1px;background:#334155;margin:4px 0; }
.msg-filter-bar { display:flex !important;gap:4px;padding:8px 12px;border-bottom:1px solid #1e293b;overflow-x:auto;scrollbar-width:none;flex-shrink:0;min-height:36px;background:#0d1526;z-index:4; }
.msg-filter-bar::-webkit-scrollbar { display:none; }
.msg-filter-btn { background:none;border:1px solid #334155;border-radius:14px;padding:4px 12px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all 0.15s; }
.msg-filter-btn:hover { color:#94a3b8;border-color:#475569; }
.msg-filter-btn.active { background:#1e3a5f;color:#60a5fa;border-color:#3b82f640; }
.msg-conv-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.msg-conv-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #1e293b08; transition: background 0.15s; position: relative; }
.msg-conv-item:hover { background: #1e293b60; }
.msg-conv-item.active { background: #1e3a5f; }
.msg-conv-avatar { width: 38px; height: 38px; border-radius: 50%; background: #1e3a5f; border: 2px solid #334155; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #60a5fa; flex-shrink: 0; }
.msg-conv-item.active .msg-conv-avatar { border-color: #3b82f6; }
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-name { font-size: 13px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-preview { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msg-conv-more { position:absolute;top:8px;right:8px;background:none;border:none;color:#475569;cursor:pointer;padding:4px 6px;border-radius:6px;display:none;transition:all 0.15s;line-height:1;font-size:18px;font-family:inherit; }
.msg-conv-more:hover { color:#94a3b8;background:#334155; }
.msg-conv-item:hover .msg-conv-more { display:block; }
.msg-conv-item:hover .msg-conv-time { display:none; }
.msg-conv-time { font-size: 10px; color: #475569; position: absolute; top: 12px; right: 16px; }
.msg-conv-unread { background: #3b82f6; color: white; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 7px; min-width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; line-height: 1.4; flex-shrink: 0; }
.msg-conv-item.is-unread .msg-conv-name > span:first-child { font-weight: 700; color: #ffffff; }
html[data-theme="light"] .msg-conv-item.is-unread .msg-conv-name > span:first-child { color: #0f172a; }
.msg-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0f1117; overflow: hidden; }
.msg-chat-head { padding: 14px 20px; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 12px; background: #0d1526; }
.msg-chat-head-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; border: 2px solid #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #60a5fa; }
.msg-chat-head-name { font-size: 14px; font-weight: 700; color: #f1f5f9; }
.msg-chat-head-status { font-size: 11px; color: #64748b; }
.msg-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-wrap: break-word; position: relative; }
.msg-bubble.sent { background: #1d4ed8; color: #f0f4ff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-bubble.received { background: #1e293b; color: #e2e8f0; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #334155; }
.msg-recv-row { display:flex; align-items:flex-end; gap:8px; align-self:flex-start; max-width:75%; }
.msg-recv-row .msg-bubble { max-width:100%; }
.msg-recv-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.msg-unread-sep { display:flex; align-items:center; gap:10px; padding:8px 0; color:#3b82f6; font-size:11px; font-weight:600; letter-spacing:0.3px; }
.msg-unread-sep::before, .msg-unread-sep::after { content:''; flex:1; height:1px; background:#3b82f6; opacity:0.4; }
.msg-bubble-time { font-size: 9px; color: #475569; margin-top: 4px; }
.msg-bubble.sent .msg-bubble-time { text-align: right; }
.msg-date-sep { text-align: center; font-size: 10px; color: #475569; padding: 12px 0 6px; font-weight: 600; letter-spacing: 0.5px; }
.msg-compose { padding: 14px 20px; border-top: 1px solid #1e293b; display: flex; gap: 10px; align-items: flex-end; background: #0d1526; }
.msg-attach-btn { background: none; border: none; color: #475569; cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.15s, background 0.15s; }
.msg-attach-btn:hover { color: #94a3b8; background: #1e293b; }
.msg-attach-preview { padding: 10px 20px 0; display: flex; gap: 8px; flex-wrap: wrap; background: #0d1526; border-top: 1px solid #1e293b; }
.msg-attach-chip { display: flex; align-items: center; gap: 6px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 6px 10px; font-size: 11px; color: #94a3b8; max-width: 200px; }
.msg-attach-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-attach-chip-remove { background: none; border: none; color: #64748b; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.msg-attach-chip-remove:hover { color: #ef4444; }
.msg-attach-chip-img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; }
.msg-file-attachment { display: flex; align-items: center; gap: 8px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 12px; margin-top: 6px; cursor: pointer; transition: background 0.15s; max-width: 280px; }
.msg-file-attachment:hover { background: #1e293b; }
.msg-file-icon { width: 32px; height: 32px; border-radius: 6px; background: #1e3a5f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-file-info { min-width: 0; flex: 1; }
.msg-file-name { font-size: 12px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-file-size { font-size: 10px; color: #64748b; }
.msg-img-attachment { max-width: 240px; max-height: 180px; border-radius: 8px; margin-top: 6px; cursor: pointer; }
.msg-img-attachment:hover { opacity: 0.9; }
.msg-compose textarea { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 10px 14px; color: #f1f5f9; font-size: 13px; font-family: inherit; resize: none; outline: none; min-height: 40px; max-height: 120px; line-height: 1.4; }
.msg-compose textarea:focus { border-color: #3b82f6; }
.msg-send-btn { background: #3b82f6; border: none; border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; flex-shrink: 0; transition: background 0.15s; }
.msg-send-btn:hover { background: #2563eb; }
.msg-send-btn:disabled { background: #334155; cursor: not-allowed; }
.msg-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #475569; font-size: 14px; }
.msg-new-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: none; align-items: center; justify-content: center; }
.msg-new-modal.open { display: flex; }
.msg-new-modal-box { background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 24px; width: 340px; }
.msg-new-modal-box h3 { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 16px; }
.msg-new-modal-box select { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 13px; font-family: inherit; margin-bottom: 14px; }
.msg-new-modal-box .msg-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.msg-new-modal-box .msg-modal-btns button { padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }
.msg-typing-indicator { font-size: 11px; color: #60a5fa; font-style: italic; animation: msgTypingPulse 1.5s ease-in-out infinite; }
.msg-status { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; }
.msg-status svg { width: 14px; height: 14px; }
/* Ticket #110: checkmark needs to sit on top of the blue sent bubble.
Use a brighter grey with opacity so delivered vs read are distinguishable
(read stays blue but against blue background we brighten it too). */
.msg-status.sent svg { stroke: rgba(255,255,255,0.85); }
.msg-bubble.sent .msg-status.sent svg { stroke: rgba(255,255,255,0.78); }
.msg-bubble.sent .msg-status.read svg { stroke: #bfdbfe; }
.msg-status.read svg { stroke: #3b82f6; }
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* Build 970 (#168): bumped emoji from 12px → 16px so reactions match the
scale of message body text. Count stays smaller and dimmer so the emoji
reads as the primary glyph. */
.msg-reaction-chip { display: inline-flex; align-items: center; gap: 3px; background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 3px 9px; font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.msg-reaction-chip:hover { background: #334155; }
.msg-reaction-chip.mine { border-color: #3b82f6; background: #1e3a5f40; }
.msg-reaction-chip .reaction-count { font-size: 11px; color: #94a3b8; margin-left: 2px; font-family: var(--font-stack, system-ui); }
.msg-reaction-chip .reaction-name { font-size: 11px; color: #94a3b8; margin-left: 4px; font-family: var(--font-stack, system-ui); font-weight: 500; }
.msg-reaction-chip.mine .reaction-name { color: #93c5fd; }
/* Build 1053: picker now sits ABOVE the new floating toolbar (which itself
sits above the bubble). Without the +36px offset, picker overlaps the
toolbar pill when "more emoji" is clicked. */
.msg-emoji-picker { position: absolute; bottom: calc(100% + 36px); right: 0; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 6px; gap: 2px; z-index: 110; box-shadow: 0 4px 16px rgba(0,0,0,0.4); max-width: calc(100vw - 24px); flex-wrap: nowrap; overflow-x: auto; }
/* Build 993 (#476507359) — flip reaction picker alignment for incoming
messages so it grows toward the available space (right) instead of
overflowing the chat container's left edge. .msg-bubble:not(.me)
marks incoming bubbles. */
.msg-bubble:not(.me) .msg-emoji-picker { right: auto; left: 0; }
.msg-emoji-picker button { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background 0.15s; line-height: 1; }
.msg-emoji-picker button:hover { background: #334155; }
.msg-reply-preview { background: #0f172a; border-left: 3px solid #3b82f6; border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; font-size: 11px; color: #94a3b8; max-height: 48px; overflow: hidden; }
.msg-reply-preview-name { font-weight: 700; color: #60a5fa; font-size: 10px; margin-bottom: 2px; }
/* Build 994 (#472663452) — composer emoji panel was hard-coded to width:320px
left:50px which clipped against narrow viewports / sidebar layouts.
max-width keeps it inside the viewport even when zoomed; the original
320px stays as the preferred size. */
.msg-emoji-panel { display:none;position:absolute;bottom:56px;left:50px;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:10px;z-index:150;box-shadow:0 8px 32px rgba(0,0,0,0.5);width:320px;max-width:calc(100vw - 60px);max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#334155 transparent; }
.msg-emoji-panel-tabs { display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid #334155;padding-bottom:6px; }
.msg-emoji-panel-tabs button { background:none;border:none;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background 0.15s;opacity:0.6; }
.msg-emoji-panel-tabs button:hover,.msg-emoji-panel-tabs button.active { background:#334155;opacity:1; }
.msg-emoji-panel-grid { display:grid;grid-template-columns:repeat(8,1fr);gap:2px; }
.msg-emoji-panel-grid button { background:none;border:none;font-size:22px;cursor:pointer;padding:4px;border-radius:6px;transition:background 0.15s;line-height:1.2; }
.msg-emoji-panel-grid button:hover { background:#334155; }
.msg-emoji-panel-search { width:100%;background:#0f172a;border:1px solid #334155;border-radius:6px;padding:6px 10px;color:#f1f5f9;font-size:12px;font-family:inherit;outline:none;margin-bottom:8px; }
.msg-emoji-panel-search:focus { border-color:#3b82f6; }
.msg-compose-reply { padding: 8px 20px 0; background: #0d1526; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #94a3b8; }
.msg-compose-reply-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-compose-reply-close { background: none; border: none; color: #64748b; cursor: pointer; font-size: 16px; padding: 0 4px; }
.msg-compose-reply-close:hover { color: #ef4444; }
.msg-group-avatar { background: #7c3aed30 !important; color: #a78bfa !important; border-color: #7c3aed !important; }
.msg-group-members { font-size: 10px; color: #64748b; margin-top: 1px; }
.msg-group-sender { font-size: 10px; font-weight: 700; color: #60a5fa; margin-bottom: 2px; }
.msg-new-modal-box .msg-group-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: #94a3b8; cursor: pointer; }
.msg-new-modal-box .msg-group-toggle input { accent-color: #3b82f6; }
.msg-new-modal-box .msg-group-name-input { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 13px; font-family: inherit; margin-bottom: 14px; }
.msg-new-modal-box .msg-member-checklist { max-height: 200px; overflow-y: auto; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.msg-new-modal-box .msg-member-checklist label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: #e2e8f0; cursor: pointer; }
.msg-new-modal-box .msg-member-checklist label:hover { background: #0f172a; }
.msg-new-modal-box .msg-member-checklist input { accent-color: #3b82f6; }
/* Build 970 (#135): actions used to sit at top:-8px, which overlapped the
previous message's bottom on tight runs. Now positioned next to the
bubble (left for sent, right for received) so vertical content is never
obscured. Vertically centered on the first line of the bubble. */
/* Build 987 — padding (not margin) for the gap so the hover bridge stays
continuous. With margin, the cursor crossing the 6px no-mans-land
dropped :hover before the user could reach a button — actions
vanished mid-travel and looked unclickable (reported by Igor on
Evgeniia's incoming message). */
/* Build 1053: Teams-style hover toolbar — floats above the bubble as a
rounded pill with quick-react emojis + actions. Replaces the old
vertical column on the bubble's outer edge. */
.msg-bubble-actions {
position: absolute;
top: -18px;
display: none;
align-items: center;
gap: 0;
z-index: 20;
background: #1e293b;
border: 1px solid #334155;
border-radius: 18px;
padding: 2px;
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
white-space: nowrap;
}
.msg-bubble.sent .msg-bubble-actions { right: 6px; }
.msg-bubble.received .msg-bubble-actions { left: 6px; }
/* Show on bubble hover and on toolbar hover (so the cursor can cross from
bubble to toolbar without losing :hover). */
.msg-bubble:hover .msg-bubble-actions,
.msg-bubble-actions:hover { display: inline-flex; }
.msg-bubble-actions button {
background: transparent;
border: none;
border-radius: 14px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #cbd5e1;
font-size: 14px;
line-height: 1;
padding: 0;
transition: background 0.12s, transform 0.08s;
}
.msg-bubble-actions button:hover {
background: #334155;
color: #f1f5f9;
transform: scale(1.12);
}
.msg-bubble-actions button.msg-act-qr { font-size: 16px; }
.msg-bubble-actions button.msg-act-more-emoji { font-size: 13px; color: #94a3b8; }
.msg-bubble-actions button.msg-act-danger:hover { background: rgba(239,68,68,0.18); color: #fca5a5; }
.msg-bubble-actions .msg-act-sep {
width: 1px;
height: 16px;
background: #334155;
margin: 0 4px;
align-self: center;
}
/* Light theme — white pill, soft shadow, indigo on hover. */
html[data-theme="light"] #msgNativeRoot .msg-bubble-actions {
background: #ffffff;
border-color: #e5e7eb;
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
html[data-theme="light"] #msgNativeRoot .msg-bubble-actions button { color: #4b5563; }
html[data-theme="light"] #msgNativeRoot .msg-bubble-actions button:hover { background: #eef2ff; color: #1f2937; }
html[data-theme="light"] #msgNativeRoot .msg-bubble-actions .msg-act-sep { background: #e5e7eb; }
/* Build 993 (#455248228) — edited-tag contrast.
Default (incoming bubble, dark theme): muted slate (#94a3b8 vs old #64748b).
Outgoing (.me, blue bubble): semi-transparent white so it stays
readable but visually secondary against the blue background. */
.msg-bubble .msg-edited-tag { font-size: 9px; color: #94a3b8; font-style: italic; opacity: 0.9; }
.msg-bubble.me .msg-edited-tag { color: rgba(255,255,255,0.78); }
.msg-bubble.deleted-msg { opacity: 0.5; font-style: italic; }
.msg-pinned-bar { padding: 8px 20px; background: #1e3a5f30; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #60a5fa; }
.msg-pinned-bar:hover { background: #1e3a5f50; }
.msg-pinned-bar svg { flex-shrink: 0; }
.msg-pinned-panel { position: absolute; top: 56px; right: 0; width: 320px; max-height: 400px; overflow-y: auto; background: #1e293b; border: 1px solid #334155; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 100; padding: 12px; display: none; }
.msg-pinned-panel.open { display: block; }
.msg-pinned-panel h4 { font-size: 13px; font-weight: 700; color: #f1f5f9; margin-bottom: 10px; }
.msg-pinned-item { padding: 8px; background: #0f172a; border-radius: 8px; margin-bottom: 6px; font-size: 12px; color: #e2e8f0; cursor: pointer; }
.msg-pinned-item:hover { background: #0f172a90; }
.msg-pinned-item-sender { font-size: 10px; color: #60a5fa; font-weight: 600; margin-bottom: 2px; }
.msg-pinned-item-time { font-size: 9px; color: #475569; margin-top: 4px; }
.msg-online-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #0d1526; position: absolute; bottom: -1px; right: -1px; }
.msg-online-dot.online { background: #10b981; }
.msg-online-dot.offline { background: #64748b; }
.msg-conv-avatar { position: relative; }
.msg-chat-head-avatar { position: relative; }
#msgNativeRoot { background: #020617; }
#msgNativeRoot .msg-layout { background: #020617; }
#msgNativeRoot .msg-sidebar {
width: 320px; min-width: 320px;
background: #020617;
border-right: 1px solid #0f172a;
}
#msgNativeRoot .msg-v2-title {
padding: 18px 20px 8px;
font-size: 22px;
font-weight: 700;
color: #f5f5f7;
letter-spacing: -0.2px;
flex-shrink: 0;
}
#msgNativeRoot .msg-sidebar-head {
padding: 4px 16px 14px;
background: transparent;
border-bottom: none;
min-height: 0;
gap: 8px;
}
#msgNativeRoot .msg-sidebar-head input {
background: #0f172a;
border: 1px solid transparent;
border-radius: 6px;
font-size: 13px;
padding: 9px 12px 9px 34px;
color: #f1f5f9;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 11px center;
}
#msgNativeRoot .msg-sidebar-head input:focus {
background-color: #020617;
border-color: #3b82f6;
}
#msgNativeRoot .msg-sidebar-head button {
background: transparent !important;
border: 1px solid #334155 !important;
width: 36px; height: 36px;
border-radius: 6px;
font-size: 18px;
font-weight: 400;
color: #d1d5db !important;
}
#msgNativeRoot .msg-sidebar-head button:hover {
background: #0f172a !important;
border-color: #3b82f6 !important;
}
#msgNativeRoot .msg-v2-section {
padding: 10px 20px 6px;
font-size: 11px;
font-weight: 700;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#msgNativeRoot .msg-conv-list { padding: 0 6px 12px; }
#msgNativeRoot .msg-conv-item {
padding: 10px 12px;
gap: 12px;
border-bottom: none;
border-left: 3px solid transparent;
border-radius: 6px;
margin: 1px 0;
align-items: center;
min-height: 56px;
}
#msgNativeRoot .msg-conv-item:hover { background: #0f172a; }
#msgNativeRoot .msg-conv-item.active {
background: #1e293b;
border-left-color: #3b82f6;
}
#msgNativeRoot .msg-conv-avatar {
width: 36px; height: 36px;
border: none;
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
color: #ffffff;
font-size: 13px;
font-weight: 600;
}
#msgNativeRoot .msg-conv-item.active .msg-conv-avatar { border: none; }
#msgNativeRoot .msg-group-avatar {
background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%) !important;
color: #ffffff !important;
border: none !important;
}
#msgNativeRoot .msg-conv-name {
font-size: 14px;
font-weight: 600;
color: #f5f5f7;
}
#msgNativeRoot .msg-conv-preview {
font-size: 12px;
color: #9ca3af;
margin-top: 2px;
}
#msgNativeRoot .msg-conv-time {
font-size: 11px;
color: #9ca3af;
position: absolute;
top: 12px;
right: 14px;
}
#msgNativeRoot .msg-conv-unread {
background: #3b82f6;
color: #ffffff;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
padding: 2px 7px;
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.4;
flex-shrink: 0;
}
#msgNativeRoot .msg-conv-more {
color: #9ca3af;
border-radius: 4px;
padding: 4px 6px;
}
#msgNativeRoot .msg-conv-more:hover { background: #334155; color: #f5f5f7; }
#msgNativeRoot .msg-chat {
background: #0f172a;
border-left: 1px solid #0f172a;
}
#msgNativeRoot #msgChatHead {
padding: 14px 24px !important;
background: #0f172a !important;
border-bottom: 1px solid #020617 !important;
min-height: 64px;
box-sizing: border-box;
}
#msgNativeRoot #msgChatHead > div:first-child {
font-size: 15px !important;
font-weight: 700 !important;
color: #f5f5f7 !important;
}
#msgNativeRoot #msgChatHead button {
background: transparent !important;
border: 1px solid #334155 !important;
color: #d1d5db !important;
border-radius: 6px !important;
padding: 7px 12px !important;
font-size: 14px !important;
transition: background 0.15s, border-color 0.15s;
}
#msgNativeRoot #msgChatHead button:hover {
background: #1e293b !important;
border-color: #3b82f6 !important;
}
#msgNativeRoot .msg-messages {
padding: 24px 32px;
background: #0f172a;
gap: 4px;
}
#msgNativeRoot .msg-empty {
background: #0f172a;
color: #6b7280;
font-size: 13px;
}
/* Ticket #109: upload spinner chip */
.msg-attach-chip-uploading { opacity: 0.75; }
.msg-attach-spin { animation: msgAttachSpin 0.9s linear infinite; color: #9ca3af; }
@keyframes msgAttachSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#msgNativeRoot .msg-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
/* Ticket #104: center short text and single-emoji content instead of
letting it hug the top edge when the bubble has fixed min-height from
the action row / timestamp. */
display: flex;
flex-direction: column;
justify-content: center;
min-height: 34px;
box-sizing: border-box;
}
#msgNativeRoot .msg-bubble > *:first-child { margin-top: 0; }
#msgNativeRoot .msg-bubble > *:last-child { margin-bottom: 0; }
#msgNativeRoot .msg-bubble.sent {
background: #3b82f6;
color: #ffffff;
border-bottom-right-radius: 2px;
}
#msgNativeRoot .msg-bubble.received {
background: #1e293b;
color: #f5f5f7;
border: 1px solid #334155;
border-bottom-left-radius: 2px;
}
#msgNativeRoot .msg-recv-avatar {
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #ffffff;
}
#msgNativeRoot .msg-bubble-time { font-size: 10px; color: #9ca3af; margin-top: 4px; }
#msgNativeRoot .msg-date-sep {
color: #9ca3af;
font-size: 11px;
padding: 16px 0 8px;
display: flex;
align-items: center;
gap: 12px;
}
#msgNativeRoot .msg-date-sep::after {
content: '';
flex: 1;
height: 1px;
background: #334155;
}
#msgNativeRoot .msg-compose {
padding: 16px 24px 20px !important;
background: #0f172a !important;
border-top: 1px solid #020617 !important;
gap: 8px !important;
}
#msgNativeRoot #msgInput {
background: #1e293b !important;
border: 1px solid #334155 !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 14px !important;
color: #f5f5f7 !important;
min-height: 44px !important;
}
#msgNativeRoot #msgInput:focus {
border-color: #3b82f6 !important;
background: #0f172a !important;
}
#msgNativeRoot .msg-compose button[onclick="msgSend()"] {
background: #3b82f6 !important;
border-radius: 8px !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
font-size: 0 !important;
color: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: #3b82f6 !important;
}
#msgNativeRoot .msg-compose button[onclick="msgSend()"]:hover {
background-color: #2563eb !important;
}
#msgNativeRoot .msg-compose button[type="button"]:not(.msg-send-btn) {
background: transparent !important;
border: 1px solid #334155 !important;
color: #d1d5db !important;
border-radius: 8px !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
font-size: 16px !important;
}
#msgNativeRoot .msg-compose button[type="button"]:not(.msg-send-btn):hover {
background: #1e293b !important;
border-color: #3b82f6 !important;
}
body:has(#msgNativeRoot[style*="block"]) #rcExitBtn {
background: transparent !important;
border: 1px solid #334155 !important;
color: #d1d5db !important;
padding: 7px 12px 7px 10px !important;
font-size: 11px !important;
border-radius: 6px !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
#msgNativeRoot #rcExitBtn:hover {
background: #0f172a !important;
border-color: #3b82f6 !important;
}
#msgNativeNewModal label:hover { background: #0f172a !important; }
#msgNativeRoot .msg-sidebar-head button[onclick*="msgOpenNewModal"] { display: none !important; }
#msgNativeRoot #msgNewGroupBtn { display: flex !important; align-items: center; justify-content: center; color: #c4c4cc; }
#msgNativeRoot #msgNewGroupBtn:hover { color: #f5f5f7; }
#msgNativeRoot #msgGlobalSearchPanel { display: none !important; }
#page-messenger.active #msgNativeRoot {
height: 100% !important;
}
#msgNativeRoot .msg-layout {
height: 100% !important;
}
.msg-v2-emoji-panel {
position: fixed;
background: #0f172a;
border: 1px solid #334155;
border-radius: 10px;
padding: 8px;
display: none;
z-index: 99996;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
width: 280px;
}
.msg-v2-emoji-panel.open { display: block; }
.msg-v2-emoji-panel .grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
max-height: 220px;
overflow-y: auto;
}
.msg-v2-emoji-panel button {
background: transparent !important;
border: none !important;
font-size: 20px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
cursor: pointer;
border-radius: 6px;
}
.msg-v2-emoji-panel button:hover {
background: #1e293b !important;
}
.msg-mention-dropdown.msg-v2 {
background: #0f172a !important;
border: 1px solid #334155 !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.msg-mention-dropdown-item.msg-v2 {
padding: 8px 12px;
color: #f5f5f7;
font-size: 13px;
cursor: pointer;
}
#msgNativeRoot .msg-mention-dropdown-item.active {
background: #1e293b;
}
.msg-ctx-menu.msg-v2 {
background: #0f172a !important;
border: 1px solid #334155 !important;
border-radius: 10px !important;
box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important;
padding: 6px 0 !important;
min-width: 200px !important;
}
.msg-ctx-item.msg-v2 {
padding: 9px 16px !important;
color: #f5f5f7 !important;
font-size: 13px !important;
}
.msg-ctx-item.msg-v2:hover { background: #1e293b !important; }
#msgNativeRoot .msg-v2-msgsearch {
padding: 10px 24px;
background: #020617;
border-bottom: 1px solid #0f172a;
display: none;
align-items: center;
gap: 10px;
}
#msgNativeRoot .msg-v2-msgsearch.open { display: flex; }
#msgNativeRoot .msg-v2-msgsearch input {
flex: 1;
background: #0f172a;
border: 1px solid #334155;
color: #f5f5f7;
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
font-family: inherit;
}
#msgNativeRoot .msg-v2-msgsearch input:focus { border-color: #3b82f6; }
#msgNativeRoot .msg-v2-msgsearch button {
background: transparent;
border: 1px solid #334155;
color: #d1d5db;
border-radius: 6px;
padding: 7px 12px;
font-size: 12px;
cursor: pointer;
}
#msgNativeRoot .msg-v2-search-hl { background: #fbbf2440; border-radius: 2px; padding: 0 1px; }
#msgNativeRoot #msgReplyPreview:empty,
#msgNativeRoot #msgPinnedBar:empty,
#msgNativeRoot #msgAttachPreview:empty,
#msgNativeRoot #msgTypingIndicator:empty {
display: none !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
#msgNativeRoot .msg-attach-preview {
background: #0f172a !important;
border-top: none !important;
}
#msgNativeRoot .msg-typing-indicator { background: transparent !important; padding: 0 24px !important; }
#msgNativeRoot .msg-pinned-bar {
background: #1e293b !important;
color: #c4b5fd !important;
border-bottom: none !important;
}
#msgNativeRoot .msg-v2-userhits {
padding: 4px 6px 12px;
}
#msgNativeRoot .msg-v2-userhits-label {
padding: 10px 14px 6px;
font-size: 11px;
font-weight: 700;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#msgNativeRoot .msg-v2-userhit {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
cursor: pointer;
border-radius: 6px;
margin: 1px 0;
}
#msgNativeRoot .msg-v2-userhit:hover { background: #0f172a; }
#msgNativeRoot .msg-v2-userhit-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: #ffffff;
flex-shrink: 0;
}
#msgNativeRoot .msg-v2-userhit-name {
font-size: 13px;
font-weight: 600;
color: #f5f5f7;
}
#msgNativeRoot .msg-v2-userhit-email {
font-size: 11px;
color: #9ca3af;
margin-top: 1px;
}
.msg-search-bar { padding: 8px 20px; background: #0d1526; border-bottom: 1px solid #1e293b; display: none; align-items: center; gap: 8px; }
.msg-search-bar.open { display: flex; }
.msg-search-bar input { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 6px 12px; color: #f1f5f9; font-size: 12px; font-family: inherit; outline: none; }
.msg-search-bar input:focus { border-color: #3b82f6; }
.msg-search-bar .msg-search-count { font-size: 10px; color: #64748b; white-space: nowrap; }
.msg-search-bar button { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; }
.msg-search-bar button:hover { color: #f1f5f9; }
.msg-search-highlight { background: #f59e0b40; border-radius: 2px; padding: 0 1px; }
.msg-mention { color: #60a5fa; font-weight: 600; cursor: pointer; }
.msg-mention:hover { text-decoration: underline; }
.msg-mention-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background: #1e293b; border: 1px solid #334155; border-radius: 8px; max-height: 160px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: none; }
.msg-mention-dropdown.open { display: block; }
.msg-mention-dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 12px; color: #e2e8f0; }
.msg-mention-dropdown-item:hover, .msg-mention-dropdown-item.active { background: #1e3a5f; }
.msg-link { color: #60a5fa; text-decoration: none; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }
.msg-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 300; display: none; align-items: center; justify-content: center; cursor: pointer; }
.msg-lightbox.open { display: flex; }
.msg-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
.msg-lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: white; font-size: 28px; cursor: pointer; z-index: 301; }
.msg-lightbox { flex-direction: column; gap: 12px; padding: 16px; cursor: default; }
.msg-lightbox-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(15,23,42,0.85); backdrop-filter: blur(6px); border-radius: 12px; max-width: 90vw; width: min(90vw, 600px); }
.msg-broadcast-bubble { background: linear-gradient(135deg, #7c3aed20, #3b82f620) !important; border: 1px solid #7c3aed40; align-self: stretch !important; max-width: 100% !important; }
.msg-broadcast-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.msg-broadcast-btn { background: #7c3aed; border: none; border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; flex-shrink: 0; transition: background 0.15s; }
.msg-broadcast-btn:hover { background: #6d28d9; }
.msg-broadcast-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: none; align-items: center; justify-content: center; }
.msg-broadcast-modal.open { display: flex; }
.msg-broadcast-modal-box { background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 24px; width: 400px; }
.msg-broadcast-modal-box h3 { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 16px; }
.msg-broadcast-modal-box textarea { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 13px; font-family: inherit; resize: vertical; min-height: 80px; margin-bottom: 14px; outline: none; }
.msg-broadcast-modal-box textarea:focus { border-color: #3b82f6; }
.msg-forward-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: none; align-items: center; justify-content: center; }
.msg-forward-modal.open { display: flex; }
.msg-forward-modal-box { background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 24px; width: 340px; }
.msg-forward-modal-box h3 { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 16px; }
.msg-forward-conv-list { max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.msg-forward-conv-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #e2e8f0; transition: background 0.15s; }
.msg-forward-conv-item:hover { background: #1e3a5f; }
.msg-forward-conv-item.selected { background: #1e3a5f; border: 1px solid #3b82f6; }
.msg-edit-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: none; align-items: center; justify-content: center; }
.msg-edit-overlay.open { display: flex; }
.msg-edit-box { background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 24px; width: 400px; }
.msg-edit-box h3 { font-size: 15px; font-weight: 700; color: #f1f5f9; margin-bottom: 16px; }
.msg-edit-box textarea { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 13px; font-family: inherit; resize: vertical; min-height: 60px; margin-bottom: 14px; outline: none; }
.msg-edit-box textarea:focus { border-color: #3b82f6; }
html[data-theme="light"] #msgNativeRoot { background: #f3f4f6 !important; }
html[data-theme="light"] #msgNativeRoot .msg-layout { background: #f3f4f6 !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar { background: #ffffff !important; border-right: 1px solid #e5e7eb !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-title { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-title span { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-section { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head { background: #ffffff !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head input { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head input::placeholder { color: #9ca3af !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head input:focus { border-color: #3b82f6 !important; background: #ffffff !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head button { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-sidebar-head button:hover { background: #f3f4f6 !important; color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-item { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-item:hover { background: #f3f4f6 !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-item.active { background: #e0e7ff !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-name { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-preview { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-time { color: #9ca3af !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-more { color: #9ca3af !important; }
html[data-theme="light"] #msgNativeRoot .msg-conv-more:hover { background: #e5e7eb !important; color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-chat { background: #ffffff !important; }
html[data-theme="light"] #msgNativeRoot #msgChatHead { background: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot #msgChatHead button { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot #msgChatHead button:hover { background: #f3f4f6 !important; color: #111827 !important; }
/* Header inner divs use inline color:#f5f5f7 (name) and color:#9ca3af (subtitle)
baked into messenger.js _msgNativeRenderHead. They're invisible on light bg
until we override via descendant selectors with !important. */
html[data-theme="light"] #msgNativeRoot #msgChatHead > div > div:first-child { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot #msgChatHead > div > div:nth-child(2) { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot #msgChatHead button { border-color: #e5e7eb !important; }
html[data-theme="light"] #msgNativeRoot .msg-messages { background: #f9fafb !important; }
html[data-theme="light"] #msgNativeRoot .msg-empty { background: #f9fafb !important; color: #6b7280 !important; }
/* Theme-aware empty-state typography (light vs dark). Inline styles in
index.html were hardcoded for dark theme and rendered invisibly on light. */
#msgNativeRoot .msg-empty-icon { color: #475569; }
#msgNativeRoot .msg-empty-title { color: #cbd5e1; }
#msgNativeRoot .msg-empty-sub { color: #64748b; }
html[data-theme="light"] #msgNativeRoot .msg-empty-icon { color: #94a3b8 !important; }
html[data-theme="light"] #msgNativeRoot .msg-empty-title { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-empty-sub { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble.received { background: #ffffff !important; color: #111827 !important; border: 1px solid #e5e7eb !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble-time { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-date-sep { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-date-sep::after { background: #e5e7eb !important; }
html[data-theme="light"] #msgNativeRoot .msg-compose { background: #ffffff !important; border-top: 1px solid #e5e7eb !important; }
html[data-theme="light"] #msgNativeRoot #msgInput { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot #msgInput::placeholder { color: #9ca3af !important; }
html[data-theme="light"] #msgNativeRoot #msgInput:focus { border-color: #3b82f6 !important; background: #ffffff !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-userhit:hover { background: #f3f4f6 !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-userhit-name { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-userhit-email { color: #6b7280 !important; }
#msgNativeRoot .msg-recv-row { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; max-width: 75%; margin-top: 12px; }
#msgNativeRoot .msg-recv-row.msg-run-cont { margin-top: 2px; }
#msgNativeRoot .msg-sent-row { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; max-width: 75%; margin-top: 12px; gap: 2px; }
#msgNativeRoot .msg-sent-row.msg-run-cont { margin-top: 2px; }
#msgNativeRoot .msg-recv-col { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
#msgNativeRoot .msg-recv-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
#msgNativeRoot .msg-recv-avatar-spacer { background: transparent !important; visibility: hidden; }
#msgNativeRoot .msg-msg-header { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 2px; font-size: 12px; }
#msgNativeRoot .msg-msg-header .msg-msg-sender { font-weight: 600; color: #e5e7eb; }
#msgNativeRoot .msg-msg-header .msg-msg-time { font-size: 10px; color: #9ca3af; font-weight: 400; }
#msgNativeRoot .msg-msg-header-sent { justify-content: flex-end; }
#msgNativeRoot .msg-sent-row.msg-run-cont .msg-msg-header { display: none; }
#msgNativeRoot .msg-bubble { max-width: 100%; }
html[data-theme="light"] #msgNativeRoot .msg-msg-header .msg-msg-sender { color: #111827 !important; }
html[data-theme="light"] #msgNativeRoot .msg-msg-header .msg-msg-time { color: #6b7280 !important; }
#msgNativeRoot .msg-section-label { padding: 14px 16px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; display: flex; align-items: center; gap: 6px; }
#msgNativeRoot .msg-section-label.msg-section-fav { color: #f59e0b; }
#msgNativeRoot .msg-section-label.msg-section-unread { color: #3b82f6; }
#msgNativeRoot .msg-section-label .msg-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; display: inline-block; }
html[data-theme="light"] #msgNativeRoot .msg-section-label { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-section-label.msg-section-fav { color: #d97706 !important; }
html[data-theme="light"] #msgNativeRoot .msg-section-label.msg-section-unread { color: #4338ca !important; }
#msgNativeRoot .msg-v2-chips { display: flex; gap: 6px; padding: 4px 16px 10px; flex-wrap: wrap; }
#msgNativeRoot .msg-v2-chip { background: transparent; border: 1px solid #334155; color: #d1d5db; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
#msgNativeRoot .msg-v2-chip:hover { background: #0f172a; border-color: #4a4a55; }
#msgNativeRoot .msg-v2-chip.active { background: #3b82f6; border-color: #3b82f6; color: #ffffff; }
html[data-theme="light"] #msgNativeRoot .msg-v2-chip { border-color: #e5e7eb !important; color: #374151 !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-chip:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }
html[data-theme="light"] #msgNativeRoot .msg-v2-chip.active { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; }
#msgNativeRoot .msg-section-toggle { cursor: pointer; user-select: none; }
#msgNativeRoot .msg-section-toggle:hover { color: #ffffff !important; }
html[data-theme="light"] #msgNativeRoot .msg-section-toggle:hover { color: #111827 !important; }
#msgNativeRoot .msg-v2-chev { flex-shrink: 0; }
#msgNativeRoot #msgChatHead { padding: 14px 20px !important; min-height: 64px; }
#msgNativeRoot #msgChatHead .msg-conv-avatar { width: 40px !important; height: 40px !important; font-size: 14px !important; }
#msgNativeRoot .msg-chat-head-name { font-size: 16px !important; font-weight: 700 !important; }
#msgNativeRoot .msg-compose { padding: 12px 20px 16px !important; gap: 10px !important; }
#msgNativeRoot .msg-compose button[onclick="msgSend()"] { width: 34px !important; height: 34px !important; border-radius: 6px !important; padding: 0 !important; background-size: 16px 16px !important; }
#msgNativeRoot .msg-quote-block { border-left: 3px solid #3b82f6; background: rgba(91,95,199,0.08); padding: 6px 10px; border-radius: 4px; margin-bottom: 6px; cursor: pointer; max-width: 100%; }
#msgNativeRoot .msg-quote-block:hover { background: rgba(91,95,199,0.16); }
#msgNativeRoot .msg-quote-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
#msgNativeRoot .msg-quote-name { font-size: 11px; font-weight: 600; color: #a5b4fc; }
#msgNativeRoot .msg-quote-time { font-size: 10px; color: #9ca3af; }
#msgNativeRoot .msg-quote-text { font-size: 12px; color: #d1d5db; line-height: 1.4; word-wrap: break-word; }
html[data-theme="light"] #msgNativeRoot .msg-quote-block { background: rgba(91,95,199,0.06) !important; }
html[data-theme="light"] #msgNativeRoot .msg-quote-name { color: #4338ca !important; }
html[data-theme="light"] #msgNativeRoot .msg-quote-time { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-quote-text { color: #374151 !important; }
#msgJumpPill { position: absolute; right: 24px; bottom: 96px; width: 38px; height: 38px; border-radius: 50%; background: #3b82f6; color: #fff; border: none; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 30; transition: transform 0.15s, opacity 0.15s; }
#msgJumpPill.show { display: flex; }
#msgJumpPill:hover { transform: translateY(-2px); background: #4f46e5; }
#msgNativeRoot .msg-chat { position: relative; }
#msgNativeRoot .msg-flash { animation: msgFlashAnim 1.2s ease-out; }
html[data-theme="light"] .msg-conv-list { scrollbar-color: #cbd5e1 transparent !important; }
html[data-theme="light"] .msg-messages { scrollbar-color: #cbd5e1 transparent !important; }
html[data-theme="light"] .msg-emoji-panel { background: #fff !important; border-color: #e2e8f0 !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; scrollbar-color: #cbd5e1 transparent !important; }
/* ────────────────────────────────────────────────────────────────── */
/* Build 783: bug fixes */
/* ────────────────────────────────────────────────────────────────── */
/* FIX 8: messages stick to the bottom of the chat pane when content
is shorter than the container. The first child gets margin-top:auto,
so flex column pushes everything down. Long content scrolls normally. */
#msgNativeRoot .msg-messages > *:first-child { margin-top: auto; }
/* Light-theme polish for the build-782 participants modal */
html[data-theme="light"] #msgPartModal > div {
background: #ffffff !important;
border-color: #e5e7eb !important;
color: #111827 !important;
}
html[data-theme="light"] #msgPartModal label {
color: #111827 !important;
}
html[data-theme="light"] #msgPartModal #msgPartList {
background: #f9fafb !important;
border-color: #e5e7eb !important;
}
html[data-theme="light"] #msgPartModal #msgPartSearch {
background: #ffffff !important;
border-color: #d1d5db !important;
color: #111827 !important;
}
/* Build 996 (#455145811) — group settings modal in light theme.
The modal renders with hardcoded dark-theme inline styles; these
selectors override them with !important so the modal matches the
rest of the light theme. WCAG: footer buttons get solid borders
and dark text so they don't look disabled. */
html[data-theme="light"] #msgPartModal #msgPartName,
html[data-theme="light"] #msgPartModal #msgPartTopic {
background: #ffffff !important;
border-color: #d1d5db !important;
color: #111827 !important;
}
html[data-theme="light"] #msgPartModal #msgPartName::placeholder,
html[data-theme="light"] #msgPartModal #msgPartTopic::placeholder,
html[data-theme="light"] #msgPartModal #msgPartSearch::placeholder {
color: #6b7280 !important;
}
html[data-theme="light"] #msgPartModal #msgPartMembers {
background: #f9fafb !important;
border-color: #e5e7eb !important;
color: #111827 !important;
}
html[data-theme="light"] #msgPartModal #msgPartMembersLabel {
color: #6b7280 !important;
}
html[data-theme="light"] #msgPartModal #msgPartCancel,
html[data-theme="light"] #msgPartModal #msgPartSave {
background: #ffffff !important;
border-color: #6b7280 !important;
color: #111827 !important;
}
html[data-theme="light"] #msgPartModal #msgPartSave {
background: #2563eb !important;
border-color: #1d4ed8 !important;
color: #ffffff !important;
}
html[data-theme="light"] #msgPartModal #msgPartClose {
color: #4b5563 !important;
}
html[data-theme="light"] #msgPartModal #msgPartLeave {
background: #ffffff !important;
border-color: #b91c1c !important;
color: #b91c1c !important;
}
/* ── Build 792: sent messages hug the right edge of the pane ── */
#msgNativeRoot .msg-messages { align-items: stretch; }
#msgNativeRoot .msg-sent-row { margin-left: auto !important; align-self: flex-end !important; max-width: 75%; }
#msgNativeRoot .msg-recv-row { margin-right: auto !important; align-self: flex-start !important; }
/* ── Build 792: Teams-style compose box ──
Build 1047: dropped `display: flex !important` so the inline
`style="display:none"` on #msgComposeFooter (HTML default + the
leave-group cleanup path) wins until msgSelectConv explicitly
shows it. Without the change, the compose footer was always
visible after a hard refresh — even when no conv was selected
and the welcome state was on screen — letting the user type a
message into nowhere. */
#msgNativeRoot .msg-compose.msg-compose-box {
padding: 12px 24px 18px !important;
background: #0f172a !important;
border-top: 1px solid #020617 !important;
gap: 0 !important;
}
/* When msgSelectConv shows the footer it sets style.display='flex'
inline, which now wins. The flex layout still applies because the
inline style is `flex`, and the children (msg-compose-inner +
msg-compose-actions) lay out correctly. */
#msgNativeRoot .msg-compose-inner {
flex: 1;
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: flex-end;
transition: border-color 0.15s;
min-width: 0;
}
#msgNativeRoot .msg-compose-inner > textarea#msgInput {
flex: 1;
min-width: 0;
}
#msgNativeRoot .msg-compose-inner:focus-within {
border-color: #3b82f6;
}
#msgNativeRoot .msg-compose-inner > textarea#msgInput {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 10px 16px !important;
color: #f5f5f7 !important;
font-size: 14px !important;
font-family: inherit !important;
resize: none !important;
min-height: 38px !important;
max-height: 140px !important;
line-height: 1.4 !important;
box-shadow: none !important;
overflow-y: auto !important;
}
#msgNativeRoot .msg-compose-inner > textarea#msgInput::placeholder {
color: #8a8a93 !important;
}
#msgNativeRoot .msg-compose-actions {
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px;
flex-shrink: 0;
}
#msgNativeRoot .msg-compose-act {
background: transparent !important;
border: none !important;
color: #c4c4cc !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 6px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
#msgNativeRoot .msg-compose-act:hover {
background: #424250 !important;
color: #f5f5f7 !important;
}
/* Buttons keep focus after click (native button behavior). Without an
explicit focus reset, browser default fills the button with a contrasting
surface color in light mode — looks like a dark navy emoji square on a
white compose bar. Match the resting transparent style instead. */
#msgNativeRoot .msg-compose-act:focus,
#msgNativeRoot .msg-compose-act:focus-visible,
#msgNativeRoot .msg-compose-act:active,
#msgNativeRoot .msg-compose-send:focus,
#msgNativeRoot .msg-compose-send:focus-visible,
#msgNativeRoot .msg-compose-send:active {
outline: none !important;
background: transparent !important;
}
#msgNativeRoot .msg-compose-act:focus-visible {
box-shadow: 0 0 0 2px rgba(59,130,246,0.45) !important;
}
#msgNativeRoot .msg-compose-sep {
display: inline-block;
width: 1px;
height: 20px;
background: #4a4a55;
margin: 0 6px;
flex-shrink: 0;
}
#msgNativeRoot .msg-compose-send {
background: transparent !important;
border: none !important;
color: #a9afe4 !important;
width: 34px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 6px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: auto;
}
#msgNativeRoot .msg-compose-send:hover {
background: #3b82f6 !important;
color: #ffffff !important;
}
#msgNativeRoot .msg-compose-send:disabled {
color: #5a5a66 !important;
cursor: not-allowed;
}
/* Light theme */
html[data-theme="light"] #msgNativeRoot .msg-compose.msg-compose-box {
background: #ffffff !important;
border-top-color: #e5e7eb !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-inner {
background: #f3f4f6 !important;
border-color: #e5e7eb !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-inner:focus-within {
border-color: #3b82f6 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-inner > textarea#msgInput {
color: #111827 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-inner > textarea#msgInput::placeholder {
color: #9ca3af !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-act {
color: #1f2937 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-act:hover {
background: #e5e7eb !important;
color: #111827 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-sep {
background: #d1d5db !important;
}
html[data-theme="light"] #msgNativeRoot .msg-compose-send {
color: #3b82f6 !important;
}
/* Bug 5: additional light-theme overrides for Messenger */
html[data-theme="light"] .msg-typing-indicator { color: #3b82f6; }
html[data-theme="light"] .msg-group-avatar { background: #7c3aed20 !important; color: #6d28d9 !important; border-color: #c4b5fd !important; }
html[data-theme="light"] .msg-group-members { color: var(--text-secondary); }
html[data-theme="light"] .msg-group-sender { color: var(--text-primary); font-weight: 600; }
html[data-theme="light"] .msg-new-modal-box select { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); }
html[data-theme="light"] .msg-new-modal-box .msg-member-checklist label { color: var(--text-primary); }
html[data-theme="light"] .msg-new-modal-box .msg-member-checklist label:hover { background: var(--bg-hover); }
html[data-theme="light"] .msg-chat-actions button { color: var(--text-secondary); }
html[data-theme="light"] .msg-chat-actions button:hover { color: var(--text-primary); background: var(--bg-hover); }
html[data-theme="light"] .msg-compose input,
html[data-theme="light"] .msg-compose textarea { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); }
html[data-theme="light"] .msg-conv-name { color: var(--text-primary); }
html[data-theme="light"] .msg-conv-time { color: var(--text-secondary); }
/* Build 960 — Messenger light-theme + accessibility bundle.
Closes seq 123 (pinned bar dark + low-contrast input icons),
124 (chat title invisible), 143 (forwarded/quoted contrast),
152 (in-chat search highlight breaks layout), 155 (mute icon
contrast in dark theme), 156 (link contrast in both themes). */
/* seq 123 — Pinned messages bar in light theme: white bg, dark text.
Build 1038: added #msgNativeRoot prefix to match the dark-theme rule's
specificity (1,1,0). Without it, the dark `#msgNativeRoot .msg-pinned-bar`
rule at line 948 beats the unprefixed light rule and the bar stays dark. */
html[data-theme="light"] #msgNativeRoot .msg-pinned-bar,
html[data-theme="light"] .msg-pinned-bar {
background: #f1f5f9 !important;
color: #1e3a5f !important;
border-bottom: 1px solid #e5e7eb !important;
}
html[data-theme="light"] #msgNativeRoot .msg-pinned-bar:hover,
html[data-theme="light"] .msg-pinned-bar:hover { background: #e2e8f0 !important; }
html[data-theme="light"] .msg-pinned-panel { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .msg-pinned-panel h4 { color: #111827 !important; }
html[data-theme="light"] .msg-pinned-item { background: #f9fafb !important; color: #1f2937 !important; border: 1px solid #e5e7eb; }
html[data-theme="light"] .msg-pinned-item:hover { background: #f3f4f6 !important; }
html[data-theme="light"] .msg-pinned-item-sender { color: #2563eb !important; }
html[data-theme="light"] .msg-pinned-item-time { color: #6b7280 !important; }
/* seq 123 — Compose input icons (attach, emoji, send) need stronger color in light theme */
html[data-theme="light"] .msg-compose button,
html[data-theme="light"] .msg-compose .msg-icon-btn,
html[data-theme="light"] .msg-compose svg { color: #475569 !important; stroke: #475569; }
html[data-theme="light"] .msg-compose button:hover { color: #111827 !important; }
/* seq 124 — Chat header title in light theme */
html[data-theme="light"] .msg-chat-title,
html[data-theme="light"] .msg-chat-header .msg-title,
html[data-theme="light"] .msg-chat-name { color: #111827 !important; font-weight: 600; }
/* seq 143 — Reply/quote block, Teams-style.
Build 1052: subtle wash background, 3px accent bar, 2-line ellipsized body,
distinct treatment for sent (blue bubble) vs received (dark bubble). */
.msg-quote-block,
#msgNativeRoot .msg-quote-block {
background: rgba(255,255,255,0.06) !important;
border-left: 3px solid #5b5fc7 !important;
border-radius: 6px !important;
padding: 6px 10px !important;
margin-bottom: 6px !important;
cursor: pointer;
max-width: 100%;
transition: background 0.12s ease;
}
.msg-quote-block:hover,
#msgNativeRoot .msg-quote-block:hover {
background: rgba(255,255,255,0.10) !important;
}
#msgNativeRoot .msg-quote-head {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
}
#msgNativeRoot .msg-quote-name {
font-size: 12px; font-weight: 600; color: #a5b4fc;
}
#msgNativeRoot .msg-quote-time {
font-size: 10px; color: rgba(255,255,255,0.55);
}
#msgNativeRoot .msg-quote-text {
font-size: 12px;
line-height: 1.35;
color: rgba(255,255,255,0.78);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
/* Sent (blue) bubble — quote stands out against blue with cream accent */
#msgNativeRoot .msg-bubble.sent .msg-quote-block {
background: rgba(255,255,255,0.16) !important;
border-left-color: #fde68a !important;
}
#msgNativeRoot .msg-bubble.sent .msg-quote-block:hover {
background: rgba(255,255,255,0.22) !important;
}
#msgNativeRoot .msg-bubble.sent .msg-quote-name { color: #fef3c7 !important; }
#msgNativeRoot .msg-bubble.sent .msg-quote-time { color: rgba(255,255,255,0.72) !important; }
#msgNativeRoot .msg-bubble.sent .msg-quote-text { color: rgba(255,255,255,0.95) !important; }
/* Light theme — clean white wash with indigo accent */
html[data-theme="light"] .msg-quote-block,
html[data-theme="light"] #msgNativeRoot .msg-quote-block {
background: rgba(91,95,199,0.06) !important;
border-left-color: #5b5fc7 !important;
}
html[data-theme="light"] .msg-quote-block:hover,
html[data-theme="light"] #msgNativeRoot .msg-quote-block:hover {
background: rgba(91,95,199,0.12) !important;
}
html[data-theme="light"] #msgNativeRoot .msg-quote-name { color: #4338ca !important; }
html[data-theme="light"] #msgNativeRoot .msg-quote-time { color: #6b7280 !important; }
html[data-theme="light"] #msgNativeRoot .msg-quote-text { color: #374151 !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble.sent .msg-quote-block {
background: rgba(255,255,255,0.20) !important;
border-left-color: #fde68a !important;
}
html[data-theme="light"] #msgNativeRoot .msg-bubble.sent .msg-quote-name { color: #fef3c7 !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble.sent .msg-quote-time { color: rgba(255,255,255,0.72) !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble.sent .msg-quote-text { color: #ffffff !important; }
.msg-forwarded-label {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(148,163,184,0.18);
color: #94a3b8;
padding: 1px 6px;
border-radius: 4px;
margin-bottom: 4px;
}
html[data-theme="light"] .msg-forwarded-label { background: #e5e7eb; color: #4b5563; }
/* seq 152 — Search highlight must not break message layout */
.msg-bubble mark,
.msg-bubble .msg-search-hit,
#msgNativeRoot mark {
background: rgba(250,204,21,0.55);
color: inherit;
padding: 0 1px;
border-radius: 2px;
display: inline;
white-space: inherit;
font: inherit;
}
html[data-theme="light"] .msg-bubble mark,
html[data-theme="light"] #msgNativeRoot mark { background: #fef08a; color: #111827; }
/* seq 155 — Muted chat icon needs more contrast in dark theme (sidebar) */
.msg-conv-item .msg-mute-icon,
.msg-conv-mute,
.msg-mute-indicator {
color: #cbd5e1;
opacity: 0.95;
stroke: #cbd5e1;
stroke-width: 2.4;
}
html[data-theme="light"] .msg-conv-item .msg-mute-icon,
html[data-theme="light"] .msg-conv-mute,
html[data-theme="light"] .msg-mute-indicator { color: #475569; stroke: #475569; }
/* seq 156 — Hyperlinks inside message bubbles. Contrast against both my-bubble (blue) and other-bubble (gray) */
.msg-bubble a,
.msg-bubble .msg-link,
#msgNativeRoot .msg-bubble a {
color: #ffffff !important;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.msg-bubble:not(.me) a,
.msg-bubble:not(.me) .msg-link {
color: #93c5fd !important;
}
html[data-theme="light"] .msg-bubble:not(.me) a,
html[data-theme="light"] .msg-bubble:not(.me) .msg-link { color: #1d4ed8 !important; }
html[data-theme="light"] .msg-bubble.me a,
html[data-theme="light"] .msg-bubble.me .msg-link { color: #ffffff !important; }
.msg-bubble a:hover { text-decoration-thickness: 2px; }
/* Build 961 — second messenger UX bundle.
seq 131 (read receipts), 132 (pinned bar click area), 135 (toolbar overlap),
164 (input scrollbar), 168 (reaction emoji size). */
/* seq 131 — Read receipt checkmarks: pull out of text flow, pin bottom-right */
.msg-bubble { position: relative; padding-bottom: 18px; }
.msg-bubble .msg-status,
.msg-bubble .msg-meta {
position: absolute;
right: 8px;
bottom: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
line-height: 1;
margin: 0;
vertical-align: baseline;
}
.msg-bubble .msg-status svg { width: 12px; height: 12px; }
/* seq 132 — Pinned bar: full-width clickable */
.msg-pinned-bar {
width: 100%;
cursor: pointer;
user-select: none;
}
.msg-pinned-bar > * { pointer-events: none; }
.msg-pinned-bar button,
.msg-pinned-bar a,
.msg-pinned-bar input { pointer-events: auto; }
.msg-pinned-item { cursor: pointer; }
/* seq 135 — Action toolbar: lift above the bubble instead of overlapping content */
.msg-bubble .msg-actions,
.msg-bubble .msg-action-bar {
position: absolute;
top: -28px;
right: 4px;
display: none;
background: #1e293b;
border: 1px solid #334155;
border-radius: 18px;
padding: 2px 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 5;
white-space: nowrap;
}
/* Build 993 (#457072280) — bridge the hover gap between bubble and toolbar.
The toolbar sits at top:-28px with no overlap, so the cursor moving from
the bubble up to the toolbar would briefly leave the hoverable area and
trigger :hover off → menu hides → user can't click it. The transparent
::after pseudo-element extends the toolbar's hitbox down to the bubble's
top edge so the transition is seamless. */
.msg-bubble .msg-actions::after,
.msg-bubble .msg-action-bar::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 6px;
background: transparent;
}
.msg-bubble:hover .msg-actions,
.msg-bubble:hover .msg-action-bar { display: inline-flex; align-items: center; gap: 2px; }
html[data-theme="light"] .msg-bubble .msg-actions,
html[data-theme="light"] .msg-bubble .msg-action-bar {
background: #ffffff;
border-color: #e5e7eb;
box-shadow: 0 2px 8px rgba(15,23,42,0.08);
}
/* seq 164 — Compose input scrollbar layout */
.msg-compose textarea,
.msg-compose .msg-input,
#msgInput {
overflow-y: auto;
max-height: 160px;
padding-right: 12px !important;
box-sizing: border-box;
resize: none;
}
/* seq 168 — Reaction emoji size + hit area */
.msg-reaction-chip { font-size: 14px; line-height: 1; padding: 4px 10px; min-height: 28px; }
.msg-reaction-chip span,
.msg-reaction-chip .reaction-emoji { font-size: 15px; }
.msg-reaction-chip .reaction-count { font-size: 11px; margin-left: 4px; }
/* Build 966 (seq 163) — Markdown inline styles. Code spans get a subtle
monospace background; bold/italic/strike are intrinsic. */
.msg-bubble code.msg-code,
#msgNativeRoot code.msg-code {
font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
font-size: 0.92em;
background: rgba(15,23,42,0.55);
color: #f1f5f9;
padding: 1px 5px;
border-radius: 4px;
}
.msg-bubble.me code.msg-code { background: rgba(255,255,255,0.18); color: #ffffff; }
html[data-theme="light"] .msg-bubble code.msg-code,
html[data-theme="light"] #msgNativeRoot code.msg-code {
background: #e5e7eb;
color: #111827;
}
html[data-theme="light"] .msg-bubble.me code.msg-code { background: rgba(255,255,255,0.25); color: #ffffff; }
.msg-bubble del,
#msgNativeRoot del { text-decoration: line-through; opacity: 0.85; }
/* ─────────────────────────────────────────────────────────────
Build 1006/1009/1011 Phase B — messenger narrow-viewport rules.
The conv list (.msg-sidebar 280px) + chat pane sit side-by-side
on desktop. Below ~768px the chat is squeezed into a strip with
composer + reply visible behind the sidebar overlay. The pattern
is a full-screen swap: list OR chat, never both. The sidebar
full-width covers the chat completely. Two escape hatches:
• back-btn in chat-head → re-opens the conv list
• close-btn in conv-list head → dismisses the list to reveal chat
Both injected by messenger.js (_msgEnsureBackBtn, _msgEnsureCloseBtn).
Breakpoint 768px (vs the global 640px) because the messenger's
two-pane layout breaks even on tablets / narrow desktop windows.
───────────────────────────────────────────────────────────── */
.msg-back-btn,
.msg-close-btn,
.msg-empty-show-list-btn { display: none; }
@media (max-width: 768px) {
/* Build 1017 — selector specificity must match `#msgNativeRoot
.msg-sidebar` (1,1,0) which sets `width: 320px` for the native
scaffold. Plain `.msg-sidebar` (0,1,0) loses the cascade and
leaves a 92px strip of chat showing through on a 412px viewport. */
#msgNativeRoot .msg-sidebar,
.msg-sidebar {
position: absolute; top: 0; left: 0;
width: 100%; max-width: 100%; min-width: 0;
height: 100%;
z-index: 30;
box-shadow: 4px 0 16px rgba(0,0,0,0.45);
transition: transform 0.22s ease;
}
#msgNativeRoot .msg-sidebar.collapsed,
.msg-sidebar.collapsed {
transform: translateX(-100%);
width: 100%; min-width: 0; /* override desktop `width:0` collapsed */
border-right: none;
box-shadow: none;
}
.msg-back-btn,
.msg-close-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: none; border: 1px solid var(--border, #334155);
border-radius: 8px;
color: var(--text-secondary, #94a3b8);
font-size: 22px; line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.msg-back-btn { margin-right: 4px; }
.msg-close-btn { margin-left: auto; }
.msg-back-btn:hover,
.msg-close-btn:hover {
color: var(--accent-text, #60a5fa);
border-color: var(--accent, #3b82f6);
}
/* Build 1012 — fallback button inside the empty-state. Visible only
when narrow viewport so it doesn't clutter desktop. */
.msg-empty-show-list-btn {
display: inline-flex; align-items: center; justify-content: center;
margin-top: 12px; padding: 10px 18px;
background: var(--accent, #3b82f6); color: #fff;
border: none; border-radius: 8px;
font-size: 13px; font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.msg-empty-show-list-btn:hover { filter: brightness(1.1); }
/* Chat pane occupies the full row when sidebar is collapsed. */
.msg-chat { min-width: 0; }
.msg-chat-head { padding: 10px 12px; gap: 8px; }
.msg-bubble { max-width: 85%; }
.msg-recv-row { max-width: 90%; }
.msg-img-attachment { max-width: 100%; max-height: 240px; }
.msg-attach-chip,
.msg-file-attachment { max-width: 100%; }
/* Composer toolbar: wrap so emoji/attach/voice icons don't push
the send button off-screen. */
.msg-composer { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.msg-emoji-panel,
.msg-emoji-picker { max-width: calc(100vw - 24px); }
.msg-filter-bar { padding: 8px 10px; }
}
/* Build 1033 — messenger UI bundle.
seq 123 (compose icon contrast), 140 (forwarded label),
179 (edited tag contrast), 203 (group settings members in light theme),
207 (deleted message bubble proportions). */
/* seq 179 — "(edited)" tag must remain readable on both bubble colors and themes. */
.msg-bubble .msg-edited-tag {
font-size: 10px;
font-style: italic;
margin-left: 4px;
opacity: 1;
}
.msg-bubble.sent .msg-edited-tag,
.msg-bubble.me .msg-edited-tag { color: rgba(255,255,255,0.85); }
.msg-bubble.received .msg-edited-tag { color: #94a3b8; }
html[data-theme="light"] .msg-bubble.sent .msg-edited-tag,
html[data-theme="light"] .msg-bubble.me .msg-edited-tag { color: rgba(255,255,255,0.92); }
html[data-theme="light"] .msg-bubble.received .msg-edited-tag { color: #475569; }
/* Build 1055 — inline edit editor (Slack/Teams style). Lives inside
.msg-text, replaces text with a growable textarea + Save/Cancel.
Hover toolbar is hidden while editing so it doesn't fight focus. */
#msgNativeRoot .msg-bubble.msg-editing .msg-bubble-actions { display: none !important; }
#msgNativeRoot .msg-edit-inline { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
#msgNativeRoot .msg-edit-input {
width: 100%;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 6px;
padding: 6px 8px;
color: inherit;
font: inherit;
line-height: 1.45;
resize: none;
outline: none;
min-height: 28px;
max-height: 240px;
box-sizing: border-box;
}
#msgNativeRoot .msg-edit-input:focus { border-color: #93c5fd; }
#msgNativeRoot .msg-edit-bar {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
}
#msgNativeRoot .msg-edit-hint { flex: 1; opacity: 0.7; }
#msgNativeRoot .msg-edit-error {
font-size: 12px;
font-weight: 600;
color: #fee2e2;
background: rgba(239,68,68,0.18);
border: 1px solid rgba(239,68,68,0.55);
border-radius: 5px;
padding: 5px 10px;
}
/* tk_1777895402089 — light-theme variant: dark red on pale-red background
so the validation error meets WCAG AA contrast (≥ 4.5:1). The dark-theme
#fee2e2 on dark works fine, but in light it'd be light-on-light. */
html[data-theme="light"] #msgNativeRoot .msg-edit-error {
color: #991b1b;
background: #fee2e2;
border-color: #fca5a5;
}
#msgNativeRoot .msg-edit-cancel,
#msgNativeRoot .msg-edit-save {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: inherit;
border-radius: 5px;
padding: 3px 12px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
}
#msgNativeRoot .msg-edit-save {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
#msgNativeRoot .msg-edit-save:hover:not(:disabled) { background: #1d4ed8; }
#msgNativeRoot .msg-edit-save:disabled { opacity: 0.6; cursor: default; }
#msgNativeRoot .msg-edit-cancel:hover { background: rgba(255,255,255,0.08); }
/* Light-theme adjustments — readable on white card backgrounds */
html[data-theme="light"] #msgNativeRoot .msg-edit-input {
background: rgba(255,255,255,0.85);
border-color: rgba(0,0,0,0.18);
color: #1f2937;
}
html[data-theme="light"] #msgNativeRoot .msg-edit-cancel {
border-color: rgba(0,0,0,0.18);
color: #374151;
}
html[data-theme="light"] #msgNativeRoot .msg-edit-cancel:hover { background: rgba(0,0,0,0.05); }
/* seq 207 — Deleted-message tombstone styled like Teams: outlined chip,
transparent fill, italic muted text, hugs its own width.
Build 1050: solid 1px border (was dashed), transparent bg, slightly more
horizontal padding to match the Teams reference. */
#msgNativeRoot .msg-bubble.deleted-msg,
.msg-bubble.deleted-msg {
max-width: max-content !important;
align-self: flex-end;
padding: 6px 14px !important;
background: transparent !important;
border: 1px solid rgba(148,163,184,0.45) !important;
color: #94a3b8 !important;
font-style: italic;
min-height: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
}
#msgNativeRoot .msg-recv-row .msg-bubble.deleted-msg,
.msg-recv-row .msg-bubble.deleted-msg {
align-self: flex-start;
}
#msgNativeRoot .msg-bubble.deleted-msg em,
.msg-bubble.deleted-msg em { font-size: 12px; font-weight: 400; font-style: italic; }
/* No timestamp/avatar/actions on a tombstone — keep it minimal. */
#msgNativeRoot .msg-bubble.deleted-msg .msg-bubble-time,
.msg-bubble.deleted-msg .msg-bubble-time { display: none !important; }
#msgNativeRoot .msg-bubble.deleted-msg .msg-bubble-actions,
.msg-bubble.deleted-msg .msg-bubble-actions { display: none !important; }
html[data-theme="light"] #msgNativeRoot .msg-bubble.deleted-msg,
html[data-theme="light"] .msg-bubble.deleted-msg {
background: transparent !important;
border-color: #d1d5db !important;
color: #6b7280 !important;
}
/* seq 123 (re-fix) — Compose input icons need stronger contrast in BOTH themes.
Earlier build 960 only patched light. Dark-theme icons rendered with hardcoded
#475569 on a near-black input bar — barely visible. */
.msg-attach-btn,
.msg-compose .msg-icon-btn,
.msg-emoji-toggle {
color: #cbd5e1;
}
.msg-attach-btn svg,
.msg-compose .msg-icon-btn svg,
.msg-emoji-toggle svg { stroke: currentColor; opacity: 1; }
.msg-attach-btn:hover,
.msg-compose .msg-icon-btn:hover,
.msg-emoji-toggle:hover { color: #f1f5f9; background: rgba(148,163,184,0.10); }
html[data-theme="light"] .msg-attach-btn,
html[data-theme="light"] .msg-compose .msg-icon-btn,
html[data-theme="light"] .msg-emoji-toggle { color: #334155; }
html[data-theme="light"] .msg-attach-btn:hover,
html[data-theme="light"] .msg-compose .msg-icon-btn:hover,
html[data-theme="light"] .msg-emoji-toggle:hover { color: #0f172a; background: #e2e8f0; }
/* seq 140 — Forwarded label rendered as a distinct chip, not "[Forwarded]" plain text.
The label element exists (.msg-forwarded-label, build 961). Strengthen its visibility
so it can't be mistaken for typed-in text. */
.msg-forwarded-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(96,165,250,0.16);
color: #93c5fd;
padding: 2px 7px;
border-radius: 4px;
margin-bottom: 5px;
border: 1px solid rgba(96,165,250,0.25);
}
.msg-bubble.sent .msg-forwarded-label,
.msg-bubble.me .msg-forwarded-label {
background: rgba(255,255,255,0.18);
color: #ffffff;
border-color: rgba(255,255,255,0.30);
}
html[data-theme="light"] .msg-forwarded-label {
background: #dbeafe;
color: #1d4ed8;
border-color: #93c5fd;
}
html[data-theme="light"] .msg-bubble.sent .msg-forwarded-label,
html[data-theme="light"] .msg-bubble.me .msg-forwarded-label {
background: rgba(255,255,255,0.22);
color: #ffffff;
border-color: rgba(255,255,255,0.40);
}
/* seq 203 — Group settings: member name list must be legible in light theme.
The covering containers are .msg-members-list / .msg-group-settings .msg-member-name.
Existing rule for .msg-group-members (line 1541) styles secondary metadata only. */
html[data-theme="light"] .msg-members-list,
html[data-theme="light"] .msg-members-list .msg-member-name,
html[data-theme="light"] .msg-group-settings .msg-member-name,
html[data-theme="light"] .msg-group-settings .msg-member-row,
html[data-theme="light"] .msg-group-settings .msg-member-row * {
color: var(--text-primary, #0f172a) !important;
}
html[data-theme="light"] .msg-group-settings .msg-member-meta,
html[data-theme="light"] .msg-group-settings .msg-member-row .msg-member-meta {
color: var(--text-secondary, #475569) !important;
}
/* ════════════════════════════════════════════════════════════════════════
Build 1038 — light-theme specificity correction bundle (TK-123 follow-up)
════════════════════════════════════════════════════════════════════════
Each of the dark `#msgNativeRoot .X` rules higher up in this file has
specificity (1,1,0) with !important. The matching light-theme rules were
written as `html[data-theme="light"] .X` which is only (0,2,1) — even
with !important, the dark rule wins, so the native messenger stayed dark
inside light theme.
This block re-applies each light-theme override with the `#msgNativeRoot`
prefix so the rules tie on specificity and the later-declared light rule
takes effect. Same colors as the unprefixed versions above; just
guaranteeing they actually paint inside the native messenger root. */
html[data-theme="light"] #msgNativeRoot .msg-attach-preview {
background: var(--bg-surface, #f9fafb) !important;
border-color: var(--border, #e5e7eb) !important;
border-top: 1px solid var(--border, #e5e7eb) !important;
}
html[data-theme="light"] #msgNativeRoot .msg-typing-indicator {
color: #2563eb !important;
}
/* TK-208 (build 1059): exclude per-user `style="background:hsl(...)"` so the
uniform blue light-theme override doesn't strip avatar identity. The
:not() filter makes the rule not match inline-styled elements at all. */
html[data-theme="light"] #msgNativeRoot .msg-conv-avatar:not([style*="background"]) {
background: #dbeafe !important;
border-color: #93c5fd !important;
color: #1d4ed8 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-recv-avatar:not([style*="background"]) {
background: #dbeafe !important;
color: #1d4ed8 !important;
border-color: #93c5fd !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
html[data-theme="light"] #msgNativeRoot .msg-group-avatar {
background: #ede9fe !important;
color: #6d28d9 !important;
border-color: #c4b5fd !important;
}
html[data-theme="light"] #msgNativeRoot .msg-conv-list {
background: #ffffff !important;
}
html[data-theme="light"] #msgNativeRoot .msg-chat-head-name {
color: #111827 !important;
}
html[data-theme="light"] #msgNativeRoot .msg-mention-dropdown-item {
color: #111827 !important;
background: #ffffff !important;
}
html[data-theme="light"] #msgNativeRoot .msg-mention-dropdown-item:hover,
html[data-theme="light"] #msgNativeRoot .msg-mention-dropdown-item.active {
background: #f3f4f6 !important;
}
/* ════════════════════════════════════════════════════════════════════════
Build 1044 — @mention accent (inline, no chip)
════════════════════════════════════════════════════════════════════════
Build 1039/1040 wrapped mentions in an inline-block "chip" with a tinted
background. On wrapped bubbles the chip broke onto its own visual line
between words — Igor wants the mention to stay inline with surrounding
text and only the name to be color-accented (Slack/Teams-style). */
.msg-bubble .msg-mention,
#msgNativeRoot .msg-mention {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
font-weight: 600;
cursor: pointer;
/* Received bubble (dark): light blue ink, plain text in flow */
color: #93c5fd;
}
.msg-bubble .msg-mention:hover,
#msgNativeRoot .msg-mention:hover {
text-decoration: underline;
background: transparent;
}
/* Sent (blue) bubble — bubble text is already white, so the mention needs
a different hue to actually look "accented". Warm amber pops on blue
without screaming. */
.msg-bubble.sent .msg-mention,
.msg-bubble.me .msg-mention,
#msgNativeRoot .msg-bubble.sent .msg-mention,
#msgNativeRoot .msg-bubble.me .msg-mention {
color: #fde68a;
background: transparent;
}
/* Received bubble in light theme: dark-blue ink */
html[data-theme="light"] .msg-bubble .msg-mention,
html[data-theme="light"] #msgNativeRoot .msg-mention {
color: #1d4ed8;
background: transparent;
}
/* Sent bubble in light theme keeps the same amber accent (bubble is blue) */
html[data-theme="light"] .msg-bubble.sent .msg-mention,
html[data-theme="light"] .msg-bubble.me .msg-mention,
html[data-theme="light"] #msgNativeRoot .msg-bubble.sent .msg-mention,
html[data-theme="light"] #msgNativeRoot .msg-bubble.me .msg-mention {
color: #fde68a;
background: transparent;
}
/* Build 1048: .msg-text wrapper keeps the inline mention span in flow.
Without it the bubble's `display: flex; flex-direction: column;` turns
each text run + each into its own anonymous flex item, so a
message like "@Anna Zubakova yes approved" stacked the @mention on
one line and "yes approved" on the next. */
.msg-text,
#msgNativeRoot .msg-text {
display: block;
word-wrap: break-word;
white-space: pre-wrap;
}
/* ════════════════════════════════════════════════════════════════════════
Build 1041 — V2 mention dropdown active-row highlight
════════════════════════════════════════════════════════════════════════
The dropdown renders rows with `.msg-v2-mention-item` and toggles `.active`
on arrow-key navigation (or hover), but no CSS rule existed for the active
state — so users pressing ArrowUp/ArrowDown saw no visual change and
thought arrow keys were broken. */
#msgV2MentionDropdown .msg-v2-mention-item.active,
#msgV2MentionDropdown .msg-v2-mention-item:hover {
background: rgba(96,165,250,0.18);
color: #f5f5f7;
outline: 0;
}
html[data-theme="light"] #msgV2MentionDropdown {
background: #ffffff !important;
border-color: #e5e7eb !important;
color: #111827 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] #msgV2MentionDropdown .msg-v2-mention-item {
color: #111827 !important;
}
html[data-theme="light"] #msgV2MentionDropdown .msg-v2-mention-item.active,
html[data-theme="light"] #msgV2MentionDropdown .msg-v2-mention-item:hover {
background: #dbeafe !important;
color: #1d4ed8 !important;
}
/* ── Build 1058 — TK-207: deleted-message tombstone size ─────────────
Prior fix made `.msg-bubble.deleted-msg` have `max-width: max-content`,
but the parent `.msg-sent-row` / `.msg-recv-row` keeps `max-width:
75%` of the chat container. When the row only contains a tombstone,
the chip itself is small but its row reserves 75% width — vertical
space comes from the bubble's default min-height. Constrain the row
itself when it carries only a deleted tombstone. */
#msgNativeRoot .msg-sent-row:has(> .msg-bubble.deleted-msg:only-child),
#msgNativeRoot .msg-recv-row:has(> .msg-bubble.deleted-msg:only-child),
.msg-sent-row:has(> .msg-bubble.deleted-msg:only-child),
.msg-recv-row:has(> .msg-bubble.deleted-msg:only-child) {
max-width: max-content !important;
min-height: 0 !important;
}
/* ── Build 1079 — Typing indicator + new-bubble slide-in ─────────────
Real-time presence cues: a "X is typing" bar above the composer and
a brief slide-in highlight on freshly-arrived messages. Mirror the
UX in Telegram/WhatsApp/Teams so a focused chat still gets a
peripheral signal that activity is happening. */
.msg-typing-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
font-size: 12px;
color: var(--text-muted, #94a3b8);
background: transparent;
min-height: 22px;
user-select: none;
}
.msg-typing-bar .msg-typing-label { font-style: italic; }
.msg-typing-bar .msg-typing-dots {
display: inline-flex;
gap: 3px;
align-items: center;
}
.msg-typing-bar .msg-typing-dots i {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
animation: msgTypingBlink 1.2s infinite ease-in-out;
}
.msg-typing-bar .msg-typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.msg-typing-bar .msg-typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes msgTypingBlink {
0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-2px); }
}
/* New-bubble highlight — fades in over 0.55s, then a soft glow ring
for another 0.15s so a glanced-back user catches the motion. */
.msg-bubble.msg-bubble-new {
animation: msgBubbleSlideIn 0.55s ease-out;
}
@keyframes msgBubbleSlideIn {
0% { transform: translateY(8px) scale(0.985); opacity: 0; box-shadow: 0 0 0 0 rgba(99,102,241,0.0); }
60% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(99,102,241,0.0); }
}