/* Montiliya — polish pass (batch 5): targeted fixes on top of css/styles.css with its own tokens only. No new colour, no new radius, no new type size.
   Sidebar states, the credits chip, Download, the project menu, the player's touch targets, the brief's counter and length note, the start screen. */

/* ---- the credits chip never wraps (a long balance or the Arabic unit stays on one line) */
.credits { white-space: nowrap; flex: none; }
.credits .n, .credits .unit { white-space: nowrap; }

/* ---- the sidebar: a state badge before the line, long titles cut with an ellipsis (the full title is the row's tooltip) */
.proj-sub { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.proj-sub-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-sub-t:empty { display: none; }
.proj-st { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 var(--s2); border-radius: var(--r-full); border: 1px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; line-height: 1; color: var(--ink-2); }
.proj-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.proj-st.st-draft { border-style: dashed; color: var(--ink-3); }
.proj-st.st-draft::before { background: transparent; border: 1px solid currentColor; width: 5px; height: 5px; }
.proj-st.st-processing { color: var(--ink); border-color: var(--ink-3); }
.proj-st.st-processing::before { animation: st-pulse 1.4s var(--ease-in-out) infinite alternate; }
.proj-st.st-complete { color: var(--ink); }
.proj-st.st-complete::before { background: var(--ink); }
.proj-st.st-failed { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.proj-st.st-stopped { color: var(--ink-3); }
.proj-st.st-stopped::before { border-radius: 1px; }
@keyframes st-pulse { from { opacity: 0.35; } }
.proj.attention .proj-sub::before { content: none; }               /* the Failed badge says it now (the old red dot repeated it) */
.side-empty { line-height: 1.5; overflow-wrap: anywhere; }

/* ---- Download in the top bar: an icon with its word; the project menu's destructive row looks destructive */
#export { gap: var(--s2); white-space: nowrap; }
#export .icon { width: 18px; height: 18px; }
#export[aria-busy='true'], .ver-dl[aria-busy='true'] { cursor: progress; opacity: 0.7; }
.opt.danger, .opt.danger .glyph { color: var(--danger); }
.opt.danger:hover, .opt.danger:focus-visible { background: var(--danger-bg); }
@media (max-width: 640px) { #export span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #export { min-width: 44px; padding-inline: var(--s3); } }

/* ---- the player: every control reaches 44 px on a touch screen; the speed button keeps one width */
.speed { min-width: 48px; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  .controls .icon-btn, .ver-dl { width: 44px; height: 44px; }
  .scrub { height: 32px; }
  .proj { min-height: 64px; }
}

/* ---- the brief: the counter under the words, the length's meaning and price */
.cr-count { justify-self: end; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cr-count.near { color: var(--ink); font-weight: 600; }
.cr-len-d { margin-top: calc(var(--s2) * -1); }

/* ---- the project's rename question */
.ad-ask .field { margin-top: var(--s5); }
.ad-ask .field input { font: inherit; font-size: var(--fs-lg); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--s3) var(--s4); min-height: 48px; }
.ad-ask .field input:focus { outline: none; border-color: var(--ink); }

/* ---- starting: a quiet line while the session is read (no blank screen, no fake layout) */
.boot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-sm); }
.boot[hidden] { display: none; }
.boot span { display: inline-flex; align-items: center; gap: var(--s3); }
.boot span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink-2); animation: boot-spin 0.9s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot span::before { animation: none; } .proj-st.st-processing::before { animation: none; } }

/* ---- a phone shows the chat or the video: each finished version in the chat has "Watch Version N" there (on a wide screen the player is already beside the chat) */
.watch-row { display: none; }
@media (max-width: 900px) { .watch-row { display: flex; } .watch-row .btn { min-height: 44px; } }

/* ---- titles of another script line up with the list (an Arabic title in the English sidebar starts where the others start) */
html[dir='ltr'] .proj-title, html[dir='ltr'] .proj-sub-t { text-align: left; }
html[dir='rtl'] .proj-title, html[dir='rtl'] .proj-sub-t { text-align: right; }

