/* Widget de présence + messagerie interne (DM). * * Composant flottant injecté sur toutes les pages admin (cf. UNFOLD["SCRIPTS"]). * Suit le pattern CSS custom du projet : couleurs explicites + overrides `.dark` * (Unfold pose la classe `dark` sur ). Voir aussi adelie_admin.css. */ :root { --chat-bg: #ffffff; --chat-bg-alt: #f3f4f6; --chat-border: #e5e7eb; --chat-text: #1f2937; --chat-muted: #6b7280; --chat-primary: #1565c0; --chat-primary-hover: #0d47a1; --chat-on-primary: #ffffff; --chat-online: #22c55e; --chat-offline: #ef4444; --chat-unread: #ef4444; } html.dark { --chat-bg: #1f2937; --chat-bg-alt: #374151; --chat-border: #374151; --chat-text: #e5e7eb; --chat-muted: #9ca3af; --chat-primary: #64b5f6; --chat-primary-hover: #90caf9; --chat-on-primary: #0b1220; --chat-online: #22c55e; --chat-offline: #ef4444; --chat-unread: #ef4444; } #chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9998; font-size: 14px; color: var(--chat-text); } #chat-widget * { box-sizing: border-box; } /* ── Bulle repliée ── */ .chat-bubble { width: 56px; height: 56px; border-radius: 9999px; border: none; background: var(--chat-primary); color: var(--chat-on-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: background .15s ease; } .chat-bubble:hover { background: var(--chat-primary-hover); } .chat-bubble .material-symbols-outlined, .chat-bubble .material-icons { font-size: 26px; } .chat-bubble-badge, .chat-contact-badge { background: var(--chat-unread); color: #fff; border-radius: 9999px; font-size: 11px; line-height: 1; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .chat-bubble-badge { position: absolute; top: -2px; right: -2px; border: 2px solid var(--chat-bg); } /* ── Panneau ── */ .chat-panel { width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100vh - 100px)); background: var(--chat-bg); border: 1px solid var(--chat-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .chat-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--chat-border); background: var(--chat-bg-alt); } .chat-header .chat-title { font-weight: 600; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .chat-header .chat-title span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-iconbtn { background: none; border: none; cursor: pointer; color: var(--chat-muted); display: flex; align-items: center; padding: 4px; border-radius: 6px; } .chat-iconbtn:hover { color: var(--chat-text); background: var(--chat-border); } /* ── Liste des contacts ── */ .chat-contacts { flex: 1; overflow-y: auto; } .chat-contact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid var(--chat-border); cursor: pointer; color: var(--chat-text); text-align: left; } .chat-contact:hover { background: var(--chat-bg-alt); } .chat-contact .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-empty { padding: 24px 16px; text-align: center; color: var(--chat-muted); } .chat-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; background: var(--chat-offline); } .chat-dot.online { background: var(--chat-online); } /* ── Fil de conversation ── */ .chat-thread { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; } .chat-loadmore { align-self: center; background: none; border: 1px solid var(--chat-border); color: var(--chat-muted); border-radius: 9999px; padding: 3px 12px; font-size: 12px; cursor: pointer; margin-bottom: 4px; } .chat-loadmore:hover { color: var(--chat-text); } .chat-msg { max-width: 78%; padding: 7px 10px; border-radius: 12px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; } .chat-msg.mine { align-self: flex-end; background: var(--chat-primary); color: var(--chat-on-primary); border-bottom-right-radius: 4px; } .chat-msg.theirs { align-self: flex-start; background: var(--chat-bg-alt); color: var(--chat-text); border-bottom-left-radius: 4px; } .chat-msg .chat-time { display: block; font-size: 10px; opacity: .7; margin-top: 2px; } /* ── Zone de saisie ── */ .chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--chat-border); align-items: flex-end; } .chat-compose textarea { flex: 1; resize: none; border: 1px solid var(--chat-border); border-radius: 8px; padding: 8px; background: var(--chat-bg); color: var(--chat-text); font: inherit; max-height: 96px; } .chat-compose textarea:focus { outline: none; border-color: var(--chat-primary); } .chat-send { border: none; background: var(--chat-primary); color: var(--chat-on-primary); border-radius: 8px; padding: 0 12px; height: 38px; cursor: pointer; display: flex; align-items: center; } .chat-send:hover { background: var(--chat-primary-hover); } .chat-send:disabled { opacity: .5; cursor: default; } .chat-hidden { display: none !important; }