/* akciali-chat-demo :: the demo layer only. The app look is app.css, copied
   from the real app by build/vendor.py; this file adds the tour banner and
   moves the app below it (--demoH is measured in demo-tour.js). */
:root { --demoH: 0px; }

/* the app sizes itself to the viewport; the banner takes its share first */
body { padding-top: var(--demoH); }
#app, .app { height: calc(var(--vvh, 100dvh) - var(--demoH)) !important; }

#explain {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  background: var(--bg);
}
.explain-card {
  position: relative; overflow: hidden; max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: rgba(20, 24, 38, .9); color: #eef2ff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  padding: 9px 12px; box-shadow: 0 4px 18px rgba(0,0,0,.18);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.explain-glow {
  position: absolute; inset: -2px; z-index: 0; border-radius: 16px;
  background: linear-gradient(120deg, #6fb2f0, #5ed69a, #f59b3d, #a78bfa, #6fb2f0);
  background-size: 300% 300%; animation: bannerglow 10s linear infinite;
  filter: blur(14px); opacity: .28; pointer-events: none;
}
@keyframes bannerglow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.explain-ico { position: relative; font-size: 1.3rem; flex-shrink: 0; }
.explain-body { position: relative; flex: 1; min-width: 0; }
.explain-tag { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd166; }
.explain-msg { font-size: .84rem; line-height: 1.35; min-height: 2.4em; display: flex; align-items: center; }
.explain-msg span { animation: msgin .4s ease; }
.explain-msg code { font-size: .92em; background: rgba(255,255,255,.12); padding: 0 4px; border-radius: 4px; }
@keyframes msgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.explain-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.explain-dots { display: flex; gap: 5px; }
.explain-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; }
.explain-dots i.on { background: #ffd166; }
.langsw { display: flex; gap: 2px; background: rgba(255,255,255,.12); border-radius: 9px; padding: 2px; }
.langsw button { border: none; background: transparent; color: #cfd8ff; font: 700 .7rem/1 inherit; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.langsw button.on { background: #ffd166; color: #1e272e; }
@media (max-width: 560px) { .explain-msg { font-size: .76rem; } .explain-ico { display: none; } }