/* ---- step 2: a style that cannot be chosen now never looks choosable (dashed edge, a quieter picture and name, its reason tag stays sharp) */
.tpl-card[data-available='false'] { border-style: dashed; }
.tpl-card[data-available='false'] .tpl-media > :not(.tpl-chips) { opacity: 0.5; }
.tpl-card[data-available='false'] .tpl-desc { color: var(--ink-3); }
.tpl-card[data-available='false'] .tpl-face:focus-visible { outline-style: dashed; }

/* ---- touch screens: every control of the top bar and the sidebar reaches 44 px (the pointer is a finger) */
@media (pointer: coarse) {
  .topbar .icon-btn, .side-top .icon-btn, .side-foot .icon-btn, .menu-btn { width: 44px; height: 44px; }
  .credits, #export { min-height: 44px; }
}

/* ---- the step the engine works on: on a narrow chat its "Step n of 12 · time" goes under the sentence instead of squeezing it into a narrow column */
@media (max-width: 640px) {
  .act.live { flex-wrap: wrap; }
  .act.live > span:not(.step) { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .act.live .step { flex-basis: 100%; margin-inline-start: calc(18px + var(--s3)); padding-inline-start: 0; }
}

/* ---- the change-request box (the composer in a project): compact. One line of text that grows with the words, "Earlier footage" right above the controls,
   and the controls on one row: add, voice, style, length, format and Send. The style chip gives up its width first (its name cut with an ellipsis); the row wraps only when
   nothing else can shrink. Same colours, radii and borders as before. */
.composer.compact textarea { min-height: 48px; padding: var(--s4) var(--s5) var(--s1); }
.composer.compact .shelf { padding: var(--s1) var(--s5) 0; gap: var(--s2); }
.composer.compact .shelf-earlier { line-height: 1.4; }
#chat-slot { container-type: inline-size; }                          /* the project's message box measures its own room (a container cannot style itself, so the slot is the container) */
.composer.compact .bar { flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
.composer.compact .bar .icon-btn, .composer.compact .send { width: 36px; height: 36px; }
.composer.compact .bar .pill { min-height: 36px; padding-inline: var(--s3); gap: var(--s1); }
.composer.compact .follow-style { flex: 1 1 64px; min-width: 0; max-width: max-content; }
.composer.compact .follow-style .tpl-pill { width: 100%; min-width: 0; }
.composer.compact .follow-style .tpl-pill .v { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer.compact .bar-end { margin-inline-start: auto; gap: var(--s2); }
/* a narrow box keeps the words that matter: the style's name without its "Style" label, no chevrons */
@container (max-width: 560px) {
  .composer.compact .tpl-pill .k, .composer.compact .pill .chev { display: none; }
  .composer.compact .bar { gap: var(--s1); }
  .composer.compact .bar .pill { padding-inline: var(--s2) var(--s3); }
}
@container (max-width: 380px) { .composer.compact #dur-pill .dur-ic { display: none; } }       /* the smallest phones: "45 s" says it without the clock, and the row stays one */
@media (max-width: 640px) { .composer.compact .bar { padding: var(--s2) var(--s2) var(--s2); } .composer.compact .shelf { padding-inline: var(--s4); } .composer.compact textarea { padding-inline: var(--s4); } }
@media (pointer: coarse) { .composer.compact .bar .icon-btn, .composer.compact .send { width: 40px; height: 40px; } .composer.compact .bar .pill { min-height: 40px; } }
/* the compact controls look 36 px but answer a 44 px touch: an invisible hit area of 4 px around each (the same device as the Chat / Preview toggle) */
.composer.compact .bar .icon-btn, .composer.compact .bar .pill, .composer.compact .send { position: relative; }
.composer.compact .bar .icon-btn::after, .composer.compact .bar .pill::after, .composer.compact .send::after { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; }