/* ==========================================================================
   Solar Dialer — redesign layer (loaded last).
   Goal: one calm graphite + indigo system across login, agent, and admin.
   - Indigo (#333f7c) = interface accent: primary actions, nav, links, focus.
   - Green  (#1f7a52) = "go / live" only: Ready, dialing, connected, positive.
   - Red    (#9c3b34) = stop / end / DNC / destructive.
   This file only re-tones and calms; it does not move backend-bound IDs.
   ========================================================================== */

/* --- 1. Re-tone the base template tokens to match the agent canvas --------- */
:root {
  --ink: #17181c;
  --muted: #575b66;
  --line: #e3e3e1;
  --panel: #ffffff;
  --bg: #f5f5f3;
  --soft: #f0f0ee;
  --blue: #333f7c;        /* interface accent (was bright #1f63ff) */
  --blue-dark: #262f61;
  --green: #1f7a52;
  --warn: #9b5b0a;

  /* redesign-local aliases */
  --r-ink-soft: #575b66;
  --r-ink-faint: #8c8f99;
  --r-line-soft: #ececea;
  --r-accent: #333f7c;
  --r-accent-dark: #262f61;
  --r-accent-soft: #eaecf6;
  --r-go: #1f7a52;
  --r-go-soft: #e6f3ec;
  --r-stop: #9c3b34;
  --r-stop-soft: #f8e9e7;
  --r-shadow-xs: 0 1px 2px rgba(20, 20, 24, .05);
  --r-shadow-sm: 0 1px 3px rgba(20, 20, 24, .06), 0 1px 2px rgba(20, 20, 24, .04);
  --r-shadow-md: 0 6px 20px rgba(20, 20, 24, .09);
  --r-radius: 9px;
}

/* Dial start readiness and audio routing clarity. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView[data-dial-state="setup"] .dialWorkspaceBadge {
  color: #7a4b00;
  border-color: #e3c17b;
  background: #fff8e8;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView[data-dial-state="setup"] .dialWorkspaceBadge i {
  background: #d38b11;
}

.dialListTab.playlistUnavailable {
  cursor: not-allowed;
  opacity: 0.58;
}

.dialListTab.playlistUnavailable input {
  cursor: not-allowed;
}

.dialListTab.playlistUnavailable small {
  color: #8a5a0a;
}

.dialListTab.playlistNotReady small {
  color: #8a5a0a;
}

.audioRouteField,
.audioRouteSummary {
  display: grid;
  gap: 7px;
}

.audioRouteLabel {
  color: var(--r-ink-faint, #6f7c76);
  font-size: 11px;
  font-weight: 750;
}

.audioRouteSummary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.audioRouteSummary .stationAudioReadout {
  min-width: 0;
  color: var(--r-ink-faint, #6f7c76);
  font-size: 11px;
}

.audioRouteSummary .stationAudioReadout strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .audioRouteSummary {
    grid-template-columns: 1fr;
  }
}

body {
  font-family: "Inter", "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Admin workspaces: keep each page focused on one job at a time. */
.adminSubnav {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ececea;
}

.adminSubnav button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.adminSubnav button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: var(--r-shadow-xs);
}

#usersPanelSlot .userAccessPanel {
  width: min(100%, 900px);
  margin: 0;
}

#usersPanelSlot .userAccessPanel > #userAccessStatus { margin-bottom: 14px; }
#usersPanelSlot [data-users-panel="editor"] { max-width: 760px; }
#usersPanelSlot .userRosterTitle { margin: 2px 0 12px; }

#usersPanelSlot #userList {
  display: grid;
  gap: 8px;
}

#usersPanelSlot #userList .miniItem {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

#usersPanelSlot #accessUserSelect { min-height: 44px; }
#usersPanelSlot #accessCampaignSelect { max-height: 240px; }
#listsView > [data-leads-panel="builder"] { max-width: 1180px; }

#listsView .stateGrid {
  max-height: 174px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8f8f6;
}

@media (max-width: 720px) {
  .adminSubnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .adminSubnav button { width: 100%; }
  #usersPanelSlot .userRowActions { width: 100%; }
  #usersPanelSlot .userRowActions button { flex: 1; }
}

/* --- 2. Calm the shared primitives ---------------------------------------- */

/* Tame the extreme 800–900 weights that read as "template". */
button,
.buttonLink,
.tab,
.brandWords strong { font-weight: 650; }

.eyebrow,
.loginEyebrow,
.brandWords small { font-weight: 700; letter-spacing: .08em; }

/* Buttons: consistent size, radius, restrained accent. */
button,
.buttonLink {
  min-height: 40px;
  border-radius: var(--r-radius);
  letter-spacing: -.005em;
}
button.primary { background: var(--r-accent); }
button.primary:hover { background: var(--r-accent-dark); }
button.secondary,
.buttonLink.secondary {
  color: var(--ink);
  background: #eef0f4;
}
button.secondary:hover { background: #e6e9ef; }
/* Stop/end/DNC actions: one red across the whole app, matching the palette. */
button.danger { background: var(--r-stop); }
button.danger:hover { background: #7f2f29; }
.linkButton,
.eyebrow { color: var(--r-accent); }

/* Inputs / selects: quiet until focused, indigo focus ring. */
input,
select,
textarea {
  border-radius: 8px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--r-accent);
  box-shadow: 0 0 0 3px var(--r-accent-soft);
}

/* Soften the heavy card shadows across the app. */
.panel { box-shadow: var(--r-shadow-sm); border-radius: 12px; }

/* --- 3. Login: calm, light, no gradient hero ------------------------------ */
.loginStage {
  background: var(--bg);
  overflow: visible;
}
.loginStage::before,
.loginStage::after { display: none !important; content: none; }

.loginShell { gap: 20px; }

/* Brand lockup now sits on a light stage — recolor from white. */
.loginBrand .solarMark {
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: none;
}
.loginBrand .brandWords strong { color: var(--ink); font-weight: 750; }
.loginBrand .brandWords small { color: var(--r-ink-faint); }

.loginCard {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--r-shadow-md);
}
/* The brand lockup already says "Solar Dialer" — drop the duplicate eyebrow. */
.loginCard .loginEyebrow { display: none; }
.loginCard h1 { color: var(--ink); font-size: 27px; letter-spacing: -.02em; }
.loginCardHead p { color: var(--muted); }

