/* A tiny, optional sprout. The illustration has its own palette; controls and
   its on-demand work list use the app's light/dark workspace tokens. */
.pip-companion {
  position: fixed;
  right: 24px;
  bottom: 156px;
  width: 88px;
  height: 106px;
  z-index: 18;
  user-select: none;
}
.pip-companion[hidden] { display: none; }
.pip-work-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(420px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid var(--sv-hairline);
  border-radius: 16px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow, 0 8px 28px rgb(0 0 0 / .12));
  font: 400 var(--sv-text-body)/1.45 var(--sv-font-sans, sans-serif);
  user-select: text;
}
.pip-work-panel[hidden] { display: none; }
.pip-companion:is(.is-left, .pip-panel-align-left) .pip-work-panel { left: 0; right: auto; }
.pip-companion.pip-panel-below .pip-work-panel { top: calc(100% + 12px); bottom: auto; }
.pip-work-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; padding: 14px 10px 10px 16px; border-bottom: 1px solid var(--sv-hairline); }
.pip-work-head h2 { margin: 0; padding: 4px 8px 4px 0; font-size: var(--sv-text-h4); line-height: 1.3; font-weight: 500; letter-spacing: var(--sv-tracking-heading); overflow-wrap: anywhere; }
#pip-work-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sv-ink-secondary); cursor: pointer; }
#pip-work-close:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
#pip-work-close svg { width: 16px; height: 16px; }
#pip-work-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.pip-work-item { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 10px 0; color: var(--sv-ink); text-decoration: none; border-bottom: 1px solid var(--sv-hairline); }
.pip-work-item:last-child { border-bottom: 0; }
.pip-work-item:hover .pip-work-item-title { text-decoration: underline; }
.pip-work-item-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-work-item-meta { color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
#pip-work-empty { margin: 0; padding: 18px 16px 8px; color: var(--sv-ink-secondary); }
#pip-work-activity { align-self: flex-start; min-height: 44px; margin: 4px 8px 10px; padding: 10px 8px; color: var(--sv-ink); text-underline-offset: 3px; }
.pip-work-panel :is(a, button):focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.pip-companion:has(:is(.pip-work-panel, .pip-voice-panel):not([hidden])) .pip-caption { opacity: 0 !important; }
.pip-voice-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  max-height: min(220px, calc(100dvh - 32px));
  padding: 14px;
  border: 1px solid var(--sv-hairline);
  border-radius: 16px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow, 0 8px 28px rgb(0 0 0 / .12));
  font: 400 var(--sv-text-body)/1.4 var(--sv-font-sans, sans-serif);
  user-select: text;
}
.pip-voice-panel[hidden] { display: none; }
.pip-companion:is(.is-left, .pip-panel-align-left) .pip-voice-panel { left: 0; right: auto; }
.pip-companion.pip-panel-below .pip-voice-panel { top: calc(100% + 12px); bottom: auto; }
.pip-voice-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; }
#pip-voice-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
#pip-voice-state::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--sv-ink-tertiary);
  content: "";
}
.pip-voice-panel[data-kind="live"] #pip-voice-state::before { background: var(--sv-accent); }
.pip-voice-panel[data-kind="pending"] #pip-voice-state::before { animation: live-voice-pulse 1.2s var(--sv-ease-inout) infinite; }
.pip-voice-panel[data-kind="error"] #pip-voice-state::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sv-ink);
}
#pip-voice-thread { min-width: 0; overflow: hidden; color: var(--sv-ink-secondary); text-overflow: ellipsis; white-space: nowrap; }
#pip-voice-microphone { margin: 0; color: var(--sv-ink-secondary); }
.pip-voice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pip-voice-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--sv-ink);
  font: inherit;
  cursor: pointer;
}
.pip-voice-actions button:hover:not(:disabled) { border-color: var(--sv-ink); background: var(--sv-surface-sunken); }
.pip-voice-actions button:disabled { color: var(--sv-ink-tertiary); cursor: default; }
.pip-voice-actions button[hidden] { display: none; }
.pip-voice-actions .icon { width: 18px; height: 18px; }
#pip-voice-end { border-color: var(--sv-ink); background: var(--sv-ink); color: var(--sv-surface); }
#pip-voice-mute[aria-pressed="true"] { color: var(--sv-danger); border-color: var(--sv-danger); }
.pip-voice-panel :is(button):focus-visible,
.pip-voice-start:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.pip-voice-start {
  position: absolute;
  right: calc(100% - 8px);
  top: 42px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow, 0 4px 16px rgb(0 0 0 / .10));
  cursor: pointer;
}
.pip-voice-start:hover:not(:disabled) { background: var(--sv-surface-sunken); }
.pip-voice-start:disabled { color: var(--sv-ink-tertiary); cursor: default; opacity: .65; }
.pip-voice-start .icon { width: 20px; height: 20px; }
.pip-companion.is-left .pip-voice-start { left: calc(100% - 8px); right: auto; }
.pip-companion[data-voice-active="true"] .pip-voice-start { display: none; }
.pip-companion[data-voice-active="true"] .pip-pet { opacity: .72; cursor: default; }
.pip-pet {
  display: grid;
  justify-items: center;
  width: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sv-ink-secondary);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.pip-sprite { display: block; width: 80px; height: 80px; overflow: visible; }
