/* View 2 host chrome — experimental shared Diagram engine.
   Contain GUTTER-sized SVG so it scrolls inside .diagram-host instead of
   inflating #lexcen / AppBar (customer name drifts right; profile clipped).
   Same pattern as Operations page AppBar clip fix. */

#call-flow-wrapper.view2-host {
    display: grid;
    grid-template-areas:
        "banner banner"
        "menu diagram";
    /* minmax(0,1fr) — bare 1fr = minmax(auto,1fr) and grows with SVG min-content */
    grid-template-columns: var(--call-flow-menu-width, 275px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    box-sizing: border-box;
    height: calc(88vh - 6px);
    max-height: calc(88vh - 6px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Build 2 / View 2 with toolbar: toolbar between banner and menu/diagram. */
#call-flow-wrapper.view2-host.build2-host,
#call-flow-wrapper.view2-host.view2-toolbar-host {
    grid-template-areas:
        "banner banner"
        "toolbar toolbar"
        "menu diagram";
    grid-template-rows: auto auto minmax(0, 1fr);
}

/* Templates 2 — same outer chrome as original Templates (toolbar / menu / diagram). */
#call-flow-wrapper.view2-host.templates2-host {
    grid-template-areas:
        "toolbar toolbar"
        "menu diagram";
    grid-template-columns: var(--call-flow-menu-width, 275px) minmax(0, 1fr);
    grid-template-rows: 48px minmax(0, 1fr);
}

#call-flow-wrapper.view2-host.templates2-host.docked {
    grid-template-columns: 50px minmax(0, 1fr);
}

/* Docked template flyout is wider than the 50px rail. The shared view2 rule
   sets overflow:hidden, which clips that flyout. View 2 / Build 2 stay clipped. */
#call-flow-wrapper.view2-host.templates2-host .menu-container {
    overflow: visible;
}

#call-flow-wrapper.view2-host.build2-host .build2-toolbar,
#call-flow-wrapper.view2-host.build2-host .toolbar,
#call-flow-wrapper.view2-host.view2-toolbar-host .view2-toolbar,
#call-flow-wrapper.view2-host.view2-toolbar-host .toolbar,
#call-flow-wrapper.view2-host.templates2-host .toolbar {
    grid-area: toolbar;
    min-width: 0;
}

#call-flow-wrapper.view2-host .view2-banner {
    grid-area: banner;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0.75rem;
    background: #f4f6f8;
    border-bottom: 1px solid #d0d7de;
    font-size: 0.85rem;
}

#call-flow-wrapper.view2-host .view2-banner strong {
    font-weight: 600;
}

#call-flow-wrapper.view2-host .menu-container {
    grid-area: menu;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#call-flow-wrapper.view2-host .diagram {
    grid-area: diagram;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#call-flow-wrapper.view2-host .diagram-v2-surface {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    /* Keep scroll on .diagram-host; do not clip floating tooltips. */
    overflow: visible;
}

#call-flow-wrapper.view2-host .diagram-v2-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #57606a;
    font-size: 0.95rem;
    padding: 1.5rem;
    text-align: center;
    z-index: 1;
}

/* Contain the scrollport only — do NOT cap .lxn-diagram width (JS sizes it
   with GUTTER so content can scroll inside .diagram-host). */
#call-flow-wrapper.view2-host .diagram-viewer-root,
#call-flow-wrapper.view2-host .diagram-host {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

/* Ancestor containment — stop GUTTER SVG from widening AppBar (profile clipped). */
#lexcen:has(.view2-host) #app-container,
#lexcen:has(.view2-host) main,
#lexcen:has(.view2-host) main > .content {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Legacy CF connector sprites — preserve symbol fills (diagram.host.css forces primary blue on .icon). */
#call-flow-wrapper.view2-host use[href="#icon-busy"],
#call-flow-wrapper.view2-host use[xlink\:href="#icon-busy"] {
    color: #C0504D;
    fill: #C0504D !important;
}

