:root { --bg:#39424e; --card:#323943; --txt:#fff; --muted:#a0a0a0; --pri:#2b87ff; --tr:#b0c4ff; --user:#2a2b31; --sysUser:#1f4f2b; --sysAdm:#1e325a; }
*{box-sizing:border-box}
html, body { height: 100vh; margin:0; background:var(--bg); color:var(--txt); overflow: hidden; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.app { display:none; flex-direction:column; height:100%; width:100%; overflow:hidden; }
.auth-ok .app { display:flex; }
.card { background:var(--card); border-radius:12px; padding:12px; }
.muted { color:#a0a0a0; font-size:12px; }

/* Filters panel */
.filters { padding: 8px; }
.chips { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.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 area (list or chat) */
.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; align-self:flex-start; }

/* Chat panel */
.chat-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.history { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; border:1px solid #2a2b31; border-radius:10px; padding:8px; }
.bubble { display:inline-block; max-width:80%; padding:8px 10px; border-radius:10px; position:relative; padding-top:28px; }
.in-gray { background: var(--user); }
.sys-green { background: var(--sysUser); }
.sys-blue  { background: var(--sysAdm); }

.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; }
.cap { margin-top:6px; white-space:pre-wrap }
.tr { color: var(--tr); margin-top:6px; white-space:pre-wrap }
.footer { color:#cfcfcf; font-size:11px; margin-top:6px; opacity:.85 }
.acts { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

/* Album container (single card) */
.album-wrap { margin-top:6px; text-align:left; }
.album-card { display:inline-block; max-width:80%; width:fit-content; }
.album-card .bubble { max-width:100%; width:100%; display:block; }
.album-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:6px;
}
.album-item {
  position:relative;
  border-radius:10px;
  overflow:hidden;
}
.album-item .bubble {
  max-width:100%;
  width:100%;
  display:block;
  padding-top:10px; /* внутри альбома gear нет */
}
.album-foot {
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.album-foot .footer { margin-top:4px; }

/* per-message gear menu (top-right) */
.msg-acts { position:absolute; top:6px; right:6px; z-index:4; }
.icon-mini.msg-gear-btn {
  width:28px; height:28px; border-radius:50%;
  background:#2a2b31; border:1px solid #33343a; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px;
}
.msg-menu {
  position:absolute; right:0; top:30px;
  background:#1a1a1e; border:1px solid #2a2b31; border-radius:8px;
  padding:6px; z-index:5; min-width:200px; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.msg-menu.up { top:auto; bottom:30px; }
.msg-menu-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.msg-menu-head span { font-size:12px; color:#cfcfcf; }
.msg-menu-close { background:#2a2b31; color:#fff; border:1px solid #33343a; border-radius:6px; width:26px; height:26px; cursor:pointer; }
.msg-menu .menu-btn {
  background:#2a2b31; color:#fff; border:1px solid #33343a;
  border-radius:8px; padding:8px 10px; text-align:left; cursor:pointer; width:100%; margin-top:6px;
}
.msg-menu .menu-btn:hover { background:#33343a; }

/* Fullscreen button overlay for video */
.media-video .fs-btn {
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,0.55); color:#fff; border:0; border-radius:8px;
  padding:6px 8px; cursor:pointer; font-weight:700; line-height:1;
}
.media-video .fs-btn:active { transform:scale(0.98); }

/* Custom fullscreen overlay */
.overlay-fullscreen {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,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,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: single bar */
.composer { display:flex; align-items:center; gap:8px; margin-top:8px; }
.composer textarea{
  flex:1 1 auto; min-width:0;
  padding:10px; border-radius:20px; border:1px solid #33343a; background:#121316; color:#fff;
  resize:none; overflow:hidden; line-height:1.3; max-height:160px;
}
.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; }
.icon-btn:disabled { opacity:.6; cursor:default; }
.file-note { font-size:12px; color:#cfcfcf; margin-left:4px; }

.file-list { margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.file-row { display:flex; align-items:center; gap:8px; background:#2a2b31; border:1px solid #33343a; border-radius:10px; padding:6px 8px; }
.file-row .name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#fff; }
.file-row .x { width:26px; height:26px; border-radius:8px; border:1px solid #444; background:#1a1a1e; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.btn { background:var(--pri); color:#fff; border:0; border-radius:10px; padding:8px 10px; font-weight:600; cursor:pointer; }
.btn:disabled { opacity:.6; cursor:default; }

/* Small header */
.top { padding:8px; display:flex; gap:8px; align-items:center; }
.title { font-weight:700; font-size:16px; }

/* Dropdown menu (gear) */
.dropdown-menu {
  position:absolute;
  right:8px;
  top:64px;
  background:#1a1a1e;
  border:1px solid #2a2b31;
  border-radius:10px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:10;
  min-width:220px;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown-menu .menu-title { font-size:12px; color:#cfcfcf; margin:2px 4px 6px; }
.dropdown-menu .menu-btn {
  background:#2a2b31; color:#fff; border:1px solid #33343a;
  border-radius:8px; padding:8px 10px; text-align:left; cursor:pointer;
}
.dropdown-menu .menu-btn:hover { background:#33343a; }

/* Unauthorized overlay */
.blocked {
  display:none; position:absolute; inset:0; background:#000;
  color:#fff; font-weight:700; font-size:18px;
  align-items:center; justify-content:center; text-align:center;
}
.unauth #blocked { display:flex; }
.unauth .filters, .unauth .work, .unauth #gearMenu { display:none !important; }

/* legacy compact row (оставлено на случай) */
.acts.small .btn { padding:6px 8px; font-size:12px; }