/** * Thème type iMessage (mode sombre) — OkDak * À charger après messages-styles.css. * Requiert apple-tokens.css (chargé dans le ). */ body.messages-app { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Base boutons (cohérent PC + mobile) */ body.messages-app.page-messages button { -webkit-appearance: none; appearance: none; font: inherit; letter-spacing: inherit; line-height: 1; border: none; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 12px; border-radius: 12px; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12); } body.messages-app.page-messages button:disabled { opacity: 0.55; cursor: not-allowed; } body.messages-app.page-messages button i[data-lucide], body.messages-app.page-messages button svg.lucide { width: 18px; height: 18px; flex: 0 0 auto; } @media (max-width: 768px) { body.messages-app.page-messages button { min-width: 44px; min-height: 44px; } } body.messages-app ::selection { background: rgba(10, 132, 255, 0.35); color: #fff; } /* Couleurs système iOS / Messages (dark) — héritées par la descendance */ body.messages-app .messages-container { --im-blue: #0a84ff; --im-gray-bubble: #3a3a3c; --im-bg: #000000; --im-elevated: #1c1c1e; --im-input: #2c2c2e; --im-separator: rgba(84, 84, 88, 0.48); --msg-primary-color: #0a84ff; --msg-primary-dark: #0066cc; --msg-primary-light: #64b5ff; --msg-primary-gradient: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%); --msg-primary-glow: 0 1px 3px rgba(0, 122, 255, 0.35); --msg-secondary-color: #8e8e93; --msg-dark-bg: var(--im-bg); --msg-darker-bg: var(--im-elevated); --msg-darkest-bg: #0a0a0a; --msg-bg-glass: rgba(28, 28, 30, 0.94); --msg-bg-gradient: linear-gradient(180deg, #1c1c1e 0%, #000000 100%); --msg-light-text: #ffffff; --msg-text-secondary: rgba(235, 235, 245, 0.82); --msg-text-muted: rgba(235, 235, 245, 0.48); --msg-border-color: var(--im-separator); --msg-border-light: rgba(84, 84, 88, 0.32); --msg-message-bg: var(--im-gray-bubble); --msg-message-sent: var(--im-blue); --msg-accent: var(--im-blue); --msg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --msg-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --msg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --msg-glow: 0 0 12px rgba(10, 132, 255, 0.25); --msg-glow-strong: 0 0 16px rgba(10, 132, 255, 0.35); /* FaceTime / téléphone (système iOS) */ --im-face-green: #30d158; --im-face-red: #ff3b30; --im-face-gray: rgba(142, 142, 147, 0.45); --im-bubble-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); } body.messages-app .messages-container { background: var(--im-bg); color: var(--msg-light-text); } /* Layout iMessage (rangement) */ body.messages-app, body.messages-app.page-messages { background: var(--im-bg); } body.messages-app.page-messages .messages-container { height: 100vh; height: 100dvh; overflow: hidden !important; display: flex !important; align-items: stretch !important; } body.messages-app.page-messages .messages-container .conversations { flex: 0 0 340px !important; min-width: 320px !important; max-width: 420px !important; height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } body.messages-app.page-messages .sidebar-header { position: sticky; top: 0; z-index: 5; flex: 0 0 auto; } /* Onglets: on les garde, mais en “segmented control” iOS (rangement propre) */ body.messages-app.page-messages .sidebar-tabs { position: sticky; top: 56px; z-index: 6; background: var(--im-elevated); padding-bottom: 10px; flex: 0 0 auto; } body.messages-app.page-messages .tab-indicator { display: none !important; } body.messages-app.page-messages .sidebar-content { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* Panels: suivre la logique JS (.active) */ body.messages-app.page-messages .tab-panel { display: none !important; } body.messages-app.page-messages .tab-panel.active { display: flex !important; flex-direction: column !important; min-height: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; } body.messages-app.page-messages .tab-panel-header { flex: 0 0 auto; } body.messages-app.page-messages #tab-conversations .new-message { flex: 0 0 auto; } body.messages-app.page-messages #friendsQuickChat { flex: 1 1 auto; min-height: 0; overflow: auto; } body.messages-app.page-messages #tab-ai .ai-assistant-section { flex: 1 1 auto; min-height: 0; overflow: auto; } body.messages-app.page-messages .messages-container .chat { flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; } body.messages-app.page-messages .messages-container .chat-messages { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; } body.messages-app.page-messages .messages-container .chat-form { flex: 0 0 auto !important; position: sticky; bottom: 0; } @media (max-width: 768px) { /* Mobile: sidebar off-canvas + chat plein écran */ body.messages-app.page-messages .messages-container { position: relative; } body.messages-app.page-messages .messages-container .chat { width: 100%; } body.messages-app.page-messages .messages-container .conversations { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(360px, 85vw) !important; max-width: min(360px, 85vw) !important; min-width: 0 !important; transform: translateX(-105%); transition: transform 0.22s var(--apple-ease-out, ease); z-index: 21000; } body.messages-app.page-messages .messages-container .conversations.open { transform: translateX(0); } body.messages-app.page-messages #toggleSidebar { display: inline-flex; } body.messages-app.page-messages #closeSidebar { display: inline-flex; } } @media (min-width: 769px) { /* Desktop: sidebar fixe, pas d’overlay */ body.messages-app.page-messages #toggleSidebar { display: none; } body.messages-app.page-messages #closeSidebar { display: none; } body.messages-app.page-messages .sidebar-overlay { display: none !important; } } @media (min-width: 1024px) and (max-width: 1439px) { /* Laptop: resserrer la sidebar pour gagner de l'espace chat */ body.messages-app.page-messages .messages-container .conversations { flex-basis: 320px !important; min-width: 300px !important; max-width: 360px !important; } body.messages-app.page-messages .messages-container .chat { min-width: 0 !important; } } @media (min-width: 1440px) { /* Grand ecran: confort lecture (sidebar un peu plus large) */ body.messages-app.page-messages .messages-container .conversations { flex-basis: 380px !important; min-width: 340px !important; max-width: 440px !important; } } /* Panneau principal */ body.messages-app .messages-container .chat { background: var(--im-bg); } /* Liste conversations — lignes pleine largeur, séparateurs fins */ body.messages-app .messages-container .conversations { background: var(--im-elevated); border-right: 0.5px solid var(--im-separator); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } body.messages-app .messages-container .conversations li::before, body.messages-app .messages-container .conversations li::after { display: none; } body.messages-app .messages-container .conversations li { background: transparent; border: none; border-radius: 0; margin-bottom: 0; box-shadow: none; border-bottom: 0.5px solid var(--im-separator); padding: 12px 16px; transform: none; } body.messages-app .messages-container .conversations li:hover, body.messages-app .messages-container .conversations li.active { background: rgba(255, 255, 255, 0.08); transform: none; box-shadow: none; border-color: transparent; } body.messages-app .sidebar-header { background: var(--im-elevated); border-bottom: 0.5px solid var(--im-separator); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } body.messages-app .conversations-title { font-weight: 700; letter-spacing: -0.045em; font-size: 1.375rem; line-height: 1.15; } body.messages-app .conversations-title i { color: var(--im-blue); } /* Onglets type segmented control iOS */ body.messages-app .sidebar-tabs { background: rgba(118, 118, 128, 0.14); margin: 8px 12px 0; border-radius: 9px; padding: 2px; gap: 0; border: none; display: flex; } body.messages-app .sidebar-tab { color: rgba(235, 235, 245, 0.55); font-weight: 500; font-size: 0.8125rem; letter-spacing: -0.02em; border-radius: 7px; padding: 7px 10px; flex: 1 1 0; min-width: 0; justify-content: center; } /* Tabs: s’assurer que l’icône + texte sont bien centrés */ body.messages-app .sidebar-tab i[data-lucide], body.messages-app .sidebar-tab svg.lucide { width: 16px; height: 16px; } body.messages-app .sidebar-tab.active { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; } body.messages-app .sidebar-tab.active i { color: var(--im-blue); filter: none; transform: none; } body.messages-app .tab-indicator { display: none; } body.messages-app .sidebar-content, body.messages-app .tab-panel { background: var(--im-elevated); } body.messages-app .tab-panel-header { border-bottom-color: var(--im-separator); } /* Zone recherche */ body.messages-app .chat-search { background: var(--im-elevated); border-bottom: 0.5px solid var(--im-separator); } body.messages-app .chat-search input { background: rgba(118, 118, 128, 0.14); border: none; border-radius: 10px; color: #fff; font-size: 1rem; letter-spacing: -0.02em; } body.messages-app .chat-search input::placeholder { color: rgba(235, 235, 245, 0.45); } /* En-tête conversation * Pas de backdrop-filter ici : sinon le menu d’appel (position:fixed) est ancré au header, * clipé ou mal positionné — les appels audio/vidéo semblent « cassés ». */ body.messages-app .messages-container .chat-header { background: #1c1c1e; border-bottom: 0.5px solid var(--im-separator); color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; z-index: 100; } /* Bouton d’appel : zone cliquable stable, au-dessus du flex voisin */ body.messages-app .call-header-wrapper { flex-shrink: 0; position: relative; z-index: 120; overflow: visible; pointer-events: auto; } body.messages-app #callHeaderBtn { flex-shrink: 0; position: relative; z-index: 121; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15); color: var(--im-face-green) !important; background: rgba(48, 209, 88, 0.16) !important; border-radius: 50% !important; border: none !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; box-shadow: 0 0 0 0.5px rgba(48, 209, 88, 0.35); } body.messages-app #callHeaderBtn:hover { background: rgba(48, 209, 88, 0.26) !important; filter: brightness(1.05); } body.messages-app .call-type-dropdown { position: fixed; display: none; flex-direction: column; gap: 6px; pointer-events: none; z-index: 10050 !important; border-radius: 14px !important; padding: 6px !important; min-width: 188px !important; background: rgba(44, 44, 46, 0.98) !important; border: 0.5px solid rgba(255, 255, 255, 0.12) !important; box-shadow: var(--apple-shadow-float, 0 12px 40px rgba(0, 0, 0, 0.45)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.messages-app .call-type-dropdown.open { display: flex !important; pointer-events: auto; } body.messages-app .call-type-option { border-radius: 10px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; font-size: 1rem !important; color: #fff !important; } body.messages-app .call-type-option:hover { background: rgba(255, 255, 255, 0.1) !important; } body.messages-app .call-type-option i { color: var(--im-face-green) !important; } body.messages-app .call-type-option[data-call-type="video"] i { color: var(--im-blue) !important; } body.messages-app .chat-header-name { color: #fff; font-weight: 600; letter-spacing: -0.03em; } body.messages-app .chat-header-status { color: rgba(235, 235, 245, 0.55); } body.messages-app .typing-indicator { color: #8e8e93 !important; } /* Fil de messages */ body.messages-app .messages-container .chat-messages { display: flex; flex-direction: column; align-items: flex-start; background: var(--im-bg); scrollbar-color: rgba(255, 255, 255, 0.2) transparent; scrollbar-gutter: stable; padding-right: max(6px, env(safe-area-inset-right)); } body.messages-app .messages-container .chat-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 4px; } /* * Lisibilité : messages-styles applique un ::after en dégradé pleine bulle au survol * (effet « voile » / bande qui glisse) qui peut masquer le texte selon le moteur. * On le désactive et on remonte le contenu au-dessus de tout résidu. */ body.messages-app .messages-container .chat-message::after { display: none !important; content: none !important; opacity: 0 !important; pointer-events: none !important; } body.messages-app .messages-container .chat-message::before { display: none !important; content: none !important; } body.messages-app .messages-container .chat-message .message-content, body.messages-app .messages-container .chat-message .message-text, body.messages-app .messages-container .chat-message .message-image, body.messages-app .messages-container .chat-message .reaction-display { position: relative; z-index: 1; } body.messages-app .messages-container .chat-message .reaction-actions { z-index: 2; } /* Bulles — plus grandes, sans animation ni translation « slide » */ body.messages-app .messages-container .chat-message { background: var(--im-gray-bubble); border: none; box-shadow: var(--im-bubble-inset), 0 1px 2px rgba(0, 0, 0, 0.22); color: #ffffff; border-radius: 20px 20px 20px 8px; padding: 14px 18px 15px !important; width: fit-content; max-width: min(94%, 620px) !important; min-width: 0; flex-shrink: 0; align-self: flex-start; font-size: 1.0625rem !important; line-height: 1.45 !important; animation: none !important; transition: box-shadow 0.15s ease, background 0.15s ease !important; transform: none !important; -webkit-font-smoothing: antialiased; } body.messages-app .messages-container .chat-message.from-me { align-self: flex-end; background: var(--im-blue); border: none; box-shadow: var(--im-bubble-inset), 0 1px 3px rgba(0, 113, 227, 0.35); border-radius: 20px 20px 8px 20px; } body.messages-app .messages-container .chat-message:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transform: none !important; } body.messages-app .messages-container .chat-message.from-me:hover { box-shadow: 0 2px 10px rgba(0, 122, 255, 0.4); transform: none !important; } body.messages-app .chat-message .message-text { color: #ffffff; } body.messages-app .message-time { position: relative; z-index: 1; font-size: 0.6875rem !important; font-weight: 500 !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums; color: rgba(142, 142, 147, 0.95) !important; opacity: 1 !important; margin-top: 4px !important; } body.messages-app .messages-container .chat-message.from-me .message-time { text-align: right; color: rgba(255, 255, 255, 0.72) !important; } body.messages-app .chat-message:hover .message-time { color: rgba(255, 255, 255, 0.88) !important; } body.messages-app .date-separator { background: rgba(58, 58, 60, 0.88) !important; color: rgba(235, 235, 245, 0.72) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border: none !important; border-radius: 999px !important; padding: 6px 14px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Réactions — teinte bleue discrète */ body.messages-app .reaction-actions button:hover, body.messages-app .reaction-btn:hover { background: rgba(10, 132, 255, 0.22); border-color: rgba(10, 132, 255, 0.45); } /* Composer bas */ body.messages-app .messages-container .chat-form { background: var(--im-elevated); border-top: 0.5px solid var(--im-separator); box-shadow: none; padding-left: 10px !important; padding-right: 10px !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; gap: 6px !important; } body.messages-app .messages-container .chat-form textarea { background: var(--im-input) !important; color: #fff !important; border: none !important; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06) !important; border-radius: 22px !important; font-size: 1.0625rem !important; line-height: 1.35 !important; letter-spacing: -0.02em !important; min-height: 40px !important; } body.messages-app .messages-container .chat-form textarea:focus { box-shadow: inset 0 0 0 0.5px rgba(10, 132, 255, 0.45), 0 0 0 3px rgba(10, 132, 255, 0.25) !important; background: var(--im-input) !important; } /* Boutons + et emoji : style « tapis gris » ; envoi : bleu */ body.messages-app .messages-container .chat-form .more-actions-wrapper { background: transparent !important; box-shadow: none !important; } body.messages-app .messages-container .chat-form button[type="button"] { background: rgba(118, 118, 128, 0.28) !important; color: #fff !important; box-shadow: none !important; border-radius: 50% !important; padding: 0 !important; width: 40px; height: 40px; } body.messages-app .messages-container .chat-form button[type="button"]:hover { background: rgba(118, 118, 128, 0.4) !important; transform: scale(1.04); } body.messages-app .messages-container .chat-form button[type="submit"] { background: var(--im-blue) !important; color: #fff !important; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset, 0 2px 8px rgba(0, 122, 255, 0.4) !important; padding: 0 !important; width: 40px; height: 40px; border-radius: 50% !important; } body.messages-app .messages-container .chat-form button[type="submit"]:hover { background: #409cff !important; filter: none; } body.messages-app .messages-container .chat-form button::before { display: none; } body.messages-app .input-hint { color: rgba(235, 235, 245, 0.42); letter-spacing: -0.01em; } /* Nouvelle conversation */ body.messages-app .new-message { background: rgba(118, 118, 128, 0.12); border: 0.5px solid var(--im-separator); border-radius: 12px; padding: 8px; } body.messages-app .new-message input { background: var(--im-input); border: none; border-radius: 10px; color: #fff; padding: 10px 12px; } body.messages-app .new-message-btn { background: var(--im-blue); border-radius: 10px; color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 122, 255, 0.35); min-height: 40px; padding-inline: 14px; } body.messages-app .new-message-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Carte IA */ body.messages-app .ai-contact { background: rgba(118, 118, 128, 0.12); border: 0.5px solid var(--im-separator); } body.messages-app .ai-avatar { background: linear-gradient(145deg, #0a84ff, #5e5ce6); box-shadow: 0 2px 10px rgba(10, 132, 255, 0.35); } body.messages-app .ai-badge { background: var(--im-blue); box-shadow: none; } /* État vide */ body.messages-app .empty-chat-state { color: rgba(235, 235, 245, 0.55); } body.messages-app .empty-chat-title { color: #fff; font-weight: 600; letter-spacing: -0.03em; font-size: 1.25rem; } body.messages-app .empty-chat-emoji { font-size: 3rem; line-height: 1; filter: drop-shadow(0 4px 20px rgba(10, 132, 255, 0.25)); } body.messages-app .empty-chat-text { font-size: 1rem; line-height: 1.45; letter-spacing: -0.01em; } body.messages-app .sidebar-overlay.visible { background: rgba(0, 0, 0, 0.45) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; } body.messages-app .message-image { border-radius: 12px !important; overflow: hidden; } /* Toast */ body.messages-app .toast { background: rgba(58, 58, 60, 0.94); border: 0.5px solid var(--im-separator); border-radius: 12px; color: #fff; box-shadow: var(--apple-shadow-float, 0 12px 40px rgba(0, 0, 0, 0.45)); } /* Appels — bulles dans le mini chat */ body.messages-app .call-chat-messages .call-msg.from-me { background: rgba(10, 132, 255, 0.92); margin-left: 24px; } body.messages-app .call-chat-messages .call-msg.from-other { background: rgba(58, 58, 60, 0.95); margin-right: 24px; } body.messages-app .call-chat-form button { background: var(--im-blue) !important; border-radius: 10px; } /* —— FaceTime / appels : modale entrante —— */ body.messages-app #incomingCallModal { background: rgba(28, 28, 30, 0.97) !important; border: 0.5px solid rgba(255, 255, 255, 0.1) !important; border-radius: 28px !important; box-shadow: var(--apple-shadow-float, 0 20px 60px rgba(0, 0, 0, 0.55)) !important; overflow: hidden; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 20001; } body.messages-app #incomingCallModal::before { opacity: 0.2 !important; } body.messages-app #incomingCallModal #callerName { font-weight: 600 !important; letter-spacing: -0.02em !important; font-size: 1.15rem !important; } body.messages-app #incomingCallModal .caller-avatar { border: 3px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; } body.messages-app #incomingCallModal .caller-avatar.is-initial { display: flex; align-items: center; justify-content: center; } body.messages-app #incomingCallModal .call-button-accept { background: var(--im-face-green) !important; border-radius: 999px !important; box-shadow: 0 2px 12px rgba(48, 209, 88, 0.45) !important; } body.messages-app #incomingCallModal .call-button-accept:hover { background: #34c759 !important; filter: brightness(1.05); } body.messages-app #incomingCallModal .call-button-reject { background: var(--im-face-red) !important; border-radius: 999px !important; box-shadow: 0 2px 12px rgba(255, 59, 48, 0.4) !important; } body.messages-app #incomingCallModal .call-button-reject:hover { filter: brightness(1.06); } body.messages-app #incomingCallModal .call-button-accept-audio { background: rgba(142, 142, 147, 0.35) !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important; } body.messages-app #incomingCallModal .call-button-accept-audio:hover { background: rgba(142, 142, 147, 0.5) !important; } /* Boutons modale appel entrant: tailles stables (PC + mobile) */ body.messages-app #incomingCallModal .call-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } body.messages-app #incomingCallModal .call-button { min-width: 140px; min-height: 44px; padding: 10px 14px; } @media (max-width: 768px) { body.messages-app #incomingCallModal .call-button { flex: 1 1 46%; min-width: 0; } } /* Bandeau « appel en cours » */ body.messages-app #callStatusBanner { background: #1c1c1e !important; border-bottom: 0.5px solid rgba(84, 84, 88, 0.5) !important; color: #fff !important; font-weight: 500 !important; letter-spacing: -0.02em !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } body.messages-app #callStatusBanner .call-duration { color: var(--im-face-green) !important; font-weight: 600 !important; } /* Contrôles in-call (dock type FaceTime) */ body.messages-app #videoCallContainer { background: #000 !important; z-index: 20000; } body.messages-app .call-controls { bottom: max(20px, env(safe-area-inset-bottom)) !important; padding: 14px 18px !important; border-radius: 32px !important; background: rgba(30, 30, 30, 0.82) !important; border: 0.5px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; -webkit-backdrop-filter: blur(24px) saturate(1.4) !important; backdrop-filter: blur(24px) saturate(1.4) !important; } @media (max-width: 768px) { /* Mobile: dock d’appel plus compact + wrap */ body.messages-app .call-controls { left: 8px !important; right: 8px !important; width: auto !important; transform: none !important; padding: 10px 12px !important; border-radius: 26px !important; } body.messages-app .call-controls-row { flex-wrap: wrap; justify-content: center; gap: 10px; } body.messages-app .call-ctrl-btn { min-width: 44px !important; min-height: 44px !important; } body.messages-app .call-ctrl-label { display: none; } } @media (max-width: 768px) { /* Eviter les chevauchements header/sidebar/composer sur mobile */ body.messages-app.page-messages .sidebar-header, body.messages-app.page-messages .sidebar-tabs { position: static; } body.messages-app.page-messages .messages-container .conversations { width: min(340px, 92vw) !important; max-width: min(340px, 92vw) !important; } body.messages-app.page-messages .messages-container .chat-header { /* viewport-fit=cover + encoches iOS: pousser le header sous la safe-area */ padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important; gap: 6px; } body.messages-app.page-messages .chat-header-user { min-width: 0 !important; } body.messages-app.page-messages .chat-header-title, body.messages-app.page-messages .chat-header-status { display: none !important; } body.messages-app.page-messages #typingIndicator { max-width: 34vw; } body.messages-app.page-messages .messages-container .chat-messages { padding-left: 8px; padding-right: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); } body.messages-app.page-messages .messages-container .chat-message { max-width: min(96%, 520px) !important; font-size: 1rem !important; } body.messages-app.page-messages .messages-container .chat-form { padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; } body.messages-app.page-messages .messages-container .chat-form textarea { min-height: 38px !important; font-size: 1rem !important; } body.messages-app.page-messages .messages-container .chat-form button[type="button"], body.messages-app.page-messages .messages-container .chat-form button[type="submit"] { width: 38px; height: 38px; min-width: 38px; min-height: 38px; } body.messages-app.page-messages .emoji-picker { right: 8px; left: 8px; width: auto; bottom: max(74px, env(safe-area-inset-bottom) + 64px); height: min(46vh, 340px); } } @media (max-width: 420px) { /* Ultra compact (petits smartphones) */ body.messages-app.page-messages .messages-container .conversations { width: 92vw !important; max-width: 92vw !important; } body.messages-app.page-messages .call-controls { left: 6px !important; right: 6px !important; padding: 8px 10px !important; } body.messages-app.page-messages .call-controls-row { gap: 8px; } body.messages-app.page-messages .call-ctrl-btn { min-width: 40px !important; min-height: 40px !important; } body.messages-app.page-messages #incomingCallModal { width: calc(100vw - 16px) !important; padding: 14px !important; } body.messages-app.page-messages #callChatPanel { left: 6px; right: 6px; width: auto; max-height: 56vh; } } body.messages-app .call-controls button, body.messages-app .call-ctrl-btn { border-radius: 999px !important; min-height: 48px !important; min-width: 48px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } @media (min-width: 1024px) { /* Desktop: dock appel plus propre et panneaux mieux proportionnés */ body.messages-app.page-messages .call-controls { width: min(860px, calc(100vw - 48px)) !important; } body.messages-app.page-messages #callFiltersBar { width: min(820px, calc(100vw - 56px)); max-height: min(60vh, 560px); } body.messages-app.page-messages #callChatPanel { width: min(380px, 34vw); max-height: min(64vh, 560px); } } @media (min-width: 1440px) { body.messages-app.page-messages .call-controls { width: min(960px, calc(100vw - 64px)) !important; } body.messages-app.page-messages #callChatPanel { width: min(420px, 30vw); } } body.messages-app #endCallBtn { background: var(--im-face-red) !important; box-shadow: 0 4px 16px rgba(255, 59, 48, 0.45) !important; } body.messages-app #endCallBtn:hover { background: #ff453a !important; filter: brightness(1.05); } body.messages-app #toggleAudioBtn, body.messages-app #toggleVideoBtn { background: rgba(255, 255, 255, 0.14) !important; border: 0.5px solid rgba(255, 255, 255, 0.12) !important; } body.messages-app #toggleAudioBtn:hover, body.messages-app #toggleVideoBtn:hover { background: rgba(255, 255, 255, 0.22) !important; } body.messages-app #toggleAudioBtn.muted, body.messages-app #toggleVideoBtn.disabled { background: var(--im-face-red) !important; } body.messages-app #addParticipantBtn { background: rgba(10, 132, 255, 0.35) !important; } body.messages-app #filtersBtn { background: rgba(94, 92, 230, 0.4) !important; } body.messages-app #screenShareBtn { background: rgba(10, 132, 255, 0.35) !important; } body.messages-app #flipCameraBtn { background: rgba(255, 255, 255, 0.14) !important; } /* Panneau chat pendant l’appel */ body.messages-app .call-chat-panel { background: rgba(28, 28, 30, 0.95) !important; border: 0.5px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; box-shadow: var(--apple-shadow-float, 0 16px 48px rgba(0, 0, 0, 0.5)) !important; } body.messages-app .call-chat-toggle, body.messages-app .call-minimize-btn { background: rgba(255, 255, 255, 0.12) !important; border: 0.5px solid rgba(255, 255, 255, 0.15) !important; } /* Emoji picker (web component) */ body.messages-app .emoji-picker { --background: #2c2c2e !important; --border-color: rgba(84, 84, 88, 0.5) !important; --indicator-hovered-color: rgba(255, 255, 255, 0.08) !important; --input-border-color: transparent !important; --input-font-color: #fff !important; } /* Avatars liste */ body.messages-app .conversation-avatar-container { background: linear-gradient(145deg, #636366, #48484a); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12); --msg-avatar-size: 48px; } @media (min-width: 769px) { body.messages-app .conversation-avatar-container { --msg-avatar-size: 52px; } } body.messages-app .chat-header-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); border: none !important; } body.messages-app .messages-container .friends-scrollable { background: rgba(0, 0, 0, 0.25); border: 0.5px solid var(--im-separator); border-radius: 12px; } /* Fermeture sidebar */ body.messages-app .close-btn { background: rgba(118, 118, 128, 0.24); border: none; color: #fff; padding: 0; width: 40px; height: 40px; border-radius: 50%; } body.messages-app .close-btn:hover { background: rgba(255, 59, 48, 0.85); transform: none; } /* Burger */ body.messages-app .burger { color: var(--im-blue); background: transparent; padding: 0; width: 40px; height: 40px; border-radius: 50%; } /* Historique appels (bouton sidebar) */ body.messages-app .call-history-btn { background: rgba(118, 118, 128, 0.18); border: 0.5px solid var(--im-separator); color: rgba(235, 235, 245, 0.92); font-weight: 600; border-radius: 999px; padding: 8px 12px; min-height: 36px; } body.messages-app .call-history-btn:hover { background: rgba(118, 118, 128, 0.28); } /* Bouton settings IA */ body.messages-app .ai-customize-btn { background: rgba(118, 118, 128, 0.22); border: 0.5px solid var(--im-separator); border-radius: 50%; padding: 0; width: 36px; height: 36px; } /* Boutons appels: navigation filtres / close */ body.messages-app .call-filter-nav, body.messages-app .call-filters-close, body.messages-app #closeCallChatBtn { background: rgba(118, 118, 128, 0.22); border: 0.5px solid rgba(255, 255, 255, 0.12); color: #fff; border-radius: 12px; min-width: 44px; min-height: 44px; padding: 0; } body.messages-app .call-filter-nav:hover, body.messages-app .call-filters-close:hover, body.messages-app #closeCallChatBtn:hover { background: rgba(118, 118, 128, 0.32); } /* Toggle chat/minimize: mêmes dimensions */ body.messages-app .call-chat-toggle, body.messages-app .call-minimize-btn { width: 44px; height: 44px; padding: 0; border-radius: 14px; } body.messages-app #openVrBtn, body.messages-app #toggleSoundBtn, body.messages-app #installPwaBtn, body.messages-app #exitAIBtn { flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { body.messages-app .messages-container .conversations li, body.messages-app .messages-container .chat-form button:hover, body.messages-app .messages-container .chat-message { transform: none !important; animation: none !important; } }