#call-flow-wrapper.view2-host use[href="#icon-callforward-selective"] path[fill="#C0504D"],
#call-flow-wrapper.view2-host use[xlink\:href="#icon-callforward-selective"] path[fill="#C0504D"],
#call-flow-wrapper.view2-host use[href="#icon-callforward-unreachable"] path[fill="#C0504D"],
#call-flow-wrapper.view2-host use[xlink\:href="#icon-callforward-unreachable"] path[fill="#C0504D"] {
    fill: #C0504D !important;
}

/* AA transfer-option pills — legacy grey chrome (LabelPill, not sprite <use>). */
#call-flow-wrapper.view2-host .node-pill[data-details="WithPrompt"] .pill-bg,
#call-flow-wrapper.view2-host .node-pill[data-details="NoPrompt"] .pill-bg,
#call-flow-wrapper.view2-host .node-pill[data-details="ExtensionDialling"] .pill-bg,
#call-flow-wrapper.view2-host .node-pill[data-details="NameDialling"] .pill-bg,
#call-flow-wrapper.view2-host .node-pill[data-details="SubMenu"] .pill-bg {
    fill: #f5f5f5;
    stroke: #c8c8c8;
    stroke-width: 1;
}

#call-flow-wrapper.view2-host .node-pill[data-details="WithPrompt"] .pill-text,
#call-flow-wrapper.view2-host .node-pill[data-details="NoPrompt"] .pill-text,
#call-flow-wrapper.view2-host .node-pill[data-details="ExtensionDialling"] .pill-text,
#call-flow-wrapper.view2-host .node-pill[data-details="NameDialling"] .pill-text,
#call-flow-wrapper.view2-host .node-pill[data-details="SubMenu"] .pill-text,
#call-flow-wrapper.view2-host .node-pill[data-details="WithPrompt"] .pill-text-line2,
#call-flow-wrapper.view2-host .node-pill[data-details="NoPrompt"] .pill-text-line2,
#call-flow-wrapper.view2-host .node-pill[data-details="ExtensionDialling"] .pill-text-line2,
#call-flow-wrapper.view2-host .node-pill[data-details="NameDialling"] .pill-text-line2,
#call-flow-wrapper.view2-host .node-pill[data-details="SubMenu"] .pill-text-line2 {
    fill: #706f6f;
    stroke: none;
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 14px;
}

/* Ring-count pill (No Answer) — lighter text and thinner pill / arc strokes. */
#call-flow-wrapper.view2-host .node-ring-duration .time-text {
    font-weight: 500;
    font-size: 16px;
    stroke: none;
}

#call-flow-wrapper.view2-host .node-ring-duration .time-bg {
    stroke-width: 1;
}

#call-flow-wrapper.view2-host .node-ring-duration .time-arc {
    stroke-width: 1.5;
}

#call-flow-wrapper.view2-host .node-ring-duration .time-arc.inner {
    stroke-width: 1;
    opacity: 1;
}

/* Compact transfer icons (Exit, Operator, etc.) — host sprite via TransferOption. */
#call-flow-wrapper.view2-host .node-transferoption use.icon {
    color: inherit;
}

#call-flow-wrapper.view2-host .node-transferoption[data-details="Exit"] use.icon,
#call-flow-wrapper.view2-host .node-transferoption[data-details="Repeat"] use.icon,
#call-flow-wrapper.view2-host .node-transferoption[data-details="Return"] use.icon,
#call-flow-wrapper.view2-host .node-transferoption[data-details="TransferToOperator"] use.icon,
#call-flow-wrapper.view2-host .node-transferoption[data-details="TransferToVoicemail"] use.icon,
#call-flow-wrapper.view2-host .node-transferoption[data-details="PlayAnnouncement"] use.icon {
    x: 0 !important;
    y: 0 !important;
    width: 56px !important;
    height: 56px !important;
    preserve-aspect-ratio: xMidYMid meet;
}

/* Repeat sprite has a tighter square viewBox than the other transfer glyphs. */
#call-flow-wrapper.view2-host .node-transferoption[data-details="Repeat"] use.icon {
    x: 3px !important;
    y: 3px !important;
    width: 50px !important;
    height: 50px !important;
}