.pip-pet:active, .is-dragging .pip-pet { cursor: grabbing; }
.pip-pet:focus-visible, .pip-hide:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 3px; }
.pip-name { display: flex; align-items: center; gap: 5px; font: 500 var(--sv-text-caption)/1.4 var(--sv-font-sans, sans-serif); letter-spacing: .04em; }
.pip-name span { width: 4px; height: 4px; background: var(--sv-ink-tertiary); }
.pip-companion[data-live="true"] .pip-name span { background: var(--sv-accent); }
.pip-hide {
  position: absolute;
  right: -8px;
  top: -4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-surface);
  color: var(--sv-ink-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 1;
}
.pip-hide svg { width: 16px; height: 16px; }
.pip-caption {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px 10px;
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink-secondary);
  font: 400 var(--sv-text-caption)/1.4 var(--sv-font-sans, sans-serif);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
}
.pip-companion.is-left .pip-caption { left: 0; right: auto; }
.pip-companion:hover .pip-hide, .pip-companion:focus-within .pip-hide { opacity: 1; }
/* Pointer focus can last after a click or tap; only keyboard focus keeps the label open. */
.pip-companion:has(.pip-pet:focus-visible) .pip-caption { opacity: 1; }
@media (hover: hover) {
  .pip-companion:has(.pip-pet:hover) .pip-caption { opacity: 1; transition-delay: 400ms; }
}
.pip-companion.is-dragging .pip-caption { opacity: 0; }
.pip-eyes { transform-box: fill-box; transform-origin: center; animation: pip-blink 7s infinite; }
.pip-happy-eyes, .pip-heart, .pip-sleepy-eyes, .pip-brows, .pip-round-mouth, .pip-worried-mouth { opacity: 0; }
.pip-prop { display: none; }
.pip-companion:is([data-mood="happy"], [data-mood="done"], [data-mood="compacting"], [data-mood="reconnecting"]) .pip-eyes { opacity: 0; }
.pip-companion[data-mood="happy"] .pip-happy-eyes,
.pip-companion[data-mood="happy"] .pip-heart { opacity: 1; }
.pip-companion[data-mood="happy"] .pip-body { animation: pip-hop 450ms ease-out 2; }
.pip-companion[data-mood="happy"] .pip-heart { animation: pip-love 900ms ease-out 2; }
.pip-companion[data-mood="working"] .pip-body { animation: pip-work 1s steps(2, end) infinite; }
.pip-companion[data-mood="working"] .pip-foot-left { animation: pip-step 500ms steps(2, end) infinite alternate; }
.pip-companion[data-mood="working"] .pip-foot-right { animation: pip-step 500ms steps(2, end) infinite alternate-reverse; }
.pip-companion[data-mood="waiting"] .pip-sprout { transform-origin: 20px 13px; transform: rotate(-12deg); }
.pip-companion[data-mood="search"] .pip-magnifier,
.pip-companion:is([data-mood="reading"], [data-mood="compacting"]) .pip-book,
.pip-companion[data-mood="writing"] .pip-pencil,
.pip-companion:is([data-mood="coding"], [data-mood="running"]) .pip-terminal,
.pip-companion[data-mood="tool"] .pip-wrench,
.pip-companion[data-mood="checking"] .pip-check,
.pip-companion[data-mood="creating"] .pip-palette,
.pip-companion[data-mood="delegating"] .pip-friend,
.pip-companion:is([data-mood="waiting"], [data-mood="error"]) .pip-question,
.pip-companion[data-mood="done"] .pip-sparkles,
.pip-companion[data-mood="working"] .pip-thoughts,
.pip-companion[data-mood="reconnecting"] .pip-connection { display: inline; }
.pip-companion:is([data-mood="waiting"], [data-mood="search"]) .pip-round-mouth,
.pip-companion:is([data-mood="coding"], [data-mood="writing"], [data-mood="checking"], [data-mood="error"]) .pip-brows,
.pip-companion:is([data-mood="compacting"], [data-mood="reconnecting"]) .pip-sleepy-eyes,
.pip-companion[data-mood="done"] .pip-happy-eyes,
.pip-companion[data-mood="error"] .pip-worried-mouth { opacity: 1; }
.pip-companion:is([data-mood="waiting"], [data-mood="search"], [data-mood="error"]) .pip-mouth { opacity: 0; }
.pip-companion[data-mood="search"] .pip-eyes { animation: pip-look 2.4s steps(2, end) infinite; }
.pip-companion[data-mood="search"] .pip-magnifier { animation: pip-investigate 2.4s steps(2, end) infinite; }
.pip-companion[data-mood="reading"] .pip-eyes { animation: pip-read 2.8s steps(3, end) infinite; }
.pip-companion[data-mood="writing"] .pip-pencil-tip { transform-origin: 27px 30px; animation: pip-scribble 600ms steps(2, end) infinite; }
.pip-companion:is([data-mood="coding"], [data-mood="running"]) .pip-cursor { animation: pip-cursor 800ms steps(2, end) infinite; }
.pip-companion[data-mood="coding"] .pip-body { animation: pip-work 600ms steps(2, end) infinite; }
.pip-companion[data-mood="tool"] .pip-wrench { transform-origin: 34px 34px; animation: pip-turn-tool 900ms steps(2, end) infinite; }
.pip-companion[data-mood="checking"] .pip-check,
.pip-companion[data-mood="creating"] .pip-palette,
.pip-companion[data-mood="delegating"] .pip-friend { animation: pip-hop 1.2s ease-in-out infinite; }
.pip-companion[data-mood="compacting"] .pip-book { animation: pip-work 1.4s steps(2, end) infinite; }
.pip-companion[data-mood="waiting"] .pip-question { animation: pip-hop 1s ease-out 2; }
.pip-companion[data-mood="done"] .pip-body { animation: pip-hop 500ms ease-out 3; }
.pip-companion[data-mood="done"] .pip-sparkles { animation: pip-love 1s ease-out 2; }
.pip-companion[data-mood="error"] .pip-brows { transform-origin: 20px 20px; transform: rotate(-8deg); }
.pip-companion:is([data-mood="error"], [data-mood="reconnecting"]) .pip-sprout { transform-origin: 20px 13px; transform: rotate(20deg); }
.pip-companion.is-paused *, .pip-companion.is-dragging * { animation-play-state: paused !important; }
@keyframes pip-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.15); } }
@keyframes pip-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes pip-love { from { transform: translateY(2px); opacity: 0; } 25%, 75% { opacity: 1; } to { transform: translateY(-4px); opacity: 0; } }
@keyframes pip-work { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes pip-step { to { transform: translateY(-2px); } }
@keyframes pip-look { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes pip-investigate { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes pip-read { 0%, 100% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
@keyframes pip-scribble { 50% { transform: rotate(8deg); } }
@keyframes pip-cursor { 50% { opacity: 0; } }
@keyframes pip-turn-tool { 50% { transform: rotate(-12deg); } }

.pip-invite {
  /* A named row leaves conversation controls and open menus unobstructed. */
  grid-row: pip-invite;
  justify-self: center;
  margin: 12px var(--chat-scrollbar-width, 0px) 4px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(var(--workspace-reading-width, 52rem), calc(100% - 2 * var(--conversation-gutter, var(--sv-gutter)) - var(--chat-scrollbar-width, 0px)));
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border: 1px solid var(--sv-hairline);
  border-radius: 16px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: none;
  font: 400 var(--sv-text-caption)/1.5 var(--sv-font-sans, sans-serif);
}
.pip-invite[hidden] { display: none; }
.pip-invite-art { flex: 0 0 32px; }
.pip-invite-art svg { display: block; width: 32px; height: 32px; }
.pip-invite-art * { animation: none !important; }
.pip-invite-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-width: 0; flex: 1; }
.pip-invite strong { display: block; grid-column: 1; font-size: var(--sv-text-small); font-weight: 600; }
.pip-invite p { grid-column: 1; margin: 4px 0 0; color: var(--sv-ink-secondary); }
.pip-invite small { display: block; grid-column: 1; margin-top: 4px; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.pip-invite-actions { display: flex; grid-column: 2; grid-row: 1 / span 3; flex-wrap: wrap; gap: 8px; }
.pip-invite-actions button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--sv-hairline); border-radius: 8px; cursor: pointer; background: transparent; color: var(--sv-ink); font: inherit; font-weight: 500; }
#pip-invite-enable { background: var(--sv-ink); color: var(--sv-surface); border-color: var(--sv-ink); }
#text-alerts-invite { grid-row: text-alerts-invite; }
#text-alerts-invite-enable { background: var(--sv-ink); color: var(--sv-surface); border-color: var(--sv-ink); }
.text-alerts-invite-art { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sv-surface); color: var(--sv-ink-secondary); }
.text-alerts-invite-art svg { width: 24px; height: 24px; }
.pip-invite-actions button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .pip-companion {
    right: 16px;
    bottom: calc(100dvh - var(--app-viewport-height, 100dvh) - var(--app-viewport-top, 0px) + 144px + env(safe-area-inset-bottom, 0px));
  }
  .pip-invite { margin-inline: 16px; padding: 14px; gap: 8px; }
  .pip-invite-actions button { min-height: 44px; }
}
@media (max-height: 520px) {
  .pip-work-panel { max-height: max(112px, calc(100dvh - 280px)); }
}
@media (hover: none) {
  .pip-hide { opacity: 1; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pip-companion *, .pip-companion *::before { animation: none !important; transition: none !important; }
}
@media print { .pip-companion, .pip-invite { display: none; } }