/* =================================================================
   mode-switch.css — Code or Video, one agent, one chat box
   -----------------------------------------------------------------
   "make it claude style u switch to code or video" (the owner,
   2026-10-31), then "make it at sidebar": the switch is the rail's
   first control on both pages. /agent and /video are two pages, but the
   rail is the same rail, the words in the box come along, and the
   browser morphs one box into the other, so it reads as one app
   changing mode rather than a link to somewhere else.
   ================================================================= */
@view-transition{navigation:auto}

/* Its own size decides the labels, not the rail's class: while the rail grows under the pointer the class says open
   but the width is still 44px, and "Code" and "Video" were squeezed into one another for the length of the slide. */
/* Smaller, the way Claude's own toggle sits (the owner, 2026-10-31): 28px tall where it was 38, so it reads as a setting
   of the rail rather than its loudest control. */
.sq-mode{display:flex;gap:2px;margin:0 12px 10px;padding:2px;border-radius:9px;box-sizing:border-box;container-type:inline-size;overflow:hidden;flex-wrap:wrap;
  /* never shrinks: the rail is a flex column, and overflow:hidden let it squash this to 8px tall */
  flex:none;
  background:var(--paper-2);border:1px solid var(--line);view-transition-name:sq-mode}
/* 30px to grow from, so a switch too narrow for two icons side by side stacks them, as the collapsed rail does */
.sq-mode a{display:flex;align-items:center;justify-content:center;gap:5px;flex:1 1 30px;min-width:0;height:24px;border-radius:7px;
  color:var(--ink-2);font-size:.76rem;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-snappy,.12s) ease-out,color var(--dur-snappy,.12s) ease-out,box-shadow var(--dur-chill,.3s) ease-in-out}
.sq-mode a:hover{color:var(--ink)}
.sq-mode a[aria-current="page"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 .5px var(--line)}
.sq-mode a:focus-visible{outline:2px solid #7c5cff;outline-offset:1px}
@container (max-width:150px){ .sq-mode span{display:none} }
.sq-mode svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The collapsed rail is one icon wide: the two modes stack, icons only, in the column the tabs below use. */
.ag-history:not(.on):not(:hover):not(.hover-open) .sq-mode{flex-direction:column;width:32px;margin:0 0 10px 6px;padding:2px}
.ag-history:not(.on):not(:hover):not(.hover-open) .sq-mode a{flex:none;height:26px}
.ag-history:not(.on):not(:hover):not(.hover-open) .sq-mode span{display:none}

/* the box is the same box in both modes */
#agForm,#vidForm{view-transition-name:sq-composer}
::view-transition-group(sq-composer){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}