/* The demo's few changes to the page: a banner, and hiding what only means something with a server behind it. */
body.demo { display: flex; flex-direction: column; }
body.demo main { flex: 1; min-height: 0; height: auto !important; }

.demo-banner {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted, #b9b3c9);
  background: var(--panel, #1f1a2b);
  border-bottom: 1px solid var(--line, #3a3350);
}
.demo-banner a { color: var(--accent, #ff8f6b); }
.demo-banner a.demo-banner-cta { flex: none; padding: 2px 12px; font-weight: 600; text-decoration: none; color: var(--accent-text, #1b1535); background: var(--accent, #ff8f6b); border-radius: 999px; }
.demo-banner-toggle { flex: none; padding: 0 8px; font: inherit; line-height: 1.4; color: inherit; background: transparent; border: 1px solid var(--line, #3a3350); border-radius: 999px; cursor: pointer; }
.demo-banner-short { display: none; }
.demo-banner.collapsed { flex-wrap: nowrap; justify-content: center; padding-top: 3px; padding-bottom: 3px; }
.demo-banner.collapsed .demo-banner-short { display: inline; }
.demo-banner.collapsed .demo-banner-full, .demo-banner.collapsed .demo-banner-links { display: none; }

/* No brains, folders, permissions, attachments, saved looks or microphone without a server. */
body.demo #menus,
body.demo .seg-group,
body.demo #save-look,
body.demo #attach,
body.demo #mic,
body.demo #file { display: none !important; }

#demo-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 14px 8px; }
#demo-chips .chips-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
#demo-chips.collapsed .chips-list { display: none; }
#demo-chips button {
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text, #eee);
  background: var(--fill-2, #2c2640);
  border: 1px solid var(--line, #3a3350);
  border-radius: 999px;
  cursor: pointer;
}
#demo-chips .chips-toggle { flex: none; color: var(--muted, #b9b3c9); background: transparent; }
#demo-chips button:hover { background: var(--hover, #38304f); }

/* The dialog that offers the small in-browser model. */
.model-dialog {
  max-width: min(560px, calc(100vw - 32px));
  padding: 20px 22px;
  color: var(--text, #eee);
  background: var(--panel, #1f1a2b);
  border: 1px solid var(--line, #3a3350);
  border-radius: 14px;
}
.model-dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
.model-dialog::backdrop { background: rgba(10, 8, 20, 0.6); }
.model-dialog h2 { margin: 0 0 10px; font-size: 18px; }
.model-dialog p { margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.model-dialog a { color: var(--accent, #ff8f6b); }
.model-dialog progress { width: 100%; height: 10px; margin: 4px 0; }
.model-dialog .model-note, .model-dialog .model-progress { color: var(--muted, #b9b3c9); font-size: 13px; }
.model-dialog .model-warning { padding: 8px 10px; background: var(--fill-2, #2c2640); border-radius: 8px; }
.model-dialog .model-error { color: #ff9a9a; }
.model-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.model-buttons button {
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text, #eee);
  background: var(--fill-2, #2c2640);
  border: 1px solid var(--line, #3a3350);
  border-radius: 999px;
  cursor: pointer;
}
.model-buttons button.primary { background: var(--accent, #ff8f6b); color: #1c1224; border-color: transparent; font-weight: 600; }
.model-buttons button.quiet { background: transparent; }
.model-buttons button:disabled { opacity: 0.6; cursor: default; }

/* On a phone: the page stacks the picture over the chat, which leaves the chat little room. So the banner is smaller, the buttons over the
   picture are tighter (all of them fit, instead of one hiding past the edge), and the suggested prompts are one row that scrolls sideways,
   its last button fading out at the edge, instead of six rows of buttons. */
@media (max-width: 800px) {
  body.demo .demo-banner { font-size: 12px; padding: 4px 10px; line-height: 1.35; }
  body.demo .tools { gap: 5px; }
  body.demo .tools button, body.demo .tools select { padding: 5px 7px; font-size: 12px; }
  #demo-chips { flex-direction: row; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
  #demo-chips .chips-list {
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  #demo-chips .chips-list::-webkit-scrollbar { display: none; }
  #demo-chips button { flex: none; white-space: nowrap; }
  .model-dialog { padding: 16px; }
  .model-buttons button { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  body.demo .tools { gap: 4px; }
  body.demo .tools button, body.demo .tools select { padding: 5px 5px; font-size: 11.5px; }
}
#demo-chips .chips-list button:disabled { opacity: 0.55; cursor: default; }