/* Composer controls: shared dark popovers and local material mentions. */
.parameter-trigger { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:6px 7px; margin:0 -3px; border-radius:6px; font-size:11px; color:#d5d5d5; white-space:nowrap; transition:background 140ms ease; }
.parameter-trigger:hover { background:#303030; color:#f6f6f6; }
.parameter-trigger[aria-expanded="true"] { background:#353535; color:#f4f4f4; box-shadow:inset 0 0 0 1px #565656; }
.parameter-trigger:focus-visible { outline:2px solid #aabec8; outline-offset:3px; }
.parameter-trigger > .icon { width:13px; height:13px; color:#c6c6c6; }
.parameter-trigger .parameter-chevron { width:11px; height:11px; transition:transform 140ms ease; }
.parameter-trigger[aria-expanded="true"] .parameter-chevron { transform:rotate(180deg); }
.parameter-trigger .resolution { padding:0; }
.parameter-popover, .mention-popover { position:fixed; inset:auto; margin:0; padding:14px; border:1px solid #444444; border-radius:12px; background:#282828; color:#eeeeee; box-shadow:0 12px 36px #00000066; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; scrollbar-width:thin; scrollbar-color:#555555 transparent; }
#ratio-menu { width:272px; }
#duration-menu { width:306px; }
.parameter-popover-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.parameter-popover-heading h2 { font-size:12px; font-weight:550; margin:0; color:#ededed; }
.parameter-popover-heading > span { color:#aaaaaa; font-size:11px; }
.ratio-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.duration-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.parameter-option { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:7px; background:#303030; color:#bebebe; padding:8px 4px; font-size:12px; min-width:0; }
.ratio-options .parameter-option { min-height:73px; flex-direction:column; gap:8px; }
.duration-options .parameter-option { min-height:36px; font-variant-numeric:tabular-nums; }
.parameter-option > .icon { display:none; position:absolute; top:5px; right:5px; width:11px; height:11px; stroke-width:2; color:#e9f4fa; }
.parameter-option:hover { background:#3b3b3b; color:#eeeeee; }
.parameter-option[aria-selected="true"] { background:#383d40; border-color:#829198; color:#f3f6f8; }
.parameter-option[aria-selected="true"] > .icon { display:block; }
.duration-options .parameter-option[aria-selected="true"] > .icon { width:8px; height:8px; top:2px; right:2px; }
.parameter-option:focus-visible { outline:2px solid #b7c8d0; outline-offset:2px; }
.ratio-preview { display:flex; justify-content:center; align-items:center; width:34px; height:28px; }
.ratio-preview i { display:block; border:1.4px solid currentColor; border-radius:2px; }
.reference-figure { display:block; width:100%; height:100%; padding:0; margin:0; position:relative; border-radius:inherit; overflow:hidden; }
.reference-figure:hover img { filter:brightness(1.12); }
.reference-figure:focus-visible { outline:2px solid #d7e7ef; outline-offset:-2px; }
.reference-number { position:absolute; bottom:2px; left:2px; padding:1px 3px; background:#000000b0; color:white; font-size:11px; border-radius:3px; }
.audio-mention { text-align:left; padding:0; flex:1; }
.audio-mention:hover { color:white; }
.mention-popover { width:328px; padding:8px; overflow:hidden; }
.mention-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 7px 10px; font-size:11px; color:#c8c8c8; }
.mention-heading > span:last-child { color:#a3a3a3; font-size:11px; }
#mention-options { max-height:min(260px,45dvh); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#555555 transparent; }
#mention-options > button { display:flex; align-items:center; gap:10px; width:100%; min-height:55px; padding:7px; border-radius:7px; text-align:left; }
#mention-options > button:hover, #mention-options > button.is-active { background:#3a3a3a; }
.mention-preview { display:flex; justify-content:center; align-items:center; width:30px; height:38px; flex:0 0 30px; border-radius:4px; overflow:hidden; background:#4a4a4a; color:#d7d7d7; }
.mention-preview img { width:100%; height:100%; object-fit:cover; }
.mention-preview .icon { width:17px; height:17px; }
.mention-copy { display:block; flex:1; min-width:0; }
.mention-copy strong { display:block; font-size:12px; font-weight:500; color:#eeeeee; margin-bottom:4px; }
.mention-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; color:#aaaaaa; font-size:11px; }
.mention-token { font-size:11px; color:#d0dbe0; white-space:nowrap; }
.mention-empty { margin:0; padding:15px 8px; color:#bdbdbd; font-size:12px; line-height:1.7; }
@media(max-width:560px) {
  .parameters { gap:4px 8px; }
  .parameter-trigger { padding:7px 5px; gap:4px; min-height:34px; }
  .parameter-trigger > .icon:first-child { display:none; }
  .mention-heading > span:last-child { display:none; }
  .mention-popover { width:min(328px,calc(100vw - 24px)); }
  #duration-menu { width:min(306px,calc(100vw - 24px)); }
}
@media(prefers-reduced-motion:reduce) { .parameter-trigger, .parameter-chevron { transition:none; } }