/* Wavelength Studio chrome over the vendored AudioMass editor */
#wl-bar { position: fixed; top: 4px; right: 208px; z-index: 9000; display: flex; gap: 8px; align-items: center; }
#wl-back { color: var(--wl-dim, #9ca4af); font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; padding: 5px 8px; border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: var(--wl-field, #181d24); cursor: pointer; }
#wl-back:hover { color: var(--wl-ink, #f4f5f2); border-color: var(--wl-card-bd, #687281); }
#wl-panel { position: fixed; inset: 0; z-index: 9500; background: rgba(9, 11, 14, .72); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
#wl-panel-card { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--wl-card, #2b313b); border: 1px solid var(--wl-card-bd, #596270); box-shadow: 0 28px 80px rgba(0, 0, 0, .5); font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--wl-ink, #f4f5f2); }
#wl-panel-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--wl-line, #444c58); }
#wl-panel-head strong { font-size: 15px; letter-spacing: -.02em; }
#wl-quota { margin-left: auto; color: var(--wl-dim, #9ca4af); font: 10px ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .07em; }
#wl-panel-close { border: 0; background: none; color: var(--wl-dim, #9ca4af); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
#wl-panel-close:hover { color: var(--wl-ink, #f4f5f2); }
#wl-panel-tabs { display: flex; border-bottom: 1px solid var(--wl-line, #444c58); padding: 0 18px; }
.wl-tab { border: 0; background: none; color: var(--wl-dim, #9ca4af); padding: 10px 14px; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
.wl-tab.active { color: var(--wl-ink, #f4f5f2); border-color: var(--ac, #d3a64a); }
#wl-panel-list { overflow-y: auto; padding: 4px 18px; }
.wl-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #353c47; }
.wl-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 600; color: var(--wl-ink, #f4f5f2); background: none; border: 0; padding: 0; font-size: 13px; }
button.wl-row-name { cursor: pointer; }
button.wl-row-name:hover { color: var(--ac, #d3a64a); }
.wl-row-meta { color: var(--wl-dim, #9ca4af); font: 10px ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.wl-row-actions { display: flex; gap: 6px; }
.wl-row-actions button { border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: transparent; color: var(--wl-dim, #9ca4af); font-size: 11px; padding: 4px 8px; cursor: pointer; }
.wl-row-actions button:hover { color: var(--wl-ink, #f4f5f2); border-color: var(--wl-card-bd, #687281); }
.wl-empty { color: var(--wl-dim, #9ca4af); padding: 18px 0; }
#wl-panel-hint { color: var(--wl-dim, #9ca4af); font-size: 11px; padding: 10px 18px 14px; margin: 0; border-top: 1px solid var(--wl-line, #444c58); }
#wl-transcribe { border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: var(--wl-field, #181d24); color: var(--wl-ink, #f4f5f2); font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 5px 12px; cursor: pointer; }
#wl-transcribe:hover { border-color: var(--wl-card-bd, #687281); }
#wl-tx { position: fixed; inset: 0; z-index: 9600; background: rgba(9, 11, 14, .72); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; }
#wl-tx-card { width: min(520px, 100%); max-height: 80vh; overflow-y: auto; background: var(--wl-card, #2b313b); border: 1px solid var(--wl-card-bd, #596270); box-shadow: 0 28px 80px rgba(0, 0, 0, .5); font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--wl-ink, #f4f5f2); }
#wl-tx-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--wl-line, #444c58); }
#wl-tx-head strong { font-size: 15px; letter-spacing: -.02em; }
#wl-tx-close { border: 0; background: none; color: var(--wl-dim, #9ca4af); font-size: 20px; line-height: 1; cursor: pointer; }
#wl-tx-close:hover { color: var(--wl-ink, #f4f5f2); }
#wl-tx-body { padding: 8px 18px 4px; }
.wl-tx-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #353c47; }
.wl-tx-row label { display: flex; align-items: center; gap: 6px; color: #d8dce2; }
.wl-tx-label { width: 84px; flex: none; color: var(--wl-dim, #9ca4af); font: 700 10px/1.4 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; }
.wl-tx-label em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6f7885; }
.wl-tx-engines-row { align-items: flex-start; }
#wl-tx-engines { flex: 1; display: grid; gap: 6px; }
.wl-tx-engine { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: #20252c; padding: 7px 10px; cursor: grab; }
.wl-tx-engine:active { cursor: grabbing; }
.wl-tx-grip { color: #6f7885; }
.wl-tx-name { flex: 1; }
#wl-tx-lang { border: 1px solid #58616e; border-radius: 2px; background: #20252c; color: var(--wl-ink, #f4f5f2); padding: 0 8px; font: inherit; height: 34px; line-height: 34px; box-sizing: border-box; min-width: 190px; }
.wl-tx-note { color: var(--wl-dim, #9ca4af); font-size: 11px; line-height: 1.5; margin: 10px 0 4px; }
.wl-tx-error { padding: 9px 11px; border-left: 3px solid #df756d; background: rgba(223, 117, 109, .1); color: #ffc1bc; font-size: 12px; }
.wl-tx-result { padding: 9px 11px; border-left: 3px solid var(--ac, #d3a64a); background: color-mix(in srgb, var(--ac, #d3a64a) 10%, transparent); font-size: 12px; }
.wl-tx-result a { color: #f0c96c; }
#wl-tx-foot { display: flex; justify-content: flex-end; padding: 12px 18px 16px; }
#wl-tx-start { border: 1px solid var(--wl-ac-edge, #e2bb62); border-radius: 2px; background: var(--ac, #d3a64a); color: var(--ac-ink, #171a1f); font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 8px 18px; cursor: pointer; }
#wl-tx-start:hover:not(:disabled) { background: #e0b858; }
#wl-tx-start:disabled { opacity: .75; cursor: default; }
#wl-input { position: fixed; inset: 0; z-index: 9700; background: rgba(9, 11, 14, .72); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
#wl-input-card { width: min(460px, 100%); max-height: 74vh; overflow-y: auto; background: var(--wl-card, #2b313b); border: 1px solid var(--wl-card-bd, #596270); box-shadow: 0 28px 80px rgba(0, 0, 0, .5); font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--wl-ink, #f4f5f2); }
#wl-input-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--wl-line, #444c58); }
#wl-input-head strong { font-size: 15px; letter-spacing: -.02em; }
#wl-input-close { border: 0; background: none; color: var(--wl-dim, #9ca4af); font-size: 20px; line-height: 1; cursor: pointer; }
#wl-input-close:hover { color: var(--wl-ink, #f4f5f2); }
#wl-input-list { padding: 8px 18px; display: grid; gap: 4px; }
.wl-input-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: #20252c; padding: 8px 11px; cursor: pointer; color: #d8dce2; }
.wl-input-row:hover { border-color: var(--wl-card-bd, #687281); }
#wl-input .wl-tx-note { padding: 0 18px; }
#wl-input-foot { display: flex; justify-content: flex-end; padding: 12px 18px 16px; }
#wl-input-done { border: 1px solid var(--wl-ac-edge, #e2bb62); border-radius: 2px; background: var(--ac, #d3a64a); color: var(--ac-ink, #171a1f); font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 8px 18px; cursor: pointer; }
/* drop-hint sentence on one line, buttons centered on a second line */
.pk_tmpMsg.pk_ed_empty { width: 560px !important; margin-left: -280px !important; font-size: 15px !important; line-height: 24px !important; white-space: normal !important; }
.wl-empty-actions { display: flex; justify-content: center; gap: 12px; margin: 12px 0 0; }
.wl-empty-btn { height: 28px !important; min-width: 150px; padding: 0 14px; font-size: 12px; }
.wl-empty-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 30px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--ac, #d3a64a) 60%, transparent); border-radius: 15px; color: var(--ac, #d3a64a); font-size: .8em; letter-spacing: .01em; white-space: nowrap; cursor: pointer; text-decoration: none; }
.wl-empty-btn:hover { border-color: var(--ac, #d3a64a); background: color-mix(in srgb, var(--ac, #d3a64a) 10%, transparent); }
#wl-whoami-wrap { display: flex; align-items: center; gap: 9px; padding: 10px 14px; margin-bottom: 4px; border-bottom: 1px solid #3a414c; cursor: default; text-align: left; }
.wl-whoami-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--ac, #d3a64a), #b0863a); color: var(--ac-ink, #171a1f); font: 700 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; align-items: center; justify-content: center; }
.wl-whoami-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wl-whoami-label { color: #6f7885; font: 700 9px ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.wl-whoami-email { color: #e8ebef; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
#wl-levels { border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: var(--wl-field, #181d24); color: var(--wl-ink, #f4f5f2); font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#wl-levels svg { fill: currentColor; }
#wl-levels:hover { color: var(--wl-ink, #f4f5f2); border-color: var(--wl-card-bd, #687281); }
#wl-levels.wl-on { color: var(--ac, #d3a64a); border-color: var(--ac, #d3a64a); }
#wl-meter { position: fixed; right: 18px; bottom: 78px; z-index: 8800; display: flex; gap: 8px; align-items: stretch; background: #171b21; border: 1px solid var(--wl-line, #444c58); border-radius: 4px; padding: 10px 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
#wl-meter-scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; color: #6f7885; font: 9px ui-monospace, Menlo, monospace; padding: 1px 0 15px; }
#wl-meter-canvas { display: block; }
.pk_mt_env { position: absolute; left: 0; top: 0; z-index: 6; cursor: crosshair; }
.pk_env_unity { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 3; }
.pk_env_line { fill: none; stroke: var(--ac, #d3a64a); stroke-width: 2; }
.pk_env_pt { fill: #f0c96c; stroke: var(--ac-ink, #171a1f); stroke-width: 1.5; cursor: grab; }
.pk_env_pt:hover { fill: #fff; }
#wl-automation { border: 1px solid var(--wl-line, #444c58); border-radius: 2px; background: var(--wl-field, #181d24); color: var(--wl-ink, #f4f5f2); font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#wl-automation svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
#wl-automation:hover { border-color: var(--wl-card-bd, #687281); }
#wl-automation.wl-on { color: var(--ac, #d3a64a); border-color: var(--ac, #d3a64a); }
/* record modal: all action buttons share one line and always fit the modal */
.pk_rec_btns { display: flex !important; gap: 8px; flex-wrap: nowrap; align-items: center; }
.pk_rec_btns .pk_tbsa { flex: 1 1 0; min-width: 0; margin: 0 !important; float: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 9px 6px !important; font-size: 11px !important; }
[hidden] { display: none !important; }
#wl-save { border: 1px solid var(--wl-ac-edge, #e2bb62); border-radius: 2px; background: var(--ac, #d3a64a); color: var(--ac-ink, #171a1f); font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 5px 12px; cursor: pointer; }
#wl-save:hover:not(:disabled) { background: #e0b858; }
#wl-save:disabled { opacity: .75; cursor: default; }
/* ---------- Phone / narrow screens ----------
   The bridge JS docks #wl-bar INTO the menu bar (.pk_hdr) as its own
   full-width row here, so nothing overlaps the File/Edit/… menus and the
   editor's header-height measurement makes room for it automatically. */
@media (max-width: 900px) {
	.pk_hdr { height: auto !important; min-height: 26px; flex-wrap: wrap; }
	/* tighter menu spacing so File…Help + MultiTrack share one row on phones */
	.pk_hdr .pk_btn { margin: 2px 3px 0; min-width: 0; }
	.pk_hdr .pk_btn > button { padding: 2px 7px; }
	.pk_mt_topbtn { margin-right: 2px; }
	.pk_hdr #wl-bar { position: static; width: 100%; order: 99; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 5px 6px 7px; }
	/* empty-state hint + its two buttons always fit the screen */
	.pk_tmpMsg.pk_ed_empty { width: min(560px, calc(100vw - 110px)) !important; margin-left: 0 !important; transform: translateX(-50%); font-size: 14px !important; }
	.wl-empty-actions { gap: 8px; }
	.wl-empty-btn { min-width: 0; flex: 1 1 0; max-width: 170px; }
	/* library rows: name on its own line, actions wrap under it */
	.wl-row { flex-wrap: wrap; }
	.wl-row-name { flex: 1 1 100%; }
	/* level meter never wider or taller than the screen */
	#wl-meter { right: 12px; max-width: calc(100vw - 24px); }
	/* toolbar wraps to rows instead of scrolling off-screen (multitrack
	   keeps its own scrolling layout — its rail is genuinely horizontal) */
	.pk_app:not(.pk_mt_on) .pk_tbc { overflow: visible; }
	.pk_app:not(.pk_mt_on) .pk_tb { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; min-width: 0; height: auto; white-space: normal; padding-right: 8px; }
	.pk_app:not(.pk_mt_on) .pk_tb .pk_ctns,
	.pk_app:not(.pk_mt_on) .pk_tb .pk_transport { display: inline-flex; align-items: center; }
}

/* elegant in-app dialogs (WLAlert / WLConfirm / WLPrompt) — never native */
.wl-modal { position: fixed; inset: 0; z-index: 9900; background: rgba(9, 11, 14, .72); display: flex; align-items: flex-start; justify-content: center; padding: 18vh 16px 16px; }
.wl-modal-card { width: min(400px, 100%); background: var(--wl-card, #2b313b); border: 1px solid var(--wl-card-bd, #596270); box-shadow: 0 28px 80px rgba(0, 0, 0, .5); font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--wl-ink, #f4f5f2); }
.wl-modal-msg { margin: 0; padding: 18px 18px 4px; line-height: 1.45; }
.wl-modal-input { display: block; width: calc(100% - 36px); margin: 10px 18px 0; padding: 7px 9px; border: 1px solid var(--wl-card-bd, #596270); border-radius: 2px; background: var(--wl-field, #181d24); color: var(--wl-ink, #f4f5f2); font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wl-modal-input:focus { outline: none; border-color: var(--ac, #d3a64a); }
.wl-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
.wl-modal-btn { border: 1px solid var(--wl-card-bd, #596270); border-radius: 2px; background: transparent; color: var(--wl-ink, #f4f5f2); font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 6px 14px; cursor: pointer; }
.wl-modal-btn:hover { border-color: var(--wl-card-bd, #687281); }
.wl-modal-btn.wl-modal-primary { border-color: var(--wl-ac-edge, #e2bb62); background: var(--ac, #d3a64a); color: var(--ac-ink, #171a1f); }
.wl-modal-btn.wl-modal-primary:hover { background: var(--ac, #ddb25c); }