/* Resolve Web tokens at :root before Advanced overrides inherited body tokens. */
:root { --alq-web-teal: var(--teal); --alq-web-ink: var(--ink); --alq-web-muted: var(--muted); --alq-web-line: var(--line); }
.alq { --teal: var(--alq-web-teal); --mint: var(--alq-web-teal); --ink: var(--alq-web-ink); --muted: var(--alq-web-muted); --line: var(--alq-web-line); }
.ald > .alq { grid-column: 1 / -1; margin-block: 0; }
/* Existing Studio tokens; mobile first, no new palette or font. */
.alq { min-width: 0; margin-block: 16px; font-family: var(--font); color: var(--ink); }
.alq-card { padding: 20px 24px; border: 1px solid var(--teal); border-radius: var(--radius-s); background: var(--panel); }
.alq-title { margin: 0 0 8px; color: var(--teal); font-size: 14px; font-weight: 600; line-height: 1.4; }
.alq-card b { display: block; font-size: 20px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.alq-card p, .alq-list p, .alq-nudge { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.alq-card .alq-cap { color: var(--mint); }
.alq-list { margin-top: 12px; border-radius: var(--radius-s); background: var(--panel); overflow: hidden; }
.alq-list summary { min-height: 48px; padding: 14px 16px; cursor: pointer; font-weight: 500; }
.alq-list ol { list-style: none; padding-inline: 16px; margin: 0; max-height: 360px; overflow-y: auto; }
.alq-list li { display: flex; align-items: start; flex-wrap: wrap; gap: 8px 16px; padding-block: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.alq-list li > div { display: grid; gap: 4px; flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.alq-kind { color: var(--mint); font-size: 12px; }
.alq-list small { color: var(--muted); font-size: 12px; }
.alq-list p { margin: 0; padding: 0 16px 16px; }
.alq a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; min-height: 48px; display: inline-flex; align-items: center; }
.alq summary:focus-visible, .alq a:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; border-radius: var(--radius-s); }
.alq-nudge { padding-inline: 4px; }

.alq-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; list-style:none; padding:16px 0 0; margin:16px 0 0; border-top:1px solid var(--line); font-size:12px; line-height:1.4; color:var(--muted); counter-reset:alq-step; }
.alq-steps li { min-width:0; display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }
.alq-steps li::before { counter-increment:alq-step; content:counter(alq-step); display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:var(--panel-2); color:var(--muted); }
.alq-steps [aria-current="step"] { color:var(--teal); font-weight:600; }
.alq-steps [aria-current="step"]::before { background:var(--teal); color:var(--bg); }
@media(max-width:900px) { .alq-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; } }
@media(max-width:600px) { .alq-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .alq-card { padding:16px; } .alq-card b { font-size:18px; } .alq-steps li { gap:6px; } }

/* Compact queue rows share the app's existing Navy/Teal tokens. */
.alq-list .alq-job { display:flex; flex-wrap:nowrap; align-items:center; gap:16px; padding-block:16px; font-size:14px; }
.alq-list .alq-job-info { display:grid; gap:4px; flex:1 1 180px; min-width:0; }
.alq-job-info b { font-weight:500; color:var(--ink); }
.alq-job-state { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
.alq-chip { background:var(--panel-2); color:var(--mint); padding:2px 8px; border-radius:var(--radius-s); }
.alq-chip[data-state="cancelled"], .alq-chip[data-state="fehler"] { color:var(--ink); }
.alq-position { color:var(--ink); }
.alq-list .alq-job-actions { display:flex; flex:0 0 auto; justify-content:flex-end; max-width:44%; }
.alq-job-actions button, .alq-job-actions a { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 14px; border:1px solid var(--muted); border-radius:var(--radius-s); background:transparent; color:var(--ink); font:inherit; font-size:14px; line-height:1.4; cursor:pointer; text-decoration:none; }
.alq-job-actions button:hover, .alq-job-actions a:hover { background:var(--panel-2); }
.alq-job-actions button:focus-visible, .alq-job-actions a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.alq-job-actions [data-alq="confirm"] { border-color:var(--teal); color:var(--teal); }
.alq-confirm { display:grid; gap:8px; font-size:12px; color:var(--ink); }
.alq-confirm > div { display:flex; gap:8px; flex-wrap:wrap; }
.alq-action-note { color:var(--muted); font-size:12px; }
@media(max-width:600px) {
  .alq-list .alq-job { display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:start; }
  .alq-list .alq-job-actions { grid-column:2; justify-content:flex-start; max-width:100%; min-width:0; }
  .alq-confirm > div { flex-direction:column; align-items:stretch; }
}

.alq-list ol { max-height:640px; }

/* Honest total on the first estimate line, remaining underneath. */
.alq-status, .alq-job-info small { white-space: pre-line; }

/* WEB-LAB-MYJOBS-THUMBNAILS-KURZUEBERSICHT-INAPP-PLAYER-T1: real result thumbnails, collapsed overview, in-app viewer.
   Only existing Web tokens (Navy/Teal, Outfit, radius 18/12); --red only for the error mark. */
.alq-viewer { --teal: var(--alq-web-teal); --mint: var(--alq-web-teal); --ink: var(--alq-web-ink); --muted: var(--alq-web-muted); --line: var(--alq-web-line); }
.alq-jobs { margin-top:12px; border-radius:var(--radius-s); background:var(--panel); overflow:hidden; }
.alq-jobs > .alq-list { margin-top:0; border-radius:0; background:transparent; }
.alq-sum-live { display:inline-flex; align-items:center; gap:6px; margin-left:12px; color:var(--teal); font-size:13px; font-weight:500; }
.alq-live-dot { position:relative; flex:none; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.alq-live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--teal); animation:alq-pulse 1.6s ease-out infinite; }
@keyframes alq-pulse { from { transform:scale(1); opacity:.6; } to { transform:scale(2.6); opacity:0; } }

