/* =========================================================
   MTWS Chat — Full Telegram-like CSS
   Полный итоговый CSS под текущий HTML
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================
   THEME VARIABLES
   ========================================================= */

:root,
[data-theme="dark"] {
  --bg:          #0e1621;
  --bg2:         #17212b;
  --bg3:         #1f2c38;
  --bg4:         #253341;
  --bg5:         #2b3a49;
  --bg6:         #324556;

  --border:      rgba(255,255,255,.06);
  --border-md:   rgba(255,255,255,.10);
  --border-hi:   rgba(255,255,255,.16);

  --text:        #e9edf0;
  --text-2:      #a8b3bd;
  --text-3:      #7f91a3;
  --text-inv:    #ffffff;

  --accent:      #3390ec;
  --accent-dim:  rgba(51,144,236,.16);
  --accent-glow: rgba(51,144,236,.10);

  --blue:        #59c7ff;
  --blue-dim:    rgba(89,199,255,.15);

  --green:       #4caf78;
  --green-dim:   rgba(76,175,120,.15);

  --red:         #df5b57;
  --red-dim:     rgba(223,91,87,.14);

  --violet:      #7a7adb;
  --violet-dim:  rgba(122,122,219,.14);

  --bubble-me:    #234b63;
  --bubble-other: #1b2735;

  --sidebar-w:   340px;
  --info-w:      320px;
  --header-h:    56px;

  --r-2xs: 3px;
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;

  --font:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.24);
  --shadow-md:    0 6px 20px rgba(0,0,0,.28);
  --shadow-lg:    0 18px 44px rgba(0,0,0,.34);
  --shadow-modal: 0 18px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-float: 0 10px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06);
}

[data-theme="light"] {
  --bg:          #dfe6ed;
  --bg2:         #ffffff;
  --bg3:         #f4f7fa;
  --bg4:         #e9eef4;
  --bg5:         #dde5ec;
  --bg6:         #d2dce6;

  --border:      rgba(15,23,42,.08);
  --border-md:   rgba(15,23,42,.12);
  --border-hi:   rgba(15,23,42,.18);

  --text:        #1f2d3d;
  --text-2:      #5f6f82;
  --text-3:      #8a99ab;
  --text-inv:    #ffffff;

  --accent:      #3390ec;
  --accent-dim:  rgba(51,144,236,.12);
  --accent-glow: rgba(51,144,236,.10);

  --blue:        #1d8fe1;
  --blue-dim:    rgba(29,143,225,.12);

  --green:       #43a25a;
  --green-dim:   rgba(67,162,90,.12);

  --red:         #d95c57;
  --red-dim:     rgba(217,92,87,.12);

  --violet:      #6b74d6;
  --violet-dim:  rgba(107,116,214,.12);

  --bubble-me:   #d9f5c8;
  --bubble-other:#ffffff;

  --shadow-sm:    0 1px 3px rgba(15,23,42,.06);
  --shadow-md:    0 8px 24px rgba(15,23,42,.10);
  --shadow-lg:    0 18px 40px rgba(15,23,42,.14);
  --shadow-modal: 0 24px 70px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.05);
  --shadow-float: 0 12px 36px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.05);
}

/* =========================================================
   RESET
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[v-cloak] {
  display: none !important;
}

.hidden {
  display: none !important;
}

.mobile-only {
  display: none;
}

.desktop-only {
  display: initial;
}

.muted {
  color: var(--text-3);
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg5);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* =========================================================
   APP LAYOUT
   ========================================================= */

#app {
  height: 100vh;
  overflow: hidden;
}

.tg-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns .2s ease;
}

.tg-app.info-open {
  grid-template-columns: var(--sidebar-w) 1fr;
}

.tg-app.is-auth {
  grid-template-columns: 1fr;
}

/* =========================================================
   BOOT SCREEN
   ========================================================= */

.boot-screen {
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.boot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.boot-logo {
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: var(--text-inv);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.boot-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.boot-subtitle {
  font-size: 12px;
  color: var(--text-3);
}

.boot-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--bg5);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   AUTH
   ========================================================= */

.auth-shell {
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(51,144,236,.08), transparent),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(255,255,255,.03), transparent),
    var(--bg);
}

.auth-card {
  width: min(400px, 100%);
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg3);
  border-radius: var(--r-sm);
  padding: 3px;
  margin: 16px 0;
}

.tab-btn {
  flex: 1;
  height: 34px;
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: background .15s, color .15s;
}

.tab-btn.active {
  background: var(--bg5);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.tab-btn:not(.active):hover {
  color: var(--text);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field label,
.field > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(51,144,236,.45);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.field textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

.auth-error {
  font-size: 13px;
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid rgba(223,91,87,.24);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.auth-actions,
.modal-actions,
.inline-actions,
.person-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  transition: opacity .15s, transform .1s, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  user-select: none;
}

.btn:hover:not(:disabled) {
  opacity: .92;
}

.btn:active:not(:disabled) {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent);
  color: var(--text-inv);
}

.btn.ghost {
  background: var(--bg4);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.ghost:hover:not(:disabled) {
  background: var(--bg5);
  opacity: 1;
}

.btn.danger {
  background: var(--red);
  color: #fff;
}

.btn.subtle {
  background: var(--bg4);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-size: 12px;
  height: 32px;
  padding: 0 12px;
}

.btn.subtle:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg5);
  opacity: 1;
}

.icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--text-2);
  transition: background .15s, color .15s, transform .12s;
}

.icon-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.icon-btn:active {
  transform: scale(.95);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-input-wrap > i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-3);
  pointer-events: none;
}

.top-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  padding: 0 10px 0 32px;
  outline: none;
  font-size: 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.top-search input::placeholder {
  color: var(--text-3);
}

.top-search input:focus {
  border-color: rgba(51,144,236,.4);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.theme-btn {
  font-size: 15px;
}

.profile-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-inv);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.sidebar-menu {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.menu-btn {
  flex: 1;
  height: 30px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}

.menu-btn:hover {
  background: var(--bg5);
  color: var(--text);
  border-color: var(--border-md);
}

.chat-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}

.chat-tabs::-webkit-scrollbar {
  display: none;
}

.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.chat-tab:hover {
  background: var(--bg4);
  color: var(--text);
}

.chat-tab.active {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(51,144,236,.22);
}

.mini-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--text-inv);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.list-section-title {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.025);
  transition: background .12s, border-color .12s;
  position: relative;
}

.chat-row:hover {
  background: rgba(255,255,255,.035);
}

.chat-row.active {
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
}

.avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg4);
  color: var(--text-2);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 45%);
  pointer-events: none;
}

.avatar.small {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 11px;
}

.chat-main {
  min-width: 0;
  flex: 1;
}

.chat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.chat-head strong {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-head span {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

.chat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
}

.last-line {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-flags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.fav-mark {
  color: var(--accent);
  font-size: 12px;
}

.badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--text-inv);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.row-icon-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-3);
  border-radius: 8px;
  transition: color .15s, background .15s, transform .12s;
}

.row-icon-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.row-icon-btn:active {
  transform: scale(.93);
}

.empty-list {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

.empty-list i {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.search-panel {
  margin: 0 12px 8px;
  background: var(--bg3);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.search-panel-head.compact {
  padding: 8px 10px;
}

.search-panel-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-close-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 13px;
  transition: background .15s, color .15s;
}

.search-close-btn:hover {
  background: var(--bg5);
  color: var(--text);
}

.search-state {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-users-list {
  max-height: 240px;
  overflow-y: auto;
}

.search-user-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.search-user-row:last-child {
  border-bottom: none;
}

.search-user-row:hover {
  background: rgba(255,255,255,.035);
}

.search-user-meta {
  min-width: 0;
}

.search-user-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-user-meta span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}

/* =========================================================
   CHAT PANE
   ========================================================= */

.chat-pane {
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto auto auto;
  overflow: hidden;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.015), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.02), transparent 18%);
}

