/* Hero side windows, Attio-style: both sit BEHIND the main window and only peek out at the sides, so they add
   context without taking attention. They are hidden until the main window has zoomed in; hero-side.js then
   slides them out from under it into their resting positions. */
#heroStageInner { transform-origin: 50% 0; }
#heroWinMain { position: relative; z-index: 2; }
.win--slack, .win--term { top: auto; opacity: 0; will-change: transform, opacity; }
/* chat: tucked behind the main window, peeking out on the left (24 px from the viewport edge at least, at most ~60 % of its width);
   hovering lifts it to the front */
.win--slack { z-index: 1; left: max(-236px, calc(24px - (100vw - min(1120px, 100vw - 64px)) / 2)); top: 56px; width: 380px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s; }
.win--slack.is-front { z-index: 3; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 60px rgba(255, 255, 255, 0.08), 0 36px 90px rgba(0, 0, 0, 0.7); }
/* agents: in front, slid out at the bottom-right corner so it covers only the edge of the main window */
.win--term { z-index: 3; right: max(-230px, calc(24px - (100vw - min(1120px, 100vw - 64px)) / 2)); bottom: -118px; width: 372px; }
/* below 1280 px there is no room beside the main window: no side windows at all */
@media (max-width: 1279px) {
  .win--slack, .win--term { display: none !important; }
}
/* a touch larger type than the old windows, they used to be hard to read */
.win--slack .win__title, .win--term .win__title { font-size: 13px; }
.slack { font-size: 13.5px; padding: 16px 18px 18px; }
.slack__name { font-size: 13px; }
.slack__avatar { width: 30px; height: 30px; }
.term { font-size: 12.5px; padding: 18px 20px 14px; }
.chat__foot { display: flex; align-items: center; gap: 6px; padding: 9px 18px 12px; border-top: 1px solid var(--l-border); font-size: 12px; color: #8a8a8a; }
.chat__foot img { width: 14px; height: 14px; border-radius: 3px; }
.agents__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 11px 16px; background: #161616; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 500; color: #b5b5b5; }
.agents__head b { color: #f2f2f2; font-weight: 600; margin-right: 4px; }
.agents__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #262626; color: #ededed; font-size: 11.5px; font-weight: 560; letter-spacing: 0.01em; }
.agents__chip img { width: 12px; height: 12px; }
.agents__chip--more { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.22); color: #9a9a9a; }