/* Ross agents: pixel-art scenes drawn with SVG and animated with steps().
   Fills come from paleta.css (generated); this file is hand-written. */

/* A sprite is drawn at an integer scale: --w/--h are its size in art pixels, --s the scale. */
.pxa-sprite {
  display: inline-flex;
  flex: none;
  height: calc(var(--h) * var(--s, 2) * 1px);
  position: relative;
  width: calc(var(--w) * var(--s, 2) * 1px);
}

/* A scene fills the width it is given, up to --max screen pixels per art pixel (8 by default). */
.pxa-scene {
  aspect-ratio: var(--w) / var(--h);
  position: relative;
  width: min(100%, calc(var(--w) * var(--max, 8) * 1px));
}

.pxa .pxa-lay {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  shape-rendering: crispEdges;
  top: 0;
  width: 100%;
}

.pxa-pt {
  overflow: hidden;
  position: absolute;
}

/* One strip of n frames, as wide as n boxes; each step slides it by one frame. */
.pxa .pxa-st {
  animation: pxa-strip var(--t) steps(var(--n), end) infinite;
  display: block;
  height: 100%;
  shape-rendering: crispEdges;
  width: calc(var(--n) * 100%);
}

@keyframes pxa-strip {
  to { transform: translateX(-100%); }
}

/* The topbar button pauses every agent animation (see agentes.js). */
html[data-agents-paused] .pxa .pxa-st {
  animation-play-state: paused;
}

.agents-pause {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
  padding: 8px;
}
.agents-pause .icon-play { display: none; }
.agents-pause[aria-pressed="true"] .icon-pause { display: none; }
.agents-pause[aria-pressed="true"] .icon-play { display: block; }

/* Layout hooks for the places agents appear. */

/* Empty dashboard: the module's scene in a panel, above the message. */
.agents-empty-frame {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  max-width: 420px;
  padding: 16px;
}

/* Dashboard with no orders in the range: a smaller frame, message centered under it. */
.agents-empty-frame-small { max-width: 288px; }
#metrics-empty { margin-bottom: 20px; text-align: center; }
#metrics-empty p { margin: 0; }

/* Topbar: the role's chip beside the account name. */
.account-chip { display: inline-flex; flex: none; }

/* Widget title with the module's head beside it. */
.widget-title-row { align-items: center; display: flex; gap: 8px; }
.panel .widget-title-row h3 { margin: 0; }

/* People as chips: in the members list, and overlapped in Perfil's team summary. */
.member-chip { align-self: center; }
.team-chip { margin-left: -6px; }
.team-chip:first-child { margin-left: 0; }

/* Modal title with the module's scene at its right (scale 3: 120px wide). */
.agents-modal-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.agents-modal-head h3 { margin: 0; }
.agents-modal-head .pxa-scene { flex: none; width: 120px; }

/* Perfil header: the portrait beside the title. */
.agents-heading { align-items: center; display: flex; gap: 16px; }
/* A fixed width (not a percentage) so the heading is sized by its content, not by the scene. */
.agents-heading .pxa-scene,
.store-panel-header > .pxa-scene { flex: none; width: min(160px, 40vw); }

/* Login welcome agent (mascota.js): peeks out from behind the top edge of the login card. The form
   side clips what sticks out, so its space above the card is reserved at every width (the sprite is
   ~105 px tall), and "safe center" keeps the card from riding up into the clip when the window is
   short (e.g. a laptop at 125% zoom): the column grows and the page scrolls instead. */
.auth-mascot { bottom: calc(100% - 1px); left: 50%; position: absolute; transform: translateX(-50%); }
.auth-formside { justify-content: safe center; padding-bottom: 24px; padding-top: 124px; }

/* Ross's message box. The login bubble, the error toast and the True ROAS note are one design: a card in the
   app's own colors (1 px border, 8 px corners), "Ross" as a small label over the message, and a thin stripe on
   the left whose color says the state at a glance (--ross-stripe). The stripe only decorates: the text always
   says the same in words. In the light theme the stripe tones are darker so they hold 3:1 on white. */
:root {
  --ross-neutral: #3B8CB8;
  --ross-ok: #08876F;
  --ross-warn: #A87A00;
  --ross-error: var(--danger);
}
:root[data-theme="dark"] {
  --ross-neutral: var(--celeste);
  --ross-ok: var(--positive);
  --ross-warn: var(--warning);
}

