/* The tour · the screens only this film draws, as the app draws them (client/src/index.css,
   widgets.css), and the entrances the film stages for its visuals. */

/* the field keeps its focus once a question is sent: the ring, and the caret before the placeholder */
.cbox.fdemo-idle { border-color:var(--x-muted2); }
.cbox.fdemo-idle:not(.has-text) .cfield .ph::before { content:""; display:inline-block; width:1.5px; height:1.05em; margin-right:1px; vertical-align:-2px; background:var(--x-text); animation:x-caret 1s steps(1) infinite; }
/* Enter: the send button marks the press */
.send.fdemo-press { transform:scale(0.92); transition:transform .08s ease; }

/* « Jump to latest » (.scroll-bottom): a round button above the composer, centred */
.fdemo-jump { position:absolute; left:0; right:0; bottom:calc(100% + 16px); margin:0 auto; z-index:5; width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:var(--x-shadow); color:var(--x-muted); animation:x-fade .15s ease backwards; }

/* chapter 1 · the map, as high as the window allows: the card keeps the column's width, the
   drawing keeps its proportion, centred on the four countries (the builder's own styles load
   after this file, hence the doubled class) */
.xm-map.fdemo-map .xm-body { aspect-ratio:auto; height:220px; }
.fdemo-aim { position:absolute; left:58%; top:66%; width:1px; height:1px; pointer-events:none; }

/* chapter 2 · the dashboard (.widget-dashboard): its title, without a frame, then one card per
   chart, 12px apart */
.fdemo-dash { display:flex; flex-direction:column; gap:12px; margin:8px 0 12px; }
.fdemo-dash-title { margin-bottom:2px; font-size:14px; line-height:20px; font-weight:500; color:var(--x-text); }

/* chapter 3 · the paperclip under the pointer (.attach-btn:hover) and its title */
.ctools .clip { position:relative; }
.ctools .clip.fdemo-cliphover { background:var(--x-s2); color:var(--x-text); }
.fdemo-tip { position:absolute; left:-2px; bottom:calc(100% + 8px); white-space:nowrap; background:#fff; color:var(--x-text); border:1px solid var(--x-border-strong);
  font-size:11px; font-weight:400; line-height:16px; padding:3px 7px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,0.12); opacity:0; transform:translateY(2px);
  transition:opacity .15s ease, transform .15s ease; pointer-events:none; }
.fdemo-tip.on { opacity:1; transform:none; }
/* the attached file in the composer (.attachments-preview, .attachment-thumb, .doc-preview) */
.fdemo-att { display:flex; flex-wrap:wrap; gap:8px; margin:4px 2px 2px; }
.fdemo-thumb { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; border:1px solid var(--x-border); background:var(--x-s2); animation:x-fade .2s ease backwards; }
.fdemo-doc { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; }
.fdemo-doc .ic { width:14px; height:14px; stroke-width:1.75; color:var(--x-muted); }
.fdemo-docname { width:100%; font-size:10px; line-height:14px; text-align:center; color:var(--x-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdemo-rm { position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:999px; background:rgba(0,0,0,0.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
/* the file under the question once sent (QuestionFiles: .user-documents, .user-document) */
.fdemo-files { display:flex; flex-direction:column; gap:8px; margin-top:8px; text-align:left; }
.fdemo-file { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--x-s2); border:1px solid var(--x-border); border-radius:8px; font-size:13px; color:var(--x-text); }
.fdemo-file .ic { width:14px; height:14px; stroke-width:1.75; color:var(--x-muted); }
.fdemo-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the plan: the table of the app; its rows fall in cascade once its head is in */
.fdemo-plan .w-table { table-layout:auto; }
.fdemo-plan .w-table td { font-size:13px; }
.fdemo-plan .w-table td.ref, .fdemo-plan .fdemo-nowrap { white-space:nowrap; }
.fdemo-plan:not(.fdemo-cascade) tbody tr, .fdemo-plan:not(.fdemo-cascade) .fdemo-note { opacity:0; }
.fdemo-plan.fdemo-cascade tbody tr { animation:fdemo-rowin .2s var(--x-ease) backwards; }
.fdemo-plan.fdemo-cascade tbody tr:nth-child(2) { animation-delay:.08s; }
.fdemo-plan.fdemo-cascade tbody tr:nth-child(3) { animation-delay:.16s; }
.fdemo-plan.fdemo-cascade tbody tr:nth-child(4) { animation-delay:.24s; }
.fdemo-plan.fdemo-cascade tbody tr:nth-child(5) { animation-delay:.32s; }
.fdemo-plan.fdemo-cascade .fdemo-note { animation:x-fade .24s ease .56s backwards; }
@keyframes fdemo-rowin { from { opacity:0; transform:translateY(4px); } }

/* chapter 4 · the Word page: a band names the file above the page */
.fdemo-docbar { display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--x-border); background:var(--x-s2);
  font-family:var(--x-mono); font-size:11px; color:var(--x-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdemo-docbar .ic { width:14px; height:14px; flex:none; }
/* the share button turns while the link is created */
.dprimary.fdemo-busy { gap:8px; }
.fdemo-spin { display:inline-grid; place-items:center; animation:x-rot 1s linear infinite; }
.fdemo-spin .ic { width:14px; height:14px; }

@media (prefers-reduced-motion: reduce) {
  .fdemo-plan tbody tr, .fdemo-plan .fdemo-note { opacity:1 !important; }
  .cbox.fdemo-idle .cfield .ph::before { animation:none !important; }
}