*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─────────────────────────────────────────────────────────────────────────── Thème "paper" — palette éditoriale chaude (papier vieilli) reprise depuis doracom-site-complete.html. Devient le thème PAR DÉFAUT de l'app : si l'utilisateur n'a rien choisi, c'est ce qui s'applique. Activé via . ─────────────────────────────────────────────────────────────────────────── */ [data-theme="paper"] { /* Aligné sur DoraCom Design System v2 (paper · maroon · ephemeral). Bg/raised/sunken : warm cream à 3 niveaux. Accent : maroon burgundy — remplace l'ancien rust pour un rendu plus éditorial / moins agressif. */ --bg: #F4ECE0; /* paper-200 — canvas principal */ --bg-glass: rgba(244, 236, 224, 0.92); --bg2: #FBF4E8; /* paper-100 — raised (cards, bubbles surface) */ --bg2-glass: rgba(251, 244, 232, 0.92); --bg3: #EDE3D2; /* paper-300 — sunken (sidebar) */ --bg3-glass: rgba(237, 227, 210, 0.95); --bg4: #E0D3BD20; --hover: #E0D3BD; /* paper-400 — hover/active */ --accent: #8A2E25; /* maroon-600 — button bg, send */ --accent2: #7A2E2E; /* maroon-700 — deep, active borders */ --accent-glow: rgba(156, 58, 46, 0.18); --text: #2A1A14; /* ink-700 — primary text */ --text2: #7A6B5C; /* ink-300 — secondary text */ --muted: #A89A8B; /* ink-200 — tertiary / meta */ --border: #E0D3BD; /* paper-400 — default hairlines */ --border2: #D6C3A8; /* darker hairline */ --green: #16A85F; /* call-500 — voice/video active (Skype-tier green) */ --red: #B83A3A; /* crimson-500 — danger */ --yellow: #C58A2A; /* amber-500 — warn */ /* Nouveaux tokens design system : */ --bg-bubble: #EDE5F2; /* lilac-100 — message bubble bg (post-quantum lilac) */ --e2e: #7D5A85; /* lilac-700 — E2E badge text */ --e2e-bg: #EDE5F2; /* lilac-100 — E2E badge bg */ --ephemeral: #3F8B7A; /* sea-500 — countdown trail ephemeral msgs */ --call: #16A85F; /* call-500 — alias call */ --call-soft: rgba(22, 168, 95, 0.10); } /* Matrix rain ACTIF en thème paper, version SUBTILE : - opacity 0.30 sur le canvas → la pluie reste perceptible mais ne domine plus la zone chat - background: var(--bg) pour ne jamais voir le noir résiduel canvas - z-index 0 (sous #app z:1) Combiné à #messages-area rgba 0.85 ci-dessous : matrix subtil derrière, fond paper dominant — lisible, ambiant, pas envahissant. */ /* Matrix paper : palette rouille rgb(196,74,44) avec bgFade boosté à 0.10 dans matrix-rain.js → le canvas converge rapidement vers paper sans noir résiduel. opacity CSS 0.55 → pluie franche mais sous fond papier. */ [data-theme="paper"] #matrix-bg { display: block !important; opacity: 0.55 !important; z-index: 0; background: var(--bg) !important; } /* Grain papier — texture SVG noise subtile sur tout le fond, multiplie pour assombrir les zones colorées (effet imprimé). Typographie design system : Geist sans pour le corps. */ [data-theme="paper"] body { background: var(--bg); font-family: 'Geist', 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--text2); font-weight: 400; letter-spacing: 0; } /* Grain papier : posé SOUS le canvas matrix (z-index -1) pour ne pas le masquer. Opacité réduite pour rester un détail subtil. */ [data-theme="paper"] body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.25; pointer-events: none; mix-blend-mode: multiply; z-index: -1; } /* Le canvas matrix doit être au-dessus du grain (mais sous l'app) */ /* paper : matrix-bg masqué (cf. règle plus haut) — z-index neutralisé */ /* Typographie design system v2 : - Instrument Serif italic pour le wordmark/display (titres marquants) - Geist sans pour les headlines (semibold) - Geist Mono pour les pseudos/IDs/codes Fraunces/Manrope/JetBrains Mono restent en fallback pour les autres thèmes (terminal/cyber/etc). */ [data-theme="paper"] .app-logo, [data-theme="paper"] .pseudo-display { font-family: 'Instrument Serif', 'Fraunces', 'Iowan Old Style', Georgia, serif; font-style: italic; font-weight: 400; color: var(--text); letter-spacing: -0.02em; } [data-theme="paper"] .channel-name, [data-theme="paper"] .ch-title, [data-theme="paper"] .modal-create-title, [data-theme="paper"] h1, [data-theme="paper"] h2, [data-theme="paper"] h3 { font-family: 'Geist', 'Manrope', system-ui, sans-serif; font-weight: 600; color: var(--text); letter-spacing: -0.015em; } [data-theme="paper"] em, [data-theme="paper"] .fraunces-italic { font-style: italic; font-family: 'Instrument Serif', 'Fraunces', Georgia, serif; color: var(--accent); } [data-theme="paper"] code, [data-theme="paper"] pre, [data-theme="paper"] .msg-csv-table, [data-theme="paper"] .id-display, [data-theme="paper"] [class*="-id-"], [data-theme="paper"] kbd { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* Ajustements composants spécifiques pour le rendu papier */ [data-theme="paper"] #sidebar { background: var(--bg2); border-right: 1px solid var(--border); } [data-theme="paper"] #tab-bar, [data-theme="paper"] #content-header { background: var(--bg-glass); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } [data-theme="paper"] .tab { background: transparent; color: var(--text2); } [data-theme="paper"] .tab.active { color: var(--text); border-bottom-color: var(--accent); } [data-theme="paper"] .channel-item:hover, [data-theme="paper"] .channel-item.active { background: var(--hover); } /* Message bubbles design system : reçus = bubble lilac (post-quantum lilac), envoyés = accent maroon. Le lilac est la signature visuelle du design v2, il dit "ce contenu est E2E chiffré" sans avoir besoin de l'écrire. */ [data-theme="paper"] .msg-bubble, [data-theme="paper"] .dm-bubble { background: var(--bg-bubble); color: var(--text); border: 1px solid transparent; border-radius: 12px; } [data-theme="paper"] .dm-row.sent .dm-bubble { background: var(--accent); color: var(--bg2); border-color: transparent; } /* Underline subtile sur les messages éphémères (couleur sea du design v2) */ [data-theme="paper"] .msg-bubble.ephemeral, [data-theme="paper"] .dm-bubble.ephemeral { box-shadow: inset 0 -2px 0 var(--ephemeral); } [data-theme="paper"] .msg-card { border-color: var(--border); } /* Médias (image/vidéo) en thème paper : pas de halo noir — bordure chaude fine fondue dans le crème + ombre douce teintée encre (rgba 42,26,20), au lieu du rgba(0,0,0,…) qui jurait. Plus doux, plus « sur le fond » (retour user 2026-06-11). */ [data-theme="paper"] .msg-img, [data-theme="paper"] .dm-img, [data-theme="paper"] .msg-video { box-shadow: 0 1px 6px rgba(42, 26, 20, 0.10); border: 1px solid var(--border); } [data-theme="paper"] input, [data-theme="paper"] textarea { background: var(--bg); color: var(--text); border-color: var(--border2); } [data-theme="paper"] input::placeholder, [data-theme="paper"] textarea::placeholder { color: var(--muted); } [data-theme="paper"] #composer { background: var(--bg-glass); backdrop-filter: blur(8px); border-top: 1px solid var(--border); } /* Boutons design system v2 : primary = maroon burgundy, secondary = ghost beige solide. Plus de "btn = texte sombre" — l'accent maroon devient l'élément actif principal. */ [data-theme="paper"] .btn, [data-theme="paper"] .btn-primary { background: var(--accent); color: var(--bg2); border: none; font-weight: 500; letter-spacing: 0; } [data-theme="paper"] .btn:hover, [data-theme="paper"] .btn-primary:hover { background: var(--accent2); } [data-theme="paper"] .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 500; } [data-theme="paper"] .btn-secondary:hover { background: var(--bg3); border-color: var(--border2); } [data-theme="paper"] .btn-send { background: var(--accent); color: var(--bg2); } /* Z-index : le grain papier doit rester DESSOUS le contenu */ [data-theme="paper"] #app { position: relative; z-index: 2; } /* ════════════════════════════════════════════════════════════════════════════ Design System v2 — composants supplémentaires (paper) Récupéré du ui_kits/desktop/style.css : - .pq-chip → pill maroon outline "pq · verified" dans header canal - .members-chip → pill verte avec dot "● N members" - .call-btn → bouton call carré vert (au lieu d'icône grise) - .msg-crown → couronne 👑 à côté du nom auteur si owner/admin - .msg-countdown → texte "⌛ MM:SS" à droite du nom (couleur sea-500) - .msg-expiry-bar→ trace 2px sea-500 en bas de bulle (border-trace) - .ch-channel-topic → ligne discrète "Daily ops. Ephemeral 1h." ════════════════════════════════════════════════════════════════════════════ */ [data-theme="paper"] .pq-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-glow); border: 1px solid rgba(156, 58, 46, 0.18); color: var(--accent2); font: 500 10px/1 'Geist', 'Manrope', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } [data-theme="paper"] .members-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--call-soft); border: 1px solid rgba(22, 168, 95, 0.18); color: #0C7A41; /* call-700 deep green pour le texte */ font: 500 12px/1 'Geist', 'Manrope', system-ui, sans-serif; white-space: nowrap; } [data-theme="paper"] .members-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--call); box-shadow: 0 0 0 3px rgba(22, 168, 95, 0.18); animation: members-pulse 2.6s ease-in-out infinite; } @keyframes members-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 168, 95, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(22, 168, 95, 0); } } /* Boutons call (design system v2) : carré 36×36, vert pâle au repos, vert vif au hover. Skype-tier green — signale clairement "appel" sans bruit visuel. Spécificité gérée par cascade : #incoming-call .call-btn (déclaré plus bas ligne ~2579) gagne grâce à l'ID → les contrôles in-call gardent leur look pill blanc. */ .call-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(22, 168, 95, 0.10); border: 1px solid rgba(22, 168, 95, 0.22); color: #0C7A41; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 120ms cubic-bezier(0.2, 0, 0, 1), transform 80ms, box-shadow 120ms, border-color 120ms, color 120ms; padding: 0; flex-shrink: 0; } .call-btn:hover { background: #16A85F; color: #fff; border-color: #16A85F; box-shadow: 0 4px 12px -4px rgba(22, 168, 95, 0.40); } .call-btn:active { transform: scale(0.95); } .call-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .call-btn[disabled]:hover { background: rgba(22, 168, 95, 0.10); color: #0C7A41; border-color: rgba(22, 168, 95, 0.22); box-shadow: none; } /* SVG inside : hérite de currentColor, taille fixe pour ne pas dépendre de font-size. */ .call-btn svg { width: 16px; height: 16px; } /* En communication (1-to-1 ou groupe) → on masque les boutons « appel » et « vidéo » de l'en-tête (DM + canal). Décision user v423 : tant que je suis en appel, ces boutons n'ont pas de sens. La sonnerie (🔔) et le reste restent. */ html.weeair-in-call .btn-call-audio, html.weeair-in-call .btn-call-video, html.weeair-in-call .btn-group-call-audio, html.weeair-in-call .btn-group-call-video { display: none !important; } /* Header canal : flex layout + topic line discrète */ [data-theme="paper"] .ch-channel-simple { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } [data-theme="paper"] .ch-channel-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } [data-theme="paper"] .ch-channel-line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* Cluster meta à droite du header : 🛡 PQ icon + 📌 Épinglés filter + readonly tag + members-chip + boutons call, tous alignés sur la même ligne. */ [data-theme="paper"] .ch-channel-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Hauteurs harmonisées : pills/chips à 28px, boutons à 32×32. */ [data-theme="paper"] .ch-channel-meta .pq-chip, [data-theme="paper"] .ch-channel-meta .badge-readonly, [data-theme="paper"] .ch-channel-meta .members-chip { height: 28px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; box-sizing: border-box; } [data-theme="paper"] .ch-channel-meta .call-btn { width: 32px; height: 32px; } /* 🛡 Bouton icône PQ : remplace l'ancien pill "pq · verified". Tooltip au hover, toast détaillé au clic. Couleur accent maroon pour rester dans le DS, fond transparent pour rester discret. */ [data-theme="paper"] .pq-icon-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-glow); border: 1px solid rgba(156, 58, 46, 0.18); color: var(--accent2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; padding: 0; transition: background 120ms, border-color 120ms, transform 80ms; } [data-theme="paper"] .pq-icon-btn:hover { background: rgba(156, 58, 46, 0.12); border-color: rgba(156, 58, 46, 0.32); } [data-theme="paper"] .pq-icon-btn:active { transform: scale(0.95); } /* 📌 Bouton filtre épinglés : pill compacte avec compteur. État "active" = jaune doré soutenu (style highlight) pour signaler le mode filtre ON. */ [data-theme="paper"] .btn-pin-filter { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 999px; background: rgba(245, 197, 24, 0.10); border: 1px solid rgba(245, 197, 24, 0.30); color: #8a6a00; font: 600 11.5px/1 'Geist', 'Manrope', system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; transition: background 120ms, border-color 120ms, color 120ms, transform 80ms; } [data-theme="paper"] .btn-pin-filter:hover { background: rgba(245, 197, 24, 0.18); border-color: rgba(245, 197, 24, 0.50); } [data-theme="paper"] .btn-pin-filter:active { transform: scale(0.96); } [data-theme="paper"] .btn-pin-filter.active { background: #f5c518; border-color: #e0a800; color: #1a1500; box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.25); } /* Mode filtre actif : cache toutes les msg-card chronologiques + le banner "msgs-empty" éventuel. Seule la pinned-section reste visible. */ .pinned-filter-active > .msg-card:not(.msg-card-pinned), .pinned-filter-active > .msgs-empty, .pinned-filter-active > .msgs-sk-lost-banner { display: none !important; } /* En mode filtre, supprime le séparateur dashed (pas de chrono dessous) */ .pinned-filter-active .pinned-section { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } [data-theme="paper"] .channel-prefix { color: var(--accent); font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace; font-weight: 600; font-size: 18px; } [data-theme="paper"] .ch-channel-name { font: 600 18px/1.1 'Geist', 'Manrope', system-ui, sans-serif; letter-spacing: -0.01em; color: var(--text); } [data-theme="paper"] .ch-channel-topic { padding-left: 0; font: 400 12px/1.4 'Geist', 'Manrope', system-ui, sans-serif; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } /* Crown couronne pour owner/admin : juste à droite du nom auteur dans la bulle. */ [data-theme="paper"] .msg-crown { font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(122, 46, 46, 0.15)); } /* Countdown sablier+temps : couleur sea (--ephemeral) au repos, ambre si < 10min, crimson si < 1min. Mono pour aligner les chiffres. */ [data-theme="paper"] .msg-countdown { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 500 10px/1 'Geist Mono', ui-monospace, monospace; color: var(--ephemeral); letter-spacing: 0.02em; white-space: nowrap; } [data-theme="paper"] .msg-countdown.warn { color: var(--yellow); } [data-theme="paper"] .msg-countdown.urgent { color: var(--red); } /* Trace sea-500 en bas de bulle (border-trace du design v2) — surclasse l'ancienne msg-expiry-bar verticale. 2px de hauteur, ne déborde pas. */ [data-theme="paper"] .msg-card .msg-expiry-bar { height: 2px; background: var(--hover); border-radius: 0 0 12px 12px; overflow: hidden; margin: 8px -1px -1px; } [data-theme="paper"] .msg-card .msg-expiry-fill { height: 100%; background: var(--ephemeral); border-radius: 0 0 12px 12px; transition: width 1s linear; } [data-theme="paper"] .msg-card .msg-expiry-fill.warn { background: var(--yellow); } [data-theme="paper"] .msg-card .msg-expiry-fill.urgent { background: var(--red); } /* Force globale paper : body reste paper-0 (base), mais les conteneurs principaux passent en SEMI-TRANSPARENT pour laisser passer la pluie matrix derrière. Sidebar et composer en paper-1 alpha avec backdrop-blur. */ [data-theme="paper"] html, [data-theme="paper"] body { background: #F4ECE0 !important; color: #2A1A14 !important; } [data-theme="paper"] #main-ui, [data-theme="paper"] #content { background: transparent !important; color: #2A1A14; } [data-theme="paper"] #sidebar { /* Sidebar paper-300 (sunken) à 0.92 — la lisibilité prime sur le matrix. Léger blur pour profondeur. */ background: rgba(237, 227, 210, 0.92) !important; backdrop-filter: blur(12px) saturate(110%); -webkit-backdrop-filter: blur(12px) saturate(110%); border-right: 1px solid #E0D3BD; } [data-theme="paper"] #tab-bar, [data-theme="paper"] #content-header, [data-theme="paper"] #composer { background: rgba(244, 236, 224, 0.92) !important; backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%); border-color: #E0D3BD !important; color: #2A1A14; } [data-theme="paper"] #messages-area { /* Zone chat paper-200 translucide 0.62 → matrix rouille reste perceptible. */ background: rgba(244, 236, 224, 0.62) !important; color: #2A1A14; } /* Bandeaux de contexte (wall/dm/channel) en thème paper. */ [data-theme="paper"] #messages-area[data-context="wall"], [data-theme="paper"] #messages-area[data-context="dm"], [data-theme="paper"] #messages-area[data-context="channel"] { background: rgba(244, 236, 224, 0.62) !important; } /* Texte muted, hover sidebar items, badges secondaires : tons ink. */ [data-theme="paper"] .section-header, [data-theme="paper"] .section-title { color: #7A6B5C !important; } [data-theme="paper"] .channel-item, [data-theme="paper"] .user-item { color: #2A1A14; } [data-theme="paper"] .channel-item:hover, [data-theme="paper"] .channel-item.active, [data-theme="paper"] .user-item:hover { background: #EDE3D2 !important; } /* Tabs : labels en ink, soulignement en accent rouille */ [data-theme="paper"] .tab { color: #7A6B5C !important; } [data-theme="paper"] .tab.active { color: #2A1A14 !important; border-bottom: 2px solid #8A2E25 !important; } /* Boutons principaux & icônes — convertit l'accent violet en rouille */ [data-theme="paper"] .btn-icon, [data-theme="paper"] #btn-create-channel, [data-theme="paper"] .modal-create-icon { background: linear-gradient(135deg, #8A2E25, #7A2E2E) !important; color: #F4ECE0 !important; box-shadow: 0 3px 12px rgba(156,58,46,0.18) !important; } [data-theme="paper"] .btn-send { background: #8A2E25 !important; color: #F4ECE0 !important; } [data-theme="paper"] .btn-send:disabled { background: #E0D3BD !important; color: #A89A8B !important; } [data-theme="paper"] .btn-primary { background: #2A1A14 !important; color: #F4ECE0 !important; border: none; } [data-theme="paper"] .btn-primary:hover { background: #2a261f !important; } [data-theme="paper"] .btn-secondary { background: transparent !important; color: #2A1A14 !important; border: 1px solid rgba(42,26,20,0.25) !important; } [data-theme="paper"] .btn-secondary:hover { background: #EDE3D2 !important; } /* Bulles messages — fond paper-1 + bordure hairline, sent en ink-0 */ [data-theme="paper"] .msg-bubble, [data-theme="paper"] .dm-bubble { background: #FBF4E8 !important; color: #2A1A14 !important; border: 1px solid rgba(42,26,20,0.10) !important; } [data-theme="paper"] .dm-row.sent .dm-bubble { background: #2A1A14 !important; color: #F4ECE0 !important; border-color: #2A1A14 !important; } [data-theme="paper"] .msg-card { border-color: rgba(42,26,20,0.10) !important; background: transparent !important; } /* Composer textarea & inputs : fond paper + bord hairline */ [data-theme="paper"] input, [data-theme="paper"] textarea, [data-theme="paper"] .composer-main { background: #F4ECE0 !important; color: #2A1A14 !important; border-color: rgba(42,26,20,0.25) !important; } [data-theme="paper"] input::placeholder, [data-theme="paper"] textarea::placeholder { color: #A89A8B !important; } /* Profile section & logo */ [data-theme="paper"] .sidebar-profile, [data-theme="paper"] .sidebar-header { background: transparent !important; border-color: rgba(42,26,20,0.10) !important; } /* Logo "DoraCom" en serif Fraunces ink-0 (au lieu du violet) avec un trait rouille subtil pour rappeler l'accent DoraCom. */ [data-theme="paper"] .app-logo, [data-theme="paper"] .logo-text { color: #2A1A14 !important; background: none !important; -webkit-text-fill-color: #2A1A14 !important; font-family: 'Fraunces', Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.01em; } [data-theme="paper"] .pseudo-display { color: #2A1A14 !important; font-family: 'Fraunces', Georgia, serif !important; font-weight: 500 !important; } /* Boutons sidebar (EN, 🔔, ✎) : style paper hairline */ [data-theme="paper"] #btn-lang-toggle, [data-theme="paper"] .btn-lang-toggle, [data-theme="paper"] .btn-push-toggle, [data-theme="paper"] .btn-edit-pseudo, [data-theme="paper"] .btn-recovery-small { background: transparent !important; color: #2A1A14 !important; border: 1px solid rgba(42,26,20,0.20) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; } [data-theme="paper"] #btn-lang-toggle:hover, [data-theme="paper"] .btn-push-toggle:hover, [data-theme="paper"] .btn-edit-pseudo:hover { background: rgba(42,26,20,0.06) !important; border-color: #8A2E25 !important; color: #8A2E25 !important; } /* Bouton Options (gros bouton sous le pseudo) — paper-2 + ink */ [data-theme="paper"] #btn-open-settings, [data-theme="paper"] .btn-recovery-small { background: rgba(42,26,20,0.06) !important; color: #2A1A14 !important; border: 1px solid rgba(42,26,20,0.18) !important; } [data-theme="paper"] #btn-open-settings:hover { background: rgba(156,58,46,0.10) !important; border-color: #8A2E25 !important; color: #8A2E25 !important; } /* Section header "CHANNELS" — uppercase tracked, ink-3 */ [data-theme="paper"] .section-header { color: #A89A8B !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.08em !important; } /* Bouton "Installer l'application" — palette rouille au lieu de vert DoraCom */ [data-theme="paper"] .btn-install-pwa { background: linear-gradient(180deg, rgba(156,58,46,0.10), rgba(156,58,46,0.04)) !important; border: 1px solid rgba(156,58,46,0.35) !important; color: #8A2E25 !important; } [data-theme="paper"] .btn-install-pwa:hover { background: linear-gradient(180deg, rgba(156,58,46,0.18), rgba(156,58,46,0.08)) !important; border-color: #8A2E25 !important; box-shadow: 0 4px 14px rgba(156,58,46,0.18) !important; } /* Theme switcher cards en thème paper : neutralise les fonds noir/vert hardcodés des autres thèmes pour les afficher comme des "pastilles" tons paper. Sauf l'active qui prend l'accent rouille. */ [data-theme="paper"] .sidebar-theme-bar { background: transparent; border-top: 1px solid rgba(42,26,20,0.10); padding-top: 10px; } [data-theme="paper"] .btn-theme { background: rgba(244,236,224,0.6) !important; border: 1px solid rgba(42,26,20,0.20) !important; } /* Avatar fallback color (gradient violet → rouille) */ [data-theme="paper"] .avatar { background: linear-gradient(135deg, #8A2E25, #C58A2A) !important; color: #F4ECE0 !important; } /* (matrix-bg conservé en paper avec palette adaptée — cf. matrix-rain.js) */ /* Watermark central DoraCom : moins prononcé en paper */ [data-theme="paper"] .msgs-empty, [data-theme="paper"] .msgs-empty * { color: #A89A8B !important; } /* Scrollbar paper */ [data-theme="paper"] ::-webkit-scrollbar-thumb { background: rgba(42,26,20,0.2) !important; } [data-theme="paper"] ::-webkit-scrollbar-thumb:hover { background: rgba(42,26,20,0.35) !important; } /* Theme switcher : carte active en accent rouille */ [data-theme="paper"] .btn-theme.active { border-color: #8A2E25 !important; background: rgba(156,58,46,0.10) !important; } [data-theme="paper"] .btn-theme:hover { border-color: #8A2E25 !important; } /* ── Modales en thème paper ─────────────────────────────────────────────── Surface paper-1, header ink+rouille, boutons sticky bar en paper-1 transparent → opaque, dégradé titre ink → rouille au lieu de violet. */ [data-theme="paper"] #modal-overlay { background: rgba(42,26,20,0.42) !important; backdrop-filter: blur(8px); } [data-theme="paper"] .modal { background: #F4ECE0 !important; color: #2A1A14 !important; border: 1px solid rgba(42,26,20,0.18) !important; box-shadow: 0 30px 80px rgba(42,26,20,0.25), 0 0 0 1px rgba(42,26,20,0.04) !important; } [data-theme="paper"] .modal-actions { background: linear-gradient(180deg, transparent, #F4ECE0 35%) !important; } [data-theme="paper"] .modal::-webkit-scrollbar-thumb { background: rgba(42,26,20,0.22) !important; } [data-theme="paper"] .modal::-webkit-scrollbar-thumb:hover { background: rgba(42,26,20,0.38) !important; } [data-theme="paper"] .modal-title { color: #2A1A14 !important; } [data-theme="paper"] .modal-body { color: #2A1A14; } [data-theme="paper"] .modal-create-header { border-bottom: 1px solid rgba(42,26,20,0.10) !important; } [data-theme="paper"] .modal-create-icon { filter: drop-shadow(0 4px 10px rgba(156,58,46,0.32)) !important; background: none !important; /* annule le gradient bouton si la classe est partagée */ color: #8A2E25 !important; box-shadow: none !important; width: auto; height: auto; border-radius: 0; } [data-theme="paper"] .modal-create-title { font-family: 'Fraunces', Georgia, serif !important; font-weight: 500 !important; background: linear-gradient(135deg, #2A1A14, #8A2E25) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="paper"] .modal-create-subtitle { color: #A89A8B !important; } [data-theme="paper"] .form-label { color: #7A6B5C !important; } [data-theme="paper"] .form-input { background: #FBF4E8 !important; color: #2A1A14 !important; border: 1.5px solid rgba(42,26,20,0.20) !important; } [data-theme="paper"] .form-input::placeholder { color: #A89A8B !important; } [data-theme="paper"] .form-input:focus { border-color: #8A2E25 !important; box-shadow: 0 0 0 3px rgba(156,58,46,0.18) !important; } [data-theme="paper"] .form-hint { color: #A89A8B !important; } [data-theme="paper"] .modal-actions.centered .btn-primary { background: linear-gradient(135deg, #2A1A14, #8A2E25) !important; box-shadow: 0 4px 18px rgba(156,58,46,0.22) !important; color: #F4ECE0 !important; } /* Toast notifications en thème paper */ [data-theme="paper"] .toast { background: #2A1A14 !important; color: #F4ECE0 !important; border: 1px solid rgba(244,236,224,0.10) !important; } [data-theme="paper"] .toast.success { background: #2A1A14 !important; border-color: #8A2E25 !important; } [data-theme="paper"] .toast.error { background: #b8362a !important; } /* Vars partagées (non-couleurs) — toujours appliquées peu importe le thème */ :root { --sidebar: 300px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; } /* Thème "default" (sombre violet) — défaut historique. Appliqué via . theme-switcher.js force toujours un thème au boot (paper par défaut, ou la valeur saved). Si jamais aucun thème n'est appliqué (e.g. theme-switcher.js KO), le sélecteur :root vide ci-dessus laisse tomber les couleurs → flash de fond non-thémé, mais l'app reste utilisable. */ [data-theme="default"] { --bg: #0c0c12; --bg-glass: rgba(12, 12, 18, 0.40); --bg2: #13131c; --bg2-glass: rgba(19, 19, 28, 0.45); --bg3: #1a1a26; --bg3-glass: rgba(26, 26, 38, 0.80); --bg4: #17172120; --hover: #252535; --accent: #7c6af7; --accent2: #6457e8; --accent-glow: rgba(124,106,247,0.22); --text: #e4e4f0; --text2: #8888a8; --muted: #55556a; --border: #252535; --border2: #303048; --green: #3dd68c; --red: #ff5572; --yellow: #ffb340; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Matrix rain background ── */ #matrix-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 1; } #app { position: relative; z-index: 1; height: 100%; background: transparent; } .hidden { display: none !important; } /* ── Scrollbars ── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ── Loading ── */ #loading-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 999; } .loading-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .loading-logo { font-size: 50px; font-weight: 800; background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 50%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -2px; filter: drop-shadow(0 0 32px var(--accent-glow)); } .loading-text { color: var(--text2); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .spinner { width: 30px; height: 30px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Layout ── */ #main-ui { display: flex; height: 100vh; /* fallback for very old browsers */ height: calc(var(--vh, 1vh) * 100); /* JS fallback for older Safari */ height: 100dvh; /* dynamic viewport — fixes iOS Safari toolbar (wins if supported) */ } /* ── Sidebar ── */ #sidebar { width: var(--sidebar); min-width: var(--sidebar); background: var(--bg2-glass); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); border-right: 1px solid var(--border); overflow: hidden; /* Colonne flex : indispensable pour que .sidebar-sections (flex:1) et le scroll interne de #channels-list fonctionnent. Sans ça, la liste déborde et #sidebar{overflow:hidden} coupe les canaux du bas (inaccessibles). */ display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.4,0,0.2,1), min-width 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1); z-index: 10; } #sidebar.collapsed { width: 0; min-width: 0; border-right: none; } /* ── Theme bar ── */ .sidebar-theme-bar { display: flex; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--border); flex-shrink: 0; margin-top: auto; } .btn-theme { flex: 1; padding: 6px; border-radius: 8px; cursor: pointer; background: var(--bg3); border: 1.5px solid var(--border); font-size: 16px; transition: all 0.15s; } .btn-theme:hover { border-color: var(--accent); } .btn-theme.active { border-color: var(--accent); background: var(--accent-glow); } /* ══ MATRIX THEME ═══════════════════════════════════════════════════════════ */ [data-theme="matrix"] { --bg: #000000; --bg-glass: rgba(0, 0, 0, 0.45); --bg2: #001a00; --bg2-glass: rgba(0, 20, 0, 0.50); --bg3: #002200; --bg3-glass: rgba(0, 30, 0, 0.85); --bg4: rgba(0, 40, 0, 0.15); --hover: #003300; --accent: #00dc50; --accent2: #00b840; --accent-glow: rgba(0, 220, 80, 0.20); --text: #00ff66; --text2: #00aa44; --muted: #005522; --border: #003300; --border2: #004400; --green: #00ff66; --red: #ff4466; --yellow: #aaff00; } [data-theme="matrix"] * { font-family: 'Courier New', Courier, monospace !important; } [data-theme="matrix"] .msg-bubble, [data-theme="matrix"] .dm-bubble { background: #001800 !important; border: 1px solid #005500 !important; color: #00ff66 !important; } [data-theme="matrix"] .dm-bubble a, [data-theme="matrix"] .msg-body a { color: #00ffaa !important; } [data-theme="matrix"] .msg-card { background: rgba(0,20,0,0.6) !important; border-color: #003300 !important; } [data-theme="matrix"] input, [data-theme="matrix"] textarea { color: #00ff66 !important; background: #001500 !important; border-color: #004400 !important; } [data-theme="matrix"] input::placeholder, [data-theme="matrix"] textarea::placeholder { color: #005522 !important; } [data-theme="matrix"] .composer-main { background: #001500 !important; border-color: #004400 !important; } [data-theme="matrix"] .avatar { filter: hue-rotate(100deg) saturate(2) !important; } [data-theme="matrix"] .app-logo .logo-text { color: #00ff66 !important; } [data-theme="matrix"] #matrix-bg { opacity: 1; } [data-theme="default"] #matrix-bg { opacity: 1; } #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9; backdrop-filter: blur(2px); } .sidebar-header { padding: 15px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 8px; } .btn-sidebar-close { display: none; /* hidden on desktop */ align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--text2); transition: background 0.15s, color 0.15s; line-height: 1; } .btn-sidebar-close:hover { background: var(--hover); color: var(--text); } .app-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -0.5px; } .logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent); } .logo-icon svg { width: 100%; height: 100%; } .logo-text { background: linear-gradient(135deg, var(--accent), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-lang-toggle { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; flex-shrink: 0; margin-left: auto; } .btn-lang-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .network-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); font-weight: 500; background: var(--bg3); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); } /* Admin badge in profile */ .admin-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), #a78bfa); color: white; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 1px 6px var(--accent-glow); } /* WiFi channel as first item in channels list */ .wifi-channel-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); border-left: 3px solid transparent; transition: all 0.15s; position: relative; margin-bottom: 2px; } .wifi-channel-item:hover { background: var(--hover); border-radius: 0 8px 8px 0; } .wifi-channel-item.active, .wifi-channel-item:focus { background: rgba(124,106,247,0.12); border-left-color: var(--accent); color: var(--accent); outline: none; } /* Icône WiFi : SVG inline animé (3 arcs qui pulsent en cascade) Plus net qu'un emoji, hérite de currentColor donc s'adapte au theme. */ .wifi-channel-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; } .wifi-channel-icon svg { width: 100%; height: 100%; } .wifi-channel-icon .wifi-arc-1, .wifi-channel-icon .wifi-arc-2, .wifi-channel-icon .wifi-arc-3 { transform-origin: 12px 20px; animation: wifi-pulse 2.4s ease-in-out infinite; } .wifi-channel-icon .wifi-arc-2 { animation-delay: 0.2s; } .wifi-channel-icon .wifi-arc-3 { animation-delay: 0.4s; } @keyframes wifi-pulse { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.35; } } .wifi-channel-item.active .wifi-channel-icon { color: #fff; } /* Icône WiFi inline (header, modales, etc.) — suit currentColor. */ .wifi-icon-svg { width: 1em; height: 1em; vertical-align: -2px; } .ch-wifi-icon { color: #3dd68c; display: inline-flex; align-items: center; } /* Tab WiFi temporairement masquée (UX peu comprise). Pour réactiver, retirer cette règle + le style display:none sur #btn-open-wall. */ .tab.tab-wall { display: none !important; } /* Force le respect du HTML[hidden] sur l'item WiFi — le default display:flex du selector .wifi-channel-item gagnait sinon. */ .wifi-channel-item[hidden] { display: none !important; } /* ── Channels actions (sous la liste, bas du bloc Channels) ────────── */ .channels-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px 6px; border-top: 1px solid var(--border); margin-top: 4px; } .btn-channel-action { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: var(--bg3, color-mix(in srgb, var(--accent) 6%, transparent)); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text); transition: background 120ms, border-color 120ms, transform 80ms; } .btn-channel-action:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent); } .btn-channel-action:active { transform: scale(0.96); } .btn-channel-action-icon { font-size: 14px; line-height: 1; } .btn-channel-action-label { line-height: 1; } @supports not (color: color-mix(in srgb, red, blue)) { .btn-channel-action { background: rgba(124,106,247,0.08); } .btn-channel-action:hover { background: rgba(124,106,247,0.14); border-color: rgba(124,106,247,0.3); } } /* « Connecter mon ID » : CTA pleine largeur au-dessus des actions canal. Prérequis pour créer un canal → mis en avant (accent) tant que non lié. Une fois lié (.connected), passe en état discret « ✓ ID connecté ». */ .btn-connect-id { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 28px); margin: 6px 14px 0; padding: 9px 12px; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: 0.2px; box-shadow: 0 2px 10px var(--accent-glow); transition: background 120ms, border-color 120ms, transform 80ms, box-shadow 120ms; } .btn-connect-id:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); box-shadow: 0 3px 14px var(--accent-glow); } .btn-connect-id:active { transform: scale(0.97); } .btn-connect-id-icon { font-size: 14px; line-height: 1; } .btn-connect-id-label { line-height: 1; } /* État lié : plus de CTA, juste un repère discret. */ .btn-connect-id.connected { background: transparent; border-color: var(--border); color: var(--text-muted, #8a93a3); font-weight: 600; box-shadow: none; } .btn-connect-id.connected:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent); } @supports not (color: color-mix(in srgb, red, blue)) { .btn-connect-id:hover { background: var(--accent); } } /* Tab WiFi avec icône SVG. */ .tab-wall .tab-label { display: inline-flex; align-items: center; gap: 6px; } .tab-wifi-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: #3dd68c; } .tab-wifi-icon svg { width: 100%; height: 100%; } .tab-wall.active .tab-wifi-icon { color: #fff; } /* (watermark WiFi retiré : redondant avec l'icône sidebar/tab/header) */ .wifi-channel-name { flex: 1; } /* Prominent create-channel CTA */ .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 2.5s ease infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .sidebar-profile { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--bg3); } .avatar { border-radius: 50%; background: linear-gradient(135deg, var(--accent), #a78bfa); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; flex-shrink: 0; user-select: none; box-shadow: 0 2px 10px var(--accent-glow); overflow: hidden; } .avatar.lg { width: 38px; height: 38px; font-size: 15px; } .avatar.sm { width: 28px; height: 28px; font-size: 11px; } .avatar.xs { width: 22px; height: 22px; font-size: 9px; } .clickable-avatar { cursor: pointer; position: relative; transition: filter 0.2s; } .clickable-avatar:hover { filter: brightness(0.7); } .clickable-avatar::after { content: '📷'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity 0.2s; } .clickable-avatar:hover::after { opacity: 1; } .profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pseudo-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; } .pseudo-name-row:hover .pseudo-display { color: var(--accent); } .pseudo-name-row:hover .btn-edit-pseudo { color: var(--accent); opacity: 1; } .pseudo-display { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; transition: color 0.15s; } .btn-edit-pseudo { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 14px; padding: 2px 5px; border-radius: 4px; flex-shrink: 0; transition: all 0.15s; line-height: 1; opacity: 0.7; } .btn-edit-pseudo:hover { color: var(--accent); opacity: 1; background: rgba(124,106,247,0.12); } /* ── Gear "Options" icon-only dans la pseudo-name-row ───────────────── Remplace l'ancien bouton "⚙ Options" large en dessous. Stop propagation au click (handler JS) pour ne pas déclencher l'edit pseudo via le row. */ .btn-open-settings { background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; margin-left: auto; line-height: 1; transition: all 0.15s; } .btn-open-settings:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { .btn-open-settings:hover { background: rgba(124,106,247,0.10); border-color: rgba(124,106,247,0.3); } } .sidebar-profile.editing { flex-wrap: wrap; } .sidebar-profile.editing .pseudo-edit { width: 100%; flex-basis: 100%; } .pseudo-edit { display: flex; gap: 6px; align-items: center; width: 100%; } .pseudo-edit input { flex: 1; background: var(--bg); border: 1.5px solid var(--accent); border-radius: 8px; color: var(--text); padding: 7px 12px; font-size: 14px; outline: none; min-width: 0; font-family: inherit; box-shadow: 0 0 0 3px var(--accent-glow); } .pseudo-edit input:focus { border-color: var(--accent); } .pseudo-edit button { background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap; } #pseudo-save { color: var(--green); } #pseudo-cancel { color: var(--red); } /* Recovery buttons */ .profile-recovery-row { display: flex; gap: 6px; margin-top: 6px; } .btn-recovery-small { flex: 1; font-size: 10px; font-weight: 600; padding: 4px 6px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); white-space: nowrap; transition: all 0.15s; font-family: inherit; } .btn-recovery-small:hover { border-color: var(--accent); color: var(--accent); } .btn-recovery-restore { border-color: rgba(0,220,80,0.3); color: var(--green); } .btn-recovery-restore:hover { border-color: var(--green); background: rgba(0,220,80,0.1); } /* Recovery phrase modal */ .recovery-phrase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; } .recovery-word { background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .recovery-word-num { font-size: 10px; color: var(--muted); font-weight: 700; min-width: 16px; } .recovery-word-text { font-size: 13px; font-weight: 600; color: var(--text); font-family: monospace; } .recovery-warning { background: rgba(255,181,64,0.12); border: 1px solid rgba(255,181,64,0.3); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--yellow); margin-bottom: 12px; line-height: 1.5; } .recovery-input-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; } .recovery-input-grid input { background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); padding: 8px; font-size: 12px; text-align: center; font-family: monospace; outline: none; width: 100%; } .recovery-input-grid input:focus { border-color: var(--accent); } .sidebar-sections { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .sidebar-section { overflow-y: auto; padding: 8px 0; } /* Channels : colonne flex interne — header figé en haut, #channels-list scrollable au milieu, .channels-actions figées en bas. min-height:0 lève le blocage flexbox classique (un flex-item ne peut pas shrink sous sa hauteur de contenu sans ça → le scroll ne s'activait jamais). */ .sidebar-section.channels-section { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--border); } .channels-section #channels-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .channels-section .section-header { flex: 0 0 auto; } .channels-section .channels-actions { flex: 0 0 auto; } /* État REPLIÉ = on FERME chaque canal : on masque les listes de membres et les actions par-canal, mais on GARDE les NOMS de canaux visibles (vue compacte). Avant : tout #channels-list était display:none → les canaux DISPARAISSAIENT complètement (bug signalé). « Replier » ≠ « masquer ». */ .channels-section.collapsed .channel-item-members, .channels-section.collapsed .channel-item-actions { display: none !important; } /* L'item actif ne reste pas en 2 lignes quand on replie : retour ligne simple (le nom + badges sur une seule ligne, comme les items inactifs). */ .channels-section.collapsed .channel-item.active > .channel-item-main { flex-wrap: nowrap; justify-content: flex-start; } .channels-section.collapsed .channel-item.active .channel-name-wrap { flex: 1 1 auto; } /* En-tête « Channels » cliquable (toggle replier/déplier toute la liste). */ .channels-section-header { justify-content: flex-start; gap: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; } .channels-section-header:hover { color: var(--text); } .section-collapse-caret { display: inline-flex; font-size: 9px; line-height: 1; transition: transform 0.18s ease; opacity: 0.8; } .channels-section.collapsed .section-collapse-caret { transform: rotate(-90deg); } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; } .btn-icon { background: var(--accent); border: none; color: #fff; cursor: pointer; font-size: 15px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.15s; line-height: 1; box-shadow: 0 2px 8px var(--accent-glow); flex-shrink: 0; } .btn-icon:hover { background: var(--accent2); transform: scale(1.1); box-shadow: 0 3px 12px var(--accent-glow); } .wall-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; animation: badgePop 0.25s ease; } @keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } } .user-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; border-radius: 8px; margin: 1px 8px; transition: background 0.12s; } .user-item:hover { background: var(--hover); } .user-item.me { cursor: default; } .user-item.me:hover { background: transparent; } .user-name { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .user-item.me .user-name { color: var(--text); font-weight: 500; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 5px var(--green); } .dm-unread { background: var(--accent); color: white; font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 700; min-width: 18px; text-align: center; } /* Tous les indicateurs de notification utilisent maintenant le rouge (auparavant vert #22c55e). Une seule animation 'dmPulse' partagée par .dm-pending-dot, .tab-badge, .chan-badge. */ .dm-pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: auto; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); animation: dmPulse 1.5s ease-in-out infinite; } /* Point rouge sur les onglets de canaux et sur la sidebar quand un nouveau message arrive dans un canal pas actif. La numérotation du compteur reste en mémoire (this.unreadChannels) mais le visuel ne montre qu'un dot. */ .tab-badge, .chan-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: 6px; flex-shrink: 0; vertical-align: middle; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); animation: dmPulse 1.5s ease-in-out infinite; font-size: 0; color: transparent; overflow: hidden; text-indent: -9999px; line-height: 0; } .tab-badge.hidden, .chan-badge.hidden { display: none; } @keyframes dmPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } /* WiFi wall : caché pour l'instant — l'utilisateur n'en a pas besoin. Le code reste en place (state, handlers) au cas où on le réactive. */ .tab[data-tab="wall"] { display: none !important; } .channel-item { display: flex; flex-direction: column; margin: 1px 8px; cursor: pointer; border-radius: 8px; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; } .channel-item:hover > .channel-item-main { background: var(--hover); border-radius: 7px; } .channel-item.active { border-color: rgba(124,106,247,0.3); } .channel-item.active > .channel-item-main { background: linear-gradient(135deg, rgba(124,106,247,0.15), rgba(124,106,247,0.06)); border-radius: 7px; } /* Item ACTIF — actions sur la LIGNE DU NAME, poussées à droite (v381). La sidebar élargie (v380, 300px) laisse la place : plus besoin de wrapper les actions sur une 2e ligne (le comportement v373 servait à tenir dans une sidebar étroite). Retour à l'alignement « comme avant », inline à droite. */ .channel-item.active .channel-item-actions { margin-left: 6px; } .channel-item.active .channel-name { color: var(--accent); font-weight: 600; } .channel-item.dragging { opacity: 0.4; cursor: grabbing; } /* Canal avec un appel de groupe EN COURS : liseré vert "live" + pastille 📞 pulsée, pour repérer en un coup d'œil sur quel canal on est en communication. */ .channel-item.channel-in-call { border-color: rgba(61, 214, 140, 0.5); } .channel-item.channel-in-call > .channel-item-main { background: linear-gradient(135deg, rgba(61, 214, 140, 0.16), rgba(61, 214, 140, 0.05)); border-radius: 7px; } .channel-item.channel-in-call .channel-name { color: var(--green, #3dd68c); } .channel-call-badge { flex: 0 0 auto; margin-left: 4px; font-size: 11px; line-height: 1; animation: channel-call-pulse 1.6s ease-in-out infinite; } @keyframes channel-call-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.86); } } .channel-item.drag-over { border-color: var(--accent); background: rgba(124,106,247,0.08); border-radius: 8px; } .channel-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 5px; padding: 6px 10px; } .channel-prefix { color: var(--muted); font-size: 15px; flex-shrink: 0; line-height: 1; } /* flex-basis 0 → le name-wrap contribue 0 au calcul de wrap : le cluster méta reste sur la ligne 1 (à droite), et le nom rétrécit/tronque au lieu de pousser le méta à la ligne. */ .channel-name-wrap { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 6px; } /* Cluster méta (🔒 📞 👑 N👤 unread) aligné à DROITE, jamais tronqué. */ .channel-meta-right { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; } .channel-name { font-size: 13px; color: var(--text2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-lock { font-size: 11px; } /* Badge "wall" : signale "ici on parle à tout le canal" (vs DM membre). */ .channel-wall-tag { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: lowercase; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--muted); line-height: 1.4; } .channel-item:hover .channel-wall-tag, .channel-item.active .channel-wall-tag { background: rgba(61,214,140,0.18); color: var(--green); } [data-theme="paper"] .channel-wall-tag { background: rgba(0,0,0,0.06); color: var(--muted); } [data-theme="paper"] .channel-item:hover .channel-wall-tag, [data-theme="paper"] .channel-item.active .channel-wall-tag { background: rgba(156,58,46,0.14); color: var(--accent); } /* ── Main content ── */ #content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-glass); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); min-width: 0; position: relative; } /* ── Tab bar ── */ #tab-bar { height: 48px; min-height: 48px; border-bottom: 1px solid var(--border); background: var(--bg2); display: flex; align-items: center; padding: 0 12px; gap: 4px; flex-shrink: 0; overflow: hidden; } .tabbar-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .tabbar-logo { display: none; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; } /* ── Tab-bar brand (mobile : logo + texte DoraCom avant le burger) ──── */ .tabbar-brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 5px 10px; border-radius: 10px; flex-shrink: 0; order: 0; /* avant le burger partout */ transition: transform 0.2s, background 0.15s; -webkit-tap-highlight-color: transparent; } #btn-sidebar-toggle { order: 1; } .tabbar-brand:hover { background: var(--hover); } .tabbar-brand:active { transform: scale(0.95); } .tabbar-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent); filter: drop-shadow(0 0 4px rgba(156, 58, 46, 0.35)); animation: tabbar-brand-pulse 3.5s ease-in-out infinite; } .tabbar-brand-icon svg { width: 100%; height: 100%; } .tabbar-brand-text { font-weight: 800; font-size: 17px; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; } @keyframes tabbar-brand-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(156,58,46,0.35)); transform: scale(1); } 50% { filter: drop-shadow(0 0 9px rgba(156,58,46,0.65)); transform: scale(1.04); } } #tabs-container { display: flex; gap: 4px; align-items: center; overflow-x: auto; flex: 1; } #tabs-container::-webkit-scrollbar { height: 2px; } #tabs-container::-webkit-scrollbar-thumb { background: var(--border); } #btn-sidebar-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: transparent; border: none; cursor: pointer; gap: 4px; padding: 6px; margin-right: 4px; transition: background 0.15s; } #btn-sidebar-toggle:hover { background: var(--hover); } .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after { display: block; width: 18px; height: 2px; background: var(--text2); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .hamburger-icon { position: relative; } .hamburger-icon::before { content:''; position: absolute; top: -5px; left: 0; } .hamburger-icon::after { content:''; position: absolute; bottom: -5px; left: 0; } /* Animate to × when open (sidebar not collapsed on mobile) */ #main-ui.sidebar-mobile-open .hamburger-icon { background: transparent; } #main-ui.sidebar-mobile-open .hamburger-icon::before { transform: translateY(5px) rotate(45deg); background: var(--text); } #main-ui.sidebar-mobile-open .hamburger-icon::after { transform: translateY(-5px) rotate(-45deg); background: var(--text); } .tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap; transition: all 0.15s; } .tab:hover { background: var(--hover); color: var(--text); } .tab.active { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); } .tab-close { font-size: 14px; color: var(--muted); margin-left: 2px; opacity: 0; transition: opacity 0.1s; line-height: 1; } .tab:hover .tab-close { opacity: 1; } .tab-close:hover { color: var(--red); } /* Onglet AVEC UN APPEL EN COURS : teinte verte « live » + liseré, distinct de l'état actif (.active) → on voit sur quel onglet on est ET lesquels sonnent. */ .tab.tab-in-call { background: linear-gradient(135deg, rgba(61,214,140,0.20), rgba(61,214,140,0.06)); box-shadow: inset 0 0 0 1px rgba(61,214,140,0.55); color: var(--green, #3dd68c); } .tab.tab-in-call.active { box-shadow: inset 0 0 0 1.5px rgba(61,214,140,0.85); } .tab-call-dot { font-size: 11px; line-height: 1; flex: 0 0 auto; animation: channel-call-pulse 1.6s ease-in-out infinite; } /* ── Content header ── Couleur d'accent par contexte (variable lue par les éléments enfants) : - Mur (wall) → vert : "broadcast public" - DM → orange : "privé chiffré" - Canal (#) → violet : "groupe chiffré" Le header reçoit une bordure colorée + une bande haute, et la zone de messages prend une teinte de fond très subtile, pour que l'utilisateur sache toujours dans quel mode il écrit. */ #content-header { border-bottom: 1px solid var(--border); background: var(--bg2-glass); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); flex-shrink: 0; position: relative; /* Au-dessus de #messages-area (sœur suivante, elle aussi avec backdrop-filter → contexte de stacking) : sinon le menu ⋯ qui déborde du header est peint SOUS les messages et leur blur le délave. */ z-index: 20; } #content-header[data-context]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ctx-color, var(--accent)); opacity: 0.85; } #content-header[data-context="wall"] { --ctx-color: #3dd68c; } #content-header[data-context="dm"] { --ctx-color: #ffb340; } #content-header[data-context="channel"] { --ctx-color: #7c6af7; } #content-header[data-context="wall"] .ch-context-icon { filter: drop-shadow(0 0 4px rgba(61,214,140,0.6)); } #content-header[data-context="dm"] .ch-context-icon { filter: drop-shadow(0 0 4px rgba(255,179,64,0.6)); } #content-header[data-context="channel"] .ch-context-icon { filter: drop-shadow(0 0 4px rgba(124,106,247,0.6)); } .ch-context-icon { font-size: 17px; line-height: 1; flex-shrink: 0; } .ch-context-sub { font-size: 11px; color: var(--text2); font-weight: 500; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 4px; } .ch-dm-line { display: flex; align-items: center; gap: 8px; } .ch-channel-block { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .ch-channel-line { display: flex; align-items: center; gap: 6px; } /* Teinte de fond très subtile sur la zone de messages selon le contexte. */ #messages-area[data-context="wall"] { background: linear-gradient(180deg, rgba(61,214,140,0.025), transparent 80px); } #messages-area[data-context="dm"] { background: linear-gradient(180deg, rgba(255,179,64,0.030), transparent 80px); } #messages-area[data-context="channel"] { background: linear-gradient(180deg, rgba(124,106,247,0.025), transparent 80px); } /* Bandeau "▲ Nouveau" pour les canaux en mode feed (read-only). S'affiche au-dessus de #messages-area quand un nouveau message arrive et que l'user est descendu dans le feed. */ .feed-new-banner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; background: var(--accent); color: #fff; font-weight: 600; font-size: 12px; border: none; border-radius: 16px; padding: 7px 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(124,106,247,0.45); transition: transform 0.15s, box-shadow 0.15s; animation: feedBannerIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .feed-new-banner:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 8px 22px rgba(124,106,247,0.55); } @keyframes feedBannerIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .ch-wall { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; } .ch-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.2px; } .ch-sub { font-size: 12px; color: var(--text2); font-weight: 400; } .ch-channel { padding: 12px 20px; display: flex; align-items: center; gap: 10px; } .ch-channel-name { font-weight: 700; flex: 1; font-size: 15px; letter-spacing: -0.2px; } .ch-members { font-size: 12px; color: var(--text2); } .btn-leave { background: none; border: 1px solid var(--border); color: var(--text2); padding: 5px 13px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .btn-leave:hover { border-color: var(--red); color: var(--red); background: rgba(255,85,114,0.07); } .btn-del-chan { background: none; border: 1px solid rgba(255,85,114,0.3); color: var(--red); padding: 5px 13px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-left: 6px; } .btn-del-chan:hover { background: var(--red); color: white; border-color: var(--red); } .ch-dm { padding: 12px 20px; display: flex; align-items: center; gap: 10px; } .ch-dm-info { display: flex; flex-direction: column; gap: 2px; } .ch-dm-name { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; } .ch-dm-status { font-size: 12px; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: color 200ms ease; } .ch-dm-status[data-online="true"] { color: var(--green); } .ch-dm-status-icon { display: inline-flex; align-items: center; justify-content: center; } .ch-dm-status-icon svg { width: 18px; height: 18px; } /* Anciennes règles dot+label conservées en compat (le span existe encore en hidden si un autre flow le réveille). Le dot historique est masqué par cette structure — on garde le label "Online" caché en mobile (CSS existant L3160). */ .ch-dm-status-dot { display: none; } .dm-ctx-channel { font-size: 11px; color: var(--text2); background: var(--bg3); border-radius: 8px; padding: 1px 7px; display: inline-block; } /* Bouton "Vérifier" : fusionne l'ex-badge ⚪/🟢/🟠/🔴 avec le bouton d'action. Plus de confusion avec un toggle on/off. data-state pilote l'apparence (couleur, animation pour mismatch). Couleurs adaptatives via --bg3 / --text2 → marche sur paper, dark, matrix. */ .btn-verify-dm { display: inline-flex; align-items: center; gap: 5px; background: var(--bg3); border: 1px solid var(--bg4, transparent); border-radius: 14px; padding: 5px 11px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; line-height: 1; } .btn-verify-dm:hover { filter: brightness(1.08); transform: scale(1.03); } .btn-verify-dm:active { transform: scale(0.98); } /* Variante "bare" : juste l'icône, pas d'encadré. Override le bg/border pour rester un bouton cliquable mais visuellement nu. */ .btn-verify-dm-bare { background: transparent !important; border: none !important; padding: 4px !important; border-radius: 6px; } .btn-verify-dm-bare:hover { background: color-mix(in srgb, currentColor 10%, transparent) !important; } @supports not (color: color-mix(in srgb, red, blue)) { .btn-verify-dm-bare:hover { background: rgba(0,0,0,0.05) !important; } } /* Anim alerte mismatch : on garde un halo rouge sans encadré (box-shadow). */ .btn-verify-dm-bare[data-state="mismatch"] { background: transparent !important; color: #c53030 !important; } .btn-verify-dm-icon { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .btn-verify-dm-icon svg { width: 16px; height: 16px; } /* Bouclier remplace le texte "Vérifier/Vérifié/..." : icon-only. Le label reste en aria-label/title pour l'accessibilité. */ .btn-verify-dm-label { display: none; } .btn-verify-dm[data-state="unverified"] { color: var(--text2); } .btn-verify-dm[data-state="verified"] { color: #1a5e2e; border-color: #5a8a3a; background: rgba(127,255,170,0.18); } .btn-verify-dm[data-state="legacy"] { color: #7a5500; border-color: #c89a4a; background: rgba(255,208,127,0.22); } .btn-verify-dm[data-state="mismatch"] { color: #fff; border-color: #c53030; background: #e53e3e; animation: dm-verify-alert 2.2s ease-in-out infinite; } @keyframes dm-verify-alert { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); } 50% { box-shadow: 0 0 0 5px rgba(229,62,62,0.28); } } /* Dark theme : couleurs verified/legacy plus claires pour contraste */ [data-theme="default"] .btn-verify-dm[data-state="verified"], [data-theme="matrix"] .btn-verify-dm[data-state="verified"] { color: #7fffaa; border-color: rgba(127,255,170,0.45); background: rgba(26,94,46,0.30); } [data-theme="default"] .btn-verify-dm[data-state="legacy"], [data-theme="matrix"] .btn-verify-dm[data-state="legacy"] { color: #ffd07f; border-color: rgba(255,208,127,0.45); background: rgba(94,74,26,0.30); } /* ── Messages ── */ #messages-area { flex: 1; overflow-y: auto; overflow-x: hidden; /* anti-overflow horizontal sur mobile (bubble audio large = scrollbar gênante + bubble qui dépasse) */ padding: 20px; display: flex; flex-direction: column; gap: 8px; position: relative; } #messages-area::before { content: 'DoraCom'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-family: 'Fraunces', Georgia, serif; font-size: 88px; font-weight: 500; letter-spacing: -1.5px; font-style: italic; color: var(--accent); opacity: 0.04; pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } /* En paper : le watermark est encore plus discret (palette claire = on voit déjà tout, pas besoin de surcharge). */ [data-theme="paper"] #messages-area::before { opacity: 0.025; } #messages-area.drag-over::after, #content.drag-over::after { content: ''; position: absolute; inset: 8px; border: 2.5px dashed var(--accent); border-radius: 16px; background: rgba(124,106,247,0.07); pointer-events: none; z-index: 30; } #messages-area .drag-hint, #content .drag-hint { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; } #messages-area .drag-hint .dh-icon, #content .drag-hint .dh-icon { font-size: 52px; } #messages-area .drag-hint .dh-label, #content .drag-hint .dh-label { font-size: 18px; font-weight: 700; color: var(--accent); } #messages-area .drag-hint .dh-limit, #content .drag-hint .dh-limit { font-size: 12px; color: var(--text2); background: var(--bg2); padding: 3px 12px; border-radius: 20px; } .msgs-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text2); gap: 16px; padding: 32px 24px; text-align: center; } .msgs-empty-icon { font-size: 44px; line-height: 1; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 65%, transparent 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent) inset, 0 8px 24px -10px color-mix(in srgb, var(--accent) 25%, transparent); animation: msgs-empty-pulse 4s ease-in-out infinite; } .msgs-empty-text { font-size: 14px; font-weight: 500; color: var(--text2); max-width: 360px; line-height: 1.5; } @keyframes msgs-empty-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.04); opacity: 1; } } /* Fallback browsers without color-mix : opacité directe. Le @supports test color-mix garde la version richer pour les browsers OK. */ @supports not (color: color-mix(in srgb, red, blue)) { .msgs-empty-icon { background: rgba(124, 106, 247, 0.10); box-shadow: 0 0 0 1px rgba(124, 106, 247, 0.18) inset; } } .msg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; position: relative; transition: all 0.15s; animation: fadeUp 0.2s ease; } .msg-card:hover { border-color: var(--border2); background: var(--bg3); } .msg-card.mine { border-color: rgba(124,106,247,0.28); background: rgba(124,106,247,0.05); } .msg-card.mine:hover { border-color: rgba(124,106,247,0.42); background: rgba(124,106,247,0.09); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── QuantumSafe reveal ───────────────────────────────────────────────────── Apparition « déchiffrement » des NOUVEAUX messages (live uniquement, jamais le render d'historique) : la bulle monte en fondu pendant que le texte se résout depuis des glyphes chiffrés vers le clair (JS ui._qsReveal). C'est le storytelling E2E du produit — on VOIT le déchiffrement se produire. Coupé proprement par prefers-reduced-motion (bulle simple, pas de scramble). */ /* ── Decrypt média (image + son) — design handoff « DoraCom Decrypt Demo » (claude.ai/design, chat2). Image : arrive floutée + voile vert chiffré qui se résout en net. Son : balayage vert « décodage » qui traverse la bulle. CSS pur (animation-fill-mode both → état final net garanti même onglet en arrière-plan), aucune chirurgie DOM, coupé par prefers-reduced-motion. */ /* Image : flou→net piloté en JS (setInterval + filet setTimeout, comme le moteur texte) — robuste au throttling d'onglet en arrière-plan, là où une animation CSS resterait gelée au 1er keyframe = image bloquée floutée. Cf. ui._qsRevealMedia. */ .qs-media-audio { position: relative; overflow: hidden; } .qs-media-audio::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(47,158,106,0) 0%, rgba(47,158,106,0.38) 50%, rgba(47,158,106,0) 100%); animation: qsAudioSweep 1.5s ease-out forwards; } @keyframes qsAudioSweep { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .qs-media-img { animation: none; } .qs-media-audio::after { animation: none; display: none; } } /* ── QuantumSafe reveal ───────────────────────────────────────────────────── Apparition « déchiffrement » des NOUVEAUX messages (live uniquement, jamais le render d'historique) : la bulle monte en fondu pendant que le texte se résout depuis des glyphes chiffrés vers le clair (JS ui._qsReveal). C'est le storytelling E2E du produit — on VOIT le déchiffrement se produire. Coupé proprement par prefers-reduced-motion (bulle simple, pas de scramble). */ .qs-reveal { animation: qsBubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes qsBubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .qs-reveal { animation: fadeUp 0.15s ease both; } } /* Glyphes chiffrés du reveal (design handoff « DoraCom Decrypt Demo ») : vert #2f9e6a + lueur, bord de résolution plus lumineux. Les spans sont générés par ui._qsReveal avec caractères échappés. */ .d-on { } .d-sc { color: #2f9e6a; opacity: 0.92; text-shadow: 0 0 7px rgba(47, 158, 106, 0.6); } .d-edge { text-shadow: 0 0 11px rgba(47, 158, 106, 0.95); } .dm-row.sent .d-sc { filter: brightness(1.35); } /* Pastille « 🔓 DECRYPTING » — inline après l'heure, verre dépoli pro : bordure fine translucide, voile flouté, remplissage vert voilé qui balaie derrière le label avec un bord lumineux (scanner). Retirée au onDone. */ .decrypt-pill { position: relative; display: inline-flex; align-items: center; overflow: hidden; justify-content: flex-start; vertical-align: middle; margin-left: 8px; padding: 4px 11px; min-width: 132px; border-radius: 10px; white-space: nowrap; font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #143527; font-style: normal; background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.4)); -webkit-backdrop-filter: blur(9px) saturate(150%); backdrop-filter: blur(9px) saturate(150%); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 6px 16px rgba(20,53,39,0.12), inset 0 1px 0 rgba(255,255,255,0.7); } .dp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0; background: linear-gradient(90deg, rgba(47,158,106,0.48), rgba(66,196,137,0.7)); transition: width 0.12s linear; } .dp-fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(236,255,246,0.95); box-shadow: 0 0 10px rgba(120,240,190,0.9); } .dp-txt { position: relative; z-index: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } /* ── Chips d'états crypto ─────────────────────────────────────────────────── Remplacent les ~10 placeholders texte bruts ('🔒 (clé sender en attente)', '✉️ envoi en cours…', …) par un rendu système unifié dans la bulle. Deux familles : TRANSITOIRE (pending/sending/desync — point lilas qui pulse, ça va se résoudre tout seul) vs PERMANENT (lost/missing/error — cadenas sobre, pas anxiogène). Libellés via i18n (crypto_*). */ .crypto-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-style: italic; line-height: 1.4; color: var(--muted, #8a86a0); opacity: 0.9; } .crypto-chip::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; } .crypto-chip--pending::before, .crypto-chip--sending::before, .crypto-chip--desync::before { background: var(--accent, #7c6af7); opacity: 1; animation: qsChipPulse 1.2s ease-in-out infinite; } @keyframes qsChipPulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* « Défilement decrypting » : balayage lumineux continu sur le libellé pending (gradient clipé sur le texte qui défile, façon matrix discret) — l'état « Déchiffrement en cours… » se reconnaît au premier coup d'œil. */ .crypto-chip--pending { background: linear-gradient(90deg, currentColor 0%, currentColor 38%, var(--accent, #7c6af7) 50%, currentColor 62%, currentColor 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: qsChipSweep 1.8s linear infinite; } @keyframes qsChipSweep { 0% { background-position: 125% 0; } 100% { background-position: -125% 0; } } @media (prefers-reduced-motion: reduce) { .crypto-chip--pending::before, .crypto-chip--sending::before, .crypto-chip--desync::before { animation: none; } .crypto-chip--pending { animation: none; background: none; -webkit-text-fill-color: currentColor; } } [data-theme="paper"] .crypto-chip { color: var(--text2); } [data-theme="paper"] .dm-row.sent .crypto-chip { color: var(--bg2); } /* Bannière « messages protégés par clé renouvelée » : dépliable, explicative. Remplace le div gris inline-styled — clic = comprendre pourquoi + quoi faire. */ .sk-lost-details { margin: 6px auto 10px; max-width: 540px; text-align: center; font-size: 12.5px; color: var(--muted, #8a86a0); } .sk-lost-details summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; opacity: 0.8; background: rgba(124, 106, 247, 0.07); border: 1px solid rgba(124, 106, 247, 0.16); transition: opacity 0.15s; } .sk-lost-details summary::-webkit-details-marker { display: none; } .sk-lost-details summary:hover, .sk-lost-details[open] summary { opacity: 1; } .sk-lost-details .sk-lost-info { margin-top: 8px; padding: 10px 14px; border-radius: 10px; text-align: left; line-height: 1.55; background: rgba(124, 106, 247, 0.06); border: 1px solid rgba(124, 106, 247, 0.12); } [data-theme="paper"] .sk-lost-details { color: var(--text2); } [data-theme="paper"] .sk-lost-details summary, [data-theme="paper"] .sk-lost-details .sk-lost-info { background: var(--bg-bubble, #EDE5F2); border-color: var(--border, #d9cfc0); } .msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .msg-author { font-weight: 600; font-size: 13px; } /* Avatar + pseudo de l'auteur = cliquables → ouvrent un DM direct (1-to-1). Curseur pointeur + léger feedback au survol pour signaler l'action. */ .msg-card .avatar { cursor: pointer; transition: filter 0.12s ease, transform 0.12s ease; } .msg-card .avatar:hover { filter: brightness(1.08); transform: scale(1.05); } .msg-author { cursor: pointer; } .msg-author:hover { text-decoration: underline; text-underline-offset: 2px; } .msg-time { font-size: 11px; color: var(--muted); flex: 1; } .msg-duration { font-size: 10px; font-weight: 700; color: var(--text2); background: rgba(255,255,255,0.08); padding: 1px 7px; border-radius: 8px; letter-spacing: 0.04em; } /* Legacy text expiry (kept for DMs) */ .msg-expiry { display: flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 9px; border-radius: 12px; font-weight: 600; } .msg-expiry.ok { color: var(--green); background: rgba(61,214,140,0.1); } .msg-expiry.warn { color: var(--yellow); background: rgba(255,179,64,0.1); } .msg-expiry.urgent { color: var(--red); background: rgba(255,85,114,0.1); animation: blink 1s ease infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } /* Expiry progress bar */ .msg-expiry-bar { height: 2px; background: rgba(255,255,255,0.04); border-radius: 0 0 10px 10px; overflow: hidden; margin-top: 8px; opacity: 0.55; } .msg-expiry-fill { height: 100%; border-radius: 0 0 10px 10px; transition: width 1s linear, background 1s; } .msg-expiry-fill.ok { background: var(--green); } .msg-expiry-fill.warn { background: var(--yellow); } .msg-expiry-fill.urgent { background: var(--red); animation: blink 1s ease infinite; } .msg-actions { display: flex; gap: 3px; opacity: 0.35; transition: opacity 0.15s; } .msg-card:hover .msg-actions { opacity: 1; } /* Mobile / tactile : pas de hover → actions toujours visibles. On double la garde avec la largeur d'écran (certains appareils hybrides rapportent hover:hover) → sur mobile les actions (dont 📌 épingler) sont toujours atteignables sans hover. */ @media (hover: none) { .msg-actions { opacity: 1; } } @media (max-width: 700px) { .msg-actions { opacity: 1; } } /* DM : bouton ✕ inline dans la bulle (sender uniquement) */ .btn-dm-del { background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 12px; color: var(--muted); opacity: 0.4; transition: all 0.15s; align-self: flex-start; } .btn-dm-del:hover { opacity: 1; color: var(--red); background: var(--hover); } @media (hover: none) { .btn-dm-del { opacity: 1; } } .msg-actions button { background: none; border: none; cursor: pointer; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--muted); font-weight: 500; transition: all 0.1s; } .msg-actions button:hover { background: var(--hover); color: var(--text); } .msg-actions .btn-del:hover { color: var(--red); } .msg-body { font-size: 14px; line-height: 1.65; word-break: break-word; } .msg-img { /* min(px, 100%) : ne dépasse JAMAIS le conteneur/viewport (les images en max-width px FIXE débordaient hors écran sur mobile). height:auto garde le ratio quand la largeur est contrainte. */ max-width: min(380px, 100%); max-height: 280px; height: auto; border-radius: 10px; object-fit: cover; cursor: pointer; display: block; margin-top: 10px; transition: opacity 0.15s; /* Ombre DOUCE (était rgba(0,0,0,0.3) = halo noir dur, vilain sur fond clair). Subtile, fondue dans le fond — surchargée par thème ci-dessous. */ box-shadow: 0 2px 10px rgba(0,0,0,0.12); } .msg-img:hover { opacity: 0.88; } .msg-file { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-top: 8px; max-width: 300px; transition: border-color 0.15s; } .msg-file:hover { border-color: var(--border2); } .msg-file-icon { font-size: 22px; } .msg-file-info { flex: 1; min-width: 0; } .msg-file-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-file-size { font-size: 11px; color: var(--muted); margin-top: 1px; } /* Inline PDF viewer */ .msg-pdf-wrap { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg3); } .msg-pdf-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); } .msg-pdf-header .msg-file-name { flex: 1; font-size: 12px; font-weight: 600; } .btn-pdf-toggle { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; transition: all 0.15s; } .btn-pdf-toggle:hover { background: var(--hover); color: var(--text); } .msg-pdf-frame { width: 100%; height: 480px; border: none; display: block; background: #fff; } /* DM bubbles */ .dm-row { display: flex; gap: 10px; align-items: flex-end; animation: fadeUp 0.15s ease; margin-bottom: 6px; padding: 0 8px; } .dm-row.sent { flex-direction: row-reverse; } /* Entrée système centrée (appel manqué éphémère 24h) */ .dm-row.dm-system { justify-content: center; align-items: center; } .dm-missed-call { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border2); color: var(--text); font-size: 13px; opacity: 0.92; } .dm-missed-call svg { width: 16px; height: 16px; color: #e0564d; flex: 0 0 auto; } .dm-missed-call .dm-missed-call-time { color: var(--muted); font-variant-numeric: tabular-nums; } [data-theme="big"] .dm-missed-call { font-size: 18px; padding: 8px 16px; border-color: var(--border); } [data-theme="big"] .dm-missed-call svg { width: 22px; height: 22px; } /* Carte système centrée dans un canal (appel de groupe manqué éphémère 24h) */ .msg-card.msg-system { display: flex; justify-content: center; align-items: center; background: none; border: none; box-shadow: none; padding: 6px 0; gap: 0; } .msg-card.msg-system::before, .msg-card.msg-system::after { content: none; } .dm-content { max-width: 72%; min-width: 60px; display: flex; flex-direction: column; } .dm-row.sent .dm-content { align-items: flex-end; } .dm-row.received .dm-content { align-items: flex-start; } .dm-bubble { background: var(--bg3); border: 1px solid var(--border2); border-radius: 18px; padding: 10px 16px; font-size: 14px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; } .dm-row.sent .dm-bubble { background: var(--accent); color: white; border-color: var(--accent); border-radius: 18px 18px 4px 18px; box-shadow: 0 3px 12px var(--accent-glow); } .dm-row.received .dm-bubble { border-radius: 18px 18px 18px 4px; } /* Bulle ne contenant QU'UN MÉDIA (image / vidéo / audio / lottie, SANS légende .msg-media-caption) : on retire le « chrome » de bulle (fond accent foncé, bordure, ombre, padding). Le média se suffit à lui-même → fini le gros cadre sombre (« bordure noire ») autour des images/vidéos envoyées (retour user 2026-06-11). Convention WhatsApp/iMessage/Telegram. S'applique sent + reçu. Avec une légende, le fond est conservé (le texte a besoin du contraste). */ /* Spécificité .dm-row .dm-content .dm-bubble (0,5,0) pour battre la règle paper [data-theme="paper"] .dm-row.sent .dm-bubble { background:#2A1A14 !important } (0,4,0) — sinon le fond sombre reste malgré le !important. */ .dm-row .dm-content .dm-bubble:has(.dm-img):not(:has(.msg-media-caption)), .dm-row .dm-content .dm-bubble:has(.msg-video-wrap):not(:has(.msg-media-caption)), .dm-row .dm-content .dm-bubble:has(.msg-audio-wrap):not(:has(.msg-media-caption)), .dm-row .dm-content .dm-bubble:has(.msg-lottie):not(:has(.msg-media-caption)) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; } .dm-ts { font-size: 10px; color: var(--muted); margin-top: 3px; padding: 0 4px; display: flex; gap: 6px; align-items: center; } .dm-row.sent .dm-ts { text-align: right; justify-content: flex-end; } .dm-status { font-size: 10px; color: var(--muted); } .dm-status:has([title="Livré"]) { color: var(--accent); } .dm-img { max-width: min(260px, 100%); max-height: 220px; height: auto; border-radius: 12px; object-fit: cover; cursor: pointer; display: block; margin-top: 4px; } /* Transfer progress */ .transfer-wrap { margin-top: 8px; } .transfer-bar-bg { height: 3px; background: var(--hover); border-radius: 3px; overflow: hidden; } .transfer-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; } .transfer-label { font-size: 10px; color: var(--muted); margin-top: 3px; } /* ── Composer ── */ #composer { border-top: 1px solid var(--border); background: var(--bg2); padding: 8px 12px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); flex-shrink: 0; } .security-tagline { text-align: center; font-size: 10px; color: var(--text); opacity: 0.75; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } .composer-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .composer-toolbar-right { display: flex; align-items: center; gap: 2px; margin-left: auto; } .expiry-label { font-size: 11px; color: var(--muted); margin-right: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .expiry-selector { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; position: relative; } .expiry-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .expiry-btn:hover { border-color: var(--accent); color: var(--accent); } .expiry-btn.active { background: rgba(124,106,247,0.14); border-color: var(--accent); color: var(--accent); } /* ── Sélecteur d'expiration condensé (v420) : trigger + popover ── */ .expiry-trigger { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 26px; line-height: 1; } .expiry-trigger:hover { border-color: var(--accent); color: var(--accent); } .expiry-trigger.is-viewonce { color: var(--accent); border-color: var(--accent); background: rgba(124,106,247,0.14); } .expiry-trigger.is-viewonce svg { width: 16px; height: 16px; display: block; } .expiry-popover { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; z-index: 1060; min-width: 130px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); animation: fadeIn 0.12s ease; } .expiry-popover.hidden { display: none; } .expiry-popover .expiry-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .expiry-popover .expiry-btn.hidden { display: none; } .expiry-popover .expiry-opt-label { font-size: 11px; } .composer-main { display: flex; align-items: flex-end; gap: 8px; background: var(--bg3); border: 1.5px solid var(--border); border-radius: var(--radius-xl); /* Cursor text sur toute la zone : clique n'importe où dans le bandeau → ça ressemble visuellement à un input cliquable, et avec le handler JS on focusera le textarea (un seul clic au lieu de plusieurs). */ cursor: text; padding: 8px 8px 8px 14px; transition: border-color 0.2s, box-shadow 0.2s; } .composer-main:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .btn-attach { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; transition: color 0.15s; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .btn-attach:hover { color: var(--accent); } .btn-attach svg { width: 20px; height: 20px; display: block; } /* Icône SVG dans btn-send (avion en papier) */ .btn-send svg { width: 18px; height: 18px; display: block; } /* Push-to-talk : bouton Envoyer en mode MICRO (champ vide) + état enregistrement. */ .btn-send.mode-record { opacity: 0.92; } .btn-send.recording { background: #e0564d !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(224,86,77,0.25); animation: audio-pulse 1s ease-in-out infinite; } /* Chip « mémo audio prêt — appuie sur Envoyer ». */ .voice-pending-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 10px 6px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); font-size: 12px; color: var(--text2); } .voice-pending-chip .vpc-ico { font-size: 14px; flex: 0 0 auto; } .voice-pending-chip .vpc-label { flex: 1 1 auto; min-width: 0; } .voice-pending-chip .vpc-cancel { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; } .voice-pending-chip .vpc-cancel:hover { color: var(--red); } /* Icône SVG dans le bouton visibilité (œil) — alignement inline avec le texte */ .btn-visibility-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; } /* Mode View Once : icône œil inline dans expiry-selector */ .expiry-btn.expiry-viewonce svg { width: 16px; height: 16px; display: block; } /* Drop overlay : icône grande */ .drop-icon svg { width: 64px; height: 64px; display: block; color: var(--accent); } /* Tagline sécurité : icônes inline lock + shield */ .security-tagline .tagline-icon { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 1px; } .mic-active { color: #e53e3e !important; animation: mic-pulse 1s ease-in-out infinite; } @keyframes mic-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } } #message-input { flex: 1; background: none; border: none; color: var(--text); font-size: 14px; outline: none; resize: none; font-family: inherit; line-height: 1.5; max-height: 120px; overflow-y: auto; } #message-input::placeholder { color: var(--muted); } .btn-send { background: var(--accent); border: none; color: white; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; box-shadow: 0 2px 10px var(--accent-glow); } .btn-send:hover:not(:disabled) { background: var(--accent2); transform: scale(1.06); box-shadow: 0 4px 14px var(--accent-glow); } .btn-send:disabled { background: var(--hover); color: var(--muted); cursor: not-allowed; box-shadow: none; } #file-preview { margin-top: 10px; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; gap: 10px; } #file-preview img { max-height: 56px; max-width: 72px; border-radius: 6px; object-fit: cover; } .fp-info { flex: 1; min-width: 0; } .fp-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-size { font-size: 11px; color: var(--muted); margin-top: 1px; } .btn-rm-file { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px; padding: 2px 4px; line-height: 1; transition: color 0.15s; } .btn-rm-file:hover { color: var(--red); } /* Multi-fichiers en file d'attente — liste compacte verticale */ #file-preview .fp-multi { width: 100%; display: flex; flex-direction: column; gap: 6px; } #file-preview .fp-multi-header { font-size: 12px; font-weight: 600; color: var(--text2); padding-bottom: 6px; border-bottom: 1px solid var(--border); } #file-preview .fp-multi-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; } #file-preview .fp-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.03); font-size: 12px; } #file-preview .fp-item-icon { font-size: 16px; flex-shrink: 0; } #file-preview .fp-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #file-preview .fp-item-size { font-size: 11px; color: var(--muted); flex-shrink: 0; } #file-preview .fp-item-rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1; flex-shrink: 0; transition: color 0.15s; } #file-preview .fp-item-rm:hover { color: var(--red); } /* ── Drag & Drop overlay (removed — drop zone is now #messages-area) ── */ #drop-overlay { display: none !important; } #modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(10px); } .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 20px; padding: 24px 26px; width: 400px; max-width: 92vw; /* Toujours scrollable si le contenu dépasse la fenêtre — sinon les modales riches (création de canal, settings) cachent le bas (boutons OK/Annuler) sur desktop comme sur mobile. */ max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; animation: modalIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); } /* Sticky bouton-bar en bas pour modales riches — toujours visible pendant le scroll. Le gradient évite que le contenu coupe sec sous la barre. */ .modal-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--bg2) 35%); padding-top: 16px; z-index: 1; } /* Petit polish scrollbar pour que ça reste discret */ .modal::-webkit-scrollbar { width: 8px; } .modal::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; } .modal::-webkit-scrollbar-thumb:hover { background: var(--muted); } @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(-12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.3px; } .modal-body { display: flex; flex-direction: column; gap: 14px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; } .form-input { background: var(--bg3); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); padding: 10px 13px; font-size: 14px; outline: none; transition: all 0.15s; font-family: inherit; } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-hint { font-size: 11px; color: var(--muted); } .form-error { font-size: 12px; color: var(--red); font-weight: 500; } /* Anti-régression : cache le bloc "Authentication required" / Your login / Your password de la modale Create channel. Même si une version cachée du JS (SW non encore réactivé) génère encore ce bloc, on le masque visuellement et on l'enlève du tab order. */ [name="creationLogin"], [name="creationPassword"], .form-group:has([name="creationLogin"]), .form-group:has([name="creationPassword"]), #creation-auth-error { display: none !important; } /* Le wrapper avec border violet contient l'icône clé + ces deux inputs. :has() permet de cibler exactement ce div sans risquer d'autres modales. */ div:has(> .form-group > [name="creationLogin"]), div:has(> .form-group > [name="creationPassword"]) { display: none !important; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } .modal-create-header { text-align: center; padding: 8px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; margin-top: -4px; } .modal-create-icon { font-size: 36px; margin-bottom: 8px; filter: drop-shadow(0 4px 10px rgba(124,106,247,0.4)); } .modal-create-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; background: linear-gradient(135deg, var(--text), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-create-subtitle { font-size: 12px; color: var(--muted); margin-top: 4px; } .modal-actions.centered { justify-content: center; gap: 12px; } .modal-actions.centered .btn-primary { padding: 11px 32px; font-size: 14px; background: linear-gradient(135deg, var(--accent), #a78bfa); box-shadow: 0 4px 18px var(--accent-glow); } .btn { padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: none; font-family: inherit; letter-spacing: 0.01em; } .btn-primary { background: var(--accent); color: white; box-shadow: 0 2px 10px var(--accent-glow); } .btn-primary:hover { background: var(--accent2); box-shadow: 0 4px 14px var(--accent-glow); transform: translateY(-1px); } .btn-secondary { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); } .btn-secondary:hover { border-color: var(--text2); color: var(--text); background: var(--hover); } .btn-danger { background: var(--red); color: white; } .btn-danger:hover { opacity: 0.85; transform: translateY(-1px); } /* ── Toasts ── */ #toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 999; pointer-events: none; } .toast { background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; padding: 12px 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; max-width: 320px; animation: slideR 0.25s ease, fadeOut 0.3s ease 2.7s forwards; box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); } .toast.success { border-left: 3px solid var(--green); } .toast.error { border-left: 3px solid var(--red); } .toast.info { border-left: 3px solid var(--accent); } @keyframes slideR { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* ── Lightbox ── */ #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; backdrop-filter: blur(12px); } #lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 12px; object-fit: contain; box-shadow: 0 24px 60px rgba(0,0,0,0.6); } /* ── Visibility toggle ── */ .btn-visibility { background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 12px; margin-top: 3px; transition: all 0.15s; } .btn-visibility:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,106,247,0.08); } .btn-visibility.visibility-off { border-color: var(--muted); color: var(--muted); opacity: 0.65; } .btn-push-toggle { background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 10px; flex-shrink: 0; line-height: 1; transition: all 0.15s; } .btn-push-toggle:hover { border-color: var(--accent); background: rgba(124,106,247,0.08); } .btn-push-toggle.push-active { border-color: var(--accent); color: var(--accent); } .btn-push-toggle.push-tor-disabled { border-color: #5a3d8a; color: #b298ff; background: rgba(90,61,138,0.08); cursor: not-allowed; opacity: 0.85; } .btn-push-toggle.push-tor-disabled:hover { background: rgba(90,61,138,0.08); } /* Install PWA — bouton pleine largeur dans le footer sidebar, juste au-dessus du theme switcher. Mis en avant pour pousser l'install (mode app natif). */ .btn-install-pwa { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 24px); margin: 8px 12px 4px 12px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, rgba(61,214,140,0.14), rgba(61,214,140,0.06)); border: 1px solid rgba(61,214,140,0.35); color: #3dd68c; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; transition: all 0.15s; } .btn-install-pwa:hover { background: linear-gradient(180deg, rgba(61,214,140,0.22), rgba(61,214,140,0.10)); border-color: rgba(61,214,140,0.6); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(61,214,140,0.15); } .btn-install-pwa:active { transform: translateY(0); } .btn-install-icon { font-size: 18px; line-height: 1; } .btn-install-label { white-space: nowrap; } /* Modal d'instructions PWA pour iOS Safari (pas d'API d'install programmatique). */ #pwa-install-overlay { position: fixed; inset: 0; z-index: 2147483646; background: rgba(8,10,14,.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Inter', system-ui, sans-serif; } #pwa-install-overlay .pwa-card { position: relative; max-width: 420px; width: 100%; padding: 28px 26px; border-radius: 14px; background: linear-gradient(180deg, #14181f, #0e1115); border: 1px solid rgba(255,255,255,.07); box-shadow: 0 30px 80px rgba(0,0,0,.55); color: #e9eef5; } #pwa-install-overlay .pwa-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #a9b3c2; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px; } #pwa-install-overlay .pwa-close:hover { color: #fff; } #pwa-install-overlay .pwa-icon { font-size: 36px; margin-bottom: 8px; text-align: center; } #pwa-install-overlay .pwa-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 18px; } #pwa-install-overlay .pwa-steps { padding-left: 22px; margin: 0 0 16px 0; font-size: 14px; line-height: 1.6; color: #d5dbe5; } #pwa-install-overlay .pwa-steps li + li { margin-top: 6px; } #pwa-install-overlay .pwa-share { display: inline-block; font-size: 16px; vertical-align: -1px; } #pwa-install-overlay .pwa-hint { font-size: 12px; color: #8b94a3; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px; } /* ── Media in messages ── */ .msg-video { max-width: 400px; width: 100%; border-radius: 10px; display: block; margin-top: 8px; background: #000; box-shadow: 0 2px 10px rgba(0,0,0,0.12); } .msg-video-wrap { position: relative; display: inline-block; max-width: 400px; width: 100%; margin-top: 8px; } .msg-video-wrap .msg-video { margin-top: 0; } /* Boutons overlay (en haut-droite) : plein écran + ouvrir dans onglet. Visibles au hover pour ne pas surcharger l'image. */ .msg-video-expand, .msg-video-open { position: absolute; top: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; font-size: 15px; line-height: 1; text-decoration: none; opacity: 0; transition: opacity 0.15s, background 0.15s, transform 0.1s; backdrop-filter: blur(4px); } .msg-video-expand { right: 8px; } .msg-video-open { right: 44px; } .msg-video-wrap:hover .msg-video-expand, .msg-video-wrap:hover .msg-video-open, .msg-video-wrap:focus-within .msg-video-expand, .msg-video-wrap:focus-within .msg-video-open { opacity: 1; } .msg-video-expand:hover, .msg-video-open:hover { background: rgba(0,0,0,0.78); transform: scale(1.05); } /* Touch devices : pas de hover → toujours visibles */ @media (hover: none) { .msg-video-expand, .msg-video-open { opacity: 0.85; } } /* ── TikTok-style Video Viewer ── */ #video-viewer { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; user-select: none; } #video-viewer.hidden { display: none; } #video-viewer-player { max-width: 100%; max-height: 100dvh; width: 100%; object-fit: contain; outline: none; } #video-viewer-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 18px; cursor: pointer; z-index: 2001; padding: 6px 11px; border-radius: 50%; line-height: 1; } #video-viewer-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,0,0,0.5); padding: 4px 14px; border-radius: 20px; pointer-events: none; } .video-nav-hint { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.55); font-size: 22px; pointer-events: none; transition: opacity 0.2s; } .video-nav-hint.up { top: 52px; } .video-nav-hint.down { bottom: 14px; } .video-nav-hint.disabled { opacity: 0.15; } /* swipe animation */ @keyframes swipeUp { from { transform: translateY(0); opacity:1 } to { transform: translateY(-60px); opacity:0 } } @keyframes swipeDown { from { transform: translateY(0); opacity:1 } to { transform: translateY(60px); opacity:0 } } .video-viewer-anim-up { animation: swipeUp 0.25s ease forwards; } .video-viewer-anim-down { animation: swipeDown 0.25s ease forwards; } /*