/*
 * Phase 3: queue editor (912px form, 022-026/057-067), shared widgets (dual
 * list, audio prompt player, color box, `{` token field, action rules, flags),
 * IVR list/editor/designer + node drawer (068-074, screenshots_4) and the
 * connector pages (075-079). Sizes from the 1920px captures in screenshots_2/_4
 * and the 800px captures (x2.32).
 */

/* ---------------- Queue editor form ---------------- */
.qform { max-width: var(--form-w); padding-bottom: 8px; }
.qform .field { margin-bottom: 18px; }
.qform .field__label { margin-bottom: 8px; }
.qform .input, .qform .input-wrap { height: 37px; }
.qform .textarea { height: auto; }
.qform > .check { display: flex; margin: 0 0 15px; }
.qform .radio-list { gap: 8px; padding-left: 2px; }
.qform .radio { font-size: 14px; }
.qform__right { display: flex; justify-content: flex-end; margin: -10px 0 12px; }
.qform__more { border: 0; background: none; padding: 0; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; }
.qform__more:hover { color: var(--accent-text); }
.qform__more svg.i { width: 9px; height: 9px; }
.qform__hook-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.qform__hook-head .field__label { margin: 0; }
.btn.btn--sm { height: 30px; min-width: 0; padding: 0 31px; font-size: 14px; }
.qform .field:has(.prompt-picker) { margin-bottom: 23px; }
.qskill { margin-bottom: 14px; }
.qskill > .check { display: flex; margin-bottom: 10px; }
.qskill__inner { padding-left: 30px; }
.qskill__skills { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 2px; }

