#listen-panel[hidden], #listen-panel [hidden] { display: none !important; }
#listen-panel { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); max-height: min(78dvh, 650px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; box-sizing: border-box; border: 1px solid var(--rule, #d6cbbb); border-radius: 12px; background: var(--surface, #fffaf1); color: var(--ink, #30291f); box-shadow: 0 12px 48px #0003; font: 14px/1.6 system-ui, sans-serif; }
#listen-panel * { box-sizing: border-box; }
#listen-panel .listen-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
#listen-panel h2 { font: 600 19px/1.4 system-ui, sans-serif; margin: 0; }
#listen-panel h2 span { font-size: 12px; font-weight: 400; color: var(--muted, #746958); margin-left: 8px; }
#listen-panel p { margin: 10px 0; }
#listen-panel label { display: block; font-size: 13px; }
#listen-panel select { display: block; width: 100%; min-width: 0; min-height: 42px; padding: 6px 10px; border: 1px solid var(--rule, #d6cbbb); border-radius: 6px; background: var(--paper, #f7f0e4); color: inherit; font: inherit; }
#listen-panel button { min-height: 42px; padding: 7px 10px; border: 1px solid var(--rule, #d6cbbb); border-radius: 6px; background: var(--paper, #f7f0e4); color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
#listen-panel button:disabled { opacity: .45; cursor: default; }
#listen-panel button:focus-visible, #listen-panel select:focus-visible, #listen-panel input:focus-visible, #listen-panel summary:focus-visible { outline: 2px solid var(--accent, #936240); outline-offset: 3px; }
#listen-panel [data-listen-play] { background: var(--accent, #936240); color: var(--paper, #fff); border-color: transparent; }
#listen-panel .listen-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
#listen-panel .listen-controls button { flex: 1; padding-inline: 7px; }
#listen-panel .listen-options { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 12px; }
#listen-panel .listen-help { font-size: 12px; color: var(--muted, #746958); line-height: 1.7; }
#listen-panel .listen-check { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; }
#listen-panel .listen-check input { accent-color: var(--accent, #936240); margin: 4px 0 0; flex-shrink: 0; width: 16px; height: 16px; }
#listen-panel summary { cursor: pointer; padding-block: 6px; }
.pair > p.zh.is-speaking { background: color-mix(in srgb, var(--accent, #936240) 13%, transparent); outline: 2px solid color-mix(in srgb, var(--accent, #936240) 40%, transparent); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 480px) { #listen-panel { padding: 16px; bottom: max(10px, env(safe-area-inset-bottom)); } }