/*
 * Demo-only layer (floating toolbar, tours). Deliberately NOT styled like the
 * product: dark charcoal with an amber accent and rounded corners, so nobody
 * mistakes it for part of Landis Contact Center. All classes start with demo-.
 */
.demo-bar {
  position: fixed; z-index: 5000; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: #F4F4F4;
  background: #1D1D1F; border: 1px solid #3A3A3D; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  display: flex; align-items: stretch; user-select: none;
}
.demo-bar.is-placed { transform: none; }
.demo-bar__grip {
  display: flex; align-items: center; gap: 7px; padding: 0 12px 0 10px; cursor: grab; border-right: 1px solid #333336;
  border-radius: 12px 0 0 12px;
}
.demo-bar__grip:active { cursor: grabbing; }
.demo-bar__grip svg.i { width: 14px; height: 14px; color: #8D8D92; }
.demo-chip { background: #F2B01E; color: #1D1D1F; font-weight: 800; font-size: 11px; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 5px; }
.demo-bar__body { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
.demo-label { color: #A9A9AF; font-size: 12px; margin-right: 2px; }
.demo-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid #45454A; background: #2A2A2D; color: #F4F4F4; font: inherit; cursor: pointer; white-space: nowrap;
}
.demo-btn:hover { background: #343438; border-color: #5A5A60; }
.demo-btn svg.i { width: 16px; height: 16px; }
.demo-btn--accent { background: #F2B01E; border-color: #F2B01E; color: #1D1D1F; font-weight: 600; }
.demo-btn--accent:hover { background: #FFC23A; border-color: #FFC23A; }
.demo-btn--ghost { border-color: transparent; background: transparent; padding: 0 8px; }
.demo-viewas { min-width: 230px; justify-content: space-between; }
.demo-viewas__who { display: inline-flex; align-items: center; gap: 8px; }
.demo-viewas__dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.demo-viewas__role { color: #A9A9AF; }
.demo-sep { width: 1px; align-self: stretch; background: #333336; margin: 0 2px; }
.demo-confirm { display: inline-flex; align-items: center; gap: 6px; color: #F2B01E; }

/* Collapsed pill */
.demo-pill {
  position: fixed; z-index: 5000; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 17px;
  background: #1D1D1F; border: 1px solid #3A3A3D; color: #F4F4F4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font: 600 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.demo-pill svg.i { width: 14px; height: 14px; }
.demo-pill.is-placed { transform: none; }

/* Popups opened from the toolbar */
.demo-popup { background: #26262A; color: #F4F4F4; border: 1px solid #3A3A3D; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; overflow: hidden; }
.demo-popup__search { padding: 8px; border-bottom: 1px solid #3A3A3D; }
.demo-popup__search input { width: 100%; height: 30px; border-radius: 6px; border: 1px solid #45454A; background: #1D1D1F; color: #F4F4F4; padding: 0 9px; outline: none; }
.demo-popup__search input:focus { border-color: #F2B01E; }
.demo-popup__list { max-height: 420px; overflow-y: auto; padding: 4px; }
.demo-popup__group { padding: 8px 8px 4px; color: #8D8D92; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.demo-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.demo-user:hover { background: #333338; }
.demo-user.is-current { background: #3B3420; }
.demo-user__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.demo-user__sub { color: #A9A9AF; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Side drawers keep Save / Cancel at their bottom-left, right where the toolbar sits:
   while a drawer is open, the toolbar moves to the middle of the page area beside it
   (unless the visitor has dragged it somewhere). */
body:has(> .drawer) .demo-bar:not(.is-placed), body:has(> .drawer) .demo-pill { left: calc((100vw - 726px) / 2); }
body:has(> .drawer--ivr) .demo-bar:not(.is-placed), body:has(> .drawer--ivr) .demo-pill { left: calc((100vw - 594px) / 2); }
body:has(> .drawer--filters) .demo-bar:not(.is-placed), body:has(> .drawer--filters) .demo-pill { left: calc((100vw - 575px) / 2); }
body:has(> .drawer--qm) .demo-bar:not(.is-placed), body:has(> .drawer--qm) .demo-pill { left: calc((100vw - 1046px) / 2); }

/* ---------------- Simulate call (js/demo/sim-panel.js) ---------------- */
.demo-btn.is-on { border-color: #F2B01E; }
.demo-btn--sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; gap: 5px; }
.demo-btn--sm svg.i { width: 12px; height: 12px; }
.demo-btn--go { background: #2E7D32; border-color: #2E7D32; }
.demo-btn--go:hover { background: #388E3C; border-color: #388E3C; }
.demo-btn--end { background: #8E2A2A; border-color: #8E2A2A; }
.demo-btn--end:hover { background: #A33333; border-color: #A33333; }
.demo-count { min-width: 18px; height: 18px; border-radius: 9px; background: #F2B01E; color: #1D1D1F; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.demo-iconbtn { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #CFCFD4; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.demo-iconbtn:hover { background: #343438; color: #fff; }
.demo-iconbtn svg.i { width: 16px; height: 16px; }

.demo-form { padding: 14px; }
.demo-form__title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.demo-form__label { display: block; color: #A9A9AF; font-size: 12px; margin: 10px 0 4px; }
.demo-form__label em { font-style: normal; color: #77777D; }
.demo-form__hint { color: #8D8D92; font-size: 11.5px; margin-top: 6px; }
.demo-form__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.demo-input, .demo-select { width: 100%; height: 32px; border-radius: 6px; border: 1px solid #45454A; background: #1D1D1F; color: #F4F4F4; padding: 0 9px; font: inherit; outline: none; }
.demo-input:focus, .demo-select:focus { border-color: #F2B01E; }
.demo-select--sm { height: 28px; font-size: 12px; margin-top: 3px; }
.demo-seg { display: flex; background: #1D1D1F; border: 1px solid #45454A; border-radius: 8px; padding: 2px; }
.demo-seg button { flex: 1; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #CFCFD4; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.demo-seg button svg.i { width: 14px; height: 14px; }
.demo-seg button.is-on { background: #3B3420; color: #F2B01E; font-weight: 600; }

/* customer side of a web chat: the look of the Landis chat widget (screenshots_2 #5, #16) */
.demo-widget { position: relative; margin-top: 12px; background: #fff; color: #242424; border-radius: 6px; padding: 26px 10px 10px; font-family: "Segoe UI", system-ui, sans-serif; }
.demo-widget__x { position: absolute; right: 10px; top: 8px; color: #0F6CBD; }
.demo-widget__x svg.i { width: 12px; height: 12px; }
.demo-widget label { display: block; font-weight: 600; font-size: 12.5px; margin: 0 0 4px; }
.demo-widget label span { color: #C4314B; }
.demo-widget input { width: 100%; height: 30px; border: 1px solid #616161; border-radius: 2px; padding: 0 8px; font: 12.5px "Segoe UI", system-ui, sans-serif; margin-bottom: 12px; color: #242424; background: #fff; outline: none; }
.demo-widget input:focus { border-color: #0F6CBD; }
.demo-widget__consent { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; margin: 2px 0 14px; }
.demo-widget__consent u { color: #0000EE; }
.demo-widget__check { flex: none; width: 16px; height: 16px; border-radius: 2px; background: #0F6CBD; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.demo-widget__check svg.i { width: 11px; height: 11px; }
.demo-widget__start { width: 100%; height: 32px; border: 0; background: #0F6CBD; color: #fff; font: 600 13px "Segoe UI", system-ui, sans-serif; cursor: pointer; }

.demo-panel {
  position: fixed; z-index: 4999; width: 380px; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: #F4F4F4;
  background: #1D1D1F; border: 1px solid #3A3A3D; border-radius: 12px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.demo-panel.hidden { display: none; }
.demo-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 1px solid #333336; color: #A9A9AF; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.demo-panel__list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.demo-panel__empty { color: #A9A9AF; padding: 18px 8px; text-align: center; }
.demo-card { background: #26262A; border: 1px solid #3A3A3D; border-radius: 10px; padding: 9px 10px; }
.demo-card.is-ended { opacity: 0.6; }
.demo-card__head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.demo-card__mod { color: #F2B01E; display: inline-flex; }
.demo-card__who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; white-space: nowrap; }
.demo-card__who span { color: #8D8D92; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.demo-card__chev { color: #8D8D92; display: inline-flex; }
.demo-card__where { color: #CFCFD4; font-size: 12px; margin: 4px 0 0 24px; }
.demo-card__where b { color: #fff; font-weight: 600; }
.demo-card__body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.demo-timer { color: #A9A9AF; font-variant-numeric: tabular-nums; font-size: 12px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.demo-actions--caller { margin-top: 0; }
.demo-log { background: #1D1D1F; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.demo-log__line { display: flex; gap: 6px; font-size: 12px; color: #CFCFD4; line-height: 1.35; }
.demo-log__line svg.i { flex: none; width: 12px; height: 12px; margin-top: 2px; color: #8D8D92; }
.demo-log__line--caller { color: #F2B01E; }
.demo-log__line--system { color: #A9A9AF; font-style: italic; }
.demo-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.demo-keypad button { height: 30px; border-radius: 6px; border: 1px solid #45454A; background: #2F2F33; color: #F4F4F4; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.demo-keypad button:hover { background: #3B3B40; border-color: #F2B01E; }
.demo-chat { background: #fff; color: #242424; border-radius: 6px; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; }
.demo-chat__msgs { max-height: 190px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #F5F5F5; }
.demo-chat__msg { max-width: 85%; }
.demo-chat__msg--customer { align-self: flex-end; text-align: right; }
.demo-chat__who { font-size: 10.5px; color: #707070; margin-bottom: 1px; }
.demo-chat__text { display: inline-block; text-align: left; padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #E0E0E0; font-size: 12.5px; line-height: 1.35; }
.demo-chat__msg--customer .demo-chat__text { background: #0F6CBD; color: #fff; border-color: #0F6CBD; }
.demo-chat__sys { align-self: center; font-size: 11px; color: #707070; }
.demo-chat__send { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 6px; padding: 3px 3px 3px 8px; }
.demo-chat .demo-chat__send { border-top: 1px solid #E0E0E0; border-radius: 0; }
.demo-chat__send input { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; font: 12.5px "Segoe UI", system-ui, sans-serif; color: #242424; background: transparent; }
.demo-chat__send .demo-iconbtn { color: #0F6CBD; }
.demo-chat__send .demo-iconbtn:hover { background: #EBF3FC; color: #0F6CBD; }
.demo-sups { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-sup { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: #3B3420; color: #F2B01E; padding: 2px 4px 2px 8px; border-radius: 12px; }
.demo-sup svg.i { width: 12px; height: 12px; }
.demo-sup button { border: 0; background: none; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; }
.demo-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #CFCFD4; cursor: pointer; }
.demo-check em { color: #8D8D92; font-style: normal; }
.demo-wrap { margin-top: 8px; border-top: 1px solid #3A3A3D; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.demo-wrap__head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #CFCFD4; }
.demo-wrap__head svg.i { width: 12px; height: 12px; }
.demo-wrap__q { display: block; font-size: 12px; color: #A9A9AF; }