.loginCard input { border-radius: 9px; background: #fff; border-color: var(--line); }
.loginCard input:hover { border-color: #c7c7c3; }
.loginCard input:focus {
  border-color: var(--r-accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--r-accent-soft);
}
.loginCard button.primary {
  background: var(--r-accent);
  box-shadow: none;
}
.loginCard button.primary:hover {
  background: var(--r-accent-dark);
  box-shadow: none;
  transform: none;
}

/* --- 4. Admin workspace: same light chrome as the agent workspace --------- */
/* The admin sidebar shipped as a dark-green gradient while the agent sidebar
   is light graphite/indigo. Unify on the light system so switching workspaces
   feels like one app. */
body[data-workspace-mode="admin"] .appSidebar {
  color: var(--r-ink-soft);
  background: var(--panel);
  border-right: 1px solid var(--line);
  box-shadow: none;
}
body[data-workspace-mode="admin"] .sidebarBrand {
  border-bottom: 1px solid var(--r-line-soft);
}
body[data-workspace-mode="admin"] .sidebarBrand .solarMark {
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  box-shadow: none;
}
body[data-workspace-mode="admin"] .sidebarBrand .brandWords strong {
  color: var(--ink);
  font-weight: 750;
}
body[data-workspace-mode="admin"] .sidebarBrand .brandWords small {
  color: var(--r-ink-faint);
}
body[data-workspace-mode="admin"] .appSidebar .tab {
  color: var(--r-ink-soft);
  font-weight: 600;
}
body[data-workspace-mode="admin"] .appSidebar .tab > span {
  color: var(--r-ink-faint);
}
body[data-workspace-mode="admin"] .appSidebar .tab:hover {
  color: var(--ink);
  background: var(--bg);
}
body[data-workspace-mode="admin"] .appSidebar .tab.active {
  color: var(--r-accent-dark);
  background: var(--r-accent-soft);
  box-shadow: inset 3px 0 var(--r-accent);
}
body[data-workspace-mode="admin"] .appSidebar .tab.active > span {
  color: var(--r-accent);
}
body[data-workspace-mode="admin"] .sidebarFooter {
  color: var(--r-ink-faint);
  border-top: 1px solid var(--r-line-soft);
}
body[data-workspace-mode="admin"] .appFrame > .topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(245, 245, 243, .92);
}
body[data-workspace-mode="admin"] .appFrame { background: var(--bg); }

/* KPI cards + data panels: quiet borders, restrained shadow. */
body[data-workspace-mode="admin"] .kpiGrid > *,
body[data-workspace-mode="admin"] .panel,
body[data-workspace-mode="admin"] .dataPanel {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--r-shadow-xs);
}
body[data-workspace-mode="admin"] .pageHeader .eyebrow,
body[data-workspace-mode="admin"] .eyebrow { color: var(--r-accent); }

/* Lead-sources bars still ship a green gradient fill — flat color only. */
body[data-workspace-mode="admin"] .sourceTrack i {
  background: var(--r-go);
}

/* --- 5. Primary action colour: indigo for interface, green only for "call" --
   Base ships `.appFrame button.primary` as green, which painted every admin
   CRUD button (Create playlist, Stage upload, Save settings, Add user…) green.
   Indigo is the interface accent; green is reserved for actually starting a
   call (Start dialing + the phone Call button) and for live/ready status. */
.appFrame button.primary {
  background: var(--r-accent);
  border-color: var(--r-accent);
}
.appFrame button.primary:hover:not(:disabled) {
  background: var(--r-accent-dark);
  border-color: var(--r-accent-dark);
}
/* Keep the "start a call" action green (go). */
#dialBtn.primary {
  background: var(--r-go);
  border-color: var(--r-go);
}
#dialBtn.primary:hover:not(:disabled) {
  background: #186640;
  border-color: #186640;
}

/* The nav rail now carries the dial-lists checklist too — let it scroll
   internally instead of overflowing the fixed 100vh sidebar. */
body[data-workspace-mode="agent"] .appSidebar {
  overflow-y: auto;
}

/* --- 6. Agent Dial: the script is a document, not a floating widget ------- */
/* The base card floats a 940px panel on a soft drop-shadow in a sea of
   whitespace, and every script line carries a decorative green/blue left bar.
   Flatten the card onto the work surface and drop the decorative colour so
   the words carry the screen. */
body[data-workspace-mode="agent"] .callStageV2 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
/* Shrink the floating phone dock itself, and tighten the reserved gutter
   on the canvas to match (dock width + a small gap), not an oversized
   390px reservation for the whole canvas height. */
body[data-workspace-mode="agent"] #dialView.dialWorkspaceV2 {
  --phone-width: 300px;
}
body[data-workspace-mode="agent"] .dialCanvasV2 {
  padding-right: 320px;
}
@media (max-width: 1100px) {
  body[data-workspace-mode="agent"] .dialCanvasV2 {
    padding-right: 22px;
  }
}
/* The base card caps at 940px AND demands two grid tracks that need
   330px + 245px = 575px minimum. With the new dial-lists sidebar plus the
   phone dock's reserved gutter, a real laptop (1280–1440px) only has
   ~390–450px left here — well under that floor, so the transcript column
   was overflowing and getting clipped by the card's own overflow:hidden,
   which is what made the script read as "skinny." Let it use all the
   width it actually has, and give the transcript a bounded share instead
   of a competing hard-floor column. */
body[data-workspace-mode="agent"] .callStageV2 {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
}
/* Below that, there isn't room for a side-by-side transcript at all —
   stack it under the script instead of clipping it. */
@media (max-width: 1500px) {
  body[data-workspace-mode="agent"] .callStageV2 {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-workspace-mode="agent"] .liveTranscriptPanelV2 {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: 220px;
  }
}

/* Keep the long-form script comfortable to read without turning it into
   separate cards or labeled steps. */
body[data-workspace-mode="agent"] .scriptReadingPane {
  padding: 22px 26px;
}
body[data-workspace-mode="agent"] .callStageV2 .callScriptBody {
  max-width: none;
  font-size: 13.5px;
  line-height: 1.48;
}

/* --- 7. Phone dock: instrument chrome, real call-control strip ----------- */
/* Base ships a dark #1d2028 header band that reads as a consumer call
   widget, not an ops tool. Flatten it onto the same light chrome as the
   rest of the app. */
