/*
* v4_recorder_module.css
*
* SINGLE SOURCE OF TRUTH for greeting / voicemail / pre-alert / TTS / STT
* recorder UI styling across Auto Attendant, Call Center, Hunt Group,
* and Extension pages.
*
* Loaded globally via main_template_v3.php (after v4_design.css).
* Pairs with aa_tabs.js normalizer (paints aa-*-normalized classes onto the
* recorder DOM emitted by shared/templates/recording_module.php).
*
* Design tokens (--greeting-*, --aa-recorder-*, etc.) are DEFINED here in
* § 1 and consumed throughout. Page-specific CSS files MUST NOT declare
* these tokens or restyle recorder classes. If you find a recorder rule
* outside this file, move it here.
*
* Selector convention: clean. Do NOT chain
* body.v4-body #v4-app.v4-app .v4-content .v4-tabbed-detail #foo_app#foo_app
* to win specificity — there is no competing rule. Keep selectors flat.
*
* Class taxonomy (painted by aa_tabs.js and v4_design.js normalizers):
* .aa-greeting-area-normalized — outer recorder shell
* .aa-greeting-quick-normalized — quick recorder block
* .aa-selector-normalized — greeting source dropdown row
* + [data-greeting-mode] — "default" | "edit" | "new" | "rename"
* .aa-greeting-controls-normalized — buttons row under selector
* .aa-action-row-normalized — common action row
* .aa-audio-button-aligned — uniform 34px audio buttons
* .aa-vm-recorder-area — voicemail recorder area
* .aa-vm-recorder-selector — voicemail recorder selector row
* + .aa-vm-edit-visible — when edit affordance is shown
* .aa-vm-recorder-controls — voicemail recorder controls row
* .aa-vm-recorder-row — voicemail recorder action row
* .aa-vm-delivery-row-active — voicemail delivery email row (grid)
* .aa-vm-section, .aa-vm-password-section — voicemail subsections
* .vm-setting-row.vm-setting-row-active — generic vm setting row (grid)
* .voice_message_email_address_row.aa-vm-email-row-grid — CC/HG email row (Phase 1.5)
*
* Sections:
* § 1 — Design tokens
* § 2 — Greeting area shell
* § 3 — Selector dropdown row
* § 4 — Quick recorder + audio playback
* § 5 — TTS panel
* § 6 — STT banner
* § 7 — Action row
* § 8 — Pre-alert
* § 9 — Name recording
* § 10 — Voicemail delivery
* § 11 — Announcement area
* § 12 — Page-specific escape hatches (kept empty by design)
*/
/* ============================================================
* v4_recorder_module.css
* § 1 — DESIGN TOKENS (the canonical set)
* ------------------------------------------------------------
* Single source of truth for every CSS custom property the
* greeting / recorder / pre-alert system reads.
*
* Token families:
* --greeting-* Canonical greeting layout tokens (v4_2026 era).
* Consumed by the new shared recorder grid.
* --aa-greeting-* Legacy alias family. Still referenced by
* auto_attendant_editable.css consumers. Mapped
* 1:1 to the --greeting-* canon below.
* --aa-recorder-* Legacy recorder grid family. Still referenced
* by extension_editable.css consumers (control
* grid math, shared-recorder fallbacks).
* --shared-recorder-* Inner-scope tokens for .shared-recording-selector.
* Resolve to --aa-recorder-* defaults.
* --aa-ext-recorder-* Extension-page pre-alert recorder overrides
* (advanced-notice / pre-alert section only).
* --aa-ext-prealert-* Extension-page pre-alert chrome (borders).
* --aa-flat-section-* Tabbed-detail section chrome.
* --aa-elegant-control-* Elegant control chrome (border / text / icon).
* --aa-detail-content-* Tabbed-detail max content width.
* --vm-selector-* Voicemail recorder selector width.
*
* Per-context overrides at the bottom only where the value
* GENUINELY differs (AA vs Ext/HG/CC label widths).
* ============================================================ */
body.v4-body {
/* ----------------------------------------------------------
* Canonical greeting tokens (v4_2026.css L1963-L1975)
* Used by the new shared recorder grid in § 2+.
* ---------------------------------------------------------- */
--greeting-label-width: 116px;
--greeting-grid-gap: 8px;
--greeting-row-gap: 5px;
--greeting-control-height: 34px;
--greeting-button-width: 148px;
--greeting-select-width: 378px;
--greeting-default-select-width: 304px;
--greeting-edit-width: 74px;
--greeting-button-radius: 7px;
--greeting-border-color: #D0D7DE;
--greeting-tts-button-width: 109px;
--greeting-scope-width: 86px;
--greeting-action-width: 74px;
--greeting-cancel-width: 78px;
/* ----------------------------------------------------------
* Legacy --aa-greeting-* alias family
* Auto-attendant editable / inline consumers still reference
* these names. Map 1:1 to --greeting-* so a single change
* to the canon above flows everywhere.
* ---------------------------------------------------------- */
--aa-greeting-label-width: var(--greeting-label-width);
--aa-greeting-grid-gap: var(--greeting-grid-gap);
--aa-greeting-gap: var(--greeting-grid-gap);
--aa-greeting-row-gap: var(--greeting-row-gap);
--aa-greeting-button-width: var(--greeting-button-width);
--aa-greeting-select-width: var(--greeting-select-width);
--aa-greeting-default-select-width: var(--greeting-default-select-width);
--aa-greeting-edit-width: var(--greeting-edit-width);
--aa-greeting-scope-width: var(--greeting-scope-width);
--aa-greeting-action-width: var(--greeting-action-width);
--aa-greeting-cancel-width: var(--greeting-cancel-width);
--aa-greeting-control-width: calc(
(var(--greeting-button-width) * 3) +
(var(--greeting-grid-gap) * 2)
);
/* ----------------------------------------------------------
* Legacy --aa-recorder-* family
* Extension/HG/CC recorder grid still consumes these.
* All aliased 1:1 to canonical --greeting-* tokens.
* ---------------------------------------------------------- */
--aa-recorder-row-label: var(--greeting-label-width);
--aa-recorder-grid-gap: var(--greeting-grid-gap);
--aa-recorder-button-width: var(--greeting-button-width);
--aa-recorder-edit-width: var(--greeting-edit-width);
--aa-recorder-action-width: 464px;
--aa-recorder-select-width: var(--greeting-select-width);
--aa-recorder-control-width: calc(
(var(--aa-recorder-button-width) * 3) +
(var(--aa-recorder-grid-gap) * 2)
);
/* ----------------------------------------------------------
* Shared-recorder defaults
* Inner tokens resolved on .shared-recording-selector and on
* #extension_app / #call_center_app / #hunt_group_app scopes.
* ---------------------------------------------------------- */
--shared-recorder-label-width: var(--greeting-label-width);
--shared-recorder-select-width: var(--greeting-select-width);
--shared-recorder-edit-width: var(--greeting-edit-width);
--shared-recorder-gap: var(--greeting-grid-gap);
/* ----------------------------------------------------------
* Extension pre-alert recorder aliases
* Map 1:1 to --greeting-* so everything is uniform.
* ---------------------------------------------------------- */
--aa-ext-recorder-label-width: var(--greeting-label-width);
--aa-ext-recorder-grid-gap: var(--greeting-grid-gap);
--aa-ext-recorder-row-gap: var(--greeting-row-gap);
--aa-ext-recorder-control-height: var(--greeting-control-height);
--aa-ext-recorder-select-width: var(--greeting-select-width);
--aa-ext-recorder-default-select-width: var(--greeting-default-select-width);
--aa-ext-recorder-edit-width: var(--greeting-edit-width);
--aa-ext-recorder-button-width: var(--greeting-button-width);
/* ----------------------------------------------------------
* Extension pre-alert chrome
* ---------------------------------------------------------- */
--aa-ext-prealert-border: #DDE7F1;
--aa-ext-prealert-divider: #E4EBF3;
/* ----------------------------------------------------------
* Tabbed-detail / elegant-control chrome
* ---------------------------------------------------------- */
--aa-detail-content-width: 1150px;
--aa-flat-section-border: #DDE7F1;
--aa-flat-section-radius: 8px;
--aa-elegant-control-border: #DCE6F1;
--aa-elegant-control-text: #314860;
--aa-elegant-control-icon: #7C8FA4;
/* ----------------------------------------------------------
* Voicemail selector
* 304px default — width of the dropdown when in non-edit mode.
* 378px when edit affordance is shown (.aa-vm-edit-visible).
* Math: 116px label + 8px gap + 304px select + 8px gap + 70px edit = 506px
* (matches the 3-button row: 116 + 3×146.67 + 2×8 = 456 + 70 edit slot)
* ---------------------------------------------------------- */
--vm-selector-width: 304px;
}
/* ============================================================
* Per-context overrides — only where the value genuinely differs
* ============================================================ */
/* All apps share the same 116px label width from the base token. */
/* Voicemail recorder widens from the default 304px slot to 378px when the
* edit affordance is visible (matches v4_design.js normalizeVoicemailRecorders). */
body.v4-body .v4-content .aa-vm-recorder-selector.aa-vm-edit-visible {
--vm-selector-width: 378px;
}
/* ============================================================
* § 2 — GREETING AREA SHELL
*
* The outer flex column wrapping the entire recorder block:
* .aa-greeting-area-normalized (the canonical wrapper used
* across AA/Ext/HG/CC)
* .voicemail-greeting-area (legacy voicemail wrapper —
* maps to the same layout)
* .aa-unified-shell (business/after-hours/holiday
* parent shell)
* .greeting / .greeting_super_parent / #voicemail .greeting
* (legacy single-greeting wrapper
* inside a recorder block)
*
* Token vocabulary used here:
* --greeting-row-gap vertical gap between rows (4px)
* --aa-greeting-row-gap alias for the same (matches § 1)
*
* Specificity stripped — no more
* `body.v4-body #v4-app.v4-app .v4-content #foo_app#foo_app ...`
* chains. v4_recorder_module.css loads after the legacy files,
* so a single class is enough to win.
* ============================================================ */
/* ============================================================
* Section header separator (title + subtitle + hairline)
*
* Framework pattern: every .aa-subsection-header that contains
* a .v4-section-desc gets a subtle inset hairline below the
* subtitle. The line is inset 12px from each edge so it never
* touches the container border.
* ============================================================ */
body.v4-body .v4-content .aa-subsection-header .v4-section-desc {
padding-bottom: 10px;
margin-bottom: 6px;
position: relative;
}
body.v4-body .v4-content .aa-subsection-header .v4-section-desc::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 12px;
right: 12px;
height: 1px;
background: #E4EBF3;
}
/* Outer wrapper: vertical flow of (selector row, recorder controls). */
body.v4-body .v4-content .voicemail-greeting-area,
body.v4-body .v4-content .aa-greeting-area-normalized {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0; /* children's own margin-top handles row spacing;
flex gap + margin doubled it to 10px */
width: 100%;
margin: 0;
padding: 0;
}
/* Inside the voicemail tab the shell gets a soft separator. */
body.v4-body .v4-content #voicemail-tab .aa-greeting-area-normalized,
body.v4-body .v4-content #voicemail .voicemail-greeting-area {
padding-top: 20px;
border-top: 1px solid #E4EBF3;
}
/* Generic `.greeting` (legacy single-greeting block inside the
shell). Trim default padding so the shell controls spacing. */
body.v4-body .v4-content .greeting {
padding-bottom: 0;
margin-bottom: 0;
}
body.v4-body .v4-content #voicemail .greeting {
padding-bottom: 0;
margin-bottom: 0;
margin-left: 0;
}
body.v4-body .v4-content #after-hours .greeting,
body.v4-body .v4-content #business .greeting {
padding-bottom: 0;
margin-top: 0;
}
/* aa-unified-shell — the bordered container for the entire
greeting + schedule block on business / after-hours / holiday
tabs. */
body.v4-body .v4-content .aa-unified-shell {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
/* Reset inherited padding on greeting section wrapper so all rows
(Recording, Listen, Create, Voice, Message, Actions) share the
same left edge. Matches production master where this is 0.
Uses ID selectors to beat the #auto_attendant_app .section_item
rule (specificity 1,1,0) that sets var(--detail-shell-row-padding-x). */
#auto_attendant_app .control_section.greeting,
#hunt_group_app .control_section.greeting,
#call_center_app .control_section.greeting,
body#extension_page .control_section.greeting,
#greetings_app .control_section.greeting {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Override JS inline padding-left:10px on greeting action rows */
#auto_attendant_app .control_section.greeting .greeting-action-row,
#hunt_group_app .control_section.greeting .greeting-action-row,
#call_center_app .control_section.greeting .greeting-action-row,
body#extension_page .control_section.greeting .greeting-action-row,
#greetings_app .control_section.greeting .greeting-action-row {
padding-left: 0 !important;
}
/* Override 18px padding on the anonymous inner wrapper div
(set by v4_2026.css for CC/HG #announcements context) */
#auto_attendant_app .control_section.greeting > div,
#hunt_group_app .control_section.greeting > div,
#call_center_app .control_section.greeting > div,
body#extension_page .control_section.greeting > div,
#greetings_app .control_section.greeting > div {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.v4-body .v4-content .aa-unified-shell > .form-group {
margin: 0;
padding: 10px 0;
border-top: 1px solid var(--v4-border-light);
background: transparent;
box-shadow: none;
}
body.v4-body .v4-content .aa-unified-shell > .form-group:first-child {
border-top: none;
padding-top: 2px;
}
body.v4-body .v4-content .aa-unified-shell > .form-group + .form-group {
margin-top: 0;
padding-top: 10px;
border-top: 1px solid var(--v4-border-light);
}
/* ============================================================
* § 3 — SELECTOR DROPDOWN ROW
*
* The row of (label + dropdown + edit button) that selects which
* greeting is being edited. Four modes via [data-greeting-mode]:
* default — label + short select
* edit — label + long select + edit-name button
* new — label + long select + add + edit + cancel
* rename — label + name input + add + cancel
*
* Selectors:
* .aa-selector-normalized (canonical row, AA family)
* .greeting_selector_fixer (legacy alias)
* .shared-recording-selector (Ext/HG/CC variant)
* .greeting-select-dropdown
* #greeting_select_dropdown
* .greeting_select
* .greeting_label / .greeting-label
* .edit_greeting_name
* .add_new_greeting
* .cancel_new_greeting
*
* Token vocabulary used here:
* --greeting-label-width (116px, all apps)
* --greeting-grid-gap (column gap, 8px)
* --greeting-control-height (34px)
* --greeting-button-radius (7px)
* --greeting-button-width
* --greeting-select-width (edit/new/rename: 378px)
* --greeting-default-select-width (default mode: 304px)
* --greeting-edit-width (70px)
* --greeting-cancel-width
* --aa-greeting-label-width alias
* ============================================================ */
/* Canonical AA selector row — grid with per-mode column template.
* :is() with entity IDs gives ID-level specificity (1,0,0) so this
* beats v4_forms.css #business .inline_input_row { display:flex !important }
* and any Bootstrap .d-flex class. */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .aa-selector-normalized,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting_selector_fixer {
display: grid !important; /* ID-level specificity beats all flex !important */
align-items: center;
justify-content: flex-start;
gap: var(--greeting-grid-gap);
width: 100%;
max-width: 100%;
min-height: var(--greeting-control-height);
margin: 0;
padding: 0;
position: relative;
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="default"] {
grid-template-columns:
var(--greeting-label-width)
var(--greeting-default-select-width);
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="edit"] {
grid-template-columns:
var(--greeting-label-width)
var(--greeting-select-width)
var(--greeting-edit-width);
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="new"] {
grid-template-columns:
var(--greeting-label-width)
minmax(180px, var(--greeting-select-width))
var(--greeting-button-width)
var(--greeting-edit-width)
var(--greeting-cancel-width);
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="rename"] {
grid-template-columns:
var(--greeting-label-width)
minmax(180px, 1fr)
var(--greeting-edit-width)
var(--greeting-cancel-width);
}
@media (max-width: 760px) {
body.v4-body .v4-content .aa-selector-normalized,
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode] {
grid-template-columns: minmax(0, 1fr);
}
}
/* Shared-recording-selector — Ext/HG/CC variant of the selector
row. Used when the recording library is shared rather than
per-context. */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .shared-recording-selector {
--shared-recorder-label-width: var(--greeting-label-width);
--shared-recorder-select-width: var(--greeting-select-width);
--shared-recorder-edit-width: var(--greeting-edit-width);
--shared-recorder-gap: var(--greeting-grid-gap);
display: grid !important; /* ID-level specificity beats all flex !important */
grid-template-columns:
var(--shared-recorder-label-width)
minmax(260px, var(--shared-recorder-select-width))
var(--shared-recorder-edit-width)
auto auto;
column-gap: var(--shared-recorder-gap);
row-gap: var(--shared-recorder-gap);
align-items: center;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
}
body.v4-body .v4-content .shared-recording-selector > .hidden {
display: none !important;
}
@media (max-width: 760px) {
body.v4-body .v4-content .shared-recording-selector {
grid-template-columns: minmax(0, 1fr);
}
}
/* Label cell — column 1 in every mode. */
body.v4-body .v4-content .greeting_label,
body.v4-body .v4-content .aa-selector-normalized > .greeting_label,
body.v4-body .v4-content .shared-recording-selector > .greeting_label {
grid-column: 1 / 2;
flex: 0 0 auto;
display: flex !important;
align-items: center !important;
align-self: center;
width: var(--greeting-label-width);
min-width: var(--greeting-label-width);
height: var(--greeting-control-height);
margin: 0 !important;
padding: 0;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: none;
color: var(--v4-text-muted);
}
/* Shared variant uses a different visual style ("Recording"
eyebrow rendered via ::after). */
body.v4-body .v4-content .shared-recording-selector > .greeting_label {
font-size: 0;
font-weight: 600;
color: #1B3557;
text-transform: none;
letter-spacing: 0;
}
body.v4-body .v4-content .shared-recording-selector > .greeting_label::after {
content: "";
font-size: 13px;
}
/* Dropdown — column 2 across all modes. */
body.v4-body .v4-content #greeting_select_dropdown,
body.v4-body .v4-content .greeting-select-dropdown,
body.v4-body .v4-content .aa-selector-normalized select#greeting_select_dropdown:not(.hidden),
body.v4-body .v4-content .shared-recording-selector > select#greeting_select_dropdown {
display: block;
grid-column: 2 / 3;
flex: 0 1 auto;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
line-height: var(--greeting-control-height);
margin: 0;
padding: 0 30px 0 12px;
border: 1px solid var(--greeting-border-color);
border-radius: var(--greeting-button-radius);
background-color: #FFFFFF;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--v4-navy);
min-width: 220px;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.v4-body .v4-content #greeting_select_dropdown:focus,
body.v4-body .v4-content .greeting-select-dropdown:focus {
outline: none;
border-color: var(--greeting-border-color);
box-shadow: none;
}
/* Default-mode dropdown has a fixed shorter width. */
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="default"] select#greeting_select_dropdown {
width: var(--greeting-default-select-width);
min-width: var(--greeting-default-select-width);
max-width: var(--greeting-default-select-width);
}
/* Edit / new / rename: dropdown fills its grid cell. */
body.v4-body .v4-content .aa-selector-normalized:not([data-greeting-mode="default"]) select#greeting_select_dropdown {
width: 100%;
min-width: 0;
max-width: 100%;
}
body.v4-body .v4-content .aa-selector-normalized select#greeting_select_dropdown.hidden {
display: none !important;
}
/* Rename-mode replaces the select with a text input. */
body.v4-body .v4-content .aa-selector-normalized input[name="add_new_greeting_input"]:not(.hidden) {
display: block;
grid-column: 2 / 3;
flex: 0 1 auto;
height: var(--greeting-control-height);
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0 12px;
border: 1px solid var(--greeting-border-color);
border-radius: var(--greeting-button-radius);
background: #FFFFFF;
}
body.v4-body .v4-content .aa-selector-normalized input[name="add_new_greeting_input"].hidden {
display: none !important;
}
/* New-mode "kind of greeting" select sits at column 3. */
body.v4-body .v4-content .aa-selector-normalized select[name="add_new_greeting_select"]:not(.hidden) {
display: block;
grid-column: 3 / 4;
flex: 0 1 auto;
height: var(--greeting-control-height);
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
border: 1px solid var(--greeting-border-color);
border-radius: var(--greeting-button-radius);
}
body.v4-body .v4-content .aa-selector-normalized select[name="add_new_greeting_select"].hidden {
display: none !important;
}
/* ----- Edit / Save / Cancel buttons in the selector row ----- */
/* Base pill style shared across the greeting/menu control buttons.
* ID-via-:is() gives (1,x,x) specificity to beat v4_forms.css
* .btn height:38px/padding:9px 18px !important declarations. */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .spinner_button,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .cancel_new_greeting,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .add_new_greeting,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .edit_greeting_name,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .edit_greeting,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .secondary-play > .btn,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .secondary-pause,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .secondary-stop {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: var(--greeting-control-height) !important;
min-height: var(--greeting-control-height) !important;
max-height: var(--greeting-control-height) !important;
padding: 0 12px !important;
border: 1px solid var(--greeting-border-color) !important;
border-radius: var(--greeting-button-radius) !important;
background: #FFFFFF !important;
color: var(--v4-text-secondary) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
box-shadow: none !important;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease !important;
}
/* Menu key Play/Stop buttons — more prominent than standard greeting controls
so the row doesn't look empty when a greeting is assigned. */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .secondary-play > .btn.aa-menu-play-btn,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .btn.aa-menu-stop-btn {
color: #0E2749 !important;
font-weight: 600 !important;
border-color: #C6D3E1 !important;
box-shadow: 0 1px 2px rgba(14, 39, 73, 0.06) !important;
width: 100% !important;
max-width: none !important;
}
/* Edit-name button — "rename" pencil pill. */
body.v4-body .v4-content .edit_greeting_name {
align-items: center;
justify-content: center;
flex: 0 1 auto;
width: var(--greeting-edit-width);
min-width: var(--greeting-edit-width);
max-width: var(--greeting-edit-width);
padding: 0 8px;
font-size: 12.5px;
gap: 7px;
}
body.v4-body .v4-content .edit_greeting_name:hover {
background: var(--v4-brand-soft);
color: var(--v4-brand);
border-color: var(--v4-brand-light);
}
body.v4-body .v4-content .edit_greeting_name i {
font-size: 11px;
opacity: 0.85;
}
body.v4-body .v4-content .edit_greeting_name img {
height: 14px;
width: auto;
}
/* Grid placement varies by mode. */
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="new"] .edit_greeting_name {
grid-column: 4 / 5;
}
body.v4-body .v4-content .aa-selector-normalized:not([data-greeting-mode="new"]) .edit_greeting_name {
grid-column: 3 / 4;
}
body.v4-body .v4-content .aa-selector-normalized .edit_greeting_name.hidden,
body.v4-body .v4-content .shared-recording-selector .edit_greeting_name.hidden {
display: none !important;
}
/* Add-new (Save) button. */
body.v4-body .v4-content .add_new_greeting {
flex: 0 1 auto;
width: 100%;
font-size: 13.5px;
padding: 0 8px;
}
body.v4-body .v4-content .add_new_greeting img {
height: 18px;
margin: 0;
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="rename"] .add_new_greeting {
grid-column: 3 / 4;
}
body.v4-body .v4-content .aa-selector-normalized:not([data-greeting-mode="rename"]) .add_new_greeting {
grid-column: 4 / 5;
}
body.v4-body .v4-content .aa-selector-normalized .add_new_greeting.hidden {
display: none !important;
}
/* Cancel button. */
body.v4-body .v4-content .cancel_new_greeting {
flex: 0 1 auto;
width: 100%;
font-size: 13.5px;
padding: 0 8px;
}
body.v4-body .v4-content .cancel_new_greeting img {
height: 18px;
margin: 0;
}
body.v4-body .v4-content .aa-selector-normalized[data-greeting-mode="rename"] .cancel_new_greeting {
grid-column: 4 / 5;
}
body.v4-body .v4-content .aa-selector-normalized:not([data-greeting-mode="rename"]) .cancel_new_greeting {
grid-column: 5 / 6;
}
body.v4-body .v4-content .aa-selector-normalized .cancel_new_greeting.hidden {
display: none !important;
}
/* Inline edit-text label (shared-recording-selector). */
body.v4-body .v4-content .shared-recording-selector .aa-greeting-edit-text {
margin-left: 6px;
}
/* ============================================================
* § 4 — QUICK RECORDER + AUDIO PLAYBACK
*
* The horizontal row of audio controls beneath the selector row:
* Listen / Re-record / Upload / Download / TTS
*
* Selectors:
* .aa-greeting-quick-normalized (canonical AA quick recorder)
* .aa-greeting-controls-normalized (controls wrapper)
* .aa-action-row-normalized (single button row)
* .aa-vm-recorder-area / -selector / -controls / -row
* (voicemail recorder variant)
* .recorder-area, .recorder-action-row (legacy aliases — not
* present in raw extract
* but kept in scope per
* spec for future markup)
* .aa-audio-button-aligned (34px-height audio button)
* .download_link, .play-loader, .download_spinner
* .spinner_button (in recorder context)
*
* Token vocabulary used here:
* --greeting-control-height (34px)
* --greeting-grid-gap (8-10px)
* --greeting-row-gap (4px)
* --greeting-label-width
* --greeting-button-width (~148px)
* --greeting-button-radius (7px)
* --aa-recorder-row-label (aliased to --greeting-label-width)
* --aa-recorder-button-width (aliased to --greeting-button-width)
* --aa-recorder-grid-gap (aliased to --greeting-grid-gap)
* --aa-recorder-edit-width (aliased to --greeting-edit-width)
* ============================================================ */
/* ---------- Quick recorder wrapper ---------- */
body.v4-body .v4-content .aa-greeting-quick-normalized {
display: block;
flex: 0 0 auto;
order: 1;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
position: static;
}
body.v4-body .v4-content .aa-greeting-controls-normalized {
flex: 0 0 auto;
order: 2;
width: 100%;
margin: 0;
padding: 0;
position: static;
}
/* ---------- The 3-button audio row ---------- */
/* (Listen / Re-record / Upload OR TTS / Cancel / Save) */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .aa-action-row-normalized:not(.hidden) {
display: grid !important; /* ID-level specificity beats all flex !important */
align-items: center;
grid-template-columns:
var(--greeting-label-width)
repeat(3, var(--greeting-button-width));
column-gap: var(--greeting-grid-gap);
row-gap: var(--greeting-row-gap);
min-height: var(--greeting-control-height);
width: 100%;
padding: 0;
border: 0;
}
body.v4-body .v4-content .aa-action-row-normalized.hidden {
display: none !important;
}
body.v4-body .v4-content .aa-action-row-normalized[data-container_name="upload_options"] {
margin: var(--greeting-row-gap) 0 0;
}
body.v4-body .v4-content .aa-action-row-normalized:not([data-container_name="upload_options"]) {
margin: 0;
}
body.v4-body .v4-content .aa-action-row-normalized > .greeting_label {
grid-column: 1 / 2;
flex: 0 0 auto;
width: auto;
height: var(--greeting-control-height);
line-height: var(--greeting-control-height);
margin: 0 !important;
font-size: 13px;
}
/* Action-row labels: let the PHP-rendered text show through.
* The label base style (13px, 700 weight) from .aa-action-row-normalized
* > .greeting_label applies. No text-replacement needed. */
@media (max-width: 760px) {
body.v4-body .v4-content .aa-action-row-normalized:not(.hidden) {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------- Audio button (Listen / Re-record / Upload / TTS) ---------- */
/* 34px-height pill, used in every audio row. */
body.v4-body .v4-content .aa-audio-button-aligned,
body.v4-body .v4-content .aa-action-row-normalized .btn.tts-btn,
body.v4-body .v4-content .aa-action-row-normalized .download_link .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: var(--greeting-control-height) !important;
min-height: var(--greeting-control-height) !important;
padding: 0 7px !important;
margin: 0 !important;
border: 1px solid var(--greeting-border-color) !important;
border-radius: var(--greeting-button-radius) !important;
background: #FFFFFF !important;
color: var(--v4-text-secondary) !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: none !important;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, box-shadow .15s ease !important;
}
body.v4-body .v4-content .aa-audio-button-aligned i,
body.v4-body .v4-content .aa-action-row-normalized .btn.tts-btn i,
body.v4-body .v4-content .aa-action-row-normalized .download_link .btn i {
flex: 0 0 auto;
width: auto;
margin: 0 4px 0 0;
font-size: 12px;
line-height: 1;
opacity: 0.75;
}
body.v4-body .v4-content .aa-audio-button-aligned:hover:not(.disabled),
body.v4-body .v4-content .aa-action-row-normalized .btn.tts-btn:hover:not(.disabled) {
background: var(--v4-brand-soft);
color: var(--v4-brand);
border-color: var(--v4-brand-light);
}
body.v4-body .v4-content .aa-audio-button-aligned:hover:not(.disabled) i,
body.v4-body .v4-content .aa-action-row-normalized .btn.tts-btn:hover:not(.disabled) i {
opacity: 1;
}
/* Active / playing state — fill with brand. */
body.v4-body .v4-content .aa-audio-button-aligned.active,
body.v4-body .v4-content .aa-action-row-normalized .tts-btn.play.active {
background: var(--v4-brand);
color: #FFFFFF;
border-color: var(--v4-brand);
}
/* Record-dot in the Re-record button. */
body.v4-body .v4-content .aa-audio-button-aligned .fa-circle,
body.v4-body .v4-content .aa-action-row-normalized .tts-btn .fa-circle {
color: var(--v4-red);
font-size: 8px;
opacity: 1;
}
/* ---------- Download link / spinner ---------- */
body.v4-body .v4-content .greeting .download_link,
body.v4-body .v4-content .announcement_controls .download_link,
body.v4-body .v4-content .announcement-area .download_link,
body.v4-body .v4-content .aa-action-row-normalized .download_link {
display: inline-flex;
align-items: center;
padding: 0;
margin: 0;
border: none;
background: transparent;
text-decoration: none;
box-shadow: none;
}
body.v4-body .v4-content .greeting .download_link:hover,
body.v4-body .v4-content .announcement_controls .download_link:hover,
body.v4-body .v4-content .announcement-area .download_link:hover,
body.v4-body .v4-content .aa-action-row-normalized .download_link:hover {
background: transparent;
text-decoration: none;
}
body.v4-body .v4-content .download_spinner button {
width: 104px;
padding: 2px 11px;
}
body.v4-body .v4-content .download_spinner button img {
margin-right: 6px;
height: 17px;
}
/* ---------- Play loader (spinning icon inside Listen) ---------- */
body.v4-body .v4-content .play_loader {
display: inline-block;
margin: 2.5px 2.5px 0 -4px;
animation: spin-animation 0.5s linear infinite;
}
body.v4-body .v4-content .play-loader button {
width: 59px;
}
@keyframes spin-animation {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* ---------- Voicemail recorder variant ---------- */
/* These three classes scope the same layout to the voicemail tab
(different label width and select width than the main AA
greeting selector). */
body.v4-body .v4-content .aa-vm-recorder-area {
display: flex;
flex-direction: column;
gap: 0;
row-gap: 0;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .aa-vm-recorder-selector {
display: grid !important; /* ID-level specificity beats all flex !important */
grid-template-columns:
116px
var(--vm-selector-width)
var(--greeting-edit-width);
column-gap: var(--greeting-grid-gap);
align-items: center;
justify-content: flex-start;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
max-height: var(--greeting-control-height);
margin: 0;
padding: 0;
}
/* Edit-visible variant: widens the dropdown to 378px (matches edit affordance space) */
body.v4-body .v4-content .aa-vm-recorder-selector.aa-vm-edit-visible {
--vm-selector-width: 378px;
}
body.v4-body .v4-content .aa-vm-recorder-selector > .greeting_label {
height: var(--greeting-control-height);
line-height: var(--greeting-control-height);
}
body.v4-body .v4-content .aa-vm-recorder-selector select#greeting_select_dropdown {
grid-column: 2 / 3;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
width: var(--vm-selector-width);
min-width: var(--vm-selector-width);
max-width: var(--vm-selector-width);
}
/* .aa-vm-recorder-controls — wraps the action rows below the selector.
* 5px uniform row rhythm (Recording / Listen / Create / STT panel all 5px apart). */
body.v4-body .v4-content .aa-vm-recorder-controls {
margin: 5px 0 0;
padding: 0;
gap: 5px;
row-gap: 5px;
}
/* .aa-vm-recorder-row — 3-button action rows under the recorder.
* 116px label + 3 × 146.67px buttons (math: 116 + 3×146.67 + 2×8 = 456px wide). */
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .aa-vm-recorder-row:not(.hidden) {
display: grid !important; /* ID-level specificity beats all flex !important */
grid-template-columns: 116px repeat(3, 146.67px);
column-gap: var(--greeting-grid-gap);
align-items: center;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
max-height: var(--greeting-control-height);
margin: 0;
padding: 0;
}
body.v4-body .v4-content .aa-vm-recorder-row.hidden {
display: none !important;
}
body.v4-body .v4-content .aa-vm-recorder-row:not(.hidden) button.btn.tts-btn {
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
width: 100%;
}
/* ============================================================
* § 5 — TTS PANEL (text-to-speech)
* ------------------------------------------------------------
* The text-to-speech input UI. A panel that opens inside a
* .greeting_container[data-container_name="text-to-speech"] and
* lays out three rows:
*
* Row 1: Voice picker (Voice / select / play / pause)
* Row 2: Message textarea (Message / .text_to_convert)
* Row 3: Action row (Format / Preview / Convert / Cancel)
*
* The action row uses CSS order to enforce a stable visual sequence
* regardless of DOM insertion order: format_text_ai → tts_preview_play
* /pause → convert_text_to_audio / .uploading → cancel_text_to_audio.
*
* Source-of-truth declarations:
* - v4_2026.css L2769-L2802 canonical tts-btn shape
* - v4_2026.css L2961-L2976 textarea.text_to_convert
* - v4_2026.css L3326-L3343 textarea sizing consolidation
* - v4_2026.css L2834-L2844 convert_text_to_audio primary CTA
* - v4_forms.css L2364-L2467 per-app action-row order + sizing
* - extension_editable.css L10152-L10209 flex action-row layout
* - auto_attendant_editable.css L3974-L4043 AA-greeting variant
* ============================================================ */
/* ----------------------------------------------------------
* Panel container — text-to-speech greeting container reset.
* Strips inherited card chrome so the panel sits flush inside
* the surrounding greeting block.
* ---------------------------------------------------------- */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"]:not(.hidden) {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
/* Keep TTS panel hidden while STT is still processing.
* The Listen row (.stt_spinner visible) is a sibling of the
* TTS container — once the spinner disappears (result ready),
* the panel appears with the result already populated. */
body.v4-body .v4-content [data-container_name="actions"]:has(.stt_spinner:not(.hidden)) ~ .greeting_container[data-container_name="text-to-speech"] {
display: none !important;
}
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] > div:not(.stt-result-banner):not(.greeting-state-banner),
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .greeting_contents,
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .greeting_content {
margin-left: 0 !important;
padding-left: 0 !important;
width: 100%;
max-width: 100%;
}
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .hidden,
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .tts-action-row.hidden {
display: none !important;
}
/* The TTS form table — strip any cascading border / padding so the
* three internal rows align cleanly against the panel edge. */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .greeting_parent[data-greeting="text_to_speech"] > .flex_table {
padding-top: 0;
margin-top: 0;
border-top: none;
}
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .stt-result-banner + .greeting_parent[data-greeting="text_to_speech"] > .flex_table {
margin-top: 5px;
}
/* ----------------------------------------------------------
* Row layout — voice-row, has-row-label (message), tts-action-row
* all share the same two-column grid: label slot + content slot.
* Label width comes from --greeting-label-width (116px).
* ---------------------------------------------------------- */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .has-row-label,
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .greeting_contents.has-row-label {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--greeting-grid-gap);
padding-top: 0;
margin-top: var(--greeting-row-gap) !important;
margin-bottom: var(--greeting-row-gap) !important;
border-top: none;
}
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .has-row-label > .greeting_label,
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .tts-action-row > .greeting_label,
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .voice-row > .greeting_label {
flex: 0 0 var(--greeting-label-width);
display: flex !important;
align-items: center !important;
width: var(--greeting-label-width);
min-width: var(--greeting-label-width);
max-width: var(--greeting-label-width);
height: var(--greeting-control-height);
padding: 0;
margin: 0 !important;
align-self: center;
text-align: left;
color: #536984;
font-size: 13px;
font-weight: 700;
}
/* Message row: textarea gets the remaining column. */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .has-row-label > .text_to_convert {
flex: 1 1 auto;
align-self: start;
/* width / max-width / min-height live on textarea.text_to_convert below */
}
/* Voice row sits between voice-picker controls in column 2. */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .voice-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--greeting-grid-gap);
width: 100%;
max-width: 100%;
margin: var(--greeting-row-gap) 0 0;
}
/* ----------------------------------------------------------
* .text_to_convert — the TTS message textarea
* Capped at 540px so the panel doesn't stretch indefinitely on
* wide screens. resize: vertical only — users can grow the box
* but not push it sideways into the action column.
* ---------------------------------------------------------- */
body.v4-body .v4-content textarea.text_to_convert {
width: 100%;
max-width: 540px;
min-height: 84px;
height: auto;
padding: 10px 14px;
border: 1px solid var(--greeting-border-color);
border-radius: var(--greeting-button-radius) !important;
background: #FFFFFF;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.55;
color: var(--v4-navy);
resize: vertical;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.v4-body .v4-content textarea.text_to_convert:focus {
outline: none;
border-color: var(--greeting-border-color);
box-shadow: none;
}
body.v4-body .v4-content textarea.text_to_convert::placeholder {
color: var(--v4-text-faint);
font-weight: 400;
}
/* ----------------------------------------------------------
* .tts-action-row — bottom action strip (Format / Preview /
* Convert / Cancel). Hidden when empty; otherwise a horizontal
* flex row that aligns its buttons to the start of column 2.
* ---------------------------------------------------------- */
body.v4-body .v4-content .tts-action-row {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start;
gap: var(--greeting-grid-gap);
margin: var(--greeting-row-gap) 0 0;
padding: 0;
width: auto;
}
body.v4-body .v4-content .tts-action-row.hidden,
body.v4-body .v4-content .tts-action-row.announcement_controls.hidden {
display: none !important;
}
/* Stable visual order regardless of DOM sequence */
body.v4-body .v4-content .tts-action-row .format_text_ai {
order: 1;
}
body.v4-body .v4-content .tts-action-row :is(.tts_preview_play, .tts_preview_pause) {
order: 2;
}
body.v4-body .v4-content .tts-action-row :is(.convert_text_to_audio, .uploading) {
order: 3;
}
body.v4-body .v4-content .tts-action-row .cancel_text_to_audio {
order: 4;
}
/* Hide internal toggle states (button.uploading.hidden, etc.) */
body.v4-body .v4-content .tts-action-row button.btn.tts-btn.hidden,
body.v4-body .v4-content .tts-action-row button.uploading.hidden,
body.v4-body .v4-content .tts-action-row .btn.hidden,
body.v4-body .v4-content .tts-action-row .uploading.hidden,
body.v4-body .v4-content .tts-action-row .tts_preview_pause.hidden {
display: none !important;
visibility: hidden !important;
}
/* Cancel button stays visible when the row is open */
body.v4-body .v4-content .tts-action-row:not(.hidden) button.cancel_text_to_audio {
display: inline-flex !important;
visibility: visible !important;
}
/* ----------------------------------------------------------
* .tts-btn — TTS row buttons (Format, Preview, Convert, Cancel)
* Fixed-width pill controls. 108-px width keeps four buttons in
* a row at standard panel widths.
* ---------------------------------------------------------- */
body.v4-body .v4-content .tts-action-row button.btn.tts-btn,
body.v4-body .v4-content .tts-action-row .tts-btn,
body.v4-body .v4-content .tts-action-row .btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--greeting-tts-button-width);
width: var(--greeting-tts-button-width);
min-width: var(--greeting-tts-button-width);
max-width: var(--greeting-tts-button-width);
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
padding: 0 12px;
margin: 0;
gap: var(--greeting-grid-gap);
border: 1px solid var(--greeting-border-color);
border-radius: var(--greeting-button-radius);
background: #FFFFFF;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
color: var(--v4-text-secondary);
box-shadow: none;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, box-shadow .15s ease;
}
body.v4-body .v4-content .tts-btn {
transition: background-color 0.15s ease, color 0.15s ease,
box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Inline icon inside any tts button */
body.v4-body .v4-content .tts-action-row .btn.tts-btn i,
body.v4-body .v4-content .tts-action-row .btn i,
body.v4-body .v4-content .tts-btn i {
flex: 0 0 auto;
width: auto;
margin-right: 4px;
margin-left: 0;
font-size: 12px;
line-height: 1;
opacity: 0.75;
}
/* Hover — generic tts-btn (not the orange Convert CTA, not the Cancel) */
body.v4-body .v4-content .tts-btn:hover:not(.disabled):not(.convert_text_to_audio):not(.cancel) {
background: var(--v4-brand-soft);
color: var(--v4-brand);
border-color: var(--v4-brand-light);
}
body.v4-body .v4-content .tts-btn:hover:not(.disabled) i {
opacity: 1;
}
/* Disabled state */
body.v4-body .v4-content .tts-btn.disabled {
opacity: 0.42;
cursor: not-allowed;
pointer-events: none;
}
/* Record-state indicator dot inside the button */
body.v4-body .v4-content .tts-btn .fa-circle {
color: var(--v4-red);
font-size: 8px;
opacity: 1;
}
/* Playing state — when preview audio is active */
body.v4-body .v4-content .tts-btn.play.active {
background: var(--v4-brand);
color: #FFFFFF;
border-color: var(--v4-brand);
}
/* ----------------------------------------------------------
* .convert_text_to_audio — the primary CTA in the TTS row.
* Solid brand orange, white text, soft brand-glow shadow.
* This is the button users click to generate the audio.
* ---------------------------------------------------------- */
body.v4-body .v4-content .tts-btn.convert_text_to_audio:not(.disabled),
body.v4-body .v4-content .tts-action-row .convert_text_to_audio:not(.disabled) {
background: var(--v4-brand);
color: #FFFFFF;
border-color: var(--v4-brand);
box-shadow: 0 1px 2px rgba(248, 153, 57, 0.18);
font-weight: 600;
}
body.v4-body .v4-content .tts-btn.convert_text_to_audio:not(.disabled) i,
body.v4-body .v4-content .tts-action-row .convert_text_to_audio:not(.disabled) i {
color: inherit;
opacity: 0.75;
}
body.v4-body .v4-content .tts-btn.convert_text_to_audio:not(.disabled):hover,
body.v4-body .v4-content .tts-action-row .convert_text_to_audio:not(.disabled):hover {
background: var(--v4-brand-hover);
border-color: var(--v4-brand-hover);
box-shadow: 0 6px 14px -4px var(--v4-brand-glow);
transform: translateY(-1px);
}
/* ----------------------------------------------------------
* .cancel_text_to_audio — secondary, ghost button.
* Visible only while a conversion is in flight; transparent
* until hovered.
* ---------------------------------------------------------- */
body.v4-body .v4-content .tts-btn.cancel,
body.v4-body .v4-content .tts-action-row .cancel_text_to_audio {
background: transparent;
border-color: transparent;
color: var(--v4-text-muted);
}
body.v4-body .v4-content .tts-btn.cancel:hover,
body.v4-body .v4-content .tts-action-row .cancel_text_to_audio:hover {
background: var(--v4-inset-soft);
color: var(--v4-navy);
border-color: transparent;
}
/* ----------------------------------------------------------
* .speech_to_text_toggler — the toggle button that opens /
* closes the TTS panel from the greeting row. Just strip the
* default border so it sits cleanly next to the other actions.
* ---------------------------------------------------------- */
body.v4-body .v4-content .speech_to_text_toggler button {
border: none !important;
}
/* ============================================================
* § 6 — STT BANNER (speech-to-text result)
* ------------------------------------------------------------
* After a TTS preview is generated (or after a recording is
* transcribed), the .stt-result-banner shows the transcribed
* text above the panel. It's a soft warm-toned strip that sits
* flush with the textarea below (matching its 540-px cap).
*
* The .stt_spinner is the in-flight loader button shown while
* speech-to-text is still processing.
*
* Source-of-truth declarations:
* - v4_2026.css L3026-L3036 stt-result-banner inside TTS panel
* - v4_2026.css L3458-L3480 per-app stt-result-banner sizing
* - extension_editable.css L318-L326 stt_spinner button + img
* ============================================================ */
/* ----------------------------------------------------------
* .stt-result-banner — the blue / warm-toned result strip
* shown inside the TTS container after a preview is generated.
* Indented to align with the textarea below (label width plus
* grid gap), capped at the same 540-px width.
* ---------------------------------------------------------- */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .stt-result-banner,
body.v4-body .v4-content .stt-result-banner {
box-sizing: border-box;
margin-top: var(--greeting-row-gap) !important;
margin-right: 0;
margin-bottom: 5px;
margin-left: calc(var(--greeting-label-width) + var(--greeting-grid-gap));
/* Match the textarea width exactly: 540 px or fits the remaining
row width, whichever is smaller. */
width: min(540px, calc(100% - var(--greeting-label-width) - var(--greeting-grid-gap)));
max-width: min(540px, calc(100% - var(--greeting-label-width) - var(--greeting-grid-gap)));
padding: 12px 16px 13px;
border: none;
border-radius: var(--greeting-button-radius);
box-shadow: inset 0 0 0 1px #F2DDB8;
}
/* When the banner sits above the form, push the form down a bit
* and add a thin top divider to separate the two sections. */
body.v4-body .v4-content .greeting_container[data-container_name="text-to-speech"] .stt-result-banner + .greeting_parent {
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--v4-border-light);
}
/* ----------------------------------------------------------
* .stt_spinner — the loader button shown while speech-to-text
* is still running. Fixed 134-px width so the row layout
* doesn't reflow when the spinner appears.
* ---------------------------------------------------------- */
body.v4-body .v4-content .stt_spinner button {
padding: 2px 11px !important;
width: 134px !important;
}
body.v4-body .v4-content .stt_spinner button img {
margin-right: 8px;
height: 17px !important;
}
/* Pin the STT spinner and Close toggle to grid column 4 so they
* never overflow the 4-column action row onto a second line.
* During STT processing both .stt_spinner and .speech_to_text_toggler
* can be visible at the same time — forcing them into the same
* column keeps the row stable. */
body.v4-body .v4-content .greeting-action-row > .stt_spinner:not(.hidden) {
grid-column: 4;
grid-row: 1;
width: 148px !important;
max-width: 148px;
}
body.v4-body .v4-content .greeting-action-row > .speech_to_text_toggler:not(.hidden) {
grid-column: 4;
grid-row: 1;
width: 148px !important;
max-width: 148px;
}
/* ============================================================
* v4_recorder_module.css
* § 7 — ACTION ROW (common buttons under the recorder)
* § 8 — PRE-ALERT (announcement controls)
* § 9 — NAME RECORDING (the user's name recorder)
* ------------------------------------------------------------
* Output of canonicalisation pass over raw_extract.css.
* Specificity scoping (body.v4-body, #v4-app, doubled-IDs,
* .v4-tabbed-detail prefixes) stripped — the file is loaded
* inside body.v4-body so the chain is redundant. Redundant
* !important dropped where the rule no longer competes
* against legacy cascades. Tokens used wherever values match.
* ============================================================ */
/* ============================================================
* § 7 — ACTION ROW
* ------------------------------------------------------------
* Common buttons row under the recorder: Save, Cancel, Listen,
* Download, etc. Covers .greeting-action-row (the canonical
* name), .action_row / .action-row legacy aliases, and
* .menu_key_greeting_controls (the per-key controls inside
* menu cells).
* ============================================================ */
/* ----- Base row layout (grid form, on by default) ---------- */
body.v4-body .v4-content .greeting-action-row,
body.v4-body .v4-content .greeting_container:not(.hidden) {
padding-top: 0;
margin-top: 0;
border-top: none;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row[data-container_name]:not(.hidden) {
display: grid !important;
grid-template-columns: var(--greeting-label-width) repeat(3, var(--greeting-button-width)) !important;
column-gap: var(--greeting-grid-gap) !important;
row-gap: var(--greeting-row-gap) !important;
gap: var(--greeting-grid-gap) !important;
align-items: center !important;
min-height: var(--greeting-control-height) !important;
margin: var(--greeting-row-gap) 0 0 !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.v4-body .v4-content .greeting-action-row > * {
margin-left: 0;
margin-right: 0;
}
body.v4-body .v4-content .greeting-action-row[data-container_name] > * {
margin-left: 0;
margin-right: 0;
}
/* Hidden row collapses completely so it doesn't eat vertical
* space in the layout. */
body.v4-body .v4-content .greeting-action-row.hidden {
display: none;
margin: 0;
height: 0;
padding: 0;
}
body.v4-body .v4-content .greeting-action-row > a.hidden,
body.v4-body .v4-content .greeting-action-row > div.hidden,
body.v4-body .v4-content .greeting-action-row .btn.hidden,
body.v4-body .v4-content .greeting-action-row > .hidden {
display: none !important;
visibility: hidden !important;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row .hidden,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row a.hidden,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .announcement_controls .hidden,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .announcement_controls a.hidden {
display: none !important;
visibility: hidden !important;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .aa-action-row-normalized:not(.hidden) {
display: grid !important; /* ID-level specificity beats all flex !important */
grid-template-columns: var(--greeting-label-width) repeat(3, var(--greeting-button-width));
column-gap: var(--greeting-grid-gap);
row-gap: var(--greeting-row-gap);
align-items: center;
min-height: var(--greeting-control-height);
border: 0;
padding: 0;
width: 100%;
}
body.v4-body .v4-content .aa-action-row-normalized[data-container_name="upload_options"] {
margin: var(--greeting-row-gap) 0 0;
}
body.v4-body .v4-content .aa-action-row-normalized:not([data-container_name="upload_options"]) {
margin: 0;
}
body.v4-body .v4-content .aa-action-row-normalized.hidden {
display: none;
}
/* Adjacent action rows: small vertical separator gap */
body.v4-body .v4-content .greeting-action-row + .greeting-action-row {
margin-top: var(--greeting-row-gap);
}
/* Areas (business/after/holiday/submenu/greeting_container)
* normalize action-row block min-height to match control height. */
body.v4-body .v4-content [id$="_app"] .business_hours_greeting_area .greeting-action-row,
body.v4-body .v4-content [id$="_app"] .after_hours_greeting_area .greeting-action-row,
body.v4-body .v4-content [id$="_app"] .holiday_hours_greeting_area .greeting-action-row,
body.v4-body .v4-content [id$="_app"] .greeting_container .greeting-action-row,
body.v4-body .v4-content [id$="_app"] .greeting_container .tts-action-row {
align-items: center;
min-height: var(--greeting-control-height);
}
/* Action row inner-row gaps (group is one of: announcement_controls
* wrapper, actions row, upload_options row, or the TTS action row). */
body.v4-body .v4-content .greeting-action-row .announcement_controls,
body.v4-body .v4-content .greeting-action-row[data-container_name="actions"],
body.v4-body .v4-content .greeting-action-row[data-container_name="upload_options"],
body.v4-body .v4-content .tts-action-row {
gap: var(--greeting-grid-gap);
}
/* Name-area (the row that pairs Name input + Save / Cancel) is a
* tighter 4-column grid: label, name input, Save, Cancel. */
body.v4-body .v4-content .greeting-action-row.name-area,
body.v4-body .v4-content .control_section.greeting > .greeting-action-row:first-of-type:not([data-container_name]) {
border-top: none;
padding-top: 0;
margin-top: 0;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row.name-area:not(.hidden) {
display: grid !important; /* ID-level specificity beats all flex !important */
grid-template-columns: var(--greeting-label-width) 200px var(--greeting-action-width) var(--greeting-cancel-width);
column-gap: var(--greeting-grid-gap);
align-items: center;
min-height: var(--greeting-control-height);
margin: var(--greeting-row-gap) 0 0;
padding: 0;
}
body.v4-body .v4-content .greeting-action-row.name-area > * {
margin-left: 0;
margin-right: 0;
}
body.v4-body .v4-content .greeting-action-row.name-area .greeting_name {
width: 200px;
flex: 0 0 200px;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
max-height: var(--greeting-control-height);
line-height: 32px;
padding-top: 0;
padding-bottom: 0;
border-color: var(--aa-elegant-control-border);
border-radius: var(--greeting-button-radius);
box-shadow: none;
}
body.v4-body .v4-content .greeting-action-row.name-area :is(.add_new_greeting:not(.hidden), .cancel_new_greeting:not(.hidden)) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--greeting-control-height);
min-height: var(--greeting-control-height);
line-height: 32px;
padding: 0 12px;
margin: 0;
background: #FFFFFF;
border: 1px solid var(--aa-elegant-control-border);
border-radius: var(--greeting-button-radius);
color: var(--aa-elegant-control-text);
font-size: 13px;
font-weight: 700;
}
/* Action-row children: grid items fill their column cell.
* CRITICAL: a:not(.hidden) — JS adds .hidden to the Speech-to-Text
* wrapper during STT processing. Without :not(.hidden), the
* hidden anchor still gets display:inline-flex and occupies a grid
* cell, pushing the row to 76 px (two rows) instead of 34 px. */
body.v4-body .v4-content .greeting-action-row[data-container_name] > :is(a:not(.hidden), div.uploading:not(.hidden), div.play-loader:not(.hidden), div.download_spinner:not(.hidden), div.stt_spinner:not(.hidden)),
body.v4-body .v4-content .greeting-action-row[data-container_name] > a:not(.hidden) {
display: inline-flex;
align-items: center;
margin: 0;
width: 100%;
min-width: 0;
}
/* Action-row labels (Listen, Create, etc.)
* display:flex + align-items:center beats the global
* v4_forms.css label { line-height:1.4 !important } rule
* that otherwise top-aligns text inside the 34px box. */
body.v4-body .v4-content [id$="_app"] .greeting-action-row > .greeting_label {
grid-column: 1 / 2;
flex: 0 0 var(--greeting-label-width);
display: flex !important;
align-items: center !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--v4-text-muted);
width: var(--greeting-label-width);
min-width: var(--greeting-label-width);
max-width: var(--greeting-label-width);
align-self: center;
height: var(--greeting-control-height);
margin: 0 !important;
}
body.v4-body .v4-content .aa-action-row-normalized > .greeting_label {
grid-column: 1 / 2;
flex: 0 0 auto;
display: flex !important;
align-items: center !important;
font-size: 13px;
height: var(--greeting-control-height);
margin: 0;
width: auto;
}
/* Action-row buttons (tts-btn / download_link / btn variants) —
* uniform 34px-height rounded-rect, brand-soft hover.
* !important on layout props to beat inline styles and competing cascades. */
body.v4-body .v4-content .greeting-action-row .btn.tts-btn,
body.v4-body .v4-content .greeting-action-row .download_link .btn,
body.v4-body .v4-content .tts-action-row .btn.tts-btn,
body.v4-body .v4-content .announcement_controls .btn.tts-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
height: var(--greeting-control-height) !important;
min-height: var(--greeting-control-height) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 7px !important;
margin: 0 !important;
background: #FFFFFF !important;
border: 1px solid var(--greeting-border-color) !important;
border-radius: var(--greeting-button-radius) !important;
box-shadow: none !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--v4-text-secondary) !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, box-shadow .15s ease !important;
}
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row a:not(.hidden),
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .greeting-action-row a:not(.hidden):hover,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .tts-action-row a:not(.hidden),
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .tts-action-row a:not(.hidden):hover,
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .announcement_controls a:not(.hidden),
body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #extension_app, #greetings_app) .announcement_controls a:not(.hidden):hover {
display: flex !important;
align-items: center !important;
height: var(--greeting-control-height) !important;
line-height: 1 !important;
border-bottom: none !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.v4-body .v4-content .greeting-action-row .btn.tts-btn i,
body.v4-body .v4-content .greeting-action-row .download_link .btn i,
body.v4-body .v4-content .tts-action-row .btn.tts-btn i,
body.v4-body .v4-content .announcement_controls .btn.tts-btn i {
flex: 0 0 auto;
font-size: 12px;
line-height: 1;
opacity: 0.75;
margin-right: 4px;
margin-left: 0;
width: auto;
}
/* Hidden state visibility lock for spinner/action wrappers */
body.v4-body .v4-content .greeting-action-row .btn.hidden,
body.v4-body .v4-content .greeting-action-row a.hidden {
display: none;
}
/* ----- menu_key_greeting_controls (per-key inline controls) -- */
/* Single column: only one button (Play OR Stop) is visible at a time,
so the visible button fills the full width of the cell. */
body.v4-body .v4-content .business_menu_container .menu_key_greeting_controls,
body.v4-body .v4-content .after_menu_container .menu_key_greeting_controls,
body.v4-body .v4-content .holiday_menu_container .menu_key_greeting_controls,
body.v4-body .v4-content #submenu [id$="_table"] .menu_key_greeting_controls {
display: inline-grid;
grid-template-columns: 1fr;
grid-auto-flow: column;
align-items: center;
gap: 6px;
min-height: 34px;
}
body.v4-body .v4-content #auto_attendant_app .menu_key_greeting_controls {
display: inline-grid;
grid-template-columns: 1fr;
grid-auto-flow: column;
align-items: center;
gap: 6px;
}
body.v4-body .v4-content #auto_attendant_app .menu_key_greeting_controls > *,
body.v4-body .v4-content #auto_attendant_app .menu_key_greeting_controls > a > .btn {
margin: 0;
}
body.v4-body .v4-content .menu_key_greeting_controls a:not(.hidden) {
display: inline-flex;
}
body.v4-body .v4-content .menu_key_greeting_controls .hidden,
body.v4-body .v4-content .menu_key_greeting_controls a.hidden,
body.v4-body .v4-content .menu_key_greeting_controls .btn.hidden {
display: none;
}
/* ----- @ narrow viewport: collapse rows to single column ----- */
@media (max-width: 760px) {
body.v4-body .v4-content .aa-action-row-normalized:not(.hidden),
body.v4-body .v4-content .greeting-action-row[data-container_name]:not(.hidden),
body.v4-body .v4-content .greeting-action-row.name-area:not(.hidden) {
grid-template-columns: minmax(0, 1fr);
flex-wrap: wrap;
}
body.v4-body .v4-content .greeting-action-row[data-container_name] :is(.btn.tts-btn, .download_link .btn, .spinner_button) {
max-width: 100%;
min-width: 0;
width: 100%;
}
}
/* ============================================================
* § 8 — PRE-ALERT (announcement controls)
* ------------------------------------------------------------
* The Pre-alert pane houses an announcement recorder (its own
* recording-selector and action-row variant). Pre-alert SCHEDULE
* containers (.pre_alert_content_section subsection wrappers,
* schedule criteria list, "+" add-criteria button) are schedule
* logic and live in the schedule module — explicitly NOT in
* this file.
*
* Tokens consumed:
* --aa-ext-recorder-* family (extension pre-alert overrides)
* --aa-ext-prealert-* family (chrome borders)
* --greeting-* family (general action-row sizing)
* ============================================================ */
/* ----- Pre-alert wrapper + inner -----
The pre-alert card frame is CENTRALIZED on the .aa-call-feature wrapper
(canonical rule in entity_shared.css, same for all four entities). The inner
#pre-alert stays FLAT. Do not re-add an extension-specific pre-alert card
here - it caused a per-entity border/width drift. */
body.v4-body .v4-content #extension_app #advanced-notice .aa-call-feature[data-aa-feature-content="pre-alert"] #pre-alert {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
}
/* ----- Pre-alert section header / title / desc ------------------ */
body.v4-body .v4-content :is(#pre-alert, #office_anywhere, #sequential_ring, #call_notify, #simultaneous_ring, #call_forwarding_no_answer, #call_forwarding_busy, #priority_alert, #selective_rejection, #call_forwarding_always, #do_not_disturb, #call_waiting, #calling_line_id_blocking, #call_recording, #push_to_talk, #call_park, #directed_call_pickup, #busy_lamp, #assistance, #departments) .aa-prealert-section-header {
border-bottom: 1px solid var(--aa-ext-prealert-divider);
margin: 0 0 18px;
padding: 0 0 16px;
}
body.v4-body .v4-content :is(#pre-alert, #office_anywhere, #sequential_ring, #call_notify, #simultaneous_ring, #call_forwarding_no_answer, #call_forwarding_busy, #priority_alert, #selective_rejection, #call_forwarding_always, #do_not_disturb, #call_waiting, #calling_line_id_blocking, #call_recording, #push_to_talk, #call_park, #directed_call_pickup, #busy_lamp, #assistance, #departments) .aa-prealert-section-title {
color: #0F1729;
font: 750 18px/1.25 "Plus Jakarta Sans", system-ui, sans-serif;
letter-spacing: 0;
margin: 0 0 4px;
}
body.v4-body .v4-content :is(#pre-alert, #office_anywhere, #sequential_ring, #call_notify, #simultaneous_ring, #call_forwarding_no_answer, #call_forwarding_busy, #priority_alert, #selective_rejection, #call_forwarding_always, #do_not_disturb, #call_waiting, #calling_line_id_blocking, #call_recording, #push_to_talk, #call_park, #directed_call_pickup, #busy_lamp, #assistance, #departments) .aa-prealert-section-desc {
color: #6B7F97;
font: 400 13px/1.45 "Plus Jakarta Sans", system-ui, sans-serif;
margin: 0;
}
/* Toggle-only call features have no body beneath the header, so the header
divider + bottom spacing would leave an orphan rule line inside the card.
Drop it for these; content-bearing features keep the divider. */
body.v4-body .v4-content :is(#do_not_disturb, #call_waiting, #calling_line_id_blocking, #call_recording, #push_to_talk, #call_park, #directed_call_pickup) :is(.aa-prealert-section-header, .aa-section-header-with-controls) {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/* Collapsible features: when toggle is off and body is hidden, drop the
header divider so the card stays compact. */
body.v4-body .v4-content :is(#pre-alert, #office_anywhere, #sequential_ring, #call_notify, #simultaneous_ring, #call_forwarding_no_answer, #call_forwarding_busy, #priority_alert, #selective_rejection, #call_forwarding_always, #busy_lamp, #assistance, #departments) .aa-prealert-section-header:has(+ .hidden) {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/* ----- Pre-alert content / layout / sections -------------------- */
body.v4-body .v4-content #pre-alert .pre_alert_content_section {
display: block;
margin: 0;
padding: 0;
}
body.v4-body .v4-content #pre-alert .aa-prealert-layout {
display: block;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
body.v4-body .v4-content #pre-alert .aa-prealert-section {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
width: 100%;
}
body.v4-body .v4-content #pre-alert .aa-prealert-section + .aa-prealert-section {
border-top: 1px solid var(--aa-ext-prealert-divider) !important;
margin-top: 18px !important;
padding-top: 18px !important;
}
body.v4-body .v4-content #pre-alert .aa-prealert-section > .aa-subsection-header {
background: transparent;
border: 0;
margin: 0 0 10px;
padding: 0;
}
body.v4-body .v4-content #pre-alert .aa-prealert-section .aa-inline-subsection-title label {
color: #0F1729;
font: 750 16px/1.3 "Plus Jakarta Sans", system-ui, sans-serif;
letter-spacing: 0;
margin: 0;
padding: 0;
}
/* Pre-alert Schedule "add criterion" (+) button. MOVED here 2026-06-09 from
auto_attendant_editable.css — the shared pre_alert view emits
.btn-add-prealert-criterion for ALL entities (AA/CC/HG/Ext), so it belongs in
this canonical recorder/pre-alert file, not in an entity folder. The title row
goes flex/full-width so the button right-aligns. Brand orange on hover. */
body.v4-body .v4-content #pre-alert .aa-prealert-section--schedule .aa-inline-subsection-title {
display: flex !important;
align-items: center !important;
width: 100% !important;
}
body.v4-body .v4-content #pre-alert .btn-add-prealert-criterion {
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
border-radius: 50% !important;
border: 1.5px solid #C6D3E1 !important;
background: #FFFFFF !important;
color: #5F748C !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 0 1px 0 !important;
transition: border-color 0.15s, color 0.15s !important;
}
body.v4-body .v4-content #pre-alert .btn-add-prealert-criterion:hover {
border-color: #F89939 !important;
color: #F89939 !important;
}
/* ----- Pre-alert announcement / schedule cards ----------------- */
body.v4-body .v4-content #pre-alert :is(.aa-prealert-announcement-card, .aa-prealert-schedule-card, .aa-embedded-announcement) {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
gap: 0; /* kill flex gap from .aa-greeting-area-normalized (5px);
children's own margin-top handles row spacing */
margin: 0;
padding: 0;
width: 100%;
}
body.v4-body .v4-content #pre-alert .aa-prealert-announcement-card :is(.control_section.greeting, .control_section.greeting > div, .greeting_content) {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
width: 100%;
}
/* Grid removed: display:grid prevented margin-collapse, doubling
the Recording→Listen gap to 10px (Open tab has 5px).
Children's own margin-top: 5px handles row spacing in block flow. */
/* ----- Pre-alert recording selector (shared-recording-selector
* scoped inside #pre-alert; full visual override here) ---- */
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer {
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: var(--aa-ext-recorder-label-width)
var(--aa-ext-recorder-select-width)
var(--aa-ext-recorder-edit-width);
column-gap: var(--aa-ext-recorder-grid-gap);
row-gap: var(--aa-ext-recorder-row-gap);
align-items: center;
justify-content: flex-start;
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
width: 100%;
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer:has(.edit_greeting_name.hidden) {
grid-template-columns: var(--aa-ext-recorder-label-width)
var(--aa-ext-recorder-default-select-width);
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .hidden,
body.v4-body .v4-content #pre-alert .greeting-action-row > .hidden,
body.v4-body .v4-content #pre-alert .greeting-action-row > a.hidden {
display: none;
visibility: hidden;
}
/* Pre-alert recorder labels — keep the slot but replace text via
* pseudo-element to force the consistent Recording / Listen /
* Create wording. */
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .greeting_label,
body.v4-body .v4-content #pre-alert .greeting-action-row > .greeting_label {
display: flex;
grid-column: 1 / 2;
color: transparent;
font-size: 0;
margin: 0;
min-width: 0;
padding: 0;
width: auto;
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .greeting_label::after,
body.v4-body .v4-content #pre-alert .greeting-action-row > .greeting_label::after {
display: inline-flex;
align-items: center;
color: #52677F;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-size: 13px;
font-weight: 650;
letter-spacing: 0;
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .greeting_label::after {
content: "";
}
body.v4-body .v4-content #pre-alert .greeting-action-row[data-container_name="actions"] > .greeting_label::after {
content: "";
}
body.v4-body .v4-content #pre-alert .greeting-action-row[data-container_name="upload_options"] > .greeting_label::after {
content: "";
}
/* Pre-alert select / input / edit_greeting_name / add+cancel
* pills (matches the design-token-driven button height) */
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > :is(select#greeting_select_dropdown, input[name="add_new_greeting_input"]),
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .edit_greeting_name,
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > :is(.add_new_greeting, .cancel_new_greeting):not(.hidden) {
display: inline-flex;
align-items: center;
background: #FFFFFF;
border: 1px solid #C6D3E1;
border-radius: var(--greeting-button-radius);
box-shadow: none;
color: #153354;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
margin: 0;
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > select#greeting_select_dropdown:not(.hidden),
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > input[name="add_new_greeting_input"]:not(.hidden) {
grid-column: 2 / 3;
justify-content: flex-start;
max-width: 100%;
min-width: 0;
padding: 0 34px 0 14px;
width: 100%;
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer:has(.edit_greeting_name.hidden) > select#greeting_select_dropdown:not(.hidden) {
width: var(--aa-ext-recorder-default-select-width);
}
body.v4-body .v4-content #pre-alert .shared-recording-selector.greeting_selector_fixer > .edit_greeting_name:not(.hidden) {
grid-column: 3 / 4;
justify-content: center;
max-width: var(--aa-ext-recorder-edit-width);
min-width: var(--aa-ext-recorder-edit-width);
padding: 0 8px;
width: var(--aa-ext-recorder-edit-width);
}
/* ----- Pre-alert action row (Listen / Create / Download row) --- */
body.v4-body .v4-content #pre-alert .greeting-action-row:not(.hidden),
body.v4-body .v4-content #pre-alert .announcement_controls.greeting-action-row:not(.hidden) {
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: var(--aa-ext-recorder-label-width)
repeat(3, var(--aa-ext-recorder-button-width));
column-gap: var(--aa-ext-recorder-grid-gap);
row-gap: var(--aa-ext-recorder-row-gap);
align-items: center;
justify-content: flex-start;
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
max-width: 100%;
padding: 0;
width: 100%;
}
body.v4-body .v4-content #pre-alert .control_section.greeting .greeting-action-row + .greeting-action-row {
margin-top: var(--aa-ext-recorder-row-gap);
}
body.v4-body .v4-content #pre-alert .greeting-action-row > :is(a, .download_spinner, .stt_spinner, .speech_to_text_toggler, .tts_trigger, .play-loader):not(.hidden) {
margin: 0;
max-width: 100%;
min-width: 0;
width: 100%;
}
/* Pre-alert action-row buttons (pill style w/ filled bg) */
body.v4-body .v4-content #pre-alert .greeting-action-row[data-container_name] :is(button.btn.tts-btn, .download_link .btn, .download_link button.btn, .tts_trigger button.btn.tts-btn) {
display: inline-flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 1px solid #C6D3E1;
border-radius: var(--greeting-button-radius);
box-shadow: none;
color: #153354;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
margin: 0;
max-width: 100%;
min-width: 0;
padding: 0 12px;
width: 100%;
}
body.v4-body .v4-content #pre-alert .greeting-action-row[data-container_name] :is(button.btn.tts-btn, .download_link .btn, .download_link button.btn, .tts_trigger button.btn.tts-btn) i,
body.v4-body .v4-content #pre-alert .greeting-action-row[data-container_name] :is(button.btn.tts-btn, .download_link .btn, .download_link button.btn, .tts_trigger button.btn.tts-btn) svg {
flex: 0 0 auto;
margin-right: 6px;
}
/* Pre-alert action row when used in admin pages: AA-style label
* width (116px label slot, 146px buttons). */
body.v4-body .v4-content #pre-alert .greeting-action-row > label.greeting_label {
font-size: 0;
color: transparent;
width: 116px;
min-width: 116px;
flex: 0 0 116px;
padding: 0;
margin: 0 !important;
}
body.v4-body .v4-content #pre-alert .greeting-action-row.announcement_controls > label.greeting_label::before {
content: "";
display: inline-block;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
color: #1B3557;
}
body.v4-body .v4-content #pre-alert .greeting-action-row:has(.upload_new_greeting) > label.greeting_label::before {
content: "";
display: inline-block;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
color: #1B3557;
}
body.v4-body .v4-content #pre-alert .greeting-action-row .btn.tts-btn:not(.spinner_button):not(.hidden):not(.tts-btn-sm),
body.v4-body .v4-content #pre-alert .greeting-action-row .tts_trigger {
min-width: 146px;
width: 146px;
}
body.v4-body .v4-content #pre-alert .greeting-action-row > a:not(.hidden) {
width: 146px;
min-width: 146px;
max-width: 146px;
box-sizing: border-box;
}
/* Pre-alert action-row flex fallback (legacy markup safety net) */
body.v4-body .v4-content #pre-alert .greeting-action-row {
display: flex;
grid-template-columns: none;
gap: 12px;
column-gap: 12px;
align-items: center;
margin: 0;
padding: 0;
}
body.v4-body .v4-content #pre-alert .greeting-action-row + .greeting-action-row {
margin-top: 2px;
}
body.v4-body .v4-content #pre-alert #greeting_select_dropdown {
margin-left: 0;
}
/* AA pre-alert control section (announcement card body): align
* top, full-width, kill the legacy left margin pull-in. */
body.v4-body .v4-content #auto_attendant_app #pre-alert .control_section.greeting {
align-items: flex-start;
}
body.v4-body .v4-content #auto_attendant_app #pre-alert .control_section.greeting > div {
width: 100%;
margin-left: 0;
}
body.v4-body .v4-content #auto_attendant_app #pre-alert .control_section.greeting .greeting-action-row {
justify-content: flex-start;
}
body.v4-body .v4-content #auto_attendant_app #pre-alert .control_section.greeting .greeting_label {
min-width: 90px;
text-align: left;
}
/* Drop the legacy label pseudo-elements inside pre-alert (we set
* our own ::before/::after content above). */
body.v4-body .v4-content #auto_attendant_app #pre-alert .greeting-action-row > .greeting_label::before,
body.v4-body .v4-content #auto_attendant_app #pre-alert .greeting-action-row > .greeting_label::after,
body.v4-body .v4-content #auto_attendant_app #pre-alert .shared-recording-selector > .greeting_label::before,
body.v4-body .v4-content #auto_attendant_app #pre-alert .shared-recording-selector > .greeting_label::after,
body.v4-body .v4-content #auto_attendant_app .aa-prealert-announcement-card .greeting-action-row > .greeting_label::before,
body.v4-body .v4-content #auto_attendant_app .aa-prealert-announcement-card .greeting-action-row > .greeting_label::after,
body.v4-body .v4-content #auto_attendant_app .aa-prealert-announcement-card .shared-recording-selector > .greeting_label::before,
body.v4-body .v4-content #auto_attendant_app .aa-prealert-announcement-card .shared-recording-selector > .greeting_label::after {
content: "";
display: none;
}
/* ============================================================
* § 9 — NAME RECORDING (the user's name recorder)
* ------------------------------------------------------------
* Voicemail name recording is a tiny dedicated recorder pane
* inside #voicemail (Ext/HG/CC). The .aa-vm-static-name-recording
* variant strips the toggle and keeps the recorder always-on
* (the feature can't actually be disabled at the BroadWorks
* layer). The block lives below the main greeting recorder.
*
* Selectors covered here are name-recording specific. The
* shared .greeting-action-row.name-area row (which holds the
* Name input + Save/Cancel) lives in § 7 because it's reused
* across greeting types.
* ============================================================ */
/* The name-recording content block inside #voicemail */
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) #voicemail #name-recording-content {
width: 100%;
max-width: 100%;
margin: 14px 0 0;
padding: 20px 0 0;
}
/* Static (always-on) variant: hide the toggle controls, force
* the section visible. */
body.v4-body .v4-content .aa-vm-static-name-recording .aa-section-toggle {
display: none;
}
body.v4-body .v4-content .aa-vm-static-name-recording [data-arrow-toggle-disabled] {
cursor: default;
}
body.v4-body .v4-content .aa-vm-static-name-recording input[name="name_recording_enabled"],
body.v4-body .v4-content .aa-vm-static-name-recording .aa-subsection-header img {
display: none;
}
/* Per-area "name-area" .btn.hidden lock — keep hidden buttons
* fully out of the flow so the row doesn't tower over the
* Save / Cancel pair. */
body.v4-body .v4-content .name-area .btn.hidden {
display: none;
}
body.v4-body .v4-content .name-area .add_new_greeting,
body.v4-body .v4-content .name-area .cancel_new_greeting {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================
* v4_recorder_module.css
* § 10 — VOICEMAIL DELIVERY (email forward, transfer-on-0)
* ------------------------------------------------------------
* Voicemail Delivery sub-row family inside #voicemail-tab:
* - .voice_message_email_address_row (delivery wrapper)
* - .voice_message_notify_email (notify-by-email toggle row)
* - .voice_message_carbon_copy (carbon-copy toggle row)
* - .voice_message_transfer (transfer-on-0 toggle row)
* - .vm-setting-area / .vm-setting-row (generic VM setting rows)
* - .vm-delivery-row-active (JS-applied active class)
* - .vm-setting-row-active (JS-applied active class)
* - .vm-conditional-input (conditional email/phone input)
*
* Painter-replacement notes:
* .voice_message_email_address_row.aa-vm-email-row-grid is a new
* class introduced in Phase 2.5 to replace inline style.setProperty
* calls in call_center.js:2623-2627 and hunt_group.js:2630-2634.
* The matching rule is at the bottom of this section.
*
* .voice_message_email_address_row.vm-email-grid-active already
* exists as a JS-toggled marker in v4_2026.css (kept verbatim).
* ============================================================ */
/* ------------------------------------------------------------
* Generic .vm-setting-area / .vm-setting-row layout
* Default flex row, label on left, control on right.
* Overridden to grid in scoped contexts below.
* ------------------------------------------------------------ */
body.v4-body .v4-content .vm-setting-area {
margin-left: -10px;
}
body.v4-body .v4-content .vm-setting-area,
body.v4-body .v4-content .vm-setting-area div,
body.v4-body .v4-content .vm-setting-area label {
line-height: 30px;
}
body.v4-body .v4-content .vm-setting-row {
display: flex;
}
body.v4-body .v4-content .vm-setting-row div:first-child {
width: 200px;
}
body.v4-body .v4-content .vm-setting-row div:nth-child(2) {
min-width: 50px;
margin-left: 10px;
display: flex;
width: 120px;
}
body.v4-body .v4-content .vm-setting-row div:last-child {
margin-left: 10px;
}
body.v4-body .v4-content .vm-setting-row div:last-child input[type='checkbox'] {
display: none;
}
/* ------------------------------------------------------------
* .voice_mail_container .vm-setting-area / .vm-setting-row
* Scoped grid layout for the voicemail container in
* Extension / Hunt Group / Call Center voicemail tabs.
* AA scope included separately (block layout via aa-vm-section).
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#auto_attendant_app, #extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-area {
margin-top: 14px;
padding-top: 20px;
/* border-top killed: the .v4-section-desc::after 480px divider provides
the visual separator. The full-width border-top was a conflicting line. */
border-top: 0;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row {
width: 100%;
max-width: 100%;
min-height: 44px;
display: grid;
grid-template-columns: minmax(210px, 260px) minmax(260px, 420px) minmax(0, 1fr) auto;
column-gap: 12px;
align-items: center;
margin: 0;
padding: 4px 0;
border: 0;
background: transparent;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row + .vm-setting-row {
border-top: 1px solid #E8EEF5;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row > div {
width: auto;
max-width: 100%;
margin: 0;
padding: 0;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row > div:empty,
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row .error_message:empty {
display: none;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row label.label {
margin: 0;
color: #314860;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row input.form-control,
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row select.form-control {
width: min(100%, 420px);
max-width: 100%;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container .vm-setting-row .switch {
justify-self: end;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container.v4-feature-copy,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app) .voice_mail_container.v4-feature-copy {
display: block !important;
grid-template-columns: none !important;
margin-top: 16px !important;
}
/* ------------------------------------------------------------
* Auto-attendant #voicemail .aa-vm-section nested row rhythm
* AA voicemail uses per-section bordered cards (Pass 36ac).
* ------------------------------------------------------------ */
body.v4-body .v4-content #auto_attendant_app #advanced .aa-vm-section .vm-setting-area {
margin-top: 6px;
}
body.v4-body .v4-content #auto_attendant_app #advanced .aa-vm-section .vm-setting-row {
padding: 10px 0;
margin: 0;
border-top: 1px solid var(--v4-border-light);
}
body.v4-body .v4-content #auto_attendant_app #advanced .aa-vm-section .vm-setting-row:first-of-type {
border-top: 0;
padding-top: 0;
}
body.v4-body .v4-content #auto_attendant_app #advanced .aa-vm-section .vm-setting-row:last-of-type {
padding-bottom: 0;
}
/* ------------------------------------------------------------
* Extension/HG/CC #voicemail .aa-vm-section nested rhythm
* Extension/HG/CC version of the AA aa-vm-section spacing
* from extension_editable.css L7368-L7391.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) #voicemail .aa-vm-section .vm-setting-area {
margin-top: 6px;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) #voicemail .aa-vm-section .vm-setting-row {
padding: 10px 0;
margin: 0;
border-top: 1px solid var(--v4-border-light);
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) #voicemail .aa-vm-section .vm-setting-row:first-of-type {
border-top: 0;
padding-top: 0;
}
body.v4-body .v4-content :is(#extension_app, #call_center_app, #hunt_group_app) #voicemail .aa-vm-section .vm-setting-row:last-of-type {
padding-bottom: 0;
}
/* ------------------------------------------------------------
* .voice_message_email_address_row.vm-email-grid-active
* JS-toggled marker on the email-address row.
* Same grid shape as the painter-replacement class below;
* retained for legacy JS callers (extension_editable.js).
* Source: v4_2026.css L1989-L1995.
* ------------------------------------------------------------ */
body.v4-body .v4-content .voice_message_email_address_row.vm-email-grid-active {
display: grid;
grid-template-columns: 260px 280px minmax(0, 1fr);
align-items: center;
column-gap: 16px;
row-gap: 4px;
}
/* ------------------------------------------------------------
* PAINTER-REPLACEMENT CLASS
* Was inline-painted by:
* - call_center.js:2623-2627
* - hunt_group.js:2630-2634
* via row.style.setProperty('...', '...', 'important').
* Phase 2.5 will replace those calls with
* row.classList.add('aa-vm-email-row-grid')
* and this rule supplies the matching CSS.
* ------------------------------------------------------------ */
body.v4-body .v4-content .voice_message_email_address_row.aa-vm-email-row-grid {
display: grid;
grid-template-columns: 260px 280px minmax(0, 1fr);
align-items: center;
column-gap: 16px;
row-gap: 4px;
}
/* ------------------------------------------------------------
* § 10 (supplement) — Delivery row sub-controls
* (Pulled from v4_design.css L5680-L5830 — Section 12b's missing
* companion. These rules govern the inner controls of the Phone/Email
* "Voicemail Received By" select, Carbon Copy toggle column placement,
* vm-conditional-input visible-but-disabled states, and the sub-row
* "Email Address" pseudo-labels that appear when toggles are enabled.)
* ------------------------------------------------------------ */
/* vm-setting-area: padding above first row so dropdown clears the
section divider above */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .vm-setting-area {
padding-top: 12px;
}
/* Phone/Email "Voicemail Received By" select — custom SVG chevron,
strips native chrome for cross-browser consistency */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email select[name="send_voice_message_notify_email_enabled"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234F5B6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px 14px;
cursor: pointer;
}
/* [REMOVED] CC toggle grid pin — moved to § 14.J */
/* Carbon Copy email sub-row — appears when toggle is ON */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input[name="voice_message_carbon_copy_email_address"]:not(.hidden)) {
align-items: center;
display: grid;
grid-column: 1 / 3;
grid-row: 2;
grid-template-columns: var(--aa-vm-label-width) minmax(260px, var(--aa-vm-control-width));
margin-top: 6px;
gap: 8px;
}
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input[name="voice_message_carbon_copy_email_address"]:not(.hidden))::before {
color: #1B3557;
content: "Email Address";
font-size: 13px;
font-weight: 600;
line-height: 20px;
white-space: nowrap;
}
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input[name="voice_message_carbon_copy_email_address"]:not(.hidden)) input[name="voice_message_carbon_copy_email_address"] {
grid-column: 2 / 3;
}
/* Even spacing between vm-setting-rows so when one row expands to
two grid rows, the next row doesn't sit tight against it */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .vm-setting-area > .row > div > .vm-setting-row + .vm-setting-row {
margin-top: 14px;
}
/* [REMOVED] vm-conditional-input display/disabled/active states — moved to § 14.S */
/* Voicemail Received By "Email Address" sub-row — always visible,
anchored to vm-conditional-input presence */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email > div:nth-child(2):has(input.vm-conditional-input) {
align-items: center;
display: grid;
grid-column: 1 / 3;
grid-row: 2;
grid-template-columns: var(--aa-vm-label-width) minmax(260px, var(--aa-vm-control-width));
margin-top: 6px;
}
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email > div:nth-child(2):has(input.vm-conditional-input)::before {
color: var(--v4-text);
content: "Email Address";
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 20px;
white-space: nowrap;
}
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email > div:nth-child(2):has(input.vm-conditional-input) input.vm-conditional-input {
grid-column: 2 / 3;
}
/* ============================================================
* § 11 — ANNOUNCEMENT AREA
* ------------------------------------------------------------
* Announcement and quick-section recorder wrappers across
* Auto-attendant, Call Center, Hunt Group, Submenu, and
* Advanced/Pre-alert layers.
*
* - .announcement-area wrapper (AA #advanced)
* - .announcement_quick_section AA business/after/holiday
* hours greeting wrapper
* - .announcement_quick_section also seen on submenu
* .announcement_controls card
* - CC / HG `#announcements` rules (entrance message, comfort
* message, MOH for queued calls, estimated wait, mandatory
* entrance)
*
* The painters in extension_editable.js read the
* .announcement_quick_section width / column-gap from these
* rules; do not change without checking that JS too.
* ============================================================ */
/* ------------------------------------------------------------
* #advanced .announcement-area wrapper (AA Pre-alert / VM tabs)
* ------------------------------------------------------------ */
body.v4-body .v4-content #advanced .announcement-area,
body.v4-body .v4-content #advanced .voicemail-greeting-area {
margin: 0 !important;
}
body.v4-body .v4-content #advanced .announcement-area > .greeting_selector_fixer,
body.v4-body .v4-content #advanced .voicemail-greeting-area > .announcement_controls {
width: 100%;
margin: 0;
padding: 0 0 14px;
border-bottom: 1px solid rgba(231, 237, 244, 0.9);
display: flex;
align-items: center;
gap: var(--greeting-grid-gap);
}
body.v4-body .v4-content #advanced .announcement-area .greeting,
body.v4-body .v4-content #advanced .voicemail_main_greeting {
margin: 14px 0 0;
padding: 0;
border: 0;
background: transparent;
}
/* ------------------------------------------------------------
* AA #auto_attendant_app .announcement_quick_section family
* Business / after-hours / holiday / submenu greeting wrappers.
* Compact 34px high quick-section row.
* Source: v4_2026.css L2570-L2581 + auto_attendant.css L484-L507.
* ------------------------------------------------------------ */
body.v4-body .v4-content [id$="_app"] .business_hours_greeting_area .announcement_quick_section,
body.v4-body .v4-content [id$="_app"] .after_hours_greeting_area .announcement_quick_section,
body.v4-body .v4-content [id$="_app"] .holiday_hours_greeting_area .announcement_quick_section {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
height: 34px;
min-height: 34px;
max-height: 34px;
align-items: center;
}
/* AA-only outer wrapper (no bottom border on the quick-section). */
body.v4-body .v4-content #business .business_hours_greeting_area > .announcement_quick_section,
body.v4-body .v4-content #after-hours .after_hours_greeting_area > .announcement_quick_section,
body.v4-body .v4-content #holiday .holiday_hours_greeting_area > .announcement_quick_section {
border-bottom: 0;
padding-bottom: 0;
}
/* AA unified-shell quick-section flatten (no card-in-card). */
body.v4-body .v4-content #auto_attendant_app :is(.business_hours_greeting_area, .after_hours_greeting_area, .holiday_hours_greeting_area, .aa-submenu-greeting-card) .announcement_quick_section {
align-items: stretch;
display: block;
flex: 0 0 100%;
max-width: 100%;
padding: 0;
width: 100%;
}
/* ------------------------------------------------------------
* AA .announcement_quick_section internal controls
* The .right_content / .announcement_controls flex layout
* inside each quick section.
* Source: auto_attendant_inline.css L1054-L1080.
* ------------------------------------------------------------ */
body.v4-body .v4-content #auto_attendant_app .announcement_quick_section .announcement_controls,
body.v4-body .v4-content #auto_attendant_app .announcement-area > .greeting_selector_fixer,
body.v4-body .v4-content #auto_attendant_app .voicemail-greeting-area > .announcement_controls,
body.v4-body .v4-content #auto_attendant_app .submenu_greeting .announcement_controls {
width: 100%;
align-items: center;
justify-content: flex-start;
gap: var(--greeting-grid-gap);
}
body.v4-body .v4-content #auto_attendant_app .announcement_quick_section .right_content,
body.v4-body .v4-content #auto_attendant_app .voicemail-greeting-area > .announcement_controls .right_content,
body.v4-body .v4-content #auto_attendant_app .submenu_greeting .greeting_selector_fixer {
align-items: center;
justify-content: flex-start;
gap: var(--greeting-grid-gap);
}
/* ------------------------------------------------------------
* AA .announcement-area / .voicemail-greeting-area hidden buttons
* Hide the Apply/Cancel/Edit affordances that aren't currently
* relevant (toggle-driven by JS).
* Source: auto_attendant_inline.css L1087-L1097.
* ------------------------------------------------------------ */
body.v4-body .v4-content #auto_attendant_app .announcement-area .add_new_greeting.hidden,
body.v4-body .v4-content #auto_attendant_app .announcement-area .cancel_new_greeting.hidden,
body.v4-body .v4-content #auto_attendant_app .announcement-area .edit_greeting_name.hidden,
body.v4-body .v4-content #auto_attendant_app .voicemail-greeting-area .add_new_greeting.hidden,
body.v4-body .v4-content #auto_attendant_app .voicemail-greeting-area .cancel_new_greeting.hidden,
body.v4-body .v4-content #auto_attendant_app .voicemail-greeting-area .edit_greeting_name.hidden {
display: none !important;
}
/* ------------------------------------------------------------
* AA Pre-alert / Sub-menu announcement cards
* Embedded card wrappers (aa-prealert-announcement-card and
* aa-submenu-greeting-card).
* Source: auto_attendant_inline.css L1389-L1426.
* ------------------------------------------------------------ */
body.v4-body .v4-content #submenu .aa-submenu-greeting-card > .announcement_controls,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card > .announcement_controls {
width: 100%;
display: flex;
align-items: center;
gap: var(--greeting-grid-gap);
}
body.v4-body .v4-content #submenu .aa-submenu-greeting-card .greeting_selector_fixer,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card .greeting_selector_fixer {
width: 100%;
}
body.v4-body .v4-content #submenu .aa-submenu-greeting-card .control_section.greeting,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card .control_section.greeting {
margin-top: 14px;
}
body.v4-body .v4-content #submenu .aa-submenu-greeting-card .add_new_greeting.hidden,
body.v4-body .v4-content #submenu .aa-submenu-greeting-card .cancel_new_greeting.hidden,
body.v4-body .v4-content #submenu .aa-submenu-greeting-card .edit_greeting_name.hidden,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card .add_new_greeting.hidden,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card .cancel_new_greeting.hidden,
body.v4-body .v4-content #advanced .aa-prealert-announcement-card .edit_greeting_name.hidden {
display: none !important;
}
/* ------------------------------------------------------------
* .announcement-area / .announcement_controls download link
* Used by greeting / voicemail / submenu recorder rows.
* Source: v4_2026.css L2906-L2922.
* ------------------------------------------------------------ */
body.v4-body .v4-content [id$="_app"] .greeting .download_link,
body.v4-body .v4-content [id$="_app"] .announcement_controls .download_link,
body.v4-body .v4-content [id$="_app"] .announcement-area .download_link {
padding: 0 !important;
border: none !important;
background: transparent !important;
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
box-shadow: none !important;
}
body.v4-body .v4-content [id$="_app"] .greeting .download_link:hover,
body.v4-body .v4-content [id$="_app"] .announcement_controls .download_link:hover,
body.v4-body .v4-content [id$="_app"] .announcement-area .download_link:hover {
background: transparent !important;
text-decoration: none !important;
}
/* ------------------------------------------------------------
* .announcement-area / .announcement_controls / .greeting select chrome
* Picks up the recorder dropdown styling.
* Source: v4_2026.css L2926-L2952.
* ------------------------------------------------------------ */
body.v4-body .v4-content [id$="_app"] .announcement-area select,
body.v4-body .v4-content [id$="_app"] .announcement_controls select {
height: var(--greeting-control-height) !important;
min-height: var(--greeting-control-height) !important;
line-height: var(--greeting-control-height) !important;
padding: 0 30px 0 12px !important;
border-radius: var(--greeting-button-radius) !important;
border: 1px solid var(--greeting-border-color) !important;
background-color: #FFFFFF !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--v4-navy) !important;
min-width: 220px !important;
box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
transition: border-color .15s ease, box-shadow .15s ease !important;
}
/* ------------------------------------------------------------
* CC / HG #announcements section frames
* Bordered card per announcement subsection.
* Source: extension_editable.css L2216-L2231.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) {
width: calc(100% - 48px);
max-width: calc(100% - 48px);
flex: 0 0 calc(100% - 48px);
margin: 14px auto 0;
padding: var(--shared-setting-inner-pad-y) var(--shared-setting-inner-pad-x);
border: 1px solid var(--aa-flat-section-border);
border-radius: var(--aa-flat-section-radius);
background: #FFFFFF;
box-shadow: none;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) > div {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) :is(.subsection, .number_wrapper, .cc_greeting, .control_section.greeting, .control_section.greeting > div, .greeting_content) {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) .cc_greeting {
margin-top: 10px;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) :is(select.form-control, input.form-control, select#greeting_select_dropdown) {
border-color: #C6D3E1;
border-radius: var(--greeting-button-radius);
box-shadow: none;
}
/* ------------------------------------------------------------
* CC / HG #announcements recorder selector grid
* The "Recording" labelled selector + Apply/Cancel/Edit row
* that lives inside each announcement subsection.
* Source: extension_editable.css L2265-L2308.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls > .right_content.greeting_selector_fixer {
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: var(--aa-recorder-row-label) minmax(260px, var(--aa-recorder-control-width)) var(--aa-recorder-edit-width);
column-gap: var(--aa-recorder-grid-gap);
row-gap: var(--aa-recorder-grid-gap);
align-items: center;
width: 100%;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .control_section.greeting .greeting-action-row[data-container_name]:not(.hidden) {
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: var(--aa-recorder-row-label) repeat(3, var(--aa-recorder-button-width));
column-gap: var(--aa-recorder-grid-gap);
row-gap: var(--aa-recorder-grid-gap);
align-items: center;
width: 100%;
margin: 0 0 8px;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.announcement_controls > .right_content.greeting_selector_fixer > .greeting_label, .control_section.greeting .greeting-action-row[data-container_name] > .greeting_label) {
font-size: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls > .right_content.greeting_selector_fixer > .greeting_label::after {
content: "";
font-size: 13px;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .control_section.greeting .greeting-action-row[data-container_name="actions"] > .greeting_label::after {
content: "";
font-size: 13px;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .control_section.greeting .greeting-action-row[data-container_name="upload_options"] > .greeting_label::after {
content: "";
font-size: 13px;
}
/* ------------------------------------------------------------
* CC / HG #announcements .cc_greeting wrappers (legacy markup)
* Source: extension_editable.css L1257-L1278.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.mandatory_entrance_message, .cc_greeting, .subsection.number_wrapper, .control_section.greeting, .greeting_content) {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .control_section.greeting {
margin: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .control_section.greeting > div {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls {
padding-left: 0;
margin-left: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting a {
border: 0;
text-decoration: none;
}
/* ------------------------------------------------------------
* CC / HG mandatory_entrance_message + time_between_comfort
* Number / time-input wrappers inside the announcement card.
* Source: extension_editable.css L2471-L2513.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .mandatory_entrance_message,
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .time_between_comfort_message_seconds {
margin: 0 0 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .mandatory_entrance_message .subsection.number_wrapper,
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .time_between_comfort_message_seconds .subsection.number_wrapper {
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .time_between_comfort_message_seconds .d-flex {
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: 260px 192px;
column-gap: 10px;
align-items: center;
width: auto;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .time_between_comfort_message_seconds input.form-control {
width: 192px;
min-width: 192px;
max-width: 192px;
height: 40px;
margin: 0;
padding: 0 14px;
border: 1px solid #C6D3E1;
background: #FFFFFF;
box-shadow: none;
}
/* ------------------------------------------------------------
* CC / HG #announcements .cc_greeting TTS shell
* Text-to-speech container inside the announcement greeting
* card (legacy cc_greeting markup).
* Source: extension_editable.css L2540-L2581.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .greeting_container[data-container_name="text-to-speech"]:not(.hidden) {
width: min(622px, calc(100% - 126px));
max-width: calc(100% - 126px);
margin: 10px 0 0 126px;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .greeting_container[data-container_name="text-to-speech"] .hidden,
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .tts-action-row.hidden {
display: none;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .greeting_container[data-container_name="text-to-speech"] > div:not(.stt-result-banner):not(.greeting-state-banner) {
width: 100%;
max-width: 100%;
margin: 0 0 8px;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .tts-action-row:not(.hidden) {
display: flex;
flex-wrap: wrap;
gap: var(--greeting-grid-gap);
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .tts-action-row:not(.hidden) > .btn {
margin: 0;
box-sizing: border-box;
}
/* ------------------------------------------------------------
* CC / HG #announcements .announcement_controls shared-recording
* When the legacy cc_greeting recorder picks up the new
* shared-recording-selector pattern, supply tighter grid
* tokens scoped to this selector.
* Source: extension_editable.css L2526-L2538.
* ------------------------------------------------------------ */
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls.greeting_selector_fixer.shared-recording-selector,
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls > .right_content.greeting_selector_fixer.shared-recording-selector {
--shared-recorder-label-width: var(--greeting-label-width);
--shared-recorder-select-width: var(--greeting-select-width);
--shared-recorder-edit-width: var(--greeting-edit-width);
--shared-recorder-gap: var(--greeting-grid-gap);
display: grid !important; /* !important beats Bootstrap .d-flex */
grid-template-columns: var(--shared-recorder-label-width) var(--shared-recorder-select-width) var(--shared-recorder-edit-width) auto auto;
column-gap: var(--shared-recorder-gap);
row-gap: var(--shared-recorder-gap);
justify-content: start;
}
/* ------------------------------------------------------------
* CC / HG #announcements responsive collapse
* Stack the recorder grid into a single column under 760px.
* Source: extension_editable.css L2317-L2329 + L2583-L2595.
* ------------------------------------------------------------ */
@media (max-width: 760px) {
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.entrance_message_content_section, .play_periodic_comfort_message_content_section, .enable_media_on_hold_for_queued_calls_quick_section) {
width: 100%;
max-width: 100%;
flex-basis: 100%;
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements :is(.announcement_controls > .right_content.greeting_selector_fixer, .control_section.greeting .greeting-action-row[data-container_name]:not(.hidden)) {
grid-template-columns: minmax(0, 1fr);
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .announcement_controls.greeting_selector_fixer.shared-recording-selector {
grid-template-columns: minmax(0, 1fr);
}
body.v4-body .v4-content :is(#call_center_app, #hunt_group_app) #announcements .cc_greeting .greeting_container[data-container_name="text-to-speech"]:not(.hidden) {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}
@media (max-width: 576px) {
.busy_greeting_announcement_inline {
margin-left: 0;
}
[data-greeting="existing"] .announcement_controls button {
padding-left: 0;
margin-left: 0;
display: block;
}
[data-greeting="existing"] .announcement_controls .play {
margin-top: 5px;
}
}
@media (max-width: 440px) {
.busy_greeting_announcement_inline {
margin-top: 4px;
}
}
/* ============================================================
* §§ SUPPLEMENT — v4_design.css recorder/voicemail/announcement rules
* extracted in a second pass (the first manifest captured selector
* ranges with empty bodies for many rules in lines 5876-6622).
* Organized into sub-sections matching § 3 / § 4 / § 5 / § 10 / § 11.
* ============================================================ */
/* ============================================================
* v4_design.css — RECORDER / VOICEMAIL / ANNOUNCEMENT SUPPLEMENT
* ============================================================
* Second-pass extraction. The first pass (v4_recorder_module.css)
* captured lines ~5680-5830 plus selector ranges with empty bodies
* for everything else. This file captures every recorder-related
* rule body in v4_design.css that was NOT already harvested.
*
* Source: v4_design.css lines ~4216-4730 (early aa-vm-section setup)
* + lines ~5876-6622 (the second voicemail polish wave).
*
* Specificity has been collapsed — the duplicated
* body.v4-body #v4-app .v4-content
* body.v4-body .v4-content
* prefix pairs that the source uses to win specificity wars in PHP
* are simplified to a single clean selector targeting the actual
* DOM. !important is kept ONLY where it's beating a known
* framework / cascade rule (.hidden, Bootstrap defaults, legacy
* extension_editable.css / auto_attendant_inline.css rules).
* ============================================================ */
/* ============================================================
* === SUPPLEMENT for § 10 (Delivery) ===
* ============================================================ */
/* --- 10.A Section breathing room above first delivery row --- */
/* "Voicemail Received By" — push the first row off the section
* divider. The .aa-vm-section card header carries its own divider;
* the first .vm-setting-row needs ~12-20px of breathing below it.
* Two competing rules — section B above adds 12px of base padding,
* section A in the May 17 pass 6 sweep bumps it to 20px top / 12
* bottom for the auto-attendant family. Keep the broader bump. */
body.v4-body .v4-content [id$="_app"] #voicemail-tab .vm-setting-area {
padding-top: 12px !important;
}
body.v4-body .v4-content :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .vm-setting-area {
padding-top: 20px !important;
padding-bottom: 12px !important;
}
/* --- 10.B Phone / Email