/* ServorIA — aperçu interactif de l'application sur la page d'accueil (static/demo.js).
   Réutilise les classes de l'application (.app, .sidebar, .msg, .build, .composer-box…) :
   seules les différences liées à l'intégration dans une fenêtre (au lieu du plein écran) sont ici, sous .stage. */

.stage:empty { min-height: 660px; }   /* place réservée avant le montage */

/* fenêtre */
.demo-frame { border-radius: 18px; overflow: hidden; background: var(--bg); border: 1px solid rgba(255,255,255,.1); text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 120px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6); }
.demo-bar { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; background: #121216; border-bottom: 1px solid rgba(255,255,255,.07); }
.demo-dots { display: flex; gap: 7px; }
.demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2c2c35; }
.demo-url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 160px); height: 26px; padding: 0 14px;
  border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-3); font: 12px var(--mono); white-space: nowrap; }
.demo-url > span { overflow: hidden; text-overflow: ellipsis; }

/* coquille : hauteur fixe au lieu de l'écran entier ; tout reste dans la fenêtre */
.stage .demo-app { position: relative; height: 620px; isolation: isolate; }
.demo-app .main { position: relative; }
.demo-app .thread, .demo-app .conv-list { overscroll-behavior: auto; }   /* la molette continue de faire défiler la page */
.demo-app .chat.empty .thread-inner { padding-bottom: 48px; }

/* offre Ultra dans le bouton utilisateur et le menu */
.demo-app .user-btn .who small { display: flex; margin-top: 3px; }
.demo-app .plan-chip { gap: 5px; height: 20px; padding: 0 8px; font-size: 11.5px; }
.demo-app .plan-chip .ic { color: currentColor; }
.demo-app .sb-foot > .menu { left: 10px; right: 10px; bottom: calc(100% - 4px); }
.demo-app .menu .plan-chip { margin-left: auto; }

/* invitation à créer un compte */
.demo-cta { position: absolute; z-index: 60; left: 50%; bottom: 104px; transform: translateX(-50%); width: min(600px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--elev); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: demo-cta-in .3s var(--ease); }
.demo-cta p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.demo-cta b { color: var(--text); font-weight: 600; }
.demo-cta .btn { flex: none; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.demo-cta-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: #b9b0ff; }
.demo-cta .demo-cta-x { width: 32px; height: 32px; flex: none; color: var(--text-3); }
@keyframes demo-cta-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* téléphone et tablette (mêmes seuils que l'application) : tiroir et voile restent dans la fenêtre */
@media (max-width: 860px) {
  .stage .demo-app { height: 600px; }
  .stage:empty { min-height: 640px; }
  .demo-app .sidebar { position: absolute; width: min(86%, 300px); }
  .demo-app.drawer .scrim { position: absolute; }
  .demo-app .topbar { padding-top: 0; height: var(--topbar-h); }
  .demo-app .sb-foot { padding-bottom: 10px; }
  .demo-app .composer-dock { padding-bottom: 14px; }
  .demo-cta { bottom: 92px; }
}
@media (max-width: 600px) {
  .stage .demo-app { height: 580px; }
  .stage:empty { min-height: 616px; }
  .land .stage-wrap { padding-inline: 8px; }   /* un peu plus de largeur pour l'aperçu */
  .demo-frame { border-radius: 16px; }
  .demo-bar { height: 36px; }
  .demo-dots { display: none; }
  .demo-url { max-width: calc(100% - 24px); }
  .demo-app .composer-dock { padding-bottom: 10px; }
  .demo-cta { flex-wrap: wrap; bottom: 84px; padding: 12px 44px 12px 12px; }
  .demo-cta p { flex-basis: calc(100% - 46px); }
  .demo-cta .btn { flex: 1; margin-left: 46px; }
  .demo-cta .demo-cta-x { position: absolute; top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .demo-cta { animation: none; } }