#recorded-panel[hidden] { display:none !important; }
#recorded-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:78dvh; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; padding:20px; 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; }
#recorded-panel * { box-sizing:border-box; }
#recorded-panel .recorded-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
#recorded-panel h2 { font:600 19px/1.4 system-ui,sans-serif; margin:0; }
#recorded-panel h2 span { font-size:12px; font-weight:400; color:var(--muted,#746958); margin-left:8px; }
#recorded-panel p { margin:10px 0; }
#recorded-panel label { display:block; font-size:13px; }
#recorded-panel select { display:block; width:100%; min-height:44px; padding:6px 10px; border:1px solid var(--rule,#d6cbbb); border-radius:6px; background:var(--paper,#f7f0e4); color:inherit; font:inherit; }
#recorded-panel button { min-height:44px; 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; }
#recorded-panel button:disabled { opacity:.45; cursor:default; }
#recorded-panel button:focus-visible,#recorded-panel select:focus-visible,#recorded-panel audio:focus-visible { outline:2px solid var(--accent,#936240); outline-offset:3px; }
#recorded-panel [data-recorded-play] { background:var(--accent,#936240); color:var(--paper,#fff); border-color:transparent; }
#recorded-panel .recorded-controls { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
#recorded-panel .recorded-controls button { flex:1; padding-inline:7px; }
#recorded-panel .recorded-help { font-size:12px; color:var(--muted,#746958); line-height:1.7; }
#recorded-panel audio { display:block; width:100%; margin:16px 0 0; min-height:44px; }
@media (max-width:480px) { #recorded-panel { padding:16px; bottom:max(10px,env(safe-area-inset-bottom)); } }
#recorded-loading[hidden]{display:none!important}
#recorded-loading{position:fixed;z-index:91;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-height:75dvh;overflow:auto;padding:20px;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.7 system-ui,sans-serif}
#recorded-loading h2{font:600 18px/1.4 system-ui,sans-serif;margin:0 0 12px}#recorded-loading p{margin:12px 0}#recorded-loading button{min-height:44px;margin:4px 6px 4px 0;padding:8px 12px;background:var(--paper,#f4efe4);color:var(--ink,#30291f);border:1px solid var(--rule,#d6cbbb);border-radius:6px;font:inherit}#recorded-loading button:focus-visible{outline:2px solid var(--accent,#825a37);outline-offset:3px}#recorded-loading button:disabled{opacity:.5}