/* Activity in the footer, its panel, and the finished notice. Surfaces follow the account menu. */
.statusbar-legal { display: flex; align-items: center; gap: 6px; }
.generation-queue-anchor { position: relative; }

.generation-queue-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  /* 9px: an 8px label's capitals cannot centre on the 12px icon once text snaps to whole pixels. */
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.generation-queue-btn:hover,
.generation-queue-btn[aria-expanded="true"] { background: var(--accent-bg); border-color: var(--line); }
.generation-queue-btn .icon { width: 12px; height: 12px; }
.generation-queue-count {
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #021b10;
  font: 700 8px/1 var(--font-mono);
  letter-spacing: 0;
}
.generation-queue-count[hidden] { display: none; }
/* Something is still being made: a small ring, not a number. */
.activity-spinner {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(52, 211, 153, .3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: generation-spin .8s linear infinite;
}
.activity-spinner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }
.app[data-theme="light"] .activity-spinner { border-color: rgba(5, 150, 105, .25); border-top-color: #059669; }

.generation-queue-panel {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 160;
  width: 340px;
  max-height: min(420px, 70vh);
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-head);
  backdrop-filter: var(--panel-blur);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  animation: apertureFocusIn .22s cubic-bezier(.16, 1, .3, 1) forwards;
}
.generation-queue-panel[hidden] { display: none; }
.generation-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 9px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-bright);
  font: 600 9px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.generation-queue-head small { color: var(--ink-dim); font-size: 8px; letter-spacing: .1em; }
.generation-queue-list { overflow-y: auto; padding-top: 4px; }