body[data-workspace-mode="agent"] .phoneDockV2 {
  border: 1px solid var(--line);
  box-shadow: var(--r-shadow-md);
}
body[data-workspace-mode="agent"] .phoneDockV2 > header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
body[data-workspace-mode="agent"] .phoneDockTitle b {
  color: var(--ink);
}
body[data-workspace-mode="agent"] .phoneDockTitle small {
  color: var(--r-ink-faint);
}
body[data-workspace-mode="agent"] .phoneStatusIcon {
  color: var(--r-go);
  background: var(--r-go-soft);
}

/* Call control strip: always present in the phone dock (idle and connected),
   not just during a live call, so the instrument reads the same at rest.
   Mute / Hold / Keypad / Transfer are UI only for now (data-call-tool, no
   listener) — Codex wires the real behaviour in later. End call / Redial are
   real actions; the click handler already no-ops with no active call. */
body[data-workspace-mode="agent"] .callControlBar {
  padding: 10px 11px 11px;
  border-top: 1px solid var(--r-line-soft);
}
body[data-workspace-mode="agent"] .callControlBarHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
body[data-workspace-mode="agent"] .callControlStatus {
  color: var(--r-ink-faint);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-workspace-mode="agent"] .callControlStatus.live {
  color: var(--r-go);
}
/* Same call: drop the decorative status dot on the transcript panel too,
   for the same reason as the phone's call-control status — colour on the
   text carries the state without a floating dot. */
body[data-workspace-mode="agent"] .liveTranscriptState i {
  display: none;
}
body[data-workspace-mode="agent"] .liveTranscriptState.active {
  color: var(--r-go);
}
body[data-workspace-mode="agent"] .callTimer {
  color: var(--r-ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
body[data-workspace-mode="agent"] .callToolRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
body[data-workspace-mode="agent"] .callTool {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 10.5px;
  font-weight: 650;
}
body[data-workspace-mode="agent"] .callTool:hover {
  border-color: var(--r-accent);
  background: var(--r-accent-soft);
  color: var(--r-accent-dark);
}

/* --- 8. Dial screen layout: a full-height list rail on the left, a real
   tab strip (Scripts/Form/Maps/Sunroof/Availability) spanning the top of
   the main column, and a clean center with just the script + transcript. */
body[data-workspace-mode="agent"] .dialLayoutGrid {
  display: block;
}

/* Dial lists now live inside the app's own left nav rail (moved there at
   boot — see #sidebarDialListsSlot / initializeWorkspaceLayout), right
   below Dial/Call logs, instead of a second sidebar competing with the
   script for width. The base .dialListsBar is a 5-column horizontal grid
   meant for a full-width bar — override the flow direction to fit the
   212px nav column, and cap its own height so it scrolls internally
   rather than pushing the sidebar footer off screen. */
body[data-workspace-mode="agent"] .sidebarDialListsSlot {
  min-height: 0;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--r-line-soft);
  display: flex;
  flex-direction: column;
}
/* At mobile widths the base app turns .appSidebar into a 64px bottom tab
   bar (nav rail becomes a nav strip), which has no room for a checklist —
   dock the dial lists as their own fixed strip just above it instead of
   letting them get clipped into that 64px bar. */
@media (max-width: 760px) {
  body[data-workspace-mode="agent"] .sidebarDialListsSlot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 41;
    max-height: 38vh;
    margin: 0;
    padding: 10px 12px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 -6px 18px rgba(20, 20, 24, .08);
  }
}