.chat-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 2;
}

.chat-header-meta {
  flex: 1;
  min-width: 0;
}

.chat-header-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-meta span {
  font-size: 11px;
  color: var(--text-3);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.server-version-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  margin-right: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg3);
  color: var(--text-3);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.server-version-pill strong {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 650;
}

.server-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #778899;
  box-shadow: 0 0 0 2px rgba(119,136,153,.12);
}

.server-version-pill.online .server-status-dot {
  background: #35c46a;
  box-shadow: 0 0 0 2px rgba(53,196,106,.14);
}

.server-version-pill.offline .server-status-dot {
  background: #ef5d64;
  box-shadow: 0 0 0 2px rgba(239,93,100,.14);
}

@media (max-width: 760px) {
  .server-version-name { display: none; }
  .server-version-pill { padding: 0 7px; gap: 5px; }
}

/* =========================================================
   REPLY BAR
   ========================================================= */

.reply-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.reply-bar-line {
  width: 3px;
  border-radius: 99px;
  background: var(--accent);
  flex-shrink: 0;
}

.reply-bar-body {
  min-width: 0;
  flex: 1;
}

.reply-bar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.reply-bar-title strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  gap: 8px;
  align-items: center;
}

.reply-bar-text {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-bar-close {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: background .15s, color .15s;
}

.reply-bar-close:hover {
  background: var(--bg4);
  color: var(--text);
}

/* =========================================================
   MESSAGES
   ========================================================= */

.messages-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 18px 10px;
  overscroll-behavior: contain;
}

.msg-row {
  display: flex;
  margin-bottom: 2px;
  position: relative;
}

.msg-row.me {
  justify-content: flex-end;
}

.msg-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(720px, 84%);
}

.msg-row.me .msg-wrap {
  align-items: flex-end;
}

.msg-row.with-avatar {
  gap: 8px;
}

.msg-side-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg4);
  flex-shrink: 0;
  align-self: flex-end;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid transparent;
}

.msg-side-avatar:hover {
  border-color: var(--border-md);
}

.msg-side-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-actions {
  position: absolute;
  top: -10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 4;
}

.msg-row.me .msg-actions {
  right: auto;
  left: 10px;
}

.msg-row:hover .msg-actions,
.msg-actions.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.msg-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-size: 13px;
  transition: background .15s, color .15s, transform .12s;
}

.msg-action-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.msg-action-btn:active {
  transform: scale(.93);
}

.msg-action-btn.is-active {
  background: var(--accent-dim);
  color: var(--accent);
}

.msg-bubble {
  width: fit-content;
  max-width: 100%;
  background: var(--bubble-other);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 8px 12px 7px;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.msg-bubble.me {
  background: var(--bubble-me);
  border-color: rgba(255,255,255,.05);
}

.msg-row:hover .msg-bubble {
  border-color: rgba(255,255,255,.1);
}

.msg-bubble.is-selected,
.msg-bubble.is-reply-target {
  box-shadow: 0 0 0 3px var(--accent-dim), 0 4px 16px rgba(0,0,0,.18);
  border-color: rgba(51,144,236,.32);
}

.msg-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4ecdc4;
  margin-bottom: 4px;
  line-height: 1.2;
}

.person-link {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.person-link:hover {
  opacity: .92;
}

.msg-text {
  font-size: 15px;
  line-height: 1.38;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-text p + p {
  margin-top: 8px;
}

.msg-text pre {
  margin-top: 8px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
}

.msg-text code {
  font-family: var(--mono);
  font-size: 13px;
}

.msg-text blockquote {
  margin-top: 8px;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  color: var(--text-2);
}

.msg-text a,
.msg-quote-text a,
.private-link {
  color: var(--blue);
  text-decoration: none;
}

.msg-text a:hover,
.msg-quote-text a:hover,
.private-link:hover {
  text-decoration: underline;
}

.msg-quote {
  display: flex;
  gap: 8px;
  margin-bottom: 7px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-width: 180px;
}

.msg-quote:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}

.msg-quote-line {
  width: 3px;
  border-radius: 99px;
  background: #4ecdc4;
  flex-shrink: 0;
}

.msg-quote-body {
  min-width: 0;
  flex: 1;
}

.msg-quote-author {
  font-size: 12px;
  font-weight: 600;
  color: #4ecdc4;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-quote-text {
  font-size: 13px;
  color: #c6d1db;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.private-link-card {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(89,199,255,.08);
  border: 1px solid rgba(89,199,255,.18);
  border-radius: 14px;
  padding: 10px 12px;
  transition: background .15s, border-color .15s;
}

.private-link-card:hover {
  background: rgba(89,199,255,.11);
  border-color: rgba(89,199,255,.26);
}

.private-link-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(89,199,255,.14);
  color: #59c7ff;
  font-size: 15px;
}

.private-link-body {
  min-width: 0;
  flex: 1;
}

.private-link-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7fd9ff;
  margin-bottom: 2px;
}

.private-link-url {
  font-size: 13px;
  color: #d9f3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.private-link-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.private-link-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.private-link-btn:hover {
  background: rgba(255,255,255,.1);
}

.msg-files {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.msg-file:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--border-md);
}

.msg-file-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.msg-file-thumb {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.msg-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-file-meta {
  min-width: 0;
  flex: 1;
}

.msg-file-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-file-meta span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  min-height: 26px;
}

.msg-reaction {
  height: 24px;
  min-width: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  transition: background .15s, border-color .15s, transform .12s, color .15s;
  box-shadow: var(--shadow-sm);
}

.msg-reaction:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--border-md);
}

.msg-reaction:active {
  transform: scale(.95);
}

.msg-reaction.mine {
  background: var(--accent-dim);
  border-color: rgba(51,144,236,.28);
  color: var(--accent);
}

.msg-reaction-emoji {
  font-size: 13px;
  line-height: 1;
}

.msg-reaction-count {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.msg-reaction-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px;
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.msg-reaction-quick {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14px;
  transition: background .15s, transform .12s;
}

.msg-reaction-quick:hover {
  background: var(--bg4);
}

.msg-reaction-quick:active {
  transform: scale(.92);
}

.msg-meta {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1;
}

.msg-meta .msg-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
}

.msg-meta .msg-checks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #59d7c8;
  font-size: 13px;
}

.msg-meta .msg-time {
  color: var(--text-3);
}

.date-divider {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}

