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

:root {
  --font: 'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --bg: #0f1419;
  --panel: #1a2332;
  --panel-2: #121a26;
  --border: #2a3648;
  --text: #e8eef7;
  --muted: #8b9bb4;
  --accent: #3d8bfd;
  --accent-dim: #2a6fd6;
  --bubble-me: #1e3a5f;
  --bubble-them: #243044;
  --danger: #f07178;
  --ok: #4ade80;
  --radius: 14px;
  --radius-sm: 10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(61, 139, 253, 0.22);
  --scrollbar-thumb-hover: rgba(61, 139, 253, 0.38);
}

html {
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

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

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* فایرفاکس: اسکرول‌بار نازک و بدون ظاهر ضخیم ویندوز روی پنل‌های اصلی */
.chat-media-grid,
.log-scroller,
.log-scroller--global,
.att-pane,
.forward-sheet-list,
.peer-sheet-body,
.msg-ctx-actions {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 10% -10%, #1a2740 0%, var(--bg) 55%);
  color: var(--text);
  line-height: 1.55;
}

body.app-open {
  overflow: hidden;
  height: 100%;
}

.hidden {
  display: none !important;
}

a {
  color: var(--accent);
}

/* ——— بوت بدون فلش لاگین (اگر توکن در localStorage باشد) ——— */
html.kiasho-has-session #authView {
  display: none !important;
}

.boot-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99990;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.85rem;
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(61, 139, 253, 0.18), transparent 55%),
    linear-gradient(165deg, #0b1118 0%, #0f1419 45%, #0a1016 100%);
  color: #e8eef7;
}

html.kiasho-has-session:not(.kiasho-app-ready) #bootSplash {
  display: flex;
}

html.kiasho-app-ready #bootSplash,
html:not(.kiasho-has-session) #bootSplash {
  display: none !important;
}

.boot-splash-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #f4f8ff;
  background: linear-gradient(145deg, #3d8bfd, #1f5fcc);
  box-shadow: 0 10px 28px rgba(31, 95, 204, 0.35);
  animation: boot-splash-pulse 1.15s ease-in-out infinite;
}

.boot-splash-text {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.78;
}

@keyframes boot-splash-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.96);
    opacity: 0.88;
  }
}

/* ——— صفحهٔ ورود / ثبت‌نام ——— */
.auth-layout {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1rem + var(--safe-t)) 1rem calc(1.5rem + var(--safe-b));
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, var(--panel) 45%, #141c28 100%);
  border: 1px solid rgba(61, 139, 253, 0.22);
  border-radius: 20px;
  padding: 1.5rem 1.35rem 1.45rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(61, 139, 253, 0.06);
}

@media (min-width: 480px) {
  .auth-card {
    padding: 1.75rem 1.6rem 1.6rem;
  }
}

.auth-card-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.35rem;
}

.auth-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1e3a8a 0%, var(--accent) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(61, 139, 253, 0.35);
}

.auth-card-titles {
  min-width: 0;
}

.auth-title {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.auth-sub {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
}

.auth-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  margin-bottom: 1.35rem;
  background: var(--panel-2);
  border-radius: 14px;
  border: 1px solid var(--border);
}

.auth-seg-btn {
  border: none;
  margin: 0;
  padding: 0.65rem 0.5rem;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}

.auth-seg-btn:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.auth-seg-btn.active {
  color: #fff;
  background: linear-gradient(180deg, #4f96ff 0%, var(--accent) 100%);
  box-shadow: 0 4px 16px rgba(61, 139, 253, 0.35);
}

.auth-form {
  display: block;
}

.auth-banner {
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.auth-banner.err {
  background: rgba(240, 113, 120, 0.12);
  border: 1px solid rgba(240, 113, 120, 0.35);
  color: #fecaca;
}

.auth-banner.auth-blocked {
  background: rgba(255, 159, 67, 0.1);
  border: 1px solid rgba(255, 159, 67, 0.35);
  color: #ffd8a8;
}

.auth-blocked-reason {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.auth-field {
  margin-bottom: 1rem;
}

.auth-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
}

.auth-optional {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.78rem;
}

.auth-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(18, 26, 38, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.auth-input::placeholder {
  color: #64748b;
}

.auth-input:hover {
  border-color: #3d4f66;
}

.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.22);
}

.auth-micro {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

.btn-auth-primary {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #4f96ff 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s;
}

.btn-auth-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.45);
}

.btn-auth-primary:active {
  transform: scale(0.99);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.15rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.88rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.field textarea {
  min-height: 4.5rem;
  resize: vertical;
  max-height: 12rem;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0.55rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  width: 100%;
}

/* دکمهٔ اصلی در بعضی ردیف‌ها عرض خودکار (پیش‌فرض کلاس btn-primary هنوز 100% است) */
.search-bar .btn-primary,
.voip-row .btn-primary,
.peer-sheet-actions .btn-primary {
  width: auto;
}

.btn-primary:hover {
  background: var(--accent-dim);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--muted);
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  font-weight: 600;
}

.btn-download {
  background: var(--accent);
  color: #fff !important;
  border: none;
  font-size: 0.8rem;
}

.btn-download:hover {
  background: var(--accent-dim);
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.err {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0 0 0.65rem;
}

.app-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
}

.app-inner {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.75rem 0.45rem;
}

/* دسکتاپ: منو همیشه کنار محتوا؛ موبایل همان دراور تمام‌صفحه */
    @media (min-width: 920px) {
      .app-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(200px, 228px);
    grid-template-rows: auto auto 1fr;
    max-width: min(1280px, 100%);
    column-gap: 0.65rem;
    align-items: stretch;
  }

  .app-inner > .install-banner {
    grid-column: 1 / -1;
    grid-row: 1;
  }

      .app-inner > .app-shell-bar {
        grid-column: 1;
        grid-row: 2;
      }

      .app-inner > .msg-select-bar {
        grid-column: 1;
        grid-row: 2;
      }

  .app-inner > .nav-drawer {
        grid-column: 2;
    grid-row: 2 / -1;
    position: relative;
    inset: auto;
    z-index: 2;
    pointer-events: auto !important;
    visibility: visible !important;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

      .app-inner > .main-split {
        grid-column: 1;
        grid-row: 3;
        min-height: 0;
        align-self: stretch;
      }

  .nav-drawer-backdrop {
    display: none !important;
  }

  .nav-drawer-panel {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    flex: 1;
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: none;
  }

  .app-shell-hamburger {
    display: none !important;
  }

  body.nav-drawer-open {
    overflow: auto;
  }
}

@media (min-width: 640px) {
  .app-inner {
    padding: 0.65rem 1.1rem 0.55rem;
  }
}

/* نوار باریک بالا + همبرگر (ناوبری داخل دراور مثل تلگرام) */
.app-shell-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(16, 24, 36, 0.85) 0%, rgba(16, 24, 36, 0) 100%);
}

.main-split {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.att-dock {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: 380px;
  max-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(10, 16, 24, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: translateX(-12px);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    max-width 0.2s ease,
    margin 0.2s ease;
}

.att-dock.att-dock--open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  max-width: 380px;
  margin-inline-end: 0.85rem;
}

.stack {
  flex: 1;
  min-width: 0;
  transition: flex-basis 0.2s ease;
}

.att-dock .att-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.att-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

@media (max-width: 1023px) {
  /* بسته: اصلاً در جریان لایوت نباشد تا چت تمام‌عرض بماند */
  .att-dock:not(.att-dock--open) {
    display: none !important;
  }

  .att-dock.att-dock--open {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 80;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: none;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* موبایل / تبلت باریک: شل تمام‌عرض مثل قبل */
@media (max-width: 919px) {
  .app-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .main-split,
  .stack {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .panel-screen {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .app-shell-bar {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}

.app-shell-back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.app-shell-back:hover {
  background: rgba(61, 139, 253, 0.12);
  border-color: rgba(61, 139, 253, 0.35);
}

/* دکمهٔ منو: سه خط مینیمال (بدون کاراکتر ☰) */
.app-shell-hamburger {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.app-shell-hamburger:hover {
  background: rgba(61, 139, 253, 0.12);
  border-color: rgba(61, 139, 253, 0.35);
}

.app-shell-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 1.1rem;
}

.app-shell-burger-line {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.92;
}

.topbar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-icon-wrap.is-avatar {
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
}

.topbar-icon {
  width: 22px;
  height: 22px;
}

.topbar-icon.is-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.topbar-peer-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 26, 38, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  cursor: default;
}

.topbar-peer-avatar-wrap.is-clickable {
  cursor: pointer;
}

.topbar-peer-avatar-wrap.is-clickable:hover {
  border-color: rgba(74, 222, 128, 0.35);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.12);
}

.topbar-peer-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.topbar-peer-avatar-ph {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: #fff;
  background: radial-gradient(circle at 30% 20%, rgba(61, 139, 253, 0.85) 0%, rgba(42, 111, 214, 0.95) 60%);
}

.topbar-lines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.topbar-title {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.topbar-sub {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.topbar-members {
  width: 2.95rem;
  height: 2.55rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 0.25rem;
  padding: 0;
  flex-shrink: 0;
}

.topbar-members:hover {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.1);
}

.topbar-members.is-open {
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16);
}

.topbar-members-ic,
.topbar-members-chev {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

.topbar-members-chev {
  width: 18px;
  height: 18px;
  opacity: 0.92;
}

.members-pop {
  position: fixed;
  z-index: 1216;
  width: min(92vw, 360px);
  max-height: min(70vh, 520px);
  direction: rtl;
  background: rgba(18, 26, 38, 0.92);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.members-pop-loading {
  padding: 1.1rem 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.members-pop-spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(74, 222, 128, 0.9);
  animation: members-spin 0.9s linear infinite;
}

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

.members-sheet-loading {
  padding: 1.1rem 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.members-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.members-pop-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.members-pop-online {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--ok);
  direction: rtl;
  unicode-bidi: plaintext;
}

.members-pop-list {
  padding: 0.55rem 0.55rem 0.75rem;
  overflow-y: auto;
  max-height: min(56vh, 420px);
}

.members-pop-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 0.45rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  text-align: start;
}

.members-pop-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.members-pop-av {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex: 0 0 auto;
  position: relative;
}

.members-pop-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.members-pop-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(18, 26, 38, 0.95);
  z-index: 3;
}

.members-pop-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.members-pop-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.members-pop-name {
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members-pop-role {
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(74, 222, 128, 0.95);
  white-space: nowrap;
}

.members-pop-sub {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  unicode-bidi: plaintext;
}

.members-pop-sub.is-online {
  color: rgba(74, 222, 128, 0.95);
}

.members-pop-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem 0.55rem;
}

.members-pop-all {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 238, 247, 0.95);
  border-radius: 14px;
  padding: 0.55rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  font-weight: 900;
}

.members-pop-all:hover {
  background: rgba(255, 255, 255, 0.07);
}

.members-pop-all-ic {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
}

.topbar-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.topbar-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 26, 38, 0.75);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.topbar-search-input:focus {
  outline: none;
  border-color: rgba(61, 139, 253, 0.6);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.18);
}

.topbar-search-count {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0 0.25rem;
  direction: rtl;
  unicode-bidi: plaintext;
}

.topbar-search-btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.75);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.topbar-search-btn:hover {
  border-color: rgba(61, 139, 253, 0.35);
  background: rgba(61, 139, 253, 0.12);
}

.topbar-search-mode .topbar-main,
.topbar-search-mode .topbar-actions {
  display: none;
}

.chat-mark {
  background: rgba(255, 215, 0, 0.35);
  border-radius: 6px;
  padding: 0 0.12rem;
}

.chat-mark.chat-mark--active {
  background: rgba(255, 215, 0, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

.topbar-act {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.75);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.topbar-act:hover {
  border-color: rgba(61, 139, 253, 0.35);
  background: rgba(61, 139, 253, 0.12);
}

.topbar-act-ic {
  width: 20px;
  height: 20px;
  display: block;
}

.topbar-act-ic,
.side-nav-ic,
.topbar-icon,
.composer-ic {
  filter: brightness(0) invert(1);
}

.send-ic,
.verified-badge,
.msg-verified {
  filter: none;
}

/* دراور ناوبری: همیشه از لبهٔ فیزیکی چپ (بیرون چپ → داخل؛ بستن → بیرون چپ) */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  visibility: hidden;
}

.nav-drawer.nav-drawer--open {
  pointer-events: auto;
  visibility: visible;
}

body.nav-drawer-open {
  overflow: hidden;
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: pointer;
}

.nav-drawer--open .nav-drawer-backdrop {
  opacity: 1;
}

    .nav-drawer-panel {
      position: absolute;
      top: 0;
      bottom: 0;
      left: auto;
      right: 0;
  z-index: 1;
  width: min(300px, 88vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem calc(0.85rem + var(--safe-b));
  padding-top: calc(0.75rem + var(--safe-t));
  background: var(--panel);
      border-left: 1px solid var(--border);
      box-shadow: -10px 0 32px rgba(0, 0, 0, 0.35);
      transform: translate3d(105%, 0, 0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-drawer--open .nav-drawer-panel {
  transform: translate3d(0, 0, 0);
}

    .nav-drawer-head {
      flex-shrink: 0;
      padding-bottom: 0.65rem;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-user {
      width: 100%;
      text-align: start;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.65rem 0.65rem;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(165deg, rgba(18, 26, 38, 0.85) 0%, rgba(15, 20, 25, 0.6) 100%);
      cursor: pointer;
          direction: ltr;
    }

    .sidebar-user:hover {
      border-color: rgba(61, 139, 253, 0.28);
      background: linear-gradient(165deg, rgba(18, 26, 38, 0.92) 0%, rgba(15, 20, 25, 0.7) 100%);
    }

    .sidebar-user-av {
      position: relative;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--panel-2);
          overflow: visible;
      flex-shrink: 0;
    }

    .sidebar-user-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
          border-radius: inherit;
    }

    .sidebar-user-avatar-ph {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #dbeafe;
      background: linear-gradient(145deg, var(--bubble-me) 0%, #152a45 100%);
          border-radius: inherit;
    }

    .sidebar-user-status-dot {
      position: absolute;
          bottom: -1px;
          right: -1px;
          width: 12px;
          height: 12px;
      border-radius: 50%;
      background: var(--ok);
          box-shadow:
            0 0 0 2px var(--panel),
            0 2px 8px rgba(0, 0, 0, 0.5);
          z-index: 2;
    }

    .sidebar-user-text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
          direction: ltr;
          text-align: left;
    }

    .sidebar-user-name-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
          width: 100%;
          justify-content: flex-start;
    }

    .sidebar-user-name {
      font-weight: 800;
      font-size: 0.98rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
          direction: rtl;
          unicode-bidi: plaintext;
          text-align: left;
    }

    .sidebar-user-handle {
          display: block;
          width: 100%;
      font-size: 0.78rem;
      color: var(--muted);
      direction: ltr;
      text-align: start;
    }

    .sidebar-user-role {
          display: block;
          width: 100%;
      font-size: 0.76rem;
      color: rgba(232, 238, 247, 0.8);
          direction: rtl;
          unicode-bidi: plaintext;
          text-align: left;
    }

.nav-drawer-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.nav-drawer-sub {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-word;
}

.nav-drawer-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
}

    .nav-drawer-nav {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.28rem;
      min-height: 0;
      padding-top: 0.25rem;
    }

.nav-chip.nav-chip--drawer {
  width: 100%;
  display: block;
  text-align: start;
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
  white-space: normal;
  line-height: 1.35;
}

.side-nav-item.nav-chip.nav-chip--drawer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  text-align: start;
  border-radius: var(--radius);
  padding: 0.58rem 0.7rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

.side-nav-item.nav-chip.nav-chip--drawer:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.side-nav-item.nav-chip.nav-chip--drawer.active {
  color: #eafff5;
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.12));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.side-nav-ic {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.95;
}

.nav-drawer-extras {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-drawer-extras-label {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-drawer-extras-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
}

.nav-drawer-extras-btn--danger {
  color: var(--danger);
  border-color: rgba(255, 120, 120, 0.35);
}

.subtle {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.nav-chip {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.nav-chip.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(61, 139, 253, 0.2);
}

.stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.settings-head {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.settings-title {
  margin: 0 0 0.35rem;
  font-weight: 800;
  font-size: 0.95rem;
}

.settings-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.75rem;
}

.settings-btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}

.settings-btn--danger {
  color: var(--danger);
  border-color: rgba(255, 120, 120, 0.35);
}

.guide-head {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.guide-title {
  margin: 0 0 0.35rem;
  font-weight: 800;
  font-size: 0.95rem;
}

.guide-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  -webkit-overflow-scrolling: touch;
}

.guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0 0.55rem;
  background: linear-gradient(to bottom, var(--bg, #0b1220) 70%, transparent);
}

.guide-toc-btn {
  border: 1px solid var(--border);
  background: var(--panel, rgba(255, 255, 255, 0.04));
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.guide-toc-btn:hover,
.guide-toc-btn:focus-visible {
  border-color: rgba(120, 180, 255, 0.45);
}

.guide-sec {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.02);
}

.guide-sec h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 800;
}

.guide-sec p {
  margin: 0 0 0.55rem;
  line-height: 1.65;
  font-size: 0.88rem;
  opacity: 0.95;
}

.guide-ol,
.guide-ul {
  margin: 0 0 0.65rem;
  padding-inline-start: 1.2rem;
  line-height: 1.7;
  font-size: 0.88rem;
}

.guide-dl {
  margin: 0;
}

.guide-dl dt {
  font-weight: 800;
  margin-top: 0.65rem;
  font-size: 0.88rem;
}

.guide-dl dt:first-child {
  margin-top: 0;
}

.guide-dl dd {
  margin: 0.2rem 0 0;
  opacity: 0.9;
  line-height: 1.6;
  font-size: 0.86rem;
}

.guide-code {
  direction: ltr;
  text-align: left;
  margin: 0.45rem 0 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.guide-flow {
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(120, 180, 255, 0.35);
  background: rgba(80, 140, 255, 0.08);
}

.guide-note {
  font-size: 0.84rem;
  opacity: 0.9;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 200, 80, 0.25);
  background: rgba(255, 190, 60, 0.06);
}

.guide-action {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.guide-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.guide-table th,
.guide-table td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  text-align: right;
  vertical-align: top;
}

.guide-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
}

.guide-table td[dir='ltr'] {
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}

.att-head {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.att-title {
  margin: 0;
  font-weight: 900;
  font-size: 0.95rem;
}

.att-tabs {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.att-tab {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.att-tab.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(61, 139, 253, 0.2);
}

.att-presence-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.att-presence-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  flex: 1;
}

.att-presence-cards {
  margin-top: 0.2rem;
}

.att-presence-list .att-presence-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: right;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.att-presence-list .att-presence-row + .att-presence-row {
  margin-top: 0.4rem;
}

.att-presence-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel);
  flex: 0 0 auto;
}

.att-presence-av--ph {
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
}

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

.att-presence-name {
  font-weight: 800;
  font-size: 0.88rem;
}

.att-presence-sub {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.att-presence-badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
}

.att-presence-badge--ok {
  color: #1f8f63;
  border-color: rgba(31, 143, 99, 0.35);
  background: rgba(31, 143, 99, 0.1);
}

.att-presence-badge--warn {
  color: #b8860b;
  border-color: rgba(184, 134, 11, 0.35);
  background: rgba(184, 134, 11, 0.12);
}

.att-presence-badge--bad {
  color: #c44;
  border-color: rgba(204, 68, 68, 0.35);
  background: rgba(204, 68, 68, 0.1);
}

.att-presence-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.att-presence-alert {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: var(--panel-2);
  font-size: 0.8rem;
}

.att-presence-alert img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}

.att-presence-alert-body {
  flex: 1;
  min-width: 0;
}

.att-presence-alert-meta {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}

.att-presence-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--panel-2);
}

.att-presence-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.att-presence-detail-head p {
  margin: 0;
  font-weight: 800;
}

.att-presence-detail-meta {
  margin: 0.35rem 0 0.55rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.att-presence-timeline {
  max-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.att-presence-tl-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

.att-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.att-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.att-pane::-webkit-scrollbar {
  width: 5px;
}

.att-pane::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
  margin: 4px 0;
}

.att-pane::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: none;
}

.att-pane::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.att-date {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.att-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.att-card {
  border: 1px solid var(--border);
  background: rgba(18, 26, 38, 0.55);
  border-radius: var(--radius);
  padding: 0.65rem 0.7rem;
}

.att-card-label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 800;
}

.att-card-num {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 950;
}

.att-card--ok .att-card-num {
  color: rgba(74, 222, 128, 0.95);
}

.att-card--bad .att-card-num {
  color: rgba(248, 113, 113, 0.95);
}

.att-card--warn .att-card-num {
  color: rgba(251, 191, 36, 0.95);
}

.att-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.att-hint {
  margin: 0;
  flex: 1 1 auto;
}

.att-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 0.15rem;
}

.att-list-head p {
  margin: 0;
  font-weight: 900;
  font-size: 0.85rem;
}

.att-members {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.att-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(18, 26, 38, 0.35);
  border-radius: var(--radius);
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: inherit;
}

.att-item:hover {
  background: rgba(18, 26, 38, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

.att-av {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  flex: 0 0 auto;
}

.att-av img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.att-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(18, 26, 38, 0.95);
  z-index: 3;
}

.att-status-dot--ok {
  background: var(--ok);
}

.att-status-dot--bad {
  background: rgba(248, 113, 113, 0.95);
}

.att-status-dot--warn {
  background: rgba(251, 191, 36, 0.95);
}

.att-status-dot--pend {
  background: rgba(167, 139, 250, 0.95);
}

.att-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.att-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.att-name {
  font-size: 0.86rem;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.att-state {
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

.att-state--ok {
  color: rgba(74, 222, 128, 0.95);
}

.att-state--bad {
  color: rgba(248, 113, 113, 0.95);
}

.att-state--warn {
  color: rgba(251, 191, 36, 0.95);
}

.att-state--pend {
  color: rgba(167, 139, 250, 0.98);
}

.att-meta {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-meta.att-meta--wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.att-report-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.att-report-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 220px;
}

.att-report-field span {
  font-size: 0.78rem;
  font-weight: 850;
  color: var(--muted);
}

.att-report-field input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
  font: inherit;
}

.att-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.att-cal-nav {
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 999px;
  font-weight: 950;
  font-size: 1.15rem;
  line-height: 1;
}

.att-cal-title {
  margin: 0;
  font-weight: 950;
  font-size: 0.9rem;
  text-align: center;
  flex: 1 1 auto;
}

.att-cal-dash {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.35);
  border-radius: 18px;
  padding: 0.95rem 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.att-cal-now-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.att-cal-now-clock {
  margin: 0;
  font-size: 2.15rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-align: center;
}

.att-cal-now-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 900;
}

.att-cal-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.95);
}

.att-cal-dot--ok {
  background: rgba(74, 222, 128, 0.95);
}

.att-cal-dot--warn {
  background: rgba(251, 191, 36, 0.95);
}

.att-cal-dot--bad {
  background: rgba(248, 113, 113, 0.95);
}

