/* Application installable (pwa.js) : écran de démarrage, mode application allégé sur téléphone, fenêtres du bas */

/* ---------- Écran de démarrage (mode application seulement) ---------- */
#app-splash { display: none; }
.is-app #app-splash {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 85% 8%, rgba(226,179,92,.22), transparent 55%), radial-gradient(circle at 10% 95%, rgba(142,34,54,.5), transparent 60%), #0f0c0d;
  transition: opacity .4s ease, transform .4s ease;
}
.is-app #app-splash img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 0 46px rgba(226,179,92,.35); animation: app-pop .7s cubic-bezier(.2,.9,.3,1.2) both; }
.is-app #app-splash b {
  font: 800 38px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.5px;
  background: linear-gradient(100deg, #a8672a 0%, #e2b35c 30%, #fff3d6 50%, #e2b35c 70%, #a8672a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: app-shine 1.6s ease-in-out .2s infinite;
}
.is-app #app-splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
@keyframes app-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes app-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- Mode application sur téléphone ou tablette ---------- */
@media (max-width: 900px) {
  .is-app, .is-app body { overscroll-behavior-y: none; }
  .is-app body { -webkit-tap-highlight-color: transparent; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .is-app .top-nav, .is-app .ticker, .is-app .site-footer, .is-app #chat-fab, .is-app #theme-btn, .is-app .fav-top-box, .is-app .brand-text { display: none !important; }

  /* En-tête : une seule ligne, collée en haut, sous la barre d'état */
  .is-app .topbar {
    position: sticky; top: 0; z-index: 40; flex-wrap: nowrap; gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 10px;
    background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  }
  .is-app .brand { order: 1; flex: none; font-size: 0; gap: 0; }
  .is-app .brand .logo-img { width: 32px; height: 32px; border-radius: 9px; }
  .is-app .symbol-form { order: 2; flex: 1 1 auto; min-width: 0; }
  .is-app .symbol-form input { height: 40px; border-radius: 999px; padding-left: 16px; }
  .is-app .top-actions { order: 3; flex: none; }

  /* Pages sans cadre, bord à bord : plus léger qu'un empilement de cartes */
  .is-app .layout { padding: 4px 0 0; gap: 0; }
  .is-app .left { gap: 0; }
  .is-app .left > section > .panel, .is-app .left > .panel { border: 0; border-radius: 0; background: transparent; padding: 14px 16px; }
  .is-app .left > .panel + .panel { border-top: 1px solid var(--border); }

  /* Barre d'onglets */
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: saturate(1.4) blur(20px); -webkit-backdrop-filter: saturate(1.4) blur(20px);
    border-top: 1px solid var(--border);
  }
  .app-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 4px 0; border: 0; background: none;
    color: var(--muted); font: 600 10.5px/1.2 inherit; font-family: inherit; cursor: pointer; transition: color .2s;
  }
  .app-tab-ic { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .25s, transform .2s; }
  .app-tab-ic svg, .app-tab-ic .ic { width: 22px; height: 22px; }
  .app-tab-ic svg circle { fill: currentColor; }
  .app-tabbar button:active .app-tab-ic { transform: scale(.88); }
  .app-tabbar button.active { color: var(--accent); }
  .app-tabbar button.active .app-tab-ic { background: rgb(var(--accent-rgb) / .16); }
  body.chat-open .app-tabbar { display: none; }

  /* Transition d'une page à l'autre */
  .is-app .app-enter { animation: app-enter .28s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes app-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Discussion en plein écran, sous la barre d'état */
  .is-app body.chat-open .chat-panel { padding-top: calc(12px + env(safe-area-inset-top)); }
}

/* ---------- Fenêtre du bas ---------- */
.app-sheet-wrap { position: fixed; inset: 0; z-index: 120; }
.app-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.app-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; margin: 0 auto; max-width: 560px;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  background: var(--panel); border: 1px solid var(--border); border-bottom: 0; box-shadow: 0 -20px 50px rgba(0,0,0,.35);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.9,.25,1);
}
.app-sheet-wrap.open .app-sheet-backdrop { opacity: 1; }
.app-sheet-wrap.open .app-sheet { transform: translateY(0); }
.app-sheet-grip { width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: var(--border); }

/* Menu Plus */
.app-more-user { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.app-more-user b { display: block; font-size: 15px; }
.app-more-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; color: var(--on-accent, #22140f); background: linear-gradient(135deg, #f6dc9f, #e2b35c 50%, #a8672a); }
.app-more-login { width: 100%; height: 46px; margin: 0 0 14px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; color: #22140f; background: linear-gradient(135deg, #f6dc9f, #e2b35c 50%, #a8672a); }
.app-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 16px 6px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel-2); color: var(--text); font: 600 12.5px/1.2 inherit; font-family: inherit; cursor: pointer; transition: transform .15s;
}
.app-more-item:active { transform: scale(.95); }
.app-more-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.app-more-ic .ic, .app-more-ic svg { width: 21px; height: 21px; }
.app-more-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; }

/* Invitation à installer */
.app-install-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.app-install-head b { display: block; font-size: 17px; line-height: 1.3; }
.app-install-head small { font-size: 12.5px; }
.app-install-icon { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 0 28px rgba(226,179,92,.35); }
.app-install-why { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.app-install-why li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.app-install-why li > svg, .app-install-why li > .ic { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.app-install-steps { list-style: none; margin: 0 0 12px; padding: 14px; display: grid; gap: 12px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--border); }
.app-install-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.app-step-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 13px; color: #22140f; background: linear-gradient(135deg, #f6dc9f, #e2b35c); }
.app-key { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 2px; vertical-align: middle; border-radius: 7px; color: #3b82f6; background: var(--panel); border: 1px solid var(--border); }
.app-key svg { width: 16px; height: 16px; }
.app-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin: 0 0 8px; border: 0; border-radius: 14px;
  font: inherit; font-weight: 800; font-size: 15.5px; color: #22140f; cursor: pointer;
  background: linear-gradient(100deg, #f6dc9f, #e2b35c 45%, #a8672a); box-shadow: 0 10px 26px rgba(226,179,92,.3);
}
.app-install-btn svg { width: 20px; height: 20px; }
.app-install-later { display: block; width: 100%; margin: 4px 0 0; padding: 10px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
#acc-menu [data-app-open-install] { display: flex; align-items: center; gap: 8px; }
#acc-menu [data-app-open-install] svg { width: 16px; height: 16px; }