/* The shop demo's bar (demo.nautfix.com only: worker/src/demo.js injects this file and js/demo-bar.js into every page there; nautfix.com
   never loads them). A slim strip pinned ABOVE the app's own header: the header, the shop tab bar and everything that sits under the
   header move down by --demo-h. Violet in both themes, so it never reads as part of the app (navy header, amber shop edge). */
html.nf-demo { --demo-h: 38px; --demo-bg: #4a2a8f; --demo-text: #ffffff; --demo-soft: #e4dbff; }
html.nf-demo body { --demo-h: 38px; }
#nf-demo-bar { position: sticky; top: 0; z-index: 41; height: var(--demo-h); display: flex; align-items: center; gap: 8px; padding: 0 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--demo-bg); color: var(--demo-text); font: 600 0.84rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap; overflow: hidden; box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.15); }
#nf-demo-bar .db-tag { flex: none; padding: 2px 7px; border-radius: 6px; background: #ffd54a; color: #2b1d00; font-size: 0.72rem; letter-spacing: 0.06em; }
#nf-demo-bar button { flex: none; min-height: 30px; margin: 0; padding: 4px 10px; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px;
  background: transparent; color: var(--demo-text); font: inherit; cursor: pointer; width: auto; }
#nf-demo-bar button:hover { background: rgb(255 255 255 / 0.12); }
#nf-demo-bar button:focus-visible { outline: 2px solid #ffd54a; outline-offset: 2px; }
#nf-demo-bar .db-who { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; border-color: rgb(255 255 255 / 0.6); }
#nf-demo-bar .db-sent .db-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #ffd54a; color: #2b1d00; font-size: 0.72rem; }
#nf-demo-bar .db-gap { flex: 1 1 auto; }
#nf-demo-bar .db-short { display: none; }
#nf-demo-bar .db-time { flex: none; color: var(--demo-soft); font-weight: 500; }
@media (max-width: 640px) {
  #nf-demo-bar { gap: 6px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); font-size: 0.8rem; }
  #nf-demo-bar button { padding: 4px 8px; }
  #nf-demo-bar .db-time, #nf-demo-bar .db-long { display: none; }
  #nf-demo-bar .db-short { display: inline; }
}

/* Everything the app pins under its header moves down by the bar (app.css uses --hdr-h for these). */
html.nf-demo header.top { top: var(--demo-h); }
html.nf-demo { scroll-padding-top: calc(var(--hdr-h, 0px) + var(--tabs-h, 0px) + var(--demo-h) + 8px); }
html.nf-demo .ws-slot { top: calc(var(--hdr-h, 0px) + var(--demo-h)); }
html.nf-demo .nf-build-bar { top: calc(var(--hdr-h, 56px) + var(--demo-h) + 8px); }
@media (min-width: 900px) {
  html.nf-demo nav.app-tabs { top: calc(var(--hdr-h, 0px) + var(--demo-h)); }
  html.nf-demo dialog.fm-sheet { top: calc(var(--hdr-h, 64px) + var(--tabs-h, 0px) + var(--demo-h) + 12px); }
  html.nf-demo .estb-side { top: calc(var(--hdr-h, 60px) + var(--tabs-h, 0px) + var(--demo-h) + 12px); }
}
/* Full-screen pages (the chart, a video call) keep the whole screen below the bar. */
html.nf-demo body.plot-page { height: calc(100dvh - var(--demo-h)); }

/* The bar's own sheets (people menu, Sent messages, restart): modal dialogs, so they're always above the app. */
dialog.db-sheet { width: min(460px, calc(100vw - 24px)); max-height: min(80dvh, 720px); margin: calc(var(--demo-h) + 8px) auto auto; padding: 0;
  border: 1px solid var(--border); border-top: 4px solid #4a2a8f; border-radius: 14px; background: var(--surface); color: var(--text);
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.3); }
dialog.db-sheet[open] { display: flex; flex-direction: column; }
dialog.db-sheet::backdrop { background: rgb(8 24 38 / 0.45); }
.db-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.db-head h2 { margin: 0; font-size: 1.08rem; }
.db-x { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; padding: 0; border: none; border-radius: 999px; background: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; }
.db-x:hover { background: var(--bg); color: var(--text); }
.db-body { padding: 4px 16px 16px; overflow: auto; }
.db-note { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.db-people { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.db-person { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; width: 100%; margin: 0; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.db-person:hover { border-color: #7a5cd6; }
.db-person[aria-current="true"] { border-color: #7a5cd6; background: color-mix(in srgb, #7a5cd6 10%, var(--surface)); }
.db-person:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.db-av { grid-row: span 2; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: #4a2a8f; color: #fff; font-weight: 700; }
.db-person b { font-size: 0.98rem; }
.db-person b small { font-weight: 500; color: var(--muted); }
.db-person span { color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.db-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }
.db-foot button { width: auto; }
.db-msgs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.db-msg { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.db-msg header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 4px; font-size: 0.82rem; color: var(--muted); }
.db-msg header b { color: var(--text); font-size: 0.9rem; }
.db-chan { display: inline-block; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, #7a5cd6 16%, transparent); color: var(--text); font-size: 0.74rem; font-weight: 600; }
.db-msg h3 { margin: 6px 0 2px; font-size: 0.95rem; }
.db-msg pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.88rem; color: var(--text); max-height: 12em; overflow: auto; }
.db-msg p { margin: 4px 0 0; font-size: 0.88rem; }
.db-empty { color: var(--muted); }