/* Activity rows: a preview, the name, and a status only when something needs attention. */
.activity-section {
  margin: 0;
  padding: 10px 9px 4px;
  color: var(--ink-dim);
  font: 600 8px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.activity-row.is-hint .activity-thumb { color: var(--ink-dim); }
.activity-row.is-hint .activity-name { color: var(--ink-dim); font-weight: 500; }
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-bright);
  text-align: left;
}
button.activity-row { cursor: pointer; }
button.activity-row:hover,
button.activity-row:focus-visible { background: var(--accent-bg); }
.activity-thumb {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--accent);
  background: rgba(255, 255, 255, .03);
}
.activity-thumb .icon { width: 15px; height: 15px; }
.activity-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Still being made: the type icon breathes over a slow shimmer. */
.activity-thumb.is-running { background: linear-gradient(105deg, rgba(16, 185, 129, .06) 30%, rgba(52, 211, 153, .22) 50%, rgba(16, 185, 129, .06) 70%) 0 0 / 260% 100%; animation: generationBusyScan 2.2s linear infinite; }
.activity-thumb.is-running .icon { animation: activityBreathe 1.6s ease-in-out infinite; }
@keyframes activityBreathe { 50% { opacity: .35; transform: scale(.88); } }
.activity-thumb.is-failed { color: #ff8f8f; opacity: .7; }
/* 3D stills are transparent: show the whole model on a soft backdrop, outlined to suit the theme. */
.activity-thumb[data-kind="model3d"] img { object-fit: contain; padding: 2px; filter: drop-shadow(0 0 3px rgba(52, 211, 153, .35)); }
.activity-thumb[data-kind="model3d"]:has(img) { background: radial-gradient(ellipse at 50% 45%, rgba(23, 88, 73, .45), transparent 75%), #0c1715; }
.app[data-theme="light"] .activity-thumb[data-kind="model3d"] img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); }
.app[data-theme="light"] .activity-thumb[data-kind="model3d"]:has(img) { background: radial-gradient(ellipse at 50% 45%, rgba(16, 185, 129, .14), transparent 75%), #eef6f2; }
.activity-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 600 10px/1.3 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font: 700 8.5px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.is-failed .activity-state { color: #ff8f8f; }
.is-failed .activity-name { color: var(--ink-dim); }
.activity-new {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.activity-open {
  flex: none;
  color: var(--accent);
  font: 700 8.5px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: none;
}
/* On hover, Open takes the place of the new dot at the end of the row. */
button.activity-row:hover .activity-open,
button.activity-row:focus-visible .activity-open { display: inline; }
button.activity-row:hover .activity-new,
button.activity-row:focus-visible .activity-new { display: none; }
.activity-cancel {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.activity-cancel:hover { border-color: #ff8f8f; color: #ff8f8f; }
.activity-cancel .icon { width: 11px; height: 11px; }
.activity-cancel[hidden] { display: none; }
/* Show earlier: under the list its label starts where the names start (8px row padding + 36px tile + 10px gap,
   less the button's own 9px padding and 1px border); in a hint row it is the row's action. */
.activity-earlier-row { padding: 2px 8px 6px 44px; }
.activity-earlier {
  flex: none;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font: 700 8.5px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.activity-earlier-row .activity-earlier { border-color: transparent; }
.activity-earlier:hover { background: var(--accent-bg); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .activity-thumb.is-running, .activity-thumb.is-running .icon { animation: none; } }

.generation-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
}
.generation-queue-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.generation-queue-copy strong {
  overflow: hidden;
  color: var(--ink-bright);
  font: 600 10px/1.3 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-queue-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--ink-dim);
  font: 500 8.5px/1.3 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-failed .generation-queue-copy small { color: #ff8f8f; }
.generation-queue-pulse {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: generationQueuePulse 1.4s ease-in-out infinite;
}
@keyframes generationQueuePulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .generation-queue-pulse { animation: none; } }

.generation-queue-action {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #021b10;
  font: 700 9px/1 var(--font-mono);
  cursor: pointer;
}
.generation-queue-action:hover { filter: brightness(1.1); }
.generation-queue-action.is-quiet { border-color: var(--line); background: transparent; color: var(--ink-dim); }
.generation-queue-action.is-quiet:hover { border-color: #ff8f8f; color: #ff8f8f; filter: none; }
.generation-queue-action[hidden] { display: none; }

.generation-notice {
  position: fixed;
  left: 10px;
  bottom: 40px;
  z-index: 170;
  width: 340px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--line-bright);
  background: var(--panel-head);
  backdrop-filter: var(--panel-blur);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 24px var(--accent-glow);
  animation: apertureFocusIn .22s cubic-bezier(.16, 1, .3, 1) forwards;
}
.generation-notice[hidden] { display: none; }
.generation-notice.is-failed { border-color: rgba(255, 143, 143, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.generation-notice-close {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.generation-notice-close:hover { color: var(--ink-bright); border-color: var(--accent); }
.generation-notice-close .icon { width: 12px; height: 12px; }

.app[data-theme="light"] .generation-queue-panel,
.app[data-theme="light"] .generation-notice { box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.app[data-theme="light"] .generation-queue-count,
.app[data-theme="light"] .generation-queue-action:not(.is-quiet) { color: #ffffff; }

/* Busy cards: work still running, shown where it will land. It cannot open until it is ready. */
[data-generation-busy] { cursor: progress; }
[data-generation-busy]:hover { transform: none; }
.generation-busy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(2, 7, 4, .15), rgba(2, 7, 4, .62));
}
.generation-busy-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(52, 211, 153, .2) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: generationBusyScan 2.2s linear infinite;
}
@keyframes generationBusyScan { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.generation-busy-status,
.generation-busy-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.generation-busy-status {
  position: relative;
  padding: 5px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  background: rgba(2, 7, 4, .78);
}
.generation-busy-status > span,
.generation-busy-row-status > span { overflow: hidden; text-overflow: ellipsis; }
.generation-busy-cancel {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  background: rgba(2, 7, 4, .78);
  color: var(--ink-bright);
  font: 700 8.5px/1 var(--font-mono);
  cursor: pointer;
}
.generation-busy-cancel:hover { border-color: #ff8f8f; color: #ff8f8f; }
.generation-busy-cancel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .generation-busy-scan { animation: none; } }
.app[data-theme="light"] .generation-busy { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .55)); }
.app[data-theme="light"] .generation-busy-status,
.app[data-theme="light"] .generation-busy-cancel { background: rgba(255, 255, 255, .9); }
.app[data-theme="light"] .generation-busy-status,
.app[data-theme="light"] .generation-busy-row-status { color: #047857; }
/* Artwork for a busy card with nothing to show yet (an image still being made): a slow latent glow. */
.generation-busy-art {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 32%, rgba(16, 185, 129, .42), transparent 46%),
    radial-gradient(circle at 70% 68%, rgba(6, 182, 212, .34), transparent 44%),
    radial-gradient(circle at 62% 24%, rgba(167, 139, 250, .2), transparent 38%),
    #07110c;
  filter: blur(10px);
  animation: generationBusyArt 7s ease-in-out infinite alternate;
}
.workspace-track-thumb-tight:has(> .generation-busy-art) { position: relative; overflow: hidden; }
@keyframes generationBusyArt { to { transform: translate(6%, -5%) rotate(18deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .generation-busy-art { animation: none; } }
.app[data-theme="light"] .generation-busy-art { background-color: #e6f4ec; }