/* Compact browser-audio controls live inside the fixed phone and replace its
   contents only while being adjusted. They never expand the phone or cover the
   script workspace. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
  position: relative;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel {
  position: absolute;
  inset: 0;
  z-index: 12;
  min-height: 0;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  background: #fff;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel[hidden] {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel header {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--r-line-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel header strong {
  font-size: 13px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioDeviceChip {
  min-height: 20px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid #d7daea;
  border-radius: 999px;
  color: var(--r-accent);
  background: var(--r-accent-soft);
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioDeviceChip:disabled {
  color: #a0a3aa;
  border-color: #e7e7e5;
  background: #f4f4f2;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel header button,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsActions button {
  min-height: 27px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 8px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel > label {
  display: grid;
  gap: 4px;
  color: var(--r-ink-faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel select {
  width: 100%;
  min-height: 31px;
  padding: 0 7px;
  border: 1px solid #d8d9dc;
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioLevelControl > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioLevelControl output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioLevelControl input[type="range"] {
  width: 100%;
  min-height: 20px;
  margin: 0;
  accent-color: var(--r-accent);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .audioSettingsPanel .statusText {
  margin: 0;
  font-size: 8px;
  line-height: 1.35;
}

/* --- 14. Phone instrument refresh ---------------------------------------
   The phone stays visually stable from idle through wrap-up. Green communicates
   ready/connected state; unsupported call controls stay visibly unavailable. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
  --phone-surface: #fbfbfa;
  overflow: hidden;
  border-color: #d8d9dc;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(23, 24, 28, .14);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 > header {
  border-bottom: 1px solid var(--r-line-soft);
  background: linear-gradient(180deg, #fff 0%, #fafaf8 100%);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
  min-height: 62px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.01em;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle small {
  color: var(--r-go);
  font-size: 10px;
  font-weight: 700;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--r-go);
  background: var(--r-go-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon i,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneRouteBadge i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(31, 122, 82, .12);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneRouteBadge {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--r-accent-dark);
  border: 1px solid #d9dced;
  border-radius: 999px;
  background: var(--r-accent-soft);
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 750;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneRouteBadge i {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneStatusIcon,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneDockTitle small {
  color: #9b5b0a;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneStatusIcon {
  background: #fff5dc;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="dialing"] .phoneStatusIcon i,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="live"] .phoneStatusIcon i {
  animation: phoneStatusPulse 1.7s ease-out infinite;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneStatusIcon,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneDockTitle small {
  color: var(--r-ink-faint);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneStatusIcon {
  background: var(--soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="demo"] .phoneStatusIcon,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="demo"] .phoneDockTitle small {
  color: var(--r-ink-faint);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="demo"] .phoneStatusIcon {
  background: var(--soft);
}

@keyframes phoneStatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 122, 82, .28); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(31, 122, 82, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon i {
    animation: none !important;
  }
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--phone-surface);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDialPanel {
  padding: 16px 18px 18px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialForm {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialForm .field {
  gap: 6px;
  color: var(--r-ink-faint);
  font-size: 9px;
  font-weight: 750;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .manualDialLabel {
  color: var(--r-ink-faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button {
  min-height: 48px;
  height: 48px;
  border-radius: 12px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input {
  min-width: 0;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid #dadbd9;
  background: #fff;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .025em;
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(23, 24, 28, .03);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input:focus {
  border-color: var(--r-accent);
  outline: 3px solid rgba(51, 63, 124, .14);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button {
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  border: 1px solid #176c47;
  background: var(--r-go);
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 2px 6px rgba(31, 122, 82, .2);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button:hover:not(:disabled) {
  background: #176c47;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 #manualDialStatus {
  min-height: 14px;
  margin: 6px 0 0;
  color: var(--r-ink-faint);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad {
  width: 244px;
  max-width: 100%;
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 20px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button {
  width: 58px;
  min-height: 58px;
  padding: 5px 0 4px;
  justify-self: center;
  display: grid;
  place-content: center;
  gap: 0;
  color: #202126;
  border: 1px solid #e2e3e1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 24, 28, .07);
  font-size: 19px;
  font-weight: 650;
  line-height: 1;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button small {
  min-height: 9px;
  color: var(--r-ink-faint);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button:hover:not(:disabled) {
  border-color: #cfd2df;
  background: var(--r-accent-soft);
  transform: translateY(-1px);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(23, 24, 28, .12);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button:focus-visible,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool:focus-visible,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button:focus-visible {
  outline: 3px solid rgba(51, 63, 124, .2);
  outline-offset: 2px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBar {
  padding: 11px 12px 13px;
  border-top: 1px solid var(--r-line-soft);
  background: #fff;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBarHead {
  min-height: 20px;
  margin: 0 1px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlStatus {
  color: var(--r-ink-faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlStatus.live {
  color: var(--r-go);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTimer {
  color: var(--r-ink-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool {
  min-width: 0;
  min-height: 54px;
  padding: 6px 3px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: var(--ink);
  border: 1px solid #dedfdd;
  border-radius: 10px;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolIcon {
  min-height: 18px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .keypadGlyph {
  font-size: 21px;
  line-height: .8;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool:hover:not(:disabled),
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool.active {
  color: var(--r-accent-dark);
  border-color: #c9cdea;
  background: var(--r-accent-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool.active {
  box-shadow: inset 0 0 0 1px rgba(51, 63, 124, .12);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool:disabled {
  cursor: not-allowed;
  color: #a0a3aa;
  border-color: #ececea;
  background: #f5f5f3;
  opacity: 1;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .inCallKeypad {
  width: 220px;
  margin: 3px auto 12px;
  padding: 11px;
  gap: 7px 12px;
  border: 1px solid var(--r-line-soft);
  border-radius: 14px;
  background: var(--phone-surface);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .inCallKeypad[hidden] {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .inCallKeypad button {
  width: 45px;
  min-height: 45px;
  font-size: 16px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 7px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button {
  min-height: 42px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 750;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button > span:first-child {
  font-size: 16px;
  line-height: 1;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView #hangupBtn:not(:disabled).danger {
  color: #fff;
  border-color: var(--r-stop);
  background: var(--r-stop);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button:disabled {
  color: #a0a3aa;
  border-color: #e7e7e5;
  background: #f4f4f2;
  opacity: 1;
}

@media (min-width: 1181px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    padding-right: 366px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    width: 326px;
  }
}

@media (max-width: 1180px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    width: min(100%, 430px);
    margin: 16px auto 0;
  }
}

/* Desktop phone: keep the always-available controls compact and anchored in
   the bottom-right without covering the script or transcript workspace. */
