/* ============================================================================
 * quickcall-v3.css — Quick Call v3 call surface overlay.
 * Scoped ENTIRELY under `.omv2-drawer.omv2-v3.qcv3` (the QC-call fork root, set by
 * mountInline only when qcv3Enabled()). Zero effect on the research v3 modal
 * (which is .omv2-v3 WITHOUT .qcv3) and zero effect on the cockpit call mode
 * (which has neither). Layers on top of:
 *   - owner-modal-v3.css  (the v3 skin: rail/work, offer hero, well table, activity)
 *   - cockpit.css         (the dial + script + dock base + the .outcome-callback /
 *                          .flag-dnc-on reveal classes)
 * and only restyles the call-specific pieces to the v3 visual language.
 *
 * Tokens only; no gradients / accent-stripes >1px / glows / nested cards /
 * translateY. Money green, teal = working CTA, brass = phone CTA (D12).
 * ============================================================================ */

/* ── Drawer box — the QC call session is a wide focused surface ──────────────
   The v3 research skin anchors a min(1200px,66vw) right drawer; QC widens it so
   the 400px call rail + the well table both breathe. #qc-host is display:contents,
   so the drawer positions itself (fixed right, like every drawer). */
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 {
  width: min(1320px, 96vw);
  min-width: 0;
}

/* ── Body: the call rail is wider than research (script is the centerpiece) ── */
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 .omv2-body {
  grid-template-columns: 400px 1fr;
}

/* ── Header: in call mode the ONLY dominant CTA is Save & next (the dock), so
   Generate PSA drops to a ghost/outline button and never competes. ─────────── */
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 .omv2-genbtn {
  background: transparent;
  border-color: var(--color-glass-border-strong);
  color: var(--color-secondary-text);
}
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 .omv2-genbtn:hover {
  background: var(--color-secondary-muted);
  border-color: var(--color-secondary);
}

/* ── Rail density: tighten the call rail so the dial + script + NOTE stay above
   the fold at laptop heights (1366×768) even with a dock reveal row open. The
   note (the call note) is part of the script centerpiece — it must not clip. ── */
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 .omv2-rail { gap: 12px; padding: 16px 18px; }

/* ════════════════════════════════════════════════════════════════════════
 * DIAL (rail) — number selector + brass Call + on-call timer + Copy + logs-to.
 * Reuses the cockpit dial markup (.ck-call-dial host + .omv2-dock-phone-select /
 * .ck-callbtn / .oncall / .ck-copy-btn) so the existing handlers drive it; this
 * just restyles it to the v3 card.
 * ════════════════════════════════════════════════════════════════════════ */
