/* Real capture / publication surfaces, matching RecordPostScreen's full-height
   media stage, floating native controls and bottom assembly panel. */
.mc-system-icon, .mc-system-label, .mc-category-toggle { display:none; }
html[data-ui-appearance="system"] :is(#media-modal,#ae-root) {
    --acc:var(--ui-accent);
    color:var(--ui-text);
    font-family:var(--font-sans);
}
html[data-ui-appearance="system"] .mc-original-label { display:none; }
html[data-ui-appearance="system"] .mc-system-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; }
html[data-ui-appearance="system"] .mc-system-icon :is(svg,img,.sys-icon) { width:24px; height:24px; }
html[data-ui-appearance="system"] .mc-system-label { display:inline; }
html[data-ui-appearance="system"] #media-modal { padding:24px; background:rgba(5,4,9,.84); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
html[data-ui-appearance="system"] #media-modal .mp-panel {
    max-width:520px; max-height:calc(100dvh - 48px); padding:24px;
    background:var(--ui-card); border:1px solid var(--ui-border); border-radius:28px;
    box-shadow:0 24px 80px #0006; color:var(--ui-text);
}
html[data-ui-appearance="system"] #media-modal .mp-head { gap:16px; margin:0 0 24px; }
html[data-ui-appearance="system"] #media-modal .mp-head h2 { font-size:23px; font-weight:600; letter-spacing:-.5px; margin:0; }
html[data-ui-appearance="system"] #media-modal :is(.mp-x,.ms-side),
html[data-ui-appearance="system"] #ae-root .ae-round {
    width:48px; height:48px; min-width:48px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--ui-border); background:var(--ui-control); color:var(--ui-text);
    -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur);
    box-shadow:inset 0 1px 0 #ffffff21; cursor:pointer;
}
html[data-ui-appearance="system"] #media-modal :is(.mp-btn,.fchip),
html[data-ui-appearance="system"] #ae-root :is(.ae-btn,.ae-chip,.mc-category-toggle) {
    min-height:44px; border:1px solid var(--ui-border); border-radius:var(--ui-control-radius);
    background:var(--ui-control); color:var(--ui-text); font:500 14px var(--font-sans);
    -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur); box-shadow:inset 0 1px 0 #ffffff12;
}
html[data-ui-appearance="system"] #media-modal .mp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
html[data-ui-appearance="system"] #media-modal .mp-btn.primary,
html[data-ui-appearance="system"] #ae-root .ae-btn.pri { background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; }
html[data-ui-appearance="system"] #media-modal :is(input,textarea,select),
html[data-ui-appearance="system"] #ae-root .ae-caption {
    background:var(--ui-control); border:1px solid var(--ui-border); color:var(--ui-text);
    border-radius:var(--ui-control-radius); padding:14px 16px; font:400 16px/1.45 var(--font-sans);
    -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur);
}
html[data-ui-appearance="system"] #media-modal #mp-unlock-hint { font-size:15px; line-height:1.5; margin-bottom:20px; color:var(--ui-text); opacity:.75; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-panel {
    position:relative; width:min(100%,520px); height:min(880px,calc(100dvh - 48px)); max-width:520px;
    padding:0; overflow:hidden; background:#08090d;
}
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-head {
    position:absolute; z-index:3; top:16px; left:16px; right:16px; margin:0; pointer-events:none;
}
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-head h2 { display:none; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-x { pointer-events:auto; }
html[data-ui-appearance="system"] #media-modal #mp-studio { height:100%; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-stage { position:absolute; inset:0; height:100%; aspect-ratio:auto; border-radius:0; margin:0; }
html[data-ui-appearance="system"] #media-modal #mp-studio::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#0009); pointer-events:none; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-fallback { inset:25% 24px 35%; border:0; background:none; gap:18px; font-size:15px; line-height:1.5; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes { position:absolute; bottom:154px; left:16px; right:16px; z-index:2; justify-content:center; gap:8px; margin:0; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes .fchip { display:flex; align-items:center; gap:6px; min-height:38px; padding:7px 12px; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes .mc-system-icon { width:18px; height:18px; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes .mc-system-icon>* { width:18px; height:18px; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl { position:absolute; bottom:58px; left:20px; right:20px; z-index:2; display:grid; grid-template-columns:1fr 1fr 80px 2fr; align-items:center; gap:10px; padding:0; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl>div { justify-content:flex-end; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-shutter { width:76px; height:76px; border:4px solid #fff; box-shadow:0 2px 12px #0004; background:#ffffff18; }
html[data-ui-appearance="system"] #media-modal #mp-studio #ms-hint { position:absolute; bottom:18px; left:20px; right:20px; z-index:2; margin:0; color:#ffffffa6; font-size:12px; text-align:center; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-devrow { position:absolute; top:82px; left:16px; right:16px; z-index:2; margin:0; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-devrow:has(select[style*="display: none"]) { display:none; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-rec { top:26px; min-height:30px; padding:4px 14px; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] #mp-error { position:absolute; top:135px; left:20px; right:20px; z-index:3; }
html[data-ui-appearance="system"] #media-modal .fchip.on,
html[data-ui-appearance="system"] #ae-root :is(.ae-chip.on,.ae-round.on) { color:var(--ui-text); background:var(--ui-selected); border-color:var(--ui-accent); }
html[data-ui-appearance="system"] #ae-root { overflow:hidden; background:#08090d; }
html[data-ui-appearance="system"] #ae-root .ae-surface::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#000a); pointer-events:none; }
html[data-ui-appearance="system"] #ae-root .ae-top { left:20px; right:20px; top:calc(env(safe-area-inset-top,0px) + 16px); }
html[data-ui-appearance="system"] #ae-root .ae-panel { bottom:calc(env(safe-area-inset-bottom,0px) + 24px); max-height:58%; gap:12px; }
html[data-ui-appearance="system"] #ae-root .ae-scroll { padding:0 20px; gap:12px; }
html[data-ui-appearance="system"] #ae-root .ae-caption { min-height:76px; flex-shrink:0; }
html[data-ui-appearance="system"] #ae-root .ae-caption::placeholder { color:#ffffff91; }
html[data-ui-appearance="system"] #ae-root .mc-category-toggle { display:flex; align-items:center; align-self:flex-end; justify-content:center; gap:8px; min-height:38px; padding:6px 12px; flex-shrink:0; }
html[data-ui-appearance="system"] #ae-root .mc-categories-collapsed { display:none; }
html[data-ui-appearance="system"] #ae-root .ae-chips { gap:8px; }
html[data-ui-appearance="system"] #ae-root .ae-chip { min-height:36px; padding:7px 13px; font-size:13px; }
html[data-ui-appearance="system"] #ae-root .ae-cost { flex-wrap:wrap; gap:6px 16px; font:500 13px/1.4 var(--font-sans); }
html[data-ui-appearance="system"] #ae-root .ae-hint { line-height:1.5; font-size:12px; color:#ffffffb3; }
html[data-ui-appearance="system"] #ae-root .ae-actions,
html[data-ui-appearance="system"] #ae-root .ae-prevactions { gap:12px; padding:0 20px; }
html[data-ui-appearance="system"] #ae-root .ae-btn { min-height:48px; font-size:16px; }
html[data-ui-appearance="system"] #ae-root :is(.ae-handle,.ae-vfill) { background:var(--ui-accent); }
html[data-ui-appearance="system"] #ae-root .ae-win { background:color-mix(in srgb,var(--ui-accent) 16%,transparent); border-color:var(--ui-accent); }
html[data-ui-appearance="system"] #mp-pill { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-text); -webkit-backdrop-filter:var(--ui-blur); backdrop-filter:var(--ui-blur); }
html[data-ui-skin="material"] #media-modal .mp-panel { border-radius:24px; }
html[data-ui-skin="material"] #media-modal :is(.ms-side,.mp-x),
html[data-ui-skin="material"] #ae-root .ae-round { border:0; box-shadow:none; }
@media (min-width:700px) {
    html[data-ui-appearance="system"] #ae-root .ae-surface { left:50%; width:min(100%,620px); transform:translateX(-50%); }
    html[data-ui-appearance="system"] #ae-root .ae-top { left:calc(50% - 260px); right:calc(50% - 260px); }
    html[data-ui-appearance="system"] #ae-root .ae-panel,
    html[data-ui-appearance="system"] #ae-root .ae-prevactions { width:560px; }
}
@media (max-width:699px) {
    html[data-ui-appearance="system"] #media-modal { padding:16px; }
    html[data-ui-appearance="system"] #media-modal .mp-panel { max-height:calc(100dvh - 32px); padding:20px; }
    html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] { padding:0; }
    html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-panel { width:100%; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; }
    html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl { bottom:calc(env(safe-area-inset-bottom,0px) + 56px); }
    html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes { bottom:calc(env(safe-area-inset-bottom,0px) + 152px); }
}
@media (max-width:359px) {
    html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl { left:12px; right:12px; gap:6px; grid-template-columns:42px 42px 72px 1fr; }
    html[data-ui-appearance="system"] #media-modal #mp-studio .ms-side { width:42px; height:44px; min-width:42px; }
    html[data-ui-appearance="system"] #media-modal #mp-studio .ms-shutter { width:68px; height:68px; }
    html[data-ui-appearance="system"] #ae-root .ae-scroll { padding:0 14px; }
}
html[data-ui-appearance="system"] #ae-root:not([data-media-mode="audio"]) .ae-pill { display:none; }
html[data-ui-appearance="system"] #ae-root[data-media-mode="audio"] .ae-pill { display:flex; align-items:center; gap:6px; }

