/* Conjoin · Modo demonstração (ferramenta de apresentação, fora do app)
   Visual propositalmente diferente do app: roxo de "destaque" e borda tracejada. */

.demo-trigger {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: var(--z-demo-trigger);
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1.5px dashed var(--destaque-tinta);
  border-radius: var(--r-pill);
  background: var(--destaque-veu);
  color: var(--destaque-tinta);
  font-weight: 700;
  box-shadow: var(--shadow-whisper);
}
.demo-trigger:hover { background: #E6DCFD; }
.demo-trigger[aria-expanded="true"] { background: var(--destaque-tinta); color: var(--alva); border-style: solid; }
.demo-trigger .dt-short { display: none; }

.demo-scrim { display: none; }

.demo-panel {
  position: fixed;
  top: var(--s-6);
  right: var(--s-6);
  bottom: calc(var(--s-6) + 64px);
  z-index: var(--z-demo-trigger);
  width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
  overflow-y: auto;
  border: 1.5px dashed var(--destaque-tinta);
  border-radius: var(--r-xl);
  background: var(--alva);
  box-shadow: var(--shadow-float);
  animation: toast-in var(--dur-base) var(--ease-out-expo);
}
.demo-head { display: flex; align-items: flex-start; gap: var(--s-2); }
.demo-head > div { flex: 1; }
.demo-head h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--destaque-tinta); }
.demo-head p { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.demo-session { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bruma); font-size: var(--fs-label); font-weight: 600; }
.demo-code-box { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border-radius: var(--r-md); background: var(--destaque-veu); color: var(--destaque-tinta); font-size: var(--fs-label); }
.demo-code-box strong { font-size: var(--fs-headline); line-height: 1.2; letter-spacing: 0.18em; color: var(--noite); font-variant-numeric: tabular-nums; }
.demo-group { display: flex; flex-direction: column; gap: 2px; }
.demo-group h3 { margin-bottom: var(--s-1); font-size: var(--fs-label); font-weight: 700; color: var(--noite); }
.demo-group h3 small { font-weight: 500; color: var(--ink-soft); }
.demo-item {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-md);
  background: transparent;
  color: var(--noite);
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 500;
}
.demo-item .ic { width: 20px; height: 20px; color: var(--destaque-tinta); }
.demo-item:hover { background: var(--destaque-veu); }
.demo-foot { margin-top: var(--s-2); font-size: var(--fs-label); color: var(--ink-soft); }

/* Desktop largo: painel docado à direita do aparelho */
@media (min-width: 1100px) {
  .demo-panel { top: 50%; bottom: auto; transform: translateY(-50%); max-height: calc(100dvh - 120px); right: max(24px, calc((100vw - 390px) / 2 - 360px - 64px)); animation: none; }
}

/* Celular: gatilho discreto na lateral e gaveta por cima do app */
@media (max-width: 520px), (max-height: 640px) {
  .demo-trigger {
    right: 0; bottom: auto; top: 72%;
    min-height: 0; width: 22px; height: 72px; padding: 0;
    flex-direction: column; justify-content: center;
    border-radius: var(--r-md) 0 0 var(--r-md);
    border-right: 0;
    writing-mode: vertical-rl;
    font-size: 0.75rem;
    opacity: 0.6;
    box-shadow: none;
  }
  .demo-trigger:hover, .demo-trigger:focus-visible { opacity: 1; }
  .demo-trigger .ic, .demo-trigger .dt-full { display: none; }
  .demo-trigger .dt-short { display: inline; font-size: 0.8125rem; letter-spacing: 0.04em; }
  .demo-trigger[aria-expanded="true"] { display: none; }
  .demo-scrim { display: block; position: fixed; inset: 0; z-index: var(--z-demo-trigger); background: rgba(16, 28, 38, 0.4); }
  .demo-panel { top: 0; right: 0; bottom: 0; border-radius: var(--r-xl) 0 0 var(--r-xl); width: min(340px, 88vw); border-right: 0; }
}

/* Fluxo em apresentação: roteiro fixo no topo do painel */
.demo-flow { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-lg); background: var(--destaque-veu); }
.demo-flow .df-head { display: flex; align-items: center; gap: var(--s-2); }
.demo-flow .df-head > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--alva); color: var(--destaque-tinta); flex: none; }
.demo-flow .df-head > div { flex: 1; min-width: 0; }
.demo-flow .df-head strong { display: block; font-size: var(--fs-label); line-height: var(--lh-label); }
.demo-flow .df-head small { display: block; font-size: var(--fs-label); color: var(--ink-soft); }
.demo-flow .df-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--porto); }
.demo-flow .df-steps li::marker { font-weight: 700; color: var(--destaque-tinta); }
.demo-flow .demo-item { background: var(--alva); }