/* Compact, touch-friendly controls shared by image, video and lip sync. */
.owner-generation-cost{margin:6px 0 10px;padding:0 20px;font:inherit;font-size:11px;line-height:1.5;color:var(--text-muted,#7d8296);overflow-wrap:anywhere}
#studio-app #batch-choice{position:relative;width:auto;flex:none}
#studio-app #batch-choice summary{gap:7px;min-height:42px;white-space:nowrap}
#studio-app #batch-choice[open] summary .ui-icon:first-child{transform:none}
#studio-app .batch-choice .choice-options{position:absolute;bottom:calc(100% + 8px);right:0;min-width:120px;background:var(--cf-panel);box-shadow:var(--cf-clay-shadow);z-index:50}
#studio-app .batch-choice .choice-options button[aria-pressed="true"]{color:var(--cf-accent);background:var(--cf-hover)}
.batch-statuses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-bottom:12px}
.batch-statuses .gallery-status{margin:0;min-width:0}
#studio-app .batch-statuses:has(> :nth-child(2)) .gallery-status.job-progress{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px;padding:14px}
#studio-app .batch-statuses:has(> :nth-child(2)) .generation-preview{width:min(100%,var(--gen-width,46dvh));align-self:center}
#studio-app .batch-statuses:has(> :nth-child(2)) .generation-progress-copy{width:100%;min-width:0;max-width:none}
#studio-app .batch-statuses:has(> :nth-child(2)) .job-progress strong{font-size:18px;overflow-wrap:anywhere}
#studio-app .batch-statuses:has(> :nth-child(2)) .job-progress p{margin:8px 0 14px}
.cf-media-context{position:fixed;z-index:1000;min-width:205px;padding:6px;border:1px solid var(--cf-line-strong);border-radius:13px;background:var(--cf-panel);color:var(--cf-text);box-shadow:0 18px 46px rgba(0,0,0,.36);animation:cf-context-enter .16s ease-out;font-family:var(--cf-font-body,"Kadrora Sans",sans-serif)}
.cf-media-context>strong{display:block;padding:7px 10px 8px;border-bottom:1px solid var(--cf-line);color:var(--cf-muted);font-size:11px;letter-spacing:.02em}
.cf-media-context button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--cf-text);font-size:12px;text-align:left;cursor:pointer}
.cf-media-context button:hover,.cf-media-context button:focus-visible{outline:0;background:var(--cf-hover);color:var(--cf-accent)}
.cf-media-context .ui-icon{width:16px;height:16px;flex:none}
@keyframes cf-context-enter{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.cf-media-context{animation:none}}
#studio-app .choice-native[hidden] { display: none !important; }
#studio-app .setting-choice { align-items: flex-start; }
#studio-app .choice-control { width: min(210px, 52%); min-width: 0; flex: none; }
#studio-app .choice-menu { width: 100%; }
#studio-app .choice-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--cf-line-strong);
  border-radius: 11px;
  color: var(--cf-text);
  background: var(--cf-input);
  box-shadow: var(--cf-clay-inset);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}
#studio-app .choice-menu summary::-webkit-details-marker { display: none; }
#studio-app .choice-menu summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#studio-app .choice-menu summary .ui-icon { width: 16px; height: 16px; flex: none; color: var(--cf-muted); transition: transform .18s ease; }
#studio-app .choice-menu[open] summary { border-color: var(--cf-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-accent) 18%, transparent); }
#studio-app .choice-menu[open] summary .ui-icon { transform: rotate(180deg); }
#studio-app .choice-menu summary:focus-visible,
#studio-app .choice-options button:focus-visible,
#studio-app .media-action:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
#studio-app .choice-options {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid var(--cf-line-strong);
  border-radius: 13px;
  background: var(--cf-panel-2);
  box-shadow: var(--cf-clay-shadow-sm);
}
#studio-app .choice-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--cf-text);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
#studio-app .choice-options button:hover,
#studio-app .choice-options button[aria-pressed="true"] { background: color-mix(in srgb, var(--cf-accent) 13%, var(--cf-panel-2)); }
#studio-app .choice-options button[aria-pressed="true"] { color: var(--cf-accent); font-weight: 750; }
#studio-app .choice-options button .ui-icon { width: 16px; height: 16px; opacity: 0; }
#studio-app .choice-options button[aria-pressed="true"] .ui-icon { opacity: 1; }

/* Results keep their media unobstructed; controls live in a separate footer. */
#studio-app .history-card { container-type: inline-size; }
#studio-app .history-card.history-video { display: flex; flex-direction: column; aspect-ratio: auto; color: var(--cf-text); background: var(--cf-panel); }
#studio-app .history-card.history-video::after { display: none; }
#studio-app .history-card.history-video .history-media { height: clamp(210px, 42dvh, 500px); flex: none; }
#studio-app .history-card.history-video .history-media video { object-fit: contain; }
#studio-app .history-card.history-video .history-card-meta { position: static; padding: 10px; }
#studio-app .history-card.history-video .history-card-meta p { color: var(--cf-text); }
#studio-app .history-card-meta nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 1px 4px; }
#studio-app .history-card-meta nav .media-action {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  border: 1px solid var(--cf-line-strong);
  border-radius: 11px;
  color: var(--cf-text);
  background: var(--cf-panel-2);
  box-shadow: inset 0 1px 0 var(--cf-clay-highlight);
  backdrop-filter: none;
  font-size: 12px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#studio-app .history-card-meta nav .media-action:hover { color: var(--cf-text); background: color-mix(in srgb, var(--cf-accent) 14%, var(--cf-panel-2)); border-color: var(--cf-accent); transform: translateY(-1px); }