.att-cal-dot--hol {
  background: rgba(148, 163, 184, 0.95);
}

.att-cal-dot--pend {
  background: rgba(167, 139, 250, 0.95);
}

.att-cal-now-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.att-cal-report {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.35);
  border-radius: 18px;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.att-cal-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.att-cal-report-title {
  margin: 0;
  font-weight: 950;
  font-size: 0.9rem;
}

.att-cal-report-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.att-cal-report-rows {
  display: grid;
  gap: 0.55rem;
}

.att-cal-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--muted);
}

.att-cal-report-row > span:last-child {
  color: var(--text);
  font-weight: 950;
}

.att-cal-cal {
  display: grid;
  gap: 0.75rem;
}

.att-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 900;
}

.att-cal-weekdays > div {
  text-align: center;
  padding: 0.15rem 0;
}

.att-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.att-cal-cell {
  position: relative;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 0.2rem 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.att-cal-cell:hover {
  background: rgba(18, 26, 38, 0.45);
}

.att-cal-cell--empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.05);
  cursor: default;
}

.att-cal-cell--empty:hover {
  background: transparent;
}

.att-cal-cell.is-selected {
  background: rgba(18, 26, 38, 0.55);
}

.att-cal-cell.is-today {
  background: rgba(74, 222, 128, 0.07);
}

.att-cal-daynum {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 950;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.att-cal-cell.is-selected .att-cal-daynum {
  border-color: rgba(61, 139, 253, 0.85);
  box-shadow: 0 0 0 2px rgba(61, 139, 253, 0.2);
}

.att-cal-cell--present .att-cal-daynum {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.35);
  color: rgba(235, 255, 245, 0.98);
}

.att-cal-cell--absent .att-cal-daynum {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.35);
  color: rgba(255, 238, 238, 0.98);
}

.att-cal-cell--leave .att-cal-daynum {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.35);
  color: rgba(255, 250, 230, 0.98);
}

.att-cal-cell--pending .att-cal-daynum {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.42);
  color: rgba(245, 243, 255, 0.98);
}

.att-cal-cell--holiday .att-cal-daynum {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.32);
  color: rgba(241, 245, 249, 0.96);
}

.att-cal-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.att-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.att-cal-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.95);
}

.att-cal-legend-dot--ok {
  background: rgba(74, 222, 128, 0.95);
}

.att-cal-legend-dot--bad {
  background: rgba(248, 113, 113, 0.95);
}

.att-cal-legend-dot--warn {
  background: rgba(251, 191, 36, 0.95);
}

.att-cal-legend-dot--hol {
  background: rgba(148, 163, 184, 0.95);
}

.att-cal-legend-dot--pend {
  background: rgba(167, 139, 250, 0.95);
}

.att-cal-legend-dot--noreport {
  background: rgba(251, 146, 60, 0.95);
}

.att-cal-badge {
  position: absolute;
  top: 2px;
  left: 3px;
  min-width: 0.85rem;
  height: 0.85rem;
  padding: 0 0.15rem;
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 0.85rem;
  text-align: center;
  pointer-events: none;
}

.att-cal-badge--noreport {
  background: rgba(251, 146, 60, 0.92);
  color: #1a1208;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.att-work-missing {
  color: #fb923c;
  font-style: normal;
  font-weight: 600;
}

.att-user-cal-legend {
  margin-top: -0.25rem;
}

.att-user-section {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(18, 26, 38, 0.35);
  overflow: visible;
}

.att-user-section.hidden {
  display: none !important;
}

.att-user-section-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 700;
  user-select: none;
}

.att-user-section-summary::-webkit-details-marker {
  display: none;
}

.att-user-section-summary::after {
  content: '›';
  float: inline-end;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.att-user-section[open] > .att-user-section-summary::after {
  transform: rotate(-90deg);
}

.att-user-section-body {
  padding: 0 0.65rem 0.65rem;
  overflow: visible;
}

.att-user-section-body .att-cal-report-rows {
  overflow: visible;
}

.att-user-section-body .att-user-day-label {
  margin-top: 0;
}

.att-adj-form--sheet {
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
}

.att-adj-form--sheet .btn {
  justify-self: end;
}

.log-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#screenGlobal .chat-scroller-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-scroller-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-load-older {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  max-width: calc(100% - 1rem);
}

.chat-load-older-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 24, 36, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}

.chat-load-older-spin {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(125, 211, 252, 0.95);
  animation: chat-load-spin 0.75s linear infinite;
  flex: 0 0 auto;
}

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

.scroll-to-bottom-btn {
  position: absolute;
  bottom: 0.65rem;
  inset-inline-end: 0.65rem;
  z-index: 15;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(18, 26, 38, 0.94);
  color: #dbe8ff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.scroll-to-bottom-btn:hover {
  background: rgba(61, 139, 253, 0.95);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.scroll-to-bottom-btn:active {
  transform: scale(0.96);
}

.scroll-to-bottom-btn.hidden {
  display: none;
}

@media (max-width: 639px) {
  .scroll-to-bottom-btn {
    bottom: 1rem;
    inset-inline-end: 0.85rem;
    width: 2.65rem;
    height: 2.65rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  }

  body.msg-select-mode .scroll-to-bottom-btn {
    bottom: 1rem;
  }
}

/* اسکرول چت عمومی — نازک و هماهنگ با تم */
.log-scroller--global {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.log-scroller--global::-webkit-scrollbar {
  width: 5px;
}

.log-scroller--global::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
  margin: 4px 0;
}

.log-scroller--global::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: none;
}

.log-scroller--global::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.log {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}

@media (max-width: 639px) {
  .log {
    gap: 0.7rem;
    padding: 0.5rem 0.45rem 0.85rem;
    width: 100%;
    box-sizing: border-box;
  }

  .msg-wrap {
    max-width: min(94%, calc(100% - 0.35rem));
    gap: 0.35rem;
  }

  .msg-avatar {
    width: 30px;
    height: 30px;
  }

  .msg {
    padding: 0.5rem 0.65rem 0.55rem;
    border-radius: 14px;
  }

  .msg-tools {
    margin-top: 0.25rem;
    padding-top: 0.3rem;
    gap: 0.18rem;
  }

  .msg-save-text {
    display: none;
  }

  .msg-save-btn {
    width: auto;
    min-width: 2rem;
    justify-content: center;
    gap: 0;
    padding: 0.2rem 0.35rem;
  }

  .msg-tools--receipts {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  .msg-tools--receipts .msg-tools-ticks {
    width: auto;
    flex: 0 0 auto;
  }

  .app-shell-bar {
    gap: 0.28rem;
    padding: 0.32rem 0.4rem;
    margin-bottom: 0.2rem;
  }

  .app-shell-back,
  .app-shell-hamburger {
    width: 2.3rem;
    height: 2.3rem;
  }

  .topbar-actions {
    gap: 0.18rem;
  }

  .topbar-act {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
  }

  .topbar-act-ic {
    width: 18px;
    height: 18px;
  }

  .topbar-main {
    gap: 0.4rem;
  }

  .topbar-peer-avatar-wrap,
  .topbar-icon-wrap {
    width: 34px;
    height: 34px;
  }

  .topbar-title {
    font-size: 0.9rem;
  }

  .topbar-sub {
    font-size: 0.72rem;
  }

  .composer {
    padding: 0.4rem 0.45rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  }

  .composer-bar {
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
    border-radius: 16px;
  }

  .composer-bar textarea {
    appearance: none;
    -webkit-appearance: none;
  }

  .composer-mid textarea {
    appearance: none;
    -webkit-appearance: none;
  }

  body.msg-select-mode .composer {
    visibility: hidden;
    pointer-events: none;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: none;
  }
}

@media (min-width: 640px) {
  .log {
    padding: 0.95rem 1.05rem;
  }
}

.msg-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: fit-content;
  max-width: min(94vw, 560px);
  align-self: flex-start;
}

@media (min-width: 900px) {
  .msg-wrap {
    max-width: min(400px, 58%);
  }
}

.msg-wrap.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

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

.msg-avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.msg {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  background: var(--bubble-them);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem 0.6rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
}

.msg-wrap.me .msg {
  background: var(--bubble-me);
}

.msg-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.28rem;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.msg-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
}

.msg-save-btn:hover {
  border-color: transparent;
}

.msg-save-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
}

.msg-save-ic {
  flex: 0 0 auto;
  stroke: var(--muted);
  fill: transparent;
}

.msg-tools-ticks {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  line-height: 0;
  min-height: 0.7rem;
}

.msg-save-btn.is-saved .msg-save-ic {
  stroke: var(--accent);
  fill: var(--accent);
}

.msg-save-btn.is-anim .msg-save-ic {
  animation: bookmark-pop 220ms ease-out;
  transform-origin: 50% 50%;
}

