/* A self-contained replica of the desktop Audio tab, with no native audio access. */
.lp-audio-dialog {
  --ad-text: #e5eaf4;
  --ad-muted: #8d9bb3;
  --ad-line: #20242d;
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100svh - 40px);
  margin: auto;
  padding: 0;
  color: var(--ad-text);
  background: #0c0f13;
  border: 1px solid #363c4b;
  border-radius: 8px;
  box-shadow: 0 30px 100px #000a;
  overflow: hidden;
  text-align: left;
}
.lp-audio-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.ad-window { display: flex; flex-direction: column; height: min(890px, calc(100svh - 44px)); font-family: "Segoe UI", sans-serif; font-size: 12px; line-height: 1.5; }
.ad-titlebar { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding-left: 12px; background: #080b0f; border-bottom: 1px solid var(--ad-line); }
.ad-title { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.ad-title img { width: 17px; height: 17px; }
.ad-preview-tag { margin-left: 8px; font: 8px Consolas, monospace; color: #a5aac0; }
.ad-window-actions { display: flex; align-self: stretch; }
.ad-window-actions button { display: grid; place-items: center; width: 42px; border: 0; background: transparent; color: #8d9bb3; cursor: pointer; }
.ad-window-actions button:hover { color: #fff; background: #252a35; }
.ad-window-actions button:last-child:hover { background: #be3143; }
.ad-window-actions svg { width: 14px; height: 14px; }
.ad-header { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--ad-line); background: #0a0d11; }
.ad-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.ad-brand img { width: 32px; height: 32px; }
.ad-brand strong { display: block; font-size: 14px; font-weight: 650; }
.ad-brand span { font-size: 10px; color: var(--ad-muted); }
.ad-navigation { display: flex; gap: 2px; padding: 4px; background: #11151c; border: 1px solid var(--ad-line); border-radius: 7px; }
.ad-navigation > span { padding: 6px 9px; color: #8893a7; font-size: 10px; white-space: nowrap; }
.ad-navigation .ad-tab-active { border-radius: 4px; background: #222442; color: #c9ceff; font-weight: 650; }
.ad-header-actions { display: flex; gap: 7px; }
.ad-small-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 6px 10px; border: 1px solid #2e3441; border-radius: 5px; color: #c7d1e5; background: #151922; font-size: 10px; line-height: 1.4; cursor: pointer; }
.ad-small-button:hover { border-color: #65678c; background: #222637; }
.ad-small-button svg { width: 14px; height: 14px; }
.ad-body { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #353b49 #0c0f13; }
.ad-notice { display: flex; gap: 9px; align-items: center; padding: 10px 22px; font-size: 11px; background: #141729; color: #acb5dc; border-bottom: 1px solid #252a40; }
.ad-notice svg { width: 14px; height: 14px; }
.ad-pinned { padding: 15px 22px; border-bottom: 1px solid var(--ad-line); }
.ad-section-label { display: block; color: #8798b2; font-size: 9px; }
.ad-pinned > div { display: flex; gap: 8px; margin-top: 9px; }
.ad-master { padding: 17px 22px 10px; border-bottom: 1px solid var(--ad-line); }
.ad-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 6px; }
.ad-row:hover { background: #171b22; }
.ad-master > .ad-row { padding-inline: 0; }
.ad-master > .ad-row:hover { background: transparent; }
.ad-app-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; color: var(--ad-color); border: 1px solid color-mix(in srgb, var(--ad-color) 28%, transparent); background: color-mix(in srgb, var(--ad-color) 10%, transparent); border-radius: 7px; }
.ad-brand-logo { width: 22px; height: 22px; background: var(--ad-color); mask: center / contain no-repeat; }
.ad-row[data-control="discord"] .ad-brand-logo { mask-image: url("../assets/demo-discord.svg"); }
.ad-row[data-control="spotify"] .ad-brand-logo { mask-image: url("../assets/demo-spotify.svg"); }
.ad-row[data-control="chrome"] .ad-brand-logo { mask-image: url("../assets/demo-chrome.svg"); }
.ad-row[data-control="steam"] .ad-brand-logo { mask-image: url("../assets/demo-steam.svg"); }
.ad-row[data-control="obs"] .ad-brand-logo { mask-image: url("../assets/demo-obs.svg"); }
.ad-app-icon svg { width: 20px; height: 20px; }
.ad-state-dot { position: absolute; bottom: -2px; right: -2px; width: 8px; height: 8px; border: 2px solid #0c0f13; border-radius: 50%; background: #55c99a; }
.ad-row.is-silent .ad-state-dot { background: #6b7180; }
.ad-row.is-muted .ad-state-dot { background: #f27688; }
.ad-slider-wrap { flex: 1; min-width: 0; }
.ad-slider-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ad-slider-top label { font-size: 13px; font-weight: 550; color: #dfe7f7; }
.ad-slider-top output { min-width: 42px; text-align: right; color: #a8b8d2; font: 11px Consolas, monospace; }
.ad-device-row output { color: #b9beff; background: #232640; padding: 3px 7px; border-radius: 5px; text-align: center; }
.ad-process { margin-top: 2px; font-size: 10px; color: #8694aa; }
.ad-row input { appearance: none; display: block; width: 100%; height: 22px; padding: 0; margin: 4px 0 0; background: transparent; cursor: pointer; }
.ad-row input::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--ad-color) var(--fill), #252d3c var(--fill)); }
.ad-row input::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid #0c0f13; border-radius: 50%; background: var(--ad-color); box-shadow: 0 0 0 2px #7b82a34d; }
.ad-row input::-moz-range-track { height: 4px; border-radius: 3px; background: #252d3c; }
.ad-row input::-moz-range-progress { height: 4px; background: var(--ad-color); }
.ad-row input::-moz-range-thumb { width: 10px; height: 10px; background: var(--ad-color); border: 2px solid #0c0f13; border-radius: 50%; }
.ad-mute { width: 36px; height: 34px; flex: 0 0 auto; border: 1px solid #303743; border-radius: 6px; background: #171c25; color: #becbe1; font-size: 10px; font-weight: 650; cursor: pointer; }
.ad-mute:hover { border-color: #68768f; }
.ad-mute[aria-pressed="true"] { color: #ffb3c0; border-color: #6f3c49; background: #3b202a; }
.ad-outputs { padding-block: 7px; }
.ad-outputs summary { display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 30px; cursor: pointer; color: #a2aec3; font-size: 10px; list-style: none; }
.ad-outputs summary::-webkit-details-marker { display: none; }
.ad-outputs summary svg { width: 13px; height: 13px; }
.ad-outputs[open] summary svg { transform: rotate(90deg); }
.ad-device-count { color: #b9bef3; padding: 0 5px; border-radius: 3px; background: #24273d; }
.ad-output-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ad-output-list .ad-slider-top label { font-size: 11px; }
.ad-applications { padding: 15px 10px 18px; }
.ad-apps-heading { display: flex; justify-content: space-between; padding: 0 12px 8px; font-size: 9px; color: var(--ad-muted); }
.ad-app-row { min-height: 79px; }
.ad-meter { display: flex; gap: 2px; align-items: flex-end; width: 23px; height: 18px; flex: 0 0 auto; transform-origin: bottom; transform: scaleY(var(--ad-level)); }
.ad-meter span { width: 3px; height: 40%; background: var(--ad-color); }
.ad-meter span:nth-child(2) { height: 75%; }
.ad-meter span:nth-child(3) { height: 100%; }
.ad-meter span:nth-child(4) { height: 65%; }
.ad-meter span:nth-child(5) { height: 90%; }
.ad-animate .ad-meter span { animation: ad-meter 900ms ease-in-out infinite alternate; transform-origin: bottom; }
.ad-animate .ad-meter span:nth-child(even) { animation-delay: -500ms; }
.ad-animate .ad-meter span:nth-child(3) { animation-delay: -800ms; }
@keyframes ad-meter { to { transform: scaleY(.55); } }
.ad-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 18px; min-height: 34px; padding: 8px 16px; border-top: 1px solid var(--ad-line); background: #0a0d11; color: #97a6bf; font-size: 9px; }
.ad-session-status { display: inline-flex; align-items: center; gap: 7px; }
.ad-footer-dot { width: 5px; height: 5px; background: #55c99a; border-radius: 50%; }
.ad-feedback { min-width: 0; color: #bdc4ed; }
.ad-preview-caption { color: #97a6bf; }
@media (max-width: 1000px) {
  .ad-header { gap: 12px; padding: 14px 18px; }
  .ad-navigation { order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 600px) {
  .lp-audio-dialog { width: calc(100% - 16px); max-height: calc(100svh - 16px); }
  .ad-window { height: calc(100svh - 20px); }
  .ad-preview-tag { font-size: 7px; margin-left: 3px; }
  .ad-header { padding: 12px; gap: 10px; }
  .ad-notice { padding: 10px 12px; font-size: 10px; }
  .ad-pinned { padding: 12px; }
  .ad-master { padding: 14px 12px 8px; }
  .ad-applications { padding-inline: 2px; }
  .ad-row { gap: 10px; }
  .ad-app-icon { width: 30px; height: 30px; }
  .ad-brand-logo { width: 19px; height: 19px; }
  .ad-slider-top label { font-size: 12px; }
  .ad-meter { display: none; }
  .ad-output-list { grid-template-columns: 1fr; gap: 0; }
  .ad-footer { padding: 8px 12px; }
  .ad-preview-caption { display: none; }
  .ad-header-actions .ad-small-button { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-animate .ad-meter span { animation: none; }
}