/* Approved VRS icon family and graphite gallery design, 2026-10-03. */
.vrs-icon{display:inline-block;width:24px;height:24px;flex:0 0 auto;object-fit:contain;vertical-align:middle;pointer-events:none;user-select:none}
.vrs-icon-tint{background:linear-gradient(145deg,color-mix(in srgb,currentColor 88%,white),currentColor);-webkit-mask:var(--vrs-icon-url) center/contain no-repeat;mask:var(--vrs-icon-url) center/contain no-repeat}
button>.vrs-icon{width:18px;height:18px;margin-right:6px}
button>.vrs-icon:only-child{margin:0}
.icon-btn:has(>.vrs-icon){display:inline-flex;align-items:center;justify-content:center}
.flow-palette-icon .vrs-icon{width:27px;height:27px}
.flow-node-icon .vrs-icon{width:28px;height:28px}
.robot-setting-icon .vrs-icon{width:27px;height:27px}
.flow-edge-filler-glyph .vrs-icon{width:28px;height:28px}
.flow-palette-grip .vrs-icon{width:12px;height:16px;color:#748093}
.flow-node-open .vrs-icon{width:12px;height:12px}
.vrs-palette-chevron{width:13px;height:13px;color:#858e9c;transition:transform .15s ease}
.flow-palette-section[open]>.vrs-palette-chevron,.flow-palette-section[open]>summary>.vrs-palette-chevron{transform:rotate(90deg)}
.flow-global-trigger-diamond>.vrs-icon{position:absolute;left:41px;top:8px;width:27px;height:27px;transform:rotate(-45deg);color:#e1ba84}
.call-avatar .vrs-icon{width:66px;height:66px}
.call-control-glyph{display:grid;place-items:center;width:34px;height:34px;line-height:0}
.call-control-glyph .vrs-icon{width:34px;height:34px;margin:0}
.call-control-glyph:not(.stop) .vrs-icon{transform:translateY(2px)}
.btn-test-robot .test-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;line-height:0;flex:0 0 14px}
.btn-test-robot .test-icon .vrs-icon{width:14px;height:14px;margin:0}
.crm-stage-add{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.crm-stage-add>.vrs-icon{width:18px;height:18px;margin:0}
.campaign-control-glyph .vrs-icon{width:32px;height:32px;margin:0}
.lp-run-btn .vrs-icon{width:36px;height:36px;margin:0}
.campaign-speaker-btn .vrs-icon,.campaign-dtmf-btn .vrs-icon{width:20px;height:20px;margin:0}
.campaign-listen-btn .vrs-icon{width:22px;height:22px;margin:0}
.campaign-console-controls{height:132px;flex-basis:132px;grid-template-columns:minmax(48px,1fr) 104px 96px;gap:8px;align-items:end;padding:18px}
.campaign-call-timer{justify-self:start;align-self:end;padding:0;line-height:22px}
.campaign-main-control{height:100%;min-height:0;justify-content:flex-start;gap:8px}
.campaign-main-control .call-control-btn{width:68px;height:68px;min-width:68px;min-height:68px}
.campaign-main-control .call-control-label{white-space:nowrap;line-height:14px;min-height:0;margin:0}
.campaign-right-controls{align-self:start;justify-self:start;margin:12px 0 0;gap:8px}
.crm-export-arrow .vrs-icon{width:20px;height:20px}
.crm-chevron-icon.vrs-icon{width:20px;height:20px}
.crm-chevron-icon-side.vrs-icon{width:24px;height:32px}
.scenario-context-menu button>.vrs-icon{width:18px;height:18px;margin:0;display:inline-block}
.ann-tool-btn>.vrs-icon,.ann-bg-color>.vrs-icon{width:20px;height:20px;margin:0}
.vrs-align-right{transform:scaleX(-1)}
.vrs-align-center{-webkit-mask-size:90% 100%;mask-size:90% 100%}
.brand-mark{width:78px;height:42px;min-width:78px;border:0;background:none;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center}
.brand-mark::before,.brand-mark::after,.brand-mark>span{display:none!important}
.brand-mark>img{width:100%;height:100%;object-fit:contain}
.login-shell .brand-mark{width:154px;height:78px}

/* Wide section tiles reproduce the approved composition with real HTML text. */
.section-grid{max-width:1280px;gap:18px}
.section-tile{position:relative;min-height:172px;padding:27px 28px;border-radius:15px;overflow:hidden;background:linear-gradient(130deg,#202329,#191c22);border-color:#353b46;box-shadow:0 12px 30px #0002;justify-content:center}
.section-tile:hover{background:linear-gradient(130deg,#252932,#1d2129);border-color:#526486}
.section-tile>span:nth-child(2){position:relative;margin:0;max-width:55%;z-index:1}
.section-tile b{font-size:1.55rem;line-height:1.2;font-weight:750}
.section-tile small{font-size:.86rem;line-height:1.5;color:#9ba4b4;margin-top:10px;max-width:260px}
.section-tile em{position:relative;margin-top:15px;font-size:.72rem;z-index:1}
.section-icon{position:absolute;right:18px;top:24px;width:43%;height:124px;display:block;padding:0;border:0;border-radius:0;background:none;pointer-events:none}
.section-icon img{width:100%;height:100%;object-fit:contain}
.section-icon i{display:none}
.robot-tile,.crm-funnel-tile{position:relative;min-height:174px;border-radius:15px;background:linear-gradient(130deg,#202329,#191c22);border-color:#353b46;box-shadow:0 12px 30px #0002;overflow:hidden}
.robot-tile:hover,.crm-funnel-tile:hover{background:linear-gradient(130deg,#252932,#1d2129);border-color:#526486}
.robot-tile .robot-avatar,.robot-tile .crm-funnel-avatar{position:static;width:40px;height:40px;min-width:40px;border:0;border-radius:11px;background:#a8c7fa0c;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:none}
.robot-tile .robot-avatar>.vrs-icon,.robot-tile .crm-funnel-avatar>.vrs-icon{width:30px;height:30px}
.robot-tile .robot-tile-top{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-bottom:15px;position:relative}
.robot-tile .robot-tile-copy{position:relative;z-index:1;min-width:0;width:100%;margin:0}
.robot-tile .robot-tile-copy b{font-size:1.05rem;color:#f1f3f8;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.robot-tile .robot-tile-open{position:static;margin-top:16px;font-size:.73rem}
.crm-funnel-tile .crm-count,.crm-funnel-tile .crm-importing-badge{position:relative;z-index:1;margin:0}
.import-preview-card .robot-avatar{width:56px;height:42px;min-width:56px;background:none;border:0;padding:0}
.import-preview-card .robot-avatar>.vrs-icon{width:56px;height:42px}
.vrs-workspace-title{display:flex;align-items:center;gap:12px}
.vrs-workspace-art{display:flex;align-items:center;justify-content:center;width:45px;height:45px;flex:0 0 45px;background:#20262e;border:1px solid #a8c7fa20;border-radius:12px}
.vrs-workspace-art>.vrs-icon{width:36px;height:36px}
.vrs-workspace-copy{min-width:0}

/* Outgoing only: a large start disc overlaps the left edge of the call card. */
.flow-node-call-outbound .flow-outbound-campaign{left:-60px;top:50%;bottom:auto;width:88px;height:88px;transform:translateY(-50%);z-index:8;justify-content:center}
.flow-node-call-outbound .flow-outbound-btn{width:88px;height:88px;min-width:88px;border-radius:50%;border:1px solid #8be8d980;background:linear-gradient(145deg,#8bdcc9,#67cbb4);color:#173d36;box-shadow:inset 0 1px 0 #e4fff766,0 7px 20px #0004;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease,opacity .18s ease}
.flow-node-call-outbound .flow-outbound-btn .vrs-icon{width:62px;height:62px;margin:0;background:currentColor}
.flow-node-call-outbound .flow-outbound-btn:not(:disabled):hover{background:linear-gradient(145deg,#a1ead9,#77d6c0);border-color:#bcfff0;color:#123b33;box-shadow:inset 0 1px 0 #e4fff788,0 9px 24px #0005;transform:scale(1.035)}
.flow-node-call-outbound .flow-outbound-btn:not(:disabled):active{transform:scale(.97)}
.flow-node-call-outbound .flow-outbound-btn:disabled{background:linear-gradient(145deg,#50575f,#3c434b);border-color:#68727a;color:#9ca5ac;opacity:1;box-shadow:inset 0 1px 0 #ffffff10,0 7px 18px #0003;cursor:not-allowed}
.flow-node-call-outbound .flow-outbound-btn.active{background:linear-gradient(145deg,#8bdcc9,#67cbb4);border-color:#8be8d980;color:#173d36}
.flow-node-call-outbound .flow-outbound-btn.stopping{background:linear-gradient(145deg,#6b6250,#514b40);border-color:#d6bd7b77;color:#e4c88e;opacity:1}
.flow-node-call-outbound:has(.flow-outbound-campaign) .flow-node-main{padding-left:48px;grid-template-columns:minmax(0,1fr) 16px;gap:7px}
.flow-node-call-outbound:has(.flow-outbound-campaign) .flow-node-icon{display:none}
.flow-node-call-outbound:has(.flow-outbound-campaign) .flow-node-main::before{display:none}
.flow-node-call-outbound .flow-outbound-status{position:absolute;top:calc(100% + 7px);left:20px;max-width:230px;width:max-content;pointer-events:none}
@media(max-width:760px){.section-grid{grid-template-columns:1fr}.section-tile{min-height:158px}.section-tile b{font-size:1.35rem}.section-icon{right:12px;width:40%;height:110px}.brand-mark{width:62px;min-width:62px}.vrs-workspace-art{width:36px;height:36px;flex-basis:36px}}

/* Flat icon backings, shared by scenario elements and settings. */
.flow-node .flow-node-icon{border:0;box-shadow:none}
.flow-palette-icon{border:0;box-shadow:none}
.flow-node .flow-node-icon::after{display:none}
.flow-edge-filler-glyph{width:38px;height:38px;min-height:38px;border:0;box-shadow:none;background:#a4bbe51f;transform:translateY(-2px)}
.robot-setting-card{justify-content:flex-start}
.robot-setting-card .robot-setting-icon{margin-top:0}

/* Setup information belongs to the call node and follows its position. */
.robot-activation-info{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;padding:0;border:1px solid #bba15e66;border-radius:50%;background:#bba15e18;color:#d1b979;font:600 16px/1 Georgia,serif;cursor:pointer;flex:0 0 auto}
.robot-activation-info:hover{background:#bba15e2b;border-color:#c5ab7088;color:#e3cd96}
.robot-activation-info:focus-visible{outline:2px solid #d1b979;outline-offset:3px}
.robot-activation-info[hidden]{display:none}
.robot-activation-info-node{position:absolute;right:calc(100% + 32px);top:50%;transform:translateY(-50%);z-index:9}
.flow-node-call-outbound:has(.flow-outbound-campaign) .robot-activation-info-node{right:calc(100% + 92px)}
.robot-activation-info-modal{width:min(440px,calc(100vw - 40px))}
.robot-activation-info-modal .modal-header h2{font-size:17px}
.robot-activation-issues{margin:0;padding-left:22px;color:#c7cbd3;font-size:13px;line-height:1.6}
.robot-activation-issues li+li{margin-top:10px}