#studio-app .history-card-meta nav .media-action-primary { width: auto; max-width: min(205px, 48%); padding: 0 11px !important; border-color: color-mix(in srgb, var(--cf-accent) 40%, var(--cf-line)); color: var(--cf-accent); }
#studio-app .history-card-meta nav .media-action-primary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#studio-app .history-card-meta nav .media-action .ui-icon { display: block; width: 17px; height: 17px; flex: none; }
#studio-app .history-card-meta nav [data-delete-asset] { margin-left: auto; }
#studio-app .history-card-meta nav [data-delete-asset]:hover { color: #e97070; border-color: #e97070; background: color-mix(in srgb, #e97070 10%, var(--cf-panel-2)); }
#studio-app .history-load-more {
  display: block;
  width: fit-content;
  min-height: 42px;
  margin: 16px auto 24px;
  padding: 0 18px;
  border: 1px solid var(--cf-line-strong);
  border-radius: 12px;
  color: var(--cf-text);
  background: var(--cf-panel-2);
  cursor: pointer;
  font-weight: 700;
}
#studio-app .history-load-more:hover { border-color: var(--cf-accent); }
#studio-app .history-load-more:disabled { opacity: .6; cursor: wait; }

@container (max-width: 530px) {
  #studio-app .history-card-meta nav .media-action-primary { width: 38px; padding: 0 !important; }
  #studio-app .history-card-meta nav .media-action-primary span { display: none; }
}

@media (max-width: 680px) {
  #studio-app .setting-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #studio-app .choice-control { width: 100%; }
  #studio-app .history-card.history-video .history-media { height: min(45dvh, 340px); }
  #studio-app .history-card-meta nav .media-action { width: 42px; height: 42px; min-width: 42px; }
  #studio-app .history-card-meta nav .media-action-primary { width: 42px; padding: 0 !important; }
  #studio-app .history-card-meta nav .media-action-primary span { display: none; }
}

#studio-app .flo-director {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cf-accent) 35%, var(--cf-line));
  border-radius: 13px;
  color: var(--cf-text);
  background: color-mix(in srgb, var(--cf-accent) 7%, var(--cf-panel-2));
  font-family: var(--cf-font-body, inherit);
  animation: flo-director-in .22s ease-out both;
}
#studio-app .flo-director[hidden] { display: none !important; }
#studio-app .flo-director > .ui-icon { width: 18px; height: 18px; flex: none; color: var(--cf-accent); }
#studio-app .flo-director-copy { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; font-size: 12px; line-height: 1.45; }
#studio-app .flo-director-copy strong { flex: none; color: var(--cf-accent); font-size: 11px; }
#studio-app .flo-director-copy span { color: var(--cf-text); }
#studio-app .flo-director button { flex: none; min-height: 30px; border-radius: 9px; font: inherit; cursor: pointer; }
#studio-app .flo-director-apply { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--cf-accent) 50%, var(--cf-line)); color: var(--cf-accent); background: var(--cf-panel); font-size: 11px !important; font-weight: 700 !important; }
#studio-app .flo-director-apply:hover { background: var(--cf-hover); }
#studio-app .flo-director-dismiss { display: grid; place-items: center; width: 30px; border: 0; color: var(--cf-muted); background: transparent; }
#studio-app .flo-director-dismiss .ui-icon { width: 14px; height: 14px; }
#studio-app .flo-director button:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
@keyframes flo-director-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) {
  #studio-app .flo-director { align-items: flex-start; gap: 8px; padding: 9px; }
  #studio-app .flo-director-copy { font-size: 11px; }
  #studio-app .flo-director-copy strong { width: 100%; }
  #studio-app .flo-director-apply { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { #studio-app .flo-director { animation: none; } }
.reference-persistence{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;color:var(--cf-muted);font-size:11px}.reference-persistence span{display:flex;align-items:center;gap:5px}.reference-persistence .ui-icon{width:13px;height:13px}.reference-persistence button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--cf-accent);font:inherit;font-weight:700;cursor:pointer}
.reference-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px;padding:0 0 9px;border-bottom:1px solid var(--cf-line);color:var(--cf-muted);font-size:11px}
.reference-toolbar>span{display:flex;align-items:center;gap:6px;min-width:0}.reference-toolbar .ui-icon{width:14px;height:14px;flex:none}
.reference-clear-all{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:34px;padding:6px 10px;border:1px solid var(--cf-line-strong);border-radius:10px;background:var(--cf-panel-2);color:var(--cf-text);font:inherit;font-weight:750;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.reference-clear-all:hover{background:var(--cf-hover);border-color:var(--cf-accent);transform:translateY(-1px)}.reference-clear-all:focus-visible{outline:2px solid var(--cf-accent);outline-offset:2px}.reference-clear-all b{display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:6px;background:color-mix(in srgb,var(--cf-accent) 14%,var(--cf-panel));color:var(--cf-accent);font-size:10px}
@media(max-width:680px){.reference-toolbar>span{display:none}.reference-clear-all{margin-left:auto}}
.reference-paused-note{margin:8px 0;color:var(--cf-muted);font-size:11px;line-height:1.5}
.attachment-chip.reference-paused{border-style:dashed;color:var(--cf-muted)}