/* Voice Service — reuses .templates-page / .content-panel / .content-body /
   .node-header / .tabs-bar / .table-panel / .users-table / .status-badge /
   .row-menu / .ac-page (wizard) chrome. Only Voice-specific bits live here. */

/* Full-width page (no org-tree rail) — mirrors .cg-page.no-tree. */
.templates-page.vs-service-page.no-tree { grid-template-columns: minmax(0, 1fr); }
/* Falcon view: accounts rail + content. */
.templates-page.vs-service-page.with-tree { grid-template-columns: var(--clients-w) minmax(0, 1fr); }

/* Tighten the gap between the stepper and the first field in the Voice
   wizards (New Voice Record / New Voice Account). Dropping the shared
   .ac-stepper bottom margin (was 20px) removes half the ~40px void; the
   .ac-card-body keeps its 20px top padding. Scoped to .vs-page so the
   other wizards keep their default spacing. */
.vs-page .ac-stepper { margin-bottom: 0; }
.vs-page .ac-card-body { padding-top: 20px; }

/* ===== Falcon accounts rail (clients only, no sub-nodes) ===== */
.vs-clients-rail { padding: 12px 0; }
.vs-rail-head { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 6px 16px 10px; }
.vs-rail-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.vs-rail-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: start; width: 100%; font-size: 13.5px; color: var(--text); }
.vs-rail-item:hover { background: #f1f5f4; }
.vs-rail-item.on { background: #e7f0ee; font-weight: 600; }
.vs-rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Account edit (details screen with editable phone numbers) ===== */
.vs-edit-numbers-field .lab { display: block; margin-bottom: 6px; }
.vs-edit-hint { font-weight: 400; color: var(--text-muted); font-size: 11.5px; margin-inline-start: 8px; }
.vs-edit-numbers { margin-top: 10px; }

/* Tabs sit at the top of the content panel (above the node-header), like Org Hierarchy. */
.vs-tabs { margin: 0; }
/* Editable "Shared with" on the record details screen (Share action) — template-style multi-select. */
.vr-d-share-edit .lab { display: block; margin-bottom: 6px; }
.vr-d-share-edit .lab .opt { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.vr-d-share-edit .tpl-share-multi-wrap { max-width: 420px; }

/* ===== Accounts grid ===== */
.vs-cell-name { font-weight: 600; color: var(--text); }
.vs-accounts-table td.muted { color: var(--text-muted); }
/* Provider shown as a plain left-aligned value (no chip background). */
.vs-provider-tag { display: inline-block; font-size: 13px; padding: 0; background: none; white-space: nowrap; }
.vs-provider-tag.t2  { color: #0d7a72; }
.vs-provider-tag.byo { color: #3b82f6; }
/* Phone-numbers grid cell: keep the chips (+ the "+N" badge) on ONE line. */
.vs-num-cell { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.vs-num-cell .vs-num-chip { padding: 3px 9px; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
.vs-num-cell .vs-num-more { flex-shrink: 0; }
.vs-num-cell .vs-num-empty { color: var(--text-muted); }
.vs-num-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; }
/* Overflow indicator in the grid Phone-numbers cell — a dark circular count badge that
   opens a popup listing every number when clicked. */
.vs-num-more { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border: none; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; transition: filter .12s, box-shadow .12s; }
.vs-num-more:hover, .vs-num-more.is-open { filter: brightness(1.14); box-shadow: 0 0 0 3px rgba(13,63,68,.14); }
.vs-num-pop { z-index: 100; min-width: 200px; max-width: 290px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 8px; animation: vsNumPop .14s ease; }
@keyframes vsNumPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vs-num-pop-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 4px 8px 8px; }
.vs-num-pop-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; }
.vs-num-pop-items { display: flex; flex-direction: column; gap: 2px; }
.vs-num-pop-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-num-pop-item:hover { background: var(--bg-hover); }
.vs-num-pop-item > svg { color: var(--text-muted); flex-shrink: 0; }
.vs-empty-row { text-align: center; color: var(--text-muted); padding: 32px; font-size: 13px; }

/* ===== Number chips (shared by grid / details / wizard) ===== */
.vs-num-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #eceff1; border-radius: 999px; font-size: 12.5px; color: var(--text); }
.vs-num-chip.lg { padding: 7px 12px; font-size: 13px; background: #f4f6f7; border: 1px solid var(--border); }
.vs-num-chip svg { color: var(--text-muted); flex-shrink: 0; }
.vs-num-val { font-variant-numeric: tabular-nums; }
.vs-num-pending { font-size: 10.5px; font-weight: 600; color: #a85a00; background: var(--orange-bg); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.vs-num-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; }
.vs-num-x:hover { background: #e2e6e8; color: var(--text); }
.vs-num-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Details card ===== */
/* Allow the provider / phone-number / share dropdowns to overflow the card
   instead of being clipped by the shared card's overflow:hidden.
   Compound selector to beat .tpl-details-card (loaded later in the cascade). */
.tpl-details-card.vs-details-card { margin-top: 2px; overflow: visible; }

/* ===== Combined Account Details step — name / provider / numbers blocks ===== */
.vs-account-step .vs-acc-block { margin-top: 26px; }
.vs-account-step .vs-acc-block > .ac-label { display: block; margin-bottom: 10px; }

/* ===== Wizard — SIP provider cards (same design as the Voice-Record source cards) =====
   Soft gray container holding centered choice cards: circular tinted icon, title, description,
   with a teal-border selection (no radio). */
.vs-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px; background: #f6f8f9; border-radius: 12px; max-width: 100%; }
.vs-provider-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 26px 18px; background: #fff; border: 2px solid transparent; border-radius: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; box-shadow: 0 1px 2px rgba(13,63,68,.04); }
.vs-provider-card:hover { border-color: #cdd9d8; box-shadow: 0 4px 14px rgba(13,63,68,.07); }
.vs-provider-card.on { border-color: var(--teal); box-shadow: 0 4px 16px rgba(13,63,68,.12); }
.vs-provider-ic { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--teal); }
.vs-provider-ic.teal { background: #e2f3f1; color: #0d7a72; }
.vs-provider-ic.blue { background: #e8f1fe; color: #3b82f6; }
.vs-provider-ttl { font-size: 15px; font-weight: 700; color: var(--text); }
.vs-provider-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; max-width: 320px; }

/* ===== Wizard — phone numbers step ===== */
.vs-num-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vs-num-head-ttl { font-size: 14px; font-weight: 600; color: var(--text); }
.vs-t2-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 18px; }
.vs-pool-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; color: var(--text); text-align: left; }
.vs-pool-item:hover { border-color: #b9c6c4; }
.vs-pool-item.on { border-color: var(--teal); background: #f4f8f7; }
.vs-pool-cb { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.vs-pool-item.on .vs-pool-cb { background: var(--teal); border-color: var(--teal); }
.vs-pool-item > svg { color: var(--text-muted); flex-shrink: 0; }
.vs-pool-num { font-variant-numeric: tabular-nums; }
.vs-num-add { display: flex; align-items: center; gap: 10px; max-width: 560px; margin-bottom: 18px; }
.vs-num-add .ac-input { flex: 1; }
.vs-num-add .btn { flex-shrink: 0; height: 44px; }
/* Country-code phone field (reused Add User PhoneInput) inside the add-number row. */
.vs-num-phone { flex: 1; min-width: 0; }
.vs-num-phone .otp-phone-wrap { width: 100%; }
.vs-num-selected { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-num-selected .vs-num-empty { font-size: 13px; color: var(--text-muted); }

/* ===== Wizard — review step ===== */
.vs-review { display: flex; flex-direction: column; gap: 22px; }
.vs-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; max-width: 760px; }
.vs-review-field { display: flex; flex-direction: column; gap: 6px; }
.vs-review-field label, .vs-review-numbers label { font-size: 12px; color: var(--teal); font-weight: 500; }
.vs-review-field .val { font-size: 14px; color: var(--text); font-weight: 500; }
.vs-review-numbers { display: flex; flex-direction: column; gap: 8px; }

/* ============================ Voice records (tab 2 & 3) ============================ */

/* ===== Audio preview player — a small waveform that fills as it plays (WhatsApp-style) ===== */
.vr-player { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; user-select: none; width: fit-content; }
.vr-player:hover { border-color: #b9c6c4; }
.vr-player-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vr-player.on .vr-player-btn { background: var(--teal-dark, #0a3f44); }
.vr-player .vr-wave { width: 150px; min-width: 150px; height: 24px; flex: 0 0 auto; }
.vr-player .vr-wave-bar { background: #c2cdcc; }
.vr-player-time { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; margin-inline-start: 2px; }

/* ===== Records grid bits — Source shown as a plain left-aligned value (no chip background) ===== */
.vr-src-tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 0; background: none; white-space: nowrap; }
/* Colours match the source picker cards: Upload = amber · Convert Text = blue · Record = teal. */
.vr-src-tag.upload { color: #d68a08; }
.vr-src-tag.tts    { color: #3b82f6; }
.vr-src-tag.record { color: #0d7a72; }
.vr-lock-tag { display: inline-flex; vertical-align: middle; margin-inline-start: 6px; color: var(--text-muted); }
.vs-records-table th, .vs-records-table td { white-space: nowrap; }
.vs-records-table td { vertical-align: middle; }
.row-menu-item.cg-danger-item.is-locked { color: var(--text-muted); cursor: not-allowed; opacity: .7; }
.row-menu-item.cg-danger-item.is-locked svg { color: var(--text-muted); }
.row-menu-item.cg-danger-item.is-locked:hover { background: transparent; color: var(--text-muted); }

/* Account grid keeps each column on one line (audit columns scroll horizontally). */
.vs-accounts-table th, .vs-accounts-table td { white-space: nowrap; }
.vs-accounts-table td { vertical-align: middle; }
.vs-cell-who { color: var(--text); }

/* Row action menu — flip upward when a bottom row would clip it against the scroll container. */
.row-menu.up { top: auto; bottom: 30px; }

/* BYO number entry with a country code (shared PhoneInput) next to the Add button. */
.vs-num-add-cc .otp-phone-wrap { flex: 1; min-width: 0; }
.vs-edit-num-error { display: block; margin-top: 10px; }

/* ===== Share editor (chips + add-users dropdown) ===== */
.vr-share-edit { display: flex; flex-direction: column; gap: 12px; }
.vr-share-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 30px; }
.vr-share-empty { font-size: 13px; color: var(--text-muted); }
.vr-share-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; background: #eceff1; border-radius: 999px; font-size: 13px; color: var(--text); }
.vr-share-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; }
.vr-share-chip .x:hover { background: #d8dde0; color: var(--text); }
.vr-share-combo { position: relative; align-self: flex-start; }
.vr-share-add { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px dashed var(--border); border-radius: 8px; background: #fff; color: var(--teal); font-size: 13px; font-weight: 500; cursor: pointer; }
.vr-share-add:hover { border-color: var(--teal); background: #f4f8f7; }
.vr-share-pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; width: 260px; max-height: 280px; overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.vr-share-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.vr-share-search input { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; }
.vr-share-list { overflow-y: auto; padding: 6px; }
.vr-share-opt { display: block; width: 100%; text-align: start; padding: 9px 12px; border: none; background: transparent; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.vr-share-opt:hover { background: #104C54; color: #fff; }
.vr-share-noopt { padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* ===== Modals (share + delete confirm) ===== */
.vr-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15,30,33,.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.vr-modal { width: 480px; max-width: 100%; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.22); overflow: hidden; }
.vr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.vr-modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.vr-modal-x { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.vr-modal-x:hover { background: #f0f2f3; color: var(--text); }
.vr-modal-sub { padding: 4px 20px 0; font-size: 12.5px; color: var(--text-muted); }
.vr-modal-body { padding: 18px 20px; }
.vr-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }
.vr-confirm { width: 380px; max-width: 100%; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.22); padding: 26px 24px 22px; text-align: center; }
.vr-confirm-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--red-bg); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vr-confirm-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.vr-confirm-body { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.vr-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.vr-confirm-del { background: var(--red); color: #fff; border: none; }
.vr-confirm-del:hover { background: #c5302d; }

/* ===== Create record wizard — source step ===== */
.vr-src-label { display: block; margin-bottom: 12px; }
.vr-src-section { margin-top: 8px; }

/* Source picker — three large choice cards inside a soft container. */
.vr-src-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; background: #f6f8f9; border-radius: 12px; max-width: 100%; }
.vr-src-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 26px 18px; background: #fff; border: 2px solid transparent; border-radius: 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; box-shadow: 0 1px 2px rgba(13,63,68,.04); }
.vr-src-card:hover { border-color: #cdd9d8; box-shadow: 0 4px 14px rgba(13,63,68,.07); }
.vr-src-card.on { border-color: var(--teal); box-shadow: 0 4px 16px rgba(13,63,68,.12); }
.vr-src-card-ic { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.vr-src-card-ic.amber { background: #fdf3e2; }
.vr-src-card-ic.blue  { background: #e8f1fe; }
.vr-src-card-ic.teal  { background: #e2f3f1; }
.vr-src-card-title { font-size: 13px; font-weight: 700; color: var(--text); }
.vr-src-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.45; max-width: 210px; }

/* Source panel — one soft gray rectangle that holds whichever source's controls. */
.vr-src-box { margin-top: 18px; padding: 18px; background: #f6f8f9; border-radius: 18px; max-width: 100%; }

/* Upload — white drop card; once a file is in, the SAME box shows its waveform player. */
.vr-upload-drop { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.vr-upload-left, .vr-upload-fileinfo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vr-upload-ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vr-upload-ic.sm { width: 40px; height: 40px; }
.vr-upload-meta { display: flex; flex-direction: column; min-width: 0; }
.vr-upload-meta strong { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.vr-upload-meta span { font-size: 12px; color: var(--text-muted); }
.vr-upload-right { display: flex; align-items: center; gap: 16px; }
.vr-upload-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.vr-upload-loaded { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.vr-upload-fileinfo { width: 100%; }
.vr-upload-ready { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; color: var(--teal); background: #e2f3f1; padding: 3px 10px; border-radius: 999px; flex-shrink: 0; }

/* Waveform — a row of bars; the played portion turns teal; recording makes them pulse. */
.vr-wave { display: flex; align-items: center; justify-content: space-between; gap: 2px; flex: 1; height: 34px; min-width: 60px; overflow: hidden; }
.vr-wave-bar { flex: 1 1 0; min-width: 2px; max-width: 2px; border-radius: 2px; background: #c2cdcc; transition: background .1s ease; }
.vr-wave-bar.on { background: var(--teal); }
.vr-wave.is-rec .vr-wave-bar { background: #df5b4f; opacity: .85; animation: vrWavePulse .9s ease-in-out infinite; transform-origin: center; }
@keyframes vrWavePulse { 0%,100% { transform: scaleY(.40); } 50% { transform: scaleY(1); } }

/* Waveform player — play + waveform + time (+ optional delete). */
.vr-wplayer { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 6px; border-radius: 24px; background: #eef2f3; border: 1px solid #e1e7e8; }
.vr-wplayer-play { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--teal); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .1s ease, background .12s ease; }
.vr-wplayer-play:hover { transform: scale(1.06); }
.vr-wplayer-time { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; min-width: 34px; text-align: end; margin-inline-end: 16px; }
.vr-wplayer-del { width: 32px; height: 32px; border: none; background: transparent; color: #8a9a98; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; transition: background .12s, color .12s; }
.vr-wplayer-del:hover { background: rgba(217,45,32,.10); color: var(--red); }

/* Convert Text — fields + voice + convert button + preview, all inside the gray box. */
.vr-tts-box { display: flex; flex-direction: column; gap: 16px; }
.vr-tts-field { display: flex; flex-direction: column; gap: 7px; }
.vr-tts-text { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.5; padding-block-start: 12px; background: #fff; }
.vr-tts-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* Voice picker is the narrowest item; Convert button is fixed; the preview fills the rest —
   all on one row so the screen needs no vertical scroll. */
.vr-tts-voice { display: flex; flex-direction: column; gap: 7px; flex: 0 0 330px; min-width: 0; }
.vr-tts-voice .vr-voice-ddl { max-width: 100%; margin-block-end: 0; }
.vr-tts-voice .vs-ddl-control { min-height: 48px; }
.vr-tts-gen { flex-shrink: 0; height: 48px; white-space: nowrap; gap: 8px; }
.vr-tts-result { flex: 1 1 300px; min-width: 0; }
.vr-tts-result .vr-wplayer { width: 100%; }
.vr-tts-resultcap { font-size: 12px; color: var(--text-muted); padding-inline-start: 4px; }

/* Record — WhatsApp-style recorder inside the gray box. */
/* .vr-rec-box uses the standard .vr-src-box padding */
.vr-rec-idle { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0px 24px; }
.vr-rec-mic { width: 66px; height: 66px; border-radius: 50%; border: none; background: var(--teal); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s ease, box-shadow .15s ease; box-shadow: 0 6px 18px rgba(13,63,68,.22); }
.vr-rec-mic:hover { transform: scale(1.06); }
.vr-rec-hint { font-size: 13px; color: var(--text-muted); }
.vr-wa-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; margin: 0px; }
.vr-wa-bar.recording { border-color: #f3c8c2; background: #fff7f6; }
.vr-wa-side { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: #8a9a98; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; }
.vr-wa-side:hover { background: rgba(217,45,32,.10); color: var(--red); }
.vr-wa-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: vrPulse 1.2s infinite; }
.vr-wa-time { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 38px; }
.vr-wa-send { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--teal); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .1s ease; }
.vr-wa-send:hover { transform: scale(1.06); }
.vr-wa-bar.done .vr-wplayer { flex: 1; background: transparent; border: none; }
@keyframes vrPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,45,32,.45); } 50% { box-shadow: 0 0 0 7px rgba(217,45,32,0); } }

/* ===== Dropdown (DDL) — provider, T2 numbers, TTS voice ===== */
.vs-ddl { position: relative; max-width: 360px; margin-block-end: 20px; }
.vr-voice-ddl { max-width: 340px; }
.vs-ddl-control { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13.5px; color: var(--text); text-align: left; }
.vs-ddl-control:hover { border-color: #b9c6c4; }
.vs-ddl.open .vs-ddl-control { border-color: var(--teal); }
.vs-ddl-control:disabled { cursor: not-allowed; opacity: .6; }
.vs-ddl-ph { color: var(--text-muted); }
.vs-ddl-caret { color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.vs-ddl.open .vs-ddl-caret { transform: rotate(180deg); }
.vs-ddl-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; max-height: 280px; overflow-y: auto; }
/* Open upward when there isn't room below (avoids being clipped by the wizard's scroll area). */
.vs-ddl.drop-up .vs-ddl-pop { top: auto; bottom: calc(100% + 6px); }
.vs-ddl-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-size: 13.5px; color: var(--text); text-align: left; }
.vs-ddl-item:hover { background: var(--bg-hover); }
.vs-ddl-item.on { background: #f4f8f7; color: var(--teal); font-weight: 600; }
.vs-num-ddl-item { font-variant-numeric: tabular-nums; }
.vs-num-ddl-item svg { color: var(--text-muted); }
.vr-voice-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vr-voice-av { flex-shrink: 0; }
/* Space between the bold voice name and its locale/desc ("Layla" + "Arabic (Saudi) — Female"). */
.vr-voice-meta strong { margin-inline-end: 5px; }
/* Selected value stays on a single line (ellipsis if a very long voice is picked). */
.vr-voice-cur .vr-voice-meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-voice-opt { padding: 8px 10px; }
.vs-edit-provider-field .vs-ddl { max-width: 280px; }
/* Editable account-name input on the Edit screen — match the provider dropdown box. */
.vs-edit-name-field .ac-input { max-width: 280px; height: 44px; border-radius: 10px; font-size: 13.5px; }

/* T2 numbers — multi-select: compact count-summary trigger + selected chips below
   (mirrors the BYO path's chips area, so both providers look consistent). */
.vs-num-t2 .vs-ddl { margin-block-end: 0; max-width: 440px; }
.vs-num-summary { color: var(--text); font-weight: 500; }
.vs-num-t2-chips { margin-top: 14px; }
.vs-num-pop .acg-combo-row { border-radius: 8px; }
.vs-num-opt-val { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--text); }
.vs-num-opt-val > svg { color: var(--text-muted); flex-shrink: 0; }

/* ===== Source preview (Upload / TTS / Microphone) ===== */
.vr-preview-box { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; max-width: 520px; }
.vr-audio-label { font-size: 12px; color: var(--text-muted); padding-left: 2px; }
.vr-audio { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px 0 8px; border-radius: 23px; background: #f1f3f4; }
.vr-audio-play { width: 30px; height: 30px; border: none; background: transparent; color: var(--teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; transition: background .12s ease; }
.vr-audio-play:hover { background: rgba(13,63,68,.10); }
.vr-audio-time { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; }
.vr-audio-track { flex: 1; height: 4px; border-radius: 3px; background: #ccd2d4; min-width: 36px; position: relative; overflow: hidden; }
.vr-audio-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--teal); }
.vr-audio-vol { color: #5f6368; display: inline-flex; align-items: center; flex-shrink: 0; }
.vr-audio-more { border: none; background: transparent; color: #5f6368; cursor: pointer; display: inline-flex; align-items: center; padding: 3px; border-radius: 50%; flex-shrink: 0; transition: background .12s ease; }
.vr-audio-more:hover { background: rgba(0,0,0,.07); }
.vr-preview-hint { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.vr-preview-hint svg { color: var(--text-muted); flex-shrink: 0; }
/* (TTS voice-row / Convert-to-Speech sizing now lives in the source-step block above.) */

/* ===== Interaction polish — dropdowns + recorder ===== */
.vs-ddl-control:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,63,68,.12); }
.vs-ddl-control svg, .vs-ddl-item { transition: background .12s ease, color .12s ease; }
.vs-ddl-pop { animation: vsDdlPop .14s ease; transform-origin: top center; }
@keyframes vsDdlPop { from { opacity: 0; transform: translateY(-5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.vr-mic { transition: border-color .15s ease, background .15s ease; }
.vr-mic:hover { border-color: #b9c6c4; }
.vr-mic.done { border-style: solid; border-color: #d7e3e2; background: #fbfdfc; }