.date-divider span {
  font-size: 13px;
  font-weight: 600;
  color: #eaf2fb;
  background: #2a3b50;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.msg-row.grp-start { margin-top: 10px; }
.msg-row.grp-mid   { margin-top: 2px; }
.msg-row.grp-end   { margin-top: 2px; margin-bottom: 6px; }

.msg-bubble.grp-start:not(.me) {
  border-bottom-left-radius: 10px;
}
.msg-bubble.grp-mid:not(.me) {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.msg-bubble.grp-end:not(.me) {
  border-top-left-radius: 10px;
}

.msg-bubble.grp-start.me {
  border-bottom-right-radius: 10px;
}
.msg-bubble.grp-mid.me {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.msg-bubble.grp-end.me {
  border-top-right-radius: 10px;
}

.msg-bubble:not(.grp-end) .msg-meta {
  display: none;
}

/* =========================================================
   PENDING FILES / COMPOSER
   ========================================================= */

.pending-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.pending-file {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
  max-width: 220px;
}

.pending-thumb {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-size: 14px;
}

.pending-file-meta {
  min-width: 0;
}

.pending-file-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-file-size {
  font-size: 11px;
  color: var(--text-3);
}

.pending-file-remove {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: background .15s, color .15s;
}

.pending-file-remove:hover {
  background: var(--red-dim);
  color: var(--red);
}

.upload-error-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  background: var(--red-dim);
  border-top: 1px solid rgba(223,91,87,.24);
  font-size: 12px;
  color: var(--red);
}

.upload-error-bar > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.upload-error-bar button {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  color: var(--red);
  transition: background .15s;
}

.upload-error-bar button:hover {
  background: rgba(223,91,87,.15);
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.composer-input {
  flex: 1;
  min-height: 38px;
  max-height: 160px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  padding: 9px 12px;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.45;
  overflow-y: auto;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.composer-input::placeholder {
  color: var(--text-3);
}

.composer-input:focus {
  border-color: rgba(51,144,236,.4);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.composer-input.has-selection {
  border-color: rgba(51,144,236,.42);
}

.send-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: var(--accent);
  color: var(--text-inv);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.send-btn:hover:not(:disabled) {
  opacity: .9;
}

.send-btn:active:not(:disabled) {
  transform: scale(.94);
}

.send-btn:disabled {
  opacity: .35;
}

.empty-chat {
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 13px;
  gap: 10px;
}

.empty-chat.center strong {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 400;
}

/* =========================================================
   INFO PANE
   ========================================================= */

.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(2px);
  z-index: 39;
}

[data-theme="light"] .info-overlay {
  background: rgba(15,23,42,.18);
}

.info-pane {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .24s ease;
}

.info-pane.drawer-open {
  transform: translateX(0);
}

.info-head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.info-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-head-meta {
  min-width: 0;
}

.info-head-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-head-meta span {
  font-size: 11px;
  color: var(--text-3);
}

.info-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-section {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.info-kv {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.info-kv-row-block {
  flex-direction: column;
  gap: 3px;
}

.info-kv-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  white-space: nowrap;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.info-kv-value {
  font-size: 13px;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}

.info-kv-row-block .info-kv-value {
  text-align: left;
}

.invite-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-link-box {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.invite-readonly-input {
  width: 100%;
  height: 36px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--mono);
}

.invite-actions-stack {
  display: flex;
  gap: 6px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.member-row-card {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}

.member-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.member-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--text-3);
  background: var(--bg5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

.member-role > i {
  width: 12px;
  text-align: center;
  font-size: 11px;
}

.member-role.role-owner {
  color: #ffd76a;
  background: rgba(255, 196, 64, .10);
  border-color: rgba(255, 196, 64, .24);
}

.member-role.role-admin {
  color: #8fbaff;
  background: rgba(74, 137, 255, .10);
  border-color: rgba(74, 137, 255, .24);
}

.member-role.role-member {
  color: var(--text-3);
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: fade-in .15s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  width: min(460px, 100%);
  max-height: min(85vh, 700px);
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border-hi);
  border-radius: 18px;
  box-shadow: var(--shadow-modal);
  animation: slide-up .18s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 1;
  border-radius: 18px 18px 0 0;
}

.modal-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-body {
  padding: 16px 20px;
}

.modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--bg2);
  border-radius: 0 0 18px 18px;
}

/* =========================================================
   PERSON MODAL
   ========================================================= */

.person-modal-card {
  width: min(420px, 100%);
}

.person-modal-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.person-modal-avatar {
  width: 74px;
  height: 74px;
  min-width: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2);
}

.person-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-modal-meta {
  min-width: 0;
  flex: 1;
}

.person-modal-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 6px;
}

.person-modal-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
}

/* =========================================================
   CONTEXT MENU
   ========================================================= */

.context-menu {
  position: fixed;
  min-width: 230px;
  max-width: 290px;
  background: #1c2733;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0,0,0,.34);
  overflow: hidden;
  z-index: 3000;
  animation: menu-in .12s ease;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.context-menu-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.context-menu-item {
  min-height: 36px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  transition: background .12s, color .12s;
}

.context-menu-item:hover {
  background: rgba(255,255,255,.06);
}

.context-menu-item:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.context-menu-item.danger {
  color: #ff8f8f;
}

.context-menu-item.danger:hover {
  background: rgba(255,95,95,.12);
}

.context-menu-sep {
  height: 1px;
  margin: 5px 0;
  background: rgba(255,255,255,.06);
}

/* =========================================================
   MARKDOWN LINK POPUP
   ========================================================= */

.markdown-link-pop {
  position: fixed;
  width: min(340px, calc(100vw - 24px));
  background: var(--bg2);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  z-index: 3100;
  overflow: hidden;
}

.markdown-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.markdown-link-head strong {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
}

.markdown-link-body {
  padding: 12px 14px 14px;
}

.markdown-link-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* =========================================================
   SELECT2
   ========================================================= */

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
  min-height: 40px;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 3px 6px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(51,144,236,.4) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
  outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent-dim) !important;
  border: 1px solid rgba(51,144,236,.25) !important;
  color: var(--accent) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  margin: 3px 3px !important;
  font-size: 12px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--accent) !important;
  margin-right: 5px !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
  color: var(--text) !important;
  margin-top: 6px !important;
}

.select2-dropdown {
  background: var(--bg3) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
  margin-top: 3px;
  overflow: hidden;
}