@keyframes bookmark-pop {
  0% {
    transform: scale(0.85);
  }
  65% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.system {
  align-self: center;
  max-width: 96%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(36, 48, 68, 0.55);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.day-divider {
  align-self: center;
  max-width: 96%;
  width: min(92%, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.15rem 0;
}

.day-divider::before,
.day-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.day-divider-pill {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(232, 238, 247, 0.9);
  background: rgba(18, 26, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msg-head {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.msg-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.msg-ticks {
  display: inline-flex;
  align-items: center;
  color: rgba(139, 155, 180, 0.95);
  line-height: 0;
}

.msg-ticks--delivered {
  color: rgba(139, 155, 180, 0.95);
}

.msg-ticks--read {
  color: #53bdeb;
}

.msg-tick-ic {
  display: block;
}

.msg-ticks--sent .msg-tick-second {
  display: none;
}

.msg-tools-ticks .msg-ticks {
  margin: 0;
}

.msg-body {
  font-size: 0.92rem;
  max-width: min(100%, 36rem);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.msg-body .file-row {
  max-width: 100%;
}

.msg-media-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.msg-media-frame {
  width: 100%;
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
}

.msg-media-frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.msg-media-frame .msg-media-shell {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.msg-media-frame img,
.msg-media-frame video {
  display: block;
  width: 100%;
  max-height: min(38vh, 300px);
  object-fit: cover;
}

.msg-media-frame video {
  pointer-events: none;
}

.msg-media-chip {
  position: absolute;
  bottom: 0.55rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 0, 0, 0.55);
  direction: ltr;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msg-media-chip--left {
  left: 0.55rem;
}

.msg-media-chip--right {
  right: 0.55rem;
}

.msg-media-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.msg-media-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(232, 238, 247, 0.92);
  min-width: 0;
}

.msg-media-kind-ic {
  flex: 0 0 auto;
  opacity: 0.9;
}

.msg-media-kind-text {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.msg-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-media-play-btn {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.48);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msg-media-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.msg-media-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.4);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.msg-media-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-media-group-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(232, 238, 247, 0.95);
}

.msg-media-group-acts {
  display: flex;
  gap: 0.35rem;
}

.msg-media-group-act {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.7);
  color: rgba(232, 238, 247, 0.95);
  border-radius: 12px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.msg-media-group-act:hover {
  border-color: transparent;
  background: rgba(18, 26, 38, 0.92);
}

.msg-media-group-act--select {
  display: none;
}

.msg-media-group.is-select .msg-media-group-act--select {
  display: inline-flex;
}

.msg-media-group.is-select .msg-media-group-act--toggle {
  display: none;
}

.msg-media-group-list {
  display: flex;
  flex-direction: column;
}

.msg-media-group-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
}

.msg-media-group-item + .msg-media-group-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-media-group-check {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

.msg-media-group.is-select .msg-media-group-check {
  display: block;
}

.msg-media-group-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.msg-media-group-name {
  font-size: 0.86rem;
  font-weight: 750;
  color: rgba(232, 238, 247, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-media-group-meta {
  font-size: 0.75rem;
  color: var(--muted);
  direction: ltr;
  text-align: start;
}

.msg-media-group-item-acts {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.msg-media-group-item-act {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.7);
  color: rgba(232, 238, 247, 0.95);
  border-radius: 12px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.msg-media-group-item-act:hover {
  border-color: transparent;
  background: rgba(18, 26, 38, 0.92);
}

.msg-media-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
}

.msg-media-album-item {
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.msg-media-album-media {
  position: absolute;
  inset: 0;
}

.msg-media-album-media img,
.msg-media-album-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.msg-media-album-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.msg-media-album-play span {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msg-media-album-dur {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 0, 0, 0.55);
  direction: ltr;
}

.msg-media-album-dl {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.msg-media-album-dl:hover {
  border-color: transparent;
  background: rgba(0, 0, 0, 0.48);
}

.msg-media-album-check {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  display: none;
  z-index: 3;
}

.msg-media-group.is-select .msg-media-album-check {
  display: block;
}

.msg-media-act {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.7);
  color: rgba(232, 238, 247, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.msg-media-act:hover {
  border-color: transparent;
  background: rgba(18, 26, 38, 0.92);
}

.media-title {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.media img,
.media video {
  display: block;
  max-width: 100%;
  max-height: min(38vh, 300px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* صوت در حباب: کل عرض حباب، بدون بیرون‌زدن از گوشی */
.msg-media-voice {
  max-width: 100%;
  min-width: 0;
}

.msg-voice-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.35rem 0.45rem;
}

.msg-voice-play {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 1px solid rgba(61, 139, 253, 0.35);
  background: rgba(61, 139, 253, 0.18);
  color: rgba(232, 238, 247, 0.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-voice-wave {
  flex: 1;
  min-width: 0;
  height: 18px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(232, 238, 247, 0.35) 0 3px,
      rgba(232, 238, 247, 0.1) 3px 7px
    );
  position: relative;
  overflow: hidden;
  cursor: pointer;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.msg-voice-wave-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(34, 197, 94, 0.8) 0 3px,
      rgba(34, 197, 94, 0.15) 3px 7px
    );
}

.msg-voice-time {
  font-variant-numeric: tabular-nums;
  color: rgba(232, 238, 247, 0.85);
  font-weight: 800;
  min-width: 3.1rem;
  text-align: center;
  flex-shrink: 0;
}

.msg-voice-tg {
  width: min(420px, 100%);
  max-width: 100%;
  border-radius: 16px;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  direction: ltr;
  position: relative;
  overflow: hidden;
}

.msg-voice-tg audio {
  display: none;
}

.msg-voice-tg--me {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.36) 0%, rgba(22, 163, 74, 0.42) 100%);
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.msg-voice-tg--peer {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-voice-tg-play {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(232, 238, 247, 0.96);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-voice-tg--me .msg-voice-tg-play {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(34, 197, 94, 0.25);
}

.msg-voice-tg-wave {
  flex: 1;
  min-width: 140px;
  height: 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

.msg-voice-tg-wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.msg-voice-tg-dur {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.86rem;
  color: rgba(232, 238, 247, 0.92);
  flex-shrink: 0;
  min-width: 3.1rem;
  text-align: end;
}

.msg-audio-wrap {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.2rem 0.15rem;
}

.msg-audio-wrap .msg-media-loader {
  border-radius: var(--radius-sm);
}

.msg-audio-wrap.msg-media-shell--ready .msg-media-loader {
  opacity: 0;
  pointer-events: none;
}

.msg-body .msg-audio-wrap audio,
.msg-body audio,
.media audio {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.file-meta {
  font-size: 0.76rem;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.55rem 0.65rem 0.65rem;
  background: rgba(0, 0, 0, 0.2);
}

.composer-bar {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  direction: ltr;
  position: relative;
}

.composer-left {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.composer-ic-btn {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(232, 238, 247, 0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
}

.composer-ic-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8eef7;
}

.composer-ic {
  width: 18px;
  height: 18px;
  display: block;
}

.composer-bar textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 2.15rem;
  max-height: 4.7rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.42rem 0.35rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  direction: rtl;
}

.composer-mid {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.composer-mid textarea {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.voice-wave-canvas {
  position: absolute;
  left: 0.55rem;
  right: auto;
  width: calc(100% - 0.55rem - 4.1rem);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 22px;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.voice-wave-time {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.65rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.85rem;
  color: rgba(34, 197, 94, 0.95);
  opacity: 0;
  z-index: 3;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 3.2rem;
  text-align: right;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.voice-wave-play,
.voice-wave-cancel {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 26, 38, 0.9);
  color: rgba(232, 238, 247, 0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.voice-wave-play {
  right: 0.35rem;
  z-index: 4;
}

.voice-wave-cancel {
  left: 0.55rem;
  border-color: rgba(220, 53, 69, 0.32);
  background: rgba(220, 53, 69, 0.22);
  color: #ffd7dd;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 4;
}

.composer-bar.voice-mode-recording .composer-left,
.composer-bar.voice-mode-preview .composer-left {
  display: none;
}

.composer-bar.voice-mode-recording .send-split,
.composer-bar.voice-mode-preview .send-split {
  display: none;
}

.composer-bar.voice-mode-recording textarea,
.composer-bar.voice-mode-preview textarea {
  color: transparent;
  caret-color: transparent;
  user-select: none;
}

.composer-bar.voice-mode-recording .composer-mid textarea,
.composer-bar.voice-mode-preview .composer-mid textarea {
  position: relative;
  z-index: 1;
}

.composer-bar.voice-mode-recording textarea::placeholder,
.composer-bar.voice-mode-preview textarea::placeholder {
  color: transparent;
}

.composer-bar.voice-mode-recording .voice-wave-canvas,
.composer-bar.voice-mode-preview .voice-wave-canvas {
  opacity: 1;
}

.composer-bar.voice-mode-recording .voice-wave-time,
.composer-bar.voice-mode-preview .voice-wave-time {
  opacity: 1;
}

.composer-bar.voice-mode-preview .voice-wave-play,
.composer-bar.voice-mode-preview .voice-wave-cancel {
  opacity: 1;
  pointer-events: auto;
}

.composer-bar.voice-mode-recording .voice-wave-time {
  right: 0.65rem;
  background: rgba(18, 26, 38, 0.68);
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
}

.composer-bar.voice-mode-preview .voice-wave-time {
  right: 2.75rem;
  background: rgba(18, 26, 38, 0.68);
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
}

.composer-bar.voice-mode-preview .voice-wave-canvas {
  left: calc(0.55rem + 2.05rem + 0.45rem);
  width: calc(100% - (0.55rem + 2.05rem + 0.45rem) - 6.4rem);
}

.composer-bar.voice-mode-recording .voice-wave-canvas {
  left: 0.55rem;
  width: calc(100% - 0.55rem - 4.1rem);
}

.composer-bar.voice-mode-preview .voice-wave-canvas {
  pointer-events: auto;
  cursor: pointer;
}

.composer-ic-btn.voice-btn--recording {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.65),
    0 0 0 7px rgba(34, 197, 94, 0.18);
}

.composer-ic-btn.voice-btn--send {
  border-radius: 12px;
  background: linear-gradient(135deg, #14b8a6 0%, #16a34a 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.composer-bar textarea:focus {
  outline: none;
}

.composer-bar textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 139, 253, 0.45) rgba(18, 26, 38, 0.9);
}

.composer-bar textarea::-webkit-scrollbar {
  width: 7px;
}

.composer-bar textarea::-webkit-scrollbar-track {
  background: rgba(18, 26, 38, 0.65);
  border-radius: 10px;
  margin: 4px 0;
}

.composer-bar textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(61, 139, 253, 0.55) 0%, rgba(42, 111, 214, 0.75) 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.composer-bar textarea::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.composer-right {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.voice-inline-btn {
  width: 2.35rem;
  height: 2.35rem;
  transition: opacity 160ms ease, transform 160ms ease;
}

.voice-inline-btn.voice-inline--hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.send-split {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #14b8a6 0%, #16a34a 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: opacity 160ms ease, transform 160ms ease;
}

.send-main,
.send-more {
  height: 2.35rem;
  border: none;
  background: transparent;
  color: #062015;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7rem;
}

.send-main {
  min-width: 2.55rem;
}

.send-more {
  min-width: 2.15rem;
  border-inline-start: 1px solid rgba(0, 0, 0, 0.18);
  padding: 0 0.5rem;
}

.send-main:hover,
.send-more:hover {
  background: rgba(255, 255, 255, 0.14);
}

.send-ic {
  width: 18px;
  height: 18px;
  display: block;
  color: #062015;
}

.composer-hint-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  min-height: 1.05rem;
}

.emoji-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2100;
}

.send-menu-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2100;
}

.send-menu {
  position: fixed;
  z-index: 2110;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.send-menu-pop {
  position: fixed;
  min-width: 210px;
  max-width: min(320px, 92vw);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 66px rgba(0, 0, 0, 0.5);
  padding: 0.35rem;
  direction: rtl;
  transform-origin: var(--pop-origin, 50% 100%);
  will-change: transform, opacity;
}

.send-menu-pop--emoji {
  padding: 0;
  overflow: hidden;
}

.send-emoji-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.send-emoji-search-ic {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.send-emoji-head input {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
}

.send-emoji-head input:focus {
  outline: none;
  border-color: rgba(61, 139, 253, 0.5);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.18);
}

.send-emoji-back {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 247, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.send-emoji-grid {
  max-height: min(52vh, 420px);
}

.send-menu-row {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(232, 238, 247, 0.92);
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  text-align: start;
  flex-direction: row-reverse;
}

.send-menu-row span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.send-menu-row:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.send-menu-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
}

.send-menu-ic {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.emoji-picker {
  position: fixed;
  z-index: 2110;
  width: min(420px, 92vw);
  max-height: min(72vh, 520px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 66px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding: 0;
  direction: rtl;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: var(--pop-origin, 50% 50%);
}

.emoji-picker-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.emoji-picker-search-ic {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.emoji-picker-head input {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
}

.emoji-picker-head input:focus {
  outline: none;
  border-color: rgba(61, 139, 253, 0.5);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.18);
}

.emoji-picker-close {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 247, 0.9);
  cursor: pointer;
}

.emoji-picker-grid {
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: 0.55rem;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.25rem;
}

.emoji-picker-grid::-webkit-scrollbar {
  width: 7px;
}

.emoji-picker-grid::-webkit-scrollbar-track {
  background: rgba(18, 26, 38, 0.65);
  border-radius: 10px;
  margin: 6px 0;
}

.emoji-picker-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(61, 139, 253, 0.55) 0%, rgba(42, 111, 214, 0.75) 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.emoji-item {
  height: 2.2rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.emoji-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
  .send-more {
    display: none;
  }
  .send-split {
    border-radius: 14px;
  }
}

@media (max-width: 639px) {
  .composer-left {
    display: none;
  }
  .send-more {
    display: inline-flex;
  }
}

.composer > textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.composer-actions .btn-primary {
  width: auto;
  margin-right: auto;
  padding: 0.45rem 1.1rem;
}

.btn-attach {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.82rem;
}

.upload-hint {
  font-size: 0.76rem;
  color: var(--muted);
  flex: 1;
  min-width: 100px;
}

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  margin-bottom: 0.45rem;
  cursor: pointer;
}

.list-item:hover {
  border-color: #4b5f7a;
}

.list-item .title {
  font-weight: 600;
  font-size: 0.9rem;
}

.list-item .meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* پنل پروفایل: اسکرول مخفی، چیدمان بخش‌بخش — .profile-shell در پایین فایل تکمیل شده */

.profile-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.profile-shell--v2 {
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.4) 0%, rgba(10, 16, 24, 0) 60%);
}

.prof-hero {
  position: relative;
  flex-shrink: 0;
  height: 160px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prof-hero-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 380px at 50% 10%, rgba(61, 139, 253, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(18, 26, 38, 0.95) 0%, rgba(13, 19, 28, 0.95) 60%, rgba(18, 26, 38, 0.95) 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.prof-hero-cover.is-empty {
  background:
    radial-gradient(900px 320px at 70% 10%, rgba(168, 85, 247, 0.25) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(900px 320px at 20% 30%, rgba(61, 139, 253, 0.2) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(18, 26, 38, 0.96) 0%, rgba(13, 19, 28, 0.96) 70%, rgba(18, 26, 38, 0.96) 100%);
}

.prof-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.prof-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.prof-hero-side {
  position: absolute;
  inset-inline-start: calc(1.05rem + 86px + 0.85rem);
  inset-block-start: 2.05rem;
  max-width: min(52%, 30rem);
  text-align: start;
  z-index: 2;
}

.prof-hero-name {
  font-weight: 950;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prof-hero-handle {
  margin-top: 0.25rem;
  color: rgba(210, 219, 232, 0.85);
  font-size: 0.82rem;
  direction: ltr;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prof-hero-avatar {
  position: absolute;
  inset-inline-start: 1.05rem;
  inset-block-start: 1.35rem;
  inset-block-end: auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(18, 26, 38, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 2;
}

.prof-hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.prof-hero-avatar-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 1.8rem;
  color: #fff;
  background: radial-gradient(circle at 30% 20%, rgba(61, 139, 253, 0.85) 0%, rgba(42, 111, 214, 0.95) 60%);
}

.prof-hero-avatar-edit {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-end: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prof-hero-avatar-edit img {
  width: 16px;
  height: 16px;
  filter: brightness(1.2);
  opacity: 0.95;
}

.profile-inner--v2 {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.15rem 0.9rem 1.3rem;
}

.prof-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.4);
  border-radius: 18px;
  padding: 0.95rem;
  margin-bottom: 1rem;
}

.prof-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.prof-card-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prof-card-ic img {
  width: 18px;
  height: 18px;
  filter: invert(82%) sepia(22%) saturate(2285%) hue-rotate(235deg) brightness(102%) contrast(95%);
  opacity: 0.92;
}

.prof-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 950;
}

.prof-card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.prof-card-body {
  display: grid;
  gap: 0.8rem;
}

.prof-field {
  display: grid;
  gap: 0.35rem;
}

.prof-field label {
  font-size: 0.78rem;
  color: rgba(210, 219, 232, 0.85);
  font-weight: 850;
}

.prof-field input,
.prof-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 24, 0.55);
  color: var(--text);
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.prof-field textarea {
  resize: vertical;
  min-height: 92px;
}

.prof-btn {
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
}

.prof-pass-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .prof-pass-grid {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .prof-pass-grid #profErr {
    grid-column: 1 / -1;
  }

  .prof-pass-grid #profPass {
    grid-column: 1 / -1;
    width: auto;
    justify-self: start;
  }
}

.prof-media-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 900px) {
  .prof-media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.prof-media-card {
  display: grid;
  gap: 0.65rem;
}

.prof-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(210, 219, 232, 0.85);
  font-size: 0.78rem;
  font-weight: 850;
}

.prof-drop {
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(10, 16, 24, 0.35);
  border-radius: 16px;
  padding: 0.9rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
}

.prof-drop-ic {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prof-drop-ic img {
  width: 18px;
  height: 18px;
  filter: invert(82%) sepia(22%) saturate(2285%) hue-rotate(235deg) brightness(102%) contrast(95%);
  opacity: 0.92;
}

.prof-drop-name {
  color: rgba(210, 219, 232, 0.75);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  direction: ltr;
}

.scroll-y-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-y-hidden::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.scroll-x-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-x-hidden::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.profile-inner {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.75rem 0.85rem 1.5rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.profile-identity-av {
  flex-shrink: 0;
}

.profile-identity-text {
  min-width: 0;
}

.profile-username {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  word-break: break-word;
}

.profile-section {
  margin-bottom: 1.1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(18, 26, 38, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.profile-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.profile-head {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
}

.avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.avatar-ph {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--bubble-me);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.35rem;
  color: #dbeafe;
}

.search-bar {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.search-bar input {
  flex: 1;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* پیام شناور: موبایل = bottom sheet، دسکتاپ = کارت وسط (بدون کتابخانهٔ خارجی) */
.kiasho-hidden {
  display: none !important;
}

.kiasho-alert-root {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.24s ease,
    visibility 0.24s step-end;
}

.kiasho-alert-root.kiasho-alert--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.24s ease,
    visibility 0s step-start;
}

@media (min-width: 640px) {
  .kiasho-alert-root {
    align-items: center;
    padding: 1rem;
  }
}

.kiasho-alert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.kiasho-alert-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem 1rem 0 0;
  padding: 1rem 1.05rem calc(1rem + var(--safe-b));
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.4);
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.kiasho-alert-root.kiasho-alert--open .kiasho-alert-panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .kiasho-alert-panel {
    width: min(400px, 94vw);
    max-width: min(400px, 94vw);
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem 1.2rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(18px);
    opacity: 0;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.22s ease;
  }

  .kiasho-alert-root.kiasho-alert--open .kiasho-alert-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.kiasho-alert-root.kiasho-alert--error .kiasho-alert-panel {
  border-color: rgba(255, 130, 130, 0.55);
}

.secret-prompt-root {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0.22s step-end;
}

.secret-prompt-root.secret-prompt--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s step-start;
}

@media (min-width: 640px) {
  .secret-prompt-root {
    align-items: center;
    padding: 1rem;
  }
}

.secret-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border: 0;
}

.secret-prompt-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem 1rem 0 0;
  padding: 1rem 1.05rem calc(1rem + var(--safe-b));
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.4);
  transform: translateY(110%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.secret-prompt-root.secret-prompt--open .secret-prompt-panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .secret-prompt-panel {
    width: min(420px, 94vw);
    max-width: min(420px, 94vw);
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem 1.2rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    transform: scale(0.92) translateY(18px);
    opacity: 0;
    transition:
      transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease;
  }

  .secret-prompt-root.secret-prompt--open .secret-prompt-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.secret-prompt-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
}

.secret-prompt-msg {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.secret-prompt-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.secret-prompt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.kiasho-alert-icon {
  font-size: 2.1rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.4rem;
}

.kiasho-alert-title {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
}

.kiasho-alert-msg {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  word-break: break-word;
}

.kiasho-alert-ok {
  width: 100%;
}

@media (min-width: 640px) {
  .kiasho-alert-ok {
    width: auto;
    min-width: 7.5rem;
    display: block;
    margin-inline: auto;
  }
}

/* الرت انتقال داخل چت (بالای کامپوزر) */
.chat-xfer-alert {
  width: 100%;
  margin: 0 0 0.45rem;
  order: -1;
}

.chat-xfer-alert.kiasho-hidden {
  display: none !important;
}

.chat-xfer-alert-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(61, 139, 253, 0.35);
  background:
    linear-gradient(135deg, rgba(61, 139, 253, 0.16) 0%, rgba(26, 35, 50, 0.95) 55%, rgba(18, 26, 38, 0.98) 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.chat-xfer-alert-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #9ec5ff;
  background: rgba(61, 139, 253, 0.18);
  border: 1px solid rgba(61, 139, 253, 0.28);
}

.chat-xfer-alert.is-download .chat-xfer-alert-icon {
  color: #7dffa8;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
}

.chat-xfer-alert-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.chat-xfer-alert-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.chat-xfer-alert-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-xfer-alert-pct {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #9ec5ff;
}

.chat-xfer-alert-meta {
  font-size: 0.68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-xfer-alert-bar {
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.chat-xfer-alert-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d8bfd, #7eb6ff);
  transition: width 0.18s ease;
}

.chat-xfer-alert-cancel {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 180, 180, 0.28);
  background: rgba(255, 80, 80, 0.08);
  color: #ffb4b4;
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
}

.chat-xfer-alert-cancel.hidden {
  display: none;
}

.chat-xfer-alert.is-done .chat-xfer-alert-inner {
  border-color: rgba(34, 197, 94, 0.35);
}

.chat-xfer-alert.is-done .chat-xfer-alert-pct {
  color: #7dffa8;
}

.chat-xfer-alert.is-done .chat-xfer-alert-fill {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.chat-xfer-alert.is-err .chat-xfer-alert-inner {
  border-color: rgba(239, 68, 68, 0.4);
}

/* پنل انتقال پارت‌به‌پارت (شبیه IDM) — پشتیبان خارج از چت */
.xfer-hud {
  position: fixed;
  inset-inline-end: 0.85rem;
  bottom: 0.85rem;
  z-index: 2400;
  width: min(22rem, calc(100vw - 1.4rem));
  border-radius: 14px;
  border: 1px solid rgba(120, 140, 170, 0.28);
  background: rgba(18, 24, 36, 0.92);
  color: #eef3fb;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.xfer-hud.kiasho-hidden {
  display: none;
}

.xfer-hud.is-min .xfer-hud-list {
  display: none;
}

.xfer-hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.xfer-hud-title {
  font-size: 0.78rem;
  font-weight: 600;
}

.xfer-hud-min {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 0.1rem 0.35rem;
}

.xfer-hud-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem 0.7rem;
  max-height: 14rem;
  overflow: auto;
}

.xfer-job {
  display: grid;
  gap: 0.28rem;
}

.xfer-job-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.xfer-job-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.xfer-job-pct {
  flex: 0 0 auto;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.xfer-job-bar {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.xfer-job-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d8bfd, #62c3ff);
  transition: width 0.18s ease;
}

.xfer-job-meta {
  font-size: 0.66rem;
  opacity: 0.7;
}

.xfer-job-actions {
  display: flex;
  justify-content: flex-end;
}

.xfer-job-actions.hidden {
  display: none;
}

.xfer-job-cancel {
  border: 0;
  background: transparent;
  color: #ffb4b4;
  font-size: 0.68rem;
  cursor: pointer;
  padding: 0;
}

/* مودال پیش‌نمایش ارسال عکس/ویدئو + کپشن */
.media-send-root {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0.22s step-end;
}

.media-send-root.media-send--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s step-start;
}

.media-send-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.media-send-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  max-height: min(92vh, 620px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem 0.95rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  transform: scale(0.94);
  opacity: 0;
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.media-send-root.media-send--open .media-send-dialog {
  transform: scale(1);
  opacity: 1;
}

.media-send-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.media-send-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.media-send-dismiss {
  flex-shrink: 0;
}

.media-send-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(52vh, 320px);
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #0a0e14;
  overflow: hidden;
}

.media-send-preview-remove {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-send-preview-mount {
  position: absolute;
  inset: 0;
}

.media-send-preview-mount img,
.media-send-preview-mount video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-send-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.media-send-preview-play span {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  padding-inline-start: 0.2rem;
}

.media-send-busy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(0, 0, 0, 0.55);
}

.media-send-busy.hidden {
  display: none;
}

.media-send-busy-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent, #3d8bfd) calc(var(--pct, 0) * 1%),
    rgba(255, 255, 255, 0.14) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  transform: rotate(-90deg);
}

.media-send-busy-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.media-send-caption-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 0.15rem;
}

.media-send-caption {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 0.35rem 0;
  min-height: 2.4rem;
}

.media-send-caption:focus {
  outline: none;
  border-bottom-color: rgba(61, 139, 253, 0.65);
}

.media-send-quality-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0.35rem;
}

.media-send-quality-row.hidden {
  display: none;
}

.media-send-quality-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.media-send-quality-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.media-send-quality-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 140, 170, 0.28);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.media-send-quality-opt:has(input:checked),
.media-send-quality-opt.is-active {
  border-color: rgba(61, 139, 253, 0.7);
  background: rgba(61, 139, 253, 0.12);
}

.media-send-quality-opt input {
  margin: 0;
}

.media-send-quality-row.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.media-send-size-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.media-send-doc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}

.media-send-doc-row input {
  margin-top: 0.15rem;
}

.media-send-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

/* نمایش تمام‌صفحهٔ عکس/ویدئو از حباب (بدون دانلود) */
.media-viewer-root {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s step-end;
}

.media-viewer-root.media-viewer--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    visibility 0s step-start;
}

.media-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.media-viewer-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.35rem 0.75rem 0.75rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.media-viewer-root.media-viewer--open .media-viewer-panel {
  transform: scale(1);
  opacity: 1;
}

.media-viewer-root .media-viewer-close {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.35rem;
}

.media-viewer-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding-inline: 2rem;
  word-break: break-word;
}

.media-viewer-mount {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e14;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.media-viewer-img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.media-viewer-video {
  display: block;
  width: 100%;
  max-height: min(78vh, 720px);
  background: #000;
}

.media-inline-view-row {
  margin-top: 0.35rem;
}

.media-inline-view-btn {
  font-size: 0.78rem;
}

.dm-conv-hide-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.05rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

.dm-restore-hidden {
  width: 100%;
  margin-top: 0.35rem;
  text-align: center;
}

/* حباب: کادر مربعی رسانه + لودینگ تا آمادهٔ پخش/نمایش */
.msg-media-shell {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}

.msg-media-shell img,
.msg-media-shell video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.log .msg-wrap:not(.me) .msg-media-shell img {
  cursor: pointer;
}

.msg-media-badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  z-index: 2;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.msg-media-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  transition: opacity 0.25s ease;
}

.msg-media-shell.msg-media-shell--ready .msg-media-loader {
  opacity: 0;
  pointer-events: none;
}

.msg-media-frame .msg-media-shell {
  width: 100%;
  aspect-ratio: auto;
  height: auto;
}

.msg-media-frame .msg-media-shell img,
.msg-media-frame .msg-media-shell video {
  width: 100%;
  height: auto;
  max-height: min(38vh, 300px);
  object-fit: cover;
}

.msg-media-loader-spin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: msg-media-spin 0.85s linear infinite;
}

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

.media-caption {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* مودال برش عکس پروفایل / کاور */
.image-crop-root {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0.22s step-end;
}

.image-crop-root.image-crop--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s step-start;
}

.image-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.image-crop-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(92vh, 640px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.85rem 1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  opacity: 0;
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.image-crop-root.image-crop--open .image-crop-dialog {
  transform: scale(1);
  opacity: 1;
}

.image-crop-close {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.35rem;
  z-index: 2;
}

.image-crop-title {
  margin: 0 1.8rem 0 0;
  font-size: 1rem;
  font-weight: 800;
}

.image-crop-viewport-outer {
  flex-shrink: 0;
}

.image-crop-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0e14;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  touch-action: none;
  aspect-ratio: 1 / 1;
}

.image-crop-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}

.image-crop-img:active {
  cursor: grabbing;
}

.image-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.image-crop-zoom-label {
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
}

.image-crop-range {
  flex: 1;
  min-width: 120px;
}

.image-crop-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.install-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
  padding: 0.65rem 2.1rem 0.65rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(61, 139, 253, 0.35);
  background: linear-gradient(120deg, rgba(30, 58, 95, 0.55) 0%, var(--panel-2) 100%);
}

.install-banner-dismiss {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-banner-dismiss:hover {
  background: rgba(61, 139, 253, 0.25);
}

.install-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.install-banner-text strong {
  font-size: 0.88rem;
}

.install-banner-sub {
  font-size: 0.76rem;
  color: var(--muted);
}

.install-banner-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ——— هدر گفتگوی خصوصی (کاور + چیدمان) ——— */
.dm-chat-head-wrap {
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.dm-chat-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  --dm-chat-head-h: 132px;
}

body.dm-topbar-only .dm-chat-main {
  --dm-chat-head-h: 0px;
}

body.dm-topbar-only #dmChatHead {
  display: none;
}

.dm-chat-main > .chat-scroller-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dm-chat-main > .chat-scroller-wrap > .log-scroller {
  flex: 1;
  min-height: 0;
  padding-top: var(--dm-chat-head-h);
  box-sizing: border-box;
}

.dm-chat-head-wrap.dm-chat-head--glass {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 8;
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  background: rgba(8, 12, 18, 0.46);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-peer-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--panel-2) center / cover no-repeat;
  min-height: 118px;
}

.dm-peer-cover.is-empty {
  background: linear-gradient(145deg, #1e3a5f 0%, #121a26 55%, #0f1419 100%);
}

.dm-peer-cover-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  min-height: 118px;
  background: linear-gradient(
    180deg,
    rgba(15, 20, 25, 0.35) 0%,
    rgba(15, 20, 25, 0.72) 55%,
    rgba(15, 20, 25, 0.92) 100%
  );
}

.dm-chat-head-content {
  position: relative;
  z-index: 2;
  padding: 0.45rem 0.65rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dm-head-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.dm-chat-head-wrap .dm-chat-back.btn-ghost,
.dm-chat-head-wrap .dm-head-profile.btn-ghost {
  color: rgba(232, 238, 247, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.2);
}

.dm-chat-head-wrap .dm-chat-back.btn-ghost:hover,
.dm-chat-head-wrap .dm-head-profile.btn-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(61, 139, 253, 0.2);
}

.dm-peer-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.dm-peer-avatar-wrap {
  cursor: pointer;
  flex-shrink: 0;
}

.dm-peer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: block;
}

.dm-peer-avatar-ph {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(145deg, var(--bubble-me) 0%, #152a45 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #dbeafe;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.dm-peer-meta {
  min-width: 0;
  flex: 1;
  padding-bottom: 0.05rem;
}

.dm-peer-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.dm-peer-title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  word-break: break-word;
  color: #f1f5fb;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.dm-peer-sub {
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: rgba(232, 238, 247, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.dm-peer-sub.is-online {
  color: #4ade80;
  font-weight: 600;
}

.dm-conv-item {
  align-items: center;
}

.dm-conv-left {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.dm-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--panel);
}

.dm-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dm-list-avatar > .msg-avatar-ph {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: none;
}

.dm-conv-text {
  min-width: 0;
  flex: 1;
}

.dm-conv-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dm-conv-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.28rem;
  flex-shrink: 0;
  min-width: 3.2rem;
}

.dm-conv-time {
  font-size: 0.72rem;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.dm-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.38rem;
  border-radius: 999px;
  background: #22c55e;
  color: #04140a;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.55);
}

.dm-conv-item.has-unread .title {
  font-weight: 800;
  color: #f1f5f9;
}

.dm-conv-item.has-unread .dm-conv-preview {
  color: rgba(226, 232, 240, 0.92);
}

.dm-conv-item.has-unread .dm-conv-time {
  color: #4ade80;
  font-weight: 700;
}

/* ── VoIP Fullscreen Call UI ─────────────────────────────────────────────── */

/* Active call strip (minimized) — scoped to chat panel */
.chat-call-host {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.chat-call-host > .call-active-bar,
.chat-call-host > .voip-fullscreen:not(.hidden) {
  pointer-events: auto;
}

.call-active-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 36;
  height: 40px;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1px solid rgba(52, 211, 153, 0.35);
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.94) 0%, rgba(4, 47, 46, 0.9) 100%);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.18);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.call-active-bar.hidden {
  display: none;
}
.call-active-bar-wave {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    rgba(52, 211, 153, 0.15) 12px,
    transparent 24px
  );
  animation: callBarWave 2.4s linear infinite;
}
@keyframes callBarWave {
  from { transform: translateX(0); }
  to { transform: translateX(-24px); }
}
.call-active-bar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
  padding: 0 0.85rem;
  color: #ecfdf5;
  font-size: 0.82rem;
}
.call-active-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: callBarPulse 1.6s ease infinite;
  flex-shrink: 0;
}
@keyframes callBarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.call-active-bar-label {
  font-weight: 600;
  white-space: nowrap;
}
.call-active-bar-timer {
  font-variant-numeric: tabular-nums;
  color: #a7f3d0;
  min-width: 2.8rem;
}
.call-active-bar-avatars {
  display: flex;
  align-items: center;
  margin-inline-start: 0.15rem;
}
.call-active-bar-avatars.hidden {
  display: none;
}
.call-active-bar-avatars .gvoip-participant-av {
  width: 28px;
  height: 28px;
  font-size: 0.68rem;
  margin-inline-start: -7px;
  border-width: 2px;
}
.call-active-bar-avatars .gvoip-participant-av:first-child {
  margin-inline-start: 0;
}
.call-active-bar-hint {
  margin-inline-start: auto;
  font-size: 0.72rem;
  color: rgba(236, 253, 245, 0.72);
  white-space: nowrap;
}
#screenGlobal.call-bar-visible .chat-scroller-wrap,
#screenDmChat.call-bar-visible .chat-scroller-wrap {
  padding-top: 40px;
}

.voip-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2800;
  background: radial-gradient(ellipse at 50% 30%, #0f1b2d 0%, #070b12 60%, #030507 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: voipFadeIn 0.35s ease;
}

.voip-fullscreen.voip-in-chat {
  position: absolute;
  inset: 0;
  z-index: 34;
  border-radius: inherit;
}

/* تماس ورودی: فقط وقتی overlay فعال است تمام‌صفحه شود */
#voipIncoming.voip-incoming-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #0f1b2d 0%, #070b12 60%, #030507 100%);
  pointer-events: auto !important;
  box-shadow: none !important;
  border: none !important;
}
#voipIncoming.voip-incoming-overlay .voip-call-screen {
  max-width: min(92vw, 420px);
  width: 100%;
  pointer-events: auto !important;
}
#voipIncoming.voip-incoming-overlay .voip-btn-accept,
#voipIncoming.voip-incoming-overlay .voip-btn-reject,
#voipIncoming.voip-incoming-overlay .voip-btn-action,
#voipIncoming.voip-incoming-overlay .voip-close-x {
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

/* پنل تماس فعال — فقط با کلاس overlay */
#voipActive.voip-call-overlay,
#gvoipActive.voip-call-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3100 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  background: radial-gradient(ellipse at 50% 30%, #0f1b2d 0%, #070b12 60%, #030507 100%);
}
#voipActive.voip-call-overlay .voip-call-screen,
#gvoipActive.voip-call-overlay .voip-call-screen {
  flex: 0 1 auto;
  height: auto !important;
  max-height: min(92vh, 100%);
  width: 100%;
  max-width: min(92vw, 28rem);
  margin: auto;
  justify-content: center;
}

