/* Shared capture controls reuse the existing support attachment and submit flow. */
@layer wuim-workspace-mobile {
:is(#adminSupport,#supportView) .support-media-tools{display:flex!important;gap:3px!important;flex-direction:row!important;align-items:center!important;flex-wrap:wrap!important;grid-column:1/-1!important;min-width:0!important}
:is(#adminSupport,#supportView) :is(.support-media-tools,.support-media-actions) button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:32px!important;min-height:32px!important;padding:6px!important;border:0!important;border-radius:5px!important;background:transparent!important;box-shadow:none!important;color:inherit!important;font:400 12px/1.4 Inter,system-ui,sans-serif!important;cursor:pointer!important}
:is(#adminSupport,#supportView) :is(.support-media-tools,.support-media-actions) button:hover{background:#8882!important}
:is(#adminSupport,#supportView) :is(.support-media-tools,.support-media-actions) button:disabled{opacity:.4!important;cursor:default!important}
:is(#adminSupport,#supportView) .support-media-tools svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;stroke-linecap:round!important;stroke-linejoin:round!important}
:is(#adminSupport,#supportView) .support-media-panel{grid-column:1/-1!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:10px!important;margin:4px!important;min-width:0!important;border:1px solid #8883!important;border-radius:6px!important;color:inherit!important;font:400 12px/1.5 Inter,system-ui,sans-serif!important}
:is(#adminSupport,#supportView) .support-media-panel[hidden],:is(#adminSupport,#supportView) .support-media-panel [hidden]{display:none!important}
:is(#adminSupport,#supportView) .support-media-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
:is(#adminSupport,#supportView) .support-media-preview{min-width:0!important}
:is(#adminSupport,#supportView) :is(.support-media-preview,.support-media-attachment) :is(audio,video,img){display:block!important;width:100%!important;max-width:360px!important;max-height:140px!important;object-fit:contain!important}
:is(#adminSupport,#supportView) .support-media-attachment{min-width:0!important;width:280px!important;max-width:100%!important;overflow:hidden!important}
:is(#adminSupport,#supportView) .support-media-attachment a{display:block!important;font-size:12px!important;overflow-wrap:anywhere!important}
#adminShell #adminSupport.as-notion .as-compose-tools{flex-wrap:wrap!important}
#adminShell #adminSupport.as-notion #adminSupportForm{max-height:55dvh!important;overflow-y:auto!important;flex-shrink:0!important}
:is(#adminSupport,#supportView) .support-media-draft :is(.as-file,.usd-file,.uhm-file){display:none!important}
#supportView .support-compose{max-height:55dvh!important;overflow-y:auto!important}
#adminShell #adminSupport.as-notion #adminSupportForm.support-media-draft .as-file,#supportView #userSupportForm.support-media-draft :is(.usd-file,.uhm-file){display:none!important}
:is(#adminSupport,#supportView) .support-media-tools>button{width:36px!important;max-width:40px!important;flex:0 0 36px!important}
:is(#adminSupport,#supportView) .support-media-attachment a{color:inherit!important;opacity:.75!important;text-decoration:none!important;margin-top:4px!important}
@media(max-width:700px){:is(#adminSupport,#supportView) .support-media-tools button{min-width:40px!important;min-height:40px!important}}
}
@layer wuim-user-help-mobile {
 #supportView #userSupportForm.support-media-draft :is(.usd-file,.uhm-file){display:none!important}
 #supportView #userSupportForm .support-media-actions>button{width:auto!important;flex:0 0 auto!important;background:transparent!important}
}
/* One flat row for the preview and the same player inside received messages. */
@layer wuim-workspace-mobile, wuim-user-help-mobile;
@layer wuim-workspace-mobile {
 :is(#adminSupport,#supportView) .support-media-panel{border:0!important;border-radius:0!important;padding:8px 10px!important;margin:0!important;background:transparent!important;box-shadow:none!important}
 :is(#adminSupport,#supportView) .support-media-panel.is-ready{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6px!important}
 :is(#adminSupport,#supportView) .support-media-panel.is-ready>[role=status]{display:none!important}
 :is(#adminSupport,#supportView) .support-media-panel.is-ready .support-media-actions{margin:0!important}
 :is(#adminSupport,#supportView) .support-audio-player{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;width:100%!important;max-width:320px!important;min-height:36px!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;color:inherit!important}
 :is(#adminSupport,#supportView) .support-audio-player audio{display:none!important}
 :is(#adminSupport,#supportView) .support-audio-toggle{display:grid!important;place-items:center!important;flex:0 0 32px!important;width:32px!important;min-width:32px!important;min-height:32px!important;height:32px!important;margin:0!important;padding:6px!important;border:0!important;box-shadow:none!important;border-radius:4px!important;background:transparent!important;color:inherit!important}
 :is(#adminSupport,#supportView) .support-audio-toggle:hover{background:#8882!important}
 :is(#adminSupport,#supportView) .support-audio-toggle svg{width:18px!important;height:18px!important;stroke:currentColor!important;fill:none!important;stroke-width:2!important}
 :is(#adminSupport,#supportView) .support-audio-player input[type=range]{appearance:none!important;-webkit-appearance:none!important;flex:1 1 60px!important;min-width:30px!important;width:0!important;height:3px!important;min-height:3px!important;padding:0!important;margin:12px 0!important;border:0!important;border-radius:2px!important;box-shadow:none!important;background:linear-gradient(to right,currentColor var(--audio-progress,0%),#8884 var(--audio-progress,0%))!important;color:inherit!important;cursor:pointer!important}
 :is(#adminSupport,#supportView) .support-audio-player input::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;width:9px!important;height:9px!important;border:0!important;border-radius:50%!important;background:currentColor!important}
 :is(#adminSupport,#supportView) .support-audio-player input::-moz-range-thumb{width:9px!important;height:9px!important;border:0!important;border-radius:50%!important;background:currentColor!important}
 :is(#adminSupport,#supportView) .support-audio-time{flex:none!important;white-space:nowrap!important;font:400 11px/1.5 Inter,system-ui,sans-serif!important;font-variant-numeric:tabular-nums!important;opacity:.7!important}
 :is(#adminSupport,#supportView) .support-audio-player :is(button,input):focus-visible{outline:2px solid currentColor!important;outline-offset:3px!important}
}
@layer wuim-user-help-mobile {
 #supportView #userSupportForm .support-media-panel{border:0!important;background:transparent!important;box-shadow:none!important;font-weight:400!important}
 #supportView .support-audio-player input[type=range]{height:3px!important;min-height:3px!important;padding:0!important;border:0!important;box-shadow:none!important}
}
@layer wuim-workspace-mobile {
 :is(#adminSupport,#supportView) .support-video-player{width:100%!important;max-width:360px!important;min-width:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
 :is(#adminSupport,#supportView) .support-video-player video{display:block!important;width:100%!important;height:auto!important;max-height:180px!important;object-fit:contain!important;border:0!important;border-radius:4px!important;background:#111!important}
 :is(#adminSupport,#supportView) .support-video-player .support-audio-player{max-width:none!important}
 body dialog.support-recording-dialog[open]{position:fixed!important;inset:0!important;margin:auto!important;height:max-content!important;max-height:calc(100dvh - 32px)!important;width:min(400px,calc(100vw - 32px))!important;box-sizing:border-box!important;padding:22px!important;border:1px solid #e6e6e4!important;border-radius:9px!important;background:#fff!important;color:#37352f!important;box-shadow:0 14px 50px #0002!important;font:400 14px/1.5 Inter,system-ui,sans-serif!important}
 .support-recording-dialog::backdrop{background:#0005!important}
 .support-recording-dialog h2{margin:0 0 10px!important;font:500 17px/1.4 Inter,system-ui,sans-serif!important;color:inherit!important}
 .support-recording-dialog p{margin:0 0 18px!important;color:inherit!important;opacity:.7!important;font:400 13px/1.5 Inter,system-ui,sans-serif!important}
 .support-recording-dialog>div{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
 .support-recording-dialog button{width:auto!important;min-height:36px!important;padding:7px 10px!important;background:#f3f3f1!important;color:inherit!important;border:0!important;border-radius:5px!important;box-shadow:none!important;font:400 13px/1.5 Inter,system-ui,sans-serif!important;cursor:pointer!important}
 .support-recording-dialog button:hover{background:#e8e8e5!important}
 html[data-theme=dark] body dialog.support-recording-dialog[open]{position:fixed!important;inset:0!important;margin:auto!important;height:max-content!important;max-height:calc(100dvh - 32px)!important;background:#202020!important;color:#e3e3e0!important;border-color:#444!important}
 html[data-theme=dark] body dialog.support-recording-dialog[open] button{background:#303030!important}
 .support-recording-dialog button:focus-visible{outline:2px solid currentColor!important;outline-offset:2px!important}
}

@layer wuim-workspace-mobile {
 :is(#adminSupport,#supportView) .support-video-player:fullscreen{display:flex!important;flex-direction:column!important;justify-content:center!important;max-width:none!important;width:100%!important;height:100%!important;padding:16px!important;box-sizing:border-box!important;background:#181818!important;color:#eee!important}
 :is(#adminSupport,#supportView) .support-video-player:fullscreen video{flex:1!important;min-height:0!important;max-width:none!important;max-height:calc(100dvh - 80px)!important}
}

@layer wuim-workspace-mobile {
 body dialog.support-video-dialog[open]{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:16px!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;background:#181818!important;color:#eee!important;display:flex!important;flex-direction:column!important;gap:12px!important}
 body dialog.support-video-dialog>button{align-self:flex-end!important;min-height:44px!important;padding:8px 14px!important;background:#333!important;color:#fff!important;border:0!important;border-radius:5px!important}
 :is(#adminSupport,#supportView) .support-video-dialog .support-video-player{flex:1!important;min-height:0!important;max-width:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
 :is(#adminSupport,#supportView) .support-video-dialog .support-video-player video{min-height:0!important;max-width:none!important;max-height:calc(100dvh - 150px)!important}
}

@layer wuim-workspace-mobile {
 :is(#adminSupport,#supportView) .support-delete-message{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;color:inherit!important;border:0!important;box-shadow:none!important;border-radius:4px!important;width:28px!important;min-width:28px!important;height:28px!important;padding:0!important;margin:0 0 0 5px!important;cursor:pointer!important;font:400 18px/1 system-ui!important;opacity:.65}
 :is(#adminSupport,#supportView) .support-delete-message:hover{background:#8882!important;opacity:1}
}

/* Received videos stay compact until explicitly opened. */
@layer wuim-flat-platform{
 html body :is(#adminSupport,#supportView) .support-media-attachment>video,
 html body :is(#adminSupport,#supportView) .support-video-player.support-video-collapsed{display:none!important}
 html body :is(#adminSupport,#supportView) .support-video-launch{display:inline-flex!important;align-items:center!important;gap:9px!important;width:auto!important;min-height:36px!important;padding:6px 10px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:inherit!important;font:400 13px/1.4 Inter,system-ui,sans-serif!important;box-shadow:none!important;cursor:pointer}
 html body :is(#adminSupport,#supportView) .support-video-launch:hover{background:#8881!important}
 html body :is(#adminSupport,#supportView) .support-video-launch:focus-visible{outline:2px solid currentColor!important;outline-offset:2px}
 html body .support-video-launch svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important}
 body dialog.support-video-dialog::backdrop{background:#0008}
}
@media(min-width:761px){@layer wuim-workspace-mobile{
 body dialog.support-video-dialog[open]{inset:0!important;width:min(960px,calc(100vw - 64px))!important;height:min(720px,calc(100dvh - 64px))!important;max-height:calc(100dvh - 64px)!important;margin:auto!important;border:1px solid #444!important;border-radius:10px!important;padding:16px!important}
}}

@media(min-width:761px){@layer wuim-workspace-mobile{
 :is(#adminSupport,#supportView) .support-video-dialog .support-video-player video{max-height:min(560px,calc(100dvh - 180px))!important}
}}
