.ui-category-done { display:none; }
html[data-ui-appearance="system"] .ui-category-done { display:inline-flex; }
/* Media panels follow mobile DiscoverScreen and PostCommentsSheet. */
html[data-ui-product="media"][data-ui-appearance="system"] #flt-cats-row {
    padding:4px 0; border:0; border-radius:0; background:none; box-shadow:none;
}
html[data-ui-appearance="system"] #flt-cats { gap:8px; padding:4px 0; }
html[data-ui-appearance="system"] #flt-cats .fchip {
    min-height:36px; padding:7px 14px; border:1px solid transparent;
    color:var(--ui-text); font:400 13px/20px var(--font-sans),sans-serif;
    letter-spacing:0; box-shadow:none; transform:none;
}
html[data-ui-skin="glass"] #flt-cats .fchip { background:#302b37; border-radius:20px; }
html[data-ui-skin="material"] #flt-cats .fchip { background:#403348; border-radius:8px; }
html[data-ui-skin="glass"] #flt-cats .fchip.on { background:#5e405e; }
html[data-ui-skin="material"] #flt-cats .fchip.on { background:#60416e; }
html[data-ui-appearance="system"] #flt-cats .fchip.on { border-color:var(--ui-accent); font-weight:500; }
html[data-ui-appearance="system"] #flt-cats .fchip:hover { filter:brightness(1.13); }
.media-comments-overlay {
    position:fixed; inset:0; z-index:9100; display:flex; align-items:flex-end;
    justify-content:center; background:#0006; overscroll-behavior:contain;
}
/* An account gate opened by Send must remain above the comment draft. */
body:has(#mp-comments-ov) #media-modal { z-index:9200; }
.media-comments-sheet {
    display:flex; flex-direction:column; position:relative; width:100%; max-width:600px;
    height:72%; max-height:90%; min-height:0; padding:0 16px max(12px,env(safe-area-inset-bottom));
    overflow:hidden; border:1px solid transparent; border-bottom:none; border-radius:28px 28px 0 0;
    color:#f6f1fa; background:#18141e; font:400 15px/1.45 var(--font-sans),sans-serif;
    box-shadow:0 -12px 48px #0003;
}
html[data-ui-skin="glass"] .media-comments-sheet {
    background:rgba(14,16,20,.22); border-color:#ffffff33;
    -webkit-backdrop-filter:blur(24px) saturate(1.35); backdrop-filter:blur(24px) saturate(1.35);
    box-shadow:inset 0 1px 0 #ffffff24,0 -12px 48px #0003;
}
html[data-ui-skin="material"] .media-comments-sheet {
    background:rgba(20,20,24,.72); border-color:#ffffff33; border-radius:20px 20px 0 0;
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); color:var(--ui-text);
}
.media-comments-handle { width:36px; height:4px; flex:none; border-radius:2px; background:#ffffff55; margin:10px auto 8px; }
.media-comments-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; flex:none; }
.media-comments-header h2 { flex:1; font:700 17px/1.3 var(--font-sans),sans-serif; margin:0; }
.media-comments-count { font-size:13px; font-weight:400; color:#ffffff99; margin-left:6px; }
.media-comments-close,.media-comments-send {
    flex:none; display:grid; place-items:center; width:44px; height:44px; padding:10px;
    border:1px solid var(--ui-border,#ffffff26); border-radius:50%;
    background:var(--ui-control,#ffffff12); color:var(--ui-text,#fff); font:inherit; cursor:pointer;
}
.media-comments-close svg,.media-comments-send svg { width:22px; height:22px; }
.media-comments-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 0; }
.media-comment { display:flex; align-items:flex-start; gap:10px; padding:12px 0; }
.media-comment-avatar { display:block; width:32px; height:32px; flex:0 0 32px; border-radius:50%; overflow:hidden; }
.media-comment-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.media-comment-author { color:inherit; text-decoration:none; font-size:13px; font-weight:600; }
.media-comment-body p { margin:0; font-size:14px; white-space:pre-wrap; }
.media-comment-body time { font-size:12px; color:#ffffff99; }
.media-comments-empty { text-align:center; padding:24px 0; color:#ffffff99; }
.media-comments-error { color:#ff9191; padding:6px 0; font-size:13px; }
.media-comments-retry { align-self:flex-start; color:var(--ui-accent,#edb1fa); border:none; background:none; padding:8px 0; font:inherit; cursor:pointer; }
.media-comments-composer { display:flex; flex:none; align-items:center; gap:10px; padding-top:10px; }
.media-comments-composer textarea {
    flex:1; min-width:0; min-height:44px; max-height:112px; resize:none; margin:0;
    border:1px solid var(--ui-border,#ffffff26); border-radius:22px; padding:11px 14px;
    background:var(--ui-control,#ffffff12); color:var(--ui-text,#fff); font:400 15px/20px var(--font-sans),sans-serif;
}
.media-comments-composer textarea::placeholder { color:#ffffff99; }
html[data-ui-skin="glass"] #mp-comments-ov textarea { border-radius:22px; }
html[data-ui-skin="material"] #mp-comments-ov textarea { border-radius:12px; }
html[data-ui-skin="material"] :is(.media-comments-close,.media-comments-send) { border-radius:16px; }
.media-comments-send:not(:disabled) { background:var(--ui-accent,#edb1fa); color:var(--ui-on-accent,#35213c); }
.media-comments-send:disabled { opacity:.45; cursor:default; }
.media-comments-sheet :is(button,textarea,a):focus-visible { outline:2px solid var(--ui-accent,#edb1fa); outline-offset:2px; }
@media(prefers-reduced-transparency:reduce) {
    html[data-ui-appearance="system"] .media-comments-sheet { background:#201d26; -webkit-backdrop-filter:none; backdrop-filter:none; }
}