/* ==========================================================================
   BM Messages — Telegram-style direct & group chats
   One stylesheet, one root (.tgm = #bmChatWorkspace). No runtime style layers.
   ========================================================================== */

.tgm{
  --tg-accent:#3390ec;
  --tg-accent-hover:#2a83d8;
  --tg-accent-soft:rgba(51,144,236,.12);
  --tg-text:#0f1419;
  --tg-muted:#707579;
  --tg-faint:#a2acb4;
  --tg-line:rgba(15,20,25,.08);
  --tg-hover:#f4f4f5;
  --tg-panel:#ffffff;
  --tg-in:#ffffff;
  --tg-out:#eeffde;
  --tg-out-meta:#4fae4e;
  --tg-out-accent:#3fa33d;
  --tg-danger:#e53935;
  --tg-online:#0ac630;
  --tg-radius:15px;
  --tg-shadow:0 1px 2px rgba(16,35,47,.15);
  --tg-pop:0 10px 38px rgba(16,35,47,.18),0 2px 8px rgba(16,35,47,.08);
  --tg-ease:cubic-bezier(.2,.8,.2,1);
  position:relative;
  display:none;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tg-text);
  background:var(--tg-panel);
  -webkit-font-smoothing:antialiased;
}
.tgm *,.tgm *::before,.tgm *::after{box-sizing:border-box}
.tgm button{font:inherit;color:inherit}

/* ---- Panel shell when Messages mode is on ---- */
.spoPanel.isChatMode{
  width:min(1200px,calc(100vw - 40px))!important;
  height:min(90vh,960px)!important;
  right:20px!important;
  background:#fff!important;
}
.spoPanel.isChatMode .spoSearchRow,
.spoPanel.isChatMode .spoHeadBottom,
.spoPanel.isChatMode .spoList,
.spoPanel.isChatMode .spoScrollDown,
.spoPanel.isChatMode .spoComposer,
.spoPanel.isChatMode #spoSearchToggleBtn{display:none!important}
.spoPanel.isChatMode .spoHead{padding:10px 14px 10px 18px!important;border-bottom:1px solid var(--tg-line,rgba(15,20,25,.08))}
.spoPanel.isChatMode .spoPanelSub{display:none}
.spoPanel.isChatMode .tgm{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr)}

