/* T2 Falcon Admin — IVR Voice template styles */

/* === Step 1: Basic Info fields ===
   All three fields on ONE row: Template Name, Language, Reference ID. Name gets
   a bit more width as the primary field. */
.ivr-step1-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px 18px; }
.ivr-f-name { grid-column: 1; grid-row: 1; }
.ivr-f-ref  { grid-column: 2; grid-row: 1; }

/* === Step 1: type cards === */
.ivr-section-head { margin-top: 22px; }
.ivr-section-head h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.ivr-section-head p  { font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; }

.ivr-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ivr-type-card {
  position: relative;
  text-align: start;
  background: white;
  border: 1.5px solid var(--border-2);
  border-radius: 12px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ivr-type-card:hover { border-color: #c8d5d7; background: #fbfcfc; }
.ivr-type-card.selected {
  border-color: var(--teal, #2dd4d9);
  box-shadow: 0 0 0 3px rgba(45, 212, 217, 0.12);
  background: #f5fdfd;
}
.ivr-type-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef6f7; color: #0d3f44;
  margin-bottom: 4px;
}
.ivr-type-card.selected .ivr-type-icon { background: var(--teal); color: white; }
.ivr-type-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ivr-type-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ivr-type-check {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: white;
  display: inline-flex; align-items: center; justify-content: center;
}

/* === Wizard shell ===
   The IVR wizard now reuses the WhatsApp ac-card / ac-card-head / ac-card-body
   shell (see TplIvrWizard) so its background, header and gray stepper match the
   WhatsApp template wizard exactly — no IVR-specific head/body overrides. */

/* === Step 2: canvas node builder === */
/* min-height (not height) so the side panel can grow past 560px when its content
   is tall (e.g. dynamic segment list + keypad) instead of spilling the footer out. */
.ivr-canvas-step { display: flex; gap: 0; align-items: stretch; min-height: 560px; }
/* Edit / Share screen: the canvas (edit) or the read-only flow review (share) sits below the
   template-details grid, separated by a divider. */
.ivr-edit-canvas { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-2, #e3e9ea); }
/* Action-history card sits between the template-details grid and the canvas. */
.ivr-edit-history { margin-top: 20px; }
/* Share mode locks the form (pointer-events:none); keep the canvas usable for VIEWING — pan,
   zoom, tree toggle and playback all still work; the editing controls are removed in read-only. */
.tpl-share-locked .ivr-edit-canvas { pointer-events: auto; }
/* Read-only canvas: nodes aren't click-to-edit, so they take the map's grab cursor, not pointer. */
.ivr-edit-canvas.is-readonly .ivr-cnode { cursor: inherit; }
/* Read-only hides the (+) create button, so move the tree-view toggle into the top corner
   where (+) would have been, instead of leaving it stranded 78px in with an empty gap. */
.ivr-edit-canvas.is-readonly .ivr-canvas-tree { inset-inline-end: 18px; }
/* ===== Draggable canvas | panel resizer (same mechanism/look as Wallet & Balance) =====
   The 16px strip replaces the old gap and is the full-height drag hit-area; a teal
   grip pill fades in on hover/focus/drag and gently nudges to advertise itself. */
.ivr-split-resizer {
  flex: 0 0 16px; align-self: stretch; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize; touch-action: none; z-index: 6;
}
.ivr-split-grip {
  width: 8px; height: 54px; border-radius: 6px;
  background: var(--teal); opacity: 0.45;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  transition: opacity .15s ease, height .15s ease, width .15s ease;
  animation: ivr-grip-nudge 1.7s ease-in-out 3;
}
.ivr-split-resizer:hover .ivr-split-grip,
.ivr-split-resizer:focus-visible .ivr-split-grip,
.ivr-split-resizer.dragging .ivr-split-grip { opacity: 1; width: 10px; height: 66px; animation: none; }
.ivr-split-resizer:focus { outline: none; }
@keyframes ivr-grip-nudge { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.85); } }
/* While dragging, suppress pointer events inside both panes so the drag stays smooth. */
.ivr-canvas-step.is-resizing .ivr-canvas-scroll,
.ivr-canvas-step.is-resizing .ivr-create-panel { pointer-events: none; }
.ivr-canvas-scroll {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background-color: #fafbfc;
  background-image: radial-gradient(circle at 1px 1px, rgba(13,63,68,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  cursor: grab;          /* grab the grid and drag in any direction (map-like) */
  user-select: none;
}
.ivr-canvas-scroll.is-panning { cursor: grabbing; }
.ivr-canvas { position: absolute; inset: 0; transform-origin: 0 0; }
.ivr-canvas-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-muted); font-size: 13px; text-align: center;
}

/* node card */
/* ---- node card on the canvas (compact / best-practice sizing) ---- */
.ivr-cnode {
  position: absolute; z-index: 2;
  background: #fff; border: 1.5px solid var(--border-2); border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 3px 12px rgba(13,63,68,0.07);
  transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.ivr-cnode:hover { border-color: #b6c6c8; box-shadow: 0 6px 18px rgba(13,63,68,0.12); }
.ivr-cnode.is-active { border-color: var(--teal); box-shadow: 0 0 0 2.5px rgba(13,63,68,0.12), 0 6px 18px rgba(13,63,68,0.13); }
.ivr-cnode.is-root { border-color: var(--teal); }
.ivr-cnode.is-draft { border-style: dashed; }
.ivr-cnode-ph { color: var(--text-muted); font-weight: 700; }

.ivr-cnode-menu {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 22px; height: 22px; border: none; background: transparent; cursor: pointer;
  color: #6b7780; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ivr-cnode-menu:hover { background: #f0f2f3; color: var(--teal); }
.ivr-cnode-menu svg { width: 15px; height: 15px; }

.ivr-cnode-title {
  font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer;
  padding-inline-end: 22px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Title row: node name on the left, its "Return / go to" target chip pinned to the top-right of the card. */
.ivr-cnode-titlerow { display: flex; align-items: center; gap: 8px; }
.ivr-cnode-titlerow .ivr-cnode-title { flex: 1 1 auto; min-width: 0; padding-inline-end: 0; }
.ivr-cnode-goto-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; max-width: 55%;
  height: 22px; padding: 0 9px; border-radius: 7px;
  background: #fdeede; color: #b45309; font-weight: 500; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ivr-cnode-sub { font-size: 12px; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivr-cnode-sub i { color: var(--text-muted); font-style: italic; }

.ivr-cnode-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ivr-player-spacer { flex: 1; }   /* keeps +/trash right-aligned when a node has no audio player */

/* audio player pill */
.ivr-player {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: #eef0f1; border-radius: 999px; padding: 3px 12px 3px 4px;
}
.ivr-play {
  flex-shrink: 0; width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text); cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.ivr-play svg { width: 18px; height: 18px; }
.ivr-play:hover { color: var(--teal); }
.ivr-track { flex: 1; min-width: 20px; height: 5px; background: #c9ced2; border-radius: 999px; overflow: hidden; }
.ivr-track-fill { width: 0; height: 100%; background: #8a949b; border-radius: 999px; }
.ivr-track-fill.is-playing { width: 0; animation: ivrPlayFill linear forwards; background: var(--teal); }
@keyframes ivrPlayFill { from { width: 0; } to { width: 100%; } }
.ivr-time { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* teal add (+) and trash on the card */
.ivr-cnode-add {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); border: none; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 7px rgba(13,63,68,0.2); transition: transform .12s, background .15s;
}
.ivr-cnode-add:hover { background: #0a3438; transform: scale(1.08); }
.ivr-cnode-add svg { width: 16px; height: 16px; }
.ivr-cnode-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; color: #97a1a8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ivr-cnode-del:hover { color: #d92d20; background: #fdecea; }
.ivr-cnode-del svg { width: 15px; height: 15px; }

/* bottom-centre connection dot → click to add a child sub-node */
.ivr-cnode-dot {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--teal); border: 2px solid #fff; cursor: pointer; padding: 0;
  box-shadow: 0 1px 4px rgba(13,63,68,0.3); transition: transform .12s; z-index: 3;
}
.ivr-cnode-dot:hover { transform: translateX(-50%) scale(1.4); }

/* curved parent → child connectors + "Press N" label */
.ivr-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.ivr-edge-path { fill: none; stroke: var(--teal); stroke-width: 2; opacity: .9; }
.ivr-edge-path.is-draft { stroke-dasharray: 5 4; opacity: .55; }
.ivr-edge-path.is-return { stroke: #e08600; stroke-dasharray: 5 4; opacity: .9; }
.ivr-edge-label {
  position: absolute; transform: translate(-50%, -50%); z-index: 1; pointer-events: none;
  background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;   /* safety net: never let a key list span the canvas */
  box-shadow: 0 2px 7px rgba(13,63,68,0.2);
}
.ivr-edge-label.is-draft { opacity: .6; }
.ivr-edge-label.is-return { background: #e08600; }

/* create (+) floating button */
.ivr-canvas-add {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  background: white; border: 2px dashed #c2cdd0; color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .15s ease;
}
.ivr-canvas-add:hover { border-color: var(--teal); background: #f5fdfd; transform: scale(1.06); box-shadow: 0 4px 14px rgba(13,63,68,0.12); }

/* Tree-view toggle — sits just left of the (+) button */
.ivr-canvas-tree {
  position: absolute; top: 20px; inset-inline-end: 78px; z-index: 4;
  width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--border-2); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13,63,68,0.08); transition: all .15s ease;
}
.ivr-canvas-tree:hover { color: var(--teal); border-color: var(--teal); background: #f5fdfd; }
.ivr-canvas-tree.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Full-call simulate toolbar — top-left of the canvas (view + create). */
.ivr-canvas-sim { position: absolute; top: 20px; inset-inline-start: 20px; z-index: 5; display: flex; gap: 8px; }

/* Return/goto edges live on their OWN svg layer that paints ABOVE the cards, so the
   dashed line is never chopped behind a node. Return labels sit above the cards too. */
.ivr-edges-over { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
/* Small ring marking each end of a return/goto line (on the card's left edge). */
.ivr-edge-anchor { fill: #fff; stroke: #e08600; stroke-width: 2; }
.ivr-edge-label.is-return { z-index: 4; }

/* zoom controls */
.ivr-canvas-zoom {
  position: absolute; bottom: 18px; inset-inline-end: 18px; z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
}
.ivr-zoom-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: white; border: 1px solid var(--border); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13,63,68,0.08); transition: all .15s ease;
}
.ivr-zoom-btn:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }
.ivr-zoom-btn:disabled { opacity: .4; cursor: not-allowed; }
/* recenter / center-view button — sits just above the zoom pair */
.ivr-recenter-btn { margin-bottom: 6px; color: var(--teal); }
.ivr-recenter-btn:hover { background: #f5fdfd; border-color: var(--teal); }
/* full-screen toggle — sits at the very top of the zoom stack, above the centre button */
.ivr-fullscreen-btn { color: var(--teal); }
.ivr-fullscreen-btn:hover { background: #f5fdfd; border-color: var(--teal); }
.ivr-fullscreen-btn.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Full screen: the canvas breaks out of the page and fills the whole viewport (over the app
   chrome, under toasts). Toggling off simply drops these rules, so the canvas snaps back to
   its original in-page position and the tree re-fits. */
.ivr-canvas-step.is-fullscreen {
  position: fixed; inset: 0; z-index: 9000;
  min-height: 0; margin: 0; padding: 16px;
  background: #fff;
}
.ivr-canvas-step.is-fullscreen .ivr-canvas-scroll { border-radius: 12px; }

/* create-node side panel */
.ivr-create-panel {
  width: 340px; flex-shrink: 0; box-sizing: border-box;
  background: white; border: 1px solid var(--border-2); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 15px;
}
/* Node-form wrapper: display:contents keeps the panel's flex layout, while a disabled
   <fieldset> (read-only "More Details") makes every node field non-editable — so the IVR
   tree can't be edited there; only the Variables tab stays interactive. */
.ivr-cpanel-form { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.ivr-cpanel-form[disabled] .tpl-field-input,
.ivr-cpanel-form[disabled] .ivr-voice-trigger,
.ivr-cpanel-form[disabled] .ivr-keypad-key { opacity: .9; cursor: default; }
.ivr-create-panel-head { display: flex; align-items: center; justify-content: space-between; }
.ivr-create-panel-head h4 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.ivr-cpanel-close { background: none; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.ivr-cpanel-close:hover { background: #f3f4f6; color: var(--text); }
.ivr-voice-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ivr-voice-label-row .tpl-field-label { margin-bottom: 0; }
.ivr-voice-reset { background: none; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 5px; line-height: 0; }
.ivr-voice-reset:hover { color: var(--teal); background: #f3f4f6; }
.ivr-voice-row { display: flex; gap: 8px; align-items: stretch; }
.ivr-voice-row .tpl-field-select { flex: 1; min-width: 0; }
.ivr-upload-voice {
  width: 42px; flex-shrink: 0; border-radius: 8px;
  background: var(--teal); color: white; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ivr-upload-voice:hover { filter: brightness(1.12); }

/* Voice picker — Falcon-styled dropdown with two source tabs ("Uploaded by me"
   / "Shared with me"). Trigger matches .tpl-field-select; menu mirrors .ch-menu;
   tabs mirror the global .tab underline style. */
.ivr-voice-picker { position: relative; flex: 1; min-width: 0; }
.ivr-voice-trigger {
  width: 100%; height: 38px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: #fff;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: start;
  transition: border-color .15s, box-shadow .15s;
}
.ivr-voice-trigger:hover { border-color: #c8d5d7; }
.ivr-voice-trigger.is-open { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,63,68,0.1); }
.ivr-voice-trigger-val { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivr-voice-trigger-val.is-ph { color: var(--text-muted); }
.ivr-voice-caret { flex-shrink: 0; color: var(--text-muted); display: inline-flex; transition: transform .15s, color .15s; }
.ivr-voice-trigger.is-open .ivr-voice-caret { transform: rotate(180deg); color: var(--teal); }

.ivr-voice-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
  min-width: 220px; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12); overflow: hidden;
}
/* Voice-picker menu needs room for both tab labels on one line (no wrap). */
.ivr-voice-menu:not(.ivr-select-menu) { min-width: 256px; }
.ivr-voice-tabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--border-2); }
.ivr-voice-tab {
  padding: 11px 2px 9px; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ivr-voice-tab:hover { color: var(--text); }
.ivr-voice-tab.active { color: var(--teal); font-weight: 600; border-bottom-color: var(--teal); }

.ivr-voice-options { padding: 6px; max-height: 196px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ivr-voice-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font-size: 13px; color: var(--text); text-align: start;
  transition: background .12s;
}
.ivr-voice-option:hover { background: var(--bg-hover); }
.ivr-voice-option.is-selected { background: #eef9fa; }
.ivr-voice-option-ic { flex-shrink: 0; display: inline-flex; color: var(--teal); }
.ivr-voice-option-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivr-voice-option-check { flex-shrink: 0; display: inline-flex; color: var(--teal); }
.ivr-voice-none { padding: 16px 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.ivr-select-opt-hint { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* Dynamic segment builder — a node as an ordered list of voice + variable rows.
   Reuses .ivr-seg-idx / .ivr-seg-add-row / .ivr-add-btn / .ivr-empty. */
.ivr-seg-builder { display: flex; flex-direction: column; gap: 8px; }
.ivr-seg-edit { display: flex; align-items: center; gap: 8px; }
.ivr-seg-edit .ivr-voice-picker,
.ivr-seg-edit > .tpl-field-select { flex: 1; min-width: 0; }
.ivr-seg-edit .ivr-seg-idx { flex-shrink: 0; cursor: grab; }
.ivr-seg-edit .ivr-seg-idx:active { cursor: grabbing; }
.ivr-seg-edit.is-dragging { opacity: 0.45; }
.ivr-seg-edit.is-drop { box-shadow: 0 -2px 0 0 var(--teal); }
.ivr-seg-move { display: inline-flex; flex-direction: column; flex-shrink: 0; gap: 1px; }
.ivr-seg-mv { width: 18px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 0; border-radius: 4px; }
.ivr-seg-mv:hover:not(:disabled) { color: var(--teal); background: #eef6f7; }
.ivr-seg-mv:disabled { opacity: 0.3; cursor: not-allowed; }
.ivr-seg-edit .ivr-upload-voice { width: 34px; height: 34px; flex-shrink: 0; }
.ivr-seg-edit .ivr-upload-voice svg { width: 13px; height: 13px; }
.ivr-seg-remove {
  flex-shrink: 0; width: 32px; height: 34px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border-2); color: #97a1a8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ivr-seg-remove svg { width: 13px; height: 13px; }
.ivr-seg-remove:hover { color: #d92d20; background: #fdecea; border-color: #f3c0ba; }

/* "Add new variable" footer inside the variable dropdown (pick existing or add). */
.ivr-select-addnew {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 9px 14px; border: none; border-top: 1px solid var(--border-2);
  background: #fff; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--teal);
  border-radius: 0 0 12px 12px;
}
.ivr-select-addnew:hover { background: #f5fdfd; }
.ivr-select-addnew svg { width: 13px; height: 13px; }

/* Node card: the message rendered as a sequence of chips (voice names + {variables}),
   single line with a soft right-edge fade when it overflows. */
.ivr-cnode-segs {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  min-height: 20px;
}
.ivr-cseg {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.ivr-cseg-voice { background: #eef0f1; color: var(--text); }
.ivr-cseg-voice svg { width: 11px; height: 11px; color: #0d3f44; }
.ivr-cseg-nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Each recording chip is its own play/pause button — hear each sound individually. */
.ivr-cseg-voice.is-playable { cursor: pointer; position: relative; overflow: hidden; padding-inline-start: 5px; transition: background .12s; }
.ivr-cseg-voice.is-playable:hover { background: #e3eaeb; }
.ivr-cseg-voice.is-playing { background: #dbe8e9; }
.ivr-cseg-play { display: inline-flex; align-items: center; color: var(--teal); flex-shrink: 0; }
.ivr-cseg-play svg { width: 13px; height: 13px; color: var(--teal); }
.ivr-cseg-bar { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0; background: var(--teal); border-radius: 999px; animation: ivrPlayFill linear forwards; }
.ivr-cseg-var { background: var(--teal); color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; }
.ivr-cseg-var.is-playable { cursor: pointer; position: relative; overflow: hidden; transition: filter .12s; }
.ivr-cseg-var.is-playable:hover { filter: brightness(1.12); }
.ivr-cseg-var.is-playing { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.ivr-cseg-var .ivr-cseg-bar { background: rgba(255, 255, 255, 0.9); }   /* visible on the teal variable chip */
/* Node-level play/pause: plays the whole message; pause freezes the bar where it reached. */
.ivr-cnode-playall {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 24px; padding: 0 11px 0 8px; border-radius: 999px;
  border: 1px solid var(--border-2, #d8e0e2); background: #fff; color: var(--teal);
  font-size: 11px; font-weight: 700; cursor: pointer; transition: background .12s, color .12s;
}
.ivr-cnode-playall svg { width: 14px; height: 14px; }
.ivr-cnode-playall:hover { background: #eef6f7; }
.ivr-cnode-playall.is-playing { background: var(--teal); color: #fff; border-color: var(--teal); }
.ivr-cnode.is-playing { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(13, 63, 68, 0.12); }
.ivr-cseg-goto { background: #fdeede; color: #b45309; font-weight: 600; }
.ivr-flow-goto { font-size: 12px; color: #b45309; font-weight: 600; }
.ivr-cnode-seg-empty { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Message content" header: label on the left, the add actions on the right. */
.ivr-seg-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.ivr-seg-head .tpl-field-label { margin-bottom: 0; white-space: nowrap; }
/* The 3 add-buttons sit right of the label when the panel is wide enough, and
   wrap to their own right-aligned row when it isn't — so "+ Node" never spills
   out of the panel. */
.ivr-seg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ivr-seg-add-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--teal); border: 1px solid var(--teal);
  font-size: 11.5px; font-weight: 500; color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: filter .12s;
}
.ivr-seg-add-link:hover:not(:disabled) { filter: brightness(1.14); }
.ivr-seg-add-link:disabled {
  background: #d7dde0; border-color: #d7dde0; color: #fff;
  cursor: not-allowed; filter: none;
}
.ivr-seg-add-link svg { width: 11px; height: 11px; }
.ivr-timeout-row { position: relative; }
.ivr-timeout-row .tpl-field-input { padding-inline-end: 40px; }
.ivr-timeout-unit { position: absolute; inset-inline-end: 13px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); pointer-events: none; }

/* DTMF keypad selector inside the Add/Edit-node panel — a phone dialpad (1-9, *, 0, #).
   Shown only for child nodes; the selected key (this node's number) is highlighted in
   teal to match the .ivr-tree-key badge. Keys already used by sibling nodes are disabled. */
.ivr-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 2px;
}
.ivr-keypad-key {
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--border-2);
  background: #fff;
  color: var(--text);
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s, transform .07s;
}
.ivr-keypad-key:hover:not(:disabled):not(.is-selected) {
  border-color: var(--teal); background: #f5fdfd; color: var(--teal);
}
.ivr-keypad-key:active:not(:disabled) { transform: scale(0.95); }
.ivr-keypad-key.is-selected {
  background: var(--teal); color: #fff; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,63,68,0.16);
}
.ivr-keypad-key.is-taken,
.ivr-keypad-key:disabled {
  opacity: 0.4; cursor: not-allowed;
  background: #f3f5f6; color: var(--text-muted);
}
.ivr-create-panel-foot { margin-top: auto; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.ivr-cpanel-save {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px; border-radius: 8px;
  background: var(--teal); color: white; border: 1px solid transparent;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: filter .15s, opacity .15s;
}
.ivr-cpanel-save:hover:not(:disabled) { filter: brightness(1.12); }
.ivr-cpanel-save:disabled { opacity: .5; cursor: not-allowed; }
.ivr-cpanel-del {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px; border-radius: 8px;
  background: white; color: #d4351c; border: 1px solid #f0c9c2;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.ivr-cpanel-del:hover { background: #fdf3f1; }

/* === Step 2: builder layout === */
.ivr-builder {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 16px;
  align-items: stretch;
}
.ivr-builder-left,
.ivr-builder-right {
  background: white;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
}
.ivr-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  background: #fafbfb;
}
.ivr-panel-head h4 { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--text); }
.ivr-type-chip {
  font-size: 11px; font-weight: 600;
  background: #eef6f7; color: #0d3f44;
  padding: 3px 9px; border-radius: 999px;
}
.ivr-node-dur { font-size: 11.5px; color: var(--text-muted); }

.ivr-tree-scroll { padding: 10px 8px; max-height: 520px; overflow-y: auto; }
.ivr-tree-row-wrap { padding-inline-start: calc(var(--depth, 0) * 18px); }
.ivr-tree-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.ivr-tree-row:hover { background: #f5f7f7; }
.ivr-tree-row.selected { background: #eef9fa; box-shadow: inset 0 0 0 1.5px var(--teal); }
.ivr-tree-twist { display: inline-flex; width: 12px; color: var(--text-muted); }
.ivr-tree-twist .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.ivr-tree-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--teal); color: white;
  border-radius: 6px; font-size: 11px; font-weight: 700;
}
.ivr-tree-label { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; }
.ivr-tree-meta  { font-size: 10.5px; color: var(--text-muted); }
.ivr-tree-actions { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.ivr-tree-row:hover .ivr-tree-actions,
.ivr-tree-row.selected .ivr-tree-actions { opacity: 1; }

.ivr-icon-btn {
  width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.ivr-icon-btn:hover { background: #eef6f7; color: var(--text); }
.ivr-icon-btn.danger:hover { background: #fef2f2; color: #b91c1c; }

/* === Step 2: right panel === */
.ivr-builder-right { padding: 0; }
.ivr-builder-right .tpl-field { margin-bottom: 0; }
.ivr-grid-2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-2);
}
@media (max-width: 980px) {
  .ivr-grid-2 { grid-template-columns: 1fr; }
}
.ivr-builder { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
@media (max-width: 980px) {
  .ivr-builder { grid-template-columns: 1fr; }
}
.ivr-section-divider {
  padding: 10px 14px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.ivr-seg-list { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ivr-empty { font-size: 12px; color: var(--text-muted); padding: 14px; text-align: center; border: 1px dashed var(--border-2); border-radius: 8px; }
.ivr-seg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f7faf9;
  border: 1px solid var(--border-2);
}
.ivr-seg-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white; border: 1px solid var(--border-2);
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.ivr-seg-ic { display: inline-flex; color: #0d3f44; }
.ivr-seg-name { flex: 1; font-size: 12.5px; color: var(--text); }
.ivr-seg-dur  { font-size: 11px; color: var(--text-muted); }
.ivr-seg-var-pill {
  font-size: 11px; font-weight: 700;
  background: var(--teal); color: white;
  padding: 3px 8px; border-radius: 6px;
}
.ivr-seg-add-row { display: flex; gap: 8px; padding-top: 4px; }
.ivr-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; }

.ivr-terminal-row { padding: 0 14px 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.ivr-term-pill {
  padding: 6px 12px; border-radius: 999px;
  background: white; border: 1px solid var(--border-2);
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
}
.ivr-term-pill:hover { background: #f5f7f7; }
.ivr-term-pill.active { background: #0d3f44; color: white; border-color: #0d3f44; }

.ivr-var-list { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ivr-var-row { display: grid; grid-template-columns: 140px 80px 1fr 28px; gap: 8px; align-items: center; }
.ivr-var-key  { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #0d3f44; font-weight: 600; }
.ivr-var-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* === Variable modal === */
.ivr-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.ivr-modal {
  width: 480px; max-width: 92vw;
  background: white; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: visible;   /* let the Falcon dropdown (IvrSelect) menu escape the modal box */
}
.ivr-modal-head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-2);
}
.ivr-modal-head h4 { font-size: 14px; font-weight: 600; margin: 0; color: var(--text); }
.ivr-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ivr-modal-foot {
  padding: 12px 18px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--border-2);
  background: #fafbfb;
  border-radius: 0 0 14px 14px;   /* modal is now overflow:visible — round the foot to match */
}
.ivr-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }

/* dynamic panel: "+" section divider (between node name and the variable read) */
.ivr-dyn-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.ivr-dyn-add {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal); border: none; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 7px rgba(13,63,68,0.2); transition: background .15s, transform .12s;
}
.ivr-dyn-add:hover { background: #0a3438; transform: scale(1.06); }
.ivr-dyn-line { flex: 1; height: 1px; background: var(--border-2); }

/* confirm-delete modal */
.ivr-confirm { width: 420px; }
.ivr-confirm-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ivr-confirm-text strong { color: var(--text); font-weight: 700; }
.ivr-btn-danger { background: #d92d20; color: #fff; border: 1px solid #d92d20; }
.ivr-btn-danger:hover { background: #b42318; border-color: #b42318; }

/* === Step 3: submit summary === */
.ivr-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  background: white; border: 1px solid var(--border-2);
  border-radius: 12px; padding: 14px 18px;
  margin-top: 12px;
}
.ivr-summary-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; }
.ivr-summary-item .lbl { font-size: 12px; color: var(--text-muted); }
.ivr-summary-item .val { font-size: 13px; color: var(--text); font-weight: 500; }

/* === IVR review (Checker details view — replaces the phone simulator) === */
.ivr-rev { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 10px; max-height: 72vh; overflow-y: auto; }
.ivr-rev-empty { padding: 30px 16px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.ivr-rev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.ivr-rev-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ivr-rev-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; }
.ivr-rev-badge.stat { background: #eef6f7; color: #0d3f44; }
.ivr-rev-badge.dyn { background: var(--teal); color: #fff; }
.ivr-rev-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-muted); }
.ivr-rev-stats strong { color: var(--text); font-weight: 700; }

/* tabs: Information · Levels · Variables */
.ivr-tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--border-2); flex-shrink: 0; }
.ivr-tab { flex: 1 1 auto; min-width: 0; border: none; background: none; cursor: pointer; padding: 8px 6px 9px; font-size: 12px; font-weight: 700; color: #7a888a; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: color .12s, border-color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivr-tab:hover { color: var(--teal); }
.ivr-tab.is-active { color: var(--teal); border-bottom-color: var(--teal); }
/* Tab panels fill the remaining height under the pinned title+tabs and scroll on their own. */
.ivr-tabpanel { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Levels panel itself does NOT scroll — its toolbar pins and the tree (.ivr-levels-scroll) scrolls. */
.ivr-tabpanel.ivr-tab-levels { overflow: hidden; }

/* Information tab */
.ivr-info-grid { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.ivr-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 12.5px; }
.ivr-info-row + .ivr-info-row { border-top: 1px solid var(--border-2); }
.ivr-info-k { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.ivr-info-v { color: var(--text); font-weight: 600; text-align: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-info-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* --- Playable level-by-level flow (players + variables + keypad options) --- */
.ivr-flow { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 10px; max-height: 78vh; overflow: hidden; }
/* ==== Template Details · IVR Voice Flow — coordinated review (collapsible tree + audio preview) ==== */
/* One coordinated palette: teal = brand/interactive + dynamic data · gray = neutral structure + meta · amber = redirect. */
.ivr-flow { --ivf-muted: #6f7e80; --ivf-soft: #eaf3f3; --ivf-line: #d8e5e5; --ivf-rec: #f5f8f8; --ivf-active: #d9ece9; --ivf-amber: #b45309; }

/* toolbar: simulate full call + expand / collapse */
.ivr-flow-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ivr-sim-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 29px; padding: 0 14px;
  border: none; border-radius: 9px; background: var(--teal); color: #fff;
  font-size: 11px; font-weight: 600; cursor: pointer; transition: filter .12s, transform .1s;
}
.ivr-sim-btn svg { width: 15px; height: 15px; }
.ivr-sim-btn:hover { filter: brightness(1.1); }
.ivr-sim-btn:active { transform: scale(0.98); }
.ivr-sim-btn.is-playing { background: #b23b2e; }
/* Dedicated Stop, shown only while playing — the main button toggles Pause/Resume. */
.ivr-sim-stop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 29px; height: 29px; flex-shrink: 0; padding: 0;
  border: 1px solid #e7b3ac; border-radius: 9px; background: #fff; color: #b23b2e;
  cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
}
.ivr-sim-stop svg { width: 15px; height: 15px; }
.ivr-sim-stop:hover { background: #fbecea; }
.ivr-sim-stop:active { transform: scale(0.96); }
.ivr-sim-now { min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-flow-tools { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; }
.ivr-flow-tool { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ivf-line); background: #fff; color: #45595b; border-radius: 7px; height: 28px; padding: 0 10px 0 8px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.ivr-flow-tool svg { width: 13px; height: 13px; color: var(--teal); }
.ivr-flow-tool:hover { background: var(--ivf-soft); color: var(--teal); }

/* tree structure: branches + connector rail (indent caps after a few levels for deep trees) */
/* The tree keeps its natural content width; the wrapper scrolls horizontally so nothing is hidden. */
.ivr-levels-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 14px; padding-top: 4px; margin-inline: -2px; padding-inline: 2px; }
/* Cards fill the panel as one regular, left-aligned column (uniform width per level); long
   content truncates in place — use the resize handle or the Variables tab to see it in full. */
.ivr-flow-list { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ivr-vbranch { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
/* Connector rail — same behaviour as the Hierarchy tree: a vertical trunk with an
   elbow into each child card's header. Earlier children keep the trunk running (├);
   the last child's trunk stops at its own elbow (└), so each level reads clearly. */
.ivr-vkids { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; margin-inline-start: 12px; padding-inline-start: 18px; }
.ivr-vkids > .ivr-vbranch { position: relative; }
/* vertical trunk segment (centred in the gutter, left of each card) */
.ivr-vkids > .ivr-vbranch::before {
  content: ''; position: absolute; inset-inline-start: -18px; top: -10px; bottom: 0;
  width: 1.5px; background: var(--ivf-line);
}
/* horizontal elbow from the trunk into the card header row */
.ivr-vkids > .ivr-vbranch::after {
  content: ''; position: absolute; inset-inline-start: -18px; top: 23px;
  inline-size: 18px; height: 1.5px; background: var(--ivf-line);
}
/* first child reaches up to the parent card; last child's trunk stops at its elbow (└) */
.ivr-vkids > .ivr-vbranch:first-child::before { top: -20px; }
.ivr-vkids > .ivr-vbranch:last-child::before { bottom: auto; height: 33px; }
.ivr-vkids > .ivr-vbranch:first-child:last-child::before { top: -20px; height: 43px; }
/* highlight the rail leading to the currently-playing (active) node, like Hierarchy's on-path */
.ivr-vkids > .ivr-vbranch:has(> .ivr-vnode.is-active)::before,
.ivr-vkids > .ivr-vbranch:has(> .ivr-vnode.is-active)::after { background: var(--teal); }

/* node card */
.ivr-vnode {
  position: relative; /* positioning context for the orange jump arrow in the left gutter */
  background: #fff; border: 1px solid var(--border-2); border-radius: 14px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(13, 63, 68, 0.05); transition: border-color .15s, box-shadow .15s;
  /* Readability floor: cards fill the panel when there's room, but never shrink below this —
     deep levels keep their width and the tree scrolls horizontally instead of squishing. */
  min-width: 240px;
}
.ivr-vnode.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(13, 63, 68, 0.14), 0 5px 16px rgba(13, 63, 68, 0.12); }

/* header: twist · tag · name · level */
.ivr-vnode-head { display: flex; align-items: center; gap: 0px; }
.ivr-vnode-twist { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: #7f9092; cursor: pointer; border-radius: 6px; padding: 0; margin-inline-end: 8px; transition: background .12s, color .12s; }
.ivr-vnode-twist:hover { background: var(--ivf-soft); color: var(--teal); }
.ivr-vnode-twist svg { transition: transform .16s ease; transform: rotate(90deg); }
.ivr-vnode-twist.is-collapsed svg { transform: rotate(0deg); }
.ivr-vnode-twist.is-leaf { cursor: default; width: 0px; height: 0px; }
.ivr-vnode-tag {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
}
.ivr-vnode-tag.is-start { background: var(--ivf-soft); color: var(--teal); }
.ivr-vnode-tag.is-start svg { width: 14px; height: 14px; }
.ivr-vnode-tag.is-press { background: var(--teal); color: #fff; gap: 7px; padding-inline-start: 2px; margin-inline-end: 10px; }
.ivr-vnode-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 17px;
  background: #fff; color: var(--teal); font-size: 11px; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.16);
}
.ivr-vnode-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ivr-vnode-lvl { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #5c6c6e; background: #eef1f2; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.02em; }

/* caption + play-whole-message */
.ivr-vnode-caption { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ivr-vnode-caption-t { min-width: 0; font-size: 10px; font-weight: 500; color: var(--ivf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Routing pill ("↻ Jump to / Return to <target>") sits at the start; Play is pushed to the end. */
.ivr-vnode-jump { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 9px; border-radius: 999px; background: #fdeede; font-size: 11px; line-height: 1; }
.ivr-vnode-jump-ic { flex-shrink: 0; display: inline-flex; color: #c8762b; }
.ivr-vnode-jump-ic svg { width: 15px; height: 15px; }
.ivr-vnode-jump-lbl { flex-shrink: 0; color: #c8762b; font-weight: 500; }
.ivr-vnode-jump-tgt { min-width: 0; color: #4a3517; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Orange "jump" connectors — an SVG overlay routes each goto from its source card, up/down the
   left gutter, into the target card, with an arrowhead pointing the way (orange). */
.ivr-jump-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.ivr-jump-line  { fill: none; stroke: #db7f2c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-jump-arrow { fill: none; stroke: #db7f2c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivr-vnode-playmsg { flex-shrink: 0; margin-inline-start: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ivf-line); background: #fff; color: var(--teal); border-radius: 999px; height: 24px; padding: 0 11px 0 8px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .12s; }
.ivr-vnode-playmsg svg { width: 13px; height: 13px; }
.ivr-vnode-playmsg:hover { background: var(--ivf-soft); }

/* steps */
.ivr-vsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ivr-vstep { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 9px; border-radius: 9px; }
.ivr-vstep-no { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: #e9edee; font-size: 10.5px; font-weight: 700; color: #5d6e70; }
.ivr-vstep.is-rec, .ivr-vstep.is-var { background: var(--ivf-rec); }
.ivr-vstep.is-playing { background: var(--ivf-active); }
.ivr-vstep-play { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; cursor: pointer; padding: 0; color: var(--teal); border-radius: 50%; transition: background .12s, transform .1s; }
.ivr-vstep-play:hover { background: #d3e3e3; }
.ivr-vstep-play:active { transform: scale(0.9); }
.ivr-vstep-play svg { width: 20px; height: 20px; }
.ivr-vstep-name { flex: 1; min-width: 0; font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-vstep-dur { flex-shrink: 0; font-size: 11px; color: var(--ivf-muted); font-variant-numeric: tabular-nums; }
.ivr-vstep-bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 2.5px; width: 0; background: var(--teal); border-radius: 999px; animation: ivrPlayFill linear forwards; }

/* variable step: a coordinated teal "data tag" (clearly not a button) + its value or type */
.ivr-vstep-var { flex-shrink: 1; min-width: 34px; max-width: 42%; box-sizing: border-box; display: inline-block; height: 22px; line-height: 21px; padding: 0 8px; border-radius: 6px; background: #d7e8e8; color: #0d3f44; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-vstep-val { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 500; color: var(--teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivr-vstep-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ivf-muted); }

/* (goto is now rendered as .ivr-vnode-jump in the caption row, not as a step) */
.ivr-vnode-empty { font-size: 11.5px; color: var(--ivf-muted); font-style: italic; padding-inline-start: 2px; }

/* footer: keypad-option toggle (button) or terminal action */
.ivr-vnode-foot { display: flex; align-items: center; }
.ivr-vnode-opts { width: 100%; justify-content: space-between; border: none; background: none; cursor: pointer; padding: 2px 1px; gap: 8px; }
.ivr-vnode-opts-n { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--teal); }
.ivr-vnode-opts-x { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--ivf-muted); }
.ivr-vnode-opts-x svg { width: 13px; height: 13px; transition: transform .16s ease; transform: rotate(90deg); }
.ivr-vnode-opts.is-collapsed .ivr-vnode-opts-x svg { transform: rotate(0deg); }
.ivr-vnode-opts:hover .ivr-vnode-opts-x { color: var(--teal); }
.ivr-vnode-term { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #56686a; font-weight: 500; }

/* variables panel — editable values used in the preview playback */
.ivr-rev-vars { border-top: 1px solid var(--border-2); padding-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.ivr-rev-vars-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ivf-muted); }
.ivr-rev-vars-hint { font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #9aa6a7; }
/* Stacked rows: key + type on top, full-width input below — keeps everything readable and aligned in a narrow panel. */
.ivr-rev-var { display: flex; flex-direction: column; gap: 5px; }
.ivr-rev-var-top { display: flex; align-items: center; gap: 8px; }
.ivr-rev-var-key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--teal); font-weight: 600; font-size: 12px; }
.ivr-rev-var-type { flex-shrink: 0; margin-inline-start: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ivf-muted); background: #eef1f1; padding: 2px 6px; border-radius: 5px; }
.ivr-rev-var-input { width: 100%; box-sizing: border-box; height: 32px; border: 1px solid var(--border-2); border-radius: 8px; padding: 0 11px; font-size: 12.5px; color: var(--text); background: #fff; transition: border-color .12s, box-shadow .12s; }
.ivr-rev-var-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(13, 63, 68, 0.12); }
.ivr-rev-var-input::placeholder { color: #aab4b5; }
/* Edit-node panel: two tabs (the node form | the flow's variable values) */
.ivr-cpanel-tabs { display: flex; gap: 2px; margin: 2px 0 14px; border-bottom: 1px solid var(--border-2); }
.ivr-cpanel-tab { appearance: none; border: none; background: none; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #6f7e80; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; }
.ivr-cpanel-tab:hover { color: var(--teal); }
.ivr-cpanel-tab.is-active { color: var(--teal); border-bottom-color: var(--teal); }
.ivr-cpanel-vars { --ivf-muted: #6f7e80; display: flex; flex-direction: column; gap: 11px; }
.ivr-cpanel-var-val { min-height: 32px; display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; color: var(--text); background: #f6f8f8; word-break: break-word; }

/* === Right-rail phone preview === */
.ivr-phone-wrap { display: flex; justify-content: center; padding: 14px; }
.ivr-phone-frame {
  width: 280px;
  background: #0d1b1d;
  border-radius: 26px;
  padding: 14px 12px 16px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 10px;
}
.ivr-phone-notch {
  width: 80px; height: 6px; border-radius: 6px;
  background: #06090a; margin: 0 auto 4px;
}
.ivr-phone-screen {
  background: linear-gradient(180deg, #0a3338 0%, #0d3f44 100%);
  border-radius: 14px;
  padding: 12px;
  color: white;
  min-height: 200px;
  display: flex; flex-direction: column; gap: 10px;
}
.ivr-phone-empty-text { font-size: 12px; opacity: 0.7; text-align: center; padding: 40px 8px; }
.ivr-phone-status { font-size: 10.5px; opacity: 0.7; text-align: center; }
.ivr-phone-node {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.08);
  padding: 10px; border-radius: 10px;
}
.ivr-phone-node-key {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--teal); color: #0d3f44;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.ivr-phone-node-label { flex: 1; font-size: 12.5px; font-weight: 500; }
.ivr-phone-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.ivr-phone-dot.playing { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); animation: ivrPulse 1.1s infinite ease-out; }
@keyframes ivrPulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
.ivr-phone-transcript { font-size: 11.5px; opacity: 0.92; min-height: 30px; display: flex; flex-direction: column; gap: 3px; }
.ivr-phone-line { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.ivr-phone-choices { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ivr-phone-choice {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
}
.ivr-phone-choice .k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(255,255,255,0.15); font-weight: 700; font-size: 10.5px;
}
.ivr-phone-choice-empty { font-size: 10.5px; opacity: 0.6; text-align: center; padding: 6px; }

.ivr-phone-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.ivr-key {
  background: rgba(255,255,255,0.08);
  color: white;
  border-radius: 10px;
  height: 36px;
  font-size: 14px; font-weight: 600;
  border: 0; cursor: pointer;
  transition: background .12s, transform .08s;
}
.ivr-key:hover  { background: rgba(255,255,255,0.18); }
.ivr-key:active { background: var(--teal); color: #0d3f44; transform: scale(0.96); }

.ivr-phone-controls { display: flex; gap: 6px; padding-top: 2px; }
.ivr-ctrl {
  flex: 1; padding: 8px; border-radius: 10px;
  background: rgba(255,255,255,0.08); color: white;
  font-size: 11.5px; font-weight: 600;
  border: 0; cursor: pointer;
}
.ivr-ctrl.primary { background: var(--teal); color: #0d3f44; }
.ivr-ctrl:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Tree (outline) view — toggled from the stage, overlays the canvas =====
   NOTE: uses an `ivr-tv-*` prefix on purpose — `.ivr-tree-*` is already taken by a
   different (legacy) tree component, so reusing it would collide. */
.ivr-tv {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: #fafbfc; border-radius: 14px;
}
.ivr-tv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-2);
  background: #fafbfc; border-radius: 14px 14px 0 0; flex-shrink: 0;
}
.ivr-tv-title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--text); }
.ivr-tv-title svg { color: var(--teal); }
.ivr-tv-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-2); background: #fff; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s;
}
.ivr-tv-close:hover { background: #f3f4f6; color: var(--text); }
.ivr-tv-body { flex: 1; overflow-y: auto; padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 10px; }
.ivr-tv-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 40px 0; }
.ivr-tv-row { display: flex; }
.ivr-tv-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-2); border-radius: 14px;
  padding: 11px 14px; transition: border-color .12s, box-shadow .12s;
}
.ivr-tv-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(13,63,68,0.10); }
.ivr-tv-chev {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); border-radius: 5px;
}
.ivr-tv-chev:hover:not(.is-leaf) { background: #eef2f3; color: var(--teal); }
.ivr-tv-chev.is-leaf { visibility: hidden; cursor: default; }
.ivr-tv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.ivr-tv-titlerow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ivr-tv-name { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivr-tv-key { font-size: 12.5px; font-weight: 500; color: #8a93a3; }
/* Node content (the same chips the canvas card shows) inside each list row */
.ivr-tv-segs { margin-top: 1px; }
.ivr-tv-card .ivr-tv-segs.ivr-cnode-segs { min-height: 0; }
.ivr-tv-del {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: #9aa3b0; border-radius: 8px;
}
.ivr-tv-del:hover { background: #fdecec; color: #d94141; }