:root {
      --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-out:    cubic-bezier(0, 0, 0.2, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --bg:          #050506;
      --bg-elevated: #0a0a0c;
      --bg-surface:  #0f0f12;
    }
    body { margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; background-color: var(--bg); color: #FFF; }
    /* MINY VIVANT — éléments supprimables : #miny-particles, body::before (nebula), chatbar-breathe, sb-float, msg-ambient */

    /* Nébuleuse ambiante — nappes de lumière cyan qui dérivent lentement */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 600px 600px at 20% 80%, rgba(0, 255, 255, 0.018) 0%, transparent 70%),
        radial-gradient(ellipse 800px 400px at 85% 15%, rgba(0, 255, 255, 0.012) 0%, transparent 60%),
        radial-gradient(ellipse 400px 800px at 50% 50%, rgba(0, 255, 255, 0.008) 0%, transparent 65%),
        radial-gradient(ellipse 500px 500px at 10% 30%, rgba(0, 255, 255, 0.01) 0%, transparent 55%);
      filter: blur(60px);
      animation: nebula-drift 40s ease-in-out infinite alternate;
      will-change: filter;
    }
    @keyframes nebula-drift {
      0%   { opacity: 0.6; filter: blur(60px); transform: translate(0%, 0%); }
      25%  { opacity: 0.9; filter: blur(65px); transform: translate(2%, 3%); }
      50%  { opacity: 0.7; filter: blur(55px); transform: translate(-2%, 5%); }
      75%  { opacity: 1;   filter: blur(70px); transform: translate(3%, -2%); }
      100% { opacity: 0.8; filter: blur(60px); transform: translate(-1%, 2%); }
    }
    /* Grain organique — texture OLED quasi-invisible */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.015;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 128px 128px;
    }
    /* Chatbar qui respire */
    @keyframes chatbar-breathe {
      0%, 100% { border-color: rgba(255, 255, 255, 0.10); }
      50%       { border-color: rgba(255, 255, 255, 0.18); }
    }
    /* Super-bulles flottantes */
    @keyframes sb-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-2px); }
    }
    /* Flash ambiant sur message A-TOM */
    @keyframes msg-ambient-flash {
      0%   { opacity: 0; }
      30%  { opacity: 1; }
      100% { opacity: 0; }
    }
    .msg-ambient {
      position: fixed;
      bottom: 30%;
      left: 50%;
      width: 300px;
      height: 300px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 255, 255, 0.03) 0%, transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
      animation: msg-ambient-flash 2s ease forwards;
    }
    #net-status { display:none; position:fixed; top:72px; left:0; right:0; text-align:center; font-size:12px; color:rgba(255,255,255,0.4); padding:6px 0; z-index:9500; pointer-events:none; letter-spacing:0.02em; }
    #canvasContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; transition: transform 0.8s var(--ease-spring); }
    canvas { display: block; width: 100%; height: 100%; }
    #dialoguePage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; opacity: 0; transform: translateY(40px); transition: transform 0.8s var(--ease-spring), opacity 0.8s var(--ease-spring); will-change: transform, opacity; }
    #chatMessages { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 20px; padding-top: max(15vh, 60px); padding-bottom: 20px; overflow-y: auto; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
    #scrollAnchor { min-height: calc(env(safe-area-inset-bottom) + 140px); width: 100%; flex-shrink: 0; }
    .message { padding: 14px 0; font-size: 17px; font-weight: 300; line-height: 1.6; margin-bottom: 20px; }
    .user { align-self: flex-end; max-width: 85%; padding: 12px 20px; background: rgba(255, 255, 255, 0.13); color: #FFF; border-radius: 22px; border: 1.5px solid rgba(255, 255, 255, 0.12); margin-bottom: 25px; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: fit-content; }
    .atom_reply { align-self: flex-start; color: rgba(240, 244, 255, 0.92); margin-bottom: 35px; margin-top: 8px; width: 100%; max-width: 100%; position: relative; padding-top: 0; transition: padding 0.5s; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
    .atom_reply.thinking { min-height: 50px; padding-top: 50px; will-change: transform, opacity; }
    .atom_avatar_wrap { position: absolute; top: 0; left: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; outline: none; overflow: visible; transition: opacity 0.5s, transform 0.5s; opacity: 0; transform: scale(0.8); }
    .atom_reply.thinking .atom_avatar_wrap { opacity: 1; transform: scale(1); }
    .atom_avatar_core { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #FFF; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 300; color: #FFF; box-shadow: 0 0 35px rgba(0, 255, 255, 0.9); }
    .atom_reply.thinking .atom_avatar_core { animation: atom-think 2s ease-in-out infinite; }
    @keyframes mQuantumPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
    @keyframes atom-think {
      0%  { box-shadow: 0 0 20px rgba(0,255,255,0.2); transform: scale(1); }
      25% { box-shadow: 0 0 40px rgba(0,255,255,0.5); transform: scale(1.08); }
      50% { box-shadow: 0 0 25px rgba(0,255,255,0.3); transform: scale(1.02); }
      75% { box-shadow: 0 0 45px rgba(0,255,255,0.6); transform: scale(1.1); }
      100%{ box-shadow: 0 0 20px rgba(0,255,255,0.2); transform: scale(1); }
    }
    @keyframes msg-slide-right {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes msg-slide-up {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .msg-appear-user { animation: msg-slide-right 0.35s var(--ease-spring) forwards; }
    .msg-appear-atom { animation: msg-slide-up 0.4s var(--ease-spring) forwards; }
    #topBlurShield { position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 800; opacity: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); transition: opacity 0.8s var(--ease-smooth); pointer-events: none; }
    .system_ready #topBlurShield { pointer-events: auto; cursor: pointer; }
    #bottomBlurShield { position: fixed; bottom: 0; left: 0; width: 100%; height: 140px; z-index: 1900; opacity: 0; background: linear-gradient(to top, var(--bg) 0%, var(--bg) 40%, transparent 100%); transition: opacity 0.8s var(--ease-smooth); pointer-events: none; }
    .btn-nav { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.4s; flex-shrink: 0; pointer-events: auto; border: 1.2px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #FFF; backdrop-filter: blur(10px); position: relative; }
    #btnScrollDown { position: fixed; right: 20px; bottom: 120px; z-index: 9200; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring); border: 1.2px solid rgba(255, 255, 255, 0.2); }
    #btnScrollDown.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    #chatBar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(30px); opacity: 0; pointer-events: none; width: 92%; max-width: 600px; margin-bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; z-index: 9100; transition: transform 0.8s var(--ease-spring), opacity 0.8s var(--ease-spring) 0.15s, padding 0.7s var(--ease-smooth), border-radius 0.7s var(--ease-smooth); background: rgba(255, 255, 255, 0.13); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 32px; padding: 8px 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-sizing: border-box; will-change: transform, opacity; box-shadow: 0 4px 24px rgba(0,0,0,0.4); animation: chatbar-breathe 6s ease-in-out infinite; }
    .system_ready #chatBar { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
    .input-wrapper { display: flex; align-items: center; position: relative; min-height: 44px; transition: all 0.7s; }
    #ephemeralBubble { text-align: center; color: rgba(255,255,255,0.38); font-style: normal; font-size: 16px; font-family: inherit; font-weight: 300; padding: 24px 32px; pointer-events: none; transition: opacity 300ms ease; opacity: 1; }
    #chatInput { flex-grow: 1; background: transparent; border: none; outline: none; color: #FFF; font-size: 16px; font-family: inherit; resize: none; height: 24px; line-height: 24px; padding: 0 52px 0 60px; text-align: left; opacity: 0.7; transition: padding 0.6s var(--ease-smooth), opacity 0.6s var(--ease-smooth); }
    .miny-toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0; pointer-events: none; transition: top 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth), opacity 0.7s var(--ease-smooth); }
    .system_ready #chatBar.active { transform: translateX(-50%) translateY(0); padding: 15px 12px 65px 12px; border-radius: 24px; }
    #chatBar.active #chatInput { padding-left: 10px; opacity: 1; }
    #chatBar.active .miny-toolbar { top: auto; bottom: -45px; transform: translateY(0); }
    .btn-send-logic .icon-wave { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    .btn-send-logic .icon-arrow { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; }
    .btn-send-logic.has-text .icon-wave { display: none; }
    .btn-send-logic.has-text .icon-arrow { display: flex; }
    .system_ready #canvasContainer { transform: translateY(-38vh) scale(0.55); transition: transform 0.6s var(--ease-spring); }
    .system_ready #dialoguePage { opacity: 1; transform: translateY(0); }
    .system_ready #topBlurShield { opacity: 1; }
    .system_ready #bottomBlurShield { opacity: 1; }
    /* ── Onboarding A-TOM ── */
    .ob-chip-primary { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.2); }
    .atom_reply .content { font-family: 'JetBrains Mono', monospace; font-weight: 300; font-variant-ligatures: none; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; max-width: 88%; word-break: break-word; color: rgba(240, 244, 255, 0.92); padding: 0; background: transparent; }
    .atom_reply .content p { margin: 0 0 10px; }
    .atom_reply .content p:last-child { margin-bottom: 0; }
    .atom_reply .content h1, .atom_reply .content h2, .atom_reply .content h3 { font-weight: 500; margin: 18px 0 6px; color: #FFF; letter-spacing: -0.02em; }
    .atom_reply .content h1 { font-size: 20px; }
    .atom_reply .content h2 { font-size: 17px; }
    .atom_reply .content h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
    .atom_reply .content ul, .atom_reply .content ol { padding-left: 18px; margin: 6px 0 10px; }
    .atom_reply .content li { margin-bottom: 5px; line-height: 1.55; }
    .atom_reply .content strong { font-weight: 600; color: #FFF; }
    .atom_reply .content em { font-style: italic; color: rgba(255,255,255,0.8); }
    .atom_reply .content code { font-family: 'SF Mono', 'Menlo', monospace; font-size: 13px; background: rgba(255,255,255,0.09); padding: 2px 6px; border-radius: 5px; }
    .atom_reply .content pre { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px; overflow-x: auto; margin: 12px 0; }
    .atom_reply .content pre code { background: none; padding: 0; font-size: 13px; }
    .atom_reply .content hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }
    .atom_reply .content blockquote { border-left: 2px solid rgba(0,255,255,0.4); margin: 10px 0; padding: 4px 0 4px 14px; opacity: 0.8; font-style: italic; }
    .atom_reply .content a { color: rgba(0,255,255,0.85); text-decoration: none; border-bottom: 1px solid rgba(0,255,255,0.3); }
    .atom_reply.streaming .content::after { content: '●'; display: inline-block; margin-left: 3px; font-size: 10px; vertical-align: middle; animation: streamCursor 0.7s infinite; }
    @keyframes streamCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    .morning-summary {
        width: fit-content;
        max-width: 85%;
        min-width: 120px;
        padding: 12px 16px;
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: visible;
        opacity: 0.85;
        font-style: italic;
    }
    @keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

    /* ── Push events : bulles réseau distinctes des messages d'onboarding ── */
    .atom_reply.msg-connection-event .content {
        padding: 10px 14px;
        border-left: 2px solid rgba(0, 255, 255, 0.3);
        border-radius: 0 10px 10px 0;
        background: rgba(0, 255, 255, 0.04);
    }
    /* Match confirmé (connection_active) : avatar doré + bordure or */
    .atom_reply.msg-match .atom_avatar_core {
        border-color: rgba(255, 210, 60, 0.95);
        box-shadow: 0 0 32px rgba(255, 210, 60, 0.85);
        color: rgba(255, 210, 60, 0.95);
    }
    .atom_reply.msg-match.thinking .atom_avatar_core { animation: atom-think-match 1.8s ease-in-out infinite; }
    @keyframes atom-think-match {
        0%, 100% { box-shadow: 0 0 18px rgba(255,210,60,0.2); transform: scale(1); }
        40%      { box-shadow: 0 0 52px rgba(255,210,60,0.9); transform: scale(1.13); }
        80%      { box-shadow: 0 0 36px rgba(255,210,60,0.55); transform: scale(1.06); }
    }
    .atom_reply.msg-match .content {
        padding: 10px 14px;
        border-left: 2px solid rgba(255, 210, 60, 0.75);
        border-radius: 0 10px 10px 0;
        background: rgba(255, 210, 60, 0.05);
    }
    /* Meetup confirmé (meetup_active) : avatar turquoise + bordure verte */
    .atom_reply.msg-meetup-active .atom_avatar_core {
        border-color: rgba(0, 255, 175, 0.95);
        box-shadow: 0 0 38px rgba(0, 255, 175, 0.9);
        color: rgba(0, 255, 175, 0.95);
    }
    .atom_reply.msg-meetup-active.thinking .atom_avatar_core { animation: atom-think-meetup 1.5s ease-in-out infinite; }
    @keyframes atom-think-meetup {
        0%, 100% { box-shadow: 0 0 20px rgba(0,255,175,0.2); transform: scale(1); }
        50%      { box-shadow: 0 0 58px rgba(0,255,175,0.95); transform: scale(1.16); }
    }
    .atom_reply.msg-meetup-active .content {
        padding: 10px 14px;
        border-left: 2px solid rgba(0, 255, 175, 0.75);
        border-radius: 0 10px 10px 0;
        background: rgba(0, 255, 175, 0.05);
    }

    /* ── Voice states ── */
    @keyframes voiceListen {
        0%   { box-shadow: 0 0 0 0    rgba(0,255,255,0.7), inset 0 0 0 0   rgba(0,255,255,0); }
        50%  { box-shadow: 0 0 0 10px rgba(0,255,255,0),   inset 0 0 8px   rgba(0,255,255,0.12); }
        100% { box-shadow: 0 0 0 0    rgba(0,255,255,0.7), inset 0 0 0 0   rgba(0,255,255,0); }
    }
    @keyframes voiceSpeak {
        0%, 100% { box-shadow: 0 0 6px  rgba(0,255,255,0.35); border-color: rgba(0,255,255,0.45); }
        50%      { box-shadow: 0 0 20px rgba(0,255,255,0.85); border-color: rgba(0,255,255,0.9); }
    }
    #btnAction.voice-connecting { opacity: 0.6; animation: pulse-btn 1s ease-in-out infinite; }
    #btnAction.voice-active   { color: #00e5ff; border-color: rgba(0,255,255,0.8); animation: voiceListen 1s ease-in-out infinite; }
    #btnAction.voice-speaking { color: #00ff9d; animation: voiceSpeak 0.65s ease-in-out infinite; }
    @keyframes pulse-btn { 0%,100%{opacity:.6} 50%{opacity:1} }

    /* ── Onboarding chips ── */
    .onboarding-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; touch-action: pan-y; }
    .onboarding-chip { background: rgba(255,255,255,0.08); border: 1.2px solid rgba(255,255,255,0.18); color: #fff; font-size: 15px; font-weight: 300; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; padding: 9px 18px; border-radius: 22px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; touch-action: manipulation; }
    .onboarding-chip:active { background: rgba(0,255,255,0.10); border-color: rgba(0,255,255,0.38); }

    /* ── CGU Sheet ── */
    #cguSheet { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9100; display: flex; align-items: flex-end; opacity: 1; transition: opacity 300ms ease; }
    #cguSheetInner { background: #0a0a0a; border: 1px solid rgba(0,255,255,0.15); border-radius: 20px 20px 0 0; width: 100%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    #cguSheetHeader { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); font-size: 0.95rem; flex-shrink: 0; }
    #cguSheetClose { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
    #cguSheetContent { overflow-y: auto; padding: 20px; color: rgba(255,255,255,0.65); font-size: 0.85rem; line-height: 1.6; -webkit-overflow-scrolling: touch; }

    /* ── Plus Menu (popup ancré sur le bouton +) ── */
    #plusPopup { position:fixed; z-index:9300; display:flex; flex-direction:column; pointer-events:none; background:rgba(255,255,255,0.13); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.12); border-radius:24px; overflow:hidden; opacity:0; transform:scale(0.85) translateY(10px); transform-origin: bottom left; transition:opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring); font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
    #plusPopup.open { pointer-events:auto; opacity:1; transform:scale(1) translateY(0); }
    .plus-item { display:flex; align-items:center; gap:12px; padding:15px 22px; cursor:pointer; color:#fff; transition:background .15s; }
    .plus-item:active { background:rgba(0,255,255,0.08); }
    .plus-separator { height:1px; background:rgba(255,255,255,0.11); margin:0 16px; flex-shrink:0; }
    .plus-item-icon { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.05); border:1.2px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .plus-item-label { font-size:17px; font-weight:300; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; letter-spacing:.01em; white-space:nowrap; }

    /* ── Map Overlay ── */
    #mapOverlay { position:fixed; inset:0; z-index:4000; background:var(--bg); opacity:0; pointer-events:none; transition:opacity .3s; overflow:hidden; }
    #mapOverlay.open { opacity:1; pointer-events:auto; }
    #mapCanvas { position:absolute; inset:0; display:block; }
    #mapHeader { position:absolute; top:0; left:0; right:0; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; padding:calc(env(safe-area-inset-top) + 28px) 28px 0; }
    #mapAtomCount { font-size:44px; font-weight:200; letter-spacing:-.03em; color:#fff; line-height:1; }
    #mapAtomLabel { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:7px; }
    #mapClose { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0; }
    #mapFooter { position:absolute; bottom:0; left:0; right:0; z-index:1; text-align:center; padding-bottom:calc(env(safe-area-inset-bottom) + 40px); }
    #mapMoment { font-size:13px; font-weight:300; color:rgba(255,255,255,.45); letter-spacing:.03em; margin-bottom:5px; }
    #mapSubtitle { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.18); }

    /* ── Bouton activation notifications ── */
    #notifPrompt { align-self:flex-start; margin-bottom:24px; animation:msgSlide 0.5s ease-out; }
    #notifPrompt button { background:transparent; border:1px solid rgba(255,255,255,0.13); color:rgba(255,255,255,0.38); font-size:12px; font-family:inherit; font-weight:300; letter-spacing:.05em; padding:8px 18px; border-radius:20px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s, color .2s; }
    #notifPrompt button:active { border-color:rgba(0,255,255,0.45); color:rgba(0,255,255,0.75); }

    /* ── Chat media / files ── */
    .user-media, .user-file { align-self:flex-end; max-width:82%; margin-bottom:25px; }
    .chat-media { max-width:100%; max-height:260px; border-radius:16px; display:block; border:1px solid rgba(255,255,255,.08); object-fit:cover; }
    .file-card { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .file-card-icon { width:38px; height:38px; background:rgba(0,255,255,.07); border:1px solid rgba(0,255,255,.2); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; letter-spacing:.05em; color:rgba(0,255,255,.8); flex-shrink:0; }
    .file-card-name { font-size:13px; font-weight:300; color:#fff; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .file-card-size { font-size:11px; color:rgba(255,255,255,.38); margin-top:2px; }

    /* ═══ CARTE DE RENCONTRE ═══ */
    #meetup-overlay { transition: opacity 0.5s var(--ease-smooth), filter 0.6s var(--ease-smooth); background: var(--bg) !important; will-change: opacity; }
    .leaflet-container { background: var(--bg) !important; }
    .leaflet-tile-pane { filter: brightness(1.4) contrast(1.1); }

    /* ═══ MODE AR ═══ */
    #ar-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 9500; display: none; pointer-events: none;
        transition: opacity 0.6s var(--ease-smooth); will-change: opacity;
    }
    #ar-camera {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover;
    }
    #ar-canvas {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }
    #ar-info {
        position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
        text-align: center; white-space: nowrap;
    }
    .ar-distance {
        font-size: 46px; font-weight: 200; letter-spacing: -1px;
        color: rgba(0, 255, 255, 0.95);
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
        text-shadow: 0 0 24px rgba(0, 255, 255, 0.7), 0 0 8px rgba(0, 255, 255, 0.4);
    }
    .ar-eta {
        font-size: 14px; font-weight: 300;
        color: rgba(245, 245, 247, 0.55);
        margin-top: 2px;
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
    }

    /* Marqueur "m" — ma position sur la carte de rencontre */
    .meetup-me-marker {
        width: 36px; height: 36px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        background: var(--bg);
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; font-weight: 300;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
        box-shadow: 0 0 35px rgba(0,255,255,0.9), 0 0 60px rgba(0,255,255,0.4);
        animation: mQuantumPulse 1.8s infinite ease-in-out;
    }

    #meetup-info {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        z-index: 9001;
        padding: 0 16px 100px;
        background: linear-gradient(transparent 0%, rgba(0,0,0,0.8) 40%);
        pointer-events: none;
    }

    #meetup-info > * { pointer-events: auto; }

    .meetup-distance {
        font-size: 48px;
        font-weight: 200;
        color: #f5f5f7;
        letter-spacing: -2px;
        line-height: 1;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .meetup-distance-unit {
        font-size: 18px;
        font-weight: 300;
        color: rgba(245,245,247,0.4);
        margin-left: 4px;
    }

    .meetup-eta {
        font-size: 14px;
        color: rgba(245,245,247,0.4);
        text-align: center;
        margin-top: 6px;
    }

    .meetup-prox {
        display: none;
        text-align: center;
        font-size: 16px;
        color: rgba(245,245,247,0.6);
        margin-top: 16px;
        animation: meetup-breathe 2.5s infinite ease-in-out;
    }

    .meetup-prox.on { display: block; }

    @keyframes meetup-breathe {
        0%,100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    .reso-marker { position: relative; }

    .reso-glow {
        position: absolute;
        inset: -20px; /* déborde du conteneur pour un halo large */
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,255,255,0.25) 0%, rgba(0,255,255,0.06) 45%, transparent 70%);
        filter: blur(18px);
        animation: reso-pulse 4.2s infinite ease-in-out;
        will-change: transform, opacity;
    }

    /* Ma résonance — 120px, core 20px */
    .reso-core {
        position: absolute;
        top: 50%; left: 50%;
        width: 20px; height: 20px;
        margin: -10px 0 0 -10px;
        border-radius: 50%;
        background: #f5f5f7;
        box-shadow: 0 0 18px rgba(0,255,255,0.7), 0 0 35px rgba(0,255,255,0.35);
        z-index: 2;
    }

    .reso-ring {
        position: absolute;
        top: 50%; left: 50%;
        border-radius: 50%;
        border: 1px solid rgba(0,255,255,0.14);
    }

    /* Rings pour ma résonance (120px container) */
    .reso-r1 { width: 60px;  height: 60px;  margin: -30px 0 0 -30px; animation: reso-pulse 3.7s infinite ease-in-out; will-change: transform, opacity; }
    .reso-r2 { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation: reso-pulse 4.8s infinite ease-in-out 0.7s; will-change: transform, opacity; }

    /* Override pour l'autre atome (150px container, core 16px) */
    .reso-marker:not(.reso-me) .reso-core {
        width: 16px; height: 16px; margin: -8px 0 0 -8px;
        box-shadow: 0 0 14px rgba(0,255,255,0.5), 0 0 28px rgba(0,255,255,0.25);
    }
    .reso-marker:not(.reso-me) .reso-r1 { width: 80px;  height: 80px;  margin: -40px 0 0 -40px; }
    .reso-marker:not(.reso-me) .reso-r2 { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
    .reso-marker:not(.reso-me) .reso-glow { filter: blur(40px); }

    @keyframes reso-pulse {
        0%   { transform: scale(0.85); opacity: 0.6; }
        30%  { transform: scale(1.1);  opacity: 0.25; }
        60%  { transform: scale(0.95); opacity: 0.5; }
        100% { transform: scale(0.85); opacity: 0.6; }
    }

    /* Dérive organique — floute la position réelle */
    @keyframes reso-drift-me {
        0%   { transform: translate(0px,   0px); }
        20%  { transform: translate(5px,  -4px); }
        40%  { transform: translate(-4px,  7px); }
        60%  { transform: translate(6px,   3px); }
        80%  { transform: translate(-3px, -5px); }
        100% { transform: translate(0px,   0px); }
    }
    @keyframes reso-drift-other {
        0%   { transform: translate(0px,    0px); }
        25%  { transform: translate(12px,  -9px); }
        50%  { transform: translate(-8px,  14px); }
        75%  { transform: translate(10px,   6px); }
        100% { transform: translate(0px,    0px); }
    }

    .reso-marker       { animation: reso-drift-other 11s infinite ease-in-out; }
    .reso-marker.reso-me { animation: reso-drift-me 9s infinite ease-in-out; }

    /* ── Hotspots DBSCAN — zones pulsantes cyan ─── */
    @keyframes hotspot-pulse {
        0%   { transform: scale(0.92); opacity: 0.15; }
        50%  { transform: scale(1.08); opacity: 0.30; }
        100% { transform: scale(0.92); opacity: 0.15; }
    }
    .hotspot-ring {
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,255,255,0.28) 0%, rgba(0,255,255,0) 70%);
        border: 1px solid rgba(0,255,255,0.35);
        animation: hotspot-pulse 3s ease-in-out infinite;
        pointer-events: none;
    }

    .leaflet-control-zoom,
    .leaflet-control-attribution { display: none !important; }

    /* ── Leaflet popup — glass/dark/miny ── */
    .leaflet-popup-content-wrapper { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }
    .leaflet-popup-tip-container, .leaflet-popup-tip { display: none !important; }
    .leaflet-popup-content { margin: 0 !important; }
    .leaflet-popup-close-button { display: none !important; }

    .atom-popup {
        background: rgba(18,18,20,0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1.5px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        padding: 10px 16px;
        color: #f5f5f7;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        max-width: 200px;
        line-height: 1.5;
    }
    .atom-popup-name {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
        letter-spacing: -0.2px;
    }
    .atom-popup-electrons {
        font-size: 13px;
        color: rgba(245,245,247,0.5);
    }

    /* ── Popup bulle au clic sur un marqueur — identique à la chatbar ── */
    .map-popup-bubble {
        background: rgba(255, 255, 255, 0.13);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        padding: 14px 18px;
        min-width: 180px;
        max-width: 220px;
        animation: popup-float 0.3s var(--ease-spring) forwards;
    }
    @keyframes popup-float {
        from { opacity: 0; transform: translateY(8px) scale(0.95); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes reso-materialize {
        from { opacity: 0; transform: scale(0.5); }
        to   { opacity: 1; transform: scale(1); }
    }
    .reso-appear { animation: reso-materialize 0.6s var(--ease-spring) forwards; opacity: 0; }
    .map-popup-info {
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: -0.2px;
        margin-bottom: 4px;
    }
    .map-popup-question {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.35);
        margin-bottom: 14px;
    }
    .map-popup-actions { display: flex; gap: 8px; }
    .map-popup-btn {
        flex: 1;
        height: 36px;
        border-radius: 10px;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s;
    }
    .map-popup-btn:active { transform: scale(0.95); }
    .map-popup-btn.no  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
    .map-popup-btn.yes { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }

    /* Wrapper pour contre-rotation (no-op avec leaflet-rotate, conservé par sécurité) */
    .marker-cr { display: inline-block; }

    /* Bouton recentrage carte */
    .map-fab {
        position: fixed;
        bottom: 120px;
        right: 20px;
        z-index: 9050;
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1.2px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #FFF;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.8);
        transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring);
    }
    .map-fab.visible { opacity: 1; pointer-events: auto; transform: scale(1); transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring); }
    .map-fab.visible:active { transform: scale(0.9); }

    /* ── Super Bulles ── */
    #super-bubbles { display: flex; flex-direction: column; width: 100%; padding-bottom: 16px; margin-bottom: 8px; position: relative; z-index: 1; }
    .super-bubble {
        background: rgba(255,255,255,0.13);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1.5px solid rgba(255,255,255,0.12);
        border-radius: 24px;
        padding: 16px 20px;
        margin: 8px 14px;
        cursor: pointer;
        height: auto;
        overflow: hidden;
        transition: border-radius 0.3s var(--ease-smooth), padding 0.3s var(--ease-smooth);
        box-sizing: border-box;
        box-shadow: 0 4px 24px rgba(0,0,0,0.4);
        animation: sb-float 8s ease-in-out infinite;
        will-change: transform;
    }
    .super-bubble:nth-child(2) { animation-delay: -2s; }
    .super-bubble:nth-child(3) { animation-delay: -4s; }
    .super-bubble:nth-child(4) { animation-delay: -6s; }
    @keyframes sb-emerge {
        from { opacity: 0; transform: translateY(15px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .sb-appear { animation: sb-emerge 0.4s var(--ease-spring) forwards; }
    .super-bubble.open {
        border-radius: 20px;
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 14px 16px;
    }
    .sb-header { display: flex; align-items: flex-start; gap: 12px; }
    .sb-summary {
        flex: 1;
        font-size: 15px;
        font-weight: 400;
        color: rgba(255,255,255,0.7);
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        height: auto;
    }
    .sb-date {
        font-size: 11px;
        color: rgba(255,255,255,0.3);
        white-space: nowrap;
        flex-shrink: 0;
        padding-top: 3px;
    }
    .sb-messages { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
    .sb-msg { font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; max-width: 85%; }
    .sb-msg-user { align-self: flex-end; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
    .sb-msg-atom { align-self: flex-start; color: rgba(255,255,255,0.7); }
    #sb-load-sentinel { height: 1px; width: 100%; flex-shrink: 0; }

    /* ── Séparateurs de jour ── */
    .day-separator {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        margin: 4px 0;
    }
    .day-sep-line {
        flex: 1;
        height: 1px;
        background: rgba(255,255,255,0.07);
    }
    .day-sep-label {
        font-size: 0.68rem;
        color: rgba(255,255,255,0.25);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Debug overlay ── */
    #dbgBtn { position:fixed; bottom:calc(env(safe-area-inset-bottom) + 6px); left:50%; transform:translateX(-50%); z-index:9999; width:28px; height:6px; border-radius:3px; background:rgba(255,255,255,0.13); border:none; cursor:pointer; padding:0; transition:background .2s; -webkit-tap-highlight-color:transparent; }
    #dbgBtn.has-error { background:rgba(255,60,60,0.55); }
    #dbgOverlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.93); display:none; flex-direction:column; font-family:'SF Mono','Menlo',monospace; font-size:11px; }
    #dbgOverlay.open { display:flex; }
    #dbgToolbar { display:flex; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top) + 14px) 16px 10px; border-bottom:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
    #dbgTitle { color:rgba(255,255,255,0.5); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
    #dbgActions { display:flex; gap:10px; }
    #dbgClear, #dbgClose { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.6); border-radius:6px; padding:4px 10px; font-size:10px; cursor:pointer; font-family:inherit; }
    #dbgLog { flex:1; overflow-y:auto; padding:10px 14px; -webkit-overflow-scrolling:touch; }
    .dbg-entry { padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.05); line-height:1.5; word-break:break-all; white-space:pre-wrap; }
    .dbg-time { color:rgba(255,255,255,0.25); margin-right:6px; }
    .dbg-log   { color:rgba(255,255,255,0.75); }
    .dbg-info  { color:rgba(100,200,255,0.9); }
    .dbg-warn  { color:rgba(255,200,60,0.9); }
    .dbg-error { color:rgba(255,80,80,1); }

    /* ── Message actions ── */
    .msg-actions { display: flex; gap: 2px; margin-top: 6px; padding: 2px 0; animation: actions-reveal 0.25s var(--ease-spring) forwards; transform-origin: top center; }
    .atom-actions { justify-content: flex-start; padding-left: 4px; }
    .user-actions { justify-content: flex-end; padding-right: 4px; }
    @keyframes actions-reveal { from { opacity: 0; transform: scaleY(0.8) translateY(-4px); } to { opacity: 1; transform: scaleY(1) translateY(0); } }
    @keyframes actions-fade   { from { opacity: 0; transform: translateY(-4px); }             to   { opacity: 1; transform: translateY(0); } }
    .msg-action-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s, background 0.2s; }
    .msg-action-btn:active { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
    .msg-action-btn.activated { color: rgba(255,255,255,0.7); }

    /* ── Écran de verrouillage biométrique ─────────────────────────────── */
    #lockScreen {
        position: fixed; inset: 0; z-index: 99999;
        background: var(--bg);
        display: none;
        align-items: center; justify-content: center;
    }
    .lock-content {
        text-align: center; display: flex; flex-direction: column;
        align-items: center; gap: 20px;
    }
    .lock-icon {
        width: 80px; height: 80px; border-radius: 50%;
        background: var(--bg-elevated); border: 2px solid rgba(255,255,255,0.15);
        display: flex; align-items: center; justify-content: center;
        font-size: 36px; font-weight: 300; color: #f5f5f7;
        box-shadow: 0 0 40px rgba(0,255,255,0.3);
        animation: lock-pulse 3s infinite ease-in-out;
    }
    @keyframes lock-pulse {
        0%,100% { box-shadow: 0 0 25px rgba(0,255,255,0.2); }
        50%      { box-shadow: 0 0 50px rgba(0,255,255,0.5); }
    }
    .lock-text { font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.5); }
    .lock-btn {
        background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
        border-radius: 20px; padding: 12px 32px;
        color: rgba(255,255,255,0.7); font-family: inherit;
        font-size: 15px; font-weight: 400; cursor: pointer;
    }
    .lock-escape {
        font-size: 12px; color: rgba(255,255,255,0.22); cursor: pointer;
        background: none; border: none; font-family: inherit; font-weight: 300;
        padding: 4px 0; margin-top: 8px; text-decoration: none;
        transition: color 0.2s;
    }
    .lock-escape:active { color: rgba(255,255,255,0.55); }

    @media (prefers-reduced-motion: reduce) {
        body::before { animation: none !important; }
        #chatBar { animation: none !important; }
        .atom_reply.thinking .atom_avatar_core { animation: none !important; }
        .atom_reply.msg-match.thinking .atom_avatar_core { animation: none !important; }
        * { transition-duration: 0.01ms !important; }
    }

    @media (min-width: 600px) {
        #dialoguePage, #chatMessages { max-width: 680px; margin: 0 auto; left: 50%; transform: translateX(-50%); }
        .system_ready #dialoguePage { transform: translateX(-50%); }
    }

    /* ── Accessibilité — focus clavier visible ── */
    *:focus-visible {
        outline: 2px solid rgba(0, 255, 255, 0.6);
        outline-offset: 3px;
        border-radius: 4px;
    }
    *:focus:not(:focus-visible) {
        outline: none;
    }

    /* ── Tutorial highlight — pulse sur les boutons cibles ── */
    .tutorial-highlight {
        animation: tutorialPulse 0.9s ease-in-out 4;
        border-radius: 10px;
    }
    @keyframes tutorialPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
        50%       { box-shadow: 0 0 0 8px rgba(0, 255, 255, 0.45); }
    }

    /* ── A-TOM offline — filtre gris sur le logo canvas ── */
    #canvasContainer.atom-offline {
        filter: grayscale(1) opacity(0.35);
        transition: filter 0.4s ease;
    }
    #canvasContainer.atom-online {
        filter: none;
        transition: filter 0.6s ease;
    }



/* ── Accessibilité : prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}