/* ==================================================================== CSS pour chat.html - Bubblai Auteur: Nicolas Vuillier Date: 17/10/2025 ==================================================================== */ /* ── Anti-layout-shift images & vidéos dans le chat ────────────────── Réserve l'espace avant le chargement pour éviter les sauts de scroll. Les images générées (gen-image-wrap) gardent leur style inline. */ /* ==================================================================== 🛠️ FIX WEBKIT/SAFARI MOBILE — Drawer menu flou et inopérant ==================================================================== Cause : filter:blur() sur un position:fixed crée un stacking context sur WebKit. Les éléments frères position:fixed (drawer, modals) se retrouvent "capturés" dans ce contexte → floutés et inopérables. Solution : - .chat-bg-layer : pas de filter par défaut (opacity seule) - Uniquement sur les navigateurs non-WebKit (Chrome, Firefox) : on réactive le blur via @supports not (-webkit-touch-callout: none) (-webkit-touch-callout est supporté SEULEMENT par WebKit/Safari) ==================================================================== */ .chat-bg-layer { /* Pas de filter: blur ici — WebKit/Safari mobile bug : filter sur position:fixed crée un stacking context qui capture le drawer */ filter: none; } @supports not (-webkit-touch-callout: none) { /* Chrome, Firefox, Edge — pas Safari iOS/macOS */ .chat-bg-layer { filter: blur(8px); opacity: 0.2; /* Restaurer l'opacité originale sur non-WebKit */ } } /* Bulles décoratives JS — blur désactivé sur iOS (Chrome + Safari utilisent WebKit iOS) La classe .is-ios est injectée sur par JS au tout départ */ .bg-bubble-item { filter: blur(4px); /* Desktop par défaut */ } .is-ios .bg-bubble-item, .chat-bg-layer.is-ios { filter: none; /* iOS : jamais de blur sur position:fixed */ } /* Même règle pour .chat-bg-layer sur iOS */ .is-ios .chat-bg-layer { filter: none; } /* ── fin fix WebKit drawer ─────────────────────────────────────────── */ .msg img:not([class]), .msg img[class=""], .bubblai-video-wrap video { display: block; max-width: 100%; aspect-ratio: auto; min-height: 40px; background: rgba(255,255,255,0.04); border-radius: 12px; object-fit: contain; } .bubblai-video-wrap video { aspect-ratio: 16 / 9; width: 100%; background: #000; } /* ── Carte intégrée (action web_map) ─────────────────────────────── */ .bubblai-map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); } .bubblai-map-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); } .bubblai-map-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bubblai-map-mode { font-size: 11px; color: var(--text-secondary); background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .bubblai-map-open-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(0,212,255,0.3); background: rgba(0,212,255,0.06); white-space: nowrap; transition: background 0.2s, border-color 0.2s; } .bubblai-map-open-btn:hover { background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.5); } .bubblai-map-iframe { display: block; width: 100%; height: 380px; border: none; } /* Thème clair */ .theme-light .bubblai-map-wrap { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); } .theme-light .bubblai-map-header { background: rgba(0,0,0,0.04); border-bottom-color: rgba(0,0,0,0.08); } .theme-light .bubblai-map-mode { background: rgba(0,0,0,0.06); } /* ── fin carte ──────────────────────────────────────────────────────── */ /* Avatar du welcome : override — centré, pas de placeholder ni aspect-ratio forcé */ .welcome-message img { display: block; margin: 0 auto 16px; aspect-ratio: unset; min-height: unset; background: transparent; } /* ── fin anti-layout-shift ─────────────────────────────────────────── */ /* 🌙 THÈME SOMBRE (par défaut) */ :root{ --primary:#00D4FF; --secondary:#FF6B6B; --accent:#4ECDC4; --bg:#0A0E1A; --bg-primary:#0A0E1A; --bg-secondary:#1A1F2E; --bg-tertiary:#252B3D; --bg-darker:#0A0E1A; --card-bg:#1A1F2E; --text:#FFFFFF; --text-primary:#FFFFFF; --text-secondary:#B0B7C3; --text-light:#B0B7C3; --text-lighter:#6B7280; --text-muted:#6B7280; --shadow:0 4px 20px rgba(0,0,0,0.3); --shadow-hover:0 8px 30px rgba(0,0,0,0.4); --border:rgba(255, 255, 255, 0.1); --success:#10B981; --warning:#F59E0B; --error:#EF4444; --danger:#EF4444; } /* 📜 SCROLLBARS SOMBRES ET DISCRÈTES */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 212, 255, 0.3) rgba(255, 255, 255, 0.05); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 5px; } *::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.3); border-radius: 5px; transition: background 0.2s ease; } *::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.5); } *::-webkit-scrollbar-corner { background: transparent; } /* 🎯 TOOLTIPS PERSONNALISÉS (arrondis et stylisés) */ [title]:not([title=""]) { position: relative; cursor: pointer; } /* Masquer le tooltip natif du navigateur */ [title]:not([title=""]):hover { cursor: pointer; } /* 🌞 THÈME CLAIR */ [data-theme="light"] { --primary:#0891b2; --secondary:#dc2626; --accent:#059669; --bg:#F8FAFC; --bg-primary:#FFFFFF; --bg-secondary:#F1F5F9; --bg-tertiary:#E2E8F0; --bg-darker:#CBD5E1; --card-bg:#FFFFFF; --text:#0F172A; --text-primary:#0F172A; --text-secondary:#475569; --text-light:#64748B; --text-lighter:#94A3B8; --text-muted:#94A3B8; --shadow:0 4px 20px rgba(0,0,0,0.08); --shadow-hover:0 8px 30px rgba(0,0,0,0.12); --border:rgba(0, 0, 0, 0.1); --success:#059669; --warning:#D97706; --error:#DC2626; --danger:#DC2626; } /* Message utilisateur en noir dans le thème clair */ [data-theme="light"] .me { color: #0F172A; } /* Menu de sélection dans le thème clair */ [data-theme="light"] .cfg select { background: #FFFFFF; color: #0F172A; border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .cfg select option { background: #FFFFFF; color: #0F172A; } /* Menu déroulant des modèles dans le thème clair */ [data-theme="light"] #modelDropdown { background: #FFFFFF !important; border-color: var(--primary) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] .model-option { color: #0F172A !important; } [data-theme="light"] .model-option:hover { background: rgba(8, 145, 178, 0.1) !important; } *{box-sizing:border-box} html,body{ margin:0; height:100%; height:100dvh; /* Viewport dynamique pour mobile */ background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; overflow-x:hidden; /* Empêcher le scroll horizontal */ overflow-y:auto; /* Permettre le scroll vertical */ max-width:100vw; /* Ne jamais dépasser la largeur de l'écran */ } .header{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background: transparent; border-bottom:none; box-shadow:none; z-index:20; transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1); } /* Quand le drawer est ouvert, décaler l'en-tête */ .drawer-open .header{ margin-left:320px; } #iconBar { pointer-events: none; } #iconBar button { pointer-events: auto; } /* Ligne verticale maintenant dans un élément séparé #iconBarLine */ .hamburger{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; background: #02313b; border:2px solid var(--primary); border-radius:50%; color:var(--primary); font-size:20px; cursor:e-resize; transition:all 0.2s cubic-bezier(0.4,0,0.2,1); padding:0; pointer-events: auto !important; position: relative; top: -3px; z-index: 900 !important; /* En dessous du drawer (1002) pour ne pas gêner */ } /* 💻 Cacher le bouton hamburger mobile sur desktop */ #hamburgerMobile { display: none; } .hamburger:hover{ background:rgba(0, 212, 255, 0.30); transform:scale(1.05); cursor:e-resize; } /* Cacher le hamburger desktop quand le drawer est ouvert */ /* Sur page-chat: cacher le hamburger de iconBar */ .page-chat.drawer-open .hamburger-desktop{ display:none; } /* Sur page-chat-projet: cacher aussi le hamburger desktop */ .page-chat-projet.drawer-open .hamburger-desktop{ display:none; } .btn{ appearance:none; border:1px solid var(--border); background:var(--card-bg); color:var(--text); border-radius:12px; padding:10px 16px; cursor:pointer; font-weight:500; transition:all 0.2s ease; font-size:14px; } .btn:hover{ background:var(--bg); border-color:var(--primary); transform:translateY(-1px); } .btn.primary{ background:var(--primary); color:white; border-color:var(--primary); } .btn.primary:hover{ background:#0891b2; transform:translateY(-1px); } .icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:18px; } .back{ text-decoration:none; display:flex; align-items:center; gap:8px; color:var(--primary); transition:color 0.2s ease; } .back:hover{ color:var(--accent); } .title{ font-weight:700; font-size:20px; letter-spacing:-0.5px; color:var(--text); } .agent-name{ font-weight:600; font-size:16px; color:var(--primary); margin-left:auto; padding:6px 12px; background: #02313b; border-radius:20px; border:1px solid var(--primary); } .app{ display:grid; grid-template-columns:1fr; height:100vh; height:100dvh; /* Viewport dynamique pour mobile */ gap:0; background:#0a0e1a00; transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1); padding-top:0; box-sizing:border-box; } /* viewJSON aligné avec agent-name dans le header */ #viewJSON { border-radius: 20px; font-size: 13px; padding: 6px 12px; background: #02313b; border: 1px solid var(--primary); color: var(--primary); display: flex; align-items: center; gap: 4px; white-space: nowrap; position: relative; left: -3px; top: -2px; } .drawer-open .app{ margin-left:320px; } /* Quand le drawer est ouvert, décaler aussi l'input-area fixe */ .drawer-open .input-area{ left:320px; } .drawer{ position:fixed; left:0; top:0; height:100vh; width:90vw; max-width:320px; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:var(--shadow-hover); z-index:1300; background:#1a1f2e; display:flex; /* colonne: header fixe + liste scrollable */ flex-direction:column; pointer-events: none; /* Ne pas bloquer les clics quand fermé */ } /* Drawer ouvert */ body.drawer-open .drawer{ transform:translateX(0); pointer-events: auto; /* Réactiver les clics quand ouvert */ } .drawer header{ padding:20px; border-bottom:1px solid var(--border); background:#0a0e1a; flex:0 0 auto; /* ne pas prendre toute la hauteur */ } .drawer h3{ margin:0 0 16px 0; font-size:16px; font-weight:600; color:var(--text); } .drawer-close-btn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-secondary); font-size:16px; cursor:pointer; transition:all 0.2s ease; margin:0; padding:0; } .drawer-close-btn:hover{ background:var(--primary); border-color:var(--primary); color:white; transform:translateX(-2px); } .drawer-close-btn:active{ transform:scale(0.95) translateX(-2px); } .row{ display:flex; gap:12px; align-items:center; } .input{ flex:1; background:var(--card-bg); color:var(--text); border:1px solid #00d4ff; border-radius:10px; padding:10px 12px; transition:all 0.2s ease; font-size:14px; } .input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(28,199,193,0.1); } .list{ padding:0; margin:0; list-style:none; flex:1; overflow:auto; } .thread{ padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; cursor:pointer; transition:all 0.2s ease; position:relative; /* pour le badge en chevauchement */ font-size:15px; } .thread:hover{ background:var(--bg); } .thread.active{ background:rgba(0, 212, 255, 0.20); color:var(--primary); border:2px solid var(--primary); } .thread.active .meta{ color:var(--primary); opacity:0.8; } .thread .left{ display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; } .thread .t-title{ font-weight:500; font-size:16px; display:flex; align-items:center; gap:7px; } /* Le texte du titre prend la place et s'ellipse, le badge reste visible */ .t-title .t-text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .thread .meta{ font-size:11px; color:var(--text-light); margin-left:35px; } /* Petit badge affichant le nom de l'agent du fil */ .agent-badge{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; /* pas d'espace artificiel entre l'icône et le texte */ padding:2px 4px; /* padding symétrique pour un centrage visuel */ font-size:6px; line-height:1; color:var(--primary); border:1px solid var(--primary); border-radius:999px; background:rgba(0,212,255,0.12); max-width:15%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:auto; /* autorise le tooltip au survol */ } .agent-badge .icon{font-size:20px; opacity:0.95; margin:0; display:block; line-height:2; margin-bottom:-1px} .agent-badge .txt{ font-size:8px; line-height:1; margin:0; display:block; text-transform:uppercase; letter-spacing:0.2px; font-weight:600; min-width:10px; /* stabilité visuelle */ text-align:center; } .agent-badge--overlay{ position:absolute; top:8px; left:16px; transform:translateY(-40%); z-index:1; } .thread.active .agent-badge{ color:#fff; border-color:#fff; background:rgba(255,255,255,0.18); } .actions{ display:flex; gap:6px; opacity:0; transition:opacity 0.2s ease; } .thread:hover .actions{ opacity:1; } .mini{ appearance:none; border:1px solid var(--border); background:var(--card-bg); color:var(--text); border-radius:8px; padding:6px 8px; cursor:pointer; font-size:12px; transition:all 0.2s ease; } .mini:hover{ background:var(--bg); transform:scale(1.05); } .main{ display:flex; flex-direction:column; height:100dvh; background:#0a0e1a00; overflow:hidden; position:relative; z-index:1; } /* Wrapper pour l'effet de fondu haut/bas sur le fil de discussion uniquement */ .history-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-mask-image: linear-gradient( to bottom, transparent 0px, black 72px, black calc(100% - 60px), transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0px, black 72px, black calc(100% - 60px), transparent 100% ); } .card{ background:var(--bg); border-bottom:1px solid var(--border); padding:20px; } .cfg{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:center; } .cfg select{ background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; cursor:pointer; min-height:44px; font-family:inherit; width:100%; } .cfg select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(28,199,193,0.1); } .cfg select option{ background:var(--card-bg); color:var(--text); padding:8px 12px; } .cfg .full{ grid-column:1/-1; } .cfg .controls{ display:flex; gap:8px; grid-column:1/-1; justify-content:flex-start; flex-wrap:wrap; } .history{ flex:1; overflow:visible; padding:90px 20px 140px 20px; background:transparent; display:flex; flex-direction:column; align-items:center; max-width:1000px; margin:0 auto; width:80%; position:relative; } body.agent-chat-bg-active .main { background: transparent; } body.agent-chat-bg-active .history { background: transparent !important; } body.agent-chat-bg-active .msg.bot:not(.welcome-message) { background: rgba(10, 14, 26, 0.58); border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); } body.agent-chat-bg-active .msg.me { background: rgba(0, 155, 190, 0.42); border-color: rgba(0, 212, 255, 0.55); backdrop-filter: blur(10px); } .msg{ padding:12px 16px; border-radius:16px; margin-bottom:28px; max-width:900px; width:100%; line-height:1.5; word-wrap:break-word; position:relative; transition:all 0.2s ease; } /* Bulle en cours de streaming : effet de fondu uniquement sur les derniers tokens */ .msg.bot[data-streaming="true"] { will-change: contents; } .msg.bot[data-streaming="true"] .msg-text { position: relative; overflow: hidden; } /* Overlay limité aux ~2 dernières lignes — GPU-composited, pas de repaint global */ .msg.bot[data-streaming="true"] .msg-text::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5em; background: linear-gradient(to bottom, transparent 0%, var(--card-bg, #1a1f2e) 100%); pointer-events: none; } .msg:hover{ transform:translateY(-1px); } .msg:hover + .msg-actions, .msg:hover + .msg-actions--user, .msg-actions:hover, .msg-actions--user:hover{ opacity:1; } /* Styles pour les éléments de texte dans les messages */ .msg p { margin: 0.8em 0; line-height: 1.6; letter-spacing: 0.3px; } .msg p:first-child { margin-top: 0; } .msg p:last-child { margin-bottom: 0; } .msg ul, .msg ol { margin: 12px 0; padding-left: 24px; line-height: 1.6; letter-spacing: 0.3px; } .msg li { margin: 4px 0; letter-spacing: 0.3px; } .msg h1, .msg h2, .msg h3, .msg h4, .msg h5, .msg h6 { margin: 16px 0 8px 0; line-height: 1.4; letter-spacing: 0.2px; } .msg blockquote { margin: 12px 0; letter-spacing: 0.3px; } .msg code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.95em; } .msg pre { margin: 8px 0; overflow-x: auto; } /* ⏳ Spinner "LLM réfléchit" : llm.png + 3 points */ .llm-thinking { display: flex; align-items: center; gap: 10px; padding: 4px 0; /* Au-dessus du ::after gradient de streaming pour ne pas être flouté */ position: relative; z-index: 1; } .llm-thinking-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; animation: llm-pulse 1.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5)); } @keyframes llm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.75; } } .llm-thinking-dots { display: flex; align-items: center; gap: 5px; } .llm-thinking-label { font-size: 13px; color: var(--text-secondary, #9ca3af); font-style: italic; letter-spacing: 0.3px; animation: llm-label-fade 2s ease-in-out infinite; } @keyframes llm-label-fade { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .llm-thinking-dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #00d4ff); animation: llm-dot-bounce 1.2s ease-in-out infinite; opacity: 0.85; } .llm-thinking-dots span:nth-child(1) { animation-delay: 0s; } .llm-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .llm-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes llm-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-7px); opacity: 1; } } .me { background:rgba(0, 212, 255, 0.20); color:#ffffff; border:2px solid var(--primary); border-bottom-right-radius:4px; text-align:left; width:fit-content; word-wrap:break-word; align-self:flex-end; max-width:70%; } .bot{ background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; align-self:flex-start; max-width:100%; } /* Message de bienvenue centré */ .welcome-message{ position:fixed; top:calc(50% - 70px); left:50%; transform:translate(-50%, -50%); max-width:560px; width:calc(100% - 40px); text-align:center; margin:0; padding:0 20px; box-sizing:border-box; z-index: 5; pointer-events: none; border-radius: 32px; border: 2px solid #00D4FF; box-shadow: 0 0 18px 2px rgba(0, 212, 255, 0.18), 0 0 8px 1px rgba(78, 205, 196, 0.12); } /* Boutons d'invites dans le welcome */ .welcome-prompt-btn { pointer-events: all; background: var(--bg-secondary, rgba(255,255,255,0.06)); border: 1px solid var(--border, rgba(0,212,255,0.25)); border-radius: 20px; padding: 8px 16px; color: var(--text-secondary, #a0aec0); font-size: 13px; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s; line-height: 1.4; } .welcome-prompt-btn:hover { background: rgba(0, 212, 255, 0.12); border-color: #00D4FF; color: var(--text-primary, #fff); transform: translateY(-1px); } /* Désactiver l'effet hover pour la bulle de bienvenue */ .welcome-message:hover{ transform:translate(-50%, -50%); } .msg-actions{ display:flex; gap:4px; opacity:0; transition:opacity 0.2s ease; padding:2px 0 4px 4px; justify-content:flex-start; align-self:flex-start; width:fit-content; margin-top:-28px; margin-bottom:8px; } .msg-actions--user{ align-self:flex-end; justify-content:flex-end; padding:2px 4px 4px 0; } .msg-btn{ width:24px; height:24px; border-radius:50%; border:none; background:rgba(0,0,0,0.7); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all 0.2s ease; } .msg-btn:hover{ background:var(--primary); transform:scale(1.1); } .msg-btn.playing{ background:var(--success); } .msg-btn.loading{ background: rgba(220, 60, 50, 0.75); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes pulse-memory { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .input-area{ border-top: none; background: transparent; padding:20px; padding-bottom: calc(20px + constant(safe-area-inset-bottom)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; box-sizing: border-box; } /* ↓ Bouton scroll vers le bas */ .scroll-to-bottom-btn { /* Flottant en fixed au-dessus de .input-area */ position: fixed; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--primary); color: var(--primary); cursor: pointer; z-index: 20; box-shadow: 0 2px 12px rgba(0, 212, 255, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, box-shadow 0.2s ease, transform 0.2s ease; /* bottom calculé via JS selon la hauteur de .input-area */ } .scroll-to-bottom-btn.visible { opacity: 1; pointer-events: auto; } .scroll-to-bottom-btn:hover { background: rgba(0, 212, 255, 0.15); box-shadow: 0 4px 18px rgba(0, 212, 255, 0.45); transform: translateX(-50%) scale(1.08); } .scroll-to-bottom-btn:active { transform: translateX(-50%) scale(0.94); } .row-send{ display:flex; gap:12px; margin-bottom:16px; max-width:1000px; width:80%; margin-left:auto; margin-right:auto; } .row-send .input{ font-size:16px; padding:12px 16px; border-radius:24px; } .row-send .btn{ border-radius:24px; padding:12px 20px; } .row-mic{ display:flex; gap:12px; align-items:center; margin-bottom:12px; } .voice-select{ background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; transition:all 0.2s ease; min-width:150px; } .voice-select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(28,199,193,0.1); } .voice-select:hover{ border-color:var(--primary); } .micbtn{ appearance:none; border:1px solid var(--border); background:var(--card-bg); color:var(--text); border-radius:12px; padding:8px 12px; cursor:pointer; transition:all 0.2s ease; font-size:14px; } .micbtn:hover{ background:var(--bg); } .micbtn[aria-pressed="true"]{ background:var(--primary); color:white; border-color:var(--primary); } .small{ font-size:12px; color:var(--text-light); line-height:1.4; } /* Responsive */ @media (max-width:900px){ .app{ grid-template-columns:1fr; } .cfg{ grid-template-columns:1fr 1fr; } /* Sur mobile, garder le comportement overlay */ .drawer-open .app{ margin-left:0; } .overlay{ position:fixed; inset:72px 0 0 0; /* ⚠️ WebKit/Safari : backdrop-filter sur un élément frère de position:fixed crée un stacking context qui capture le drawer et le rend flou + inopérant. On remplace par une couleur semi-transparente plus opaque, sans blur. */ background:rgba(0,0,0,0.65); display:none; z-index:10; } .overlay.show{ display:block; } } @media (max-width: 768px) { .sidebar-left, .sidebar-right { width: 85vw; /* 85% de la largeur de l'écran au lieu de 280px fixe */ max-width: 320px; /* Maximum 320px sur grands mobiles */ } /* 📱 S'assurer que le bouton hamburger est visible sur mobile */ #hamburger { display: flex !important; z-index: 2500 !important; } /* 📱 S'assurer que iconBar est bien au-dessus du drawer */ .page-chat #iconBar { z-index: 2500 !important; } /* 📱 Sur page-chat-projet: garder iconBar visible pour le hamburger */ .page-chat-projet #iconBar { z-index: 2500 !important; } /* 📱 Sur page-chat-projet: cacher les boutons sauf hamburger */ .page-chat-projet #iconBar #quickAddThread, .page-chat-projet #iconBar #quickSearch, .page-chat-projet #iconBar #voiceSettingsMobileBtn { display: none !important; } /* 📱 Réduction du bouton hamburger sur mobile (-30%) */ .hamburger { width: 30.8px !important; /* 44px * 0.7 = 30.8px */ height: 30.8px !important; font-size: 14px !important; /* 20px * 0.7 = 14px */ display: flex !important; align-items: center !important; justify-content: center !important; } /* 📱 Ajuster la taille des icônes Font Awesome dans le hamburger */ .hamburger i { font-size: 12.6px !important; /* 18px * 0.7 = 12.6px */ position: relative !important; top: 1px !important; /* Décalage vertical de 1px vers le bas */ } /* 📱 Ajuster la taille des SVG dans le hamburger */ .hamburger svg { width: 14px !important; /* 20px * 0.7 = 14px */ height: 14px !important; display: block !important; margin: auto !important; position: relative !important; top: 1px !important; /* Décalage vertical de 1px vers le bas */ } /* 📱 Cacher seulement la ligne verticale sur mobile, GARDER iconBar */ #iconBarLine { display: none !important; } /* 📱 iconBar reste visible mais réduit */ #iconBar { display: flex !important; gap: 10px !important; } /* 📱 Cacher les boutons Rechercher et Nouveau fil sur mobile */ #quickAddThread, #quickSearch { display: none !important; } /* 📱 Le bouton hamburger principal reste visible sur mobile */ #hamburger { display: flex !important; z-index: 900 !important; /* En dessous du drawer (1002) */ } /* 📱 Sur page-chat: quand drawer ouvert, hamburger doit passer en dessous */ .page-chat.drawer-open #hamburger { z-index: 900 !important; } /* 📱 Cacher le bouton Réglages Voix dans la sidebar sur mobile par défaut */ .sidebar-left #voiceSettingsMobileBtn { display: none !important; } /* 📱 Afficher le bouton Réglages Voix quand la sidebar est ouverte */ .sidebar-left.open #voiceSettingsMobileBtn { display: flex !important; } /* 📱 Afficher les boutons d'action en permanence sur mobile */ .thread .actions { opacity: 1; } /* 🔒 Empêcher le débordement horizontal sur mobile */ .header, .app, .history, footer { max-width: 100vw !important; box-sizing: border-box !important; } .center-bubble { width: 90px; /* Réduit de 100px à 90px (-10%) */ height: 90px; } /* Réduction de 10% de toutes les tailles de bulles sur mobile */ .satellite { /* Tailles réduites de 10% */ min-width: 54px; /* 60px - 10% = 54px */ min-height: 54px; max-width: 94.5px; /* 105px - 10% = 94.5px */ max-height: 94.5px; font-size: 9px; /* Légèrement réduit aussi */ z-index: 10; } /* Adaptation des tailles spécifiques avec réduction de 10% */ .satellite[style*="width: 60px"] { width: 54px !important; /* 60px - 10% */ height: 54px !important; font-size: 7px; } .satellite[style*="width: 75px"] { width: 67.5px !important; /* 75px - 10% */ height: 67.5px !important; font-size: 8px; } .satellite[style*="width: 90px"] { width: 81px !important; /* 90px - 10% */ height: 81px !important; font-size: 9px; } .satellite[style*="width: 105px"] { width: 94.5px !important; /* 105px - 10% */ height: 94.5px !important; font-size: 10px; } /* Logo des satellites plus petit sur mobile */ .satellite .logo { width: 21.6px; /* 24px - 10% = 21.6px */ height: 21.6px; } /* Particules BEAUCOUP plus petites sur mobile - réduction de 70% */ .particle { transform: scale(0.3) !important; /* Réduction de 70% au lieu de scale(0.45) */ opacity: 0.6 !important; /* Plus transparentes pour éviter la saturation */ } /* === AMÉLIORATIONS SPÉCIFIQUES POUR LE CHAT MOBILE === */ /* Header responsive */ .header { padding: 10px 15px !important; height: auto !important; min-height: 60px; margin-bottom: 20px !important; } .header h1 { font-size: 18px !important; margin: 0 !important; } /* Zone de l'app */ .app { height: 100dvh !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* Drawer mobile */ .drawer { width: 100vw !important; top: 0 !important; height: 100vh !important; z-index: 1300 !important; } /* Modals toujours au-dessus du drawer sur mobile */ .modal, [id$="Modal"], [class*="modal-overlay"], ._assignProjectModal { z-index: 99999 !important; } /* Pas de margin-left sur mobile même drawer ouvert */ .drawer-open .app { margin-left: 0 !important; } .drawer-open .header { margin-left: 0 !important; } /* Zone de chat */ .history { padding: 10px 15px !important; padding-top: 100px !important; /* 🔧 Espace pour ne pas cacher le premier message */ padding-left: 50px !important; /* Espace pour le bouton hamburger */ padding-bottom: 140px !important; /* 🔧 Espace pour passer sous l'input-area fixe */ margin-left: 0 !important; /* Plus de marge à gauche */ margin-bottom: 100px !important; /* ✅ Gardé pour le scroll */ width: 100% !important; /* Pleine largeur */ max-width: 100% !important; /* Pleine largeur */ font-size: 16px !important; /* 🔤 Texte plus grand sur mobile */ line-height: 1.6 !important; /* Meilleure lisibilité */ box-sizing: border-box !important; } /* Messages du chat */ .msg { margin-bottom: 12px !important; padding: 12px !important; border-radius: 12px !important; } .msg strong { font-size: 16px !important; /* 🔤 Titres plus grands */ } .msg p { font-size: 16px !important; /* 🔤 Paragraphes plus grands */ } /* Zone d'input responsive */ .input-area { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 15px !important; /* Safe area inset pour Android et iOS - fallback 15px si env() = 0 */ padding-bottom: max(15px, constant(safe-area-inset-bottom)) !important; padding-bottom: max(15px, env(safe-area-inset-bottom)) !important; margin-bottom: 0 !important; /* 📱 Enlevé pour Kodular WebView */ background: transparent !important; border-top: none !important; z-index: 10 !important; max-height: 40dvh !important; box-sizing: border-box !important; } /* Fond étendu de l'input area — transparent sur mobile */ .input-area::before { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; background: transparent !important; z-index: -1 !important; } /* Ligne d'envoi */ .row-send { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 12px !important; width: 100% !important; max-width: none !important; } .row-send .input { flex: 1 !important; min-width: 200px !important; font-size: 14px !important; padding: 12px 15px !important; border-radius: 20px !important; } .row-send .btn { padding: 12px 16px !important; font-size: 14px !important; border-radius: 20px !important; white-space: nowrap !important; } #btnPlus { padding: 12px !important; margin-right: 0 !important; border-radius: 20px !important; font-size: 18px !important; } /* Lignes micro */ .row-mic { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 8px !important; align-items: center !important; } .micbtn { padding: 10px 14px !important; font-size: 14px !important; border-radius: 16px !important; } .voice-select { flex: 1 !important; min-width: 150px !important; font-size: 14px !important; padding: 8px 12px !important; } .small { font-size: 12px !important; white-space: nowrap !important; } /* Drawer content */ .cfg { grid-template-columns: 1fr !important; gap: 15px !important; padding: 15px !important; } .cfg .form-group { margin-bottom: 15px !important; } .cfg .input, .cfg .textarea { font-size: 16px !important; padding: 12px !important; } /* Boutons du drawer */ .drawer .btn { padding: 12px 16px !important; font-size: 14px !important; margin: 5px 0 !important; } /* Dropdown modèles : éviter débordement sur petits écrans */ #modelDropdown { min-width: min(280px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; left: 0 !important; right: auto !important; } /* Nom du modèle plus petit sur mobile */ .agent-name { font-size: 10.5px !important; } /* Bouton JSON plus compact sur mobile */ #viewJSON { padding: 12px 8px !important; font-size: 10.5px !important; background: #02313b !important; border: 1px solid var(--primary) !important; border-radius: 20px !important; } /* Lien confidentialité caché sur mobile : prend de la hauteur inutilement dans l'input-area fixe */ .privacy-link-row { display: none !important; } /* row-send : moins de margin-bottom pour descendre l'input-area de ~10px */ .input-area .row-send { margin-bottom: 0 !important; } } /* === STYLES POUR TRÈS PETITS ÉCRANS === */ @media (max-width: 480px) { .header { padding: 8px 10px !important; min-height: 50px !important; margin-bottom: 20px !important; } .header h1 { font-size: 16px !important; } .app { height: 100dvh !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } .drawer { top: 0 !important; height: 100vh !important; z-index: 1300 !important; } .input-area { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 10px !important; /* Safe area inset pour Android et iOS - fallback 10px si env() = 0 */ padding-bottom: max(10px, constant(safe-area-inset-bottom)) !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; margin-bottom: 0 !important; /* 📱 Enlevé pour Kodular WebView */ background: transparent !important; z-index: 10 !important; max-height: 40dvh !important; box-sizing: border-box !important; } /* Fond étendu de l'input area — transparent sur mobile */ .input-area::before { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; background: transparent !important; z-index: -1 !important; } .row-send { gap: 5px !important; width: 100% !important; max-width: none !important; } .row-send .input { font-size: 14px !important; padding: 10px 12px !important; } .row-send .btn { padding: 10px 12px !important; font-size: 13px !important; } #btnPlus { padding: 10px !important; font-size: 16px !important; } .micbtn { padding: 8px 12px !important; font-size: 13px !important; } .voice-select { font-size: 13px !important; padding: 6px 10px !important; } .small { font-size: 11px !important; } .history { padding: 8px 10px !important; padding-top: 100px !important; /* 🔧 Espace pour ne pas cacher le premier message */ font-size: 16px !important; /* 🔤 Augmenté pour meilleure lisibilité */ line-height: 1.6 !important; } .msg { padding: 10px !important; margin-bottom: 25px !important; } .msg p { font-size: 16px !important; /* 🔤 Paragraphes plus grands */ } .msg strong { font-size: 16px !important; /* 🔤 Titres plus grands */ } } /* Drawer styles - Always active */ .drawer.open{ transform:translateX(0); } /* Overlay disabled - chat remains functional .overlay{ position:fixed; inset:72px 0 0 0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); display:none; z-index:10; } .overlay.show{ display:block; } */ .loading{ display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-radius:50%; border-top-color:var(--primary); animation:spin 1s linear infinite; } .mini-loading{ display:inline-block; width:10px; height:10px; border:2px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:white; animation:spin 0.8s linear infinite; } @keyframes spin{ to{transform:rotate(360deg)} } .image-loading{ display:inline-block; animation:rotate 1.5s linear infinite; margin-right:8px; } @keyframes rotate{ to{transform:rotate(360deg)} } @keyframes slideIn{ from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} } @keyframes slideOut{ from{transform:translateX(0);opacity:1} to{transform:translateX(100px);opacity:0} } /* ============================================================ VISUALISEUR DE RÉSUMÉS DE PROJET ============================================================ */ .project-summary-section{ margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); } .project-summary-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; cursor:pointer; padding:8px 0; border-bottom:1px solid var(--border); } .project-summary-title{ font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; } .project-summary-toggle{ background:none; border:none; color:var(--text-light); cursor:pointer; font-size:14px; padding:4px; border-radius:4px; transition:all 0.2s ease; } .project-summary-toggle:hover{ background:var(--bg-hover); color:var(--text); } .project-summary-content{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; font-family:monospace; font-size:12px; line-height:1.5; white-space:pre-wrap; max-height:400px; overflow-y:auto; color:var(--text-light); display:none; } .project-summary-content.expanded{ display:block; } .project-summary-badge{ background:linear-gradient(135deg, #10b981 0%, #059669 100%); color:white; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:500; } .project-summary-empty{ text-align:center; color:var(--text-light); padding:20px; font-style:italic; } .project-summary-stats{ display:flex; gap:12px; margin-top:12px; padding:8px; background:var(--bg); border-radius:6px; font-size:11px; color:var(--text-secondary); } .project-summary-stat{ display:flex; align-items:center; gap:4px; } /* ======================================== 📱 MOBILE VOICE SETTINGS ======================================== */ /* Bouton mobile pour ouvrir les réglages voix */ .voice-settings-mobile-btn { display: none; /* Caché par défaut sur desktop */ align-items: center; gap: 8px; padding: 12px 16px; background: var(--primary); color: var(--bg); border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin: 12px 0; width: 100%; } .voice-settings-mobile-btn:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3); } .voice-settings-mobile-btn svg { flex-shrink: 0; } /* Modale voix */ .voice-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 10000; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s ease; } .voice-modal.show { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .voice-modal-content { background: var(--bg-secondary); border: 2px solid var(--primary); border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .voice-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg); } .voice-modal-header h3 { margin: 0; font-size: 18px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .voice-modal-close { background: none; border: none; color: var(--text); font-size: 32px; line-height: 1; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .voice-modal-close:hover { color: var(--secondary); transform: rotate(90deg); } .voice-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .voice-modal-group { margin-bottom: 16px; } .voice-modal-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text); } .voice-modal-select, .voice-modal-textarea { width: 100%; padding: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; transition: all 0.2s ease; } .voice-modal-select:focus, .voice-modal-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); } .voice-modal-textarea { resize: vertical; min-height: 80px; } .voice-modal-save { width: 100%; padding: 14px; background: var(--primary); color: var(--bg); border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; } .voice-modal-save:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3); } /* Sur mobile : afficher le bouton, masquer les contrôles desktop */ @media (max-width: 768px) { .voice-settings-mobile-btn { display: flex; } .voice-controls-desktop { display: none !important; } /* 📱 Modal d'édition d'image : responsive élégant sur mobile */ #editImageModal { padding: 16px; padding-bottom: 24px; align-items: center; justify-content: center; } #editImageModal .voice-modal-content { max-width: 100% !important; width: 100% !important; height: auto !important; max-height: 92vh !important; min-height: 60vh !important; border-radius: 16px !important; border: 2px solid var(--primary) !important; } #editImageModal .voice-modal-body { max-height: none !important; flex: 1; overflow-y: auto; padding-bottom: 24px; } #editImagePreview { max-height: 180px !important; } } /* ==================================================================== ✏️ ANNOTATION D'IMAGE — Panneau de dessin ==================================================================== */ /* Bouton toggle annotation — état actif */ #toggleAnnotPanelBtn.active { background: rgba(255, 200, 0, 0.30) !important; border-color: rgba(255, 200, 0, 0.7) !important; box-shadow: 0 0 8px rgba(255, 200, 0, 0.25); } /* Boutons couleur de palette — état actif */ .annot-color-btn.active { border-color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); transform: scale(1.1); } .annot-color-btn:hover { transform: scale(1.08); opacity: 0.9; } /* Bouton Effacer — état activé (quand des annotations existent) */ #annotClearBtn:not([disabled]) { opacity: 1 !important; cursor: pointer; } #annotClearBtn:not([disabled]):hover { background: rgba(239, 68, 68, 0.18) !important; } /* Canvas wrapper : ratio automatique selon l'image de fond */ #annotCanvasWrapper { line-height: 0; /* Évite l'espace sous l'image */ } #annotBgImg { max-height: 340px; object-fit: contain; } /* Badge annotation actif */ #annotActiveBadge { animation: annot-badge-in 0.2s ease; } @keyframes annot-badge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Sur petits écrans en paysage : même logique que mobile */ @media (max-width: 1024px) and (orientation: landscape) { .voice-settings-mobile-btn { display: flex; } .voice-controls-desktop { display: none !important; } } /* ==================================================================== 🎨 BLOCS DE CODE - Style ChatGPT avec Prism.js ==================================================================== */ /* Wrapper principal du bloc de code */ .code-block-wrapper { margin: 16px 0; border-radius: 12px; overflow: hidden; background: #0f1117; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Header du bloc (titre + bouton copier) */ .code-block-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #1a1d24; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .code-block-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .code-copy-btn { padding: 6px 12px; background: rgba(0, 212, 255, 0.1); color: var(--primary); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; } .code-copy-btn:hover { background: rgba(0, 212, 255, 0.2); border-color: var(--primary); transform: translateY(-1px); } .code-copy-btn.copied { background: rgba(16, 185, 129, 0.2); color: var(--success); border-color: var(--success); } /* Groupe de boutons dans le header de code */ .code-block-actions { display: flex; align-items: center; gap: 6px; } /* Bouton Télécharger — même style que Copier avec couleur accentuée */ .code-download-btn { padding: 6px 12px; background: rgba(78, 205, 196, 0.1); color: #4ECDC4; border: 1px solid rgba(78, 205, 196, 0.3); border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; } .code-download-btn:hover { background: rgba(78, 205, 196, 0.2); border-color: #4ECDC4; transform: translateY(-1px); } /* Bouton Aperçu */ .code-preview-btn { padding: 6px 12px; background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; } .code-preview-btn:hover { background: rgba(168, 85, 247, 0.2); border-color: #a855f7; transform: translateY(-1px); } .code-preview-btn.active { background: rgba(168, 85, 247, 0.25); color: #c084fc; border-color: #c084fc; } .code-zip-btn { padding: 6px 12px; background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; } .code-zip-btn:hover { background: rgba(16, 185, 129, 0.2); border-color: #10b981; transform: translateY(-1px); } /* Conteneur de l'aperçu iframe */ .code-preview-frame { border-top: 1px solid rgba(255, 255, 255, 0.1); background: #fff; border-radius: 0 0 12px 12px; overflow: hidden; } .code-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #1a1d24; font-size: 12px; color: #a855f7; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .code-preview-resize { padding: 3px 8px; background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.2s; } .code-preview-resize:hover { background: rgba(168, 85, 247, 0.3); } .code-preview-iframe { width: 100%; border: none; display: block; transition: height 0.3s ease; background: #fff; } /* Bloc pre/code */ .code-block-wrapper pre { margin: 0; padding: 16px; background: #0f1117; overflow-x: auto; overflow-y: auto; max-height: 600px; font-family: 'Fira Code', 'Courier New', monospace; font-size: 14px; line-height: 1.6; -webkit-overflow-scrolling: touch; /* Scroll fluide iOS */ } .code-block-wrapper code { display: block; color: #e4e4e7; font-family: inherit; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; tab-size: 2; hyphens: none; } /* Scrollbar dans les blocs de code */ .code-block-wrapper pre::-webkit-scrollbar { height: 8px; width: 8px; } .code-block-wrapper pre::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .code-block-wrapper pre::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.3); border-radius: 4px; } .code-block-wrapper pre::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.5); } /* Inline code (backticks simples) */ code:not(.code-block-wrapper code) { padding: 2px 6px; background: rgba(0, 212, 255, 0.1); color: var(--primary); border-radius: 4px; font-family: 'Fira Code', 'Courier New', monospace; font-size: 0.9em; } /* ==================================================================== 🎨 THÈME PRISM TOMORROW NIGHT (intégré) ==================================================================== */ /* Couleurs de base */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #999999; } .token.punctuation { color: #cccccc; } .token.namespace { opacity: 0.7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #f2777a; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #99cc99; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #66cccc; } .token.atrule, .token.attr-value, .token.keyword { color: #cc99cc; } .token.function, .token.class-name { color: #ffcc66; } .token.regex, .token.important, .token.variable { color: #f99157; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } /* Mobile optimizations */ @media (max-width: 768px) { .code-block-wrapper { margin: 12px 0; border-radius: 8px; } .code-block-header { padding: 8px 12px; } .code-block-wrapper pre { padding: 12px; font-size: 13px; max-height: 400px; } .code-copy-btn { padding: 4px 10px; font-size: 11px; } } /* ============================================ */ /* 🌞 SURCHARGES THÈME CLAIR */ /* ============================================ */ /* Fond blanc */ [data-theme="light"] html, [data-theme="light"] body { background: #FFFFFF !important; } /* NE PAS masquer les bulles en mode clair - juste ajuster les couleurs */ /* Les bulles et animations restent visibles comme en mode sombre */ [data-theme="light"] .header { background: transparent; border-bottom: none; box-shadow: none; } [data-theme="light"] .drawer { background: var(--bg-primary); border-right: 1px solid var(--border); box-shadow: 2px 0 12px rgba(0,0,0,0.08); } [data-theme="light"] .drawer header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); } [data-theme="light"] .drawer header h3 { color: var(--text-primary); } [data-theme="light"] .main { background: #F8FAFC; } [data-theme="light"] .history { background: transparent; } [data-theme="light"] .input-area { background: transparent; border-top: none; } [data-theme="light"] textarea { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] .btn { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] .btn:hover { background: var(--bg-tertiary); } [data-theme="light"] .btn.primary { background: var(--primary); color: white; border-color: var(--primary); } [data-theme="light"] .msg-user { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] .msg-assistant { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] .list-item { background: transparent; color: var(--text-primary); border: 1px solid transparent; } [data-theme="light"] .list-item:hover { background: var(--bg-secondary); border-color: var(--border); } [data-theme="light"] .list-item.active { background: var(--bg-tertiary); border-color: var(--primary); color: var(--primary); } [data-theme="light"] .hamburger, [data-theme="light"] .drawer-close-btn { background: rgba(8, 145, 178, 0.1); border-color: var(--primary); color: var(--primary); } [data-theme="light"] .hamburger:hover, [data-theme="light"] .drawer-close-btn:hover { background: rgba(8, 145, 178, 0.2); } [data-theme="light"] .modal { background: rgba(0, 0, 0, 0.5); } [data-theme="light"] .modal-content { background: var(--bg-primary); border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.2); } [data-theme="light"] .modal-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); color: var(--text-primary); } [data-theme="light"] .modal-body { background: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] input, [data-theme="light"] select { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] input:focus, [data-theme="light"] select:focus { border-color: var(--primary); background: var(--bg-primary); } [data-theme="light"] .code-block-wrapper { background: var(--bg-secondary); border: 1px solid var(--border); } [data-theme="light"] .code-block-header { background: var(--bg-tertiary); border-bottom: 1px solid var(--border); color: var(--text-primary); } [data-theme="light"] .code-block-wrapper pre { background: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] .code-block-wrapper code { color: var(--text-primary); } [data-theme="light"] #filePreview .file-thumb { background: var(--bg-secondary); border: 1px solid var(--border); } /* Vignettes dans le textarea */ #filePreview { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; } #filePreview img { transition: transform 0.15s ease, box-shadow 0.15s ease; } #filePreview img:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(0, 212, 255, 0.35); } /* Textarea avec photos : s'adapte en hauteur */ #prompt { transition: padding-bottom 0.2s ease, max-height 0.2s ease; vertical-align: top; } /* Centrage vertical du placeholder uniquement quand vide / 1 ligne, sans fichier attaché */ #prompt:placeholder-shown:not([style*="padding-top"]) { align-content: center; } [data-theme="light"] #fileMenu { background: var(--bg-primary); border: 2px solid var(--primary); box-shadow: 0 4px 20px rgba(0,0,0,0.15); } [data-theme="light"] .file-menu-option { color: var(--text-primary); border-top: 1px solid var(--border); } [data-theme="light"] .file-menu-option:hover { background: var(--bg-secondary); } /* Fond avec bulles floutées pour le thème clair */ [data-theme="light"] .floating-bubbles { opacity: 0.15; } [data-theme="light"] .orbital-bubble { background: rgba(8, 145, 178, 0.2) !important; border: 2px solid rgba(8, 145, 178, 0.3) !important; backdrop-filter: blur(10px); } /* Augmenter l'opacité du conteneur de fond en mode clair */ [data-theme="light"] body > div:first-of-type { opacity: 0.4 !important; } /* ==================================================================== 📱 FIX MODAL PARAMÈTRES - Boutons fixés en bas ==================================================================== */ /* Modal overlay */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .modal.show { display: flex !important; } /* Modal content container */ .modal-content { display: flex; flex-direction: column; max-height: 90vh; max-width: 600px; width: 100%; background: var(--bg-secondary); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); overflow: hidden; } /* Header fixé en haut */ .modal-header { flex-shrink: 0; padding: 20px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); } .modal-header h4 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); } /* Body scrollable */ .modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; background: var(--bg-secondary); } /* Footer fixé en bas */ .modal-footer { flex-shrink: 0; display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; background: var(--bg-tertiary); border-top: 1px solid var(--border); } .modal-footer .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); } .modal-footer .btn:hover { background: var(--bg-tertiary); transform: translateY(-1px); } .modal-footer .btn.primary { background: var(--primary); color: white; border-color: var(--primary); } .modal-footer .btn.primary:hover { background: var(--accent); border-color: var(--accent); } /* Mobile responsive */ @media (max-width: 768px) { .modal { padding: 10px; align-items: center; } .modal-content { max-height: 90vh; border-radius: 16px !important; overflow: hidden !important; /* Forcer le clipping des coins arrondis sur iOS/Android */ -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); transform: translateZ(0); /* Crée un contexte de rendu isolé */ } /* Fix bordure visible sur le modal projet (storage.js) */ .modal > .modal-content[style*="border"] { border-radius: 16px !important; } .modal-header { padding: 16px; } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px; } } /* ======================================== FLOU PARTICULES ARRIÈRE-PLAN (Chat uniquement) ======================================== */ .floating-bubbles { filter: blur(100px) !important; } /* Flou sur les bulles satellites en arrière-plan (Chat uniquement) */ .satellite { filter: blur(80px) !important; } .center-bubble { filter: blur(80px) !important; } .workspace { filter: blur(80px) !important; } /* ======================================== ANIMATION SABLIER GÉNÉRATION D'IMAGE ======================================== */ @keyframes hourglass-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hourglass-spin { display: inline-block; animation: hourglass-rotate 1.5s linear infinite; transform-origin: center; } /* ======================================== INDICATEUR RECHERCHE WEB Logo Bubblai + label + 3 points animés ======================================== */ .web-searching { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .web-searching-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; animation: web-searching-pulse 1.2s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.7)); } @keyframes web-searching-pulse { 0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.7)); } 50% { transform: scale(1.18); opacity: 0.8; filter: drop-shadow(0 0 14px rgba(0, 212, 255, 1)); } } .web-searching-label { font-size: 13px; color: var(--text-secondary, #aaa); font-style: italic; opacity: 0.9; } .web-searching-dots { display: flex; align-items: center; gap: 5px; } .web-searching-dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #00d4ff); animation: web-dot-bounce 1.2s ease-in-out infinite; opacity: 0.85; } .web-searching-dots span:nth-child(1) { animation-delay: 0s; } .web-searching-dots span:nth-child(2) { animation-delay: 0.2s; } .web-searching-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes web-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-7px); opacity: 1; } } /* ======================================== BOUTON STOP — mode requête en cours ======================================== */ #send.stop-mode { background: rgba(220, 80, 60, 0.18) !important; border-color: #e05040 !important; animation: stop-btn-pulse 1.4s ease-in-out infinite; } #send.stop-mode #stopIcon rect { fill: #e05040; } @keyframes stop-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 80, 60, 0.45); background: rgba(220, 80, 60, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(220, 80, 60, 0); background: rgba(220, 80, 60, 0.32); } } .web-sources-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); } .web-source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 20px; font-size: 12px; color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .web-source-chip:hover { background: rgba(0, 212, 255, 0.18); border-color: rgba(0, 212, 255, 0.5); color: var(--primary); } .web-source-chip .chip-favicon { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; object-fit: contain; } .web-source-chip .chip-num { font-size: 10px; opacity: 0.6; flex-shrink: 0; } [data-theme="light"] .web-sources-bar { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .web-source-chip { background: rgba(0, 100, 200, 0.07); border-color: rgba(0, 100, 200, 0.2); color: #444; } [data-theme="light"] .web-source-chip:hover { background: rgba(0, 100, 200, 0.15); border-color: rgba(0, 100, 200, 0.4); color: #0064c8; } /* ── Suggestion bulle manquante ────────────────────────────────────── */ .no-bubble-suggestion { display: flex; flex-direction: column; gap: 12px; background: rgba(255, 200, 80, 0.07); border: 1px solid rgba(255, 200, 80, 0.25); border-radius: 14px; padding: 16px 18px; max-width: 480px; } .no-bubble-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .no-bubble-text strong { color: var(--text-primary); } .no-bubble-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: linear-gradient(135deg, rgba(255, 200, 80, 0.18), rgba(255, 160, 40, 0.18)); border: 1px solid rgba(255, 200, 80, 0.4); border-radius: 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; align-self: flex-start; } .no-bubble-btn:hover { background: linear-gradient(135deg, rgba(255, 200, 80, 0.30), rgba(255, 160, 40, 0.30)); border-color: rgba(255, 200, 80, 0.65); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 180, 60, 0.2); }