/* A reduced version of the recorded PAI interface. Only the approval bundle moves. */
.bundle-stage { overflow: hidden; border: 1px solid #d5deec; border-radius: 20px; background: #e5ebf4; box-shadow: 0 25px 65px -36px #23375d66; }
.bundle-toolbar { display: flex; align-items: center; gap: 30px; padding: 14px 19px; height: 62px; }
.bundle-profile { display: grid; place-items: center; width: 35px; height: 35px; background: #d8e8ff; color: #2164f5; border: 2px solid white; border-radius: 50%; font-size: 13px; font-weight: 750; box-shadow: 0 2px 4px #2f416415; }
.bundle-tools { display: flex; align-items: center; gap: 19px; color: #9baabd; }
.bundle-tools svg { width: 18px; height: 18px; }
.bundle-tools svg:first-child { color: #586983; }
.bundle-pai-pill { display: inline-flex; align-items: center; gap: 9px; color: #edeeff; background: #1a1c40; border: 1px solid #33325b; border-radius: 30px; padding: 6px 18px; font-size: 13px; font-weight: 600; margin-left: auto; box-shadow: 0 2px 5px #14172d17; }
.bundle-pai-pill svg { color: #8a7af3; width: 17px; height: 17px; }
.bundle-layout { display: grid; grid-template-columns: minmax(145px,.6fr) minmax(310px,1.2fr) minmax(285px,1.05fr); gap: 14px; padding: 0 16px 17px; }
.bundle-inbox { border-radius: 13px; background: #fff; padding-top: 23px; overflow: hidden; }
.bundle-inbox-title { font-size: 18px; font-weight: 680; letter-spacing: -.04em; padding-inline: 17px; display: flex; align-items: center; gap: 7px; }
.bundle-inbox-title > span { background: #ecf2ff; color: #2b61dd; font-size: 10px; line-height: 1; padding: 5px 7px; border-radius: 50%; }
.bundle-filters { display: flex; gap: 17px; align-items: center; font-size: 10px; color: #8f9cb2; background: #f2f5fa; border-radius: 7px; padding: 3px; margin: 18px 15px; }
.bundle-filters b { background: white; padding: 4px 14px; border-radius: 5px; box-shadow: 0 2px 4px #25395813; color: #41516b; font-weight: 600; }
.bundle-priority { display: block; padding: 5px 17px; color: #9aa7bc; background: #fafbfe; font-size: 9px; font-weight: 600; letter-spacing: .045em; }
.bundle-mail-row { padding: 17px; position: relative; border-bottom: 1px solid #eef2f8; }
.bundle-mail-row > strong { display: block; font-size: 12px; font-weight: 600; }
.bundle-mail-row > span { display: block; font-size: 10px; color: #8294af; line-height: 1.5; margin-top: 4px; }
.bundle-selected { background: #f2f6ff; border-left: 3px solid #3276ff; padding-left: 14px; transition: background .3s; }
.bundle-selected i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #347bff; right: 14px; top: 24px; }
.bundle-muted-row { opacity: .65; }
.bundle-inbox-lines { padding: 34px 17px 0; display: grid; gap: 13px; }
.bundle-inbox-lines i { display: block; height: 5px; width: 80%; background: #f0f3f8; border-radius: 5px; }
.bundle-inbox-lines i:nth-child(2) { width: 55%; }
.bundle-center { min-width: 0; padding: 22px; border-radius: 13px; background: white; }
.bundle-incoming { position: relative; transition: transform .4s, opacity .4s; }
.bundle-sender { display: flex; align-items: center; gap: 10px; }
.bundle-sender > span { flex: none; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #00845e; background: #d6f8e8; font-size: 12px; font-weight: 650; }
.bundle-sender strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.3; }
.bundle-sender small { display: block; font-size: 10px; color: #8b9bb4; margin-top: 3px; line-height: 1.4; }
.bundle-sender > svg { width: 18px; height: 18px; margin-left: auto; color: #c2cddd; }
.bundle-incoming > p { color: #24314b; font-size: 23px; font-weight: 500; line-height: 1.38; letter-spacing: -.035em; margin-top: 17px; }
.bundle-attachments { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 15px; }
.bundle-attachments > span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e7ecf4; padding: 4px 7px; font-size: 9px; color: #8696b0; border-radius: 5px; }
.bundle-attachments svg { width: 13px; height: 13px; }
.bundle-decision-stage { display: grid; margin-top: 23px; min-height: 220px; }
.bundle-analysis, .bundle-execution { grid-area: 1/1; min-width: 0; }
.bundle-analysis { position: relative; align-self: stretch; padding: 16px; border: 1px solid #dee5f2; border-radius: 13px; box-shadow: 0 3px 7px #23345512; overflow: hidden; transition: opacity .25s, transform .3s; }
.bundle-analysis::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#2781ff,#795aff 65%,#00b991); }
.bundle-analysis-label { display: flex; align-items: center; gap: 7px; color: #8059f5; font-size: 9px; letter-spacing: .085em; font-weight: 700; }
.bundle-analysis-label > svg { width: 20px; height: 20px; padding: 3px; background: #f0eaff; border-radius: 50%; box-sizing: content-box; }
.bundle-thinking { display: inline-flex; gap: 3px; margin-left: auto; opacity: 0; }
.bundle-thinking i { width: 4px; height: 4px; border-radius: 50%; background: #9273ee; animation: bundle-think .65s ease-in-out infinite; }
.bundle-thinking i:nth-child(2) { animation-delay: .12s; }
.bundle-thinking i:nth-child(3) { animation-delay: .24s; }
.bundle-analysis > p { margin: 10px 0 12px; font-size: 13px; color: #60718e; }
.bundle-route { position: relative; display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 10px; border: 1px solid #e0e7f3; border-radius: 9px; transition: opacity .25s, border-color .25s, background .25s, box-shadow .25s, transform .25s; }
.bundle-route-main { margin-bottom: 8px; }
.bundle-route-icon { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 7px; color: #2c6dff; background: #edf3ff; }
.bundle-route-icon svg { width: 17px; height: 17px; }
.bundle-route strong { display: block; font-size: 13px; line-height: 1.35; font-weight: 650; letter-spacing: -.015em; }
.bundle-route small { display: block; font-size: 8px; line-height: 1.5; color: #8a9cb8; margin-top: 3px; }
.bundle-route-other strong { font-weight: 550; font-size: 12px; color: #7c8ca8; }
.bundle-route-other .bundle-route-icon { color: #8b9cba; background: #f3f6fb; }
.bundle-route-arrow { margin-left: auto; font-size: 21px; color: #a5b5d1; line-height: 1; }
.bundle-cursor { position: absolute; width: 21px; height: 26px; opacity: 0; filter: drop-shadow(0 2px 2px #09174430); z-index: 3; }
.bundle-choice-cursor { right: 19%; top: 24px; }
.bundle-route-ripple, .bundle-approve-ripple { position: absolute; width: 28px; height: 28px; border: 2px solid #8db5ff; border-radius: 50%; opacity: 0; pointer-events: none; }
.bundle-route-ripple { right: calc(19% - 5px); top: 15px; }
.bundle-actions { display: flex; min-width: 0; flex-direction: column; padding: 22px 18px 18px; background: #f6f8fc; border-radius: 13px; }
.bundle-actions-title { display: flex; align-items: center; gap: 9px; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; margin-bottom: 18px; }
.bundle-actions-title > span { font-size: 11px; color: #7391c5; background: #e9f0ff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.bundle-steps { display: grid; gap: 10px; }
.bundle-step { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 15px 12px; min-height: 73px; border: 1px solid #dee6f3; background: white; border-radius: 10px; transition: border-color .25s, box-shadow .25s, background .25s, opacity .25s, transform .25s; }
.bundle-step > div { min-width: 0; }
.bundle-step-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: #edf3ff; color: #3275fa; border-radius: 7px; }
.bundle-step-icon svg { width: 17px; height: 17px; }
.bundle-step strong { display: block; font-size: 12px; line-height: 1.35; font-weight: 650; }
.bundle-step small { display: block; margin-top: 4px; color: #8d9eb8; font-size: 9px; line-height: 1.5; }
.bundle-step-check { display: grid; flex: none; place-items: center; width: 17px; height: 17px; margin-left: auto; color: #b4c6e4; border: 1px solid #dce5f4; border-radius: 50%; transition: background .2s, border-color .2s, transform .2s; }
.bundle-step-check svg { width: 12px; height: 12px; opacity: 0; }
.bundle-approve { display: flex; align-items: center; justify-content: center; position: relative; gap: 8px; margin-top: auto; min-height: 46px; border-radius: 8px; background: linear-gradient(180deg,#2a7bff,#1555fa); box-shadow: 0 3px 6px #1655fa20; color: #fff; font-size: 13px; font-weight: 600; padding: 11px; transition: opacity .25s, background .25s; }
.bundle-approve-icon { width: 16px; height: 16px; }
.bundle-approve-cursor { top: 22px; right: 20%; }
.bundle-approve-ripple { top: 13px; right: calc(20% - 5px); }
.bundle-execution { align-self: stretch; background: #101828; color: white; border-radius: 12px; padding: 20px 19px; position: relative; overflow: hidden; box-shadow: 0 4px 14px #10182923; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .35s; }
.bundle-execution-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #263146; }
.bundle-execution-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#256cfc,#6c8dff); transform-origin: left; transition: transform .4s ease; }
.bundle-execution-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; border-bottom: 1px solid #293144; }
.bundle-execution-heading strong { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; }
.bundle-execution-heading small { color: #8290aa; font-size: 9px; display: block; margin-top: 3px; }
.bundle-orb { position: relative; display: grid; place-items: center; flex: none; width: 29px; height: 29px; color: #a0bdff; background: radial-gradient(circle at 30% 20%,#3c91ff,#345fe6 55%,#302b79); border: 1px solid #4a76e8; border-radius: 50%; box-shadow: inset 0 0 7px #8bc4ff55; }
.bundle-orb::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #79a4ff28; border-top-color: #80aaff; animation: bundle-orbit 1s linear infinite; }
.bundle-orb svg { width: 15px; height: 15px; animation: bundle-breathe 1.2s ease-in-out infinite; }
.bundle-finished-mark { margin-left: auto; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; color: #44cfa7; }
.bundle-finished-mark svg { width: 21px; height: 21px; }
.bundle-execution-steps { display: grid; gap: 11px; padding-top: 16px; }
.bundle-execution-steps > div { display: flex; align-items: center; gap: 9px; color: #68758c; font-size: 11px; line-height: 1.4; transition: color .2s; }
.bundle-run-check { display: grid; place-items: center; width: 13px; height: 13px; flex: none; border: 1px solid #354767; border-radius: 50%; }
.bundle-run-check svg { width: 10px; height: 10px; opacity: 0; }
.bundle-step[data-status="running"] { border-color: #8ab5ff; background: #f6f9ff; box-shadow: 0 0 0 2px #3781ff08; }
.bundle-step[data-status="running"] .bundle-step-check { border: 2px solid #d5e3ff; border-top-color: #286df4; animation: bundle-orbit .6s linear infinite; }
.bundle-execution-steps > [data-status="running"] { color: #ebf0fa; }
[data-status="running"] .bundle-run-check { border: 1px solid #283b61; border-top-color: #8dafee; animation: bundle-orbit .6s linear infinite; }
.bundle-step[data-status="done"] .bundle-step-check { background: #e2f8ef; color: #00a577; border-color: #c9efe2; }
.bundle-step[data-status="done"] .bundle-step-check svg { opacity: 1; }
.bundle-execution-steps > [data-status="done"] { color: #d3dbe9; }
[data-status="done"] .bundle-run-check { color: #38cc9e; border-color: #20634f; background: #15372f; }
[data-status="done"] .bundle-run-check svg { opacity: 1; }
/* View changes are driven by a pausable clock, never by simulated DOM clicks. */
.bundle-film[data-view="inbox"] .bundle-analysis { opacity: 0; transform: translateY(10px); }
.bundle-film:is([data-view="inbox"],[data-view="thinking"],[data-view="choose"]) .bundle-step { opacity: .15; transform: translateY(5px); }
.bundle-film:is([data-view="inbox"],[data-view="thinking"],[data-view="choose"]) .bundle-approve { opacity: .15; }
.bundle-film[data-view="thinking"] .bundle-thinking { opacity: 1; }
.bundle-film[data-view="thinking"] .bundle-route { opacity: .35; }
.bundle-film[data-view="choose"] .bundle-choice-cursor { animation: bundle-click 1.2s ease both; }
.bundle-film[data-view="choose"] .bundle-route-ripple { animation: bundle-ripple 1.2s ease both; }
.bundle-film:is([data-view="ready"],[data-view="approve"]) .bundle-route-main { border-color: #3982ff; box-shadow: 0 0 0 2px #3982ff14,0 2px 6px #2466d216; }
.bundle-film:is([data-view="ready"],[data-view="approve"]) .bundle-route-main .bundle-route-icon { color: white; background: #2473ff; }
.bundle-film:is([data-view="ready"],[data-view="approve"]) .bundle-route-main .bundle-route-arrow { color: #3279fa; }
.bundle-film[data-view="ready"] .bundle-step:nth-child(2) { transition-delay: .06s; }
.bundle-film[data-view="ready"] .bundle-step:nth-child(3) { transition-delay: .12s; }
.bundle-film[data-view="ready"] .bundle-step:nth-child(4) { transition-delay: .18s; }
.bundle-film[data-view="approve"] .bundle-approve-cursor { animation: bundle-click .7s ease both; }
.bundle-film[data-view="approve"] .bundle-approve-ripple { animation: bundle-ripple .7s ease both; }
.bundle-film:is([data-view="running"],[data-view="done"]) .bundle-analysis { opacity: 0; transform: translateY(-7px) scale(.98); }
.bundle-film:is([data-view="running"],[data-view="done"]) .bundle-execution { opacity: 1; transform: none; }
.bundle-film[data-view="running"] .bundle-approve { background: #182139; box-shadow: none; color: #a8b9d5; }
.bundle-film[data-view="running"] .bundle-approve-icon { opacity: 0; }
.bundle-film[data-view="done"] .bundle-approve { background: #101828; box-shadow: none; }
.bundle-film[data-view="done"] .bundle-finished-mark { opacity: 1; transform: scale(1); }
.bundle-film[data-view="done"] .bundle-orb::before, .bundle-film[data-view="done"] .bundle-orb svg { animation: none; }
.bundle-film[data-view="done"] .bundle-selected { background: #edfaf5; border-left-color: #25b38d; }
.bundle-film[data-view="done"] .bundle-selected i { background: #25b38d; }
.bundle-film[data-view="reset"] .bundle-center, .bundle-film[data-view="reset"] .bundle-steps { opacity: 0; }
.bundle-center, .bundle-steps { transition: opacity .25s; }
@keyframes bundle-click { 0% { opacity: 0; transform: translate(24px,18px); } 30%,55% { opacity: 1; transform: none; } 65% { opacity: 1; transform: scale(.8); } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes bundle-ripple { 0%,60% { opacity: 0; transform: scale(.3); } 68% { opacity: .8; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes bundle-orbit { to { transform: rotate(360deg); } }
@keyframes bundle-breathe { 50% { opacity: .5; transform: scale(.85); } }
@keyframes bundle-think { 50% { opacity: .35; transform: translateY(-3px); } }
@media (max-width: 1080px) {
  .bundle-layout { grid-template-columns: 150px minmax(270px,1.12fr) minmax(260px,1fr); gap: 10px; padding: 0 12px 13px; }
  .bundle-center { padding: 20px 16px; }
  .bundle-actions { padding: 20px 13px 15px; }
  .bundle-incoming > p { font-size: 22px; }
  .bundle-route { gap: 8px; padding: 9px 8px; }
  .bundle-route small { font-size: 7px; }
  .bundle-step { gap: 8px; padding: 14px 10px; }
  .bundle-step strong { font-size: 11px; }
  .bundle-step small { font-size: 8px; }
}
@media (max-width: 900px) {
  .bundle-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  .bundle-inbox { display: none; }
  .bundle-center { padding: 22px 20px; }
  .bundle-step { min-height: 76px; }
  .bundle-step strong { font-size: 12px; }
}
@media (max-width: 680px) {
  .bundle-stage { border-radius: 14px; }
  .bundle-toolbar { height: 49px; padding: 10px 13px; gap: 17px; }
  .bundle-profile { width: 29px; height: 29px; font-size: 10px; }
  .bundle-tools { gap: 13px; }
  .bundle-tools svg { width: 15px; height: 15px; }
  .bundle-pai-pill { font-size: 11px; padding: 4px 13px; gap: 7px; }
  .bundle-pai-pill svg { width: 14px; height: 14px; }
  /* Both mobile views share one auto-sized row: no scrolling or height jump
     when the chosen action opens its sheet above the message. */
  .bundle-layout { position: relative; isolation: isolate; grid-template-columns: minmax(0,1fr); padding: 0 9px 9px; gap: 0; }
  .bundle-center, .bundle-actions { grid-area: 1 / 1; }
  .bundle-center { display: flex; flex-direction: column; padding: 15px; border-radius: 10px; }
  .bundle-layout::after { content: ''; grid-area: 1 / 1; z-index: 1; background: #18203924; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .bundle-sender { gap: 8px; }
  .bundle-sender > span { width: 29px; height: 29px; font-size: 10px; }
  .bundle-sender strong { font-size: 12px; }
  .bundle-sender small { font-size: 9px; }
  .bundle-incoming > p { font-size: 19px; line-height: 1.4; margin-top: 11px; }
  .bundle-incoming > p br { display: none; }
  .bundle-attachments { margin-top: 9px; gap: 6px; }
  .bundle-attachments > span { font-size: 8px; padding: 3px 6px; }
  .bundle-attachments svg { width: 11px; height: 11px; }
  .bundle-decision-stage { margin-top: 15px; min-height: 245px; flex: 1; }
  .bundle-analysis { padding: 11px; border-radius: 9px; }
  .bundle-analysis-label { font-size: 8px; }
  .bundle-analysis-label > svg { width: 15px; height: 15px; }
  .bundle-analysis > p { display: none; }
  .bundle-route-main { margin-top: 10px; margin-bottom: 7px; }
  .bundle-route { min-height: 42px; padding: 8px 9px; gap: 9px; }
  .bundle-route-icon { width: 24px; height: 24px; }
  .bundle-route-icon svg { width: 15px; height: 15px; }
  .bundle-route strong { font-size: 12px; }
  .bundle-route small { font-size: 7px; margin-top: 2px; }
  .bundle-route-other strong { font-size: 11px; }
  .bundle-choice-cursor { top: 17px; }
  .bundle-route-ripple { top: 8px; }
  .bundle-execution { padding: 14px; border-radius: 9px; }
  .bundle-execution-heading { padding-bottom: 9px; gap: 8px; }
  .bundle-execution-heading strong { font-size: 14px; }
  .bundle-execution-heading small { font-size: 11px; margin-top: 3px; }
  .bundle-orb { width: 23px; height: 23px; }
  .bundle-orb svg { width: 13px; height: 13px; }
  .bundle-execution-steps { gap: 12px; padding-top: 16px; }
  .bundle-execution-steps > div { font-size: 13px; }
  .bundle-run-check { width: 15px; height: 15px; }
  .bundle-run-check svg { width: 10px; height: 10px; }
  .bundle-actions { position: relative; z-index: 2; align-self: end; margin: 52px 7px 7px; padding: 12px 14px 14px; border: 1px solid #d2ddee; border-radius: 18px 18px 12px 12px; box-shadow: 0 -8px 32px #17243b22, 0 5px 15px #17243b18; opacity: 0; visibility: hidden; transform: translateY(28px); pointer-events: none; transition: opacity .18s ease, transform .3s ease, visibility 0s .3s; }
  .bundle-actions::before { content: ''; display: block; flex: none; width: 32px; height: 3px; margin: 0 auto 14px; background: #c4cfdf; border-radius: 3px; }
  .bundle-actions-title { font-size: 16px; margin-bottom: 14px; }
  .bundle-actions-title > span { font-size: 11px; width: 21px; height: 21px; }
  .bundle-steps { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .bundle-step { position: relative; display: flex; min-height: 60px; padding: 10px; border-radius: 8px; gap: 9px; }
  .bundle-step-icon { width: 24px; height: 24px; border-radius: 6px; margin-bottom: 0; }
  .bundle-step-icon svg { width: 15px; height: 15px; }
  .bundle-step strong { font-size: 13px; line-height: 1.35; font-weight: 600; }
  .bundle-step small { display: none; }
  .bundle-step-check { position: static; width: 14px; height: 14px; margin-left: auto; }
  .bundle-step-check svg { width: 10px; height: 10px; }
  .bundle-approve { margin-top: 14px; min-height: 44px; font-size: 13px; }
  .bundle-film:is([data-view="ready"],[data-view="approve"]) .bundle-actions { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .bundle-film:is([data-view="ready"],[data-view="approve"]) .bundle-layout::after { opacity: 1; }
  /* The sheet clears immediately on execution so the first running step is
     visible in full, including on reduced-motion and no-JavaScript views. */
  .bundle-film:is([data-view="running"],[data-view="done"]) .bundle-actions { visibility: hidden; transition: none; }
  .bundle-film .workday-caption > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bundle-film *, .bundle-film *::before, .bundle-film *::after { animation: none !important; transition: none !important; }
  .bundle-cursor, .bundle-approve-ripple, .bundle-route-ripple { display: none; }
}