:root[data-v2="1"] .omv2-drawer.omv2-v3.qcv3 {
  .qcv3-dial {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-glass-border-strong);
    border-radius: 8px;
    background: #fff;
  }
  .qcv3-dial .ck-dial.ck-call-dial.qcv3-dial-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .qcv3-dial .numwrap { flex: 1 1 auto; min-width: 0; }
  .qcv3-dial .omv2-dock-phone-wrap { display: block; }
  /* number selector */
  .qcv3-dial .omv2-dock-phone-select.numselect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-glass-border-strong);
    border-radius: 8px;
    background: var(--color-surface-1);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
  }
  .qcv3-dial .omv2-dock-phone-select.numselect:hover { border-color: var(--color-text-tertiary); }
  .qcv3-dial .numselect-ph svg { width: 14px; height: 14px; color: var(--color-accent); }
  .qcv3-dial .omv2-dock-phone-label { flex: 1 1 auto; text-align: left; }
  .qcv3-dial .numtag {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-tertiary);
  }
  .qcv3-dial .omv2-dock-phone-custom {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid var(--color-glass-border-strong); border-radius: 8px;
    font-family: var(--font-mono); font-size: 13px; background: var(--color-surface-1);
  }
  /* Call button + on-call timer removed from qcv3 (display-only, never persisted) —
     see renderQcv3DialHTML. Copy is the dial-the-number affordance. */
  .qcv3-dial .ck-copy-btn {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    height: 30px; padding: 0 8px;
    border: 1px solid var(--color-glass-border); border-radius: 6px; background: #fff;
    color: var(--color-text-secondary); cursor: pointer; font-size: 11px;
  }
  .qcv3-dial .ck-copy-btn:hover { border-color: var(--color-text-tertiary); }
  .qcv3-dial .ck-copy-btn svg { width: 12px; height: 12px; }
  .qcv3-dial .ck-meta { margin-left: auto; }
  .qcv3-dial .ck-tagchip {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-text-tertiary);
    padding: 2px 8px; border: 1px solid var(--color-glass-border); border-radius: 999px;
  }
  /* logging-to line (renderCockpitLoggingToHTML) */
  .qcv3-dial .ck-loggingto {
    font-size: 11px; line-height: 1.4; color: var(--color-text-tertiary);
    padding-top: 8px; border-top: 1px solid var(--color-glass-border); margin: 0;
  }
  .qcv3-dial .ck-loggingto b {
    color: var(--color-text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }

  /* ════════════════════════════════════════════════════════════════════════
   * SCRIPT (rail) — the live-call centerpiece. Reuses renderCockpitCallScriptHTML
   * (.ck-call-script / .ck-script-sh / .ck-script-sbody / .ck-livenote / .ck-quickadd)
   * and restyles it to read aloud calmly.
   * ════════════════════════════════════════════════════════════════════════ */
  .ck-call-script {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0; padding: 14px 16px;
    border: 1px solid var(--color-secondary); border-radius: 8px;
    background: var(--color-secondary-muted);
  }
  .ck-call-script .ck-script-sh {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
    color: var(--color-secondary-text);
  }
  .ck-call-script .ck-script-sh svg { width: 14px; height: 14px; }
  .ck-call-script .ck-script-sbody {
    font-size: 14px; line-height: 1.62; color: var(--color-text-primary);
  }
  /* opener on its own opening beat; the live offer in money green */
  .ck-call-script .ck-script-sbody .q {
    display: block; margin-bottom: 4px; font-size: 16px;
    color: var(--color-secondary); font-weight: 600;
  }
  .ck-call-script .ck-script-sbody b {
    color: var(--color-success-text); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  /* collapse (cockpit .collapsed toggles via .ck-script-toggle) keeps working */
  .ck-call-script .ck-livenote { margin: 0; }
  .ck-call-script .ck-livenote-input {
    width: 100%; min-height: 58px; resize: vertical; padding: 8px 10px;
    border: 1px solid var(--color-glass-border-strong); border-radius: 8px; background: #fff;
    font-family: var(--font-body); font-size: 13px; color: var(--color-text-primary);
  }
  .ck-call-script .ck-livenote-input:focus-visible {
    outline: 2px solid var(--color-secondary); outline-offset: 1px; border-color: var(--color-secondary);
  }
  .ck-call-script .ck-quickadd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .ck-call-script .ck-qa-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px;
    border: 1px dashed var(--color-text-tertiary); border-radius: 999px; background: transparent;
    color: var(--color-text-secondary); cursor: pointer; font-size: 11px;
  }
  .ck-call-script .ck-qa-chip:hover { background: #fff; border-style: solid; }
  .ck-call-script .ck-qa-chip svg { width: 12px; height: 12px; }

  /* ── CONTEXT (rail) — collapsible quick reference (renderCockpitCallContextHTML) ── */
  .ck-context { margin: 0; border-top: 1px solid var(--color-glass-border); padding-top: 12px; }
  .ck-context .ck-ctx-title {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
    color: var(--color-text-tertiary);
  }
  .ck-context .ck-ctx-title svg { width: 12px; height: 12px; }

  /* ════════════════════════════════════════════════════════════════════════
   * CALL DOCK — one compact command bar. Reuses renderCockpitDockHTML verbatim
   * (the byte-stable save contract); only restyled here. flex-direction:row beats
   * cockpit.css's column stack; the callback / DNC-reason groups drop to their own
   * full-width second row, revealed by the EXISTING .outcome-callback / .flag-dnc-on
   * classes (toggled by setDockOutcome / setDockFlag, which also clear each other).
   * ════════════════════════════════════════════════════════════════════════ */
  .qc-dock-inline .ck-dock-body {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px; row-gap: 8px; padding: 8px 16px; min-height: 62px;
  }
  /* group ordering — outcome | lead | DNC on row 1; spoke + reveals on their own rows */
  .qc-dock-inline .ck-dock-group { display: inline-flex; align-items: center; gap: 8px; flex: none; }
  .qc-dock-inline .ck-dock-group:has([data-dock-group="outcome"]) { order: 1; }
  .qc-dock-inline .ck-dock-group:has([data-dock-group="lead"])    { order: 3; }
  .qc-dock-inline .ck-dock-group:has([data-dock-group="flag"])    { order: 4; }
  .qc-dock-inline .ck-dock-spoke      { order: 5; flex: 1 1 100%; }
  .qc-dock-inline .ck-dock-note-row   { order: 6; margin-left: auto; display: inline-flex; align-items: center; }
  /* reveal rows: hidden by default (the .ck-dock-group{display:inline-flex} above
     would otherwise un-hide cockpit's default-hidden callback/DNC groups). Shown
     only under the EXISTING .outcome-callback / .flag-dnc-on state classes (set by
     setDockOutcome / setDockFlag, which also clear each other) as a full-width 2nd row. */
  .qc-dock-inline .ck-dock-callback,
  .qc-dock-inline .ck-dock-dnc-reason { display: none; }
  .qc-dock-inline.outcome-callback .ck-dock-callback { display: inline-flex; order: 8; flex: 1 1 100%; }
  .qc-dock-inline.flag-dnc-on .ck-dock-dnc-reason   { display: inline-flex; order: 9; flex: 1 1 100%; }
  .qc-dock-inline .ck-dock-group-l {
    flex: none;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-text-tertiary);
  }
  /* segmented outcome / lead controls — connected chips, selected = teal fill */
  .qc-dock-inline [data-dock-group="outcome"],
  .qc-dock-inline [data-dock-group="lead"] {
    display: inline-flex; border: 1px solid var(--color-glass-border-strong);
    border-radius: 8px; overflow: hidden; gap: 0;
  }
  .qc-dock-inline [data-dock-group="outcome"] .omv2-dock-chip,
  .qc-dock-inline [data-dock-group="lead"] .omv2-dock-chip {
    border: 0; border-right: 1px solid var(--color-glass-border); border-radius: 0;
    min-height: 0; height: 34px; padding: 0 12px; cursor: pointer;
    font-family: var(--font-body); font-size: 12px; font-weight: 500;
    background: #fff; color: var(--color-text-secondary); display: inline-flex; align-items: center;
  }
  .qc-dock-inline [data-dock-group="outcome"] .omv2-dock-chip:last-child,
  .qc-dock-inline [data-dock-group="lead"] .omv2-dock-chip:last-child { border-right: 0; }
  .qc-dock-inline [data-dock-group="outcome"] .omv2-dock-chip:hover,
  .qc-dock-inline [data-dock-group="lead"] .omv2-dock-chip:hover { background: var(--color-surface-1); }
  .qc-dock-inline [data-dock-group="outcome"] .omv2-dock-chip.active,
  .qc-dock-inline [data-dock-group="lead"] .omv2-dock-chip.active { background: var(--color-secondary); color: #fff; }
  /* DNC flag — standalone outline chip, error-tint when active */
  .qc-dock-inline .ck-dock-flag {
    display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 34px; padding: 0 12px;
    border: 1px solid var(--color-glass-border-strong); border-radius: 8px; background: #fff;
    color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-body);
    font-size: 12px; font-weight: 500;
  }
  .qc-dock-inline .ck-dock-flag svg { width: 14px; height: 14px; }
  .qc-dock-inline .ck-dock-flag:hover { border-color: var(--color-text-tertiary); }
  .qc-dock-inline .ck-dock-flag.active {
    border-color: oklch(0.55 0.16 25 / 0.5); background: var(--color-error-muted); color: var(--color-error);
  }
  /* reveal-row inputs (callback date / DNC reason) */
  .qc-dock-inline .omv2-dock-cb-input,
  .qc-dock-inline .ck-dock-dnc-input {
    height: 32px; padding: 0 10px; border: 1px solid var(--color-glass-border-strong); border-radius: 8px;
    font-family: var(--font-mono); font-size: 12px; color: var(--color-text-primary); background: #fff; min-width: 160px;
  }
  /* spoke-with select */
  .qc-dock-inline .omv2-dock-spoke-with {
    height: 32px; padding: 0 8px; border: 1px solid var(--color-glass-border-strong); border-radius: 8px;
    font-family: var(--font-body); font-size: 12px; background: #fff; color: var(--color-text-primary);
  }
  /* actions — Save & next is the dominant CTA */
  .qc-dock-inline .ck-dock-actions { display: inline-flex; align-items: center; gap: 10px; }
  .qc-dock-inline .omv2-dock-cancel {
    height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--color-glass-border-strong); color: var(--color-text-secondary);
    font-size: 12px; font-weight: 500;
  }
  .qc-dock-inline .omv2-dock-cancel:hover { background: #EEF1F4; }
  .qc-dock-inline .omv2-dock-status { font-size: 12px; }
  .qc-dock-inline .omv2-dock-save {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 20px; border-radius: 8px; cursor: pointer;
    background: var(--color-secondary); border: 1px solid var(--color-secondary); color: #fff;
    font-size: 13px; font-weight: 600;
  }
  .qc-dock-inline .omv2-dock-save:hover { background: var(--color-secondary-hover); }
  .qc-dock-inline .omv2-dock-save:disabled { opacity: .5; cursor: default; }
}

/* ── Backdrop dim — the QC call session reads as a focused modal: the Owners
   view behind the right-anchored drawer is dimmed, not competing. Appended to
   #qc-host by mountInline ONLY under _qcv3Call; sits below the .omv2-v3 drawer
   (z-index 1200). Non-dismissive (the queue chrome's End button is the canonical
   exit) so a stray click can't drop an in-progress call. Same ink hue (200) as
   the sidebar / drawer shadows, consistent with owner-modal-v3.css surfaces. ── */
:root[data-v2="1"] #qc-host .qcv3-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.20 0.010 200 / 0.40);
  z-index: 1190;
}