@media (min-width: 761px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    position: fixed;
    inset: auto 22px 18px auto;
    z-index: 30;
    width: 280px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
    max-height: min(68vh, 530px);
    border-radius: 14px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
    max-height: calc(min(68vh, 530px) - 52px);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
    min-height: 52px;
    padding: 7px 10px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneRouteBadge {
    min-height: 24px;
    padding-inline: 7px;
    font-size: 8.5px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDialPanel {
    padding: 10px 12px 11px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow {
    grid-template-columns: minmax(0, 1fr) 36px 66px;
    gap: 6px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button {
    min-height: 40px;
    height: 40px;
    border-radius: 10px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input {
    padding-inline: 9px;
    font-size: 15px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad {
    width: 202px;
    margin-top: 8px;
    gap: 6px 14px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button {
    width: 46px;
    min-height: 46px;
    padding-block: 3px;
    font-size: 16px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBar {
    padding: 8px 9px 9px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolRow {
    gap: 4px;
    margin-bottom: 6px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool {
    min-height: 44px;
    padding: 4px 2px;
    gap: 1px;
    border-radius: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolIcon {
    min-height: 15px;
    font-size: 15px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button {
    min-height: 38px;
    border-radius: 8px;
  }
}

@media (max-width: 560px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar > button {
    width: 100%;
    min-width: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    width: 100%;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 11px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneRouteBadge {
    padding-inline: 8px;
    font-size: 9px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDialPanel {
    padding-inline: 14px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad {
    gap-inline: 14px;
  }
}

/* Final phone ergonomics: keep the dial/action controls visible and truthful. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
  max-height: min(76vh, 690px);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
  max-height: calc(min(76vh, 690px) - 62px);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialForm {
  display: grid;
  gap: 6px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow {
  grid-template-columns: minmax(0, 1fr) 42px 76px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow .manualDialEdit {
  padding: 0;
  color: var(--r-ink-soft);
  border-color: #dadbd9;
  background: #fff;
  font-size: 18px;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button:disabled {
  cursor: not-allowed;
  color: #a0a3aa;
  border-color: #e7e7e5;
  background: #f4f4f2;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .manualDialClear {
  width: fit-content;
  min-height: 26px;
  margin: 0 auto;
  padding: 0 8px;
  color: var(--r-ink-faint);
  border: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool small {
  color: currentColor;
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
  opacity: .72;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-shadow: 0 -8px 18px rgba(23, 24, 28, .05);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button {
  min-height: 46px;
}

@media (max-width: 1180px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
    max-height: none;
  }
}

@media (max-width: 360px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow {
    grid-template-columns: minmax(0, 1fr) 40px 64px;
    gap: 6px;
  }
}

/* --- 10. Admin lead workflow -------------------------------------------
   Lead operations follow one short path: Leads -> Lead sources -> Campaigns.
   Telephony and safety controls stay in Advanced instead of competing with
   the everyday upload/build workflow. */
body[data-workspace-mode="admin"] #listsView {
  max-width: 1480px;
}

body[data-workspace-mode="admin"] #listsView .adminWorkflowNav {
  width: fit-content;
  margin-bottom: 20px;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ececea;
}

body[data-workspace-mode="admin"] #listsView .adminWorkflowNav button {
  min-width: 112px;
  border: 0;
  border-radius: 7px;
  color: var(--r-ink-soft);
  background: transparent;
  box-shadow: none;
}

body[data-workspace-mode="admin"] #listsView .adminWorkflowNav button.active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(28, 32, 30, .09);
}

body[data-workspace-mode="admin"] #listsView .workflowIntro {
  margin: 0 0 16px;
  padding: 0 2px;
}

body[data-workspace-mode="admin"] #listsView .workflowIntro > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
}

body[data-workspace-mode="admin"] #listsView .workflowStep {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--r-accent-dark);
  border: 1px solid #cfd2ef;
  border-radius: 8px;
  background: var(--r-accent-soft);
  font-size: 12px;
  font-weight: 800;
}

body[data-workspace-mode="admin"] #listsView .workflowIntro h2,
body[data-workspace-mode="admin"] #listsView .workflowIntro p {
  margin: 0;
}

body[data-workspace-mode="admin"] #listsView .workflowIntro h2 {
  color: var(--ink);
  font-size: 18px;
}

body[data-workspace-mode="admin"] #listsView .workflowIntro p {
  margin-top: 3px;
  color: var(--r-ink-faint);
  font-size: 12px;
}

body[data-workspace-mode="admin"] #listsView .leadInventoryMainGrid,
body[data-workspace-mode="admin"] #listsView .leadInventoryTablePanel {
  width: 100%;
}

body[data-workspace-mode="admin"] #listsView .leadInventoryMainGrid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-workspace-mode="admin"] #listsView .sourceManagementGrid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(460px, 1.28fr);
  align-items: start;
  gap: 16px;
}

body[data-workspace-mode="admin"] #listsView .adminWorkflowSlot:empty {
  display: none;
}

body[data-workspace-mode="admin"] #listsView .adminWorkflowSlot > .panel,
body[data-workspace-mode="admin"] #listsView .sourceManagementGrid > .panel {
  margin: 0;
}

body[data-workspace-mode="admin"] #listsView #stagedReviewSlot,
body[data-workspace-mode="admin"] #listsView #solarRoutesSourceSlot,
body[data-workspace-mode="admin"] #listsView #campaignSettingsSlot {
  margin-top: 16px;
}

body[data-workspace-mode="admin"] #listsView .stagedImportPanel,
body[data-workspace-mode="admin"] #listsView .stagedReviewPanel,
body[data-workspace-mode="admin"] #listsView .solarRoutesImportPanel,
body[data-workspace-mode="admin"] #listsView .campaignSettingsPanel {
  overflow: hidden;
}

body[data-workspace-mode="admin"] #listsView .stagedImportPanel > .panelSummary,
body[data-workspace-mode="admin"] #listsView .stagedReviewPanel > .panelSummary,
body[data-workspace-mode="admin"] #listsView .solarRoutesImportPanel > .panelSummary,
body[data-workspace-mode="admin"] #listsView .campaignSettingsPanel > .panelSummary {
  min-height: 62px;
  padding: 14px 18px;
  border-bottom: 1px solid transparent;
}

body[data-workspace-mode="admin"] #listsView details[open] > .panelSummary {
  border-bottom-color: var(--line);
}

body[data-workspace-mode="admin"] #listsView .campaignWorkflowHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-workspace-mode="admin"] #listsView .campaignModeNav {
  flex: none;
  margin: 0 0 16px;
}

body[data-workspace-mode="admin"] #listsView .campaignSourceField {
  margin: 2px 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

body[data-workspace-mode="admin"] #listsView .campaignFilterSlot > .playlistFilterPanel {
  height: 100%;
  margin: 0;
}

body[data-workspace-mode="admin"] #listsView #campaignEditFilterStatus {
  margin: 0 2px 8px;
}

body[data-workspace-mode="admin"] #listsView #campaignEditFilterSlot {
  margin-bottom: 16px;
}

body[data-workspace-mode="admin"] #listsView .campaignSourceField select {
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
}

body[data-workspace-mode="admin"] #listsView .campaignFilterDetails {
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

body[data-workspace-mode="admin"] #listsView .campaignFilterDetails > summary {
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

body[data-workspace-mode="admin"] #listsView .campaignFilterDetails[open] > summary {
  margin-bottom: 12px;
}

body[data-workspace-mode="admin"] #listsView .campaignFilterDetails .stateGrid {
  max-height: 176px;
  margin-bottom: 12px;
  overflow-y: auto;
}

body[data-workspace-mode="admin"] #listsView .campaignFilterDetails .filterGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-workspace-mode="admin"] #listsView .campaignCatalogPanel {
  margin-bottom: 16px;
}

body[data-workspace-mode="admin"] #listsView .campaignAccessBlock {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafaf8;
}

body[data-workspace-mode="admin"] #listsView .campaignIdentityFields {
  margin-top: 14px;
}

body[data-workspace-mode="admin"] #listsView .releaseActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-workspace-mode="admin"] #listsView .campaignAccessBlock .panelTitle {
  margin-bottom: 10px;
}

body[data-workspace-mode="admin"] #listsView .campaignEditHint {
  margin: 8px 0 16px;
  padding: 10px 12px;
  color: var(--r-ink-soft);
  border-left: 3px solid #cfd2ef;
  background: var(--r-accent-soft);
  font-size: 11px;
  line-height: 1.45;
}

