/* The toolbar's capsules (UI-9): Focus's and Ava's, each growing into its window, Ava's pane, and
   the toolbar's ⋯ More. */

/* ---- capsules that grow into their windows (core/capsule.js, design/v5/V5AvaPane.dc.html). The slot
   holds the capsule's place in the row; closed, the face is a real control with its own glass. The
   window sits at its full size, anchored at the slot's top right, and is uncovered from the face's rect
   on transforms (core/reveal.js): nothing on these frames is laid out or redrawn. */
.tb-caps { display: flex; flex: none; align-items: center; gap: 8px; }
.tb-caps:empty { display: none; }
/* only the face and an open window catch the pointer: Ava's slot spans the window's height */
.cap-slot { position: relative; flex: none; height: 36px; pointer-events: none; }
.cap-slot[hidden] { display: none; }
.cap-face {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  color: var(--fg);
  font: 500 12px var(--font-ui);
  pointer-events: auto;
  /* back once the window has nearly folded into it (V5Morph: 160 ms after 220); gone at once as it opens */
  transition: opacity 160ms var(--ease) 220ms, background-color 120ms var(--ease);
}
.cap-slot.open > .cap-face { opacity: 0; pointer-events: none; transition: opacity 100ms var(--ease), background-color 120ms var(--ease); }
.cap-win {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  border-radius: 18px;
  visibility: hidden;
  pointer-events: none;
}
.cap-win.shown { visibility: visible; }
/* it holds the keyboard while it grows, before its first field takes it (UI-10 §1): no ring of its own */
.cap-win:focus { outline: none; }
.cap-win.open { pointer-events: auto; }
/* its glass, the pane's, on the reveal's carrier; the capsule fading out over it is the change from the
   control's glass (a colour change would be redrawn on the page's own frames, UI-9c) */
.cap-pane { overflow: hidden; }
.cap-in {
  opacity: 0;
  /* out over 100 ms as it folds; in over 200 once it's moving (V5Morph's capsules, UI-9h: the board's
     contents only fade, no slide) */
  transition: opacity 100ms var(--ease);
}
.cap-win.open .cap-in { opacity: 1; transition: opacity 200ms var(--ease) var(--cap-in, 120ms); }
@media (prefers-reduced-motion: reduce) {
  .cap-win.open .cap-in { transition-delay: 0s; }
}

/* Ava's capsule, rightmost: her mini swarm and ⌘K; it grows into her pane at the right edge, 360 wide,
   full height, 10 in from the edges (the sidebar mirrored). The slot spans the window's height so the
   pane's contents can be as tall as it from the first frame (100cqh). */
.cap-ava {
  position: absolute;
  z-index: 25;
  top: 10px;
  right: 14px;
  bottom: 10px;
  width: 72px;
  height: auto;
  container-type: size;
}
.cap-ava > .cap-win { right: -4px; width: min(360px, calc(100vw - 20px)); height: 100%; }
.ava-mini { display: inline-flex; flex: none; width: 28px; height: 28px; }
.cap-ava .cap-face { padding: 0 10px 0 6px; }
.cap-ava .kbd { color: var(--faint); font-size: 11px; }
/* the toolbar stops short of her capsule, and rides beside her pane while it's open: 8 px from either,
   the same gap as between the two capsules (UI-9g: 14 beside the pane) */
.app[data-chrome="full"] { --tb-rx: 94px; }
.app[data-chrome="full"].ava-on { --tb-rx: 378px; }
/* with room, the pane pushes the main area over instead of covering it (laid out once, slid on transforms) */
.app[data-chrome="full"].ava-push { --main-r: 380px; }

/* her chat (core/ava-pane.js, design/v5/V5AvaChat.dc.html): her swarm, large in the middle until the
   first question, then gliding up into the header (transform only); the exchanges; the growing input */
.ava-pane { position: relative; display: flex; flex-direction: column; width: min(358px, calc(100vw - 22px)); height: calc(100cqh - 2px); font: 13px/1.5 var(--font-ui); }
.ap-swarm {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  pointer-events: none;
  /* the middle of the pane, whatever its width (ava-pane's own width, less the swarm's); 96 since UI-14e
     (80 before, Tom: "a bit bigger"), her bottom edge where it was, so her line keeps its gap under her */
  transform: translate(calc((min(358px, 100vw - 22px) - 96px) / 2), 174px);
  transform-origin: 0 0;
  transition: transform 500ms var(--sp-smooth);
}
/* (32 px in the header, as before: a third of her 96) */
.ava-pane.talking .ap-swarm { transform: translate(10px, 10px) scale(.33334); }
/* her two bodies, one over the other (UI-11): the full one while she's large, the capsule's once she's in
   the header, cross-fading as she glides up */