/* مهم: hidden باید آخرین قانون display باشد و همیشه برنده شود */
#voipIncoming.hidden,
#voipIncoming.voip-fullscreen.hidden,
#voipIncoming.voip-incoming-overlay.hidden,
#voipActive.hidden,
#voipActive.voip-fullscreen.hidden,
#voipActive.voip-call-overlay.hidden,
#gvoipActive.hidden,
#gvoipActive.voip-fullscreen.hidden,
#gvoipActive.voip-call-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half {
  inset: auto 0 0 0;
  top: auto;
  height: min(50%, 420px);
  min-height: 240px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  background: rgba(8, 12, 18, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.42);
  animation: voipSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .voip-call-screen {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  padding: 0.75rem 1rem 0.65rem;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .voip-call-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  gap: 0.4rem;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .gvoip-share-preview {
  height: min(36vh, 300px);
  min-height: min(30vh, 240px);
  flex-shrink: 0;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half.gvoip-has-video .voip-big-name,
.voip-fullscreen.voip-in-chat.voip-fullscreen--half.gvoip-has-video .voip-status-text,
.voip-fullscreen.voip-in-chat.voip-fullscreen--half.gvoip-has-video .voip-timer {
  margin: 0;
  line-height: 1.2;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .voip-dock {
  flex-shrink: 0;
  margin-top: auto;
  width: min(100%, 340px);
  margin-bottom: 0.15rem;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .voip-mode-ring {
  width: 72px;
  height: 72px;
}

.voip-fullscreen.voip-in-chat.voip-fullscreen--half .voip-big-name {
  font-size: 1.05rem;
}

.voip-fullscreen.voip-in-chat:not(.voip-fullscreen--half) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: radial-gradient(ellipse at 50% 28%, #0f1b2d 0%, #070b12 58%, #030507 100%);
}

.voip-fullscreen.voip-in-chat:not(.voip-fullscreen--half) .voip-call-screen {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: none;
  max-width: none;
  width: 100%;
}

@keyframes voipFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.voip-fullscreen.voip-fullscreen--half:not(.voip-in-chat) {
  inset: auto 0 0 0;
  top: auto;
  height: min(52vh, 520px);
  min-height: 300px;
  align-items: flex-end;
  justify-content: stretch;
  background: rgba(8, 12, 18, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
  animation: voipSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.voip-fullscreen.voip-fullscreen--half.voip-in-chat .voip-call-screen {
  max-width: none;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  padding-bottom: calc(0.65rem + var(--safe-b, 0px));
}
.voip-fullscreen.voip-fullscreen--half:not(.voip-in-chat) .voip-call-screen {
  max-width: none;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding-bottom: calc(1.25rem + var(--safe-b, 0px));
}
.voip-fullscreen.voip-fullscreen--half.voip-fullscreen--group .voip-call-screen {
  max-width: none;
}

.voip-minimize-btn,
.voip-minimize-x,
.voip-leave-x {
  z-index: 61;
}
.voip-minimize-btn {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  min-width: 36px;
  min-height: 36px;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
.voip-minimize-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.voip-call-screen {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem 2rem;
  position: relative;
}

/* ── Mobile: Bottom Sheet ── */
@media (max-width: 639px) {
  .voip-fullscreen.voip-in-chat.voip-fullscreen--half {
    height: min(46%, 380px);
    min-height: 220px;
  }
  .voip-fullscreen:not(.voip-in-chat):not(.voip-fullscreen--half):not(.voip-call-overlay):not(.voip-incoming-overlay) {
    align-items: flex-end;
    justify-content: stretch;
    background: rgba(8,12,18,0.88);
    animation: voipSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #voipActive.voip-call-overlay,
  #gvoipActive.voip-call-overlay,
  #voipIncoming.voip-incoming-overlay {
    align-items: center !important;
    justify-content: center !important;
  }
  .voip-fullscreen.voip-fullscreen--half:not(.voip-in-chat) {
    height: min(46vh, 420px);
    min-height: 260px;
  }
  @keyframes voipSlideUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);   opacity: 1; }
  }
  .voip-call-screen {
    max-width: none;
    width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 1.5rem 1.5rem calc(1.5rem + var(--safe-b, 0px)) 1.5rem;
    gap: 0.65rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  .voip-ring-avatar-wrap {
    width: 96px;
    height: 96px;
  }
  .voip-big-avatar {
    width: 96px;
    height: 96px;
  }
  .voip-big-name { font-size: 1.2rem; }
  .voip-btn-action { width: 46px; height: 46px; }
  .voip-btn-accept, .voip-btn-hangup { width: 62px; height: 62px; }
}

/* Desktop: center modal */
@media (min-width: 640px) {
  .voip-fullscreen { align-items: center; justify-content: center; }
}

/* Close X */
.voip-close-x {
  position: absolute;
  top: 1rem;
  left: 1rem;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.voip-close-x:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Ring + Avatar */
.voip-ring-avatar-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.voip-ring-pulse,
.voip-ring-pulse-green {
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  border: 2.5px solid rgba(61,139,253,0.5);
  animation: voipRingPulse 2.2s ease-out infinite;
}
.voip-ring-pulse-green {
  border-color: rgba(46,213,115,0.45);
  animation: voipRingPulseGreen 2.8s ease-out infinite;
}

@keyframes voipRingPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes voipRingPulseGreen {
  0%   { transform: scale(1);   opacity: 0.6; }
  60%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

.voip-big-avatar {
  width: 130px;
  height: 130px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.15);
  display: block;
  position: relative;
  z-index: 1;
  background: var(--panel-2);
}

/* Name & Status */
.voip-big-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-align: center;
  direction: rtl;
  unicode-bidi: plaintext;
}

.voip-status-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  text-align: center;
  direction: rtl;
}
.voip-status-connecting { color: rgba(61,139,253,0.9); }
.voip-status-connected  { color: rgba(46,213,115,0.9); }

.voip-timer {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(46,213,115,0.9);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  margin: 0;
}
.voip-incoming-time {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  direction: ltr;
  margin: 0;
}

/* Controls Row */
.voip-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.voip-call-screen--dm {
  gap: 0.85rem;
  padding: 2.75rem 1.35rem 1.75rem;
  max-width: min(92vw, 28rem);
}

.voip-call-screen--dm .voip-ring-avatar-wrap {
  width: 7.5rem;
  height: 7.5rem;
  margin-top: 0.35rem;
}

.voip-call-screen--dm .voip-big-avatar {
  width: 7.5rem;
  height: 7.5rem;
}

.voip-call-screen--dm .voip-big-name {
  font-size: 1.55rem;
  margin-top: 0.15rem;
}

.voip-call-screen--dm .voip-btn-action {
  width: 3.35rem;
  height: 3.35rem;
}

.voip-call-screen--dm .voip-btn-hangup {
  width: 4.35rem;
  height: 4.35rem;
}

.voip-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  max-width: 100%;
}

.voip-tool-chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.92);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.voip-tool-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.voip-tool-chip.is-on {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.45);
  color: #bbf7d0;
}

.call-float-bar {
  position: fixed;
  top: calc(0.7rem + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3600;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(6, 95, 70, 0.96) 0%, rgba(4, 47, 46, 0.94) 100%);
  color: #ecfdf5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  max-width: min(94vw, 28rem);
}

.call-float-bar.hidden {
  display: none !important;
}

.call-float-bar-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: callFloatPulse 1.6s ease-out infinite;
  flex-shrink: 0;
}

@keyframes callFloatPulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.call-float-bar-label {
  white-space: nowrap;
}

.call-float-bar-timer {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  opacity: 0.95;
}

.call-float-bar-hint {
  font-size: 0.72rem;
  font-weight: 650;
  opacity: 0.78;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .call-float-bar-hint {
    display: none;
  }
}

.voip-call-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 2.5rem;
  margin-bottom: 0.35rem;
  z-index: 60;
  flex-shrink: 0;
}

.voip-call-head .voip-close-x {
  position: absolute;
  top: 0;
  left: 0;
}

.voip-call-head .voip-leave-x {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
}

.voip-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.voip-call-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
}

.voip-mode-ring {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.voip-mode-ring-ic {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
}

.voip-mode-ring-ic svg {
  width: 34px;
  height: 34px;
  display: block;
}

.voip-mode-ring--live {
  color: #ff5a5f;
  border-color: rgba(255, 77, 79, 0.35);
  background: rgba(255, 77, 79, 0.08);
  box-shadow: 0 0 0 8px rgba(255, 77, 79, 0.06);
}

.voip-mode-ring--video {
  color: #5b9dff;
  border-color: rgba(61, 139, 253, 0.35);
  background: rgba(61, 139, 253, 0.08);
}

.voip-mode-ring--audio {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}

.voip-fullscreen--group:not(.voip-in-chat) .voip-call-screen {
  width: 100%;
  max-width: 520px;
  min-height: min(92vh, 720px);
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.voip-fullscreen--group.voip-in-chat .voip-call-screen {
  min-height: 0;
  max-width: none;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.voip-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: min(100%, 360px);
  margin: 0.75rem auto 0;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.voip-dock-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s, transform 0.15s, color 0.2s;
}

.voip-dock-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.voip-dock-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

.voip-dock-btn:active {
  transform: scale(0.96);
}

.voip-dock-btn.active {
  background: rgba(61, 139, 253, 0.28);
  color: #8ec0ff;
}

.voip-dock-btn--hangup {
  width: 56px;
  height: 56px;
  background: rgba(255, 69, 96, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 69, 96, 0.16);
}

.voip-dock-btn--hangup:hover {
  background: rgba(255, 69, 96, 1);
}

.voip-dock-btn--end {
  background: rgba(255, 159, 67, 0.22);
  color: #ffb86b;
}

.voip-dock-btn--end.active,
.voip-dock-btn--end:hover {
  background: rgba(255, 159, 67, 0.32);
}

/* Action buttons (mute/speaker/record) */
.voip-btn-action {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.15s;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
}
.voip-btn-action svg,
.voip-btn-action img {
  width: 22px;
  height: 22px;
  display: block;
}
.voip-btn-action img {
  filter: brightness(0) invert(1);
}
.voip-btn-action:hover { background: rgba(255,255,255,0.2); transform: scale(1.08); }
.voip-btn-action:active { transform: scale(0.95); }
.voip-btn-action.active {
  background: rgba(61,139,253,0.3);
  color: #3d8bfd;
}

/* Accept (big green) */
.voip-btn-accept {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  background: rgba(46,213,115,0.85);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(46,213,115,0.2), 0 4px 20px rgba(0,0,0,0.4);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.voip-btn-accept:hover { background: rgba(46,213,115,1); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(46,213,115,0.25), 0 6px 24px rgba(0,0,0,0.45); }
.voip-btn-accept:active { transform: scale(0.95); }

/* Reject (small red) */
.voip-btn-reject {
  background: rgba(255,69,96,0.75) !important;
  color: #fff !important;
}
.voip-btn-reject:hover { background: rgba(255,69,96,1) !important; }

/* Hangup (big red) */
.voip-btn-hangup {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  background: rgba(255,69,96,0.88);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(255,69,96,0.18), 0 4px 20px rgba(0,0,0,0.4);
  transition: background 0.2s, transform 0.15s;
}
.voip-btn-hangup:hover { background: rgba(255,69,96,1); transform: scale(1.06); }
.voip-btn-hangup:active { transform: scale(0.95); }

/* Quality Bar */
.voip-quality-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.voip-quality-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}
.voip-quality-dots {
  font-size: 0.75rem;
  color: rgba(46,213,115,0.8);
  letter-spacing: 1px;
}

/* ── Legacy overlay styles (keep for peer-sheet compatibility) ─────────── */
.voip-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 12, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.voip-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.peer-sheet-card {
  position: relative;
  max-width: 380px;
  overflow: hidden;
}

.peer-sheet-cover {
  height: 120px;
  margin: -1.15rem -1.1rem 0.75rem;
  background: var(--panel-2) center / cover no-repeat;
  border-bottom: 1px solid var(--border);
}

.peer-sheet-cover.hidden {
  display: none;
}

.peer-sheet-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.peer-sheet-actions {
  justify-content: stretch;
}

.peer-sheet-actions .btn {
  flex: 1;
  min-width: 0;
}

@media (max-width: 560px) {
  #peerSheet.voip-overlay {
    align-items: flex-end;
    padding: 0;
  }

  #peerSheet .peer-sheet-card {
    max-width: none;
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    overflow-y: auto;
    padding-bottom: calc(1rem + var(--safe-b));
  }
}

.peer-sheet-close {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
}

.peer-sheet-head {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.peer-sheet-bio {
  font-size: 0.88rem;
  color: var(--text);
  margin: 0 0 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.voip-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.voip-peer {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1rem;
}

.voip-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.install-help {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(8, 12, 18, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.install-help-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem 1rem;
  padding-inline-start: 2.2rem;
}

.install-help-card p {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
}

.global-pinned {
  flex-shrink: 0;
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(61, 139, 253, 0.45);
  background: rgba(30, 58, 95, 0.25);
}

.global-pinned-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.global-pinned-ic {
  flex-shrink: 0;
  line-height: 1.2;
}

.global-pinned--clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.global-pinned--clickable:hover,
.global-pinned--clickable:focus-visible {
  background: rgba(30, 58, 95, 0.42);
  outline: none;
}

.global-pinned-text {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-word;
}

.profile-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-cover {
  flex-shrink: 0;
  height: 140px;
  background: var(--panel-2) center / cover no-repeat;
  border-bottom: 1px solid var(--border);
}

.profile-cover.hidden {
  display: none;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: contain;
}

.app-subtitle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.app-version-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  max-width: 42rem;
}

.msg-verified {
  width: 0.95rem;
  height: 0.95rem;
  margin-inline-start: 0.28rem;
  vertical-align: middle;
  display: inline-block;
}

.msg-menu-btn {
  margin-inline-start: 0.35rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  color: var(--muted);
  cursor: pointer;
}

.msg-menu-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.msg-ctx {
  position: fixed;
  z-index: 300;
  min-width: 11rem;
  max-width: min(96vw, 20rem);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  padding: 0;
}

.msg-ctx--tg {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-ctx-react-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  padding: 0.42rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  background: #0d131c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.msg-ctx-emoji-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.22rem 0.38rem;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}

.msg-ctx-emoji-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.06);
}

.msg-ctx-actions {
  background: #1c2733;
  padding: 0.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.msg-ctx-actions button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0.48rem 0.85rem;
  border: none;
  background: transparent;
  color: #e8eef5;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.msg-ctx-actions button:hover {
  background: rgba(61, 139, 253, 0.14);
}

.reply-bar {
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(61, 139, 253, 0.08);
  font-size: 0.78rem;
}

.reply-bar.hidden {
  display: none;
}

.reply-bar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.reply-bar-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.reply-bar-label {
  font-size: 0.68rem;
  color: var(--muted);
}

.reply-bar-name {
  font-weight: 700;
  font-size: 0.82rem;
}

.reply-bar-prev {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-bar-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}

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

.msg-reply-quote {
  --reply-accent: #c4b5fd;
  display: block;
  width: 100%;
  text-align: start;
  margin: 0 0 0.45rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  border-inline-start: 4px solid var(--reply-accent);
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.12s ease;
}

.msg-reply-quote:hover {
  background: rgba(0, 0, 0, 0.38);
}

.msg-wrap.me .msg-reply-quote {
  --reply-accent: #7dd3fc;
}

.msg-forwarded {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(125, 211, 252, 0.95);
  line-height: 1.25;
}

.msg-forwarded-ic {
  flex-shrink: 0;
  opacity: 0.9;
}

body.msg-select-mode .log {
  padding-top: 0.35rem;
}

body.msg-select-mode .msg-tools,
body.msg-select-mode .msg-menu-btn {
  display: none !important;
}

body.msg-select-mode .app-shell-bar {
  display: none !important;
}

body.msg-select-mode .msg-wrap[data-select-key] {
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: 14px;
  padding: 0.2rem 0.35rem;
  margin-inline: -0.15rem;
  transition:
    background 0.15s ease,
    transform 0.12s ease;
}

body.msg-select-mode .msg-wrap[data-select-key]:active {
  transform: scale(0.99);
}

body.msg-select-mode .msg-wrap.is-selected {
  background: rgba(61, 139, 253, 0.14);
}

.msg-wrap.is-selected > .msg {
  box-shadow:
    inset 0 0 0 1.5px rgba(61, 139, 253, 0.55),
    0 0 0 3px rgba(61, 139, 253, 0.12);
}

.msg-select-check {
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0.65rem;
  border-radius: 999px;
  border: 2px solid rgba(232, 238, 247, 0.45);
  background: rgba(8, 12, 18, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

body.msg-select-mode .msg-select-check {
  display: inline-flex;
}

.msg-wrap.is-selected .msg-select-check {
  background: linear-gradient(145deg, #5ba3ff 0%, var(--accent) 100%);
  border-color: transparent;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.22);
}

.msg-wrap.is-selected .msg-select-check::after {
  content: '';
  width: 0.42rem;
  height: 0.72rem;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}

.msg-select-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  background: rgba(14, 20, 30, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  animation: msgSelectBarIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 6;
}

@keyframes msgSelectBarIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg-select-bar.hidden {
  display: none !important;
}

.msg-select-bar-x {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 238, 247, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.msg-select-bar-x:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.msg-select-bar-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.msg-select-bar-count {
  font-weight: 850;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.msg-select-bar-hint {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-select-bar-fwd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(145deg, #5ba3ff 0%, var(--accent) 55%, #2563eb 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.msg-select-bar-fwd:hover:not(:disabled) {
  filter: brightness(1.06);
}

.msg-select-bar-fwd:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.2);
}

.msg-select-bar-fwd svg {
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .msg-select-bar {
    margin-inline: 0.35rem;
    padding: 0.4rem 0.45rem;
    gap: 0.5rem;
  }

  .msg-select-bar-hint {
    font-size: 0.68rem;
  }
}

.forward-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.forward-sheet.kiasho-hidden {
  display: none !important;
}

.forward-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.forward-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  max-height: min(82vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #121a26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.85rem 0.85rem;
}

.forward-sheet-grab {
  width: 2.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0.35rem auto 0.55rem;
}

.forward-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.forward-sheet-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 850;
}

.forward-sheet-hint {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.forward-sheet-search {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 26, 38, 0.85);
  color: var(--text);
  font: inherit;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.55rem;
}

.forward-sheet-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
}

.forward-dest {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(18, 26, 38, 0.55);
  color: inherit;
  font: inherit;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.forward-dest:hover {
  border-color: rgba(61, 139, 253, 0.4);
  background: rgba(61, 139, 253, 0.1);
}

.forward-dest-av {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(61, 139, 253, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.forward-dest-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.forward-dest-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.forward-dest-title {
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-dest-sub {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 720px) {
  .forward-sheet {
    align-items: center;
  }

  .forward-sheet-panel {
    border-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-height: min(70vh, 560px);
  }

  .forward-sheet-grab {
    display: none;
  }
}

.play-audio-sheet-list .forward-dest {
  position: relative;
}

.play-audio-sheet-list .forward-dest.is-selected {
  border-color: rgba(61, 139, 253, 0.45);
  background: rgba(61, 139, 253, 0.14);
}

.play-audio-sheet-check {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.35rem;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  margin-inline-start: auto;
}

.forward-dest.is-selected .play-audio-sheet-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.play-audio-sheet-foot {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.65rem 0 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.35rem;
}

.play-audio-sheet-foot .btn {
  min-width: 7rem;
}

/* —— گالری رسانه گفتگو —— */
.chat-media-sheet {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chat-media-sheet.kiasho-hidden {
  display: none !important;
}

.chat-media-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.chat-media-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  height: auto;
  max-height: min(86vh, 640px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #121a26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  /* یکسان‌سازی ارتفاع پنل بین موتورها */
  box-sizing: border-box;
}

.chat-media-sheet-grab {
  width: 2.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0.35rem auto 0.55rem;
}

.chat-media-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.chat-media-sheet-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 850;
}

.chat-media-sheet-sub {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.chat-media-cats {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.55rem;
  margin-bottom: 0.35rem;
  scrollbar-width: none;
}

.chat-media-cats::-webkit-scrollbar {
  display: none;
}

.chat-media-cat {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}

.chat-media-cat.is-active {
  background: rgba(61, 139, 253, 0.2);
  border-color: rgba(61, 139, 253, 0.45);
  color: #dbeafe;
}

.chat-media-grid {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: min(52vh, 24rem);
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
  gap: 0.5rem;
  padding: 0.2rem 0.15rem 0.85rem;
  -webkit-overflow-scrolling: touch;
  /* gutter باعث اختلاف عرض ستون‌ها بین کروم و فایرفاکس می‌شد */
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.chat-media-grid::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.chat-media-grid::-webkit-scrollbar-track {
  background: transparent;
}

.chat-media-grid::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: none;
}

.chat-media-grid::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.chat-media-grid::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.chat-media-tile {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: #0c121c;
  cursor: pointer;
  color: inherit;
  box-shadow: none;
  line-height: 0;
  align-self: stretch;
  contain: layout paint;
  /* فایرفاکس: استایل پیش‌فرض دکمه را خنثی کن */
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}

.chat-media-tile:hover {
  border-color: rgba(61, 139, 253, 0.45);
}

.chat-media-tile-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
}

.chat-media-tile img,
.chat-media-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-media-tile-file {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.4rem;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 20, 28, 0.98) 100%);
}

.chat-media-tile-file strong {
  color: var(--text);
  font-size: 0.74rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.chat-media-tile-badge {
  position: absolute;
  inset-inline-start: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.22rem 0.4rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
}

.chat-media-empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.chat-media-more {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.7rem 0.5rem;
  margin-top: 0.15rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  color: #dbeafe;
  border: 1px dashed rgba(61, 139, 253, 0.45);
  border-radius: 10px;
  background: rgba(61, 139, 253, 0.12);
  cursor: pointer;
}

.chat-media-more:hover {
  background: rgba(61, 139, 253, 0.2);
}

.chat-media-more:disabled {
  opacity: 0.65;
  cursor: wait;
}

@media (min-width: 720px) {
  .chat-media-sheet {
    align-items: center;
  }

  .chat-media-sheet-panel {
    border-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: auto;
    max-height: min(84vh, 640px);
    width: min(100%, 36rem);
  }

  .chat-media-sheet-grab {
    display: none;
  }

  .chat-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    max-height: min(54vh, 26rem);
  }
}

/* —— پیام‌های ذخیره‌شده مثل چت —— */
.saved-chat-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.saved-chat-tools {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.saved-chat-main .chat-scroller-wrap {
  flex: 1;
  min-height: 0;
}

.saved-chat-main > .composer {
  flex-shrink: 0;
}

.saved-chat-empty {
  flex-shrink: 0;
  text-align: center;
  padding: 0.75rem;
}

/* پین ذخیره‌شده: مثل همان ردیف‌های گفتگو، فقط آواتار بوکمارک */
.dm-saved-pin {
  width: 100%;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.dm-saved-pin .dm-conv-left {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.dm-saved-pin-av {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: transparent;
}

.dm-saved-pin-av img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.nav-unread-badge {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: #22c55e;
  color: #04140a;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
}

.msg-wrap.msg-wrap--saved {
  cursor: pointer;
}

.msg-wrap.msg-wrap--saved-self {
  cursor: default;
}

.msg-saved-jump {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(125, 211, 252, 0.95);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

#savedLog .msg-tools {
  display: none !important;
}

.msg-reply-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--reply-accent);
  margin-bottom: 0.18rem;
  letter-spacing: 0.01em;
}

.msg-reply-snippet {
  font-size: 0.78rem;
  color: rgba(241, 245, 249, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.4rem;
}

.msg-wrap:not(.me) .msg-reactions {
  justify-content: flex-start;
}

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

.msg-reaction-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  min-height: 1.65rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.msg-reaction-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.msg-reaction-num {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

.msg-reaction-pill.is-mine {
  background: rgba(61, 139, 253, 0.35);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35);
}

.msg-reaction-pill:hover {
  background: rgba(255, 255, 255, 0.18);
}

.msg-reaction-pill.is-mine:hover {
  background: rgba(61, 139, 253, 0.45);
}

.msg-wrap--highlight > .msg {
  animation: msgBubbleFlash 1.15s ease;
}

@keyframes msgBubbleFlash {
  0% {
    box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.85);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.35);
  }
  100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}

.log--dm {
  padding-bottom: 0.35rem;
}

.log-scroller--dm {
  background: linear-gradient(180deg, rgba(14, 22, 33, 0.92) 0%, rgba(11, 18, 25, 0.98) 100%);
}

.msg.msg--dm {
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.msg-wrap.me .msg.msg--dm {
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(145deg, #2b5278 0%, #1e3a52 100%);
  border-color: rgba(125, 211, 252, 0.22);
}

.dm-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0.35rem 0.45rem;
}

#screenDmList .dm-list-body .list.dm-list-flat {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.dm-list-toolbar {
  padding: 0.45rem 0.65rem 0.35rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dm-list-hint {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
}

.dm-list-section-label {
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dm-list-tg .dm-conv-item {
  align-items: center;
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.28rem;
  border-radius: 14px;
  border: none;
  background: rgba(22, 32, 44, 0.55);
}

.dm-list-tg .dm-conv-item:hover {
  background: rgba(30, 42, 58, 0.88);
}

.dm-list-tg .dm-conv-text .title {
  font-size: 0.94rem;
  line-height: 1.25;
}

.dm-list-tg .dm-conv-preview {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.12rem;
  line-height: 1.3;
}

.dm-list-tg .dm-conv-time {
  font-size: 0.7rem;
  align-self: auto;
}

.dm-list-tg .dm-conv-hide-btn {
  opacity: 0.55;
  font-size: 0.68rem;
  padding: 0.12rem 0.4rem;
  min-height: 0;
}

.dm-list-tg .dm-conv-item:hover .dm-conv-hide-btn {
  opacity: 1;
}

.profile-section--tight {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.65rem;
}

.profile-section--tight .profile-section-title {
  margin-bottom: 0.35rem;
}

.profile-media-grid {
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 520px) {
  .profile-media-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .profile-pass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
    align-items: end;
  }

  .profile-pass-grid .field {
    margin-bottom: 0;
  }

  .profile-pass-grid #profErr {
    grid-column: 1 / -1;
  }

  .profile-pass-grid #profPass {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.btn-sm-block {
  width: 100%;
  margin-top: 0.35rem;
}

@media (min-width: 520px) {
  .btn-sm-block {
    width: auto;
    margin-top: 0.5rem;
  }
}

.profile-inner--compact .profile-cover + .profile-scroll .profile-inner {
  padding-top: 0.55rem;
}

.profile-inner--compact .profile-identity {
  margin-bottom: 0.55rem;
  padding: 0.65rem 0.75rem;
  gap: 0.65rem;
}

.profile-inner--compact {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-bottom: 1rem;
}

.profile-cover {
  height: 104px;
}

#screenUpload,
#screenMusic,
#screenBots {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.upload-center-head {
  flex-shrink: 0;
  padding: 0.55rem 0.65rem 0.4rem;
  border-bottom: 1px solid var(--border);
}

.upload-center-title {
  margin: 0 0 0.35rem;
  font-weight: 800;
  font-size: 0.95rem;
}

.upload-center-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
}

.upload-center-list.scroll-y-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.upload-center-list.scroll-y-hidden::-webkit-scrollbar {
  width: 0;
  display: none;
}

.upload-center-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

@media (min-width: 520px) {
  .upload-center-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.upload-center-row-main {
  min-width: 0;
}

.upload-center-url {
  font-size: 0.7rem;
  color: var(--muted);
  word-break: break-all;
  margin-top: 0.2rem;
  max-height: 2.6rem;
  overflow: hidden;
}

.upload-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.upload-center-empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
  margin: 0;
}

.btn-sm-block-upload {
  display: inline-block;
  text-align: center;
  width: 100%;
  max-width: 18rem;
  cursor: pointer;
  margin-top: 0.35rem;
}

.btn-voice {
  min-width: 2.6rem;
}

.composer-ic-btn.btn-voice {
  min-width: 0;
}

.btn-voice.is-recording {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.65);
  animation: voicePulse 1s ease-in-out infinite;
}

@keyframes voicePulse {
  50% {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
  }
}

.upload-center-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.35rem 0 0.5rem;
}

