/* AI Photo Prompt Generator: style preview, option chips and examples. Builds on ../studio.css. */
.ph-view { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ph-pic { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--bg-card-subtle); }
.ph-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-view figcaption { margin-top: -8px; font-size: 12.5px; color: var(--ink-muted); }
.ph-seg .st-chip { font: 700 14.5px/1.2 var(--font-body); min-height: 44px; }
.ph-wrap .st-chip { --st-c: var(--accent); --st-on: var(--on-accent); }
.ph-wrap .st-chip small { font-size: 12px; font-weight: 600; opacity: 0.75; }
.ph-wrap .st-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ph-wrap .st-chip[hidden] { display: none; }
.ph-wrap .st-field[hidden] { display: none; }
.ph-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -6px; }
.ph-ex::before { content: "Try:"; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ph-ex button { min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-line); background: var(--bg-band); color: var(--ink-secondary); font: 500 13px/1.2 var(--font-body); cursor: pointer; }
.ph-ex button:hover { border-color: var(--accent); color: var(--accent-ink); }
.ph-wrap .st-out pre { font-family: var(--font-mono); font-size: 14px; }
/* Simple / Cinematic switch (Cinematic mode itself is styled by ../optics.css, loaded when it opens) */
.cine-switch { display: inline-grid; grid-auto-flow: column; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 14px; background: var(--bg-card-subtle); border: 1px solid var(--border-line); }
.cine-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-secondary); font: 700 14.5px/1.2 var(--font-body); cursor: pointer; }
.cine-btn small { font-weight: 500; font-size: 12.5px; opacity: 0.8; }
.cine-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--ink-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--border-line); }
.cine-note { margin: -6px 0 14px; font-size: 13px; color: var(--ink-muted); }
.ph-wrap .st-top[hidden], .ph-wrap .st-out[hidden], .cine-root[hidden], .cine-note[hidden] { display: none; }
.cine-root.is-loading { min-height: 420px; }
@media (max-width: 400px) { .cine-btn small { display: none; } }