/* Product-reference feedback, scoped to this preview page. */
/* Keep the input highlighted through typing and submission, then release it. */
#heroWorkbench .hero-prompt-input{transition:border-color .2s,box-shadow .2s}
#heroWorkbench .hero-prompt-input:is(.is-typing,.is-request-active){border-color:#176ff5;box-shadow:inset 0 0 0 1px #176ff5,0 0 0 3px #287bff1a,0 12px 28px -17px #1f62b866}
#heroPromptText{min-height:1.6em}
#heroPromptText::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.12em;background:#267bff;opacity:0}
.is-typing #heroPromptText::after{opacity:1;animation:feedback-caret .75s step-end infinite}
.is-typing-paused #heroPromptText::after{animation-play-state:paused}
@keyframes feedback-caret{0%,55%{opacity:1}56%,100%{opacity:0}}
#heroWorkbench #heroTaskChoices button.active,
#heroWorkbench #heroTaskChoices button.active:hover{background:#101d33;border-color:#101d33;color:#fff;box-shadow:none}
.flow-player .flow-native button[data-native-tap]{filter:brightness(.9)}
.flow-native .flow-tap-target{isolation:isolate}
.flow-tap-ripple{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #fff9;border-radius:50%;background:#ffffff42;box-shadow:0 0 0 5px #1856a91c;pointer-events:none;z-index:2}
.flow-native button:active{filter:brightness(.9)}
/* Three dots travel in a wave while the request is being processed. */
.hero-guide-dots{gap:5px;padding-inline:2px}
.hero-guide-dots i,.flow-thinking-dots i{width:5px;height:5px;animation:feedback-dot-wave .9s ease-in-out infinite}
.hero-guide-dots i{background:#4488e5}
.hero-guide-dots i:nth-child(2),.flow-thinking-dots i:nth-child(2){animation-delay:.12s}
.hero-guide-dots i:nth-child(3),.flow-thinking-dots i:nth-child(3){animation-delay:.24s}
.flow-player.is-paused .flow-thinking-dots i{animation-play-state:paused}
@keyframes feedback-dot-wave{0%,60%,100%{transform:translateY(1px);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
/* The same card fills from left to right when the task has a confirmed result. */
#heroGuideStatus{--guide-fill:0;--guide-strike:0;isolation:isolate;min-height:132px;padding:20px 28px;border:1.5px dashed #c7d8ee;border-radius:20px;background:#ffffff38;transition:border-color .3s,box-shadow .4s,opacity .3s}
#heroGuideStatus::before{content:'';position:absolute;inset:0;z-index:0;background:#1668dc;transform:scaleX(var(--guide-fill));transform-origin:left center;pointer-events:none}
#heroGuideStatus>*{position:relative;z-index:1}
#heroGuideTask{padding:0;margin:0 0 8px;background:none;border-radius:0;font-size:15px;line-height:22px;color:#31557e}
#heroGuideStatus .hero-guide-working-line{min-height:30px}
#heroGuideStatus[data-state=done]{border-color:transparent;border-style:solid;background:#ffffff38;box-shadow:0 20px 36px -22px #1668dc99}
#heroGuideStatus[data-state=done] #heroGuideTask{position:absolute;left:28px;top:20px;max-width:50%;margin:0;color:#fff;opacity:.8}
#heroGuideStatus .hero-guide-benefit{grid-template-columns:minmax(0,1fr) 54px minmax(172px,max-content);grid-template-rows:22px 66px;align-items:center;justify-items:start;column-gap:20px;row-gap:0;height:88px;padding:0;text-align:left}
#heroGuideStatus .hero-guide-benefit>div{display:flex;min-width:0}
#heroGuideStatus .hero-guide-benefit>div:first-child{grid-column:1;grid-row:2;align-items:baseline;gap:8px}
#heroGuideStatus .hero-guide-benefit>div:last-child{grid-column:3;grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:0}
#heroGuideStatus .hero-guide-benefit small{font-size:14px;line-height:20px;color:#fff;opacity:.75;flex:none}
#heroGuideStatus .hero-guide-benefit s{position:relative;display:inline-block;font-size:22px;line-height:30px;font-weight:500;letter-spacing:0;color:#fff;opacity:.6;text-decoration:none;text-wrap:balance;overflow-wrap:anywhere}
#heroGuideOld::after{content:'';position:absolute;left:-2px;right:-2px;top:54%;height:2px;background:currentColor;transform:scaleX(var(--guide-strike));transform-origin:left center;pointer-events:none}
#heroGuideStatus .hero-guide-benefit .ri{grid-column:2;grid-row:2;width:40px;height:40px;padding:0;border-radius:0;background:none;color:#fff;opacity:.85}
.hero-guide-arrow{position:relative;left:-4px;display:block}
#heroGuideStatus .hero-guide-benefit strong{font-size:54px;line-height:66px;font-weight:700;letter-spacing:-1px;color:#fff;white-space:nowrap}
#heroGuideNow .hero-guide-unit{position:relative;top:-4px;font-size:.5em;line-height:1;font-weight:600;letter-spacing:0}
#heroGuideNow .hero-guide-phrase{position:relative;top:-4px;font-size:.5em;letter-spacing:0}
@media(max-width:650px){
 #heroGuideStatus{padding:16px;min-height:136px;border-radius:18px}
 #heroGuideStatus[data-state=done] #heroGuideTask{left:16px;top:16px;font-size:14px}
 #heroGuideStatus .hero-guide-benefit{grid-template-columns:minmax(0,1fr) 32px minmax(112px,max-content);grid-template-rows:26px 64px;column-gap:10px;height:96px}
 #heroGuideStatus .hero-guide-benefit>div:first-child{gap:6px}
 #heroGuideStatus .hero-guide-benefit small{font-size:12px;line-height:18px}
 #heroGuideStatus .hero-guide-benefit s{font-size:15px;line-height:23px}
 #heroGuideStatus .hero-guide-benefit .ri{width:32px;height:28px}
 #heroGuideStatus .hero-guide-benefit strong{font-size:36px;line-height:48px;letter-spacing:-.5px}
}
@media(max-width:380px){
 #heroGuideStatus .hero-guide-benefit{column-gap:8px}
 #heroGuideStatus .hero-guide-benefit>div:first-child{flex-direction:column;align-items:flex-start;gap:0}
 #heroGuideStatus .hero-guide-benefit s{font-size:13px}
 #heroGuideStatus .hero-guide-benefit strong{font-size:32px}
 #heroGuideStatus .hero-guide-benefit{grid-template-columns:minmax(0,1fr) 32px minmax(100px,max-content)}
}
@media(prefers-reduced-motion:reduce){
 .hero-guide-dots i,.flow-thinking-dots i{animation:none;transform:none;opacity:1}
 #heroGuideStatus{transition:none}
 #heroWorkbench .hero-prompt-input{transition:none}
 .is-typing #heroPromptText::after{animation:none;opacity:0}
}