/* demo.css — website-demo chrome layered over the real chat UI. */

/* Banner above the chat: honest framing + upsell. */
#demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 14px; font: 13px/1.4 system-ui, sans-serif;
  background: linear-gradient(90deg, #101a33, #14224a);
  color: #cdd8f5; border-bottom: 1px solid #24325c;
}
#demo-banner strong { color: #fff; font-weight: 600; }
#demo-banner a { color: #8ab4ff; text-decoration: none; }
#demo-banner a:hover { text-decoration: underline; }

/* Push the fixed-position chat root below the banner. */
#chatRoot { top: 34px !important; }

/* Model download / engine init overlay. */
#demo-progress {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center;
  background: rgba(8, 12, 24, 0.72); backdrop-filter: blur(3px);
}
#demo-progress .card {
  width: min(420px, 86vw); padding: 22px 24px; border-radius: 12px;
  background: #121a30; border: 1px solid #26345e; color: #dbe4fb;
  font: 14px/1.5 system-ui, sans-serif; text-align: center;
}
#demo-progress .track {
  margin-top: 14px; height: 8px; border-radius: 4px; background: #1d2848; overflow: hidden;
}
#demo-progress .fill {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #4f7cff, #7aa2ff); transition: width .25s ease;
}
#demo-progress .fill.indet { animation: demo-indet 1.1s ease-in-out infinite alternate; }
@keyframes demo-indet { from { margin-left: 0; } to { margin-left: 60%; } }
#demo-progress .hint { margin-top: 10px; font-size: 12px; color: #8fa1cc; }

/* No-WebGPU fallback. */
#demo-blocked {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center;
  background: #0b1220; color: #dbe4fb; font: 15px/1.6 system-ui, sans-serif;
}
#demo-blocked .card { max-width: 480px; padding: 28px; text-align: center; }
#demo-blocked h1 { font-size: 20px; margin-bottom: 10px; color: #fff; }
#demo-blocked a { color: #8ab4ff; }