.upload-tab {
  flex: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 0.45rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.upload-tab.active {
  border-color: #4b7bdc;
  background: rgba(75, 123, 220, 0.18);
}

.upload-vis-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  margin: 0.35rem 0 0.5rem;
  cursor: pointer;
}

.upload-vis-toggle input {
  margin-top: 0.2rem;
}

/* --- کانال موسیقی: فید + پلیر پایین + باتن‌شیت --- */
.music-feed-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.music-feed-head-text {
  min-width: 0;
}

.music-feed-title {
  margin: 0 0 0.15rem;
  font-weight: 800;
  font-size: 0.98rem;
}

.music-feed-hint {
  margin: 0;
  font-size: 0.78rem;
}

.music-feed-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.music-feed-scroller-wrap {
  flex: 1;
  min-height: 0;
}

.log-scroller--music {
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.log--music {
  margin: 0 auto;
  width: 100%;
  max-width: 28rem;
  padding: 0.65rem 0.55rem 0.85rem;
  gap: 0.65rem;
  align-items: stretch;
}

.music-post-card {
  background: linear-gradient(165deg, rgba(42, 52, 72, 0.97), rgba(24, 32, 46, 0.99));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.5rem 0.6rem 0.55rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.music-post-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.music-post-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.music-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-post-head-lines {
  flex: 1;
  min-width: 0;
}

.music-post-from {
  font-weight: 700;
  font-size: 0.84rem;
  margin: 0;
  color: var(--text);
}

.music-post-time {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.1rem 0 0;
}

.music-post-title-line {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #d4a5ff;
}

.music-post-cover-full {
  width: 100%;
  border-radius: 10px;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.music-post-playrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.music-post-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #4b8def, #3066c4);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(48, 102, 196, 0.45);
}

.music-post-play:active {
  transform: scale(0.96);
}

.music-post-wave {
  flex: 1;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 0.15rem;
  opacity: 0.85;
}

.music-wave-bar {
  flex: 1;
  min-width: 2px;
  max-width: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  align-self: flex-end;
}

.music-post-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  margin-top: 0.15rem;
}

.music-player-dock {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 40, 58, 0.98), rgba(18, 24, 36, 0.99));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
  padding: 0.5rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom, 0));
}

.music-player-dock-inner {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
  max-width: 28rem;
  margin: 0 auto;
}