.select2-search--dropdown {
  padding: 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

.select2-search--dropdown .select2-search__field {
  background: var(--bg4) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 6px 10px !important;
  outline: none !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-2) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  transition: background .1s !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* =========================================================
   MEDIA VIEWER
   ========================================================= */

.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(5,10,18,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.media-viewer-body {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.media-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 60px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.media-viewer-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #dbe9f6;
  font-size: 13px;
}

.media-viewer-close,
.media-viewer-nav {
  position: fixed;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 18px;
}

.media-viewer-close:hover,
.media-viewer-nav:hover {
  background: rgba(255,255,255,.14);
}

.media-viewer-close {
  top: 18px;
  right: 18px;
}

.media-viewer-nav.prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.media-viewer-nav.next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================
   TOASTS
   ========================================================= */

.mtws-left-toasts {
  position: fixed;
  left: calc(var(--sidebar-w) + 16px);
  bottom: 16px;
  z-index: 2000;
  width: 300px;
  pointer-events: none;
}

.mtws-toast {
  pointer-events: auto;
  cursor: pointer;
  background: var(--bg3);
  border: 1px solid var(--border-md);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 8px;
  box-shadow: var(--shadow-md);
  transition: transform .15s, opacity .15s;
}

.mtws-toast:hover {
  transform: translateX(2px);
}

.mtws-toast-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  gap: 8px;
  align-items: center;
}

.mtws-toast-text {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-list-enter-active,
.toast-list-leave-active {
  transition: all .2s ease;
}

.toast-list-enter-from,
.toast-list-leave-to {
  opacity: 0;
  transform: translateX(-8px);
}

/* =========================================================
   LIGHT MODE FIXES
   ========================================================= */

[data-theme="light"] .chat-row:hover,
[data-theme="light"] .search-user-row:hover {
  background: rgba(15,23,42,.035);
}

[data-theme="light"] .msg-bubble {
  border-color: rgba(15,23,42,.05);
}

[data-theme="light"] .msg-bubble.me {
  border-color: rgba(15,23,42,.04);
}

[data-theme="light"] .context-menu {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
}

[data-theme="light"] .context-menu-item:hover {
  background: rgba(15,23,42,.05);
}

[data-theme="light"] .context-menu-sep {
  background: rgba(15,23,42,.08);
}

[data-theme="light"] .date-divider span {
  color: #26415b;
  background: #dbe6f0;
}

[data-theme="light"] .media-viewer {
  background: rgba(20,28,40,.88);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  :root {
    --sidebar-w: 300px;
  }
}

@media (max-width: 960px) {
  .info-pane {
    width: min(100vw, 420px);
  }
}

@media (max-width: 760px) {
  .tg-app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: flex;
  }

  .sidebar.mobileHidden {
    display: none;
  }

  .chat-pane {
    display: none;
  }

  .chat-pane.mobileVisible {
    display: grid;
  }

  .mobile-only {
    display: inline-grid !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mtws-left-toasts {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 70px;
  }

  .msg-wrap {
    max-width: 92%;
  }

  .msg-bubble {
    max-width: 100%;
  }

  .msg-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    position: static;
    margin-bottom: 4px;
    align-self: flex-start;
  }

  .msg-row.me .msg-actions {
    align-self: flex-end;
  }

  .context-menu,
  .markdown-link-pop {
    width: min(94vw, 340px);
  }

  .media-viewer {
    padding: 16px;
  }

  .media-viewer-close,
  .media-viewer-nav {
    width: 40px;
    height: 40px;
  }
}
/* =========================================================
   MTWS 2.1 — Telegram-style interaction layer
   ========================================================= */

.messages-wrap {
  position: relative;
  padding: 18px 7.5% 26px;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 14% 22%, rgba(51,144,236,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 48%, rgba(255,255,255,.025) 0 1px, transparent 1.5px);
  background-size: 28px 28px, 36px 36px;
}

.msg-row {
  position: relative;
  margin: 2px 0;
}

.msg-wrap {
  position: relative;
  max-width: min(680px, 76%);
}

.msg-row.me .msg-wrap {
  margin-left: auto;
}

.msg-bubble {
  border-radius: 14px 14px 14px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: filter .14s ease, transform .12s ease, box-shadow .14s ease;
}

.msg-bubble.me {
  border-radius: 14px 14px 5px 14px;
}

.msg-row:hover .msg-bubble {
  filter: brightness(1.035);
}

.msg-bubble.is-selected,
.msg-bubble.is-reply-target {
  box-shadow: 0 0 0 2px rgba(51,144,236,.45), 0 4px 18px rgba(0,0,0,.18);
}

.msg-forwarded {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 5px;
}

.msg-forwarded i {
  font-size: 11px;
}

.msg-hover-actions {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 6;
}

.msg-row:not(.me) .msg-hover-actions {
  right: auto;
  left: calc(100% + 8px);
}

.msg-row:hover .msg-hover-actions,
.msg-row:focus-within .msg-hover-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.msg-hover-actions button {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 13px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}

.msg-hover-actions button:hover {
  color: var(--accent);
  background: var(--bg4);
  transform: translateY(-1px);
}

.msg-meta {
  gap: 5px;
}

.meta-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}

.meta-button:hover {
  color: var(--accent);
}

.msg-edited {
  opacity: .72;
  font-size: 10px;
}

.msg-checks {
  color: #65b8ff;
}

.telegram-action-bar {
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.telegram-action-bar .reply-bar-line {
  background: var(--accent);
}

.telegram-action-bar .reply-bar-title strong {
  color: var(--accent);
}

.composer {
  padding: 8px 12px 10px;
  gap: 7px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.composer-input {
  min-height: 42px;
  max-height: 180px;
  border-radius: 21px;
  padding: 10px 15px;
  background: var(--bg3);
  border: 1px solid transparent;
}

.composer-input:focus {
  border-color: rgba(51,144,236,.35);
  box-shadow: 0 0 0 2px rgba(51,144,236,.08);
}

.send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 42px;
  box-shadow: 0 4px 14px rgba(51,144,236,.25);
}

.context-menu {
  width: 274px;
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
}

.context-menu-reactions {
  padding: 5px 4px 7px;
}

.context-reaction-btn {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  transition: transform .12s ease, background .12s ease;
}

.context-reaction-btn:hover {
  transform: scale(1.12);
}

.context-menu-item {
  min-height: 38px;
  border-radius: 8px;
}

.tg-sheet-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tg-forward-modal,
.tg-viewers-modal {
  width: min(440px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 40px));
  overflow: hidden;
  border-radius: 16px;
}

.tg-modal-search {
  margin: 10px 14px 8px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: var(--bg3);
  color: var(--text-3);
}

.tg-modal-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.tg-forward-list,
.tg-viewers-list {
  max-height: 480px;
  overflow: auto;
  padding: 5px 8px 10px;
}

.tg-forward-row,
.tg-viewer-row {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

button.tg-forward-row {
  cursor: pointer;
}

button.tg-forward-row:hover {
  background: var(--bg3);
}

.tg-forward-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tg-forward-meta strong,
.tg-forward-meta span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tg-forward-meta span {
  color: var(--text-3);
  font-size: 12px;
}

.viewer-check {
  color: var(--accent);
}

/* Telegram-like sidebar density */
.chat-row {
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 0;
}

.chat-row.active {
  background: rgba(51,144,236,.20);
}

.chat-row:hover:not(.active) {
  background: rgba(255,255,255,.035);
}

.chat-row .avatar {
  width: 42px;
  height: 42px;
}

@media (max-width: 760px) {
  .messages-wrap {
    padding: 12px 10px 18px;
  }

  .msg-wrap {
    max-width: 86%;
  }

  .msg-hover-actions {
    display: none;
  }

  .tg-forward-modal,
  .tg-viewers-modal {
    width: 100%;
    max-width: none;
    max-height: 78vh;
    margin-top: auto;
    border-radius: 18px 18px 0 0;
  }
}

.chat-header-meta .typing-active {
  color: var(--accent);
  font-weight: 600;
}

/* =========================================================
   MTWS 2.1.1 — Telegram Desktop visual pass
   ========================================================= */
:root,
[data-theme="dark"] {
  --bg: #0e1621;
  --bg2: #17212b;
  --bg3: #202b36;
  --bg4: #253341;
  --bubble-other: #182533;
  --bubble-me: #2b5278;
  --sidebar-w: 392px;
  --header-h: 56px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="light"] {
  --bg: #dfe7ef;
  --bg2: #ffffff;
  --bg3: #f1f3f5;
  --bg4: #e7ebef;
  --bubble-other: #ffffff;
  --bubble-me: #e2ffc7;
}

body { letter-spacing: 0; }

.tg-app {
  background: var(--bg);
}

/* Telegram-like left column */
.sidebar {
  position: relative;
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid rgba(255,255,255,.055);
}

.top-search {
  height: 56px;
  padding: 8px 10px;
  gap: 8px;
  border-bottom: 0;
}

.search-input-wrap > i {
  left: 14px;
  font-size: 14px;
}

.top-search input {
  height: 40px;
  border: 0;
  border-radius: 21px;
  padding-left: 39px;
  background: var(--bg3);
  font-size: 14px;
  box-shadow: none;
}

.top-search input:focus {
  border: 0;
  box-shadow: 0 0 0 2px rgba(51,144,236,.28);
}

.theme-btn {
  width: 38px;
  height: 38px;
}

.profile-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  font-size: 13px;
}

.sidebar-menu {
  height: 42px;
  padding: 4px 10px 6px;
  gap: 4px;
  border: 0;
}

.menu-btn {
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
}

.menu-btn:hover {
  background: var(--bg3);
  border: 0;
}

.chat-tabs {
  height: 40px;
  padding: 0 10px 5px;
  gap: 3px;
  border-bottom: 1px solid var(--border);
}

.chat-tab {
  height: 34px;
  border: 0 !important;
  border-radius: 7px;
  padding: 0 14px;
  font-size: 13px;
}