body[data-workspace-mode="admin"] #listsView .campaignDialerSettingsLabel {
  margin: 18px 0 12px;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

body[data-workspace-mode="admin"] #listsView .campaignDialerSettingsLabel strong {
  font-size: 13px;
}

body[data-workspace-mode="admin"] #listsView .campaignDialerSettingsLabel small {
  color: var(--r-ink-faint);
  font-size: 10px;
}

body[data-workspace-mode="admin"] #importView .advancedSettingsHeader {
  margin-bottom: 16px;
}

body[data-workspace-mode="admin"] #importView > .dncSafetyPanel {
  max-width: 760px;
}

@media (max-width: 1040px) {
  body[data-workspace-mode="admin"] #listsView .sourceManagementGrid,
  body[data-workspace-mode="admin"] #listsView .builderGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-workspace-mode="admin"] #listsView .campaignWorkflowHeader {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-workspace-mode="admin"] #listsView .campaignModeNav {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  body[data-workspace-mode="admin"] #listsView .pageActions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body[data-workspace-mode="admin"] #listsView #refreshLeadInventoryBtn {
    display: none;
  }

  body[data-workspace-mode="admin"] #listsView .adminWorkflowNav,
  body[data-workspace-mode="admin"] #listsView .campaignModeNav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-workspace-mode="admin"] #listsView .campaignModeNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-workspace-mode="admin"] #listsView .adminWorkflowNav button {
    min-width: 0;
    padding-inline: 8px;
  }

  body[data-workspace-mode="admin"] #listsView .campaignFilterDetails .filterGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
body[data-workspace-mode="agent"] .dialListsBar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-workspace-mode="agent"] .dialListsHeading {
  padding: 0 9px;
  white-space: normal;
}
body[data-workspace-mode="agent"] .dialListTabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  padding: 0;
  max-height: 34vh;
  overflow-y: auto;
}
body[data-workspace-mode="agent"] .dialListTab {
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 8px 6px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
body[data-workspace-mode="agent"] .dialListTab:hover {
  background: var(--bg);
}
body[data-workspace-mode="agent"] .dialListTab:has(input:checked) {
  border: 0;
  color: var(--ink);
  background: var(--r-accent-soft);
  box-shadow: none;
}
body[data-workspace-mode="agent"] .dialListTab input {
  position: static;
  width: 16px;
  height: 16px;
  opacity: 1;
  pointer-events: auto;
  accent-color: var(--r-accent);
}
body[data-workspace-mode="agent"] .dialListTab strong {
  font-size: 12px;
  font-weight: 600;
}
body[data-workspace-mode="agent"] .dialListTab small {
  color: var(--r-ink-faint);
}

/* Top status row: Ready pill + playlist/audio meta + session status/totals
   all live together, so the center stays just the script. */
body[data-workspace-mode="agent"] .dialCommandStatus {
  flex-wrap: wrap;
  row-gap: 4px;
}
body[data-workspace-mode="agent"] .dialCommandStatus .sessionStatus {
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--r-ink-faint);
  font-size: 11px;
}
body[data-workspace-mode="agent"] .dialCommandStatus .sessionNumbers {
  gap: 10px;
  color: var(--r-ink-faint);
  font-size: 11px;
}

/* Tab strip: Scripts / Form / Maps / Sunroof / Availability, full width,
   real tabs (one active panel), not a popover. */
body[data-workspace-mode="agent"] .dialToolTabs {
  padding: 0 16px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}