/* ---------------- Dual list (063) ---------------- */
.dual-list { background: #F7F7F7; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02); padding: 28px 35px 35px; }
.dual-list__search { display: flex; gap: 14px; margin-bottom: 10px; }
.dual-list__search .input { flex: 1; height: 37px; }
.dual-list__search .btn { min-width: 160px; }
.dual-list__body { display: grid; grid-template-columns: 1fr 37px 1fr; gap: 18px; }
.dual-list__box { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); height: 174px; overflow: auto; padding: 8px 0; }
.dual-list__head { padding: 2px 16px 6px; font-size: 14px; color: var(--text); }
.dual-list__item { padding: 7px 16px; font-size: 14px; cursor: pointer; user-select: none; }
.dual-list__item:hover { background: var(--row-hover); }
.dual-list__item.is-marked { background: var(--accent); color: #fff; }
.dual-list__moves { display: flex; flex-direction: column; gap: 8px; }
.dual-list__btn { width: 37px; height: 37px; border: 0; border-radius: 3px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dual-list__btn svg.i { width: 8px; height: 8px; }
.dual-list__btn:disabled { background: #A3A2C9; cursor: default; }

/* ---------------- Audio prompt + silent player (024) ---------------- */
.prompt-picker { display: flex; align-items: center; gap: 25px; }
.prompt-picker > .select { flex: 0 0 450px; width: 450px; }
.prompt-picker--bare > .select { flex: 1; width: auto; }
.aplayer { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.aplayer__play { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.aplayer__play svg.i { width: 14px; height: 14px; }
.aplayer__btn { border: 0; background: none; padding: 2px 3px; color: var(--text); display: inline-flex; align-items: center; font-size: 13px; }
.aplayer__btn svg.i { width: 17px; height: 17px; }
.aplayer__btn.is-muted { opacity: 0.4; }
.aplayer__time { font-size: 12px; color: var(--text); min-width: 26px; }
.aplayer__seek { flex: 1; min-width: 60px; height: 14px; -webkit-appearance: none; appearance: none; background: transparent; }
.aplayer__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--pct, 0%), #D2D0CE var(--pct, 0%)); }
.aplayer__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: -5px; }
.aplayer__seek::-moz-range-track { height: 2px; background: #D2D0CE; }
.aplayer__seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); }
.aplayer.is-empty .aplayer__play { opacity: 0.85; cursor: default; }

/* ---------------- Color box (062, 061) ---------------- */
.color-box__box { cursor: pointer; }
.color-box__value { flex: 1; display: flex; align-items: center; padding: 0 10px; }
.color-box__swatch { width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, 0.15); }
.color-box__text { margin-left: 10px; font-size: 13px; }
svg.i.color-box__none { width: 16px; height: 16px; color: #C8C6C4; }
.color-box--compact .input-wrap__caret { width: 26px; }
.color-pop { padding: 12px; width: 236px; }
.color-pop__grid { display: grid; grid-template-columns: repeat(7, 26px); gap: 6px; margin-bottom: 10px; }
.color-pop__sw { width: 26px; height: 26px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; padding: 0; }
.color-pop__sw.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }
.color-pop__row { display: flex; gap: 8px; margin-bottom: 8px; }
.color-pop__row .input { height: 32px; }
.color-pop__row .btn { min-width: 0; height: 32px; padding: 0 14px; }

/* ---------------- `{` token field (059, screenshots_2 #7 / #41) ---------------- */
.token-input { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 2px; }
.token-input:focus-within { border-color: var(--accent); }
.token-input__mirror, .token-input__field {
  font: inherit; font-size: var(--fs-base); line-height: 21px; padding: 10px 14px; margin: 0; border: 0;
  white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; letter-spacing: normal; box-sizing: border-box; width: 100%;
}
.token-input__mirror { position: absolute; inset: 0; color: transparent; overflow: hidden; pointer-events: none; }
.token-input__mirror mark { background: #E1DFDD; color: transparent; border-radius: 2px; box-shadow: 0 0 0 1px #E1DFDD; }
.token-input__field { position: relative; display: block; background: transparent; color: var(--text); resize: none; outline: none; overflow: hidden; }
.token-input.is-disabled { background: #FAF9F8; }
.token-pick .dropdown-list__item { padding: 8px 12px; }

/* ---------------- Action rules (061, 072, #35) ---------------- */
.arules { max-width: 940px; }
.arules__head, .arules__row { display: grid; grid-template-columns: 325px 325px 72px 82px 40px; gap: 13px; align-items: center; }
.arules__head { margin-bottom: 10px; font-size: var(--fs-base); }
.arules__row { margin-bottom: 6px; }
.arules__row .input, .arules__row .input-wrap { height: 38px; }
.arules .al-center { text-align: center; }
.arules__del { border: 0; background: none; color: var(--text); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; justify-self: center; }
.arules__del svg.i { width: 18px; height: 18px; }
.arules__add { display: flex; justify-content: flex-end; max-width: 863px; margin: 2px 0 6px; }
.arules__adv { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--fs-base); }
.arules__adv svg.i { width: 10px; height: 10px; }
.arules__v1 { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.arules__v1-title { font-weight: 600; margin-bottom: 10px; }
.arules__v1-head, .arules__v1-row { display: grid; grid-template-columns: 325px 325px 82px 40px; gap: 13px; align-items: center; margin-bottom: 6px; }

/* ---------------- Flags ---------------- */
svg.flag { width: 21px; height: 14px; flex: 0 0 21px; margin-right: 8px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.select__value svg.flag { margin-right: 8px; }

/* ---------------- Manage Agent Signins dialog ---------------- */
.signins__row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--row-line); }
.signins__row .person { flex: 1; }
.signins__state { color: var(--text-secondary); font-size: 13px; }

/* ---------------- IVR editor ---------------- */
/* 071 shows the flow JSON in the page font, not a code font */
.ivr-flow-json { line-height: 19px; white-space: pre; }
.editor__body--designer { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; margin-right: 0; padding-right: 0; }

/* ---------------- IVR designer (068, screenshots_4) ---------------- */
.ivrd { flex: 1; min-height: 0; position: relative; background: #fff; border: 1px solid var(--border); }
.ivrd__canvas { position: absolute; inset: 0; overflow: auto; }
.ivrd__stage { position: relative; }
.ivrd__svg { display: block; user-select: none; }
.ivrd__toolbar { position: absolute; left: 8px; top: 6px; height: 45px; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); border-radius: 2px; z-index: 2; }
.ivrd__toolbar .tb-btn { font-size: 14px; height: 34px; padding: 0 10px; }
.ivrd__toolbar .tb-btn svg.i { width: 18px; height: 18px; color: var(--text); }
.ivrd__toolbar .tb-btn:disabled svg.i { color: var(--text-disabled); }
.ivrd__toolbar svg.i.ivrd__caret { width: 9px; height: 9px; margin-left: 2px; }
.ivrd__zoombar { position: absolute; left: 13px; bottom: 12px; height: 42px; display: flex; align-items: center; gap: 2px; padding: 0 6px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); border-radius: 2px; z-index: 2; }
.ivrd__zoom { width: 98px; height: 32px; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 14px; color: var(--text-secondary);
  border-right: 1px solid var(--border); margin-right: 6px; }
.ivrd__zoom svg.i { width: 9px; height: 9px; color: var(--text); }
.ivrd__zoombar .icon-btn { width: 44px; height: 34px; color: var(--text); }
.ivrd__zoombar .icon-btn svg.i { width: 20px; height: 20px; }
.ivrd__settings { padding: 12px 16px; }
.ivrd__addmenu .menu__item svg.i { width: 16px; height: 16px; color: var(--text); }

.ivrd__shape { cursor: pointer; }
.ivrd__shape rect, .ivrd__shape ellipse { fill: #fff; stroke: #222; stroke-width: 2; }
.ivrd__shape text { font: 14px "Segoe UI", "LCC Selawik", sans-serif; fill: #222; pointer-events: none; }
.ivrd__shape--end { cursor: default; }
.ivrd__edge { fill: none; stroke: #222; stroke-width: 2; }
/* While a block is selected, the rest of the flow fades (screenshots_4, 069) */
.ivrd__shape.is-dim rect, .ivrd__shape.is-dim ellipse { stroke: #CFCFCF; }
.ivrd__edge.is-dim { stroke: #CFCFCF; }
.ivrd__shape.is-selected rect { stroke: #E81123; stroke-width: 3; }
.ivrd__shape .ivrd__selbox { fill: none; stroke: #605E5C; stroke-width: 1; stroke-dasharray: 3 2; }
.ivrd__edge.is-on { stroke: #E81123; stroke-width: 3; }

/* ---------------- IVR block drawer (screenshots_4) ---------------- */
.drawer.drawer--ivr { width: 594px; background: #F4F4F4; border-bottom: 0; z-index: 905; }
.drawer--ivr .drawer__close { top: 18px; right: 14px; }
.drawer--ivr .drawer__header { padding: 44px 34px 6px 41px; }
.drawer--ivr .drawer__title { font-size: 24px; font-weight: 700; color: #252423; }
.drawer--ivr .drawer__body { padding: 18px 34px 30px 41px; }
.ivrdr__meta { font-size: 14.5px; margin-bottom: 9px; }
.ivrdr__meta b { font-weight: 600; margin-right: 4px; }
.ivrdr .field { margin-bottom: 6px; }
.ivrdr .field__label { margin: 0 0 3px; font-size: 14.5px; }
.ivrdr .input, .ivrdr .input-wrap { height: 34px; border-color: #EBEDF2; }
.ivrdr .input:focus, .ivrdr .input-wrap:focus-within { border-color: var(--accent); }
.ivrdr .textarea { border-color: #EBEDF2; }
.ivrdr .token-input { border-color: #EBEDF2; }
.ivrdr .check--form .check__box { width: 18px; height: 18px; flex-basis: 18px; }
.ivrdr input.input, .ivrdr .textarea { color: #575962; }
.ivrdr > .check { display: flex; margin: 4px 0 10px; }
.ivrdr__adv { border: 0; background: none; padding: 0 0 0 6px; margin: 0 0 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14.5px; }
.ivrdr__adv svg.i { width: 10px; height: 10px; }
.ivrdr__panel { margin: 12px 0 8px; }
.ivrdr__panel-head { display: flex; align-items: center; justify-content: space-between; background: #FAF9F8; padding: 10px 6px; border-bottom: 1px solid #E1DFDD; font-weight: 600; font-size: 14.5px; }
.ivrdr__add { border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14.5px; font-weight: 400; padding: 2px 8px; }
.ivrdr__add svg.i { width: 16px; height: 16px; }
.ivrdr__panel-body { padding-top: 8px; }
.ivrdr__tone, .ivrdr__holiday { display: grid; align-items: center; gap: 4px; background: #EDEBE9; padding: 5px 4px 5px 6px; margin-bottom: 6px; }
.ivrdr__tone { grid-template-columns: 57px 166px 1fr 28px; }
.ivrdr__holiday { grid-template-columns: 244px 1fr 28px; }
.ivrdr__trash { border: 0; background: none; width: 26px; height: 26px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.ivrdr__trash svg.i { width: 16px; height: 16px; }
.ivrdr__regex { position: relative; padding: 6px 44px 8px 9px; margin-bottom: 6px; }
.ivrdr__regex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.ivrdr__regex-grid .field { margin-bottom: 4px; }
.ivrdr__regex-param { position: relative; }
/* The trash can sits at the end of the "Parameter Name To Match" label row */
.ivrdr__regex-param .ivrdr__trash { position: absolute; right: -4px; top: -4px; }
.ivrdr__wide { grid-column: 1 / -1; }
.ivrdr__drag { position: absolute; right: 12px; top: 50%; margin-top: -9px; color: var(--text-secondary); }
.ivrdr__drag svg.i { width: 18px; height: 18px; }

/* ---------------- Connectors (075-079) ---------------- */
/* Chat link "Widget Information": grey block with the embed code and a copy button (078) */
.chat-widget { position: relative; background: #E8E7E5; min-height: 139px; padding: 32px 46px 20px 37px; }
.chat-widget__code { margin: 0; font: inherit; font-size: 14px; line-height: 23px; color: #333; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-widget__copy { position: absolute; top: 16px; right: 20px; border: 0; background: none; padding: 2px; color: #333; display: inline-flex; }
.chat-widget__copy svg.i { width: 16px; height: 16px; }
.qform .input.input--plain { height: 44px; padding-left: 16px; }
.qform .input.input--phone { height: 37px; }