/* Business Hours / After Hours collapse chevron → primary blue */
#call-flow-wrapper.view2-host .label-toggle,
#call-flow-wrapper.view2-host .card-toggle-chevron {
    fill: var(--primary-color, #0f5fb2) !important;
    color: var(--primary-color, #0f5fb2) !important;
}

/* Disabled play icon (Webex View 2 — no audio flyout yet).
   diagram.host.css omits Teams diagram.css play-loading-ring rules; without fill:none
   the sibling ring circle paints as a solid black disc. */
#call-flow-wrapper.view2-host .node-playmessage .play-loading-ring {
    fill: none;
    stroke: var(--primary-color, #0f5fb2);
    stroke-width: 2.5;
    opacity: 0;
    pointer-events: none;
}

#call-flow-wrapper.view2-host .node-playmessage:not(.clickable) {
    cursor: default;
}

#call-flow-wrapper.view2-host .node-playmessage:not(.clickable) .icon {
    color: var(--grey-text-color, #A0A0A1) !important;
    fill: var(--grey-text-color, #A0A0A1) !important;
    opacity: 0.7;
}

/* Card / metric hover content (IHoverProvider BodyTemplates). */
#call-flow-wrapper.view2-host .lxn-hover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 12rem;
}

#call-flow-wrapper.view2-host .lxn-hover-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* All hover tip body text matches schedule tips: primary colour, normal weight. */
#call-flow-wrapper.view2-host .lxn-hover-name,
#call-flow-wrapper.view2-host .lxn-hover-detail,
#call-flow-wrapper.view2-host .lxn-hover-value,
#call-flow-wrapper.view2-host .lxn-hover-text,
#call-flow-wrapper.view2-host .lxn-hover-empty,
#call-flow-wrapper.view2-host .lxn-hover-schedule li,
#call-flow-wrapper.view2-host .lxn-hover-schedule .lxn-hover-name,
#call-flow-wrapper.view2-host .lxn-hover-schedule-text {
    font-weight: 400;
    color: var(--primary-color, #0f5fb2);
}

#call-flow-wrapper.view2-host .lxn-hover-name {
    white-space: nowrap;
}

/* Agent / number values sit beside the name. */
#call-flow-wrapper.view2-host .lxn-hover-detail,
#call-flow-wrapper.view2-host .lxn-hover-value {
    margin-left: auto;
    text-align: right;
}

#call-flow-wrapper.view2-host .lxn-hover-fields .lxn-hover-name {
    margin-right: 0.75rem;
}

#call-flow-wrapper.view2-host .lxn-hover-text,
#call-flow-wrapper.view2-host .lxn-hover-empty {
    margin: 0;
    max-width: 18rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

#call-flow-wrapper.view2-host .node-email {
    fill: var(--primary-color, #0f5fb2);
}

#call-flow-wrapper.view2-host .lxn-hover-presence {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

#call-flow-wrapper.view2-host .lxn-hover-presence.online {
    background: #2da44e;
}

#call-flow-wrapper.view2-host .lxn-hover-presence.away {
    background: #d4a72c;
}

#call-flow-wrapper.view2-host .lxn-hover-presence.offline {
    background: #cf222e;
}

/* Card kebab + package float menu (EnableBuildCardActions) */
#call-flow-wrapper.view2-host .card-menu-btn .card-menu-icon {
    color: var(--primary-color, #0f5fb2);
    fill: currentColor;
}

#call-flow-wrapper.view2-host .card-menu-btn:hover .card-menu-icon {
    color: var(--secondary-color, var(--primary-color, #0f5fb2));
}

#call-flow-wrapper.view2-host .diagram-card-menu {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #d0d7de);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 10rem;
    padding: 0.25rem;
}

#call-flow-wrapper.view2-host .diagram-card-menu-item {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    width: 100%;
}

#call-flow-wrapper.view2-host .diagram-card-menu-item:hover {
    background: color-mix(in srgb, var(--primary-color, #0f5fb2) 12%, transparent);
}

#call-flow-wrapper.view2-host .diagram-card-menu-item-danger {
    color: #cf222e;
}