.music-player-dock-art {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--panel-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-player-dock-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-dock-art-ph {
  font-size: 1.5rem;
  color: var(--muted);
  opacity: 0.85;
}

.music-player-dock-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.music-player-dock-lines {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.music-player-dock-title {
  font-weight: 800;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-player-dock-sub {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-player-dock-playrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.music-player-dock-playbtn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #4b8def, #3066c4);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(48, 102, 196, 0.4);
}

.music-player-dock-wave {
  flex: 1;
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.music-player-dock-seek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.music-player-dock-time {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  width: 2.4rem;
  flex-shrink: 0;
  text-align: center;
}

.music-player-dock-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.music-player-dock-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b8def, #7aa7ff);
  pointer-events: none;
}

.music-player-dock-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.15rem;
}

.music-upload-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.music-upload-sheet:not(.kiasho-hidden) {
  pointer-events: auto;
}

.music-upload-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.music-upload-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: min(88vh, 540px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.music-upload-sheet:not(.kiasho-hidden) .music-upload-sheet-panel {
  transform: translateY(0);
}

.music-upload-sheet-grab {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0.45rem auto 0.15rem;
}

.music-upload-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.music-upload-sheet-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.music-upload-sheet-body {
  padding: 0.55rem 0.75rem 0.75rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.music-upload-sheet-actions {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.msg-edit-sheet {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.msg-edit-sheet:not(.kiasho-hidden) {
  pointer-events: auto;
}

.msg-edit-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.msg-edit-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: min(86vh, 520px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.msg-edit-sheet:not(.kiasho-hidden) .msg-edit-sheet-panel {
  transform: translateY(0);
}

.msg-edit-sheet-grab {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0.45rem auto 0.15rem;
}

.msg-edit-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.msg-edit-sheet-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.msg-edit-sheet-body {
  padding: 0.65rem 0.75rem 0.75rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.msg-edit-textarea {
  width: 100%;
  min-height: 8.5rem;
  resize: vertical;
  max-height: 42vh;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.75rem;
  font: inherit;
  line-height: 1.6;
}

.msg-edit-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.msg-edit-actions {
  margin-top: 0.65rem;
  justify-content: flex-end;
}

.msg-edit-actions .btn-primary {
  width: auto;
}

@media (min-width: 900px) {
  .msg-edit-sheet {
    align-items: center;
    padding: 1.25rem;
  }

  .msg-edit-sheet-panel {
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    max-height: min(82vh, 520px);
  }

  .msg-edit-sheet:not(.kiasho-hidden) .msg-edit-sheet-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .msg-edit-sheet-grab {
    display: none;
  }
}

/* Create group — bottom sheet (mobile) / modal (desktop) */
.create-group-sheet {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.create-group-sheet:not(.kiasho-hidden) {
  pointer-events: auto;
}

.create-group-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.create-group-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: min(86vh, 520px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.create-group-sheet:not(.kiasho-hidden) .create-group-sheet-panel {
  transform: translateY(0);
}

.create-group-sheet-grab {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0.45rem auto 0.15rem;
}

.create-group-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.create-group-sheet-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.create-group-sheet-body {
  padding: 0.75rem 0.75rem 0.85rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.create-group-field {
  display: block;
  margin-bottom: 0.85rem;
}

.create-group-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.create-group-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.75rem;
  font: inherit;
}

.create-group-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.create-group-vis {
  display: flex;
  gap: 0.5rem;
}

.create-group-vis-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  user-select: none;
}

.create-group-vis-opt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(34, 211, 238, 0.12);
  color: var(--accent);
}

.create-group-vis-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.create-group-hint {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

.create-group-actions {
  margin-top: 0.25rem;
  justify-content: flex-end;
}

.create-group-actions .btn-primary {
  width: auto;
}

@media (min-width: 900px) {
  .create-group-sheet {
    align-items: center;
    padding: 1.25rem;
  }

  .create-group-sheet-panel {
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    max-height: min(82vh, 480px);
  }

  .create-group-sheet:not(.kiasho-hidden) .create-group-sheet-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .create-group-sheet-grab {
    display: none;
  }
}

.group-settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.group-settings-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-settings-avatar-ph {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--muted);
}

.group-settings-avatar-actions {
  flex: 1;
  min-width: 0;
}

.group-settings-avatar-hint {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
}

.group-profile-panel {
  max-height: min(92vh, 720px);
}

.group-profile-body {
  overflow-y: auto;
}

.group-profile-hero {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.group-profile-hero-text {
  flex: 1;
  min-width: 0;
}

.group-profile-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.group-profile-handle {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  direction: ltr;
  text-align: right;
}

.group-profile-bio {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.group-profile-meta {
  margin: 0.35rem 0 0;
}

.group-profile-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}

.group-profile-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.group-profile-members {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.group-profile-member {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.group-profile-member-av {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.group-profile-member-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-profile-member-main {
  flex: 1;
  min-width: 0;
}

.group-profile-member-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.group-profile-member-sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.group-profile-member-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.group-profile-role-select,
.group-profile-perm-toggle {
  font-size: 0.72rem;
}

.group-profile-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  justify-content: flex-end;
}

.group-profile-perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.group-profile-perm-toggle input {
  accent-color: #4ade80;
}

.members-sheet {
  position: fixed;
  inset: 0;
  z-index: 1215;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.members-sheet:not(.kiasho-hidden) {
  pointer-events: auto;
}

.members-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.members-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: min(86vh, 560px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.members-sheet:not(.kiasho-hidden) .members-sheet-panel {
  transform: translateY(0);
}

.members-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.members-sheet-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.members-sheet-body {
  padding: 0.55rem 0.5rem 0.75rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.members-item {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(18, 26, 38, 0.62);
  color: var(--text);
  border-radius: 14px;
  padding: 0.55rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  text-align: start;
}

.dm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: pointer;
}

body.dm-sheet-open .dm-sheet-backdrop {
  opacity: 1;
}

#screenDmChat.dm-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 18px);
  width: min(100vw, 40rem);
  max-height: min(88vh, 860px);
  height: min(88vh, 860px);
  z-index: 2001;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

#screenDmChat.dm-sheet.dm-sheet--open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

body.dm-sheet-open {
  overflow: hidden;
}

@media (min-width: 900px) {
  #screenDmChat.dm-sheet {
    bottom: auto;
    top: 4.35rem;
    border-radius: 16px;
    width: min(92vw, 54rem);
    max-height: min(84vh, 980px);
    height: min(84vh, 980px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  }
}

.members-item:hover {
  border-color: rgba(61, 139, 253, 0.25);
  background: rgba(18, 26, 38, 0.82);
}

.members-av {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex: 0 0 auto;
  position: relative;
}

.members-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.members-online-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(18, 26, 38, 0.95);
  z-index: 3;
}

.members-lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.members-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.members-name {
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members-role {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--ok);
  white-space: nowrap;
}

.members-meta {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  unicode-bidi: plaintext;
}

@media (min-width: 900px) {
  .members-sheet {
    align-items: flex-start;
    padding-top: 4.35rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .members-sheet-panel {
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    max-height: min(82vh, 600px);
  }

  .members-sheet:not(.kiasho-hidden) .members-sheet-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.music-upload-pct {
  flex: 1 1 6rem;
  min-width: 0;
  text-align: center;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.list-item--muted {
  opacity: 0.72;
}

.bots-home {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bots-cards .list-item {
  cursor: pointer;
}

.bots-subview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.65rem;
}

.bots-subview-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.gapgpt-thread-row .gapgpt-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.gapgpt-select {
  flex: 1;
  min-width: 8rem;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.gapgpt-log {
  flex: 1;
  min-height: 140px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  margin-bottom: 0.5rem;
}

.gapgpt-msg {
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.gapgpt-msg--user {
  text-align: left;
  direction: ltr;
  color: #9ecbff;
}

.gapgpt-msg--assistant {
  white-space: pre-wrap;
}

.gapgpt-composer {
  flex-shrink: 0;
}

.bots-kiasho-ai {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.bots-kiasho-ai.hidden {
  display: none !important;
}

.kiasho-ai-main {
  flex: 1;
  min-height: 0;
}

.kiasho-ai-head .dm-peer-avatar-ph {
  background: linear-gradient(135deg, #1e4d6b, #2d6a4f);
  font-size: 0.75rem;
  font-weight: 700;
}

.kiasho-ai-avatar.dm-peer-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.kiasho-ai-avatar .dm-peer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.log--kiasho-ai .msg-avatar--anashid {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.log--kiasho-ai .msg-avatar--anashid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kiasho-ai-streaming .msg-body::after {
  content: '▍';
  display: inline-block;
  margin-inline-start: 2px;
  animation: kiasho-ai-blink 0.9s step-end infinite;
  color: var(--accent);
  font-weight: 700;
}

@keyframes kiasho-ai-blink {
  50% {
    opacity: 0;
  }
}

.kiasho-ai-quota {
  font-size: 0.72rem;
  opacity: 0.85;
}

.kiasho-ai-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.kiasho-ai-mode-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0;
}

.kiasho-ai-mode {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.kiasho-ai-mode.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.kiasho-ai-model-row {
  padding: 0.35rem 0.75rem 0;
}

.kiasho-ai-model-select {
  width: 100%;
  max-width: 220px;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.log--kiasho-ai .msg-wrap.me .msg {
  background: linear-gradient(145deg, var(--bubble-me) 0%, #152a45 100%);
}

.log--kiasho-ai .msg-wrap:not(.me) .msg {
  background: var(--bubble-them);
}

.kiasho-ai-media {
  max-width: min(100%, 320px);
  border-radius: 10px;
  display: block;
}

.kiasho-ai-caption {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.kiasho-ai-mid textarea {
  min-height: 2.25rem;
}

.kiasho-ai-attach-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.kiasho-ai-attach-bar.hidden {
  display: none !important;
}

.kiasho-ai-md {
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: break-word;
}

.kiasho-ai-md-p {
  margin: 0 0 0.55rem;
}

.kiasho-ai-md-p:last-child {
  margin-bottom: 0;
}

.kiasho-ai-code-wrap {
  position: relative;
  margin: 0.45rem 0 0.65rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d1117;
}

.kiasho-ai-code-lang {
  display: block;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  direction: ltr;
  text-align: left;
}

.kiasho-ai-code-wrap pre {
  margin: 0;
  padding: 0.65rem 0.75rem;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.kiasho-ai-code-wrap code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre;
  color: #e6edf3;
}

.kiasho-ai-inline-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.84em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  direction: ltr;
  unicode-bidi: isolate;
}

.kiasho-ai-file-preview {
  margin: 0;
  max-height: 200px;
  overflow: auto;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  direction: ltr;
  text-align: left;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}

#screenBots {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#screenBots .bots-kiasho-ai {
  flex: 1;
}

#screenMusic {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#screenMusic .music-feed-scroller-wrap {
  flex: 1;
  min-height: 0;
}

.composer.composer--dnd-target {
  outline: 2px dashed rgba(75, 123, 220, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.gvoip-join-strip {
  flex-shrink: 0;
  padding: 0.55rem 0.65rem 0;
}

.gvoip-join-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(16, 22, 32, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.gvoip-join-card--live {
  border-color: rgba(255, 77, 79, 0.35);
  background: linear-gradient(135deg, rgba(36, 18, 22, 0.95) 0%, rgba(16, 20, 30, 0.92) 100%);
}

.gvoip-join-card--video {
  border-color: rgba(61, 139, 253, 0.35);
}

.gvoip-join-card--call {
  border-color: rgba(74, 222, 128, 0.28);
}

.gvoip-join-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}

.gvoip-join-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.gvoip-join-card--live .gvoip-join-icon {
  color: #ff5a5f;
  background: rgba(255, 77, 79, 0.14);
}

.gvoip-join-card--video .gvoip-join-icon {
  color: #5b9dff;
  background: rgba(61, 139, 253, 0.14);
}

.gvoip-join-card--call .gvoip-join-icon {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.gvoip-join-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gvoip-join-badge {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.gvoip-join-card--live .gvoip-join-badge {
  background: rgba(255, 77, 79, 0.2);
  color: #ffb4b6;
}

.gvoip-join-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.gvoip-join-sub {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
}

.gvoip-join-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gvoip-join-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #ff5a5f 0%, #e0353a 100%);
  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.28);
}

.gvoip-join-btn--reject {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.92);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.gvoip-join-btn--reject:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.gvoip-join-card--video .gvoip-join-btn {
  background: linear-gradient(135deg, #4d8dff 0%, #2f6fd8 100%);
  box-shadow: 0 4px 14px rgba(61, 139, 253, 0.28);
}

.gvoip-join-card--call .gvoip-join-btn {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.24);
}

.gvoip-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  align-items: center;
  max-width: min(92vw, 420px);
  margin: 0.35rem auto 0;
  min-height: 40px;
}

.gvoip-participant-av {
  position: relative;
  width: 38px;
  height: 38px;
  margin-inline-start: -10px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.55);
  background: rgba(15, 23, 42, 0.85);
  color: #ecfdf5;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.gvoip-participant-av:first-child {
  margin-inline-start: 0;
}
.gvoip-participant-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gvoip-participant-av--more {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  font-size: 0.72rem;
}
.gvoip-participant-av--join {
  animation: gvoipAvJoin 0.65s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.gvoip-participant-av--leave {
  animation: gvoipAvLeave 0.48s ease forwards;
}
.gvoip-participant-av--speaking {
  transform: scale(1.2);
  border-color: #34d399;
  z-index: 2;
  animation: gvoipAvSpeakPulse 1.1s ease-in-out infinite;
}
.gvoip-participant-av--connecting {
  border-color: rgba(96, 165, 250, 0.75);
  opacity: 0.78;
}
.gvoip-participant-av--connected {
  border-color: rgba(52, 211, 153, 0.9);
}
.gvoip-participant-av--failed {
  border-color: rgba(248, 113, 113, 0.85);
  opacity: 0.65;
}
.call-active-bar-avatars .gvoip-participant-av--speaking {
  transform: scale(1.15);
}
@keyframes gvoipAvSpeakPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.12);
  }
}
@keyframes gvoipAvJoin {
  from { transform: scale(0.2); opacity: 0; border-color: #6ee7b7; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes gvoipAvLeave {
  to { transform: scale(0.2); opacity: 0; border-color: #f87171; }
}

.gvoip-participant {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
}

.gvoip-screen {
  max-width: 640px;
}

.gvoip-share-preview {
  position: relative;
  width: 100%;
  max-width: min(100%, 640px);
  flex: 1 1 auto;
  height: min(48vh, 400px);
  min-height: min(40vh, 320px);
  margin: 0.35rem auto 0.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}

.gvoip-share-preview.hidden {
  display: none;
}

.gvoip-share-preview--lg {
  height: min(52vh, 440px);
  min-height: min(44vh, 380px);
}

.gvoip-share-preview--sm {
  height: min(30vh, 240px);
  min-height: min(26vh, 200px);
}

.gvoip-share-preview--pip {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  width: min(44vw, 280px);
  min-height: 0;
  max-height: none;
  height: auto;
  aspect-ratio: 16 / 10;
  z-index: 45;
  flex: none;
  margin: 0;
}

.gvoip-share-preview-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.gvoip-share-preview-label {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  pointer-events: none;
}

.voip-dock-btn.active {
  background: rgba(59, 130, 246, 0.35);
  color: #fff;
}

.gvoip-share-preview--hidden-video .gvoip-share-preview-video {
  opacity: 0;
  pointer-events: none;
}

.gvoip-share-preview--hidden-video {
  min-height: 2.5rem;
  height: 2.5rem;
}

.gvoip-share-preview-toolbar {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  right: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
  z-index: 3;
  opacity: 1;
}

.gvoip-video-tool--text {
  width: auto;
  min-width: 2.6rem;
  height: 1.65rem;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  white-space: nowrap;
}

.gvoip-live-float {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(46vw, 300px);
  z-index: 220;
  background: #0b1018;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.gvoip-live-float.hidden {
  display: none;
}

.gvoip-live-float-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.88);
}

.gvoip-live-float-actions {
  display: flex;
  gap: 0.25rem;
}

.gvoip-live-float-btn {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
}

.gvoip-live-float-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #000;
}

.voip-fullscreen--group.gvoip-has-video .voip-mode-ring {
  display: none;
}

.voip-fullscreen--group.gvoip-has-video.voip-in-chat .voip-call-main {
  justify-content: flex-start;
}

.voip-fullscreen--group.gvoip-has-video .gvoip-share-preview {
  order: -2;
}

.gvoip-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
  max-width: min(100%, 640px);
  margin: 0.5rem auto;
  flex: 0 1 auto;
  min-height: 0;
  position: relative;
}

.gvoip-video-grid--live:not(.hidden),
.gvoip-video-grid--video:not(.hidden) {
  min-height: min(36vh, 300px);
}

.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n2 {
  grid-template-columns: 1fr 1fr;
}

.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n3,
.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n4 {
  grid-template-columns: 1fr 1fr;
}

.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n5,
.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n6 {
  grid-template-columns: 1fr 1fr 1fr;
}

.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n2 .gvoip-video-tile,
.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n3 .gvoip-video-tile,
.gvoip-video-grid--video:not(.hidden).gvoip-video-grid--n4 .gvoip-video-tile {
  min-height: min(28vh, 220px);
  height: min(32vh, 260px);
}

.voip-fullscreen.voip-in-chat:not(.voip-fullscreen--half).gvoip-has-video-grid .gvoip-video-grid--video:not(.hidden) {
  max-width: none;
  flex: 1 1 auto;
  min-height: min(52vh, 520px);
  margin: 0.35rem 0;
  align-content: stretch;
}

.voip-fullscreen.voip-in-chat:not(.voip-fullscreen--half) .gvoip-video-grid--video:not(.hidden) .gvoip-video-tile {
  min-height: min(34vh, 300px);
  height: 100%;
}

.voip-fullscreen.gvoip-has-video-grid .voip-call-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.gvoip-video-tile {
  position: relative;
  width: 100%;
  min-height: min(36vh, 280px);
  height: min(42vh, 340px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.2s ease;
}

.gvoip-video-tile--lg {
  min-height: min(40vh, 320px);
  height: min(48vh, 400px);
}

.gvoip-video-tile--pip {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  width: min(42vw, 220px);
  z-index: 120;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  aspect-ratio: 16 / 10;
}

.gvoip-video-tile--min video {
  opacity: 0;
  pointer-events: none;
}

.gvoip-video-tile--min {
  aspect-ratio: auto;
  min-height: 2rem;
  max-height: 2.2rem;
}

.gvoip-video-toolbar {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.2rem;
  justify-content: flex-end;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.gvoip-video-tile:hover .gvoip-video-toolbar,
.gvoip-video-tile:focus-within .gvoip-video-toolbar {
  opacity: 1;
}

.gvoip-video-tool {
  width: 1.55rem;
  height: 1.55rem;
  border: none;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.gvoip-video-tool:hover {
  background: rgba(0, 0, 0, 0.75);
}

.gvoip-video-stage {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gvoip-video-stage.hidden {
  display: none;
}

.gvoip-video-stage-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.gvoip-video-stage-card {
  position: relative;
  width: min(96vw, 960px);
  max-height: 88vh;
  background: #0b1018;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  z-index: 1;
}

.gvoip-video-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gvoip-video-stage-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  cursor: pointer;
}

.gvoip-video-stage-video {
  width: 100%;
  max-height: calc(88vh - 2.5rem);
  object-fit: contain;
  background: #000;
  display: block;
}

.gvoip-video-grid.hidden {
  display: none;
}

.gvoip-video-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.gvoip-video-label {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.72rem;
}

.voip-video-wrap {
  position: relative;
  width: min(92vw, 420px);
  aspect-ratio: 3 / 4;
  margin: 0.75rem auto 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0a0e14;
}

.voip-video-wrap.hidden {
  display: none;
}

.voip-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voip-local-video {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  width: 28%;
  max-width: 110px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.system-live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  justify-content: center;
  padding: 0.55rem 0.75rem;
  margin: 0.35rem auto;
  max-width: 92%;
  border-radius: 999px;
  background: rgba(18, 24, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
}

.live-event-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0.35rem;
  padding: 0 0.35rem;
}

.live-event-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(100%, 420px);
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 22, 32, 0.88);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.live-event-card--live.live-event-card--active {
  border-color: rgba(255, 77, 79, 0.38);
  background: linear-gradient(135deg, rgba(34, 18, 22, 0.92) 0%, rgba(16, 20, 30, 0.9) 100%);
}

.live-event-card--video.live-event-card--active {
  border-color: rgba(61, 139, 253, 0.38);
}

.live-event-card--call.live-event-card--active {
  border-color: rgba(74, 222, 128, 0.3);
}

.live-event-card--ended {
  opacity: 0.78;
  filter: saturate(0.7);
}

.live-event-icon-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.live-event-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.live-event-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.live-event-card--live.live-event-card--active .live-event-icon-wrap {
  color: #ff5a5f;
  background: rgba(255, 77, 79, 0.14);
}

.live-event-card--live.live-event-card--active .live-event-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.35);
  animation: liveIconPulse 1.8s ease-out infinite;
  pointer-events: none;
}

.live-event-card--video.live-event-card--active .live-event-icon-wrap {
  color: #5b9dff;
  background: rgba(61, 139, 253, 0.14);
}

.live-event-card--call.live-event-card--active .live-event-icon-wrap {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

@keyframes liveIconPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
  }
}

.live-event-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.live-event-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.live-event-card--live.live-event-card--active .live-event-badge {
  background: rgba(255, 77, 79, 0.2);
  color: #ffb4b6;
}

.live-event-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

.live-event-time {
  font-size: 0.74rem;
  color: var(--muted);
}

.live-event-join {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff5a5f 0%, #e0353a 100%);
  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.35);
}

.live-event-card--video .live-event-join {
  background: linear-gradient(135deg, #4d8dff 0%, #2f6fd8 100%);
  box-shadow: 0 4px 14px rgba(61, 139, 253, 0.3);
}

.live-event-join svg {
  transform: scaleX(-1);
}

.live-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.live-share-modal.hidden {
  display: none;
}

.live-share-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.live-share-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(24, 32, 46, 0.98) 0%, rgba(14, 18, 28, 0.98) 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.live-share-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.live-share-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 900;
}

.live-share-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.live-share-label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
}

.live-share-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.live-share-surface-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.live-share-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.35rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.live-share-surface input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.live-share-surface:has(input:checked) {
  border-color: rgba(255, 77, 79, 0.55);
  background: rgba(255, 77, 79, 0.1);
}

.live-share-surface-ic {
  font-size: 1.25rem;
  line-height: 1;
}

.live-share-surface-t {
  font-size: 0.72rem;
  font-weight: 700;
}

.live-share-section {
  margin-bottom: 0.85rem;
}

.live-share-checks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.live-share-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.live-share-check input {
  margin-top: 0.15rem;
  accent-color: #ff5a5f;
}

.live-share-hint {
  margin: 0 0 0.85rem;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.live-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.live-share-start-btn {
  background: linear-gradient(135deg, #ff5a5f 0%, #e0353a 100%);
  border: none;
}

.topbar-act--live {
  color: #ff6b6e;
  position: relative;
}

.topbar-live-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.6);
  animation: liveIconPulse 1.6s ease-in-out infinite;
}

.topbar-act--media {
  color: #6aabff;
}

.topbar-more-btn {
  display: none;
}

.topbar-more-btn.topbar-more-btn--group:not(.hidden) {
  display: inline-flex;
}

.topbar-more-btn.is-open {
  border-color: rgba(74, 222, 128, 0.7);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16);
}

.topbar-more-pop {
  position: fixed;
  z-index: 1216;
  width: min(88vw, 260px);
  direction: rtl;
  background: rgba(18, 26, 38, 0.94);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  padding: 0.35rem;
}

.topbar-more-pop-head {
  padding: 0.55rem 0.75rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.topbar-more-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: right;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.topbar-more-item:hover,
.topbar-more-item:focus-visible {
  background: rgba(74, 222, 128, 0.1);
  outline: none;
}

.topbar-more-item-ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.topbar-more-item-ic img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.topbar-more-item-ic svg {
  width: 20px;
  height: 20px;
}

.topbar-more-item--live .topbar-more-item-ic {
  color: #ff5a5f;
}

.topbar-more-item--danger {
  color: #f87171;
}

@media (max-width: 639px) {
  .topbar-act--global-media:not(.hidden) {
    display: none !important;
  }

  .topbar-more-btn:not(.hidden) {
    display: inline-flex;
  }
}

.topbar-act--live .topbar-act-ic,
.topbar-act--media .topbar-act-ic {
  width: 20px;
  height: 20px;
}

.att-leave-box,
.att-adj-box,
.att-pending-box {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

#attPaneToday {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.att-today-panels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

.att-today-panel {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.att-today-panel[open] {
  z-index: 1;
}

.att-today-panel.hidden {
  display: none !important;
}

.att-today-panel-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.att-today-panel-summary::-webkit-details-marker {
  display: none;
}

.att-today-panel-summary::after {
  content: '›';
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}

.att-today-panel[open] > .att-today-panel-summary::after {
  transform: rotate(-90deg);
}

.att-today-panel-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.att-today-panel-body {
  padding: 0 0.75rem 0.75rem;
}

.att-today-panel-body--members {
  display: block;
  padding-bottom: 0.75rem;
}

.att-today-panel-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.att-list-toolbar {
  display: flex;
  justify-content: flex-end;
}

.att-today-panel--members[open] .att-members {
  max-height: min(36vh, 340px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.att-today-panel--members .att-members {
  min-height: 2.5rem;
}

.att-flash-notice {
  position: fixed;
  top: calc(0.65rem + var(--safe-t));
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 13000;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: min(420px, calc(100vw - 1.5rem));
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(61, 139, 253, 0.35);
  background: linear-gradient(135deg, rgba(26, 35, 50, 0.98) 0%, rgba(18, 26, 38, 0.98) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  transition: transform 0.32s ease, opacity 0.32s ease;
  pointer-events: none;
}

.att-flash-notice--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.att-flash-notice--warn {
  border-color: rgba(251, 146, 60, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(251, 146, 60, 0.12);
}

.att-flash-notice--info {
  border-color: rgba(61, 139, 253, 0.45);
}

.att-flash-notice--ok {
  border-color: rgba(74, 222, 128, 0.4);
}

.att-flash-notice-icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1.2;
}

.att-flash-notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.att-flash-notice-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.att-flash-notice-msg {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.att-today-panel--leave .att-leave-rules {
  margin-top: 0;
}

.att-leave-quota {
  color: #7dd3fc;
  font-weight: 600;
}

.att-suggest {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.att-suggest--ok {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.att-suggest--bad {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.att-suggest--warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.att-pending-row-stats {
  font-size: 0.74rem;
  color: rgba(125, 211, 252, 0.9);
}

.att-pending-row-suggest {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.att-leave-hint,
.att-month-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}

.att-month-section {
  margin-bottom: 0.85rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  background: rgba(12, 18, 28, 0.35);
}

.att-month-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.att-month-section--list .att-month-list {
  max-height: none;
  overflow: visible;
}

.att-adj-details {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.att-adj-details.hidden {
  display: none;
}

.att-adj-summary {
  cursor: pointer;
  padding: 0.75rem;
  font-weight: 600;
  font-size: 0.88rem;
  list-style: none;
}

.att-adj-summary::-webkit-details-marker {
  display: none;
}

.att-adj-box--inner {
  margin: 0;
  padding: 0 0.75rem 0.75rem;
  border: none;
  background: transparent;
}

.att-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.att-pending-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(167, 139, 250, 0.08);
}

.att-pending-row-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.att-pending-row-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.att-pending-row-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.att-month-row-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.att-leave-title {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.att-leave-modes {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.att-leave-mode {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

.att-leave-mode.active {
  background: rgba(75, 123, 220, 0.22);
  border-color: rgba(75, 123, 220, 0.55);
}

.att-leave-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.att-leave-field input,
.att-adj-select,
.att-adj-form input {
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.att-leave-hourly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.att-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.att-month-title {
  margin: 0;
  font-weight: 600;
}

.att-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.att-chart-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 28%) 1fr auto;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
}

.att-chart-bar-wrap {
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.att-chart-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d7aee, #5ec8ff);
}

.att-chart-val {
  white-space: nowrap;
  color: var(--muted);
}

.att-month-row .att-month-adj {
  color: #d4a017;
}

.att-month-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.att-month-row:hover {
  background: rgba(75, 123, 220, 0.08);
}

.att-adj-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
}

.att-adj-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.att-adj-field--wide {
  grid-column: 1 / -1;
}

.att-adj-form .btn {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.15rem;
}

.att-cal-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(75, 123, 220, 0.35);
  background: rgba(75, 123, 220, 0.1);
  font-size: 0.86rem;
}

.att-cal-report-row--wide span:last-child {
  text-align: left;
  max-width: 62%;
  word-break: break-word;
}

.gvoip-remote-audio {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.att-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.att-checkout-modal.kiasho-hidden {
  display: none;
}

.att-checkout-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.att-checkout-sheet {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.att-checkout-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.att-checkout-hint {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.att-checkout-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  resize: vertical;
  min-height: 96px;
  font: inherit;
}

.att-checkout-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.att-month-section--list .att-month-list {
  max-height: none;
}

.att-list-sub {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
}

.att-compact-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.att-compact-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  background: rgba(18, 26, 38, 0.4);
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.att-compact-row:hover {
  background: rgba(75, 123, 220, 0.1);
  border-color: rgba(75, 123, 220, 0.28);
}

.att-compact-av {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  overflow: visible;
}

.att-compact-av img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.att-compact-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.att-compact-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-compact-meta {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-compact-badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.att-compact-badge--ok {
  color: rgba(74, 222, 128, 0.95);
}

.att-compact-badge--bad {
  color: rgba(248, 113, 113, 0.95);
}

.att-compact-badge--warn {
  color: rgba(251, 191, 36, 0.95);
}

.att-compact-badge--pend {
  color: rgba(167, 139, 250, 0.98);
}

.att-compact-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transform: rotate(180deg);
}

.att-user-sheet {
  position: fixed;
  inset: 0;
  z-index: 1225;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.att-user-sheet:not(.kiasho-hidden) {
  pointer-events: auto;
}

.att-user-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}

.att-user-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: min(92vh, 720px);
  background: #121a26;
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.att-user-sheet:not(.kiasho-hidden) .att-user-sheet-panel {
  transform: translateY(0);
}

.att-user-sheet-grab {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0.55rem auto 0;
  flex: 0 0 auto;
}

.att-user-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem 0.5rem;
  flex: 0 0 auto;
}

.att-user-sheet-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.att-user-sheet-av {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  font-weight: 700;
}

.att-user-sheet-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.att-user-sheet-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.att-user-sheet-handle {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.att-user-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.att-user-sheet-body > * {
  flex-shrink: 0;
}

.att-user-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.att-user-stat {
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(18, 26, 38, 0.45);
  text-align: center;
}

.att-user-stat span {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.att-user-stat strong {
  font-size: 0.82rem;
}

.att-user-stat--adj strong {
  color: #d4a017;
}

.att-user-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.att-user-cal-title {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.att-user-cal-grid {
  gap: 0.25rem;
}

.att-user-cal-grid .att-cal-cell {
  min-height: 2.35rem;
  padding: 0.2rem;
}

.att-user-day-detail {
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 26, 38, 0.45);
}

.att-user-day-label {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.att-user-day-rows.hidden {
  display: none;
}

.att-user-pending.hidden,
.att-user-mgr.hidden {
  display: none;
}

@media (max-width: 639px) {
  .att-adj-form {
    grid-template-columns: 1fr;
  }

  .att-user-sheet-panel {
    max-height: 94vh;
  }

  .att-user-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— YouTube tab (Kiasho-style) —— */
#screenYoutube,
.yt-screen {
  padding: 0 !important;
  background: #0b1220;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: none;
}

.yt-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem 1rem 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.yt-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
}

.yt-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.yt-search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.92rem;
  outline: none;
}

.yt-search-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  cursor: pointer;
  flex-shrink: 0;
}

.yt-search-btn:hover {
  color: var(--text);
}

.yt-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.yt-brand-mark {
  width: 2rem;
  height: 1.35rem;
  border-radius: 6px;
  background: #ff0000;
  position: relative;
}

.yt-brand-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #fff;
}

.yt-brand-text {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.yt-top-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.yt-incognito-toggle {
  font-size: 0.75rem;
  white-space: nowrap;
}

.yt-chips-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.yt-chips-scroll::-webkit-scrollbar {
  display: none;
}

.yt-chips {
  display: flex;
  gap: 0.45rem;
  padding-bottom: 0.15rem;
}

.yt-chip {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}

.yt-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

.yt-chip.active {
  background: #0d9488;
  color: #fff;
}

.yt-status-hint {
  margin: 0;
  font-size: 0.76rem;
  padding: 0 0.15rem;
}

.yt-browse {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.yt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: start;
}

.yt-hero-player-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.yt-hero-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.yt-hero-player:not([src]) {
  display: none;
}

.yt-hero-player[src] + .yt-hero-placeholder {
  display: none;
}

.yt-hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(20, 30, 48, 0.95), rgba(8, 12, 22, 0.98));
}

.yt-hero-ph-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.1rem;
}

.yt-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.yt-hero-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.yt-hero-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-channel-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.yt-channel-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488, #115e59);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.yt-channel-lines {
  flex: 1;
  min-width: 0;
}

.yt-channel-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.yt-channel-sub {
  font-size: 0.74rem;
}

.yt-subscribe-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: default;
  opacity: 0.85;
}

.yt-action-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.yt-pill-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.yt-pill-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.yt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.yt-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.yt-section-link {
  border: 0;
  background: transparent;
  color: #2dd4bf;
  font-size: 0.8rem;
  cursor: pointer;
}

.yt-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.yt-video-grid.yt-search-grid {
  margin-top: 0.25rem;
}

.yt-video-card {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: start;
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.yt-video-thumb-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.yt-video-thumb-wrap.yt-thumb-fallback::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.35);
}

.yt-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-video-duration {
  position: absolute;
  inset-inline-end: 0.4rem;
  bottom: 0.4rem;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.82);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.yt-video-card-title {
  margin: 0.45rem 0 0.2rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-video-card-meta {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

.yt-playlist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.yt-playlist-card {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: start;
  color: inherit;
  cursor: pointer;
}

.yt-playlist-thumb {
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
  background: linear-gradient(135deg, #134e4a, #0f172a);
}

.yt-playlist-title {
  margin: 0.45rem 0 0.15rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.yt-playlist-count {
  font-size: 0.72rem;
  color: var(--muted);
}

.yt-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 1100px) {
  .yt-video-grid,
  .yt-playlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .yt-topbar {
    grid-template-columns: 1fr;
  }

  .yt-brand {
    display: none;
  }

  .yt-hero {
    grid-template-columns: 1fr;
  }

  .yt-video-grid,
  .yt-playlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .yt-shell {
    padding: 0.55rem 0.65rem 1rem;
  }

  .yt-video-grid,
  .yt-playlist-grid {
    grid-template-columns: 1fr;
  }

  .yt-top-actions .yt-incognito-toggle span {
    display: none;
  }
}

/* یوتیوب — پلیر ثابت بالا + لیست اسکرول */
#screenYoutube.yt-simple {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yt-simple .yt-simple-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.yt-simple-dock {
  flex-shrink: 0;
  padding: 0.55rem 0.75rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: var(--bg, #0b1220);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.yt-simple-dock.yt-dock-closed {
  display: none;
}

.yt-load-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.92);
}

.yt-load-strip.hidden {
  display: none !important;
}

.yt-load-strip-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.yt-load-strip-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.25s ease;
}

#ytLoadStripText {
  font-size: 0.78rem;
  color: #94a3b8;
  white-space: nowrap;
}

.yt-simple-dock.yt-dock-min .yt-simple-player-box {
  height: 0;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.yt-simple-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.55rem 0.75rem 1.25rem;
}

.yt-simple-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
  transition: height 0.2s ease, opacity 0.2s ease;
}

.yt-simple-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: none;
}

.yt-simple-video.yt-playing {
  display: block;
}

.yt-simple-idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.86rem;
  background: radial-gradient(circle at 50% 38%, #1e293b, #020617);
}

.yt-simple-idle.hidden {
  display: none;
}

.yt-simple-idle-ic {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  font-size: 1rem;
}

.yt-dl-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(4px);
}

.yt-dl-overlay.hidden {
  display: none;
}

.yt-dl-progress {
  width: min(88%, 320px);
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.yt-dl-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
  transition: width 0.25s ease;
}

.yt-dl-pct {
  font-size: 0.92rem;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.yt-simple-now {
  margin-top: 0.55rem;
}

.yt-simple-now-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.yt-simple-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}

.yt-simple-toolbar {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.yt-tool-btn {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.7);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  cursor: pointer;
}

.yt-tool-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}

.yt-simple-meta,
.yt-simple-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
}

.yt-simple-hint {
  text-align: center;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.yt-simple-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.yt-simple-row {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: right;
  cursor: pointer;
}

.yt-simple-row:hover {
  background: rgba(148, 163, 184, 0.08);
}

.yt-simple-row.yt-row-active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}

.yt-simple-row.yt-row-busy {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.yt-simple-row-thumb {
  position: relative;
  width: 168px;
  min-width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #111827;
}

.yt-simple-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-simple-row-dur {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.78);
  font-size: 0.72rem;
  color: #fff;
}

.yt-simple-row-body {
  flex: 1;
  min-width: 0;
}

.yt-simple-row-title {
  font-size: 0.9rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-simple-row-meta {
  margin-top: 0.2rem;
  font-size: 0.76rem;
}

.yt-simple-empty {
  margin: 0.75rem 0;
  text-align: center;
}

@media (max-width: 640px) {
  .yt-simple-row-thumb {
    width: 120px;
    min-width: 120px;
  }
}

/* —— Kiasho Webmail —— */
.mail-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(56, 120, 180, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(12, 18, 28, 0.35), transparent 40%);
}

.mail-setup {
  margin: auto;
  width: min(420px, 92%);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.mail-setup-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mail-setup-sub {
  margin: 0.45rem 0 1.25rem;
}

.mail-setup-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: start;
}

.mail-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.mail-field input,
.mail-field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.55);
  color: inherit;
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.mail-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.mail-field--grow {
  flex: 1;
  min-height: 0;
}

.mail-field--grow textarea {
  flex: 1;
  min-height: 10rem;
}

.mail-local-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.55);
  padding-inline-end: 0.65rem;
}

.mail-local-row input {
  border: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
}

.mail-domain-suffix {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
}

.mail-app {
  display: grid;
  grid-template-columns: minmax(148px, 190px) 1fr;
  flex: 1;
  height: 100%;
  min-height: 0;
}

.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.45rem;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
  overflow: auto;
}

.mail-folder-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

.mail-folder-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mail-folder-btn.is-active {
  background: rgba(83, 189, 235, 0.14);
  color: #c8eefc;
}

.mail-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.mail-toolbar-start,
.mail-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mail-folder-chip {
  display: none;
  align-items: center;
  gap: 0.3rem;
  max-width: min(52vw, 14rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.mail-folder-chip-caret {
  opacity: 0.55;
  font-size: 0.75rem;
}

#mailFolderChipLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-address {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-icon-btn {
  min-width: 2.2rem;
  padding-inline: 0.45rem;
  font-size: 1.05rem;
  line-height: 1;
}

.mail-panes {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  flex: 1;
  min-height: 0;
}

.mail-list-pane,
.mail-read-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.mail-list-pane {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.mail-list {
  flex: 1;
  overflow: auto;
  padding: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.mail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  padding: 0.7rem 0.7rem;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}

.mail-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.mail-row.is-active {
  background: rgba(83, 189, 235, 0.12);
}

.mail-row.is-unread .mail-row-subject {
  font-weight: 800;
  color: #f2f6fb;
}

.mail-row-subject {
  grid-column: 1 / 2;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row-date {
  grid-column: 2 / 3;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.mail-row-from {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-row-flags {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: rgba(139, 155, 180, 0.9);
}

.mail-list-empty,
.mail-read-empty {
  margin: auto;
  padding: 1rem;
  text-align: center;
}

.mail-list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.mail-read {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0;
}

.mail-read-head {
  flex-shrink: 0;
  padding: 0.75rem 0.9rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mail-read-subject {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  line-height: 1.35;
}

.mail-read-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: pre-wrap;
}

.mail-read-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0.25rem;
}

.mail-read-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 0.9rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.mail-read-body {
  font-size: 0.95rem;
  line-height: 1.55;
  word-break: break-word;
}

.mail-read-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.mail-read-body a {
  color: #7ec8e8;
}

.mail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mail-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  font-size: 0.82rem;
  max-width: 100%;
}

.mail-attach-preview {
  max-width: min(100%, 320px);
  border-radius: 10px;
  margin-top: 0.35rem;
}

.mail-read-dock {
  display: none;
  flex-shrink: 0;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem calc(0.65rem + var(--safe-b, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 24, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.mail-read-dock .btn {
  flex: 1;
  min-height: 2.6rem;
}

.mail-fab {
  display: none;
  position: absolute;
  inset-inline-start: 1rem;
  bottom: calc(1rem + var(--safe-b, 0px));
  z-index: 5;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(135deg, #3d8bfd, #2a6fd4);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(45, 110, 210, 0.45);
  cursor: pointer;
}

.mail-fab span:first-child {
  font-size: 1.35rem;
  line-height: 1;
}

.mail-app.is-reading .mail-fab {
  display: none !important;
}

/* Sheets: compose + folders */
.mail-sheet {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mail-sheet.hidden {
  display: none !important;
}

.mail-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.mail-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #121a26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  padding: 0.3rem 0.85rem calc(0.85rem + var(--safe-b, 0px));
  animation: mailSheetIn 0.22s ease;
}

@keyframes mailSheetIn {
  from {
    transform: translateY(18px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mail-sheet-grab {
  width: 2.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0.35rem auto 0.45rem;
  flex-shrink: 0;
}

.mail-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.mail-sheet-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 850;
}

.mail-sheet-x {
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.mail-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: auto;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.mail-sheet-folder {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: start;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.mail-sheet-folder.is-active {
  border-color: rgba(83, 189, 235, 0.35);
  background: rgba(83, 189, 235, 0.14);
  color: #c8eefc;
  font-weight: 750;
}

.mail-compose-panel {
  max-height: min(94vh, 780px);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(61, 139, 253, 0.14), transparent 55%),
    linear-gradient(180deg, #161f2e 0%, #101722 100%);
  padding: 0.25rem 0 0;
  overflow: hidden;
}

.mail-compose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 1rem 0.65rem;
  flex-shrink: 0;
}

.mail-compose-head-text {
  min-width: 0;
}

.mail-compose-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(160, 190, 220, 0.75);
}

.mail-compose-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0.85rem calc(0.85rem + var(--safe-b, 0px));
  -webkit-overflow-scrolling: touch;
}

.mail-compose-fields {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.45);
  overflow: hidden;
}

.mail-compose-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 2.85rem;
}

.mail-compose-row:last-child {
  border-bottom: 0;
}

.mail-compose-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(170, 188, 210, 0.88);
}

.mail-compose-row input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.7rem 0;
}

.mail-compose-row input::placeholder {
  color: rgba(140, 155, 175, 0.55);
}

.mail-compose-editor {
  display: block;
  margin: 0.7rem 0 0;
  flex: 1;
  min-height: 11rem;
}

.mail-compose-editor textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 11rem;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.45);
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 0.85rem 0.9rem;
  resize: vertical;
}

.mail-compose-editor textarea:focus {
  outline: none;
  border-color: rgba(61, 139, 253, 0.45);
  box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.12);
}

.mail-compose-attach {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mail-compose-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mail-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  align-self: flex-start;
  border: 1px dashed rgba(120, 160, 200, 0.35);
  background: rgba(61, 139, 253, 0.08);
  color: #c9e2ff;
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.mail-attach-btn:hover {
  background: rgba(61, 139, 253, 0.14);
  border-color: rgba(120, 180, 240, 0.55);
}

.mail-attach-btn-ic {
  width: 1rem;
  height: 1rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.mail-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mail-attach-list[hidden] {
  display: none !important;
}

.mail-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.3rem 0.35rem 0.3rem 0.65rem;
  font-size: 0.78rem;
  color: rgba(220, 230, 240, 0.92);
}

.mail-attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}

.mail-attach-chip-x {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.mail-compose-err {
  margin: 0.55rem 0 0;
  color: #ff9b9b;
}

.mail-compose-actions {
  display: flex;
  justify-content: stretch;
  gap: 0.55rem;
  margin-top: 0.85rem;
  position: sticky;
  bottom: 0;
  padding-top: 0.55rem;
  background: linear-gradient(180deg, transparent, #101722 28%);
}

.mail-compose-actions .btn {
  flex: 1;
  min-height: 2.7rem;
  border-radius: 12px;
  font-weight: 800;
}

.mail-compose-send {
  flex: 1.35 !important;
}

.mail-compose-cancel {
  flex: 0.85 !important;
}

body.mail-sheet-open {
  overflow: hidden;
}

@media (min-width: 901px) {
  .mail-sheet {
    align-items: center;
    padding: 1rem;
  }

  .mail-sheet-panel {
    border-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-height: min(86vh, 720px);
  }

  .mail-sheet-grab {
    display: none;
  }

  .mail-fab,
  .mail-folder-chip,
  .mail-read-dock {
    display: none !important;
  }
}

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

  .mail-folders {
    display: none;
  }

  .mail-folder-chip {
    display: inline-flex;
  }

  .mail-compose-desktop {
    display: none !important;
  }

  .mail-address {
    display: none;
  }

  .mail-panes {
    grid-template-columns: 1fr;
  }

  .mail-list-pane {
    border-inline-end: 0;
  }

  .mail-app.is-reading .mail-list-pane {
    display: none;
  }

  .mail-app:not(.is-reading) .mail-read-pane {
    display: none;
  }

  .mail-back-btn {
    display: inline-flex !important;
  }

  .mail-read-actions--inline {
    display: none;
  }

  .mail-app.is-reading .mail-read-dock {
    display: flex;
  }

  .mail-fab {
    display: inline-flex;
  }

  .mail-list-pager .btn {
    min-height: 2.35rem;
    min-width: 4.2rem;
  }

  .mail-row {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
  }

  .mail-list {
    padding: 0;
  }
}


/* —— Polls & Tasks —— */
.send-menu-ic--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

.eng-sheet-panel {
  max-height: min(92vh, 760px);
}

.eng-compose-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0 0.85rem calc(0.85rem + var(--safe-b, 0px));
  overflow: auto;
}

.eng-compose-body select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.55);
  color: inherit;
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.eng-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
}

.eng-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.eng-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, #3d8bfd, #1a4f9c);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 750;
  border: 1.5px solid rgba(12, 18, 28, 0.85);
  box-sizing: border-box;
}

.eng-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eng-av--more {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.62rem;
  letter-spacing: -0.02em;
}

.msg-poll,
.msg-task {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: min(100%, 18rem);
  max-width: 22rem;
  padding: 0.15rem 0;
}

.msg-poll-head,
.msg-task-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.msg-poll-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.22rem 0.6rem 0.22rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #9fd0ff;
  background: rgba(61, 139, 253, 0.14);
  border: 1px solid rgba(61, 139, 253, 0.22);
}

.msg-poll-badge img {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  opacity: 0.95;
}

.msg-poll-badge.is-voted {
  color: #9be7b4;
  background: rgba(46, 160, 90, 0.16);
  border-color: rgba(46, 160, 90, 0.28);
}

.msg-poll-badge.is-closed {
  color: #c5cedb;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.msg-poll-loading {
  font-size: 0.86rem;
  color: var(--muted);
}

.msg-poll-q,
.msg-task-title {
  margin: 0;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.35;
  width: 100%;
}

.msg-poll-opt-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.msg-poll-opt-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(61, 139, 253, 0.35);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

.msg-poll-meta,
.msg-task-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.msg-poll-opt {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  border-radius: 14px;
  padding: 0.6rem 0.7rem;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.msg-poll-opt:hover:not(:disabled) {
  border-color: rgba(61, 139, 253, 0.4);
  background: rgba(61, 139, 253, 0.08);
}

.msg-poll-opt.is-mine {
  border-color: rgba(61, 139, 253, 0.55);
  background: rgba(61, 139, 253, 0.14);
}

.msg-poll-opt:disabled {
  cursor: default;
  opacity: 0.98;
}

.msg-poll-opt-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.msg-poll-pct {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #9fd0ff;
}

.msg-poll-bar {
  height: 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.msg-poll-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d8bfd, #62b0ff);
  border-radius: inherit;
}

.msg-poll-avatars {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin-top: 0.15rem;
  overflow: hidden;
}

.msg-poll-avatars .eng-av {
  margin-inline-start: -0.35rem;
}

.msg-poll-avatars .eng-av:first-child {
  margin-inline-start: 0;
}

.msg-poll-vote-count,
.msg-poll-vote-count-only {
  margin-inline-start: 0.45rem;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

.msg-poll-comment {
  margin-top: 0.15rem;
}

.msg-poll-comment input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.45);
  color: inherit;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.84rem;
}

.msg-task-status {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.06);
}

.msg-task-status.is-open { color: #9fd0ff; background: rgba(61, 139, 253, 0.14); }
.msg-task-status.is-done { color: #9be7b4; background: rgba(46, 160, 90, 0.16); }
.msg-task-status.is-partial { color: #ffd48a; background: rgba(200, 140, 40, 0.16); }
.msg-task-status.is-rejected,
.msg-task-status.is-expired { color: #ffb0b0; background: rgba(180, 60, 60, 0.16); }

.msg-task-who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.msg-task-who .eng-av {
  width: 2rem;
  height: 2rem;
  font-size: 0.78rem;
}

.msg-task-who-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.msg-task-who-text strong {
  font-size: 0.86rem;
}

.msg-task-who-text span {
  font-size: 0.7rem;
  color: var(--muted);
}

.msg-task-progress {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.msg-task-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: var(--muted);
}

.msg-task-progress-top strong {
  color: #9fd0ff;
  font-variant-numeric: tabular-nums;
}

.msg-task-progress-bar {
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.msg-task-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2ea05a, #62d48a);
  border-radius: inherit;
  transition: width 0.2s ease;
}

.msg-task-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: rgba(232, 238, 247, 0.88);
}

.msg-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.msg-task-actions .btn {
  flex: 1;
  min-width: 4.5rem;
  min-height: 2.2rem;
  font-size: 0.8rem;
}

.msg-task-btn-danger {
  color: #ffb0b0 !important;
  border-color: rgba(180, 60, 60, 0.35) !important;
}

.msg-task-note {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.45);
  color: inherit;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.84rem;
}

.msg-task-range {
  width: 100%;
  accent-color: #3d8bfd;
  margin: 0;
}

.task-assignee-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.task-assignee-selected {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(61, 139, 253, 0.35);
  background: rgba(61, 139, 253, 0.1);
}

.task-assignee-av {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.task-assignee-av.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3d8bfd, #1a4f9c);
  color: #fff;
  font-weight: 750;
  font-size: 0.85rem;
}

.task-assignee-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}

.task-assignee-meta strong {
  font-size: 0.88rem;
}

.task-assignee-meta span {
  font-size: 0.72rem;
  color: var(--muted);
}

.task-assignee-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}

.task-assignee-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 24, 0.55);
  padding: 0.45rem 0.65rem;
}

.task-assignee-search-ic {
  width: 1rem;
  height: 1rem;
  opacity: 0.65;
  flex-shrink: 0;
}

.task-assignee-search-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.task-assignee-results {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 12rem;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 16, 28, 0.96);
  padding: 0.25rem;
}

.task-assignee-hit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
}

