@font-face{font-family:Roboto;src:url('../../fonts/roboto-latin.woff2')}
:root{--sans:Roboto,Arial,sans-serif;--mock-font:Roboto,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:1280px;height:750px;overflow:hidden;background:#fff;font-family:var(--sans)}
#f-agents .feature-scene,#f-agents .ag-source-frame{width:1280px;height:750px;aspect-ratio:auto;border-radius:0;margin:0;overflow:hidden}
#f-agents .kxwin{width:1280px;height:750px;transform:none;border-radius:0}
#f-agents .wfview{top:0;bottom:0;width:1280px;height:auto}
#f-agents .wfb .wftool{display:none}
#f-agents .wfb .aibig{top:145px}
#f-agents .wfb .aiin{bottom:130px}
#f-agents .wfb .wfgr{top:24px;transform:translateY(0)}
#f-agents .wfb .wftx i{font-size:12px;white-space:normal;line-height:1.3}
/* Keep hidden source overlays out of the accessibility tree. */
#f-agents .wfb .wfai,#f-agents .wfb.nopill .wfpill,#f-agents .wfb .wfbuild{visibility:hidden}
#f-agents .wfb.ai .wfai,#f-agents .wfb.building .wfbuild{visibility:visible}

/* Use Inbox's 13–14 px control text on the same 1280 px canvas. */
#f-agents .wfb .wfsw,#f-agents .wfb .wfsave,#f-agents .wfb .aihd i{font-size:13px}
#f-agents .wfb .aiin .txt,#f-agents .wfb .aibig p{font-size:14px;line-height:1.5}
#f-agents .wfb .wftx b{font-size:13px}
#f-agents .wfb .wflogo{background:transparent;box-shadow:none}
#f-agents .wfb .wflogo img{display:block;width:28px;height:28px;object-fit:contain}

#f-agents .wfb .wfprogress{display:none}
#f-agents .wfb .wftile{background:#5066ff}

/* Hide the removed controls if an older preview document is cached. */
.hero-agent-stages{display:none!important}
/* Give the prompt screen a readable composition within the full hero canvas. */
#f-agents .wfb .aibig{top:125px;padding:0 60px}
#f-agents .wfb .aibig .sq{width:64px;height:64px;margin-bottom:24px;border-radius:17px}
#f-agents .wfb .aibig .sq svg{width:32px;height:32px}
#f-agents .wfb .aibig h4{font-size:26px;line-height:1.25;margin-bottom:14px}
#f-agents .wfb .aibig p{max-width:760px;margin:0 auto;font-size:18px;line-height:1.5}
#f-agents .wfb .aiin{width:850px;height:88px;bottom:180px;padding:0 18px 0 24px;gap:16px}
#f-agents .wfb .aiin .txt{font-size:18px;line-height:1.45;white-space:normal;overflow:visible}
#f-agents .wfb .aiin .send{width:48px;height:46px;flex:none}
#f-agents .wfb .aiin .send svg{width:20px;height:20px}

/* Match Unified Inbox rail geometry; only AI Agents is selected. */
#f-agents .wfb{--rail:54px}
#f-agents .wfb .wfrail{padding:13px 7px;align-items:center;border-right:1px solid #eceef3}
.hero-nav-brand{display:flex;justify-content:center;padding-bottom:21px}
.hero-nav-brand img{width:28px;height:28px}
.hero-nav-brand b,.hero-nav-search,.hero-nav-label,.hero-nav-item span,.hero-nav-profile span{display:none}
.hero-nav-item svg{width:18px;height:18px;stroke-width:1.6;flex:none}
.hero-nav-items{display:flex;flex:1;flex-direction:column;gap:13px}
.hero-nav-item{display:grid;place-items:center;width:36px;height:29px;border-radius:6px;color:#68737d;flex:none}
.hero-nav-item.is-selected{background:#5066ff;color:#fff}
.hero-nav-item:last-child{margin-top:auto}
.hero-nav-profile{display:flex;justify-content:center;width:36px;margin-top:13px}
.hero-nav-profile img{width:35px;height:35px;border-radius:50%;object-fit:cover}

/* Reading focus follows one target; controls use a press treatment instead. */
#f-agents .wfb .agent-focus{outline:2px solid #2f73ff;outline-offset:3px;box-shadow:0 0 0 9px rgba(47,115,255,.13)!important;border-radius:10px}
#f-agents .wfb .wfcard{transition:box-shadow .3s ease,outline-color .3s ease,scale .3s ease}
#f-agents .wfb .wfcard.agent-focus{scale:1.025}
#f-agents .wfb .wfn.sel .wfcard:not(.agent-focus){border-color:#e3e5ec;box-shadow:none}
#f-agents .wfb .agent-action{scale:1.06;filter:brightness(.94);transition:scale .2s ease,filter .2s ease}
#f-agents .wfb .agent-action.hit{scale:.96}

/* Keep both branches and their focus rings inside the canvas. */
#f-agents .wfb .wfgr{scale:.85;transform-origin:top center}

/* The original selection border must not form a second purple ring. */
#f-agents .wfb .wfn.sel .wfcard.agent-focus,
#f-agents .wfb .wfcard.agent-focus{border-color:#e5e7eb}

/* Save is an action, not a reading focus. */
#f-agents .wfb .wfsave{transition:scale .14s ease,filter .14s ease}
#f-agents .wfb .wfsave.hit{scale:.93;filter:brightness(.88);outline:none;box-shadow:none}

.agent-saved-overlay{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:rgba(16,24,40,.22);backdrop-filter:blur(3px)}
.agent-saved-overlay[hidden]{display:none}
.agent-saved-modal{width:340px;padding:28px;text-align:center;border:1px solid #e6e9f0;border-radius:12px;background:#fff;box-shadow:0 20px 60px #10182824;animation:agent-saved-in .25s ease-out}
.agent-saved-modal span{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 14px;border-radius:50%;background:#edf3ff;color:#2f73ff;font-size:21px}
.agent-saved-modal h2{margin:0;color:#101828;font:600 20px Roboto,Arial,sans-serif}
@keyframes agent-saved-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.agent-saved-modal{animation:none}}

.agent-saved-modal span svg{display:block;width:22px;height:22px;flex:none}

.agent-rule-panel{position:absolute;right:28px;top:165px;width:285px;padding:24px;background:white;border:1px solid #e4e7ee;border-radius:12px;box-shadow:0 12px 40px #10182820;z-index:20}
.agent-rule-panel[hidden],.agent-event-note[hidden]{display:none}
.agent-rule-panel small{font-size:11px;letter-spacing:1px;color:#667085}.agent-rule-panel h2{font-size:20px;margin:12px 0 24px}.agent-rule-panel label{font-size:13px;color:#667085}.agent-rule-value{margin:12px 0 20px;padding:12px;border:1px solid #dfe3eb;border-radius:7px;font-size:14px;transition:box-shadow .3s}.agent-rule-panel p{font-size:13px;color:#667085;line-height:1.5;margin:0}
.agent-rule-value.agent-focus{outline:2px solid #2f73ff;outline-offset:2px;box-shadow:0 0 0 7px #2f73ff18}
.agent-event-note{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:12px 22px;border:1px solid #e0e6f0;border-radius:9px;background:#fff;color:#344054;font-size:14px;box-shadow:0 3px 14px #10182809;z-index:15;white-space:nowrap}
#f-agents .wfb .wfn.agent-unused{opacity:.32;transition:opacity .5s}

/* Execution pairs the internal workflow with its visible guest outcome. */
#f-agents .agent-show-effects .wfb .wfgr{scale:.85}
.agent-guest-phone{position:absolute;right:120px;top:72px;width:310px;height:635px;border:7px solid #19202d;border-radius:38px;background:#f7f8fc;z-index:25;overflow:hidden;box-shadow:0 14px 35px #10182818;animation:agent-saved-in .4s ease-out}
.agent-guest-phone[hidden]{display:none}.agent-phone-status{height:40px;padding:13px 20px 0;display:flex;justify-content:space-between;font-size:11px;background:white}.agent-phone-status span{font-size:9px}
.agent-guest-phone header{display:flex;align-items:center;gap:10px;padding:14px;background:white;border-bottom:1px solid #e6e9f0}.agent-phone-avatar{display:grid;place-items:center;width:34px;height:34px;background:#5066ff;border-radius:50%;color:white;font-weight:600}.agent-guest-phone header b{font-size:14px}.agent-guest-phone header small{display:block;font-size:11px;color:#667085;margin-top:4px}
.agent-phone-chat{padding:16px 13px}.agent-chat-date{display:block;text-align:center;color:#8b93a2;font-size:10px;margin-bottom:16px}.agent-bubble{padding:11px 12px;font-size:13px;line-height:1.45;border-radius:13px;max-width:235px;margin-bottom:13px}.agent-bubble.guest{background:#e6ebff;margin-left:auto;border-bottom-right-radius:4px}.agent-bubble.reply{background:white;border:1px solid #e6e9f0;border-bottom-left-radius:4px}.agent-bubble small{display:block;text-align:right;font-size:9px;color:#8590a2;margin-top:5px}
.agent-task-receipt{border:1px solid #e1e6ef;background:#fff;border-radius:10px;padding:11px 12px;margin:10px 0;font-size:12px}.agent-task-receipt small{display:block;font-size:9px;letter-spacing:.8px;color:#667085;margin-bottom:6px}.agent-task-receipt b{display:block;margin-bottom:6px}.agent-task-receipt span{color:#b54708;font-size:11px}.agent-team-receipt{font-size:11px;color:#667085;margin:10px 0 14px}
.agent-guest-phone [data-effect]{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}.agent-guest-phone [data-effect].visible{opacity:1;transform:none}.agent-guest-phone footer{position:absolute;bottom:22px;left:12px;right:12px;padding:10px 12px;background:white;border:1px solid #e6e9f0;border-radius:18px;color:#98a2b3;font-size:12px}.agent-guest-phone footer span{float:right;color:#5066ff}.agent-home-bar{position:absolute;bottom:7px;left:100px;width:100px;height:4px;border-radius:5px;background:#19202d}

/* Shared guest-phone footprint and status icons, matching Cleaning/Properties. */
.agent-guest-phone{width:289px;height:563px;border:0;border-radius:28px;box-shadow:0 0 0 6.8px #171b25,0 14px 35px #10182818}
.agent-phone-status{height:34px;padding:12px 14px 0;font-size:12.7px;font-weight:600;line-height:1;color:#172033}
.agent-phone-status .gph-status-icons{display:flex;align-items:center;gap:5px}
.agent-phone-status svg{width:15.3px;height:13.6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agent-phone-status svg.gph-battery{width:23px}
.agent-home-bar{left:50%;transform:translateX(-50%);width:80px;height:4px;bottom:7px}
.agent-guest-phone header{padding:10px 14px}
.agent-phone-chat{padding:12px 13px}.agent-chat-date{margin-bottom:10px}
.agent-bubble{margin-bottom:9px;padding:9px 11px;font-size:12px}
.agent-task-receipt{margin:8px 0;padding:8px 11px}.agent-team-receipt{margin:8px 0 10px}

/* Match the reference status row's inset, baseline and effective type size. */
.agent-phone-status{height:44px;padding:0 22px;align-items:center;font-size:12.735px;background:#fff}
.agent-phone-status b{font-weight:600;line-height:1}
.agent-phone-status .gph-status-icons{gap:5.094px;line-height:0}
.agent-phone-status svg{display:block;width:15.282px;height:13.584px;flex:none}
.agent-phone-status svg.gph-battery{width:22.923px}
.agent-guest-phone header b{font-size:14px;line-height:1.3}
.agent-guest-phone header small{font-size:11px;line-height:1.3}
.agent-bubble{font-size:13.25px;line-height:1.45}
.agent-bubble small,.agent-chat-date{font-size:10px}
.agent-phone-chat{max-height:405px;overflow-y:auto;scrollbar-width:none;padding-bottom:12px}
.agent-home-bar{width:71.316px;height:3.396px;bottom:6.792px}

.agent-phone-task,.agent-phone-call{position:absolute;inset:44px 0 18px;padding:20px;background:#fff;z-index:3;animation:agent-saved-in .3s ease-out}
.agent-phone-task[hidden],.agent-phone-call[hidden]{display:none}
.agent-guest-phone[data-screen="task"]>header,.agent-guest-phone[data-screen="call"]>header,.agent-guest-phone[data-screen="task"]>.agent-phone-chat,.agent-guest-phone[data-screen="call"]>.agent-phone-chat,.agent-guest-phone[data-screen="task"]>footer,.agent-guest-phone[data-screen="call"]>footer{visibility:hidden}
.phone-app-label{font-size:13px;font-weight:600;padding-bottom:16px;border-bottom:1px solid #edf0f5;margin-bottom:20px}.phone-created{color:#187957;background:#edf8f2;padding:6px 9px;border-radius:6px;font-size:11px}.agent-phone-task h2{font-size:23px;margin:20px 0 7px}.phone-location{font-size:12px;color:#667085;line-height:1.5}.phone-urgent{display:inline-block;background:#fff1e9;color:#b54708;padding:5px 9px;border-radius:6px;font-size:11px}.phone-detail{border-top:1px solid #edf0f5;margin-top:18px;padding-top:14px}.phone-detail small{display:block;color:#667085;font-size:11px;margin-bottom:8px}.phone-detail p{font-size:13px;line-height:1.5;margin:0}.phone-detail b{display:flex;align-items:center;gap:8px;font-size:13px}.phone-detail i{font-style:normal;background:#eef0ff;color:#5066ff;padding:7px;border-radius:50%;font-size:11px}.phone-detail>span{display:block;color:#667085;font-size:11px;margin:6px 0 0 36px}
.agent-phone-call{background:#f5f7fc;text-align:center;padding-top:24px}.agent-phone-call>small{font-size:10px;letter-spacing:1px;color:#667085}.phone-call-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#e5eaff;color:#5066ff;font-size:27px;margin:34px auto 18px}.agent-phone-call h2{font-size:23px;margin:0 0 8px}.agent-phone-call p{font-size:12px;color:#667085}.phone-call-state{display:block;font-size:13px;color:#5066ff;margin:22px 0}.phone-call-context{font-size:11px;color:#667085}.phone-hangup{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e34254;color:white;margin:30px auto 0}.phone-hangup svg{width:23px;height:23px}.phone-call-waves{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;margin-top:20px}.phone-call-waves i{width:4px;height:6px;border-radius:4px;background:#5066ff}.connected .phone-call-waves i{animation:phone-wave .65s ease-in-out infinite alternate}.phone-call-waves i:nth-child(2n){animation-delay:.2s}.phone-call-waves i:nth-child(3){animation-delay:.4s}@keyframes phone-wave{to{height:24px}}
