.call-companions { position:absolute; z-index:8; inset:auto 8px 58px; display:flex; justify-content:center; align-items:flex-end; gap:4px; pointer-events:none; }
.call-companion { flex:0 1 128px; min-width:0; max-width:128px; text-align:center; position:relative; pointer-events:none; }
.call-companion-art { display:block; width:100%; aspect-ratio:1; position:relative; border:0; padding:0; background:none; border-radius:16px; transform-origin:50% 90%; }
button.call-companion-art { pointer-events:auto; cursor:pointer; }
.call-companion-art img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #0004); }
.call-companion-name { display:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 7px; border-radius:9px; font-size:11px; color:#f6f5e9; background:#1c261ddd; }
.call-creature-button { display:flex;align-items:center;justify-content:center;gap:3px;background:transparent;color:inherit;border:0;padding:0 4px;min-height:44px;min-width:44px;font-size:10px; }
.call-creature-button img { width:35px;height:35px;object-fit:contain; }
.call-creature-button span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.collection-art-stage { position:relative;aspect-ratio:1;min-width:0; }
.collection-art-stage .collection-art { width:100%;height:100%;object-fit:contain; }
.collection.in-call-collection { position:fixed;inset:auto 0 0;margin:0 auto;width:min(560px,100vw);height:min(84dvh,760px);max-height:calc(100dvh - 16px);border-radius:24px 24px 0 0;padding:16px;overflow:hidden; }
.collection.in-call-collection::backdrop { background:#0003; }
.in-call-collection .collection-icon-preview,.in-call-collection .collection-icon-help,.in-call-collection .collection-poses { display:none; }
.in-call-collection .collection-feature { margin-top:6px; }

.in-call-collection .collection-grid { flex:1;min-height:0;max-height:none;overflow-y:auto;align-content:start; }
.in-call-collection .collection-actions { flex:none;position:static;background:var(--collection-paper,#fffdf7);padding:12px 0 0;margin-bottom:0; }
@media(prefers-reduced-motion:reduce){.call-companion-art{transition:none}}

.collection.in-call-collection::backdrop { backdrop-filter:none; }
.in-call-collection .collection-intro { flex:none;position:static;background:var(--collection-paper,#fffdf7);padding:0 32px 0 0; }
.in-call-collection .modal-close { position:absolute;top:12px;right:12px;margin:0;z-index:4; }
.in-call-collection #collection-icon-note { display:none; }
.collection.in-call-collection[open]::backdrop { animation:none;backdrop-filter:none; }
.in-call-collection .collection-art-stage { max-width:88px; }


@media(max-width:430px){.call-companion{max-width:112px}}

.call-wave-art { display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px #0004); }

.collection.in-call-collection[open] { display:flex;flex-direction:column; }
.in-call-collection #collection-browse { display:flex;flex-direction:column;flex:1;min-height:0; }
.in-call-collection .collection-feature { flex:none;grid-template-columns:88px 1fr;margin:4px 0 14px; }
.in-call-collection .collection-detail p { margin:4px 0;min-height:0; }
.in-call-collection #collection-purchase-note { flex:none;margin:8px 0 0; }
.in-call-collection #collection-error:empty { display:none; }
@media(max-height:600px) {
 .collection.in-call-collection { height:calc(100dvh - 16px); }
 .in-call-collection .collection-feature { grid-template-columns:52px 1fr;margin:0 0 8px; }
 .in-call-collection .collection-art-stage { max-width:52px; }
 .in-call-collection .collection-detail p { display:none; }
}

/* A neutral pool of light separates Raven's dark feathers from video canvas. */
.call-companion[data-creature="raven"] .call-companion-art {
  background:radial-gradient(ellipse at 50% 55%, #eee9df55 0%, #eee9df24 43%, transparent 72%);
}
.call-companion[data-creature="raven"] .call-companion-art img,
.call-creature-button[data-creature="raven"] img {
  filter:drop-shadow(0 0 1px #fff8e599) drop-shadow(0 2px 3px #0006);
}

/* Optional overlays share the shortcut row; they never reserve video space. */
.call .call-companions {
  left:max(12px,env(safe-area-inset-left)); right:auto;
  bottom:calc(var(--call-controls-height,90px) + 6px);
  width:max-content; max-width:min(240px,calc(100% - 120px)); height:64px;
  padding:0; gap:4px; justify-content:flex-start; align-items:flex-end;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#a9b2a880 transparent;
  pointer-events:auto; background:none;
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s;
}
.call .call-companions[hidden] { display:none; }
.call .call-companion { flex:0 0 60px; width:60px; max-width:none; }
.call .call-companion-art:focus-visible { outline:2px solid var(--companion-room-ink,#e8e8d8); outline-offset:-3px; }
.call .call-companions:focus { outline:none; }
.call .call-companions[tabindex="0"]:focus-visible { outline:2px solid var(--companion-room-ink,#e8e8d8); outline-offset:2px; border-radius:16px; }
.call.controls-hidden .call-companions { opacity:0; visibility:hidden; transform:translateY(100%); pointer-events:none; transition:opacity 180ms ease,transform 180ms ease,visibility 0s 180ms; }
.call.controls-hidden .call-companions * { pointer-events:none; }
@media(max-width:600px) {
 .call .call-companions { bottom:calc(var(--call-controls-height,140px) - 48px); }
}
@media(prefers-reduced-motion:reduce) { .call .call-companions,.call.controls-hidden .call-companions { transition:none; } }

/* With the controls away, a friend's cameo still pops up from the corner, alone. */
.call.controls-hidden .call-companions.has-cameo {
  opacity:1; visibility:visible; transform:none; transition:opacity 180ms ease,transform 180ms ease,visibility 0s;
  bottom:max(12px,env(safe-area-inset-bottom));
}
.call.controls-hidden .call-companions.has-cameo .call-companion:not(.cameo) { display:none; }
@media(prefers-reduced-motion:reduce) { .call.controls-hidden .call-companions.has-cameo { transition:none; } }