:root { --bg:#0f0f10; --card:#1a1b1e; --txt:#fff; --muted:#a0a0a0; --pri:#2b87ff; --tr:#b0c4ff; --user:#2a2b31; --sysAdm:#1e325a; }
*{box-sizing:border-box}
html,body{height:100vh;margin:0;background:var(--bg);color:var(--txt);overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}
.card{background:var(--card);border-radius:12px;padding:12px}
.muted{color:var(--muted);font-size:12px}
.top{padding:8px;display:flex;gap:8px;align-items:center}
.title{font-weight:700;font-size:16px}

/* Filters */
.filters{padding:8px}
.chips{display:flex;gap:8px;overflow-x:auto}
.chip{flex:0 0 auto;background:#2a2b31;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:600}
.chip.active{background:#3a3b44;outline:1px solid #4a4b56}

/* Work */
.work{position:relative;flex:1 1 auto;padding:8px;overflow:hidden}
.panel{position:absolute;inset:8px;display:none}
.panel.active{display:flex;flex-direction:column}
.list{flex:1 1 auto;overflow:auto;border:1px solid #2a2b31;border-radius:10px;padding:8px}
.item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;cursor:pointer}
.item:hover{background:#222328}
.badge-new{background:#ff3b30;color:#fff;font-size:11px;padding:2px 6px;border-radius:999px;margin-left:6px}

/* Chat */
.history{flex:1 1 auto;overflow:auto;border:1px solid #2a2b31;border-radius:10px;padding:8px}
.bubble{display:inline-block;max-width:80%;padding:8px 10px;border-radius:10px;background:#2a2b31;margin:6px 0}
.media{margin-top:6px;position:relative}
.media img,.media video{max-width:100%;border-radius:10px;display:block;background:#000;height:auto}
.badge{display:inline-block;font-size:11px;color:#ccc;margin-top:4px}
.footer{color:#cfcfcf;font-size:11px;margin-top:6px;opacity:.85}

/* Fullscreen video */
.media-video .fs-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:8px;padding:6px 8px;cursor:pointer;font-weight:700}
.overlay-fullscreen{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center}
.overlay-fullscreen .ov-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.overlay-fullscreen .ov-video{width:100%;height:auto;max-height:100%;background:#000}
.overlay-fullscreen .ov-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:36px;height:36px;font-size:18px;line-height:36px;text-align:center;cursor:pointer}

/* Composer */
.composer{display:flex;gap:8px;margin-top:8px;align-items:center}
.composer input[type="text"]{flex:1 1 auto;padding:10px;border-radius:20px;border:1px solid #33343a;background:#121316;color:#fff}
.icon-btn{width:40px;height:40px;border-radius:50%;background:#2a2b31;border:1px solid #33343a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.file-note{font-size:12px;color:#cfcfcf}