/* Capture owns the viewport, including the space otherwise occupied by navigation. */
html[data-ui-appearance="system"] body.media-composing .sols-tabbar,
html[data-ui-appearance="system"] body:has(#media-modal[data-composer-step="capture"]:not([style*="display: none"])) .sols-tabbar { visibility:hidden; pointer-events:none; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] { z-index:10000; padding:0; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-panel { width:100%; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] .mp-head { width:min(calc(100% - 32px),600px); left:50%; right:auto; transform:translateX(-50%); top:calc(env(safe-area-inset-top,0px) + 16px); align-items:center; gap:12px; }
html[data-ui-appearance="system"] #media-modal[data-composer-step="capture"] #mp-close { margin-right:auto; }
html[data-ui-appearance="system"] #media-modal .mp-head #ms-flip { position:static; pointer-events:auto; }
html[data-ui-appearance="system"] #media-modal .mp-head #ms-rec { position:static; transform:none; margin:0; }
html[data-ui-appearance="system"] #media-modal:not([data-composer-step="capture"]) .mp-head :is(#ms-flip,#ms-rec) { display:none!important; }
html[data-ui-appearance="system"] #media-modal #mp-studio .mc-capture-footer { position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); left:50%; width:min(calc(100% - 40px),600px); transform:translateX(-50%); display:flex; flex-direction:column; gap:20px; z-index:2; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-devrow,
html[data-ui-appearance="system"] #media-modal #ms-mode-screen { display:none!important; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes { position:static; justify-content:center; gap:8px; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-modes .mc-system-icon { display:none; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl { position:static; display:grid; grid-template-columns:1fr 78px 1fr; gap:12px; align-items:center; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl>div { justify-self:end; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-ctl .ms-side { width:48px; min-width:48px; height:48px; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-shutter { width:78px; height:78px; border:5px solid white; padding:5px; margin:0; border-radius:50%; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-shutter-core { width:58px; height:58px; border-radius:50%; }
html[data-ui-appearance="system"] #media-modal #mp-studio .ms-shutter.rec .ms-shutter-core { width:30px; height:30px; border-radius:7px; }
html[data-ui-appearance="system"] #media-modal #mp-studio #ms-hint { position:static; margin:0; }
html[data-ui-appearance="system"] #media-modal #mp-studio #ms-hint:empty { display:none; }
#ae-root .ae-edit-error { color:#ff8585; padding:0 20px; font-size:13px; }
#ae-root [hidden] { display:none!important; }