.alq-thumb { position:relative; flex:none; display:grid; place-items:center; align-content:center; gap:6px; width:72px; height:72px; border-radius:var(--radius-s); background:var(--panel-2); color:var(--muted); overflow:hidden; }
.alq-thumb[data-alq] { cursor:pointer; }
.alq-thumb-media { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:var(--panel-2); transition:transform .2s ease; }
.alq-thumb[data-alq]:hover .alq-thumb-media { transform:scale(1.05); }
.alq-thumb-badge { position:absolute; right:6px; bottom:6px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--bg); color:var(--ink); }
.alq-thumb-badge svg { width:12px; height:12px; }
.alq-thumb-badge[data-b="fill"] svg { fill:currentColor; }
.alq-thumb-badge[data-b="line"] svg { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.alq-ic { display:grid; place-items:center; }
.alq-ic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.alq-thumb-note { font-size:11px; line-height:1.2; text-align:center; }
.alq-thumb[data-tile="progress"] { color:var(--teal); }
.alq-thumb[data-tile="progress"] .alq-ic { animation:alq-breathe 2s ease-in-out infinite; }
@keyframes alq-breathe { 50% { opacity:.45; } }
.alq-thumb-steps { display:flex; gap:3px; }
.alq-thumb-steps i { width:6px; height:3px; border-radius:2px; background:var(--muted); opacity:.35; }
.alq-thumb-steps i[data-on] { background:var(--teal); opacity:1; }
.alq-thumb[data-tile="failed"] { color:var(--red); }
.alq-job-name[data-alq] { cursor:pointer; }
.alq-job-name[data-alq]:hover { color:var(--teal); }
.alq .alq-open { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 14px; border:1px solid var(--teal); border-radius:var(--radius-s); background:transparent; color:var(--teal); font:inherit; font-size:14px; line-height:1.4; white-space:nowrap; cursor:pointer; }
.alq .alq-open:hover { background:var(--panel-2); }
.alq .alq-open:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.alq-list .alq-job-actions { flex-direction:column; align-items:flex-end; gap:2px; }
.alq-job-actions a.alq-orig { min-height:44px; padding:4px 2px; border:0; background:transparent; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.alq-job-actions a.alq-orig:hover { background:transparent; color:var(--ink); }

/* Collapsed list: the 1-3 jobs that matter now. Hidden while the full list is open. */
.alq-list[open] + .alq-peek { display:none; }
.alq-peek { padding:0 16px 4px; }
.alq-peek-list { list-style:none; margin:0; padding:0; }
.alq-peek-job { display:flex; align-items:center; gap:12px; padding-block:12px; border-top:1px solid var(--line); font-size:14px; line-height:1.5; }
.alq-peek .alq-thumb { width:56px; height:56px; }
.alq-peek-info { display:grid; gap:4px; flex:1 1 auto; min-width:0; }
.alq-peek-info b { font-weight:500; color:var(--ink); }
.alq-peek-line { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:12px; min-width:0; }
.alq-peek-text { min-width:0; color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.alq-peek-actions { flex:none; }

/* In-app viewer for music, 3D and as a fallback when the studio viewer hook is missing. */
.alq-viewer-lock { overflow:hidden; }
.alq-viewer { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:24px; font-family:var(--font); color:var(--ink); }
.alq-viewer-bg { position:absolute; inset:0; background:var(--bg); opacity:.88; }
.alq-viewer-card { position:relative; display:grid; gap:16px; width:min(960px,100%); max-height:100%; padding:24px; border-radius:var(--radius); background:var(--panel); overflow:auto; }
.alq-viewer-x { position:absolute; top:12px; right:12px; z-index:1; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:var(--panel-2); color:var(--ink); cursor:pointer; }
.alq-viewer-x svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.alq-viewer-media { display:grid; place-items:center; gap:16px; min-height:160px; padding-top:32px; }
.alq-viewer-media video, .alq-viewer-media img { max-width:100%; max-height:68vh; border-radius:var(--radius-s); background:var(--bg); }
.alq-viewer-media .alq-viewer-cover { width:min(320px,70vw); aspect-ratio:1; object-fit:cover; }
.alq-viewer-media audio { width:100%; }
.alq-viewer-media .alq-ic { width:120px; height:120px; border-radius:var(--radius-s); background:var(--panel-2); color:var(--teal); }
.alq-viewer-media .alq-ic svg { width:48px; height:48px; }
.alq-viewer-media model-viewer { width:100%; height:min(68vh,560px); border-radius:var(--radius-s); background:var(--panel-2); }
.alq-viewer-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.alq-viewer-meta b { font-size:16px; font-weight:600; }
.alq-viewer-meta span { color:var(--muted); font-size:13px; }
.alq-viewer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.alq-viewer-actions button { min-height:44px; padding:10px 14px; border:1px solid var(--muted); border-radius:var(--radius-s); background:transparent; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
.alq-viewer-actions button:disabled { opacity:.4; cursor:default; }
.alq-viewer-count { color:var(--muted); font-size:13px; }
.alq-viewer-orig { display:inline-flex; align-items:center; min-height:44px; margin-left:auto; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.alq-viewer button:focus-visible, .alq-viewer a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

@media (max-width:600px) {
  .alq-thumb { width:56px; height:56px; }
  .alq-sum-live { margin-left:8px; }
  .alq-list .alq-job-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  .alq-peek { padding-inline:12px; }
  .alq-peek .alq-thumb { width:48px; height:48px; }
  .alq-peek .alq-open { padding:8px 12px; }
  .alq-viewer { padding:0; }
  .alq-viewer-card { width:100%; height:100%; max-height:none; border-radius:0; padding:56px 16px 16px; align-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .alq-live-dot::after, .alq-thumb[data-tile="progress"] .alq-ic { animation:none; }
  .alq-thumb-media { transition:none; }
}

/* WEB-LAB-MYJOBS-THUMBNAILS-KURZUEBERSICHT-INAPP-PLAYER-T1b: "My jobs" is the last block of the right rail (under own
   creations and Showcase, same top edge as .sc-sec); on top, while a job runs, one slim live line. Same Web tokens. */
.alq.alq-myjobs { margin-block:26px 0; }
.alq-myjobs .alq-jobs { margin-top:0; }
@media (max-width:1100px) { .alq.alq-myjobs { order:4; } }
.alq-live { display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; margin-top:8px; padding:4px 8px 4px 16px; border-radius:var(--radius-s); background:var(--panel); font-size:13px; line-height:1.4; }
.alq-live-list { display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; flex:1 1 auto; min-width:0; list-style:none; margin:0; padding:0; }
.alq-live-job { display:flex; align-items:center; gap:8px; min-width:0; min-height:36px; }
.alq-live-ic { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:8px; background:var(--panel-2); color:var(--teal); }
.alq-live-ic svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:alq-breathe 2s ease-in-out infinite; }
.alq-live-head { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.alq-live-name { font-weight:500; color:var(--ink); }
.alq-live-text { min-width:0; color:var(--muted); overflow-wrap:anywhere; }
.alq-live-more { color:var(--muted); }
.alq .alq-live-all { flex:none; min-height:44px; margin-left:auto; padding:10px 12px; border:0; border-radius:var(--radius-s); background:transparent; color:var(--teal); font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.alq .alq-live-all:hover { background:var(--panel-2); }
.alq .alq-live-all:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
/* Mobile: icon beside two short rows (kind + state, then the live text at full width). "All jobs" sits in the first
   job's top row: 28px to see, 44px to touch (::before). */
@media (max-width:600px) {
  .alq-live { position:relative; display:block; padding:6px 12px; }
  .alq-live-list { flex-direction:column; align-items:stretch; gap:6px; }
  .alq-live-job { display:grid; grid-template-columns:28px minmax(0,1fr); gap:0 8px; align-items:center; min-height:0; }
  .alq-live-ic { grid-row:1 / span 2; }
  .alq-live-head { min-height:28px; }
  .alq-live-job:first-child .alq-live-head { padding-right:76px; }
  .alq-live-text { grid-column:2; font-size:12px; }
  .alq-live .alq-chip { padding:0 6px; font-size:11px; }
  .alq .alq-live-all { position:absolute; top:6px; right:4px; min-height:28px; margin:0; padding:4px 8px; }
  .alq .alq-live-all::before { content:""; position:absolute; inset:-8px -4px; }
}
@media (prefers-reduced-motion: reduce) { .alq-live-ic svg { animation:none; } }