body[data-workspace-mode="agent"] .dialToolTab {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--r-ink-faint);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}
body[data-workspace-mode="agent"] .dialToolTab:hover {
  color: var(--ink);
}
body[data-workspace-mode="agent"] .dialToolTab.active {
  color: var(--r-accent-dark);
  background: transparent;
  border-bottom-color: var(--r-accent);
  box-shadow: none;
}
body[data-workspace-mode="agent"] .dialToolPanels {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
body[data-workspace-mode="agent"] .dialToolPanel {
  padding: 16px;
}
body[data-workspace-mode="agent"] .dialToolPanelBody,
body[data-workspace-mode="agent"] #dialMapsPanelBody {
  width: auto;
}
body[data-workspace-mode="agent"] .dialToolLink {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--r-accent-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
body[data-workspace-mode="agent"] .dialToolLink:hover {
  text-decoration: underline;
}
/* Form panel: the call-result dock no longer floats above the phone by
   itself, so it doesn't need its own card chrome inside the tab. */
body[data-workspace-mode="agent"] .dialToolPanel .callResultsDock {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
/* The script tab list already reads fine at full tab-strip width. */
body[data-workspace-mode="agent"] [data-tool-panel="scripts"] .scriptTabs > div {
  max-width: none;
  overflow-x: visible;
  flex-wrap: wrap;
}

/* --- 9. Unified Dial workspace -------------------------------------------
   Admins make calls from the same calm workspace as agents. Management
   navigation remains available, but dial-time controls stay out of the
   script canvas and the phone never overlaps the working area. */
.playlistRailButton {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .appSidebar {
  overflow-y: auto;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.dialWorkspaceV2 {
  --phone-width: 310px;
  min-width: 0;
  background: var(--bg);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialLayoutGrid {
  display: block;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot {
  min-height: 0;
  margin: 10px 0 0;
  padding-top: 10px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border-top: 1px solid var(--r-line-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot[hidden] {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListsBar {
  min-height: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListsHeading {
  padding: 0 9px;
  white-space: normal;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTabs {
  min-height: 84px;
  max-height: 34vh;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  overflow-y: auto;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab {
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 8px 7px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab:hover {
  background: var(--bg);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab:has(input:checked) {
  color: var(--ink);
  background: var(--r-accent-soft);
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab input {
  position: static;
  width: 16px;
  height: 16px;
  opacity: 1;
  pointer-events: auto;
  accent-color: var(--r-accent);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab strong {
  font-size: 11.5px;
  font-weight: 620;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTab small {
  color: var(--r-ink-faint);
  font-size: 9px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar {
  min-height: 54px;
  padding: 7px 16px;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 8px;
  background: rgba(255, 255, 255, .96);
}

body[data-workspace-mode="admin"] #dialView .sessionNumbers {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolTabs {
  padding: 0 16px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolTab {
  min-height: 38px;
  padding: 0 12px;
  flex: none;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--r-ink-faint);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolTab.active {
  color: var(--r-accent-dark);
  border-bottom-color: var(--r-accent);
  background: transparent;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolPanels {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolPanel {
  padding: 12px 16px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
  min-width: 0;
  padding: 22px 330px 36px 22px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callStageV2 {
  width: 100%;
  min-height: min(560px, calc(100vh - 230px));
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptReadingPane {
  padding: 24px 28px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callScriptBody {
  max-width: none;
  gap: 15px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptLine {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
  padding-left: 0;
  border-left: 0;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptLine p {
  font-size: 14px;
  line-height: 1.52;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .liveTranscriptPanelV2 {
  border-color: var(--line);
  background: #fafaf8;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--r-shadow-md);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 > header {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle b {
  color: var(--ink);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle small {
  color: var(--r-ink-faint);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon {
  color: var(--r-go);
  background: var(--r-go-soft);
}

@media (max-width: 1380px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callStageV2 {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .liveTranscriptPanelV2 {
    min-height: 190px;
    max-height: 230px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 1180px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    padding: 16px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    position: static;
    width: min(100%, 480px);
    max-height: none;
    margin: 16px 0 0 auto;
    overflow: visible;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
    max-height: none;
  }
}

@media (max-width: 760px) {
  body[data-workspace-mode="admin"] .appFrame {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px minmax(0, 1fr) 64px;
    overflow-x: hidden;
  }

  body[data-workspace-mode="admin"] .appSidebar {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
    display: block;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
    z-index: 50;
  }

  body[data-workspace-mode="admin"] .sidebarBrand,
  body[data-workspace-mode="admin"] .sidebarFooter {
    display: none;
  }

  body[data-workspace-mode="admin"] .appSidebar .tabs {
    height: 58px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
  }

  body[data-workspace-mode="admin"] .appSidebar .tab {
    min-width: 68px;
    min-height: 54px;
    padding: 4px 7px;
    display: flex;
    flex: 0 0 68px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    font-size: 9px;
    box-shadow: none;
  }

  body[data-workspace-mode="admin"] .appSidebar .tab > span {
    font-size: 15px;
  }

  body[data-workspace-mode="admin"] .appFrame > .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    grid-column: 1;
    width: auto;
    height: 52px;
    padding: 0 12px;
    z-index: 40;
  }

  body[data-workspace-mode="admin"] .appFrame > .topbar h1 {
    font-size: 15px;
  }

  body[data-workspace-mode="admin"] .appFrame > .topbar #mode,
  body[data-workspace-mode="admin"] .appFrame > .topbar .accountBadge {
    display: none;
  }

  body[data-workspace-mode="admin"] .appFrame > .view {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 10px 10px 92px;
    overflow-x: hidden;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .playlistRailButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar {
    padding: 7px 9px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandStatus {
    display: none;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot {
    position: fixed;
    inset: 106px 0 calc(64px + env(safe-area-inset-bottom));
    z-index: 55;
    max-height: none;
    margin: 0;
    padding: 14px;
    display: flex;
    overflow: hidden;
    border: 0;
    background: rgba(245, 245, 243, .98);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .16s ease, transform .16s ease;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.playlistRailOpen ~ .sidebarDialListsSlot,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .appSidebar:has(~ #dialView.playlistRailOpen) .sidebarDialListsSlot {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListsBar {
    max-width: 520px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) .sidebarDialListsSlot .dialListTabs {
    max-height: none;
    flex: 1 1 auto;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolTabs {
    padding: 0 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolTab {
    min-height: 36px;
    padding: 0 10px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialToolPanel {
    padding: 10px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptReadingPane {
    padding: 20px 16px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptLine {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .scriptLine p {
    font-size: 15px;
  }

}

/* Keep the phone refresh authoritative after the legacy admin/mobile layer. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
  overflow: hidden;
  border-color: #d8d9dc;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(23, 24, 28, .14);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupHeader {
  min-height: 48px;
  padding: 8px 12px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--r-line-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupHeader strong {
  color: var(--ink);
  font-size: 13px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupHeader button {
  min-height: 34px;
  padding: 0 12px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 > header {
  border-bottom-color: var(--r-line-soft);
  background: linear-gradient(180deg, #fff 0%, #fafaf8 100%);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
  min-height: 62px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle b {
  color: var(--ink);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle small {
  color: var(--r-go);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon {
  width: 34px;
  height: 34px;
  color: var(--r-go);
  background: var(--r-go-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneStatusIcon,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneDockTitle small {
  color: #9b5b0a;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="setup"] .phoneStatusIcon {
  background: #fff5dc;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneStatusIcon,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneDockTitle small {
  color: var(--r-ink-faint);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2[data-phone-state="wrap"] .phoneStatusIcon {
  background: var(--soft);
}

@media (min-width: 1181px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    padding-right: 366px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    width: 326px;
  }
}

@media (max-width: 1180px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    display: flex;
    flex-direction: column;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupPanelV2 {
    order: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    order: 1;
    width: min(100%, 430px);
    margin: 0 auto 16px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callStageV2 {
    order: 2;
  }
}

@media (max-width: 560px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCommandBar > button,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    width: 100%;
    min-width: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 11px;
  }
}

/* The phone stays inside the dial workspace instead of hanging off the viewport. */
@media (min-width: 1181px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    min-width: 0;
    padding: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 326px;
    grid-template-areas:
      "setup setup"
      "stage phone";
    align-items: start;
    gap: 16px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupPanelV2 {
    grid-area: setup;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callStageV2 {
    grid-area: stage;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    position: sticky;
    inset: 16px auto auto;
    grid-area: phone;
    width: 326px;
    max-height: calc(100vh - 190px);
    margin: 0;
    overflow-y: auto;
  }
}

@media (min-width: 761px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    position: fixed;
    inset: auto 22px 18px auto;
    z-index: 30;
    width: 280px;
    max-height: calc(100vh - 36px);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
    max-height: min(68vh, 530px);
    border-radius: 14px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
    max-height: calc(min(68vh, 530px) - 52px);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockTitle {
    min-height: 52px;
    padding: 7px 10px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneStatusIcon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

/* Keep this desktop contract last. Earlier responsive layers describe legacy
   in-flow phone layouts; these rules make the current fixed phone authoritative. */
@media (min-width: 761px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView {
    --desktop-phone-width: 240px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 {
    min-width: 0;
    padding: 18px;
    padding-right: calc(var(--desktop-phone-width) + 40px);
    display: block;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callStageV2 {
    width: 100%;
    min-width: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .stationSetupPanelV2 {
    right: calc(var(--desktop-phone-width) + 40px);
    max-width: calc(100% - var(--desktop-phone-width) - 58px);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callDockStack {
    position: fixed;
    inset: auto 18px 18px auto;
    z-index: 30;
    width: var(--desktop-phone-width);
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 {
    width: 100%;
    height: min(440px, calc(100vh - 36px));
    max-height: none;
    display: flex;
    flex-direction: column;
    border-radius: 13px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockBodyV2 {
    min-height: 0;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockPanel:not([hidden]) {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDialPanel {
    padding: 8px 10px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneLeadPanel {
    padding: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .activeLeadCard {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 11px 12px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCockpit {
    min-width: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadIdentity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadIdentity strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadPhoneButton,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadPhoneText {
    margin: 2px 0 0;
    color: var(--r-accent);
    font-size: 11px;
    line-height: 1.2;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadPhoneButton small {
    display: none;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadEditButton {
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid #d8d9dc;
    border-radius: 7px;
    color: var(--ink);
    background: #fff;
    font-size: 9px;
    font-weight: 750;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadAddress {
    margin: 8px 0 7px;
    color: var(--r-ink-soft);
    font-size: 9px;
    line-height: 1.35;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadDetails {
    margin: 0;
    display: grid;
    border-top: 1px solid var(--r-line-soft);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadDetails > div {
    min-width: 0;
    min-height: 27px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--r-line-soft);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadDetails dt {
    color: var(--r-ink-faint);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadDetails dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadHistory {
    margin-top: 7px;
    padding: 0;
    display: grid;
    gap: 2px;
    border: 0;
    background: transparent;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadHistory p {
    margin: 0;
    overflow: hidden;
    color: var(--r-ink-faint);
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callbackPop {
    margin: 0 0 7px;
    padding: 6px 7px;
    gap: 1px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callbackPop b,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callbackPop span {
    overflow: hidden;
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow {
    grid-template-columns: minmax(0, 1fr) 32px 58px;
    gap: 5px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input,
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow button {
    min-height: 34px;
    height: 34px;
    border-radius: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneDockV2 .manualDialRow input {
    padding-inline: 7px;
    font-size: 13px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .manualDialClear {
    min-height: 20px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad {
    width: 176px;
    margin-top: 5px;
    gap: 4px 11px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button {
    width: 38px;
    min-height: 38px;
    padding: 2px 0;
    font-size: 14px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .phoneKeypad button small {
    min-height: 7px;
    font-size: 6px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBar {
    position: static;
    flex: 0 0 auto;
    padding: 6px 7px 7px;
    box-shadow: none;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callControlBarHead {
    min-height: 14px;
    margin-bottom: 4px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolRow {
    gap: 3px;
    margin-bottom: 4px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callTool {
    min-height: 34px;
    padding: 2px 1px;
    gap: 0;
    border-radius: 7px;
    font-size: 8px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callToolIcon {
    min-height: 12px;
    font-size: 13px;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .leadCallControls button {
    min-height: 32px;
    border-radius: 7px;
    font-size: 9px;
  }
}

/* Each top call-tool tab owns the center workspace. The phone remains a
   separate fixed sibling, so switching tools never stacks content on Scripts. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 > .dialToolPanels {
  min-width: 0;
  border: 0;
  background: transparent;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 > .dialToolPanels > .dialToolPanel {
  padding: 0;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView [data-tool-panel="scripts"] .scriptTabs {
  margin-bottom: 12px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 > .dialToolPanels > .dialToolPanel:not([data-tool-panel="scripts"]) {
  min-height: min(560px, calc(100vh - 230px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

@media (max-width: 760px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .dialCanvasV2 > .dialToolPanels > .dialToolPanel:not([data-tool-panel="scripts"]) {
    min-height: 360px;
    padding: 18px;
  }
}

/* Keep this active-call workspace contract last. */
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .activeCallWorkspace {
  min-width: 0;
  display: block;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callOutcomeRail,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callProfileRail {
  display: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .activeCallWorkspace {
  display: grid;
  grid-template-columns: minmax(148px, 176px) minmax(290px, 1fr) minmax(200px, 232px);
  align-items: stretch;
  gap: 10px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .callOutcomeRail,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .callProfileRail {
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .dialToolTabs {
  padding-inline: 10px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .dialToolTab {
  min-height: 36px;
  padding-inline: 9px;
  font-size: 10.5px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .dialToolPanels {
  border: 0;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .dialToolPanel {
  min-height: min(510px, calc(100vh - 215px));
  padding: 0;
  border: 0;
  background: var(--panel);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .scriptTabs {
  margin: 0;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--r-line-soft);
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .callStageV2,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .scriptReadingPane {
  width: 100%;
  min-height: 445px;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callWorkspaceCenter .scriptReadingPane {
  padding: 22px 24px 32px;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callOutcomeRail .callResultsDock {
  max-height: none;
  padding: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callOutcomeRail .resultGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callOutcomeRail .resultMeta,
body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callOutcomeRail .phoneLeadActions {
  grid-template-columns: 1fr;
}

body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView .callProfileRail .activeLeadCard {
  max-height: min(500px, calc(100vh - 270px));
  padding: 12px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 761px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .phoneDialPanel {
    display: none !important;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .phoneDockV2 {
    height: auto;
    min-height: 0;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .phoneDockBodyV2 {
    flex: 0 1 auto;
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .callControlStatus {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 1320px) and (min-width: 761px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .activeCallWorkspace {
    grid-template-columns: 156px minmax(260px, 1fr) 210px;
    gap: 8px;
  }
}

@media (max-width: 1080px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .activeCallWorkspace {
    grid-template-columns: minmax(150px, 180px) minmax(300px, 1fr);
  }

  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .callProfileRail {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body:is([data-workspace-mode="agent"], [data-workspace-mode="admin"]) #dialView.hasActiveAttempt .activeCallWorkspace {
    display: flex;
    flex-direction: column;
  }
}