/* ---- SPO board / Messages switch ---- */
.bmModeSwitch{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(15,20,25,.06);flex:0 1 auto;min-width:0}
.bmModeBtn{position:relative;height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#5d646b;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;transition:background .2s var(--tg-ease,ease),color .2s ease,box-shadow .2s ease}
.bmModeBtn:hover{color:#1f2328}
.bmModeBtn.active{background:#fff;color:#1f2328;box-shadow:0 1px 3px rgba(16,35,47,.16)}
.bmModeLabel{display:inline-flex;align-items:center;gap:6px}
.bmModeBadge{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#3390ec;color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center}
.bmModeBadge.show{display:inline-block}
.spoHeadActions > .bmModeSwitch{margin-right:6px}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.tgSidebar{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--tg-line);background:#fff;overflow:hidden}
.tgSideTop{flex:0 0 auto;padding:10px 12px 8px;display:flex;flex-direction:column;gap:8px;background:#fff;z-index:3}
.tgSideBar{display:flex;align-items:center;gap:6px}
.tgSearch{position:relative;flex:1 1 auto;min-width:0;height:42px;border-radius:22px;background:#f1f3f4;display:flex;align-items:center;transition:background .18s ease,box-shadow .18s ease}
.tgSearch:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--tg-accent)}
.tgSearch svg{position:absolute;left:14px;width:19px;height:19px;color:#9aa1a7;pointer-events:none;transition:color .18s ease}
.tgSearch:focus-within svg{color:var(--tg-accent)}
.tgSearch input{width:100%;height:100%;border:0;background:transparent;outline:0;padding:0 38px 0 44px;font:inherit;font-size:15px;color:var(--tg-text)}
.tgSearch input::placeholder{color:#9aa1a7}
.tgSearchClear{position:absolute;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#9aa1a7;display:none;align-items:center;justify-content:center;cursor:pointer}
.tgSearch.has-value .tgSearchClear{display:flex}
.tgSearchClear:hover{background:rgba(15,20,25,.06)}
.tgIconBtn{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#707579;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.tgIconBtn:hover{background:var(--tg-hover);color:#4a5056}
.tgIconBtn:active{transform:scale(.92)}
.tgIconBtn svg{width:22px;height:22px;display:block}
.tgIconBtn.active{color:var(--tg-accent)}
.tgm .bmSidebarToolbar{display:flex;align-items:center;gap:0}
.tgm .bmConferenceToolbarBtn{width:40px!important;height:40px!important;min-width:40px!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:#707579!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.tgm .bmConferenceToolbarBtn:hover{background:var(--tg-hover)!important}
.tgm .bmConferenceToolbarBtn svg{width:21px!important;height:21px!important}

.tgFolders{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
.tgFolders::-webkit-scrollbar{display:none}
.tgFolder{position:relative;flex:0 0 auto;height:32px;padding:0 12px;border:0;border-radius:16px;background:transparent;color:var(--tg-muted);font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .18s ease,color .18s ease}
.tgFolder:hover{background:var(--tg-hover)}
.tgFolder.active{background:var(--tg-accent-soft);color:var(--tg-accent)}
.tgFolder b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c4c9cc;color:#fff;font-size:10.5px;line-height:18px;text-align:center}
.tgFolder.active b{background:var(--tg-accent)}

.tgm .bmConferenceShelf{margin:0 10px 6px!important}

.tgSideScroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 8px 10px;scrollbar-width:thin;scrollbar-color:rgba(15,20,25,.16) transparent}
.tgSideScroll::-webkit-scrollbar{width:6px}
.tgSideScroll::-webkit-scrollbar-thumb{background:rgba(15,20,25,.14);border-radius:3px}
.tgList{display:flex;flex-direction:column}
.tgListLabel{padding:12px 10px 6px;font-size:13px;font-weight:700;color:var(--tg-muted)}
.tgListEmpty{padding:40px 24px;text-align:center;color:var(--tg-muted);font-size:14px;line-height:1.5}
.tgListEmpty b{display:block;color:var(--tg-text);font-size:15px;margin-bottom:4px}

.tgChatRow{position:relative;display:flex;align-items:center;gap:10px;height:72px;padding:0 10px;border-radius:12px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .12s ease}
.tgChatRow:hover{background:var(--tg-hover)}
.tgChatRow.active{background:var(--tg-accent)}
.tgChatRow.active .tgChatName,.tgChatRow.active .tgChatPreview,.tgChatRow.active .tgChatTime,.tgChatRow.active .tgChatPreview b,.tgChatRow.active .tgChatPreview .tgDraft,.tgChatRow.active .tgChatIcons{color:#fff!important}
.tgChatRow.active .tgBadge{background:#fff;color:var(--tg-accent)}
.tgChatRow.active .tgBadge.muted{background:rgba(255,255,255,.7)}
.tgChatRow.active .tgCheck{color:#fff}
.tgChatRow.active .tgAvatar .tgOnline{border-color:var(--tg-accent)}
.tgChatRow.pressed{transform:scale(.985)}
.tgChatBody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.tgChatLine{display:flex;align-items:center;gap:6px;min-width:0}
.tgChatName{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:700;color:var(--tg-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.tgChatName span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tgChatName svg{flex:0 0 auto;width:15px;height:15px}
.tgChatIcons{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;color:#a2acb4}
.tgChatIcons svg{width:15px;height:15px}
.tgChatTime{flex:0 0 auto;font-size:12.5px;color:var(--tg-muted);display:inline-flex;align-items:center;gap:3px}
.tgChatPreview{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgChatPreview b{font-weight:600;color:var(--tg-text)}
.tgChatPreview .tgDraft{color:var(--tg-danger);font-weight:600}
.tgChatPreview.typing{color:var(--tg-accent)}
.tgBadge{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--tg-accent);color:#fff;font-size:12.5px;font-weight:700;line-height:22px;text-align:center;animation:tgPop .28s var(--tg-ease)}
.tgBadge.muted{background:#c4c9cc}
.tgBadge.mention{min-width:22px;padding:0;font-size:13px}
.tgPinMark{color:#c4c9cc}
.tgChatRow.archive .tgAvatar{background:#a2acb4!important}

/* ---- Avatars ---- */
.tgAvatar{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:19px;letter-spacing:.02em;background:linear-gradient(180deg,var(--a1,#72d5fd),var(--a2,#2a9ef1));overflow:visible;user-select:none}
.tgAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tgAvatar.sm{width:42px;height:42px;font-size:15px}
.tgAvatar.xs{width:34px;height:34px;font-size:13px}
.tgAvatar.lg{width:120px;height:120px;font-size:42px}
.tgAvatar svg{width:56%;height:56%}
.tgAvatar .tgOnline{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--tg-online);border:2.5px solid #fff;transform:scale(0);transition:transform .25s var(--tg-ease)}
.tgAvatar.online .tgOnline{transform:scale(1)}
.tgAvatar.sm .tgOnline{width:12px;height:12px;border-width:2px;right:0;bottom:0}
.tgAvatar[data-c="0"]{--a1:#ff885e;--a2:#ff516a}
.tgAvatar[data-c="1"]{--a1:#ffcd6a;--a2:#ffa85c}
.tgAvatar[data-c="2"]{--a1:#82b1ff;--a2:#665fff}
.tgAvatar[data-c="3"]{--a1:#a0de7e;--a2:#54cb68}
.tgAvatar[data-c="4"]{--a1:#53edd6;--a2:#28c9b7}
.tgAvatar[data-c="5"]{--a1:#72d5fd;--a2:#2a9ef1}
.tgAvatar[data-c="6"]{--a1:#e0a2f3;--a2:#d669ed}

/* ==========================================================================
   Main column
   ========================================================================== */
.tgMain{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#dfe5c7}
.tgWallpaper{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(160deg,#e4ecc9 0%,#bcd9a9 48%,#9fcdb8 100%)}
.tgMain > .tgHeader,.tgMain > .tgFind,.tgMain > .tgScroll,.tgMain > .tgComposer{position:relative;z-index:1}
.tgm [hidden]{display:none!important}

.tgHeader{flex:0 0 auto;height:58px;padding:0 8px 0 14px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--tg-line);z-index:5}
.tgBack{display:none}
.tgPeer{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 2px;border-radius:12px;cursor:pointer}
.tgPeer:hover .tgPeerName{color:#000}
.tgPeerText{min-width:0;display:flex;flex-direction:column;gap:1px}
.tgPeerName{font-size:16px;font-weight:700;color:var(--tg-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.tgPeerName svg{width:15px;height:15px;color:#a2acb4;flex:0 0 auto}
.tgPeerStatus{font-size:13.5px;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}
.tgPeerStatus.online,.tgPeerStatus.typing{color:var(--tg-accent)}
.tgHeaderActions{flex:0 0 auto;display:flex;align-items:center;gap:2px}

/* Typing dots */
.tgDots{display:inline-flex;align-items:flex-end;gap:2.5px;height:8px;margin-right:6px;vertical-align:baseline}
.tgDots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:tgDot 1.2s infinite ease-in-out}
.tgDots i:nth-child(2){animation-delay:.15s}.tgDots i:nth-child(3){animation-delay:.3s}
@keyframes tgDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* In-chat search bar */
.tgFind{flex:0 0 auto;height:0;overflow:hidden;display:flex;align-items:center;gap:6px;padding:0 10px;background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--tg-line);transition:height .22s var(--tg-ease),padding .22s var(--tg-ease);z-index:4}
.tgFind.open{height:52px;padding:6px 10px}
.tgFind .tgSearch{height:38px}
.tgFindCount{flex:0 0 auto;min-width:64px;text-align:center;font-size:13px;color:var(--tg-muted);white-space:nowrap}

/* Selection bar */
.tgSelectBar{position:absolute;left:0;right:0;top:0;height:58px;display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;background:#fff;box-shadow:0 1px 0 var(--tg-line);z-index:8;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .22s var(--tg-ease),opacity .18s ease}
.tgm.selecting .tgSelectBar{transform:none;opacity:1;pointer-events:auto}
.tgSelectCount{flex:1 1 auto;font-size:16px;font-weight:700}
.tgPill{height:36px;padding:0 16px;border:0;border-radius:18px;background:var(--tg-accent);color:#fff!important;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:background .15s ease,transform .1s ease,opacity .15s}
.tgPill:hover{background:var(--tg-accent-hover)}
.tgPill:active{transform:scale(.97)}
.tgPill.ghost{background:transparent;color:var(--tg-accent)!important}
.tgPill.ghost:hover{background:var(--tg-accent-soft)}
.tgPill.danger{background:transparent;color:var(--tg-danger)!important}
.tgPill.danger:hover{background:rgba(229,57,53,.08)}
.tgPill:disabled{opacity:.4;pointer-events:none}
.tgPill svg{width:18px;height:18px}

/* ==========================================================================
   Message list
   ========================================================================== */
.tgScroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;display:flex;flex-direction:column;padding:8px 0 10px;scroll-behavior:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
.tgScroll::-webkit-scrollbar{width:7px}
.tgScroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:4px}
.tgSpacer{flex:1 0 auto;min-height:6px}
.tgColumn{width:100%;max-width:760px;margin:0 auto;padding:0 18px}

.tgSystem{display:flex;justify-content:center;padding:6px 0 4px;pointer-events:none}
.tgSystem span{display:inline-block;padding:4px 11px;border-radius:14px;background:rgba(72,92,60,.42);color:#fff;font-size:13.5px;font-weight:600;line-height:1.35;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto}
.tgDate{position:sticky;top:6px;z-index:3}
.tgUnreadSep{margin:8px 0 6px;padding:5px 0;text-align:center;background:rgba(255,255,255,.62);color:#4a7f3f;font-size:13.5px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tgLoader{display:flex;justify-content:center;padding:10px 0}
.tgLoader i{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);border-top-color:#fff;animation:tgSpin .8s linear infinite}
@keyframes tgSpin{to{transform:rotate(360deg)}}

.tgEmpty{margin:auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 32px;border-radius:24px;background:rgba(72,92,60,.36);color:#fff;text-align:center;max-width:330px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tgEmpty b{font-size:16px}
.tgEmpty span{font-size:14px;line-height:1.45;opacity:.92}
.tgEmpty .tgEmptyIcon{font-size:44px;line-height:1}
.tgEmpty button{margin-top:4px;border:0;border-radius:16px;padding:8px 16px;background:rgba(255,255,255,.22);color:#fff;font-weight:700;cursor:pointer}
.tgEmpty button:hover{background:rgba(255,255,255,.32)}

/* ---- Row & bubble ---- */
.tgRow{position:relative;display:flex;align-items:flex-end;gap:8px;padding:1px 0}
.tgRow.first{padding-top:6px}
.tgRow.out{flex-direction:row-reverse}
.tgRow .tgRowAvatar{flex:0 0 34px;width:34px;align-self:flex-end}
.tgRow .tgRowAvatar .tgAvatar{cursor:pointer}
.tgRow.noavatar .tgRowAvatar{display:none}
.tgSel{flex:0 0 0;width:0;height:22px;align-self:center;opacity:0;overflow:hidden;transition:flex-basis .2s var(--tg-ease),opacity .2s ease,margin .2s}
.tgm.selecting .tgSel{flex-basis:22px;width:22px;opacity:1;margin:0 4px}
.tgSel i{display:block;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.95);background:rgba(0,0,0,.12);box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:background .15s ease,border-color .15s ease}
.tgRow.selected .tgSel i{background:var(--tg-online);border-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.tgm.selecting .tgRow{cursor:pointer}
.tgm.selecting .tgRow.selected::before{content:'';position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;background:rgba(51,144,236,.14);pointer-events:none}

.tgBubble{position:relative;max-width:min(78%,520px);min-width:56px;padding:6px 9px 7px 11px;border-radius:var(--tg-radius);background:var(--tg-in);box-shadow:var(--tg-shadow);font-size:15.2px;line-height:1.38;color:var(--tg-text);word-wrap:break-word;overflow-wrap:anywhere;transform-origin:left bottom;transition:background .2s ease,box-shadow .2s ease}
.tgRow.out .tgBubble{background:var(--tg-out);transform-origin:right bottom}
.tgRow:not(.out):not(.last) .tgBubble{border-bottom-left-radius:6px}
.tgRow:not(.out):not(.first) .tgBubble{border-top-left-radius:6px}
.tgRow.out:not(.last) .tgBubble{border-bottom-right-radius:6px}
.tgRow.out:not(.first) .tgBubble{border-top-right-radius:6px}
.tgRow.last:not(.out) .tgBubble{border-bottom-left-radius:0}
.tgRow.last.out .tgBubble{border-bottom-right-radius:0}
.tgRow.last .tgBubble::after{content:'';position:absolute;bottom:0;width:11px;height:17px;background:inherit;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c3.6-.8 6.6-2.7 8.5-5.6C10.4 8.5 11 4.6 11 0z'/%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c3.6-.8 6.6-2.7 8.5-5.6C10.4 8.5 11 4.6 11 0z'/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 1px 0 rgba(16,35,47,.12))}
.tgRow.last:not(.out) .tgBubble::after{left:-10px}
.tgRow.last.out .tgBubble::after{right:-10px;transform:scaleX(-1)}
.tgRow.flash .tgBubble{animation:tgFlash 1.6s ease}
@keyframes tgFlash{0%,100%{box-shadow:var(--tg-shadow)}20%,60%{box-shadow:0 0 0 3px rgba(51,144,236,.55),var(--tg-shadow)}}
.tgRow.hit .tgBubble{box-shadow:0 0 0 2px rgba(255,196,0,.9),var(--tg-shadow)}

.tgRow.enter .tgBubble{animation:tgEnter .34s var(--tg-ease) both}
@keyframes tgEnter{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tgRow.leave{animation:tgLeave .24s ease forwards}
@keyframes tgLeave{to{opacity:0;transform:scale(.92);max-height:0;padding:0;margin:0}}

.tgAuthor{display:block;margin:0 0 2px;font-size:14px;font-weight:700;line-height:1.25;color:var(--tg-name,#3390ec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tgAuthor[data-c="0"]{--tg-name:#e17076}.tgAuthor[data-c="1"]{--tg-name:#e09b46}.tgAuthor[data-c="2"]{--tg-name:#7f6ef0}.tgAuthor[data-c="3"]{--tg-name:#3fae3c}.tgAuthor[data-c="4"]{--tg-name:#24a99b}.tgAuthor[data-c="5"]{--tg-name:#3390ec}.tgAuthor[data-c="6"]{--tg-name:#c25bd6}
.tgText{white-space:pre-wrap}
.tgText.isClamped{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3.2em),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 3.2em),transparent)}
.tgMore{display:block;margin:4px 0 2px;padding:0;border:0;background:none;color:var(--tg-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tgMore:hover{text-decoration:underline}
.tgText a{color:var(--tg-accent);text-decoration:none}
.tgText a:hover{text-decoration:underline}
.tgRow.out .tgText a{color:#2f8f2b}
.tgText mark{background:#ffe58a;color:inherit;border-radius:3px;padding:0 1px}
.tgMention{color:var(--tg-accent);font-weight:600}
.tgRow.out .tgMention{color:#2f8f2b}
.tgMention.me{background:rgba(51,144,236,.12);border-radius:4px;padding:0 2px}

/* Inline meta (time / edited / checks) placed inside the bubble like Telegram */
.tgMetaGap{display:inline-block;height:1px;vertical-align:baseline;width:var(--meta-w,42px)}
.tgMeta{position:absolute;right:8px;bottom:4px;display:inline-flex;align-items:center;gap:3px;height:16px;font-size:12px;color:#a0acb6;white-space:nowrap;pointer-events:none;user-select:none}
.tgMeta .tgEdited{font-style:italic;margin-right:1px}
.tgRow.out .tgMeta{color:var(--tg-out-meta)}
.tgCheck{display:inline-flex;width:18px;height:16px;color:var(--tg-out-meta)}
.tgCheck svg{width:18px;height:16px;display:block}
.tgCheck.read svg .tgC2{opacity:1}
.tgCheck .tgC2{opacity:0;transition:opacity .25s ease}
.tgCheck.pending svg{width:14px;height:14px;margin:1px 2px}
.tgCheck.failed{color:var(--tg-danger);pointer-events:auto;cursor:pointer}
.tgCheck.read{animation:tgPop .3s var(--tg-ease)}

/* Bubble variants */
.tgBubble.emoji{background:transparent!important;box-shadow:none!important;padding:0 0 18px;min-width:0}
.tgBubble.emoji::after{display:none}
.tgBubble.emoji .tgText{font-size:52px;line-height:1.15;letter-spacing:2px}
.tgBubble.emoji.e2 .tgText{font-size:42px}.tgBubble.emoji.e3 .tgText{font-size:34px}
.tgBubble.emoji .tgMeta{right:0;bottom:0;padding:0 6px;border-radius:9px;background:rgba(0,0,0,.24);color:#fff}
.tgBubble.emoji .tgMeta .tgCheck{color:#fff}
.tgBubble.emoji .tgMetaGap{display:none}
.tgBubble.media{padding:3px}
.tgBubble.media .tgAuthor{padding:3px 8px 1px}
.tgBubble.media .tgText{padding:5px 8px 2px}
.tgBubble.media.nocaption .tgMeta{right:10px;bottom:9px;padding:0 6px;height:19px;border-radius:10px;background:rgba(0,0,0,.42);color:#fff}
.tgBubble.media.nocaption .tgMeta .tgCheck{color:#fff}
.tgBubble.media .tgQuote{margin:4px 5px 4px}
.tgBubble.card{padding:9px 10px 22px 10px;min-width:250px}
.tgm .tgBubble.card .bmConferenceInviteCard{width:auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.tgm .bmConferenceInviteByline{display:none!important}
.tgm .bmConferenceInviteTop{align-items:center!important;gap:12px!important}
.tgm .bmConferenceInviteIcon{width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:50%!important;background:var(--tg-accent)!important}
.tgm .bmConferenceInviteCard.ended .bmConferenceInviteIcon{background:#a2acb4!important}
.tgm .tgRow.out .bmConferenceInviteIcon{background:#4fae4e!important}
.tgm .bmConferenceInviteEyebrow{color:var(--tg-muted)!important;letter-spacing:.04em!important;font-size:10.5px!important}
.tgm .bmConferenceInviteState{height:18px!important;padding:0 7px!important;font-size:10px!important}
.tgm .bmConferenceInviteTitle{font-size:15px!important;font-weight:700!important;color:var(--tg-text)!important;margin-top:1px!important}
.tgm .bmConferenceInviteMeta{font-size:13px!important;color:var(--tg-muted)!important;margin-top:1px!important}
.tgm .bmConferenceInviteCard.ended .bmConferenceInviteJoin{display:none!important}
.tgm .bmConferenceInviteJoin{height:36px!important;margin-top:10px!important;border-radius:18px!important;background:var(--tg-accent)!important;border:0!important;box-shadow:none!important;font-weight:700!important}
.tgm .bmConferenceInviteJoin:hover{background:var(--tg-accent-hover)!important}
.tgReactions:not(:empty){margin-right:var(--meta-w,44px)}

/* Reply / forward quote */
.tgQuote{position:relative;display:block;width:100%;margin:2px 0 4px;padding:3px 8px 4px 10px;border:0;border-radius:6px;background:var(--q-bg,rgba(51,144,236,.1));text-align:left;cursor:pointer;overflow:hidden;transition:background .15s ease}
.tgQuote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--q-c,var(--tg-accent))}
.tgQuote:hover{background:var(--q-bg-h,rgba(51,144,236,.16))}
.tgQuote b{display:block;font-size:13.5px;font-weight:700;color:var(--q-c,var(--tg-accent));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.tgQuote span{display:block;font-size:14px;color:var(--tg-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;opacity:.9}
.tgRow.out .tgQuote{--q-c:var(--tg-out-accent);--q-bg:rgba(79,174,78,.13);--q-bg-h:rgba(79,174,78,.2)}
.tgForwarded{display:block;margin:1px 0 3px;font-size:13.5px;color:var(--tg-accent);line-height:1.3}
.tgForwarded b{font-weight:700}
.tgRow.out .tgForwarded{color:var(--tg-out-accent)}

/* Reactions */
.tgReactions{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 1px}
.tgReactions:empty{display:none}
.tgReaction{height:28px;padding:0 9px 0 6px;border:0;border-radius:14px;background:rgba(51,144,236,.1);color:var(--tg-accent);display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s ease,transform .12s ease;animation:tgPop .3s var(--tg-ease)}
.tgReaction:hover{background:rgba(51,144,236,.18)}
.tgReaction:active{transform:scale(.92)}
.tgReaction .tgRe{font-size:17px;line-height:1;font-family:"BM Twemoji Mozilla","Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.tgReaction.mine{background:var(--tg-accent);color:#fff}
.tgRow.out .tgReaction{background:rgba(79,174,78,.16);color:#3a9a37}
.tgRow.out .tgReaction.mine{background:#4fae4e;color:#fff}
.tgBubble.emoji .tgReactions{margin:4px 0 0}
.tgBubble.media .tgReactions{margin:6px 6px 3px}
@keyframes tgPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.tgReactBurst{position:fixed;z-index:2147483646;pointer-events:none;font-size:30px;animation:tgBurst .7s var(--tg-ease) forwards}
@keyframes tgBurst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}35%{transform:translate(-50%,-90%) scale(1.35);opacity:1}100%{transform:translate(-50%,-140%) scale(.9);opacity:0}}

/* Hover quick-react button */
.tgHoverReact{position:absolute;bottom:2px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(16,35,47,.2);color:#8a959e;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .18s var(--tg-ease);cursor:pointer;z-index:2}
.tgHoverReact svg{width:18px;height:18px}
.tgRow:not(.out) .tgHoverReact{right:-38px}
.tgRow.out .tgHoverReact{left:-38px}
@media (hover:hover){.tgRow:hover .tgHoverReact{opacity:1;transform:none}}
.tgm.selecting .tgHoverReact{display:none}
.tgHoverReact:hover{color:var(--tg-accent)}

/* Attachments inside bubbles */
.tgm .bmAttachments{display:flex;flex-direction:column;gap:4px;margin:0}
.tgBubble:not(.media) .bmAttachments{margin:3px 0 2px}
.tgm .bmImageAttachment{display:block;padding:0;border:0;background:#e8edf0;border-radius:12px;overflow:hidden;cursor:pointer;max-width:100%}
.tgm .bmImageAttachment img{display:block;max-width:100%;max-height:420px;min-width:120px;min-height:80px;object-fit:cover;border-radius:12px}
.tgRow:not(.last) .tgBubble.media .bmImageAttachment img,.tgBubble.media .bmMediaAlbum{border-radius:12px}
.tgm .bmMediaAlbum{width:min(420px,100%)!important;border-radius:12px!important}
.tgm .bmFileAttachment{display:flex;align-items:center;gap:11px;min-width:220px;max-width:340px;padding:4px 6px 4px 2px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s ease}
.tgm .bmFileAttachment:hover{background:rgba(0,0,0,.04)}
.tgm .bmAttachmentFileIcon{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--tg-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.02em}
.tgRow.out .bmAttachmentFileIcon{background:#4fae4e}
.tgm .bmAttachmentMeta{min-width:0;display:flex;flex-direction:column;gap:2px}
.tgm .bmAttachmentName{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgm .bmAttachmentSize{font-size:13px;color:var(--tg-muted)}
.tgRow.out .bmAttachmentSize{color:var(--tg-out-meta)}
.tgm .bmImageAttachment.preview-failed{min-width:180px;min-height:120px;display:flex;align-items:center;justify-content:center}
.tgm .bmImageAttachment.preview-failed img{display:none}
.tgm .bmImageAttachment.preview-failed::after{content:'Preview unavailable';font-size:13px;color:var(--tg-muted)}

/* Voice notes inside bubbles */
.tgm .bmAttachment.bmVoiceAttachment{min-width:250px!important;width:min(320px,100%)!important;padding:2px 0 0!important;border:0!important;background:transparent!important;border-radius:0!important}
.tgm .bmVoicePlayBtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-basis:44px!important;background:var(--tg-accent)!important;box-shadow:none!important}
.tgm .tgRow.out .bmVoicePlayBtn{background:#4fae4e!important}
.tgm .tgBubble.voice{padding-bottom:22px}
.tgm .bmVoiceStopBtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;background:var(--tg-accent)!important;box-shadow:none!important;border-radius:50%!important}
.tgm .bmVoiceCancelBtn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;background:transparent!important;color:var(--tg-danger)!important;border-radius:50%!important}
.tgm .bmVoiceCancelBtn:hover{background:rgba(229,57,53,.08)!important}
.tgm .bmVoiceLiveWave i{background:var(--tg-accent)}
.tgm .bmVoiceRecordingTime{color:var(--tg-text);font-size:14px;font-weight:600}
.tgm .bmSharedHeroAvatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(180deg,#72d5fd,#2a9ef1);font-size:30px}
.tgm .bmSharedAvatar{background:linear-gradient(180deg,#72d5fd,#2a9ef1)}
.tgm .bmSharedMember{border:0;background:transparent;border-radius:12px}
.tgm .bmSharedMember:hover{background:var(--tg-hover)}
.tgm .bmSharedPills span{background:var(--tg-accent-soft);color:var(--tg-accent)}
.tgm .bmSharedPanelHeadActions button{border-radius:50%;background:transparent}
.tgm .bmSharedPanelHeadActions button:hover{background:var(--tg-hover)}
.tgm .bmVoiceWavePlayed{color:var(--tg-accent)}
.tgm .tgRow.out .bmVoiceWavePlayed{color:#4fae4e}
.tgm .tgRow.out .bmVoiceWaveBase{color:#a6d79a}
.tgm .bmVoiceMeta{color:var(--tg-muted)}
.tgm .tgRow.out .bmVoiceMeta{color:var(--tg-out-meta)}
.tgm .bmVoiceDownload{background:transparent}

/* Conference invitation card */
.tgm .bmConferenceInviteCard{margin:0!important;box-shadow:none!important}

/* Assistant answers inserted into the list */
.tgm .bmAssistantAnswerRow{width:100%;max-width:760px;margin:6px auto;padding:0 18px}

/* ---- Scroll-to-bottom button ---- */
.tgFab{position:absolute;right:18px;bottom:84px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#707579;box-shadow:0 2px 6px rgba(16,35,47,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .2s ease,transform .25s var(--tg-ease)}
.tgFab.show{opacity:1;transform:none;pointer-events:auto}
.tgFab svg{width:26px;height:26px}
.tgFab:hover{color:var(--tg-accent)}
.tgFab b{position:absolute;top:-7px;left:50%;transform:translateX(-50%);min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--tg-accent);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
.tgFab b:empty{display:none}
.tgFab.mention{bottom:142px}

/* ==========================================================================
   Composer
   ========================================================================== */
.tgComposer{flex:0 0 auto;padding:6px 18px 14px;z-index:5}
.tgComposerInner{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.tgComposerRow{display:flex;align-items:flex-end;gap:8px}
.tgInputBox{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:#fff;border-radius:18px 18px 4px 18px;box-shadow:var(--tg-shadow)}
.tgInputBox::after{content:'';position:absolute;right:-10px;bottom:0;width:11px;height:17px;background:#fff;transform:scaleX(-1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c3.6-.8 6.6-2.7 8.5-5.6C10.4 8.5 11 4.6 11 0z'/%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c3.6-.8 6.6-2.7 8.5-5.6C10.4 8.5 11 4.6 11 0z'/%3E%3C/svg%3E") no-repeat}
.tgInputLine{display:flex;align-items:flex-end;min-height:52px;padding:0 4px}
.tgInputLine .tgIconBtn{width:44px;height:52px;border-radius:14px;color:#8a959e}
.tgInputLine .tgIconBtn:hover{background:transparent;color:var(--tg-accent)}
.tgInputLine .tgIconBtn.active{color:var(--tg-accent)}
.tgInput{flex:1 1 auto;min-width:0;min-height:52px;max-height:220px;padding:15px 4px 14px;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:15.5px;line-height:1.4;color:var(--tg-text);overflow-y:auto;scrollbar-width:thin}
.tgInput::placeholder{color:#a2acb4}
.tgSendWrap{position:relative;flex:0 0 52px;width:52px;height:52px}
.tgSend{position:absolute;inset:0;width:52px;height:52px;border:0;border-radius:50%;background:#fff;color:var(--tg-accent);box-shadow:var(--tg-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .22s var(--tg-ease),opacity .18s ease,background .15s ease,color .15s ease}
.tgSend svg{width:26px;height:26px}
.tgSend:hover{background:var(--tg-accent);color:#fff}
.tgSend:active{transform:scale(.9)}
#bmComposerSend.voice-hidden{opacity:0;transform:scale(.4) rotate(-40deg);pointer-events:none}
#bmVoiceRecordBtn{opacity:0;transform:scale(.4) rotate(40deg);pointer-events:none}
#bmVoiceRecordBtn.show{opacity:1;transform:none;pointer-events:auto}
#bmComposerSend.has-uploading{color:#a2acb4}
#bmComposerSend.has-upload-errors{color:var(--tg-danger)}
#bmComposerSend:disabled{opacity:.6}

.tgBanner{display:flex;align-items:center;gap:10px;padding:6px 6px 0 12px;animation:tgSlideDown .2s var(--tg-ease)}
.tgBanner .tgBannerIcon{flex:0 0 auto;color:var(--tg-accent);display:flex}
.tgBanner .tgBannerIcon svg{width:22px;height:22px}
.tgBanner .tgBannerBody{position:relative;flex:1 1 auto;min-width:0;padding:1px 0 1px 10px;border-left:2px solid var(--tg-accent);cursor:pointer}
.tgBanner .tgBannerBody b{display:block;font-size:14px;color:var(--tg-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgBanner .tgBannerBody span{display:block;font-size:14px;color:var(--tg-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes tgSlideDown{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.tgm .bmAttachTray{display:none;flex-direction:column;gap:6px;max-height:220px;overflow:auto;padding:8px 8px 0}
.tgm .bmAttachTray.has-items{display:flex}

/* Voice recording strip (voice module toggles .voice-recording on #bmComposer) */
.tgm .bmVoiceRecordingBar{display:none;align-items:center;gap:10px;min-height:52px;padding:4px 6px 4px 6px;border:0;border-radius:18px;background:#fff;box-shadow:var(--tg-shadow)}
.tgComposer.voice-recording .bmVoiceRecordingBar{display:flex}
.tgComposer.voice-recording .tgComposerRow,.tgComposer.voice-recording .tgBanner,.tgComposer.voice-recording .bmAssistantComposer{display:none!important}

/* Mention autocomplete */
.tgMentions{position:absolute;left:0;right:0;bottom:calc(100% + 8px);max-height:260px;overflow:auto;padding:6px;border-radius:14px;background:#fff;box-shadow:var(--tg-pop);display:none;z-index:10}
.tgMentions.show{display:block;animation:tgSlideDown .16s var(--tg-ease)}
.tgMentionItem{width:100%;height:46px;padding:0 8px;border:0;border-radius:10px;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.tgMentionItem:hover,.tgMentionItem.active{background:var(--tg-hover)}
.tgMentionItem b{font-size:14.5px;font-weight:600}
.tgMentionItem span{font-size:13px;color:var(--tg-muted)}

/* Assistant quick prompt (styled by dashboard-assistant.css, positioned here) */
.tgm .bmAssistantComposer{margin:0}

/* ==========================================================================
   Popovers: context menus, reaction bar
   ========================================================================== */
.tgMenu,.tgReactBar,.tgReactBurst{--tg-pop:0 10px 38px rgba(16,35,47,.22),0 2px 8px rgba(16,35,47,.12);--tg-ease:cubic-bezier(.2,.8,.2,1)}
.tgMenu{position:fixed;z-index:2147483600;min-width:210px;max-width:300px;padding:6px 0;border-radius:14px;background:rgba(255,255,255,.98);box-shadow:var(--tg-pop);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-origin:var(--ox,0) var(--oy,0);animation:tgMenuIn .18s var(--tg-ease);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:#0f1419;user-select:none}
.tgMenu.closing{animation:tgMenuOut .14s ease forwards}
@keyframes tgMenuIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes tgMenuOut{to{opacity:0;transform:scale(.92)}}
.tgMenuItem{width:100%;height:38px;padding:0 16px;border:0;background:transparent;display:flex;align-items:center;gap:14px;font:inherit;font-size:14.5px;font-weight:600;color:inherit;text-align:left;cursor:pointer;white-space:nowrap}
.tgMenuItem:hover{background:rgba(15,20,25,.06)}
.tgMenuItem svg{flex:0 0 auto;width:20px;height:20px;color:#707579}
.tgMenuItem.danger{color:#e53935}
.tgMenuItem.danger svg{color:#e53935}
.tgMenuSep{height:1px;margin:5px 0;background:rgba(15,20,25,.08)}
.tgMenuHint{padding:4px 16px 2px;font-size:12px;color:#707579}
.tgReactBar{position:fixed;z-index:2147483601;display:flex;align-items:center;gap:2px;padding:5px 6px;border-radius:24px;background:rgba(255,255,255,.98);box-shadow:var(--tg-pop);animation:tgBarIn .22s var(--tg-ease);transform-origin:center bottom}
@keyframes tgBarIn{from{opacity:0;transform:translateY(6px) scale(.8)}to{opacity:1;transform:none}}
.tgReactBar.closing{animation:tgMenuOut .14s ease forwards}
.tgReactPick{width:38px;height:38px;border:0;border-radius:50%;background:transparent;font-size:25px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .14s var(--tg-ease),background .14s ease;font-family:"BM Twemoji Mozilla","Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;animation:tgPop .3s var(--tg-ease) both}
.tgReactPick:nth-child(2){animation-delay:.02s}.tgReactPick:nth-child(3){animation-delay:.04s}.tgReactPick:nth-child(4){animation-delay:.06s}.tgReactPick:nth-child(5){animation-delay:.08s}.tgReactPick:nth-child(6){animation-delay:.1s}.tgReactPick:nth-child(7){animation-delay:.12s}
.tgReactPick:hover{transform:scale(1.28)}
.tgReactPick.mine{background:rgba(51,144,236,.14)}
.tgReactMore{width:32px;height:32px;border:0;border-radius:50%;background:rgba(15,20,25,.06);color:#707579;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:2px}
.tgReactMore:hover{background:rgba(15,20,25,.1)}
.tgReactMore svg{width:18px;height:18px}

/* ==========================================================================
   Modal dialogs
   ========================================================================== */
.tgModalWrap{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s ease}
.tgModalWrap.open{opacity:1;pointer-events:auto}
.tgModal{width:min(420px,100%);max-height:min(640px,100%);display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.25);overflow:hidden;transform:scale(.92) translateY(10px);transition:transform .24s var(--tg-ease)}
.tgModalWrap.open .tgModal{transform:none}
.tgModal.wide{width:min(480px,100%)}
.tgModalHead{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 12px 6px 20px}
.tgModalHead h3{flex:1 1 auto;margin:0;font-size:18px;font-weight:700;color:var(--tg-text)}
.tgModalBody{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 20px 12px;font-size:15px;line-height:1.45;color:var(--tg-text)}
.tgModalBody p{margin:4px 0 10px;color:#3d4246}
.tgModalFoot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:6px;padding:6px 12px 12px}
.tgModalBody.list{padding:0 8px 8px}
.tgModalSearch{padding:0 16px 8px}
.tgModalSearch .tgSearch{height:40px}
.tgCheckRow{display:flex;align-items:center;gap:12px;padding:8px 2px;cursor:pointer;font-size:15px}
.tgCheckRow input{width:20px;height:20px;accent-color:var(--tg-accent);margin:0}
.tgField{display:block;margin:6px 0 12px}
.tgField span{display:block;font-size:13px;font-weight:600;color:var(--tg-muted);margin:0 0 6px 2px}
.tgField input{width:100%;height:48px;padding:0 14px;border:1.5px solid #dadce0;border-radius:12px;outline:0;font:inherit;font-size:15.5px;color:var(--tg-text);transition:border-color .15s ease}
.tgField input:focus{border-color:var(--tg-accent)}
.tgPeopleRow{width:100%;height:58px;padding:0 10px;border:0;border-radius:12px;background:transparent;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;transition:background .12s ease}
.tgPeopleRow:hover{background:var(--tg-hover)}
.tgPeopleRow .tgPeopleText{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tgPeopleRow b{font-size:15px;font-weight:600;color:var(--tg-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgPeopleRow span{font-size:13.5px;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgPeopleRow span.online{color:var(--tg-accent)}
.tgPeopleRow .tgTick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid #c4c9cc;transition:background .15s ease,border-color .15s ease}
.tgPeopleRow.on .tgTick{border-color:var(--tg-accent);background:var(--tg-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.tgPeopleRow .tgRole{flex:0 0 auto;font-size:12.5px;color:var(--tg-accent);font-weight:600}
.tgPeopleRow .tgRemove{flex:0 0 auto;border:0;background:transparent;color:var(--tg-danger);font-weight:700;font-size:13px;padding:6px 8px;border-radius:8px;cursor:pointer}
.tgPeopleRow .tgRemove:hover{background:rgba(229,57,53,.08)}
.tgChips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}
.tgChip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 3px;border-radius:16px;background:#f1f3f4;font-size:14px;font-weight:600;animation:tgPop .22s var(--tg-ease);cursor:pointer}
.tgChip:hover{background:#ffe1e0}
.tgChip .tgAvatar{width:26px;height:26px;font-size:11px}
.tgModalNote{padding:12px 16px;color:var(--tg-muted);font-size:14px;text-align:center}
.tgSegment{display:flex;flex-direction:column;gap:2px}
.tgRadio{display:flex;align-items:center;gap:12px;height:44px;padding:0 4px;cursor:pointer;font-size:15px}
.tgRadio input{width:20px;height:20px;accent-color:var(--tg-accent);margin:0}

/* Search results in the sidebar */
.tgResult{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer}
.tgResult:hover{background:var(--tg-hover)}
.tgResultBody{flex:1 1 auto;min-width:0}
.tgResultTop{display:flex;gap:8px;align-items:baseline}
.tgResultTop b{flex:1 1 auto;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgResultTop time{flex:0 0 auto;font-size:12.5px;color:var(--tg-muted)}
.tgResultText{font-size:14px;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgResultText mark{background:transparent;color:var(--tg-accent);font-weight:700}

/* Toasts */
.tgm .bmToastStack{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.tgm .bmToast{min-width:0;max-width:360px;padding:10px 16px;border-radius:12px;background:rgba(32,38,44,.88);color:#fff;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.2);animation:tgSlideDown .2s var(--tg-ease);backdrop-filter:blur(8px)}
.tgm .bmToastTitle{font-weight:700;font-size:13.5px}
.tgm .bmToastBody{font-size:13.5px;opacity:.86}

/* Drag & drop overlay (media module toggles .bmMediaDragActive) */
.tgm.bmMediaDragActive .tgMain::after{content:'Drop files here to send';position:absolute;inset:12px;z-index:30;border:3px dashed rgba(255,255,255,.95);border-radius:20px;background:rgba(51,144,236,.42);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}

/* Shared media / info panel (messages-shared.js) — Telegram right column */
.tgm .bmChatSharedPanel{position:absolute!important;top:0;right:0;bottom:0;width:min(360px,100%)!important;display:flex!important;flex-direction:column;z-index:40!important;border-left:1px solid var(--tg-line);background:#fff;box-shadow:-12px 0 40px rgba(16,35,47,.12)!important;transform:translateX(105%);transition:transform .28s var(--tg-ease);visibility:hidden}
.tgm .bmChatSharedPanel.open{transform:none;visibility:visible}
.tgm .bmSharedPanelHead{height:58px}
.tgm .bmSharedTab.active{background:var(--tg-accent-soft);color:var(--tg-accent)}

/* ==========================================================================
   Compact / mobile
   ========================================================================== */
.tgm.compact{grid-template-columns:1fr!important}
.tgm.compact .tgMain{position:absolute;inset:0;transform:translateX(100%);transition:transform .3s var(--tg-ease);box-shadow:-8px 0 30px rgba(0,0,0,.12);z-index:20}
.tgm.compact.thread-open .tgMain{transform:none}
.tgm.compact .tgSidebar{transition:transform .3s var(--tg-ease),filter .3s ease}
.tgm.compact.thread-open .tgSidebar{transform:translateX(-25%);filter:brightness(.92)}
.tgm.compact .tgBack{display:inline-flex}
.tgm.compact .tgColumn{padding:0 8px}
.tgm.compact .tgComposer{padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.tgm.compact .tgBubble{max-width:86%}
.tgm.compact .tgHoverReact{display:none}
.tgm.compact .tgFab{right:10px;bottom:76px}
@media (max-width:760px){
  .spoPanel.isChatMode{top:0!important;right:0!important;left:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  .spoPanel.isChatMode .spoHead{padding:8px 10px!important}
  .tgChatRow{height:68px}
  .tgAvatar{width:50px;height:50px}
  .tgInput{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .tgm *,.tgMenu,.tgReactBar{animation:none!important;transition:none!important}
}
.tgModal.single .tgTick{display:none}

.tgm.compact .tgCloseChat{display:none}
.tgm.compact .tgCloseChat{display:none}