.task-assignee-hit:hover,
.task-assignee-hit:focus-visible {
  background: rgba(61, 139, 253, 0.14);
  outline: none;
}

.task-assignee-hit-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.task-assignee-hit-meta strong {
  font-size: 0.86rem;
}

.task-assignee-hit-meta span {
  font-size: 0.72rem;
  color: var(--muted);
}

.task-board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.85rem 0.55rem;
}

.task-board-filter {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.task-board-filter.is-active {
  background: rgba(61, 139, 253, 0.18);
  border-color: rgba(61, 139, 253, 0.4);
}

.task-board-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0.85rem calc(0.85rem + var(--safe-b, 0px));
  overflow: auto;
  max-height: 60vh;
}

.task-board-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
  background: rgba(8, 12, 20, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.task-board-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.task-board-row h3 {
  margin: 0;
  font-size: 0.92rem;
}

.task-board-empty {
  text-align: center;
  color: var(--muted);
  padding: 1.5rem 0.5rem;
}

/* —— Broadcast live shell —— */
.live-event-card--broadcast {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: min(100%, 360px);
  padding: 0;
  overflow: hidden;
}

.live-bc-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0a0e14;
  overflow: hidden;
}

.live-bc-preview video,
.live-bc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0e14;
}

.live-bc-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  background: radial-gradient(circle at 30% 20%, rgba(255,70,80,0.18), transparent 55%), #121820;
}

.live-bc-pill {
  position: absolute;
  top: 0.55rem;
  inset-inline-start: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.live-bc-pill::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #fff;
  animation: live-bc-pulse 1.1s ease-in-out infinite;
}

@keyframes live-bc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.live-bc-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.75rem 0.75rem;
}

.live-bc-title {
  margin: 0;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.35;
}

.live-bc-sub {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.live-event-card--broadcast .live-event-join {
  margin: 0 0.75rem 0.75rem;
  width: auto;
  justify-content: center;
}

.bc-shell {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(4, 8, 14, 0.72);
  backdrop-filter: blur(8px);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.bc-shell.hidden { display: none !important; }

.bc-shell-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  width: min(1120px, 100%);
  height: min(100%, 760px);
  margin: auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0c121c;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.bc-shell[data-bc-mode="full"] .bc-shell-panel {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.bc-shell[data-bc-mode="mini"] {
  align-items: flex-end;
  justify-content: flex-start;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  padding: 0 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

.bc-shell[data-bc-mode="mini"] .bc-shell-panel {
  pointer-events: auto;
  width: min(340px, calc(100vw - 1.5rem));
  height: auto;
  grid-template-columns: 1fr;
  border-radius: 14px;
}

.bc-shell[data-bc-mode="mini"] .bc-shell-side {
  display: none;
}

.bc-shell[data-bc-mode="mini"] .bc-shell-stage {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

.bc-shell-stage {
  position: relative;
  background: #05080e;
  min-height: 280px;
}

.bc-shell-video,
.bc-shell-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05080e;
  display: block;
}

.bc-shell-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 28%, transparent 72%, rgba(0,0,0,0.35) 100%);
}

.bc-shell-top {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.7rem;
}

.bc-live-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.bc-shell-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
  color: #fff;
}

.bc-shell-meta strong {
  font-size: 0.86rem;
}

.bc-shell-meta span {
  font-size: 0.7rem;
  opacity: 0.8;
}

.bc-mode-switch {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.15rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}

.bc-mode-btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}

.bc-mode-btn.is-active {
  background: rgba(61,139,253,0.35);
  color: #fff;
}

.bc-shell-icon-btn {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.bc-shell-icon-btn--danger {
  background: rgba(180,40,50,0.75);
  border-color: rgba(255,120,120,0.35);
}

.bc-shell-side {
  display: flex;
  flex-direction: column;
  border-inline-start: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,14,22,0.96);
  min-height: 0;
}

.bc-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.86rem;
}

.bc-comment-list {
  flex: 1;
  overflow: auto;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bc-comment-row {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
}

.bc-comment-av {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, #3d8bfd, #1a4f9c);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 750;
  display: grid;
  place-items: center;
}

.bc-comment-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bc-comment-bubble {
  min-width: 0;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 0.35rem 0.5rem;
}

.bc-comment-bubble strong {
  display: block;
  font-size: 0.72rem;
  color: #9fd0ff;
}

.bc-comment-bubble span {
  font-size: 0.8rem;
  line-height: 1.35;
  word-break: break-word;
}

.bc-comment-form {
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.08);
}

.bc-comment-form input {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(8,14,24,0.55);
  color: inherit;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.84rem;
}

.live-save-modal {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.55);
}

.live-save-modal.hidden { display: none !important; }

.live-save-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.live-save-panel {
  position: relative;
  width: min(420px, 100%);
  margin: 0;
  border-radius: 18px 18px 0 0;
  background: #121a26;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.live-save-title {
  margin: 0;
  font-size: 1.05rem;
}

.live-save-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.live-save-preview {
  width: 100%;
  max-height: 220px;
  border-radius: 12px;
  background: #000;
}

.live-save-actions {
  display: flex;
  gap: 0.45rem;
}

.live-save-actions .btn {
  flex: 1;
}

@media (max-width: 820px) {
  .bc-shell[data-bc-mode="meet"] .bc-shell-panel,
  .bc-shell[data-bc-mode="full"] .bc-shell-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 48vh) minmax(0, 1fr);
    height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .bc-shell[data-bc-mode="full"] .bc-shell-side,
  .bc-shell[data-bc-mode="meet"] .bc-shell-side {
    border-inline-start: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}
/* —— Broadcast shell UX v2.38.2 overrides —— */
.bc-shell-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: min(980px, 100%) !important;
  height: min(100%, 820px) !important;
}
.bc-shell[data-bc-mode="full"] .bc-shell-panel {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: 1fr !important;
}
.bc-shell[data-bc-mode="mini"] .bc-shell-comments-overlay { display: none !important; }
.bc-shell[data-bc-mode="mini"] .bc-shell-panel { width: min(360px, calc(100vw - 1.5rem)) !important; }
.bc-shell-stage { min-height: min(72vh, 640px) !important; height: 100%; }
.bc-shell-video, .bc-shell-poster { object-fit: cover !important; }
.bc-shell-chrome {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.58) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.72) 100%) !important;
}
.bc-shell-top { gap: 0.55rem !important; padding: 0.75rem 0.85rem !important; }
.bc-shell-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-inline-start: auto; }
.bc-live-pill { padding: 0.28rem 0.65rem !important; font-size: 0.72rem !important; }
.bc-shell-meta { flex: 0 1 auto !important; }
.bc-shell-meta strong { font-size: 0.95rem !important; }
.bc-shell-meta span { font-size: 0.74rem !important; }
.bc-mode-btn { font-size: 0.8rem !important; font-weight: 650; padding: 0.45rem 0.75rem !important; min-height: 2.2rem; }
.bc-shell-icon-btn { padding: 0.5rem 0.95rem !important; font-size: 0.84rem !important; font-weight: 700; min-height: 2.4rem; }
.bc-shell-icon-btn--danger { background: rgba(200,40,55,0.88) !important; }
.bc-shell-side { display: none !important; }
.bc-shell-comments-overlay {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  max-height: 46%;
  min-height: 11rem;
}
.bc-side-head--overlay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.9);
  font-size: 0.84rem;
  padding: 0 0.15rem;
}
.bc-comment-list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.15rem 0.1rem !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.bc-comment-bubble {
  background: rgba(8, 12, 20, 0.62) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px !important;
  padding: 0.4rem 0.6rem !important;
  backdrop-filter: blur(6px);
}
.bc-comment-bubble span { font-size: 0.86rem !important; color: #fff; }
.bc-comment-form {
  display: flex !important;
  gap: 0.45rem !important;
  align-items: stretch;
  padding: 0 !important;
  border-top: 0 !important;
}
.bc-comment-form input {
  flex: 1;
  min-height: 2.85rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(8, 14, 24, 0.82) !important;
  color: #fff !important;
  padding: 0.7rem 0.9rem !important;
  font-size: 0.95rem !important;
}
.bc-comment-form input:focus {
  border-color: rgba(61,139,253,0.65) !important;
  box-shadow: 0 0 0 3px rgba(61,139,253,0.18);
}
.bc-comment-send {
  border: 0;
  border-radius: 14px;
  background: #3d8bfd;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0 1.1rem;
  min-width: 4.8rem;
  cursor: pointer;
}
.live-event-card--broadcast .live-event-join {
  min-height: 2.55rem;
  font-size: 0.9rem;
  font-weight: 750;
  border-radius: 12px;
}
@media (max-width: 820px) {
  .bc-shell[data-bc-mode="meet"] .bc-shell-panel,
  .bc-shell[data-bc-mode="full"] .bc-shell-panel {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    grid-template-rows: none !important;
  }
  .bc-shell-stage { min-height: 100% !important; }
  .bc-shell-comments-overlay { max-height: 42%; min-height: 10rem; }
}

/* ——— تراکم بهتر روی دسکتاپ کوچک / لپ‌تاپ ———
   مقیاس rem کل UI را کم می‌کند تا فونت، پدینگ و آیکن‌ها «زوم» به نظر نرسند.
   ترتیب font-size از بزرگ به کوچک است تا قاعدهٔ آخر همیشه فشرده‌تر بماند. */
@media (min-width: 920px) and (max-width: 1440px) {
  html {
    font-size: 14.5px;
  }
}

@media (min-width: 920px) and (max-height: 900px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 920px) and (max-width: 1280px) {
  html {
    font-size: 13.5px;
  }

  .app-inner {
    grid-template-columns: minmax(0, 1fr) minmax(172px, 196px);
    column-gap: 0.45rem;
    padding: 0.4rem 0.55rem 0.35rem;
  }
}

@media (min-width: 920px) and (max-height: 860px) {
  html {
    font-size: 13.25px;
  }

  body {
    line-height: 1.45;
  }

  .app-inner {
    padding-top: 0.35rem;
    padding-bottom: 0.3rem;
  }

  .app-shell-bar {
    padding: 0.3rem 0.4rem;
    margin-bottom: 0.2rem;
  }

  .nav-drawer-nav {
    gap: 0.12rem;
  }

  .side-nav-item.nav-chip.nav-chip--drawer {
    padding: 0.4rem 0.55rem;
    gap: 0.5rem;
    font-size: 0.84rem;
  }

  .sidebar-user {
    padding: 0.45rem 0.5rem;
    gap: 0.55rem;
  }

  .sidebar-user-av {
    width: 40px;
    height: 40px;
  }

  .composer {
    padding: 0.4rem 0.5rem 0.45rem;
  }

  .composer-bar {
    padding: 0.32rem 0.4rem;
    gap: 0.35rem;
  }

  .msg {
    padding: 0.42rem 0.6rem 0.48rem;
  }

  .log {
    padding: 0.65rem 0.75rem;
  }
}

@media (min-width: 920px) and (max-width: 1100px) {
  html {
    font-size: 13px;
  }

  .app-inner {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 184px);
  }
}