.chat-tab.active {
  background: transparent;
  color: var(--accent);
  position: relative;
}

.chat-tab.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -5px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.list-scroll {
  padding-bottom: 82px;
  scrollbar-width: thin;
}

.telegram-chat-row,
.chat-row {
  min-height: 72px;
  padding: 8px 10px;
  gap: 11px;
  border: 0;
  border-left: 0 !important;
  border-radius: 0;
}

.chat-row:hover:not(.active) {
  background: rgba(255,255,255,.04);
}

.chat-row.active {
  background: #2b5278;
}

[data-theme="light"] .chat-row.active {
  background: #419fd9;
  color: #fff;
}

.chat-row.active .chat-head strong,
.chat-row.active .chat-head > span,
.chat-row.active .chat-sub,
.chat-row.active .last-line,
.chat-row.active .telegram-pin {
  color: rgba(255,255,255,.96);
}

.telegram-avatar,
.chat-row .avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  font-size: 16px;
  background: linear-gradient(145deg, #3d9ad8, #2775ad);
  color: #fff;
}

.chat-head {
  margin-bottom: 3px;
  align-items: center;
}

.chat-head strong {
  font-size: 14px;
  font-weight: 600;
}

.chat-head > span {
  font-size: 11px;
}

.chat-sub {
  min-height: 20px;
  align-items: center;
}

.last-line {
  font-size: 13px;
  color: var(--text-2);
}

.chat-kind-icon {
  margin-right: 4px;
  font-size: 10px;
  color: var(--text-3);
}

.telegram-pin {
  color: var(--text-3);
  font-size: 11px;
  transform: rotate(34deg);
}

.badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 11px;
  background: #4082bc;
}

.new-chat-fab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #3390ec;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 5px 18px rgba(0,0,0,.34);
  z-index: 8;
  transition: transform .15s ease, filter .15s ease;
}

.new-chat-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.new-chat-fab:active { transform: scale(.94); }

/* Header mirrors Telegram Desktop */
.chat-header {
  height: 56px;
  padding: 0 16px;
  gap: 11px;
  border-bottom: 1px solid rgba(0,0,0,.18);
  background: var(--bg2);
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}

.chat-header > .avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: #fff;
  background: linear-gradient(145deg, #4388ba, #2f6b96);
}

.chat-header-meta strong {
  font-size: 14px;
  font-weight: 600;
}

.chat-header-meta span {
  font-size: 12px;
}

.chat-header-actions .icon-btn {
  width: 38px;
  height: 38px;
  font-size: 16px;
}

.server-version-pill {
  height: 24px;
  padding: 0 8px;
  background: transparent;
  border-color: rgba(255,255,255,.08);
  opacity: .72;
}

/* Telegram chat canvas */
.chat-pane {
  background: #0e1621;
}

.messages-wrap {
  padding: 14px clamp(20px, 8vw, 150px) 20px;
  background-color: #0e1621;
  background-image:
    linear-gradient(rgba(14,22,33,.94), rgba(14,22,33,.94)),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.08) 0 1px, transparent 1.4px);
  background-size: auto, 44px 44px, 58px 58px;
}

[data-theme="light"] .messages-wrap {
  background-color: #dfe7ef;
  background-image:
    linear-gradient(rgba(223,231,239,.92), rgba(223,231,239,.92)),
    radial-gradient(circle at 20% 30%, rgba(82,105,120,.10) 0 1px, transparent 1.4px),
    radial-gradient(circle at 68% 70%, rgba(82,105,120,.08) 0 1px, transparent 1.4px);
}

.date-divider {
  margin: 10px 0 14px;
}

.date-divider span {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(24,37,51,.76);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

.msg-row {
  margin: 1px 0;
}

.msg-wrap {
  max-width: min(560px, 72%);
}

.msg-row.with-avatar {
  gap: 7px;
}

.msg-side-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-bottom: 1px;
  color: #fff;
  background: #365e7d;
}

.msg-row.grp-start .msg-side-avatar,
.msg-row.grp-mid .msg-side-avatar {
  visibility: hidden;
}

.msg-bubble {
  padding: 6px 9px 5px;
  border: 0;
  border-radius: 12px 12px 12px 4px;
  background: #182533;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  overflow: visible;
}

.msg-bubble.me {
  background: #2b5278;
  border-radius: 12px 12px 4px 12px;
}