.ap-swarm canvas { position: absolute; top: 0; left: 0; transition: opacity 240ms var(--ease) 140ms; }
.ap-swarm .ap-mini,
.ava-pane.talking .ap-swarm .ap-full { opacity: 0; }
.ava-pane.talking .ap-swarm .ap-mini { opacity: 1; }
.ap-head { display: flex; flex: none; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 50px; }
.ap-head h2 { flex: 1; margin: 0; color: var(--fg-strong); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 200ms var(--ease); }
.ava-pane.talking .ap-head h2 { opacity: 1; transition-delay: 200ms; }
.ap-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; color: var(--muted); }
.ap-talk { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 8px 16px 12px; overflow-y: auto; }
.ap-hello { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 236px; text-align: center; transition: opacity 160ms var(--ease); }
.ap-hello.gone { opacity: 0; }
.ap-line { margin: 0; color: var(--fg); font-size: 13px; line-height: 1.6; }
.ap-line b,
.ap-at b { color: var(--ava); font-weight: 600; }
.ap-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 -8px; }
.ap-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 0; border-radius: 14px; color: var(--fg); font: 12px var(--font-ui); text-decoration: none; }
/* an exchange: his question, what she did, her answer typing out */
.ap-ex { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ap-q { margin: 0; color: var(--fg-strong); font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.ap-a { margin: 2px 0 0; color: var(--fg); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.ap-a[hidden] { display: none; }
@keyframes ap-blink { 50% { opacity: 0; } }
.ap-caret { margin-left: 1px; color: var(--ava); animation: ap-blink 1s steps(1) infinite; }
.ap-at { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--faint); font-size: 11px; animation: rise 200ms var(--ease) both; }
/* her activity (core/ava-activity.js) */
.ap-act[hidden] { display: none; }
.ap-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 24px;
  margin-left: -6px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: left;
}
.ap-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-chev { display: inline-flex; flex: none; color: var(--faint); transition: transform 200ms var(--ease); }
.ap-act-btn[aria-expanded="true"] .ap-chev { transform: rotate(90deg); }
.ap-tick { display: inline-flex; flex: none; color: var(--good-text); }
.ap-tick[hidden],
.ap-spin[hidden] { display: none; }
.ap-spin { display: inline-block; flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--spin-track); border-top-color: var(--spin-head); border-radius: 50%; animation: spin 700ms linear infinite; }
.ap-steps { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0 0 0 6px; list-style: none; }
.ap-steps li { display: flex; align-items: center; gap: 8px; height: 22px; color: var(--muted); font: 11px var(--font-mono); }
.ap-steps li.run { color: var(--fg); }
/* the input: a capsule that grows from one line to five; send only once there's text */
.ap-ask { flex: none; padding: 0 12px 12px; }
.ap-hair { display: none; height: 1px; margin: 0 6px 10px; background: var(--sep); }
.ava-pane.talking .ap-hair { display: block; }
.ap-box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--sep);
  border-radius: 20px;
  background: var(--card);
  transition: border-color 120ms var(--ease), border-radius 200ms var(--ease);
}
.ap-box.multi { border-radius: 14px; }
.ap-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ap-input {
  flex: 1;
  min-width: 0;
  box-sizing: content-box;
  height: 20px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--fg-strong);
  font: 13px/20px var(--font-ui);
}
.ap-input::placeholder { color: var(--placeholder); }
.ap-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--pri);
  color: var(--fg-strong);
  opacity: 0;
  transition: opacity 160ms var(--ease), background-color 120ms var(--ease);
}
.ap-send.on { opacity: 1; }
@media (hover: hover) {
  .ap-send.on:hover { background: var(--pri-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-caret,
  .ap-spin { animation: none; }
}

/* what didn't fit on the format bar (core/toolbar-fit.js): in its ⋯ More */
.tb-gone { display: none !important; }

/* a phone-width window: the same, nearer the edge */
@media (max-width: 700px) {
  .app[data-chrome="full"] { --tb-rx: 90px; }
  .app[data-chrome="full"] .tb-right { margin-left: auto; }
  .cap-ava { right: 10px; }
  .cap-ava > .cap-win { right: 0; }
}