@media (min-width: 920px) and (max-height: 740px) {
  html {
    font-size: 12.75px;
  }

  .side-nav-item.nav-chip.nav-chip--drawer {
    padding: 0.32rem 0.5rem;
  }

  .sidebar-user-av {
    width: 36px;
    height: 36px;
  }

  .msg-avatar {
    width: 30px;
    height: 30px;
  }

  .topbar-act,
  .topbar-members {
    height: 2.2rem;
  }

  .topbar-members {
    width: 2.55rem;
  }
}

/* عرض و ارتفاع هر دو محدود: فشرده‌ترین حالت لپ‌تاپ */
@media (min-width: 920px) and (max-width: 1366px) and (max-height: 800px) {
  html {
    font-size: 12.5px;
  }

  .app-inner {
    grid-template-columns: minmax(0, 1fr) minmax(158px, 180px);
    column-gap: 0.4rem;
  }

  .att-dock {
    width: 320px;
  }

  .att-dock.att-dock--open {
    max-width: 320px;
  }
}

/* Link ingest cards */
.la-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.7rem 0.75rem 0.75rem;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(22, 32, 48, 0.95), rgba(12, 18, 28, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.msg-wrap:has(.la-card),
.msg-wrap:has(.wp-invite-card) {
  width: min(100%, 22.5rem);
  max-width: min(94vw, 22.5rem);
  min-width: 0;
  box-sizing: border-box;
}
.msg:has(.la-card),
.msg:has(.wp-invite-card) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.msg-body:has(> .la-card),
.msg-body:has(> .wp-invite-card) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.la-card-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: start;
}
.la-card-ic {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(61, 139, 253, 0.16);
  color: #9fd0ff;
  font-size: 0.85rem;
}
.la-card-top-text {
  min-width: 0;
}
.la-card-title {
  font-weight: 750;
  font-size: 0.9rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.la-card-sub {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.72;
  line-height: 1.35;
}
.la-card-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 750;
  color: #9fd0ff;
  background: rgba(61, 139, 253, 0.14);
  border: 1px solid rgba(61, 139, 253, 0.22);
}
.la-card[data-status='ready'] .la-card-badge {
  color: #b8e0c8;
  background: rgba(46, 160, 110, 0.16);
  border-color: rgba(46, 160, 110, 0.28);
}
.la-card[data-status='error'] .la-card-badge,
.la-card[data-status='cancelled'] .la-card-badge {
  color: #ffb4b4;
  background: rgba(200, 60, 60, 0.16);
  border-color: rgba(200, 60, 60, 0.28);
}
.la-card-bar {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.la-card-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d8bfd, #56c4a0);
  transition: width 0.25s ease;
}
.la-card-media {
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.la-card-video {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  height: auto;
  max-height: min(48vh, 320px);
  background: #000;
}
.la-card-audio {
  display: block;
  width: 100%;
  margin: 0.15rem 0;
}
.la-card-img {
  display: block;
  width: 100%;
  max-height: min(42vh, 280px);
  object-fit: cover;
}
.la-card-caption {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.4;
}
.la-card-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  opacity: 0.72;
  line-height: 1.35;
}
.la-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}
.la-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  flex: 0 1 auto;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 420px) {
  .la-btn {
    padding: 0.28rem 0.55rem;
    font-size: 0.7rem;
  }
}
.la-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.la-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.la-btn--primary {
  background: rgba(61, 139, 253, 0.22);
  border-color: rgba(61, 139, 253, 0.35);
  color: #cfe4ff;
}
.la-btn--accent {
  background: rgba(46, 160, 110, 0.2);
  border-color: rgba(46, 160, 110, 0.35);
  color: #c8f0d8;
}
.la-btn--danger {
  background: rgba(200, 70, 70, 0.2);
  border-color: rgba(200, 70, 70, 0.35);
  color: #ffc7c7;
}
.la-btn--ghost-danger {
  color: #ffb4b4;
  border-color: rgba(200, 70, 70, 0.25);
}
.la-btn--ghost {
  opacity: 0.85;
}
.msg-link-detect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.msg-link-detect-btn {
  font-size: 0.78rem !important;
}
.msg-http-link {
  color: #9fd0ff;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-watch-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(6, 10, 16, 0.72);
  display: grid;
  place-items: center;
  padding: 1rem;
}
#linkWatchShareSheet.wp-sheet-over-player,
.forward-sheet.wp-sheet-over-player {
  z-index: 13050 !important;
}
body.wp-share-open .wp-overlay {
  pointer-events: none;
}
body.wp-share-open .wp-overlay .wp-card,
body.wp-share-open .wp-overlay .wp-card2,
body.wp-share-open .wp-overlay .wp-shell {
  pointer-events: auto;
}
.link-watch-card {
  width: min(960px, 100%);
  background: #121820;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.link-watch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
}
.link-watch-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.link-watch-media {
  width: 100%;
  max-height: min(70vh, 540px);
  background: #000;
  display: block;
}
.wp-overlay .wp-card {
  width: min(980px, 100%);
  display: flex;
  flex-direction: column;
  max-height: min(94vh, 860px);
}
.wp-head {
  flex-wrap: wrap;
}
.wp-head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}
.wp-head-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(50vw, 420px);
}
.wp-role {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-role--host {
  background: rgba(61, 139, 253, 0.22);
  border-color: rgba(61, 139, 253, 0.4);
}
.wp-viewers {
  font-size: 0.75rem;
  opacity: 0.75;
}
.wp-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wp-stage {
  position: relative;
  background: #000;
}
.wp-video {
  max-height: min(62vh, 520px);
  width: 100%;
  display: block;
  background: #000;
}
/* superseded by .wp-shell player — keep for any leftover refs */
.wp-overlay .wp-shell .wp-video {
  max-height: none;
  height: 100%;
  object-fit: contain;
}
.wp-viewer-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem 0.65rem;
  background: rgba(10, 14, 20, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wp-viewer-hint {
  flex: 1;
  font-size: 0.74rem;
  opacity: 0.75;
}
.wp-vol {
  width: 90px;
  accent-color: #3d8bfd;
}
.wp-live-chat {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem 0.7rem;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 14, 0.55) 35%, rgba(4, 8, 14, 0.88) 100%);
  pointer-events: none;
}
.wp-live-chat > * {
  pointer-events: auto;
}
.wp-live-chat-peek {
  max-height: 7.2rem;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 18%);
}
.wp-live-chat-list {
  max-height: 7rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.wp-live-chat-list .wp-comment {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  width: fit-content;
  max-width: 92%;
  backdrop-filter: blur(6px);
}
.wp-live-chat-toggle {
  align-self: flex-start;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.wp-live-chat-panel {
  display: none;
}
.wp-live-chat.is-open .wp-live-chat-panel {
  display: block;
}
.wp-live-chat.is-open .wp-live-chat-peek {
  max-height: 9.5rem;
}

/* =========================================================
   Custom watch-party player (v2.43) — isolated classes, flex layout
   ========================================================= */
.wp-shell {
  --wp-bg: #0b1017;
  --wp-panel: #121a24;
  --wp-line: rgba(255, 255, 255, 0.1);
  --wp-accent: #3d8bfd;
  --wp-danger: #e8455a;
  width: min(1120px, 100%);
  height: min(86vh, 720px);
  max-height: min(94vh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--wp-bg);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--wp-line);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  color: #f3f6fb;
  position: relative;
}
.wp-shell.is-fs {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: 0;
}
.wp-shell .wp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: rgba(11, 16, 23, 0.98);
  border-bottom: 1px solid var(--wp-line);
  flex: 0 0 auto;
  min-height: 2.75rem;
  z-index: 5;
}
.wp-shell .wp-top-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}
.wp-shell .wp-live-dot {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  background: var(--wp-danger);
  color: #fff;
  line-height: 1;
}
.wp-shell .wp-pill {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--wp-line);
  background: rgba(255, 255, 255, 0.06);
}
.wp-shell .wp-pill--host {
  background: rgba(61, 139, 253, 0.2);
  border-color: rgba(61, 139, 253, 0.45);
  color: #b7d6ff;
}
.wp-shell .wp-viewers {
  flex: 0 0 auto;
  font-size: 0.75rem;
  opacity: 0.72;
}
.wp-shell .wp-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 0.92;
}
.wp-shell .wp-top-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.wp-shell .wp-chip {
  appearance: none;
  border: 1px solid var(--wp-line);
  background: rgba(255, 255, 255, 0.05);
  color: #eef3fa;
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.wp-shell .wp-chip:hover { background: rgba(255, 255, 255, 0.1); }
.wp-shell .wp-chip--danger {
  border-color: rgba(232, 69, 90, 0.45);
  background: rgba(232, 69, 90, 0.14);
  color: #ffc1c9;
}
.wp-shell .wp-chip--danger:hover { background: rgba(232, 69, 90, 0.28); }
.wp-shell .wp-ico {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.wp-shell .wp-ico:hover { background: rgba(255, 255, 255, 0.1); }
.wp-shell .wp-ico.is-on { background: rgba(61, 139, 253, 0.32); }
.wp-shell .wp-ico.is-locked { opacity: 0.4; cursor: not-allowed; }

/* Body: flex so stage NEVER stretches under the rail */
.wp-shell .wp-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  background: #000;
  overflow: hidden;
}

/* Video canvas — only this column hosts chrome/controls */
.wp-shell .wp-canvas {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: #000;
  overflow: hidden;
  z-index: 1;
}
.wp-shell .wp-vid {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
  background: #000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 0;
}
.wp-shell .wp-lock-hint {
  position: absolute;
  top: 0.7rem;
  inset-inline-end: 0.7rem;
  z-index: 4;
  font-size: 0.72rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0.85;
}
.wp-shell .wp-bubbles {
  position: absolute;
  inset-inline-start: 0.8rem;
  bottom: 4.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  max-width: min(58%, 20rem);
  pointer-events: none;
  z-index: 5;
}
.wp-shell .wp-bubble {
  background: rgba(8, 12, 18, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.35;
  width: fit-content;
  max-width: 100%;
  animation: wpBubbleIn 0.25s ease;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.wp-shell .wp-bubble strong { color: #9ec5ff; margin-inline-end: 0.2rem; }
.wp-shell .wp-bubble.is-leaving { opacity: 0; transform: translateY(-8px); }
@keyframes wpBubbleIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Controls strictly inside canvas */
.wp-shell .wp-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 6;
  padding: 1.6rem 0.75rem 0.55rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.92) 100%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: auto;
}
.wp-shell.is-chrome-hidden .wp-chrome {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.wp-shell .wp-seek-wrap {
  padding: 0 0.15rem 0.35rem;
  width: 100%;
  box-sizing: border-box;
  direction: ltr;
  unicode-bidi: isolate;
}
.wp-shell .wp-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  direction: ltr;
  background: linear-gradient(to right, var(--wp-accent) 0%, var(--wp-accent) var(--wp-seek, 0%), rgba(255,255,255,0.25) var(--wp-seek, 0%), rgba(255,255,255,0.25) 100%);
  outline: none;
  cursor: pointer;
  margin: 0;
  display: block;
}
.wp-shell .wp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 2px rgba(61, 139, 253, 0.45);
}
.wp-shell .wp-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.wp-shell .wp-seek.is-locked {
  cursor: default;
  background: linear-gradient(to right, var(--wp-danger) 0%, var(--wp-danger) var(--wp-seek, 0%), rgba(255,255,255,0.2) var(--wp-seek, 0%), rgba(255,255,255,0.2) 100%);
}
.wp-shell .wp-chrome-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  box-sizing: border-box;
}
.wp-shell .wp-clock {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
  min-width: 5.8rem;
  padding-inline: 0.2rem;
  direction: ltr;
  unicode-bidi: isolate;
}
.wp-shell .wp-grow { flex: 1; }
.wp-shell .wp-vol-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  direction: ltr;
  unicode-bidi: isolate;
}
.wp-shell .wp-vol {
  width: 0 !important;
  opacity: 0;
  transition: width 0.18s ease, opacity 0.18s ease;
  accent-color: var(--wp-accent);
  direction: ltr;
}
.wp-shell .wp-vol-wrap:hover .wp-vol,
.wp-shell .wp-vol-wrap:focus-within .wp-vol {
  width: 72px !important;
  opacity: 1;
}

/* Side comments rail — never overlays canvas on desktop */
.wp-shell .wp-rail {
  flex: 0 0 0;
  width: 0;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--wp-panel);
  border-inline-start: 0 solid transparent;
  z-index: 3;
  position: relative;
  transition: flex-basis 0.2s ease, width 0.2s ease, max-width 0.2s ease;
}
.wp-shell.is-chat-open .wp-rail {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  border-inline-start: 1px solid var(--wp-line);
}
.wp-shell .wp-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--wp-line);
  font-size: 0.84rem;
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}
.wp-shell .wp-rail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.wp-shell .wp-cmt {
  font-size: 0.84rem;
  line-height: 1.4;
  word-break: break-word;
}
.wp-shell .wp-cmt strong { color: #9ec5ff; margin-inline-end: 0.2rem; }
.wp-shell .wp-rail-form {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--wp-line);
  flex: 0 0 auto;
  background: var(--wp-panel);
}
.wp-shell .wp-rail-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding: 0 0.85rem;
  font-size: 0.84rem;
  text-align: right;
}
.wp-shell .wp-rail-form input:focus {
  outline: none;
  border-color: rgba(61, 139, 253, 0.65);
}
.wp-shell .wp-send {
  appearance: none;
  border: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--wp-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.wp-shell .wp-send:hover { filter: brightness(1.08); }

.wp-shell .wp-quality {
  font-size: 0.7rem;
  padding: 0.28rem 0.55rem;
  max-width: 7.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-shell .wp-quality.is-low {
  border-color: rgba(255, 193, 7, 0.45);
  background: rgba(255, 193, 7, 0.14);
  color: #ffe08a;
}

.wp-shell .wp-peer-alerts {
  position: absolute;
  inset-inline-start: 0.75rem;
  bottom: 4.8rem;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
  max-width: min(70%, 18rem);
}
.wp-shell .wp-peer-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem 0.4rem 0.4rem;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.wp-shell .wp-peer-alert.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wp-shell .wp-peer-alert.is-out {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}
.wp-shell .wp-peer-alert-av {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(61, 139, 253, 0.35);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
}
.wp-shell .wp-peer-alert-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wp-shell .wp-peer-alert-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.25;
}
.wp-shell .wp-peer-alert-body strong {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-shell .wp-peer-alert-body span {
  font-size: 0.68rem;
  opacity: 0.75;
}
.wp-shell .wp-peer-alert--join {
  border-color: rgba(61, 139, 253, 0.35);
}
.wp-shell .wp-peer-alert--leave {
  border-color: rgba(232, 69, 90, 0.35);
}

@media (max-width: 760px) {
  .wp-shell {
    width: 100%;
    height: min(92vh, 780px);
    border-radius: 12px;
  }
  .wp-shell.is-chat-open .wp-rail {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    flex: none;
    width: auto;
    max-width: none;
    height: min(48%, 340px);
    z-index: 12;
    border-inline-start: 0;
    border-top: 1px solid var(--wp-line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  }
  .wp-shell .wp-title { max-width: 36vw; }
  .wp-shell .wp-vol-wrap .wp-vol {
    width: 64px !important;
    opacity: 1;
  }
}

.wp-invite-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #121820;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}
.wp-invite-card.is-live {
  border-color: rgba(232, 64, 87, 0.45);
}
.wp-invite-card.is-ended {
  border-color: rgba(148, 163, 184, 0.28);
  background: #0e1319;
  box-shadow: none;
  filter: grayscale(0.45);
  opacity: 0.9;
}
.wp-invite-card.is-ended .wp-invite-preview-wrap,
.wp-invite-card.is-ended .wp-invite-preview {
  filter: brightness(0.72);
}
.wp-invite-card.is-ended .wp-invite-pill {
  background: #5a6570;
}
.wp-invite-card.is-ended .wp-invite-pill::before {
  animation: none;
  opacity: 0.55;
}
.wp-invite-actions.is-ended {
  padding-top: 0.35rem;
}
.wp-invite-ended-badge {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.01em;
}

.wp-share-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  padding: 0.35rem 0.15rem 0.65rem;
}
.wp-share-perm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  user-select: none;
}
.wp-share-perm input {
  accent-color: var(--wp-accent, #3d8bfd);
}

/* Minimized floating watch party */
body.wp-minimized .wp-overlay {
  background: transparent;
  pointer-events: none;
  z-index: 120;
}
body.wp-minimized .wp-overlay .wp-shell {
  pointer-events: auto;
  position: fixed;
  inset: auto 0.85rem 0.85rem auto;
  width: min(22rem, calc(100vw - 1.4rem));
  height: auto;
  max-height: min(42vh, 280px);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transform: none;
  animation: wp-float-in 0.28s ease;
}
body.wp-minimized .wp-overlay .wp-shell .wp-top {
  padding: 0.4rem 0.55rem;
}
body.wp-minimized .wp-overlay .wp-shell .wp-title {
  max-width: 8rem;
  font-size: 0.78rem;
}
body.wp-minimized .wp-overlay .wp-shell .wp-rail,
body.wp-minimized .wp-overlay .wp-shell .wp-chrome,
body.wp-minimized .wp-overlay .wp-shell .wp-bubbles,
body.wp-minimized .wp-overlay .wp-shell .wp-peer-alerts,
body.wp-minimized .wp-overlay .wp-shell .wp-lock-hint,
body.wp-minimized .wp-overlay .wp-shell .wp-cam-dock {
  display: none !important;
}
body.wp-minimized .wp-overlay .wp-shell .wp-body {
  display: block;
  min-height: 0;
}
body.wp-minimized .wp-overlay .wp-shell .wp-canvas {
  min-height: 140px;
  height: 160px;
}
@keyframes wp-float-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Live cam dock beside movie */
.wp-shell .wp-body.has-cams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 28%);
  gap: 0;
  transition: grid-template-columns 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-shell .wp-cam-dock {
  display: none;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem;
  background: rgba(6, 10, 16, 0.92);
  border-inline-start: 1px solid var(--wp-line, rgba(255, 255, 255, 0.08));
  overflow: auto;
  min-width: 0;
  transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-shell .wp-body.has-cams .wp-cam-dock {
  display: flex;
  animation: wp-cam-dock-in 0.38s ease;
}
@keyframes wp-cam-dock-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.wp-shell .wp-cam-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0b121a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 3 / 4;
  flex: 1 1 auto;
  min-height: 4.5rem;
  transition: flex 0.32s ease, opacity 0.28s ease, transform 0.28s ease;
}
.wp-shell .wp-cam-tile.is-entering {
  animation: wp-cam-tile-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wp-cam-tile-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.wp-shell .wp-cam-mute {
  position: absolute;
  top: 0.35rem;
  inset-inline-end: 0.35rem;
  z-index: 3;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.wp-shell .wp-cam-mute:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.06);
}
.wp-shell .wp-cam-mute.is-muted {
  background: rgba(180, 40, 40, 0.85);
}
.wp-shell .wp-cam-tile.is-mic-off .wp-cam-label::after {
  content: ' · میوت';
  opacity: 0.75;
  font-weight: 600;
}
.gvoip-video-tile.is-entering {
  animation: wp-cam-tile-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gvoip-video-tool.is-muted,
.gvoip-video-tool[data-voip-mute].is-muted {
  background: rgba(180, 40, 40, 0.85) !important;
}
.msg-wrap.is-pending {
  opacity: 0.72;
}
.msg-wrap.is-pending .msg {
  filter: saturate(0.92);
}
.wp-shell .wp-cam-dock[data-count="1"] .wp-cam-tile {
  aspect-ratio: 4 / 5;
  max-height: 100%;
}
.wp-shell .wp-cam-dock[data-count="2"] .wp-cam-tile,
.wp-shell .wp-cam-dock[data-count="3"] .wp-cam-tile {
  flex: 1 1 30%;
}
.wp-shell .wp-cam-dock[data-count="4"] .wp-cam-tile,
.wp-shell .wp-cam-dock[data-count="5"] .wp-cam-tile {
  flex: 1 1 18%;
  aspect-ratio: 1 / 1;
}
.wp-shell .wp-cam-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.wp-shell .wp-cam-tile.is-off video {
  opacity: 0.25;
}
.wp-shell .wp-cam-label {
  position: absolute;
  inset-inline: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 0.7rem);
}
.wp-shell .wp-cam-tile.is-leaving {
  opacity: 0;
  transform: scale(0.92);
}
@media (max-width: 760px) {
  .wp-shell .wp-body.has-cams {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .wp-shell .wp-cam-dock {
    flex-direction: row;
    border-inline-start: 0;
    border-top: 1px solid var(--wp-line, rgba(255, 255, 255, 0.08));
    max-height: 7.5rem;
    overflow-x: auto;
  }
  .wp-shell .wp-cam-tile {
    flex: 0 0 5.2rem;
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
}
.wp-invite-preview-wrap,
.wp-invite-preview {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #070b10;
  overflow: hidden;
}
.wp-invite-video {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.wp-invite-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 700;
}
.wp-invite-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.wp-invite-pill {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #e84057;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.wp-invite-pill::before {
  content: '';
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #fff;
  animation: live-bc-pulse 1.1s ease-in-out infinite;
}
.wp-invite-clock {
  position: absolute;
  inset-inline-start: 0.55rem;
  bottom: 0.5rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  direction: ltr;
}
.wp-invite-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.wp-invite-body {
  padding: 0.7rem 0.8rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.wp-invite-sub {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(232, 238, 247, 0.65);
}
.wp-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem 0.85rem;
}
.wp-invite-btn {
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  min-height: 2.35rem;
  font-weight: 800;
}
.wp-comments {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(12, 16, 22, 0.96);
}
.wp-comments-toggle {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.55rem 0.85rem;
  text-align: start;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.wp-comments.is-collapsed .wp-comments-panel {
  display: none;
}
.wp-comments-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0.75rem 0.75rem;
  max-height: 220px;
}
.wp-comments-list {
  overflow: auto;
  max-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.15rem 0.1rem;
}
.wp-comment {
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.92;
}
.wp-comment strong {
  color: #9fd0ff;
  margin-inline-end: 0.25rem;
}
.wp-comments-form {
  display: flex;
  gap: 0.4rem;
}
.wp-comments-form input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  padding: 0.42rem 0.75rem;
  font-size: 0.82rem;
}