.ross-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ross-stripe, var(--ross-neutral));
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(12, 23, 48, 0.14);
  color: var(--text);
  font: 600 13px/1.3 "DM Sans", sans-serif;
  padding: 8px 12px 9px 10px;
  text-align: left;
}
.ross-who {
  color: var(--muted);
  display: block;
  font: 700 10px/1 "DM Sans", sans-serif;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.ross-msg { display: block; }

/* First visit: the bubble above the agent's right shoulder, and a ring on the tab it points at. */
.agents-bubble {
  appearance: none;
  cursor: pointer;
  position: absolute;
  right: -4px;
  top: -92px;
  width: 134px;
  z-index: 2;
}
.agents-bubble::after {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  bottom: -7px;
  content: "";
  height: 10px;
  position: absolute;
  right: 22px;
  transform: rotate(45deg);
  width: 10px;
}
.agents-bubble:hover,
.agents-bubble:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.agents-invite-hint { box-shadow: 0 0 0 2px var(--primary); }
/* On a phone the bubble moves out and shrinks so it stays clear of the agent's face. */
@media (max-width: 480px) { .agents-bubble { font-size: 12.5px; right: -8px; width: 126px; } }

/* Error toast: Ross stands on the box's top edge holding the cable that came unplugged. */
.mascot-toast {
  --ross-stripe: var(--ross-error);
  bottom: 24px;
  font-size: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px 12px 12px;
  position: fixed;
  right: 24px;
  width: 400px;
  z-index: 80;
}
.mascot-toast-art { bottom: calc(100% - 1px); position: absolute; right: 18px; width: 78px; }
.mascot-toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mascot-toast-text span:not(.ross-who) { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.mascot-toast-text .btn { align-self: flex-start; margin-top: 8px; }

/* Loading block in the chart panel. */
.mascot-loading { align-items: center; display: flex; gap: 18px; justify-content: center; padding: 10px 0; }
.mascot-loading-art { flex: none; width: 130px; }
.mascot-loading strong { display: block; font: 700 16px "Inter", sans-serif; }
.mascot-loading span { color: var(--muted); display: block; font-size: 13px; margin-top: 4px; }
@media (max-width: 480px) { .mascot-loading { flex-direction: column; text-align: center; } }

/* True ROAS card: Ross stands inside it, bottom right, and the box beside it says the same in words. The stripe is
   green above the minimum and amber below it (a low result is a heads-up, not an alarm). */
.stat-hero { position: relative; }
.mascot-mood-art { bottom: 1px; position: absolute; right: 14px; }
.mascot-mood-note {
  --ross-stripe: var(--ross-ok);
  margin: 12px 0 0;
  max-width: calc(100% - 156px);
  position: relative;
  width: max-content;
}
.mascot-mood-note.low { --ross-stripe: var(--ross-warn); }
.mascot-mood-note .ross-arrow { color: var(--ross-stripe); }
/* A small tail toward Ross. */
.mascot-mood-note::after {
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  content: "";
  height: 10px;
  margin-top: -5px;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: rotate(45deg);
  width: 10px;
}
/* The quick-alert row (also in this card) needs the room while it is open. */
.stat-hero:has(#quick-alert-row:not([hidden])) .mascot-mood-art,
.stat-hero:has(#quick-alert-row:not([hidden])) .mascot-mood-note::after { display: none; }

/* First steps (mascota.js): the mascot beside what a new account still has to do. */
.first-steps { align-items: center; display: flex; gap: 20px; }
.first-steps-art { flex: none; width: 110px; }
.first-steps > div:last-child { flex: 1; min-width: 0; }
.first-steps .first-steps-head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.first-steps .first-steps-head h3 { margin: 0; }
.first-steps p { font-size: 13px; margin: 4px 0 10px; }
.first-steps-hide { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; text-decoration: underline; }
.first-steps ol { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.first-steps li { align-items: center; border-top: 1px solid var(--border); counter-increment: step; display: flex; gap: 12px; padding: 10px 0; }
.first-steps li::before {
  align-items: center; background: var(--highlight); border-radius: 50%; color: var(--text); content: counter(step);
  display: flex; flex: none; font: 700 12px "Inter", sans-serif; height: 24px; justify-content: center; width: 24px;
}
.first-steps li div { flex: 1; min-width: 0; }
.first-steps li strong { display: block; font-size: 14px; }
.first-steps li span { color: var(--muted); display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.first-steps li em { color: var(--positive-text); font-size: 12.5px; font-style: normal; font-weight: 700; }
.first-steps li.done strong { color: var(--muted); }
.first-steps li.done::before { background: var(--positive); color: #fff; content: "✓"; }
@media (max-width: 560px) {
  .first-steps { align-items: stretch; flex-direction: column; gap: 8px; }
  .first-steps-art { align-self: center; width: 96px; }
  .first-steps li { flex-wrap: wrap; }
  .first-steps li .btn, .first-steps li em { margin-left: 36px; }
}

/* Reduced motion: the first frame stays on screen, and the pause button has nothing to do.
   Kept last so it wins over the rules above. */
@media (prefers-reduced-motion: reduce) {
  .pxa .pxa-st { animation: none; }
  .agents-pause { display: none; }
}