:root{
    --anthracite: #131315;
    --anthracite-2: #1c1c1f;
    --anthracite-3: #232327;
    --gold: #c9a24b;
    --gold-soft: #e2c375;
    --red-tally: #d1453b;
    --line: #333;
    --text-dim: #8d8a82;
    --accent: #2f80ff;
    --accent-2: #34c759;
    --accent-3: #ff3b30;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; height:100%; width:100%;
    background:var(--anthracite);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow:hidden;
    color:#eee;
  }
  #app{ height:100vh; height:100dvh; width:100vw; display:flex; flex-direction:column; }

  /* ---------- TOP CHROME BAR ---------- */
  #chrome-top{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
    padding:10px 14px;
    background: var(--anthracite-2);
    border-bottom:1px solid var(--line);
    transition:opacity .3s ease, transform .3s ease;
  }
  #chrome-top .right-btns{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  #chrome-top .brand{
    display:flex; align-items:center; gap:8px;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing:.14em; font-size:12px; color:var(--gold-soft); text-transform:uppercase; white-space:nowrap;
  }
  #chrome-top .brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--red-tally); box-shadow:0 0 6px var(--red-tally); flex-shrink:0; }
  #chrome-top .prod-label{ font-family:'Courier New', monospace; font-size:10px; color:var(--text-dim); letter-spacing:.08em; display:none; }
  #platform-btn, #stage-btn, #profiles-btn, #install-btn, #chrono-btn, #chrono-reset, #device-btn, #liveclock-btn{
    border:1px solid var(--gold); background:transparent; color:var(--gold-soft);
    font-family:'Courier New', monospace; font-size:10.5px; letter-spacing:.1em;
    padding:7px 10px; border-radius:3px; text-transform:uppercase; cursor:pointer; white-space:nowrap; flex-shrink:0;
    display:inline-flex; align-items:center; gap:6px;
  }
  .icon{ width:14px; height:14px; flex-shrink:0; }
  #chrono-reset .icon{ width:13px; height:13px; }
  #install-btn{ display:none; border-color:var(--accent-2); color:#bfe9c9; }
  #chrono-btn{ border-color:var(--red-tally); color:#f0a49e; font-variant-numeric:tabular-nums; min-width:76px; text-align:center; }
  #chrono-btn.running{ background:var(--red-tally); color:#fff; }
  #chrono-reset{ padding:7px 8px; color:var(--text-dim); border-color:var(--line); }
  #platform-btn:active, #stage-btn:active, #profiles-btn:active, #install-btn:active, #chrono-btn:active, #chrono-reset:active, #device-btn:active{ background:var(--gold); color:#161616; }
  @media(min-width:640px){ #chrome-top .prod-label{ display:block; } }

  /* ---------- MAIN BODY ---------- */
  #body{ flex:1 1 auto; display:flex; overflow:hidden; }
  #preview-wrap{
    flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:18px;
    background: var(--anthracite-2);
    position:relative; min-height:0;
  }
  #phone-frame{
    width:min(300px, 78vw); aspect-ratio: 9/19.5; background:#000; border-radius:38px; padding:10px;
    box-shadow: 0 0 0 2px #3a3a3a; position:relative; flex-shrink:0;
    transition: width .25s ease, aspect-ratio .25s ease, border-radius .25s ease;
  }
  #phone-screen{ width:100%; height:100%; border-radius:28px; overflow:hidden; position:relative; background:#000; }
  #notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:38%; height:22px; background:#000; border-radius:14px; z-index:50; transition:all .25s ease; }

  body.android #phone-frame{ border-radius:26px; }
  body.android #phone-screen{ border-radius:16px; }
  body.android #notch{ left:auto; right:16px; transform:none; width:12px; height:12px; border-radius:50%; top:12px; }
  body.android .screen{ font-family:'Roboto','Segoe UI',Arial,sans-serif; }
  body.android{ --accent:#0b57d0; --accent-2:#1ea446; --accent-3:#e0342a; }

  /* Tablette (iPad / Android tablet) — même chrome, cadre plus large, pas d'encoche */
  body.tablet #phone-frame{ width:min(560px, 92vw); aspect-ratio: 4/3; border-radius:22px; }
  body.tablet #phone-screen{ border-radius:14px; }
  body.tablet #notch{ left:50%; right:auto; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; top:12px; background:#000; }
  body.stage-mode.tablet #phone-frame{ width:100vw; aspect-ratio:auto; }

  #panel{ flex:0 0 300px; background:var(--anthracite-2); border-left:1px solid var(--line); overflow-y:auto; padding:16px; transition: margin-right .3s ease, opacity .3s ease; }
  #panel h2{ font-family:Georgia, serif; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 10px; border-bottom:1px solid var(--line); padding-bottom:8px; }
  .tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
  .tab{ font-family:'Courier New', monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:7px 9px; border-radius:3px; border:1px solid var(--line); background:var(--anthracite-3); color:var(--text-dim); cursor:pointer; }
  .tab.active{ border-color:var(--gold); color:var(--gold-soft); background:#2a2510; }

  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:5px; font-family:'Courier New', monospace; }
  .field input[type=text], .field input[type=number], .field textarea, .field select{
    width:100%; background:#0e0e10; border:1px solid var(--line); color:#eee; padding:8px 9px; border-radius:4px; font-size:13px; font-family:-apple-system,sans-serif;
  }
  .field textarea{ resize:vertical; min-height:44px; }
  .row2{ display:flex; gap:8px; } .row2 .field{ flex:1; }

  .msg-item{ background:var(--anthracite-3); border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:8px; }
  .msg-item .msg-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .msg-item select{ width:auto; font-size:10px; padding:3px 6px; }
  .del-btn{ background:transparent; border:1px solid var(--red-tally); color:var(--red-tally); font-size:10px; padding:3px 7px; border-radius:3px; cursor:pointer; font-family:'Courier New',monospace; }
  .add-btn{ width:100%; background:transparent; border:1px dashed var(--gold); color:var(--gold-soft); padding:9px; border-radius:5px; cursor:pointer; font-size:11px; letter-spacing:.06em; font-family:'Courier New', monospace; text-transform:uppercase; margin-top:4px; }
  .add-btn:active{ background:#2a2510; }
  .hint{ font-size:10.5px; color:var(--text-dim); line-height:1.5; margin-top:14px; border-top:1px solid var(--line); padding-top:10px; font-family:'Courier New', monospace; }

  /* ---------- MEDIA UPLOAD CONTROLS (panel) ---------- */
  .media-upload-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .file-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:transparent; border:1px solid var(--gold); color:var(--gold-soft);
    font-family:'Courier New', monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
    padding:8px 10px; border-radius:4px; cursor:pointer;
  }
  .file-btn input{ display:none; }
  .media-thumb{ width:38px; height:38px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex-shrink:0; background:#000; }
  .media-clear{ background:transparent; border:1px solid var(--red-tally); color:var(--red-tally); font-size:10px; padding:6px 8px; border-radius:3px; cursor:pointer; font-family:'Courier New',monospace; }

  /* ---------- CHRONO (crew-facing, hidden from camera in Mode Plateau) ---------- */
  #chrono-stage-badge{
    position:fixed; top:10px; left:10px; z-index:950; display:none;
    background:rgba(20,20,22,.72); border:1px solid var(--red-tally); border-radius:20px;
    padding:6px 12px; font-family:'Courier New', monospace; font-size:12px; color:#f0a49e;
    letter-spacing:.05em; align-items:center; gap:6px; backdrop-filter:blur(4px);
  }
  #chrono-stage-badge .rec-dot{ width:7px; height:7px; border-radius:50%; background:var(--red-tally); }
  body.stage-mode.chrono-visible #chrono-stage-badge{ display:flex; }

  /* ---------- PROFILES PANEL (overlay) ---------- */
  #profiles-overlay{
    position:fixed; inset:0; background:rgba(10,10,11,.82); backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center; z-index:900; padding:20px;
  }
  #profiles-overlay.open{ display:flex; }
  #profiles-box{
    width:min(420px, 100%); max-height:80vh; overflow-y:auto; background:var(--anthracite-2);
    border:1px solid var(--gold); border-radius:10px; padding:18px;
  }
  #profiles-box h3{ font-family:Georgia,serif; color:var(--gold-soft); letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin:0 0 12px; }
  #profiles-box .save-row{ display:flex; gap:8px; margin-bottom:14px; }
  #profiles-box .save-row input{ flex:1; background:#0e0e10; border:1px solid var(--line); color:#eee; padding:9px 10px; border-radius:4px; font-size:13px; }
  #profiles-box .save-row button{ background:var(--gold); border:none; color:#161616; font-weight:700; padding:0 14px; border-radius:4px; cursor:pointer; font-size:12px; }
  .profile-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--anthracite-3); border:1px solid var(--line); border-radius:6px; padding:9px 11px; margin-bottom:8px; }
  .profile-item .name{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profile-item .meta{ font-size:9.5px; color:var(--text-dim); font-family:'Courier New',monospace; }
  .profile-item .btns{ display:flex; gap:6px; flex-shrink:0; }
  .profile-item button{ font-size:10px; padding:5px 8px; border-radius:3px; cursor:pointer; font-family:'Courier New',monospace; }
  .profile-item .load-b{ background:transparent; border:1px solid var(--gold); color:var(--gold-soft); }
  .profile-item .del-b{ background:transparent; border:1px solid var(--red-tally); color:var(--red-tally); }
  #profiles-empty{ font-size:11.5px; color:var(--text-dim); padding:10px 0; }

  /* ---------- BOUTON TOGGLE ACTIF (horloge réelle, etc.) ---------- */
  .active-toggle{ background:var(--gold) !important; color:#161616 !important; }

  /* ---------- NOTIFICATION EN DIRECT (bannière) ---------- */
  #live-notif-banner{
    position:absolute; top:14px; left:10px; right:10px; z-index:300;
    background:rgba(250,250,252,.96); color:#111; border-radius:16px; padding:10px 12px;
    display:flex; gap:10px; align-items:flex-start; box-shadow:0 8px 20px rgba(0,0,0,.35);
    transform:translateY(-140%); opacity:0; pointer-events:none;
    transition: transform .4s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
  }
  #live-notif-banner.show{ transform:translateY(0); opacity:1; }
  #live-notif-banner .ic{ width:26px; height:26px; border-radius:7px; background:var(--gold); flex-shrink:0; }
  #live-notif-banner .txt{ min-width:0; }
  #live-notif-banner .app{ font-size:11px; font-weight:700; }
  #live-notif-banner .body{ font-size:12.5px; }

  /* ---------- GLISSER POUR DÉVERROUILLER ---------- */
  #screen-lock{ touch-action:none; cursor:grab; }
  #screen-lock:active{ cursor:grabbing; }
  #db-status{ font-size:9.5px; color:var(--text-dim); font-family:'Courier New',monospace; margin:-6px 0 12px; letter-spacing:.03em; }
  #profiles-close{ width:100%; margin-top:8px; background:transparent; border:1px solid var(--line); color:var(--text-dim); padding:9px; border-radius:5px; cursor:pointer; font-family:'Courier New',monospace; text-transform:uppercase; font-size:11px; }

  /* ---------- STAGE MODE ---------- */
  body.stage-mode #chrome-top{ position:absolute; top:0; left:0; right:0; opacity:0; pointer-events:none; transform:translateY(-100%); z-index:-1; }
  body.stage-mode #panel{ display:none; }
  body.stage-mode #preview-wrap{ padding:0; background:#000; }
  body.stage-mode #phone-frame{ width:100vw; height:100dvh; max-width:100vw; aspect-ratio:auto; border-radius:0; box-shadow:none; padding:0; border:none; }
  body.stage-mode #phone-screen{ border-radius:0; }
  body.stage-mode #notch{ display:none; }
  #exit-stage{ position:fixed; top:0; right:0; width:56px; height:56px; z-index:999; background:transparent; opacity:0; }
  body.stage-mode #exit-stage{ display:block; }

  /* =================== PHONE SCREEN STYLES =================== */
  .screen{ position:absolute; inset:0; color:#fff; font-family: -apple-system, BlinkMacSystemFont, sans-serif; display:none; flex-direction:column; }
  .screen.active{ display:flex; }
  .statusbar{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px 4px; font-size:14px; font-weight:600; flex-shrink:0; z-index:40; position:relative; }
  body.android .statusbar{ font-weight:500; padding:12px 18px 4px; }
  .statusbar .icons{ display:flex; align-items:center; gap:4px; }
  .batt{ width:22px; height:11px; border:1.3px solid #fff; border-radius:3px; position:relative; opacity:.95; display:inline-flex; align-items:center; padding:1.3px; }
  .batt::after{ content:''; position:absolute; right:-4px; top:3px; width:2px; height:5px; background:#fff; border-radius:0 2px 2px 0; }
  .batt i{ display:block; height:100%; background:#fff; border-radius:1px; }
  body.android .batt{ border-radius:2px; }
  [contenteditable="true"]{ outline: none; }
  [contenteditable="true"]:focus{ box-shadow: 0 0 0 1.5px rgba(201,162,75,.9); border-radius:3px; }

  #screen-lock{ justify-content:flex-start; }
  #screen-lock .bg{ position:absolute; inset:0; background:#2c2650; z-index:0; }
  body.android #screen-lock .bg{ background:#123024; }
  #screen-lock .content{ position:relative; z-index:10; text-align:center; margin-top:14%; }
  #screen-lock .time{ font-size:74px; font-weight:600; letter-spacing:-1px; text-shadow:0 2px 18px rgba(0,0,0,.4); }
  body.android #screen-lock .time{ font-weight:400; font-size:80px; }
  #screen-lock .date{ font-size:16px; font-weight:500; opacity:.92; margin-top:2px; }
  #screen-lock .notifs{ margin:26px 14px 0; display:flex; flex-direction:column; gap:8px; }
  #screen-lock .notif{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border-radius:16px; padding:10px 12px; text-align:left; display:flex; gap:9px; align-items:flex-start; }
  body.android #screen-lock .notif{ border-radius:22px; background:rgba(255,255,255,.94); color:#1a1a1a; }
  #screen-lock .notif .ic{ width:26px; height:26px; border-radius:7px; background:var(--gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#161616; }
  body.android #screen-lock .notif .ic{ border-radius:50%; background:var(--accent); color:#fff; }
  #screen-lock .notif .txt{ flex:1; min-width:0; }
  #screen-lock .notif .app{ font-size:11px; font-weight:700; opacity:.85; }
  #screen-lock .notif .body{ font-size:12.5px; opacity:.95; }
  #screen-lock .camera-hint{ position:absolute; bottom:14px; right:22px; font-size:22px; opacity:.85; }
  #screen-lock .torch-hint{ position:absolute; bottom:14px; left:22px; font-size:22px; opacity:.85; }
  #screen-lock .swipe{ position:absolute; bottom:34px; width:100%; text-align:center; font-size:11px; opacity:.7; letter-spacing:.05em;}
  body.android #screen-lock .swipe{ bottom:16px; }

  #screen-home .bg{ position:absolute; inset:0; background:#3c3170; z-index:0; }
  body.android #screen-home .bg{ background:#122a3a; }
  #screen-home .grid{ position:relative; z-index:10; display:grid; grid-template-columns:repeat(4,1fr); gap:16px 10px; padding:18px 16px 0; }
  body.android #screen-home .grid{ padding-top:8px; }
  #screen-home .search{ display:none; position:relative; z-index:10; margin:6px 16px 4px; background:rgba(255,255,255,.95); border-radius:24px; padding:10px 14px; font-size:12px; color:#555; align-items:center; gap:8px; }
  body.android #screen-home .search{ display:flex; }
  #screen-home .app{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  #screen-home .app .icon{ width:52px; height:52px; border-radius:13px; background:#e4e4e6; display:flex; align-items:center; justify-content:center; font-size:22px; }
  body.android #screen-home .app .icon{ border-radius:50%; }
  #screen-home .app span{ font-size:10.5px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  #screen-home .dock{ position:absolute; bottom:22px; left:10px; right:10px; z-index:10; background:rgba(255,255,255,.18); backdrop-filter:blur(10px); border-radius:26px; padding:10px 14px; display:flex; justify-content:space-around; }
  body.android #screen-home .dock{ background:transparent; backdrop-filter:none; bottom:16px; }
  #screen-home .dock .icon{ width:48px; height:48px; border-radius:12px; background:#e4e4e6; display:flex; align-items:center; justify-content:center; font-size:20px; }
  body.android #screen-home .dock .icon{ border-radius:50%; }

  #screen-msg{ background:#000; }
  #screen-msg .head{ display:flex; flex-direction:column; align-items:center; padding:2px 0 10px; border-bottom:.5px solid #2a2a2c; flex-shrink:0; }
  #screen-msg .head .avatar{ width:56px; height:56px; border-radius:50%; background:#4a4a4a; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; margin-bottom:4px; }
  #screen-msg .head .name{ font-size:13px; font-weight:600; }
  #screen-msg .thread{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:6px; }
  #screen-msg .bubble{ max-width:75%; padding:9px 13px; border-radius:19px; font-size:15.5px; line-height:1.32; word-wrap:break-word; }
  #screen-msg .bubble.in{ background:#26262a; align-self:flex-start; border-bottom-left-radius:5px; }
  #screen-msg .bubble.out{ background:var(--accent); align-self:flex-end; border-bottom-right-radius:5px; }
  body.android #screen-msg .bubble{ border-radius:18px; }
  body.android #screen-msg .bubble.in{ background:#3c4043; border-bottom-left-radius:18px; }
  body.android #screen-msg .bubble.out{ border-bottom-right-radius:18px; }
  #screen-msg .bubble-media{ max-width:62%; border-radius:16px; overflow:hidden; align-self:flex-start; line-height:0; }
  #screen-msg .bubble-media.out{ align-self:flex-end; }
  #screen-msg .bubble-media img, #screen-msg .bubble-media video{ width:100%; display:block; max-height:260px; object-fit:cover; }
  #screen-msg .inputbar{ flex-shrink:0; display:flex; align-items:center; gap:8px; padding:8px 10px 18px; }
  #screen-msg .inputbar .box{ flex:1; height:34px; border-radius:17px; background:#1c1c1e; border:.5px solid #3a3a3c; }
  body.android #screen-msg .inputbar .box{ background:#2a2a2d; border-color:#444; }

  #screen-call{ background:#1a1a1c; align-items:center; }
  body.android #screen-call{ background:#123024; }
  #screen-call .who{ margin-top:22%; text-align:center; }
  #screen-call .avatar{ width:118px; height:118px; border-radius:50%; margin:0 auto 18px; background:#565656; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:600; }
  #screen-call .name{ font-size:26px; font-weight:600; }
  #screen-call .status{ font-size:15px; opacity:.65; margin-top:6px; }
  #screen-call .actions-incoming{ position:absolute; bottom:60px; width:100%; display:flex; justify-content:space-around; padding:0 30px; }
  #screen-call .round{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; }
  #screen-lock .torch-hint, #screen-lock .camera-hint{ color:#fff; }
  #screen-call .decline{ background:var(--accent-3); }
  #screen-call .accept{ background:var(--accent-2); }
  #screen-call .actions-active{ position:absolute; bottom:70px; width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:22px 0; padding:0 26px; }
  #screen-call .actions-active .btn{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10.5px; opacity:.9; }
  #screen-call .actions-active .btn .round{ width:58px; height:58px; background:rgba(255,255,255,.16); font-size:20px; }
  #screen-call .actions-active .endcall{ grid-column:2; }
  #screen-call .actions-active .endcall .round{ background:var(--accent-3); }

  /* --- ANIMATIONS D'APPEL (sonnerie réelle) --- */
  @keyframes ring-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
  @keyframes ring-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-3px); } 40%{ transform:translateX(3px); } 60%{ transform:translateX(-2px); } 80%{ transform:translateX(2px); } }
  #screen-call.ringing .avatar{ animation: ring-pulse 1s ease-in-out infinite; }
  #screen-call.ringing .actions-incoming{ animation: ring-shake .5s ease-in-out infinite; }
  #screen-call.connecting .status{ animation: fade-pulse 1s ease-in-out infinite; }
  @keyframes fade-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

  /* --- CLAVIER DE COMPOSITION (Composer) --- */
  #screen-dial{ background:#000; align-items:center; }
  .dial-display{ font-size:38px; font-weight:300; color:#fff; text-align:center; min-height:52px; margin-top:14%; letter-spacing:1px; word-break:break-all; padding:0 20px; }
  .dial-pad{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:22px; padding:0 30px; width:100%; }
  .dial-key{
    aspect-ratio:1/1; border-radius:50%; background:#1c1c1e; border:none; color:#fff;
    font-size:24px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; user-select:none; transition:transform .08s ease, background .08s ease;
  }
  .dial-key .sub{ font-size:9px; letter-spacing:.1em; color:#9a9a9a; margin-top:1px; }
  .dial-key:active, .dial-key.pressed{ background:#3a3a3c; transform:scale(0.92); }
  body.android .dial-key{ background:#232326; }
  .dial-call-row{ margin-top:26px; display:flex; justify-content:center; padding-bottom:30px; }
  .dial-call-row .round{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; background:var(--accent-2); }

  /* --- MESSAGES : indicateur de frappe + animation d'arrivée --- */
  @keyframes bubble-in{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
  #screen-msg .bubble.just-in, #screen-msg .bubble-media.just-in{ animation: bubble-in .28s ease; }
  .typing-indicator{ display:flex; align-items:center; gap:4px; padding:12px 15px !important; }
  .typing-indicator span{ width:6px; height:6px; border-radius:50%; background:#8e8e93; display:inline-block; animation: typing-bounce 1.1s infinite ease-in-out; }
  .typing-indicator span:nth-child(2){ animation-delay:.15s; }
  .typing-indicator span:nth-child(3){ animation-delay:.3s; }
  @keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

  /* --- VIDÉO DE MESSAGE : lecture au tap --- */
  #screen-msg .bubble-media{ position:relative; cursor:pointer; }
  #screen-msg .bubble-media .play-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.18); transition:opacity .15s ease;
  }
  #screen-msg .bubble-media .play-overlay .play-circle{
    width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9);
    display:flex; align-items:center; justify-content:center; color:#111;
  }
  #screen-msg .bubble-media.playing .play-overlay{ opacity:0; pointer-events:none; }
  #screen-call .call-video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  #screen-call .call-video-fade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.15) 30%, rgba(10,10,12,.15) 60%, rgba(10,10,12,.75) 100%); display:none; }
  #screen-call.has-video .call-video-fade{ display:block; }
  #screen-call.has-video .who, #screen-call.has-video .actions-incoming, #screen-call.has-video .actions-active{ position:relative; z-index:2; }

  #screen-social{ background:#000; }
  #screen-social .topbar{ display:flex; justify-content:center; padding:8px 0 10px; font-size:15px; font-weight:700; border-bottom:.5px solid #262626; }
  #screen-social .feed{ flex:1; overflow-y:auto; }
  #screen-social .post-head{ display:flex; align-items:center; gap:9px; padding:10px 12px; }
  #screen-social .post-head .av{ width:34px; height:34px; border-radius:50%; background:var(--gold); flex-shrink:0; }
  #screen-social .post-head .un{ font-size:13.5px; font-weight:600; }
  #screen-social .photo{ width:100%; aspect-ratio:1/1; background:#232332; display:flex; align-items:center;justify-content:center; color:#555; font-size:11px; letter-spacing:.1em; overflow:hidden; position:relative; }
  #screen-social .photo img, #screen-social .photo video{ width:100%; height:100%; object-fit:cover; }
  #screen-social .acts{ display:flex; gap:14px; padding:10px 12px 2px; font-size:22px; }
  #screen-social .likes{ padding:2px 12px; font-size:13px; font-weight:600; }
  #screen-social .caption{ padding:4px 12px 14px; font-size:13px; line-height:1.4; }
  #screen-social .caption b{ margin-right:5px; }
  #screen-social .banner{ margin:60px 14px 0; background:rgba(255,255,255,.22); backdrop-filter:blur(8px); border-radius:18px; padding:12px 13px; display:flex; gap:10px; align-items:flex-start; }
  body.android #screen-social .banner{ background:rgba(255,255,255,.95); color:#1a1a1a; border-radius:22px; margin-top:44px; }
  #screen-social .banner .ic{ width:30px; height:30px; border-radius:8px; background:var(--gold); flex-shrink:0; }
  body.android #screen-social .banner .ic{ border-radius:50%; }
  #screen-social .banner .txt .app{ font-size:11.5px; font-weight:700; }
  #screen-social .banner .txt .body{ font-size:13px; margin-top:2px; }

/* États réseau et authentification SQL */
#sync-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #3b3b40;border-radius:8px;font:11px/1.2 'Courier New',monospace;color:#aeb3bd;background:#202024;white-space:nowrap}
#sync-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#46a171;box-shadow:0 0 0 3px rgba(70,161,113,.13)}
#sync-status.offline::before{background:#d5803b;box-shadow:0 0 0 3px rgba(213,128,59,.14)}
#sync-status.syncing::before{background:#2783de;animation:syncPulse .9s infinite alternate}
#sync-status.error::before{background:#e56458}
@keyframes syncPulse{to{opacity:.35;transform:scale(.72)}}
#login-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 15%,#2b2b34 0,#131315 55%)}
#login-overlay.hidden{display:none}
.login-card{width:min(390px,100%);padding:28px;border:1px solid #36363c;border-radius:16px;background:#1b1b1f;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.login-brand{font:700 11px/1.3 'Courier New',monospace;letter-spacing:.12em;color:#caa96b;margin-bottom:18px}.login-card h1{font-size:25px;margin:0 0 8px}.login-card p{color:#a6a6ad;font-size:14px;line-height:1.5;margin:0 0 20px}.login-card label{display:block;font-size:11px;color:#bcbcc3;margin-bottom:7px}.login-card input{box-sizing:border-box;width:100%;min-height:48px;border:1px solid #44444b;border-radius:9px;padding:0 13px;color:#fff;background:#101012;font-size:16px;outline:none}.login-card input:focus{border-color:#caa96b;box-shadow:0 0 0 3px rgba(202,169,107,.12)}.login-card button{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:9px;background:#caa96b;color:#17140f;font-weight:800;cursor:pointer}.login-error{min-height:20px;margin-top:10px;color:#e97366;font-size:13px}.login-offline{margin-top:13px;color:#8f8f97;font-size:12px;text-align:center}
@media(max-width:900px){#sync-status{position:fixed;left:10px;bottom:10px;z-index:5000;box-shadow:0 2px 12px rgba(0,0,0,.35)}body.stage-mode #sync-status{display:none}}