[data-theme="light"] .msg-bubble { background: #fff; }
[data-theme="light"] .msg-bubble.me { background: #e2ffc7; }

/* Telegram bubble tails only at the end of a message group */
.msg-bubble.grp-end:not(.me)::after,
.msg-bubble:not(.grp-start):not(.grp-mid):not(.me)::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 8px;
  height: 12px;
  background: inherit;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.msg-bubble.grp-end.me::after,
.msg-bubble.me:not(.grp-start):not(.grp-mid)::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 8px;
  height: 12px;
  background: inherit;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.msg-row:hover .msg-bubble { filter: none; }

.msg-sender {
  margin-bottom: 3px;
  color: #5eb5f7;
  font-size: 12.5px;
  font-weight: 600;
}

.msg-sender > i { display: none; }

.msg-text {
  font-size: 14px;
  line-height: 1.36;
  color: #f5f5f5;
}

[data-theme="light"] .msg-text { color: #111; }

.msg-forwarded {
  margin-bottom: 3px;
  color: #67b8f7;
  font-size: 12px;
}

.msg-quote {
  margin: 2px 0 5px;
  border-radius: 5px;
  background: rgba(0,0,0,.12);
}

.msg-meta {
  margin-top: 2px;
  justify-content: flex-end;
  line-height: 1;
  color: rgba(255,255,255,.58);
}

.msg-time,
.msg-edited,
.msg-views {
  font-size: 10.5px;
}

.msg-checks {
  color: #6dc7ff;
  font-size: 11px;
}

.msg-hover-actions {
  gap: 2px;
}

.msg-hover-actions button {
  width: 32px;
  height: 32px;
  color: #9dacba;
  background: rgba(23,33,43,.96);
  box-shadow: 0 1px 5px rgba(0,0,0,.28);
}

.msg-hover-actions button:hover {
  color: #fff;
  background: #253341;
}

.msg-reactions {
  margin-top: 4px;
  gap: 3px;
}

.msg-reaction {
  border-radius: 12px;
  min-height: 24px;
  padding: 2px 7px;
  background: rgba(0,0,0,.15);
}

.msg-reaction.mine {
  background: rgba(51,144,236,.28);
}

/* Reply/edit strip and composer */
.telegram-action-bar {
  margin: 0;
  padding: 7px max(14px, clamp(20px, 8vw, 150px));
  background: var(--bg2);
  border-top: 0;
  border-bottom: 0;
}

.composer {
  min-height: 58px;
  padding: 8px max(12px, clamp(20px, 8vw, 150px)) 10px;
  gap: 4px;
  background: var(--bg2);
  border-top: 0;
  align-items: flex-end;
}

.composer > .icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: #8f9ba7;
  font-size: 18px;
}

.composer-input {
  min-height: 42px;
  max-height: 160px;
  padding: 10px 13px;
  border: 0;
  border-radius: 8px;
  background: #202b36;
  box-shadow: none;
  font-size: 14px;
}

.composer-input:focus {
  border: 0;
  box-shadow: none;
}

[data-theme="light"] .composer-input { background: #fff; }

.send-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  background: #3390ec;
  box-shadow: none;
}

/* Menus/modals closer to Telegram Desktop */
.context-menu {
  width: 250px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: rgba(23,33,43,.98);
  box-shadow: 0 8px 30px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}

.context-menu-item {
  min-height: 36px;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
}

.context-menu-item:hover { background: #253341; }
.context-menu-sep { margin: 4px 5px; }

.context-menu-reactions {
  display: flex;
  justify-content: space-around;
  padding: 4px 2px 7px;
}

.context-reaction-btn {
  width: 34px;
  height: 34px;
  font-size: 19px;
}

.info-pane {
  background: var(--bg2);
  border-left: 1px solid var(--border);
}

@media (max-width: 1100px) {
  :root, [data-theme="dark"] { --sidebar-w: 340px; }
  .messages-wrap,
  .composer,
  .telegram-action-bar { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 760px) {
  :root, [data-theme="dark"] { --sidebar-w: 100vw; }
  .sidebar { width: 100%; }
  .sidebar-menu { display: none; }
  .chat-tabs { height: 38px; }
  .telegram-chat-row, .chat-row { min-height: 66px; }
  .telegram-avatar, .chat-row .avatar { width: 50px; height: 50px; min-width: 50px; }
  .messages-wrap { padding: 10px 8px 14px; }
  .msg-wrap { max-width: 84%; }
  .msg-side-avatar { width: 30px; height: 30px; min-width: 30px; }
  .composer { padding: 7px 6px 8px; }
  .telegram-action-bar { padding: 7px 10px; }
  .server-version-pill { display: none; }
  .new-chat-fab { right: 16px; bottom: 16px; }
}

/* =========================================================
   MTWS 2.1.2 — Telegram-style chat info drawer
   ========================================================= */
.tg-info-pane {
  width: min(390px, 100vw);
  background: #242f36;
  border-left: 1px solid rgba(255,255,255,.035);
  box-shadow: -8px 0 30px rgba(0,0,0,.18);
}

.tg-info-topbar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.tg-info-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d7e3ea;
  font-size: 20px;
  cursor: pointer;
  transition: background .12s ease;
}
.tg-info-close:hover { background: rgba(255,255,255,.08); }

.tg-info-scroll {
  padding: 0;
  gap: 0;
  background: #1f2a30;
}

.tg-profile-hero {
  min-height: 228px;
  padding: 18px 54px 16px;
  background: #2b3942;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tg-profile-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#62a7e8,#7a5ce5);
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.tg-profile-title {
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-profile-subtitle {
  margin-top: 4px;
  color: #8da0aa;
  font-size: 13px;
}

.tg-action-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  padding: 12px 18px 16px;
  background: #2b3942;
}
.tg-action-grid.two-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }

.tg-action-tile {
  min-height: 66px;
  border: 0;
  border-radius: 7px;
  background: #26333b;
  color: #f5f7f8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 12px;
  transition: background .12s ease, transform .12s ease;
}
.tg-action-tile i { font-size: 20px; color: #dfe7eb; }
.tg-action-tile:hover { background: #31414b; }
.tg-action-tile:active { transform: scale(.98); }
.tg-action-tile:disabled { opacity: .55; cursor: default; }

.tg-info-block {
  margin-top: 8px;
  background: #252f35;
  border-top: 1px solid rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(255,255,255,.025);
}

.tg-settings-row {
  width: 100%;
  min-height: 55px;
  border: 0;
  padding: 8px 14px 8px 18px;
  background: transparent;
  color: #eef4f7;
  display: flex;
  align-items: center;
  gap: 15px;
  font: inherit;
  text-align: left;
}
button.tg-settings-row { cursor: pointer; }
button.tg-settings-row:hover { background: rgba(255,255,255,.035); }
.tg-settings-row + .tg-settings-row { border-top: 1px solid rgba(255,255,255,.025); }

.tg-settings-icon {
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
  color: #c2cdd3;
  font-size: 18px;
}

.tg-settings-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tg-settings-copy strong {
  font-size: 13px;
  font-weight: 500;
  color: #f4f7f8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-settings-copy small { color: #8496a0; font-size: 12px; }
.tg-settings-copy .tg-link-text { color: #56d6cf; }

.tg-row-mini-btn,
.tg-add-person-btn,
.tg-text-btn,
.tg-member-more-btn {
  border: 0;
  background: transparent;
  color: #b8c6cd;
  cursor: pointer;
}
.tg-row-mini-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.tg-row-mini-btn:hover,
.tg-add-person-btn:hover,
.tg-member-more-btn:hover { background: rgba(255,255,255,.06); color: #fff; }

.tg-section-head {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f1f5f7;
}
.tg-section-head strong {
  font-size: 13px;
  font-weight: 600;
}
.tg-text-btn { color: #64d8d1; font-size: 12px; }
.tg-add-person-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 17px;
}

.tg-member-list { display: flex; flex-direction: column; }
.tg-member-row {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 18px;
  transition: background .12s ease;
}
.tg-member-row:hover { background: rgba(255,255,255,.035); }

.tg-member-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg,#5fa8ee,#8a5de5);
  font-size: 15px;
  font-weight: 500;
}
.tg-member-row:nth-child(3n+2) .tg-member-avatar { background: linear-gradient(145deg,#e99448,#e35c74); }
.tg-member-row:nth-child(3n) .tg-member-avatar { background: linear-gradient(145deg,#45b88f,#3186c6); }

.tg-member-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tg-member-copy strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-member-copy small { color: #82949e; font-size: 12px; }

.tg-role-label {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.25;
}
.tg-role-label.admin { color: #56d27f; background: rgba(44,163,86,.13); }
.tg-role-label.owner { color: #b98af2; background: rgba(134,77,197,.15); }

.tg-member-more { position: relative; flex: 0 0 auto; }
.tg-member-more-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .12s ease;
}
.tg-member-row:hover .tg-member-more-btn,
.tg-member-more:focus-within .tg-member-more-btn { opacity: 1; }

.tg-member-menu {
  display: none;
  position: absolute;
  z-index: 15;
  right: 4px;
  top: 32px;
  width: 230px;
  padding: 5px;
  background: #172228;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.tg-member-more:focus-within .tg-member-menu,
.tg-member-more:hover .tg-member-menu { display: block; }
.tg-member-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  padding: 6px 9px;
  background: transparent;
  color: #ecf2f5;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.tg-member-menu button i { width: 20px; color: #9eb0ba; }
.tg-member-menu button:hover { background: rgba(255,255,255,.06); }
.tg-member-menu button.danger { color: #ff7171; }

.tg-manage-tools { padding: 0 18px 16px; }
.tg-manage-row {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #edf3f6;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.tg-manage-row:hover { background: rgba(255,255,255,.04); }
.tg-add-members { display: block; margin-top: 8px; color: #94a7b0; font-size: 12px; }
.tg-add-members > span { display: block; margin-bottom: 7px; }
.tg-add-btn { margin-top: 9px; }
.tg-empty-members { padding: 18px; color: #84969f; font-size: 13px; }

[data-theme="light"] .tg-info-pane,
[data-theme="light"] .tg-info-scroll { background: #eef2f4; }
[data-theme="light"] .tg-profile-hero,
[data-theme="light"] .tg-action-grid { background: #ffffff; }
[data-theme="light"] .tg-profile-title,
[data-theme="light"] .tg-member-copy strong,
[data-theme="light"] .tg-settings-copy strong,
[data-theme="light"] .tg-section-head { color: #17212b; }
[data-theme="light"] .tg-action-tile { background: #f0f3f5; color: #17212b; }
[data-theme="light"] .tg-action-tile i { color: #526774; }
[data-theme="light"] .tg-info-block { background: #fff; }
[data-theme="light"] .tg-member-row:hover,
[data-theme="light"] button.tg-settings-row:hover { background: #f1f3f4; }
[data-theme="light"] .tg-settings-icon { color: #6d7f8a; }

@media (max-width: 520px) {
  .tg-info-pane { width: 100vw; }
  .tg-profile-hero { min-height: 210px; }
}


/* MTWS 2.3 media players */
.msg-media-block{margin-top:6px;max-width:min(520px,72vw);overflow:hidden;border-radius:12px;background:rgba(0,0,0,.12)}
.msg-video-player{display:block;width:100%;max-height:420px;background:#000;border-radius:12px;outline:none}
.msg-media-caption{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px;opacity:.9}
.msg-media-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-audio-block{padding:10px 12px;min-width:280px}
.msg-audio-title{display:flex;gap:8px;align-items:center;margin-bottom:7px;font-size:13px}
.msg-audio-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-audio-player{display:block;width:100%;height:36px}
.msg-audio-size{display:block;margin-top:4px;font-size:11px;opacity:.65}
@media(max-width:700px){.msg-media-block{max-width:78vw}.msg-audio-block{min-width:220px}.msg-video-player{max-height:300px}}
\n\n/* =========================================================\n   MTWS 2.4.2 — stable full-screen auth layout\n   ========================================================= */\n.tg-app.is-auth {\n  display: block !important;\n  width: 100vw !important;\n  min-width: 100vw !important;\n  height: 100vh !important;\n  min-height: 100vh !important;\n  overflow: hidden !important;\n}\n\n.auth-shell {\n  position: fixed !important;\n  inset: 0 !important;\n  z-index: 5000 !important;\n  width: 100vw !important;\n  min-width: 100vw !important;\n  height: 100vh !important;\n  min-height: 100vh !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  box-sizing: border-box !important;\n  margin: 0 !important;\n  padding: 24px !important;\n}\n\n.auth-card {\n  flex: 0 0 auto !important;\n  width: min(400px, calc(100vw - 48px)) !important;\n  max-width: 400px !important;\n  margin: 0 auto !important;\n}\n\n@media (max-width: 520px) {\n  .auth-shell {\n    padding: 16px !important;\n  }\n  .auth-card {\n    width: 100% !important;\n    max-width: 400px !important;\n  }\n}\n
/* ===== MTWS 2.7 account / settings ===== */
.profile-menu-sep{height:1px;background:rgba(255,255,255,.07);margin:6px 8px}
.profile-menu-item.danger{color:#ff7373}

.account-backdrop{position:fixed;inset:0;z-index:7000;background:rgba(4,10,18,.42);display:flex;justify-content:flex-end;backdrop-filter:blur(2px)}
.account-sheet{width:min(430px,100vw);height:100vh;background:#101b2b;border-left:1px solid rgba(255,255,255,.07);box-shadow:-18px 0 42px rgba(0,0,0,.28);display:flex;flex-direction:column;animation:accountSlide .18s ease-out}
@keyframes accountSlide{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.account-topbar{height:58px;min-height:58px;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);background:#142235}
.account-topbar>strong{font-size:17px;flex:1}.account-back,.account-save{border:0;background:transparent;color:#dbe7ef;cursor:pointer}.account-back{width:36px;height:36px;border-radius:50%;font-size:17px}.account-back:hover{background:rgba(255,255,255,.07)}.account-save{color:#55a8ff;font-weight:700;padding:8px 4px}.account-save:disabled{opacity:.55}
.account-scroll{overflow:auto;padding-bottom:32px}.account-hero{padding:28px 22px 22px;text-align:center;background:linear-gradient(180deg,#162a41 0,#101b2b 100%)}
.account-avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(145deg,#42a5f5,#6d5ce7);display:grid;place-items:center;color:#fff;font-size:34px;font-weight:700;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.28)}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-hero-name{font-size:22px;font-weight:800;color:#f5f9fc}.account-hero-status{margin-top:5px;color:#55a8ff;font-size:13px}
.account-card{margin:12px 10px;background:#152235;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.045)}
.account-field{display:block;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.055)}.account-field:last-child{border-bottom:0}.account-field>span{display:block;color:#53a8ff;font-size:12px;margin-bottom:7px}.account-field input,.account-field textarea{width:100%;border:0;outline:0;background:transparent;color:#f1f6f9;font:inherit;resize:vertical}.account-field input::placeholder,.account-field textarea::placeholder{color:#71818e}
.account-row,.account-nav-row{width:100%;min-height:62px;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:#eef4f7;display:flex;align-items:center;gap:14px;padding:10px 16px;text-align:left}.account-row:last-child{border-bottom:0}.account-row:not(.static),.account-nav-row{cursor:pointer}.account-row:not(.static):hover,.account-nav-row:hover{background:rgba(255,255,255,.035)}.account-row>i:first-child,.account-nav-row>i:first-child{width:24px;text-align:center;color:#8ea5b7;font-size:18px}.account-row>div,.account-nav-row>span{flex:1;min-width:0}.account-row strong{display:block;font-size:14px}.account-row small{display:block;color:#8193a0;font-size:12px;margin-top:3px}.row-tail,.account-nav-row>i:last-child{color:#6d7e8b;font-size:12px}.account-info-card .account-row{min-height:58px}
.account-nav-row{margin:12px 10px;width:calc(100% - 20px);border-radius:12px;background:#152235;border:1px solid rgba(255,255,255,.045);font-weight:600}
.account-error{margin:10px 16px;color:#ff7777;font-size:13px}.account-logout{display:block;width:calc(100% - 20px);margin:12px 10px;border:0;border-radius:12px;background:#152235;color:#ff7272;padding:16px;text-align:left;font-weight:700;cursor:pointer}.account-logout:hover{background:rgba(255,80,80,.08)}
.tg-switch{width:38px;height:22px;border-radius:999px;background:#465460;padding:2px;display:flex;align-items:center;transition:.15s;flex:0 0 auto}.tg-switch span{width:18px;height:18px;border-radius:50%;background:#fff;display:block;transition:.15s}.tg-switch.on{background:#3390ec}.tg-switch.on span{transform:translateX(16px)}
body.mtws-compact .chat-row{min-height:54px;padding-top:6px;padding-bottom:6px}body.mtws-compact .chat-row .avatar{width:42px;height:42px;min-width:42px}body.mtws-compact .chat-row-title{font-size:14px}

[data-theme="light"] .account-sheet{background:#f4f6f8;color:#1f2b33;border-left-color:#dbe1e5}[data-theme="light"] .account-topbar{background:#fff;border-bottom-color:#e2e7ea}[data-theme="light"] .account-topbar>strong,[data-theme="light"] .account-back{color:#17232b}[data-theme="light"] .account-hero{background:linear-gradient(180deg,#edf6fc 0,#f4f6f8 100%)}[data-theme="light"] .account-hero-name{color:#17232b}[data-theme="light"] .account-card,[data-theme="light"] .account-nav-row,[data-theme="light"] .account-logout{background:#fff;border-color:#e4e9ec}[data-theme="light"] .account-row,[data-theme="light"] .account-nav-row{color:#17232b;border-bottom-color:#edf0f2}[data-theme="light"] .account-field{border-bottom-color:#edf0f2}[data-theme="light"] .account-field input,[data-theme="light"] .account-field textarea{color:#17232b}[data-theme="light"] .profile-menu-sep{background:#e8ecef}
@media(max-width:700px){.account-sheet{width:100vw}.account-backdrop{background:transparent}}

/* =========================================================
   MTWS 2.8 — Telegram-style main drawer
   ========================================================= */
.tg-drawer-trigger{
  width:40px;height:40px;min-width:40px;border-radius:50%;font-size:17px;
  color:var(--text-2);background:transparent;border:0;display:grid;place-items:center;
}
.tg-drawer-trigger:hover{background:var(--bg3);color:var(--text)}
.tg-drawer-layer{
  position:absolute;inset:0;z-index:6200;background:rgba(0,0,0,.34);
  overflow:hidden;
}
.tg-drawer{
  position:absolute;left:0;top:0;bottom:0;width:min(304px,86vw);display:flex;flex-direction:column;
  background:#202b33;color:#eef3f6;box-shadow:12px 0 32px rgba(0,0,0,.32);
  transform:translateX(0);overflow:hidden;
}
.tg-drawer-profile{
  position:relative;padding:20px 22px 16px;cursor:pointer;background:#202b33;
  border-bottom:1px solid rgba(255,255,255,.045)
}
.tg-drawer-avatar{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,#8b6df5,#6f55d9);font-size:20px;font-weight:800;color:white;
  margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)
}
.tg-drawer-avatar img{width:100%;height:100%;object-fit:cover}
.tg-drawer-name{font-size:15px;font-weight:700;line-height:1.3;padding-right:34px}
.tg-drawer-sub{margin-top:3px;color:#46c9b8;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:34px}
.tg-drawer-chevron{
  position:absolute;right:14px;bottom:17px;width:30px;height:30px;border-radius:50%;border:0;
  background:transparent;color:#8e9ba4;display:grid;place-items:center;cursor:pointer
}
.tg-drawer-chevron:hover{background:rgba(255,255,255,.06);color:#dce5ea}
.tg-drawer-menu{padding:7px 0;overflow:auto;flex:1;scrollbar-width:thin}
.tg-drawer-item{
  width:100%;height:42px;padding:0 20px;border:0;background:transparent;color:#edf3f6;
  display:flex;align-items:center;gap:18px;text-align:left;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .12s ease
}
.tg-drawer-item:hover{background:rgba(255,255,255,.055)}
.tg-drawer-item>i:first-child{width:22px;text-align:center;color:#b7c1c8;font-size:17px}
.tg-drawer-item>span:nth-child(2){flex:1;min-width:0}
.tg-drawer-item.danger{color:#ff7c7c}
.tg-drawer-item.danger>i{color:#ff7c7c}
.tg-drawer-bottom{padding:7px 0;border-top:1px solid rgba(255,255,255,.055);flex:0 0 auto}
.tg-mini-switch{
  width:36px;height:20px;padding:2px;border-radius:999px;background:#56636b;display:flex;align-items:center;
  flex:0 0 auto;transition:.15s
}
.tg-mini-switch b{display:block;width:16px;height:16px;border-radius:50%;background:white;transition:.15s}
.tg-mini-switch.on{background:#2bbbad}.tg-mini-switch.on b{transform:translateX(16px)}
.tg-drawer-fade-enter-active,.tg-drawer-fade-leave-active{transition:opacity .16s ease}
.tg-drawer-fade-enter-from,.tg-drawer-fade-leave-to{opacity:0}
.tg-drawer-fade-enter-active .tg-drawer,.tg-drawer-fade-leave-active .tg-drawer{transition:transform .18s ease}
.tg-drawer-fade-enter-from .tg-drawer,.tg-drawer-fade-leave-to .tg-drawer{transform:translateX(-100%)}
[data-theme="light"] .tg-drawer{background:#fff;color:#1f2b33;box-shadow:12px 0 32px rgba(0,0,0,.18)}
[data-theme="light"] .tg-drawer-profile{background:#fff;border-bottom-color:#e8ecef}
[data-theme="light"] .tg-drawer-name{color:#17232b}
[data-theme="light"] .tg-drawer-item{color:#202c34}
[data-theme="light"] .tg-drawer-item>i:first-child{color:#687780}
[data-theme="light"] .tg-drawer-item:hover{background:#f2f5f7}
[data-theme="light"] .tg-drawer-bottom{border-top-color:#e8ecef}
[data-theme="light"] .tg-drawer-chevron{color:#7b8992}
@media(max-width:700px){.tg-drawer-layer{position:fixed}.tg-drawer{width:min(304px,88vw)}}


/* MTWS 2.8.1 — Telegram-style profile editing */
.account-avatar-edit{position:relative;cursor:pointer;border:0;padding:0}
.account-avatar-edit>input{display:none}
.account-avatar-overlay{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(8,18,28,.58);color:#fff;opacity:0;transition:opacity .15s ease}
.account-avatar-overlay i{font-size:23px}.account-avatar-overlay small{font-size:11px;font-weight:700}
.account-avatar-edit:hover .account-avatar-overlay,.account-avatar-edit.busy .account-avatar-overlay{opacity:1}
.account-avatar-edit.busy{pointer-events:none;opacity:.72}
.account-avatar-remove{border:0;background:transparent;color:#ff6b6b;font-size:12px;cursor:pointer;margin:-5px auto 10px;display:block}
.account-avatar-remove:hover{text-decoration:underline}
.account-field-editable>span i{margin-right:5px}
.account-avatar-advanced{border-top:1px solid rgba(255,255,255,.055)}
.account-avatar-advanced summary{padding:11px 16px;color:#8093a2;font-size:12px;cursor:pointer;list-style:none}
.account-avatar-advanced summary::-webkit-details-marker{display:none}
.account-avatar-advanced[open] summary{color:#53a8ff}
[data-theme="light"] .account-avatar-advanced{border-top-color:#edf0f2}
[data-theme="light"] .account-avatar-overlay{background:rgba(20,30,38,.52)}
\n\n/* ===== MTWS 2.9 media albums / reactions ===== */\n.msg-files.is-album {\n  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px;\n  width:min(520px,72vw); overflow:hidden; border-radius:12px;\n}\n.msg-files.is-album .msg-file-btn { margin:0; width:100%; min-width:0; border-radius:4px; overflow:hidden; }\n.msg-files.is-album .msg-file-thumb { width:100%; height:180px; max-width:none; }\n.msg-files.is-album .msg-file-thumb img { width:100%; height:100%; object-fit:cover; display:block; }\n.msg-files.is-album .msg-file-btn:nth-child(3):last-child { grid-column:1 / -1; }\n.msg-reaction-emoji, .msg-reaction-count { cursor:pointer; }\n.msg-reaction-count { min-width:18px; text-align:center; }\n.reaction-modal-emoji { font-size:20px; line-height:1; }\n.media-viewer-video { max-width:min(92vw,1280px); max-height:86vh; border-radius:10px; background:#000; }\n@media (max-width:640px){\n  .msg-files.is-album { width:min(88vw,460px); }\n  .msg-files.is-album .msg-file-thumb { height:140px; }\n}\n
/* MTWS 3.0 group roles / permissions */
.tg-permission-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);margin:8px 0 12px}
.tg-permission-copy{display:flex;align-items:center;gap:12px;min-width:0}
.tg-permission-copy>i{width:24px;text-align:center;color:var(--accent,#4da3ff)}
.tg-permission-copy span{display:flex;flex-direction:column;min-width:0}
.tg-permission-copy strong{font-size:14px}
.tg-permission-copy small{font-size:12px;opacity:.65;margin-top:2px}
.tg-switch{position:relative;width:42px;height:24px;flex:0 0 auto}
.tg-switch input{position:absolute;opacity:0;pointer-events:none}
.tg-switch span{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.15);cursor:pointer;transition:.16s}
.tg-switch span:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.16s}
.tg-switch input:checked+span{background:var(--accent,#3390ec)}
.tg-switch input:checked+span:after{transform:translateX(18px)}
.composer-readonly{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:rgba(255,255,255,.62);background:rgba(10,18,28,.92)}
.composer.is-readonly{opacity:.72}
.composer.is-readonly .composer-input{cursor:not-allowed}