/* ================================================================
 * Sellico Meet — Modern UI Override (consolidated)
 * ----------------------------------------------------------------
 * Единый CSS-оверрайд поверх upstream jitsi/web. Организован по
 * темам; в каждой теме все правила для своих селекторов собраны
 * вместе, без фрагментации. Дубли и перебитые правила удалены.
 *
 * Палитра: green #22C55E / hover #16A34A · red #EF4444
 *          bg  #0F1419 · surface #151B23 · hi #1A222C
 * ================================================================ */

/* ================================================================
 * 0. DESIGN TOKENS (CSS variables + Atlaskit/Jitsi overrides)
 * ================================================================ */
:root,
html,
body,
#root,
#videoconference_page,
[data-theme],
.atlaskit-portal {
  --sellico-green: #22C55E !important;
  --sellico-green-hover: #16A34A !important;
  --sellico-green-soft: rgba(34, 197, 94, 0.18) !important;
  --sellico-red: #EF4444 !important;
  --sellico-red-hover: #DC2626 !important;
  --sellico-bg: #0F1419 !important;
  --sellico-surface: #151B23 !important;
  --sellico-surface-hi: #1A222C !important;
  --sellico-border: rgba(255, 255, 255, 0.08) !important;
  --sellico-text: #FFFFFF !important;
  --sellico-text-muted: rgba(255, 255, 255, 0.6) !important;

  --jitsi-primary: #22C55E !important;
  --primary-button-background: #22C55E !important;
  --primary-button-background-hover: #16A34A !important;
  --action-danger: #EF4444 !important;
  --action-danger-hover: #DC2626 !important;
  --surface-01: #0F1419 !important;
  --surface-02: #151B23 !important;
  --surface-03: #1A222C !important;
  --ds-background-brand-bold: #22C55E !important;
  --ds-background-brand-bold-hovered: #16A34A !important;
  --ds-background-brand-bold-pressed: #15803D !important;
  --ds-text-brand: #22C55E !important;
  --ds-icon-brand: #22C55E !important;
  --ds-link: #22C55E !important;
  --ds-border-brand: #22C55E !important;
  --link-font-color: #22C55E !important;
  --toggle-background: #22C55E !important;
  color-scheme: dark !important;
}

/* ================================================================
 * 1. GLOBALS: html/body, scrollbars, focus-visible
 * ================================================================ */
html, body, #root {
  background: #0F1419 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.01em !important;
}

::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34, 197, 94, 0.4) !important; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #22C55E !important;
  outline-offset: 2px !important;
}

/* ================================================================
 * 2. JITSI BRANDING — убрать watermark и "powered by"
 * ================================================================ */
.watermark,
.leftwatermark,
.rightwatermark,
.jitsi-watermark,
.welcome-watermark,
#largeVideoContainer .watermark,
[class*="Watermark"],
[class*="watermark"],
.poweredby,
[class*="Powered"],
[class*="powered_by"],
.welcome-footer,
a[href*="jitsi.org"],
a[href*="jitsi.org"] img,
img[src*="watermark"],
[style*="watermark"],
div[style*="/images/watermark"] {
  display: none !important;
  background-image: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ================================================================
 * 3. SELLICO LOGO (pill top-left) — заменяет Jitsi лого
 * ================================================================ */
#videoconference_page::before {
  content: "" !important;
  position: fixed !important;
  top: 16px !important;
  left: 20px !important;
  width: 128px !important;
  height: 44px !important;
  background: rgba(15, 20, 25, 0.8) url('/sellico-logo.svg') no-repeat center / 88px auto !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  z-index: 100 !important;
  pointer-events: none !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55) !important;
}

/* ================================================================
 * 4. CONFERENCE AREA: base bg, large video, dominant speaker avatar
 * ================================================================ */
#videoconference_page,
#largeVideoContainer,
#largeVideo,
#videospace,
.videospace-container {
  background: #0F1419 !important;
}

#largeVideoContainer {
  padding: 16px !important;
  box-sizing: border-box !important;
}
#largeVideoWrapper,
#largeVideoElementsContainer,
#largeVideo {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.userAvatar,
.avatar-container {
  border-radius: 50% !important;
}
/* Аватар большого видео / dominant speaker — мягкая тень, не зелёное кольцо */
#dominantSpeakerAvatarContainer .userAvatar,
.avatar-container {
  box-shadow: 0 16px 40px -16px rgba(34, 197, 94, 0.35) !important;
}
#dominantSpeakerAvatarContainer .userAvatar {
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.4) !important;
  background: #22C55E !important;
}

/* ================================================================
 * 5. SUBJECT / TIMER PLATE (верх по центру)
 * ================================================================ */
.subject-info-container,
.subject,
.details-container,
[class*="ConferenceInfo"] {
  background: rgba(21, 27, 35, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 8px 14px !important;
  color: #fff !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4) !important;
  top: 20px !important;
}
.subject-info-container .subject-text,
.subject-text {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #fff !important;
}
.subject-info-container .conference-timer,
.conference-timer {
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  margin-left: 8px !important;
}

/* Прячем дублирующие кнопки в верхнем баре (connection/more/E2E/quality) —
   весь функционал есть в нижнем тулбаре */
.premeeting-screen .conference-info-container,
.conference-info-container .more-actions,
.conference-info-container .three-dots,
.subject-info-container > div[class*="Menu"],
.subject-info-container .conference-info-more-actions,
.connection-indicator-container.indicator-container-top-left,
.subject-info-container .conference-info-container > div:last-child:not(.subject-text):not(.conference-timer),
[aria-label*="More actions"].conference-more-actions,
[aria-label*="Further actions" i],
.conference-indicators,
[class*="E2EELabel"],
[class*="VisitorsIcon"],
.subject-info-container [class*="QualityIndicator"],
[aria-label*="Connection info" i],
[aria-label*="Статус соединения" i],
.connection-indicator[class*="ToolbarButton"] {
  display: none !important;
}

/* ================================================================
 * 6. FILMSTRIP — локальный PIP (top-right), remote тайлы, +N
 * ================================================================ */
#filmstripRemoteVideos,
.filmstrip__videos,
#remoteVideos {
  gap: 12px !important;
}

/* Filmstrip layout — отдаём Jitsi.
 *
 * Раньше мы force'или .filmstrip в fixed top-right 220px (PIP-style
 * для single-user комнаты). Но Jitsi в tile-view использует тот же
 * `.filmstrip` как главный grid-контейнер — и наш PIP-override ломал
 * всю плитку (тайлы зажимались в 220px квадрат в углу, видео-область
 * съезжала). Убрали force — Jitsi сам корректно позиционирует filmstrip
 * и для stage, и для tile view. Только косметика: прозрачный фон и
 * скрытый скроллбар. */
.filmstrip,
.new-filmstrip,
#filmstripLocalVideo,
.horizontal-filmstrip .filmstrip {
  background: transparent !important;
}
#filmstripRemoteVideos,
.filmstrip__videos {
  scrollbar-width: none !important;
  background: transparent !important;
}
#filmstripRemoteVideos::-webkit-scrollbar,
.filmstrip__videos::-webkit-scrollbar { display: none !important; }

/* Если в filmstrip нет ремоут-тайлов — скрываем контейнер целиком. */
#filmstripRemoteVideos:not(:has(.videocontainer)),
.filmstrip__videos:not(:has(.videocontainer)) {
  display: none !important;
}

/* Общий стиль тайлов (remote + local) */
.videocontainer,
[class*="tile-view"] .videocontainer,
.filmstrip .videocontainer {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  background: #151B23 !important;
  transition: all 0.22s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4) !important;
}
.videocontainer:hover { transform: translateY(-2px) !important; }

.videocontainer.dominant-speaker,
.videocontainer.active-speaker {
  border-color: #22C55E !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.28),
    0 16px 32px -8px rgba(34, 197, 94, 0.45) !important;
}

/* RAISE-HAND обводка тайла. По Jitsi Thumbnail.tsx:
 *   <div class="raised-hand-border" />  — inset box-shadow warning02 (yellow)
 *
 * Цвет оставляем жёлтый (дефолт Jitsi), но фиксим ГЕОМЕТРИЮ:
 * элемент не inset'ился к тайлу и не наследовал border-radius, из-за
 * чего жёлтая рамка "вылазила" поверх скруглённых углов. Притягиваем
 * border element к inset:0 и даём ему border-radius родителя. */
.videocontainer,
#localVideoContainer,
#filmstripLocalVideoThumbnail {
  position: relative !important;
}
.raised-hand-border,
.videocontainer .raised-hand-border,
#localVideoContainer .raised-hand-border,
#filmstripLocalVideoThumbnail .raised-hand-border {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

/* Аватар в тайле — жёстко по центру (vertical+horizontal).
 * Jitsi его иногда смещает из-за overlay-слоёв. */
.videocontainer .avatar-container,
.videocontainer .userAvatar,
#filmstripLocalVideoThumbnail .avatar-container,
#filmstripLocalVideoThumbnail .userAvatar,
#localVideoContainer .avatar-container,
#localVideoContainer .userAvatar {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* Локальный PIP — маленький тайл справа сверху.
 * ВАЖНО: эти размеры работают только для настоящего PIP thumbnail.
 * #localVideoContainer не трогаем глобально: в solo/tile-view Jitsi может
 * использовать его как основной self-tile, и force 180×108 оставляет
 * большую сцену визуально пустой при включённой камере. */
#filmstripLocalVideoThumbnail {
  width: 180px !important;
  height: 108px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55) !important;
  background: #151B23 !important;
  position: relative !important;
  margin-right: 8px !important;
}
#localVideoContainer video { object-fit: cover !important; }

/* ================================================================
 * 6.1 TILE VIEW — ровная сетка (Google Meet-style)
 * ----------------------------------------------------------------
 * Jitsi при tileView=true ставит класс .tile-view на родителях
 * (#videoconference_page / #filmstripContainer / .filmstrip). Local
 * video становится равноправным тайлом grid'а — но секция 6 выше
 * force'ит его 180×108, что в tile-view ломает выравнивание (все
 * remote-тайлы ~N×M, a self — 180×108, сетка «прыгает»). Здесь эти
 * force-правила снимаем И только для tile-view режима.
 *
 * Jitsi сам рассчитывает размеры тайлов на основе viewport, count
 * участников и aspect ratio — не вмешиваемся в размеры, только в
 * косметику (отступы, фон, cursor).
 * ================================================================ */

.tile-view #localVideoContainer,
.tile-view #filmstripLocalVideoThumbnail,
.tile-view .filmstrip #localVideoContainer,
[class*="tile-view"] #localVideoContainer,
[class*="tile-view"] #filmstripLocalVideoThumbnail,
#videoconference_page.tile-view #localVideoContainer,
#videoconference_page.tile-view #filmstripLocalVideoThumbnail {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
}

#localVideoContainer video,
#largeVideo video,
#largeVideoContainer video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* В tile-view убираем hover-transform — в grid-сетке «прыгающий» тайл
 * сдвигает соседей и выглядит дёрганно. Оставляем только border-color
 * change у dominant-speaker (секция 6 выше). */
.tile-view .videocontainer:hover,
[class*="tile-view"] .videocontainer:hover,
#videoconference_page.tile-view .videocontainer:hover {
  transform: none !important;
}

/* Убираем маркер «+N» в tile-view — Jitsi сам рисует overflow-тайл
 * как полноценный элемент сетки, fixed-font-size 28px из секции 6
 * может визуально конфликтовать с маленькими тайлами при 12+ participants.
 * Force font-size через clamp — адаптивный к размеру тайла. */
.tile-view .filmstrip__hidden-button,
.tile-view [class*="overflow-tile"],
[class*="tile-view"] [class*="overflow-tile"] {
  font-size: clamp(18px, 3.5vmin, 32px) !important;
}

/* Container filmstrip в tile-view — прозрачный, без лишних padding'ов */
.tile-view .filmstrip,
.tile-view .new-filmstrip,
[class*="tile-view"] .filmstrip {
  background: transparent !important;
}

/* Локальный PIP — глушим все hover-popup'ы (context menu бесполезно,
   profile заблокирован, kick-self нет). */
#localVideoContainer .popover,
#localVideoContainer .popover-content,
#localVideoContainer [role="menu"],
#localVideoContainer [class*="Popover"],
#localVideoContainer [class*="ThumbnailContextMenu"],
#localVideoContainer [class*="ParticipantContextMenu"],
.filmstrip #localVideoContainer [class*="VideoMenu"],
#filmstripLocalVideoThumbnail .popover,
#filmstripLocalVideoThumbnail [role="menu"],
#filmstripLocalVideoThumbnail [class*="Popover"],
#localVideoContainer [class*="IndicatorIcon"][class*="menu"],
#localVideoContainer [class*="MenuTrigger"],
#localVideoContainer .remotevideomenu,
#localVideoContainer .popover-trigger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Portal-based popup с некорректным top:-X (анкер к PIP'у) —
   принудительно в видимую зону. */
.atlaskit-portal > div[style*="top: -"],
.atlaskit-portal > div[style*="top:-"] {
  top: 140px !important;
  right: 20px !important;
  left: auto !important;
  transform: none !important;
}

/* Bottom-indicators — один компактный dark-pill на весь низ тайла,
 * внутри которого flex-row: mic + moderator-badge + displayname.
 * По Jitsi ThumbnailBottomIndicators.tsx literal class 'bottom-indicators'. */
.videocontainer .bottom-indicators,
#localVideoContainer .bottom-indicators,
#filmstripLocalVideoThumbnail .bottom-indicators {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border-radius: 10px !important;
  padding: 3px 10px 3px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  max-width: calc(100% - 16px) !important;
  z-index: 2 !important;
}

/* Top-indicators — отдельный ряд: raise-hand / moderator / status */
.videocontainer .top-indicators,
#localVideoContainer .top-indicators,
#filmstripLocalVideoThumbnail .top-indicators {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: flex !important;
  gap: 4px !important;
  z-index: 2 !important;
}

/* Displayname — внутри bottom-indicators, просто текст без pill
 * (pill уже у родительского bottom-indicators) */
.displayname,
.displayNameContainer,
.username,
[class*="DisplayName"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Legacy fallback: если на каком-то варианте Jitsi индикаторы
 * рендерятся в старом .indicator-container (не bottom-indicators),
 * даём им нейтральный прозрачный фон — bottom-indicators выше уже
 * даёт pill родителю. */
.videocontainer .indicator-container,
.videoThumbnailProblemIndicator,
[class*="StatusIndicator"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Connection indicator (зелёная/жёлтая «галочка» сети) */
.connection-indicator {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* RAISE-HAND индикатор — sellico-green, НЕ жёлтый (дефолт Jitsi) */
.raisehand-status-indicator,
.raisehandindicator,
.raisehandStatus,
[class*="RaiseHand"],
[class*="raisehand"],
[class*="RaisedHand"],
[data-testid*="raiseHand" i],
.videocontainer [aria-label*="Raised hand" i],
.videocontainer [aria-label*="Поднята рука" i],
.videocontainer [aria-label*="рук" i][class*="indicator" i] {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 10px -2px rgba(34, 197, 94, 0.45) !important;
}
.raisehand-status-indicator svg,
[class*="RaiseHand"] svg,
[class*="raisehand"] svg,
[class*="RaisedHand"] svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Moderator "M" badge в тайле — green pill, не чёрный квадрат */
.videocontainer .moderator-badge,
.videocontainer [class*="ModeratorIndicator"],
.videocontainer [class*="Moderator"]:not([class*="Tab"]):not([class*="Dialog"]),
[data-testid*="moderator" i] {
  background: rgba(34, 197, 94, 0.22) !important;
  color: #22C55E !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  border-radius: 6px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Audio-muted indicator — красная иконка */
.videocontainer .audio-mute-indicator,
.videocontainer [class*="AudioMuted"],
.videocontainer [class*="audioMuted"],
.videocontainer [data-testid*="audioMuted" i] {
  color: #EF4444 !important;
}
.videocontainer .audio-mute-indicator svg,
.videocontainer [class*="AudioMuted"] svg,
.videocontainer [class*="audioMuted"] svg {
  fill: #EF4444 !important;
  color: #EF4444 !important;
}

/* "+N" overflow тайл */
.filmstrip__hidden-button,
[class*="overflow-tile"],
[class*="hidden-participants"] {
  background: #1A222C !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ================================================================
 * 7. TOOLBAR — круглые 48px кнопки + 64px красный hangup
 * ================================================================ */
#new-toolbox,
.new-toolbox,
.toolbox {
  bottom: 20px !important;
  background: transparent !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.toolbox-content-wrapper {
  display: flex !important;
  justify-content: center !important;
  padding: 0 16px !important;
}

.toolbox-content-items,
.toolbox-content {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.toolbox-content-items > div,
.toolbox-content-items > button,
.toolbox-button,
.toolbox-button-wth-dialog,
[class*="ToolboxButton"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
}

.toolbox-content-items > div > div,
.toolbox-button-wth-dialog > div,
.toolbox-icon,
.toolbox-button > div:first-child {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background: #1A222C !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.toolbox-content-items > div > div:hover,
.toolbox-button-wth-dialog > div:hover,
.toolbox-icon:hover,
.toolbox-button > div:first-child:hover {
  background: #222B36 !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.toolbox-icon.toggled,
.toolbox-icon.toggle-on,
[aria-pressed="true"] .toolbox-icon,
[aria-pressed="true"] > div:first-child {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: #22C55E !important;
  color: #22C55E !important;
}

/* Стрелка-индикатор выпадающего меню над кнопкой */
.settings-button-small-icon,
[class*="ArrowUp"],
.toolbox-button-arrow {
  position: absolute !important;
  top: -6px !important;
  right: -2px !important;
  background: rgba(26, 34, 44, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* HANGUP — большая красная 64px */
.hangup-button,
.hangup-menu-button,
[aria-label*="Leave" i],
[aria-label*="End" i],
[aria-label*="Hang up" i],
[aria-label*="Положить" i],
[aria-label*="Выйти" i],
.toolbox-icon.hangup,
.toolbox-button-wth-dialog.hangup-button > div,
[class*="HangupButton"] > div {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  background: #EF4444 !important;
  border-radius: 50% !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px rgba(239, 68, 68, 0.45) !important;
  transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
}
.hangup-button:hover,
.hangup-menu-button:hover,
[aria-label*="Leave" i]:hover,
[aria-label*="End" i]:hover,
.toolbox-icon.hangup:hover,
[class*="HangupButton"] > div:hover {
  background: #DC2626 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 10px 20px -6px rgba(239, 68, 68, 0.6) !important;
}

/* Иконки внутри тулбар-кнопок */
.toolbox-icon svg,
.toolbox-button svg,
.toolbox-content-items svg {
  width: 22px !important;
  height: 22px !important;
}
.hangup-button svg,
.hangup-menu-button svg,
.toolbox-icon.hangup svg {
  width: 26px !important;
  height: 26px !important;
}

/* ================================================================
 * 8. DIALOGS / MODAL backdrop
 * ================================================================ */
.dialog,
.modal-content,
.ReactModal__Content,
.participants_pane,
.chat-dialog,
[role="dialog"],
.atlaskit-portal [role="dialog"] > div,
.atlaskit-portal .css-modal {
  background: #151B23 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: #fff !important;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.6) !important;
}

.dialog-header,
.modal-header,
.chat-dialog-header,
.participants_pane-header,
[class*="DialogHeader"] {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.ReactModal__Overlay,
.atlaskit-portal [class*="Blanket"],
[data-testid*="Blanket"] {
  background: rgba(8, 11, 15, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ================================================================
 * 9. SETTINGS DIALOG — только фон/цвета, БЕЗ force-layout.
 *
 * Jitsi 9779 рендерит settings через <Tabs> с динамическими JSS-
 * классами. Любой force display:flex/width/block на .settings-dialog
 * или .settings-pane > * ломает sidebar+content layout. Не трогаем
 * layout — только красим визуал.
 * ================================================================ */
.settings-dialog,
.settings-pane {
  background: #151B23 !important;
  color: #fff !important;
  border-radius: 18px !important;
}

/* Защитный фон на обёртках правого pane. По Jitsi source:
 *   DialogWithTabs → contentContainer (JSS) → [role=tabpanel][id^=dialogtab-content-]
 *   → Tab component (.settings-pane). Цепляем каждый уровень. */
.settings-dialog [role="tabpanel"],
.settings-dialog [id^="dialogtab-content-"],
#virtual-background-dialog,
[id$="-dialog"][id^="dialogtab-content-"] {
  background: #151B23 !important;
  color: #fff !important;
}

/* Текст у text-nodes внутри settings — белый (только конкретные теги,
 * НЕ все div — иначе перекрасятся кнопки/индикаторы). */
.settings-dialog label,
.settings-dialog h2,
.settings-dialog h3,
.settings-dialog h4,
.settings-dialog p,
.settings-dialog span,
.settings-pane label,
.settings-pane h2,
.settings-pane h3,
.settings-pane p,
.settings-pane span {
  color: #fff !important;
}

.settings-dialog [role="tab"][aria-selected="true"] {
  color: #22C55E !important;
}
.settings-dialog [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.settings-pane select,
.settings-pane input[type="text"],
.settings-pane input[type="number"] {
  background: #0E131A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  outline: none !important;
}
.settings-pane select:focus,
.settings-pane input:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}
.settings-pane input[type="checkbox"]:checked {
  accent-color: #22C55E !important;
}

/* ================================================================
 * 10. CHAT — контейнер, табы, bubbles, input, send, emoji
 * ================================================================ */
.chat-dialog-container,
#chat-container,
.chat-dialog {
  background: #0F1419 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html.sellico-embedded:not(.sellico-compact) .chat-dialog-container,
html.sellico-embedded:not(.sellico-compact) #chat-container,
html.sellico-embedded:not(.sellico-compact) .chat-dialog {
  position: absolute !important;
  left: clamp(8px, 1vmin, 12px) !important;
  top: clamp(8px, 1vmin, 12px) !important;
  bottom: clamp(76px, 9.5vh, 96px) !important;
  width: clamp(300px, 23vw, 380px) !important;
  max-width: min(380px, calc(100vw - 24px)) !important;
  height: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.78) !important;
  overflow: hidden !important;
  z-index: 25 !important;
}

.chat-dialog-header,
.chat-header,
#chat-dialog-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.chat-close-button,
#chat-close-button,
.chat-dialog-header button[aria-label*="close" i],
.chat-dialog-header button[aria-label*="Закрыть" i] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.chat-close-button:hover,
#chat-close-button:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #EF4444 !important;
}

/* Tabs (Chat / Polls) */
.chat-tabs-container,
.tabs-container,
[role="tablist"] {
  display: flex !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

[role="tab"],
.tab,
.chat-tab,
.tabs-container > button,
.tabs-container > div {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex: 1 !important;
  text-align: center !important;
}
[role="tab"]:hover,
.tab:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
[role="tab"][aria-selected="true"],
[role="tab"].active,
.tab.active,
.tab.selected,
.tabs-container .active,
[role="tab"][data-selected="true"] {
  color: #22C55E !important;
  border-bottom-color: #22C55E !important;
  background: rgba(34, 197, 94, 0.05) !important;
}
[class*="TabIndicator"],
.tabs-container [class*="indicator"],
.tabs-container > div:last-child[style*="background"],
.tab-active-indicator {
  background: #22C55E !important;
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
}

/* Контейнер сообщений */
#chatconversation,
.chat-conversation,
.chat-messages,
.chat-dialog-container .conversation {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.chat-empty,
.empty-chat-placeholder,
[class*="EmptyChat"] {
  text-align: center !important;
  color: rgba(255, 255, 255, 0.4) !important;
  padding: 40px 20px !important;
  font-size: 13px !important;
}

/* Wrappers — прозрачные, bubble на .chatmessage/.messagecontent */
.chatmessage-wrapper,
.chat-message-group,
.chat-message,
[class*="MessageWrapper"],
[class*="message-group"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 85% !important;
}
.chatmessage-wrapper.remote,
.chat-message-group.remote,
.chatmessage-wrapper:not(.local),
.chat-message-group:not(.local) {
  align-self: flex-start !important;
}
.chatmessage-wrapper.local,
.chat-message-group.local,
.chatmessage-wrapper.localuser,
.chat-message-group.localuser,
.chatmessage.localuser {
  align-self: flex-end !important;
  align-items: flex-end !important;
}

/* Bubble */
.chatmessage,
.messagecontent {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 9px 13px !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  word-break: break-word !important;
  display: inline-block !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.chatmessage.localuser,
.local .chatmessage,
.localuser .messagecontent,
.local .messagecontent {
  background: #087C3B !important;
  border-color: transparent !important;
  border-radius: 16px 16px 4px 16px !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -4px rgba(34, 197, 94, 0.35) !important;
}
/* Внутренние ноды bubble — прозрачные, без padding */
.chatmessage .usermessage,
.chatmessage > div,
.messagecontent > div,
.messagecontent .text,
.chatmessage *:not(svg):not(path):not(img),
.messagecontent *:not(svg):not(path):not(img) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* Display name + timestamp */
.chatmessage .display-name,
.chat-message .display-name,
.display-name {
  color: #22C55E !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
  padding: 0 4px !important;
}
.local .display-name,
.localuser .display-name,
.chatmessage.localuser .display-name {
  color: rgba(255, 255, 255, 0.7) !important;
}

.chatmessage .timestamp,
.messagecontent .timestamp,
.chat-message .timestamp,
.timestamp {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 10px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  vertical-align: baseline !important;
  background: transparent !important;
  border: none !important;
  font-weight: 500 !important;
}
.localuser .timestamp,
.local .timestamp,
.chatmessage.localuser .timestamp {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Date separator */
.chat-message-group-divider,
.date-separator {
  text-align: center !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  padding: 8px 0 !important;
  margin: 8px 0 !important;
}

/* Chat input area */
.chat-input-container,
#chat-input-container,
.chat-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 72px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.chat-input-wrapper,
.message-input-container,
.chat-input-container > div:first-child:has(input),
.chat-input-container > div:first-child:has(textarea) {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  background: #1A222C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px 4px 12px !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.chat-input-wrapper:focus-within,
.message-input-container:focus-within {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
  background: #1E262F !important;
}

#chat-input,
.chat-input,
.chat-input-container textarea,
.chat-input-container input,
.chat-input-container input[type="text"],
.message-input-container textarea,
.message-input-container input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 8px 10px 8px 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 22px !important;
  max-height: 96px !important;
  line-height: 20px !important;
  resize: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  font-family: inherit !important;
}
#chat-input::placeholder,
.chat-input::placeholder,
.message-input-container input::placeholder,
.message-input-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Emoji trigger — keep it usable and inline with the input.
 * It used to be hidden because some upstream builds render it absolute,
 * which made it overlap the placeholder. Reset geometry instead. */
.emoji-icon,
.smileys-panel-trigger,
.chat-input-container [class*="EmojiButton"],
.chat-input-container button[aria-label*="Emoji" i],
.chat-input-container button[aria-label*="Эмодзи" i],
.chat-input-container button[aria-label*="смайл" i],
button[aria-label*="Emoji" i],
button[aria-label*="Эмодзи" i] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 36px !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  order: 0 !important;
}

.emoji-icon:hover,
.smileys-panel-trigger:hover,
.chat-input-container [class*="EmojiButton"]:hover,
.chat-input-container button[aria-label*="Emoji" i]:hover,
.chat-input-container button[aria-label*="Эмодзи" i]:hover,
.chat-input-container button[aria-label*="смайл" i]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.smileys-panel,
.emoji-panel {
  z-index: 60 !important;
}

/* Send кнопка */
.send-button,
#send-button,
.chat-input-container button[type="submit"],
.chat-input-container button[aria-label*="send" i],
.chat-input-container button[aria-label*="Отправить" i],
button[aria-label*="Send" i],
[class*="SendButton"] {
  background: linear-gradient(135deg, #087C3B 0%, #066A32 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 6px 16px -4px rgba(34, 197, 94, 0.4) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}
.send-button:hover,
.chat-input-container button[type="submit"]:hover,
button[aria-label*="Send" i]:hover {
  background: linear-gradient(135deg, #0A8F45 0%, #087C3B 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px -4px rgba(34, 197, 94, 0.55) !important;
}
.send-button:disabled,
.send-button[disabled] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.send-button svg,
[class*="SendButton"] svg {
  width: 18px !important;
  height: 18px !important;
}

.typing-indicator,
.chat-typing,
[class*="Typing"] {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  padding: 4px 14px !important;
  font-style: italic !important;
}

/* ================================================================
 * 11. PARTICIPANTS PANE
 * ================================================================ */
.participants_pane-header {
  font-weight: 600 !important;
  font-size: 15px !important;
}
.participant-item,
[class*="ParticipantItem"] {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  transition: background 0.12s ease !important;
}
.participant-item:hover,
[class*="ParticipantItem"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.participant-item .moderator-badge,
[class*="ModeratorBadge"] {
  color: #22C55E !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* ================================================================
 * 12. POPOVERS / DROPDOWN MENUS — реальные выпадающие меню
 * (НЕ тултипы — те скрываем ниже)
 * ================================================================ */
.popover,
.popover-content,
[role="menu"],
[role="listbox"],
[class*="Popover"],
[class*="DropdownMenu"],
.atlaskit-portal [role="menu"],
.popover.popover-dropdown,
.dropdown-menu,
[class*="DropdownList"],
.atlaskit-portal .popover,
.toolbox-popover,
.toolbox-icon-popover,
.popupmenu {
  z-index: 9999 !important;
  background: rgba(15, 20, 25, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55) !important;
  padding: 4px !important;
  min-width: 180px !important;
  max-width: min(320px, calc(100vw - 32px)) !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

[role="menuitem"],
.popover-content li,
.popupmenu li,
.popover li,
.dropdown-menu li,
[class*="MenuItem"],
[class*="DropdownItem"] {
  background: transparent !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.12s ease !important;
  cursor: pointer !important;
  list-style: none !important;
}
[role="menuitem"]:hover,
.popupmenu li:hover,
.popover li:hover,
.dropdown-menu li:hover,
[class*="MenuItem"]:hover,
[class*="DropdownItem"]:hover {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #22C55E !important;
}

.atlaskit-portal,
.atlaskit-portal-container {
  z-index: 9999 !important;
}

/* ================================================================
 * 13. TOOLTIPS — скрываем все hover-подсказки над кнопками.
 * Пользователь и так знает иконки, лейблы избыточны.
 *
 * ВАЖНО: реальные dropdowns (popupmenu / [role=menu] / [role=listbox])
 * и диалоги ([role=dialog] / .settings-pane) в этот список НЕ входят —
 * они стилизуются в секции 12 / 9.
 * ================================================================ */
/* ТОЛЬКО явные tooltip-элементы. Раньше тут были overbroad
 * `[class*="Tooltip"]`, `[class*="ButtonLabel"]`, `[class*="button-label"]`
 * — они ловили JSS-классы внутри Settings Dialog (Atlaskit Select,
 * Button с tooltip-wrapper) и скрывали реальный контент вкладок
 * Звук/Видео/Виртуальные фоны. Убрали. */
/* Только явные tooltip-маркеры. НЕ включаем `.toolbox + .atlaskit-portal`
 * и `:has([role="tooltip"])` — Jitsi рендерит popup-меню от toolbar
 * (tile-view, settings, device-picker, overflow) в тех же atlaskit-portal,
 * и :has скрывал их родителя целиком. Отдельный `[role="tooltip"]`
 * внутри :has-portal всё равно спрятан прямым селектором выше, так что
 * нативные tooltip'ы всё равно не видны. */
[role="tooltip"],
.tooltip,
.tooltip-content,
.tooltip-text,
.button-tooltip,
.button-label,
.toolbox-button .tooltip,
.toolbox-button-wth-dialog .tooltip,
.hint-dialog,
.hint-container,
.atlaskit-portal [role="tooltip"],
.tippy-box,
.tippy-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Connection stats popover в тайле участника (ConnectionStatsTable):
 * Связь / Битрейт / Потери пакетов / Разрешение / Частота кадров /
 * Кодеки (A/V) / «Подробная информация». Хоть оно и полезно для дебага,
 * обычному пользователю мешает — выскакивает при наведении на тайл.
 *
 * ВАЖНО: Jitsi (ConnectionStatsTable.tsx) рендерит popover с JSS-хешем
 * на основе camelCase имён `connectionStatsTable` / `connectionSummary` /
 * `showMore`. Поэтому ловим case-insensitive по частичному совпадению.
 * Флаг ` i` обязателен — JSS-класс выглядит как `jss123-connectionStatsTable`.
 *
 * НЕ используем `.videocontainer .popover` целиком — это поймает
 * легитимные context-menu (kick/mute participant). */
[class*="connectionStatsTable" i],
[class*="connectionSummary" i],
[class*="connectionInfo" i],
[class*="connectionDetails" i],
.connection-info,
.connection-details,
/* Прячем и родительскую обёртку (`.popover` / ContextMenu) — иначе
 * остаётся пустой тёмный box, когда таблица с контентом скрыта. */
.popover:has([class*="connectionStatsTable" i]),
.popover:has([class*="connectionSummary" i]),
[class*="contextMenu" i]:has([class*="connectionStatsTable" i]),
.atlaskit-portal:has([class*="connectionStatsTable" i]),
.atlaskit-portal:has([class*="connectionSummary" i]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Глушим hover-триггер popover'а на самой иконке `.connection-indicator`
 * в тайле. Сам индикатор (зелёная/жёлтая точка) остаётся видимым как
 * статус-иконка, но клик/наведение не открывают stats. */
.videocontainer .connection-indicator,
.filmstrip .connection-indicator,
#localVideoContainer .connection-indicator,
#filmstripLocalVideoThumbnail .connection-indicator {
  pointer-events: none !important;
}

/* ================================================================
 * 14. NOTIFICATIONS — Jitsi custom component, НЕ Atlaskit Flag.
 * Anchor: #notifications-container (Jitsi static ID).
 * Структура (по источнику Notification.tsx):
 *   #notifications-container
 *     > div (transition wrapper)
 *       > div[role="alert"|"status"]       ← main container
 *         > div (ribbon — цветная полоска слева)
 *         > div (content flex)
 *           > div (icon wrapper) > svg
 *           > div (textContainer)
 *             > span (title)
 *             > div (description)
 *             > div (actionsContainer) > button
 *           > Icon (close button)
 * ================================================================ */
#notifications-container {
  z-index: 9998 !important;
  left: 20px !important;
  bottom: 100px !important;
}
#notifications-container > * > * { margin-bottom: 10px !important; }

/* Main container div — role=alert/status */
#notifications-container [role="alert"],
#notifications-container [role="status"],
#notifications-container [aria-live] {
  background: rgba(15, 20, 25, 0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 40px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  padding: 14px 16px 14px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  max-width: 380px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  animation: sellicoNotifSlideIn 0.35s cubic-bezier(.4, 0, .2, 1) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* Ribbon — первый div внутри (цветная вертикальная полоса). Jitsi
 * рисует её как реальный <div>, не ::before. Перекрашиваем в зелёный. */
#notifications-container [role="alert"] > div:first-child,
#notifications-container [role="status"] > div:first-child,
#notifications-container [aria-live] > div:first-child {
  width: 3px !important;
  min-width: 3px !important;
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%) !important;
  border-radius: 3px 0 0 3px !important;
  margin-right: 14px !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}

/* Title (span) и Description (div) — белый текст */
#notifications-container span,
#notifications-container [role="alert"] div,
#notifications-container [role="status"] div {
  color: #fff !important;
  background: transparent !important;
}
#notifications-container [role="alert"] span,
#notifications-container [role="status"] span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #fff !important;
}

/* Icon слева — зелёный (info/success дефолт) */
#notifications-container [role="alert"] svg:first-of-type,
#notifications-container [role="status"] svg:first-of-type {
  color: #22C55E !important;
  fill: #22C55E !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

/* Close button (крестик — последний svg/Icon) */
#notifications-container [role="alert"] svg:last-of-type,
#notifications-container [role="status"] svg:last-of-type,
#notifications-container [aria-label*="close" i],
#notifications-container [aria-label*="Закрыть" i],
#notifications-container [aria-label*="Dismiss" i] {
  color: rgba(255, 255, 255, 0.6) !important;
  fill: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
#notifications-container [role="alert"] svg:last-of-type:hover,
#notifications-container [role="status"] svg:last-of-type:hover,
#notifications-container [aria-label*="close" i]:hover,
#notifications-container [aria-label*="Закрыть" i]:hover {
  color: #EF4444 !important;
  fill: #EF4444 !important;
}

/* Action buttons inside notification — зелёные */
#notifications-container button:not([aria-label*="close" i]):not([aria-label*="Закрыть" i]):not([aria-label*="Dismiss" i]) {
  background: transparent !important;
  color: #22C55E !important;
  border: none !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
#notifications-container button:not([aria-label*="close" i]):hover {
  background: rgba(34, 197, 94, 0.12) !important;
}

/* Fallback для старых мест где всё ещё может рендериться Atlaskit Flag */
.ReactModal__Content--after-open,
.atlaskit-portal [class*="Flag"] {
  z-index: 9998 !important;
}
.atlaskit-portal .flag,
.atlaskit-portal [class*="Flag-"] {
  background: rgba(15, 20, 25, 0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

@keyframes sellicoNotifSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Toast max-width — не вылезает за viewport */
[class*="Toast"] {
  max-width: calc(100vw - 32px) !important;
  word-wrap: break-word !important;
}

/* ================================================================
 * 15. PREJOIN / PREMEETING SCREEN — Sellico CRM-like centered layout.
 *
 * Реальный DOM (по Playwright-дампу):
 *   .premeeting-screen.css-XXXX-container (flex row 100vw×100vh)
 *     > div (left 396px static) > .css-...-content > .css-...-contentControls
 *       > h1.css-...-title
 *       > span.css-...-roomName
 *       > div.css-...-inputContainer > input#premeeting-name-input
 *       > div.css-...-dropdownContainer
 *         > div.css-...-actionButton.primary ("Присоединиться к встрече")
 *           > div.css-...-options (dropdown arrow)
 *       > div.new-toolbox (small mic/cam/bg/settings icons)
 *     > div#preview (right 1044px flex) > video#prejoinVideo
 *
 * Переверстаем как центрированный single-column через:
 *   - flex-direction: column на .premeeting-screen
 *   - order: preview=1 (выше), controls=2 (ниже)
 *   - preview с жёсткой aspect-ratio + rounded + green glow
 *   - new-toolbox absolute-poзиционирован НА preview'е снизу
 *   - заголовок центрирован, кнопка Join — большая full-width
 * ================================================================ */
/* Outer container → 2-колоночный layout: info слева, preview справа.
 * Relative — anchor для ::before логотипа. */
.premeeting-screen,
.prejoin-screen,
#premeeting-screen,
.preview-content,
.prejoin-content {
  background: radial-gradient(ellipse at top, rgba(34, 197, 94, 0.08) 0%, transparent 60%), #0F1419 !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 40px 32px !important;
  gap: 48px !important;
  overflow-y: auto !important;
  min-height: 100vh !important;
  flex-wrap: wrap !important;
  position: relative !important;
}

/* Sellico logo в верхнем левом углу prejoin (как на welcome/room) */
.premeeting-screen::before {
  content: "" !important;
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  width: 128px !important;
  height: 44px !important;
  background: rgba(15, 20, 25, 0.8) url('/sellico-logo.svg') no-repeat center / 88px auto !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  z-index: 100 !important;
  pointer-events: none !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55) !important;
}

/* LEFT column: заголовок, room, input, button, toolbar */
.premeeting-screen > div:not(#preview):not(.toolbox) {
  order: 1 !important;
  flex: 0 1 480px !important;
  min-width: 320px !important;
  max-width: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.premeeting-screen > div:not(#preview):not(.toolbox) > div,
.premeeting-screen [class*="content"],
.premeeting-screen [class*="contentControls"] {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Preview (video) — справа, rounded, с зелёным glow */
#preview,
.premeeting-screen #preview {
  order: 2 !important;
  flex: 0 1 720px !important;
  width: min(720px, 55vw) !important;
  max-width: 720px !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 80vh !important;
  height: auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #05070a !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px -30px rgba(34, 197, 94, 0.4) !important;
  position: relative !important;
}
#prejoinVideo,
#preview video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 24px !important;
}

/* Placeholder "Камера выключена" поверх preview когда video пустой */
#preview::before {
  content: "Камера выключена" !important;
  position: absolute !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Спрятать placeholder когда video имеет реальный stream — невозможно через
 * чистый CSS без JS, но при включённой камере video перекроет текст собой. */

/* Title "Присоединиться к встрече" — выравнено влево */
.premeeting-screen h1,
.premeeting-screen [class*="title"] {
  color: #fff !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  width: 100% !important;
}

/* Room name subtitle */
.premeeting-screen [class*="roomName"] {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 28px !important;
  display: block !important;
  text-align: left !important;
  width: 100% !important;
}

/* Заголовок "Присоединиться к встрече" + название комнаты */
.premeeting-screen h1,
.premeeting-screen h2,
.premeeting-screen h3,
.premeeting-screen [class*="title" i],
.premeeting-screen [class*="subject" i] {
  color: #fff !important;
}

/* Input контейнер — полная ширина левой колонки */
.premeeting-screen [class*="inputContainer"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
}

/* Name input */
.premeeting-screen input[type="text"],
.premeeting-screen .inputContainer input,
.premeeting-screen [class*="inputContainer"] input,
#premeeting-name-input {
  background: #1A222C !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.premeeting-screen input:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}
.premeeting-screen input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Main JOIN button (ActionButton.primary) — pill на всю ширину колонки */
[data-testid="prejoin.joinMeeting"],
.premeeting-screen [class*="actionButton"].primary,
.premeeting-screen [class*="actionButton"][class*="primary"] {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 12px 28px -6px rgba(34, 197, 94, 0.55) !important;
  transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
}
/* Camera icon перед текстом кнопки через pseudo-element */
[data-testid="prejoin.joinMeeting"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background: no-repeat center / contain !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z'/></svg>") !important;
  flex-shrink: 0 !important;
}
[data-testid="prejoin.joinMeeting"]:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px -6px rgba(34, 197, 94, 0.7) !important;
}

/* Dropdown arrow (внутри actionButton) — smaller nested button */
.premeeting-screen [class*="actionButton"] [class*="options"],
.premeeting-screen [data-testid="prejoin.joinOptions"] {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
}

/* Dropdown container (wrapper кнопки) — на всю ширину колонки */
.premeeting-screen [class*="dropdownContainer"] {
  display: flex !important;
  justify-content: stretch !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Wrapper непосредственно вокруг actionButton — тоже full-width */
.premeeting-screen [class*="dropdownContainer"] > div {
  width: 100% !important;
}

/* Avatar preview (большой серый круг справа) — Sellico green circle
 * с жёсткими размерами, чтобы radial gradient не выходил за контейнер */
.premeeting-screen .avatarContainer,
.premeeting-screen [class*="avatarContainer"] {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.22) 0%, rgba(34, 197, 94, 0.06) 70%, transparent 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  border: 2px solid rgba(34, 197, 94, 0.25) !important;
  box-shadow: 0 16px 48px -16px rgba(34, 197, 94, 0.3) !important;
  overflow: hidden !important;
}
.premeeting-screen .avatar,
.premeeting-screen [class*="avatar"]:not([class*="Name"]):not([class*="Container"]) {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
}
.premeeting-screen .avatar svg,
.premeeting-screen [class*="avatar"] svg {
  color: #22C55E !important;
  fill: #22C55E !important;
  opacity: 0.7 !important;
  max-width: 80px !important;
  max-height: 80px !important;
}

/* Primary buttons внутри auth-dialog ("Я организатор", "Войти") —
 * синяя Atlaskit по дефолту. Перекрашиваем в зелёный. */
[role="dialog"] button[appearance="primary"],
.atlaskit-portal [role="dialog"] button[appearance="primary"],
[role="dialog"] button[class*="primary" i]:not([aria-label*="close" i]):not([aria-label*="Отмена"]),
/* Fallback через inline-style — Atlaskit inline-рендерит blue bg */
[role="dialog"] button[style*="rgb(12, 102, 228)" i],
[role="dialog"] button[style*="#0052cc" i],
[role="dialog"] button[style*="1c80fe" i] {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px -4px rgba(34, 197, 94, 0.5) !important;
}

/* Bottom toolbar (mic/cam/bg/settings/add-people) — располагается
 * компактной pill'ой ПОД preview'ом (не абсолют, оставляем в потоке
 * чтобы не конфликтовать с input и кнопкой Join).
 * В CRM-дизайне они on-top of video, но через CSS надёжнее в стеке. */
.premeeting-screen .new-toolbox,
.premeeting-screen #new-toolbox {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  background: transparent !important;
  bottom: auto !important;
}
.premeeting-screen .toolbox-content,
.premeeting-screen .toolbox-content-wrapper {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
.premeeting-screen .toolbox-content-items {
  gap: 10px !important;
  padding: 8px 16px !important;
  background: rgba(26, 34, 44, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}
/* Каждый child toolbox-items — row-direction (overrides Jitsi column) */
.premeeting-screen .toolbox-content-items > * {
  flex-direction: row !important;
  height: auto !important;
  margin: 0 !important;
}
.premeeting-screen .toolbox-content-items > div > div,
.premeeting-screen .toolbox-icon,
.premeeting-screen .toolbox-button > div:first-child {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #0F1419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
}
/* Camera-off toggle (toggled-on = включено) → красный как в CRM */
.premeeting-screen .toolbox-icon.toggled[aria-label*="видео" i],
.premeeting-screen [aria-pressed="true"][aria-label*="видео" i] > div,
.premeeting-screen [aria-pressed="true"][aria-label*="Видео" i] > div {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #fff !important;
}

/* Убрать кнопку "изображение" (virtual background / background upload) */
.premeeting-screen [aria-label*="Виртуальный фон" i],
.premeeting-screen [aria-label*="виртуаль" i],
.premeeting-screen [aria-label*="background" i],
.premeeting-screen [aria-label*="фон" i]:not([aria-label*="микрофон" i]):not([aria-label*="микро" i]),
.premeeting-screen [aria-label*="изображен" i],
.premeeting-screen .video-background-preview-entry,
.premeeting-screen [class*="video-background"],
.premeeting-screen [class*="VirtualBackground"] {
  display: none !important;
}

/* Hide маленькие carets (settings-button-small-icon) в prejoin тулбаре —
 * в конференции они нужны (меняют устройства), но в prejoin устройства
 * выбираются через основную кнопку, carets избыточны и ломают
 * выравнивание toolbar-pill'а */
.premeeting-screen .settings-button-small-icon,
.premeeting-screen [class*="ArrowUp"],
.premeeting-screen .toolbox-button-arrow,
/* Small green audio-activity dot в preview center */
.premeeting-screen #preview [class*="audio-level"],
.premeeting-screen #preview [class*="AudioLevel"],
.premeeting-screen #preview .audio-dot,
.premeeting-screen #preview [class*="audioDot"] {
  display: none !important;
}

/* Dropdown arrow внутри actionButton (Join) — фиксирован рядом с
 * текстом, без absolute-позиционирования */
.premeeting-screen [data-testid="prejoin.joinMeeting"] [data-testid="prejoin.joinOptions"],
.premeeting-screen [data-testid="prejoin.joinMeeting"] [class*="options"] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: 4px !important;
  order: 3 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.premeeting-screen [data-testid="prejoin.joinMeeting"] [class*="options"] svg {
  width: 14px !important;
  height: 14px !important;
  fill: #fff !important;
  color: #fff !important;
}

/* ================================================================
 * 15.1 PREJOIN RESPONSIVE — mobile breakpoints для 2-колонки → 1-колонка
 * ================================================================ */
@media (max-width: 900px) {
  .premeeting-screen {
    flex-direction: column !important;
    padding: 72px 16px 24px !important;
    gap: 24px !important;
  }
  .premeeting-screen > div:not(#preview):not(.toolbox) {
    flex: 0 0 auto !important;
    max-width: min(480px, 92vw) !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .premeeting-screen > div:not(#preview):not(.toolbox) > div,
  .premeeting-screen [class*="content"],
  .premeeting-screen [class*="contentControls"] {
    align-items: stretch !important;
  }
  #preview,
  .premeeting-screen #preview {
    width: min(560px, 92vw) !important;
    max-width: 560px !important;
    max-height: 44vh !important;
  }
  .premeeting-screen h1,
  .premeeting-screen [class*="title"] {
    font-size: clamp(22px, 5vw, 26px) !important;
  }
  .premeeting-screen::before {
    width: 104px !important;
    height: 36px !important;
    background-size: 72px auto !important;
    top: 14px !important;
    left: 14px !important;
  }
}

@media (max-width: 480px) {
  .premeeting-screen {
    padding: 64px 12px 20px !important;
    gap: 16px !important;
  }
  .premeeting-screen::before {
    width: 92px !important;
    height: 32px !important;
    background-size: 60px auto !important;
    top: 10px !important;
    left: 10px !important;
  }
  .premeeting-screen h1,
  .premeeting-screen [class*="title"] {
    font-size: 20px !important;
  }
  .premeeting-screen [data-testid="prejoin.joinMeeting"] {
    min-width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
  #preview,
  .premeeting-screen #preview {
    border-radius: 16px !important;
    max-height: 40vh !important;
  }
  .premeeting-screen input {
    padding: 12px 14px !important;
  }
  .premeeting-screen .toolbox-content-items {
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  .premeeting-screen .toolbox-icon,
  .premeeting-screen .toolbox-button > div:first-child,
  .premeeting-screen .toolbox-content-items > div > div {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* Mic indicator "Кажется ваш микрофон работает правильно" —
 * выровнен по сетке слева, dot как prefix-indicator */
.premeeting-screen [class*="audioInfoBox"],
.premeeting-screen [class*="microphone"] {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.premeeting-screen [class*="audioInfoBox"] [class*="dot"],
.premeeting-screen [class*="audioInfoBox"] svg {
  color: #22C55E !important;
  fill: #22C55E !important;
  flex-shrink: 0 !important;
}

/* ================================================================
 * 16. GENERIC INPUTS / BUTTONS / LINKS / BADGES
 * ================================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: #1A222C !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #22C55E !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Primary button (Admit / Join / submit) */
button.primary,
button[data-testid="prejoin.joinMeeting"],
.welcome-page-button,
[class*="PrimaryButton"],
.premeeting-screen button[type="submit"],
.knocking-participant-list button.primary,
.admit-button,
button[aria-label*="Admit" i],
button[aria-label*="Впустить" i],
button[aria-label*="Присоединиться" i],
button[aria-label*="Join" i] {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  background-color: #22C55E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 8px 20px -6px rgba(34, 197, 94, 0.5) !important;
  transition: all 0.18s cubic-bezier(.4,0,.2,1) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
button.primary:hover,
button[data-testid="prejoin.joinMeeting"]:hover,
button[aria-label*="Admit" i]:hover,
button[aria-label*="Впустить" i]:hover,
button[aria-label*="Join" i]:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px -6px rgba(34, 197, 94, 0.65) !important;
}

/* Destructive (Deny) */
button.destructive,
.deny-button,
button[aria-label*="Deny" i],
button[aria-label*="Отклонить" i],
button[aria-label*="Отказать" i] {
  background: #EF4444 !important;
  color: #fff !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.4) !important;
}
button.destructive:hover,
.deny-button:hover {
  background: #DC2626 !important;
  transform: translateY(-2px) !important;
}

/* Secondary */
button.secondary,
[class*="SecondaryButton"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-weight: 500 !important;
}

a, .link, [class*="Link"] {
  color: #22C55E !important;
  text-decoration: none !important;
}
a:hover, .link:hover { color: #16A34A !important; }

.badge, .badge-pill, [class*="Badge"] {
  background: #22C55E !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ================================================================
 * 17. MISC HIDES + PROFILE name-lock
 * ================================================================ */
.deep-linking-mobile__button,
.mobile-promotional-content,
.welcome-page-settings,
[class*="AboutInfo"],
[class*="about-info"],
.legal-links,
.deep-linking-container {
  display: none !important;
}

/* Запрет смены displayName в profile */
.profile-edit-field input[name="displayName"],
.settings-pane input[name="displayName"],
.profile-pane input[name="displayName"] {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Скрыть поля / кнопки ввода пароля на prejoin и lobby-knock.
 * В Sellico пароли на комнатах не ставятся — доступ резолвится связкой
 * JWT (moderator/participant из /sellico-login) + lobby knock для гостей.
 * Поле пароля, которое upstream-движок всегда рендерит, только путает
 * пользователей. Селекторы широкие специально: перехватываем и классовые
 * варианты (class*= "passwordContainer"), и data-testid, и aria-label'ы,
 * так как в разных upstream-сборках Jitsi они разъезжаются. Побочный
 * эффект — любые «Set password» в UI модератора тоже спрячутся; это
 * осознанно: на bizlogic уровне Meeting:setPassword мы не вызываем. */
.prejoin-third-party,
.prejoin-password-container,
.lobby-screen-password,
[data-testid="lobby.password"],
[data-testid="lobby.enterPasswordButton"],
[data-testid="prejoin.joinWithPasswordButton"],
[class*="passwordContainer"],
[class*="LobbyScreen_password"],
input[name="lobbyPassword"],
input[aria-label*="password" i],
button[aria-label*="password" i] {
  display: none !important;
}

/* ================================================================
 * 18. RESPONSIVE — tablet / mobile / compact-height / reduce-motion
 * ================================================================ */
@media (max-width: 1024px) {
  #videoconference_page::before {
    width: 108px !important;
    height: 36px !important;
    background-size: 76px auto !important;
    top: 12px !important;
    left: 12px !important;
  }
  #videoconference_page:not(.tile-view) .filmstrip,
  #videoconference_page:not(.tile-view) .new-filmstrip,
  #videoconference_page:not(.tile-view) #filmstripLocalVideo {
    top: 12px !important;
    right: 12px !important;
    max-width: 180px !important;
  }
  #filmstripLocalVideoThumbnail {
    width: 144px !important;
    height: 88px !important;
  }
  #largeVideoContainer { padding: 8px !important; }
  #largeVideoWrapper, #largeVideo { border-radius: 18px !important; }
  .toolbox-content-items { gap: 10px !important; }
  .toolbox-content-items > div > div,
  .toolbox-button-wth-dialog > div,
  .toolbox-icon,
  .toolbox-button > div:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .hangup-button, .hangup-menu-button,
  [class*="HangupButton"] > div {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }
  .subject-info-container {
    top: 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  #videoconference_page::before {
    width: 92px !important;
    height: 32px !important;
    background-size: 64px auto !important;
    top: 10px !important;
    left: 10px !important;
  }
  #videoconference_page:not(.tile-view) .filmstrip,
  #videoconference_page:not(.tile-view) .new-filmstrip,
  #videoconference_page:not(.tile-view) #filmstripLocalVideo {
    top: 10px !important;
    right: 10px !important;
    max-width: 140px !important;
  }
  #filmstripLocalVideoThumbnail {
    width: 112px !important;
    height: 68px !important;
    border-radius: 12px !important;
  }
  #new-toolbox, .new-toolbox, .toolbox { bottom: 12px !important; }
  .toolbox-content-items {
    gap: 8px !important;
    padding: 0 10px !important;
  }
  .toolbox-content-items > div > div,
  .toolbox-button-wth-dialog > div,
  .toolbox-icon,
  .toolbox-button > div:first-child {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .toolbox-content-items svg,
  .toolbox-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .hangup-button, .hangup-menu-button,
  [class*="HangupButton"] > div {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
  .hangup-button svg,
  [class*="HangupButton"] svg {
    width: 22px !important;
    height: 22px !important;
  }
  .subject-info-container {
    top: 56px !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .subject-info-container .subject-text { font-size: 12px !important; }
  .subject-info-container .conference-timer { font-size: 11px !important; }

  /* Chat / participants + диалоги — full-width bottom-sheet */
  .chat-dialog-container,
  .participants_pane-container,
  .chat-dialog,
  .participants_pane,
  [role="dialog"],
  .dialog,
  .atlaskit-portal [role="dialog"] > div {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

@media (max-width: 640px) {
  #notifications-container [role="alert"],
  #notifications-container [role="status"],
  #notifications-container [aria-live] {
    max-width: calc(100vw - 24px) !important;
    padding: 12px 14px 12px 0 !important;
    border-radius: 14px !important;
  }
  #notifications-container [role="alert"] span,
  #notifications-container [role="status"] span { font-size: 13px !important; }
}

@media (max-width: 480px) {
  #videoconference_page::before {
    width: 76px !important;
    height: 28px !important;
    background-size: 56px auto !important;
    top: 8px !important;
    left: 8px !important;
    border-radius: 10px !important;
  }
  #videoconference_page:not(.tile-view) .filmstrip,
  #videoconference_page:not(.tile-view) .new-filmstrip,
  #videoconference_page:not(.tile-view) #filmstripLocalVideo {
    top: 8px !important;
    right: 8px !important;
    max-width: 100px !important;
  }
  #filmstripLocalVideoThumbnail {
    width: 84px !important;
    height: 52px !important;
    border-radius: 10px !important;
  }
  #largeVideoContainer { padding: 4px !important; }
  #largeVideoWrapper, #largeVideo { border-radius: 14px !important; }
  .toolbox-content-items {
    gap: 6px !important;
    padding: 0 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .toolbox-content-items::-webkit-scrollbar { display: none !important; }
  .toolbox-content-items > div > div,
  .toolbox-button-wth-dialog > div,
  .toolbox-icon,
  .toolbox-button > div:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .toolbox-content-items svg,
  .toolbox-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .hangup-button, .hangup-menu-button,
  [class*="HangupButton"] > div {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .subject-info-container {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-height: 480px) {
  #videoconference_page::before { display: none !important; }
  .subject-info-container { display: none !important; }
  #new-toolbox, .new-toolbox, .toolbox { bottom: 8px !important; }
  .toolbox-content-items > div > div,
  .toolbox-icon,
  .toolbox-button > div:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .toolbox-content-items > div > div:hover,
  .toolbox-icon:hover {
    transform: none !important;
  }
}

/* ================================================================
 * 19. EMBEDDED CRM + TILE VIEW HARDENING
 * ----------------------------------------------------------------
 * Эта секция стоит ПОСЛЕ responsive-правил: иначе max-width media
 * снова превращают self-view в маленький PIP внутри рабочей сетки.
 * html.sellico-embedded ставится compact-mode.js, когда страница
 * открыта во фрейме CRM; сами tile-view правила полезны и standalone.
 * ================================================================ */

html.sellico-embedded #largeVideoContainer {
  padding: clamp(8px, 1.2vmin, 16px) !important;
}

html.sellico-embedded #largeVideoWrapper,
html.sellico-embedded #largeVideoElementsContainer,
html.sellico-embedded #largeVideo {
  border-radius: clamp(14px, 1.8vmin, 22px) !important;
}

/* В узком CRM-диалоге верхний бейдж не должен закрывать первый ряд сетки. */
html.sellico-embedded .subject-info-container {
  max-width: min(520px, calc(100vw - 176px)) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tile-view .filmstrip,
.tile-view .new-filmstrip,
.tile-view #filmstripLocalVideo,
[class*="tile-view"] .filmstrip,
[class*="tile-view"] .new-filmstrip,
[class*="tile-view"] #filmstripLocalVideo,
#videoconference_page.tile-view .filmstrip,
#videoconference_page.tile-view .new-filmstrip,
#videoconference_page.tile-view #filmstripLocalVideo {
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  max-width: none !important;
  max-height: none !important;
  background: transparent !important;
}

.tile-view #filmstripRemoteVideos,
.tile-view .filmstrip__videos,
.tile-view #remoteVideos,
[class*="tile-view"] #filmstripRemoteVideos,
[class*="tile-view"] .filmstrip__videos,
[class*="tile-view"] #remoteVideos {
  gap: clamp(6px, 1vmin, 12px) !important;
  background: transparent !important;
}

.tile-view #localVideoContainer,
.tile-view #filmstripLocalVideoThumbnail,
.tile-view .filmstrip #localVideoContainer,
[class*="tile-view"] #localVideoContainer,
[class*="tile-view"] #filmstripLocalVideoThumbnail,
#videoconference_page.tile-view #localVideoContainer,
#videoconference_page.tile-view #filmstripLocalVideoThumbnail {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: clamp(12px, 1.4vmin, 18px) !important;
  border: 2px solid transparent !important;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55) !important;
}

.tile-view .videocontainer,
[class*="tile-view"] .videocontainer,
#videoconference_page.tile-view .videocontainer {
  border-radius: clamp(12px, 1.4vmin, 18px) !important;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55) !important;
  transform: none !important;
}

.tile-view .videocontainer video,
.tile-view #localVideoContainer video,
[class*="tile-view"] .videocontainer video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tile-view .videocontainer .bottom-indicators,
.tile-view #localVideoContainer .bottom-indicators,
.tile-view #filmstripLocalVideoThumbnail .bottom-indicators,
[class*="tile-view"] .videocontainer .bottom-indicators {
  left: clamp(6px, 0.9vmin, 10px) !important;
  right: clamp(6px, 0.9vmin, 10px) !important;
  bottom: clamp(6px, 0.9vmin, 10px) !important;
  max-width: none !important;
  width: auto !important;
  border-radius: 9px !important;
}

.tile-view .displayname,
[class*="tile-view"] .displayname,
.tile-view .displayNameContainer,
[class*="tile-view"] .displayNameContainer {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: clamp(11px, 1.3vmin, 13px) !important;
}

@media (max-width: 640px), (max-height: 520px) {
  html.sellico-embedded #videoconference_page::before {
    display: none !important;
  }

  html.sellico-embedded .subject-info-container {
    top: 8px !important;
    max-width: calc(100vw - 20px) !important;
  }
}

/* ================================================================
 * 20. SELLICO PRODUCT SHELL
 * ----------------------------------------------------------------
 * Финальный визуальный слой: интерфейс должен ощущаться как отдельный
 * продукт Sellico Meet. Убираем промо/апстрим-ссылки, делаем prejoin,
 * lobby и embedded-режим спокойными рабочими поверхностями.
 * ================================================================ */

html.sellico-product,
html.sellico-product body,
html.sellico-product #root {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(34, 197, 94, 0.08), transparent 34%),
    #0F1419 !important;
}

html.sellico-product img[src*="jitsi"],
html.sellico-product img[src*="8x8"],
html.sellico-product img[src*="watermark"],
html.sellico-product [style*="jitsi"],
html.sellico-product [style*="8x8"],
html.sellico-product a[href*="jitsi"],
html.sellico-product a[href*="8x8"],
html.sellico-product a[href*="meet.jit.si"],
html.sellico-product a[href*="itunes.apple.com"],
html.sellico-product a[href*="apps.apple.com"],
html.sellico-product a[href*="play.google.com"],
html.sellico-product [class*="deep-linking"],
html.sellico-product [class*="DeepLinking"],
html.sellico-product [class*="mobile-promo"],
html.sellico-product [class*="MobilePromo"],
html.sellico-product [class*="DownloadApp"],
html.sellico-product [class*="download-app"],
html.sellico-product [class*="powered"],
html.sellico-product [class*="Powered"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Standalone welcome не должен выглядеть как публичный генератор комнат.
 * Реальные комнаты открываются только по ссылке из CRM/органайзера, а
 * role-selector дополнительно валидирует roomId. */
html.sellico-product .welcome,
html.sellico-product .welcome-page,
html.sellico-product .welcome-page-content,
html.sellico-product .welcome-page-settings,
html.sellico-product .welcome-page-button,
html.sellico-product .welcome-card,
html.sellico-product .welcome-watermark {
  background: transparent !important;
  box-shadow: none !important;
}

html.sellico-product .welcome .header,
html.sellico-product .welcome-page .header,
html.sellico-product .welcome-page-toolbox,
html.sellico-product .welcome-footer,
html.sellico-product .welcome-page-footer {
  display: none !important;
}

/* Prejoin/lobby как Sellico-продукт: плотная карточка, видео слева/сверху,
 * действия справа/снизу, без маркетинговых блоков. */
html.sellico-product .premeeting-screen,
html.sellico-product #prejoin,
html.sellico-product [class*="Prejoin"],
html.sellico-product [class*="prejoin"] {
  color: #fff !important;
}

html.sellico-product .premeeting-screen {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(34, 197, 94, 0.12), transparent 42%),
    #0F1419 !important;
}

html.sellico-product #prejoin::before,
html.sellico-product .premeeting-screen::before {
  content: "" !important;
  position: fixed !important;
  top: 24px !important;
  left: 28px !important;
  width: 148px !important;
  height: 46px !important;
  background: rgba(15, 20, 25, 0.72) url('/sellico-logo.svg') no-repeat center / 102px auto !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html.sellico-product .prejoin-input-area,
html.sellico-product .prejoin-preview-dropdown-container,
html.sellico-product .prejoin-preview,
html.sellico-product [class*="prejoin-input-area"],
html.sellico-product [class*="prejoin-preview"] {
  background: rgba(21, 27, 35, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px -36px rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

html.sellico-product .prejoin-input-area button,
html.sellico-product .premeeting-screen button {
  text-transform: none !important;
}

html.sellico-product .prejoin-input-area input,
html.sellico-product .premeeting-screen input {
  background: rgba(8, 11, 15, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.sellico-product .lobby-screen,
html.sellico-product [class*="LobbyScreen"],
html.sellico-product [data-testid*="lobby"] {
  background: #0F1419 !important;
  color: #fff !important;
}

html.sellico-embedded #videoconference_page::before {
  width: 112px !important;
  height: 38px !important;
  top: 12px !important;
  left: 12px !important;
  background-size: 78px auto !important;
  border-radius: 12px !important;
}

html.sellico-embedded #new-toolbox,
html.sellico-embedded .new-toolbox,
html.sellico-embedded .toolbox {
  bottom: clamp(12px, 1.8vmin, 20px) !important;
}

@media (max-width: 720px), (max-height: 560px) {
  html.sellico-product #prejoin::before,
  html.sellico-product .premeeting-screen::before {
    top: 12px !important;
    left: 12px !important;
    width: 112px !important;
    height: 36px !important;
    background-size: 78px auto !important;
  }
}

/* ================================================================
 * ROLE SELECTOR OVERLAY
 * ----------------------------------------------------------------
 * Injected by role-selector.js. Показывается на prejoin'е, если у
 * юзера нет JWT и он не выбирал роль в этой сессии. Два крупных
 * CTA: «Я гость» vs «Я пользователь Sellico».
 * ================================================================ */

html.sellico-role-overlay-open,
html.sellico-role-overlay-open body {
  overflow: hidden !important;
}

/* Полностью прячем всё содержимое под блокирующим overlay — иначе Jitsi
 * welcome/prejoin догружает свой UI после наших сокрытий и пользователь
 * видит «создать свою комнату» под overlay. */
html.sellico-role-blocking body > *:not(#sellico-role-overlay) {
  display: none !important;
  visibility: hidden !important;
}

#sellico-role-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important; /* over Jitsi modals */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background:
    radial-gradient(ellipse at top, rgba(34, 197, 94, 0.15) 0%, transparent 55%),
    rgba(8, 11, 14, 0.88) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  animation: sellico-role-fade-in 180ms ease-out !important;
}

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

#sellico-role-overlay .sellico-role-card {
  width: 100% !important;
  max-width: 480px !important;
  padding: 32px 28px 24px !important;
  border-radius: 20px !important;
  background: #111820 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(34, 197, 94, 0.08) !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif !important;
  animation: sellico-role-pop-in 220ms cubic-bezier(0.22, 0.9, 0.3, 1.1) !important;
}

@keyframes sellico-role-pop-in {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

#sellico-role-overlay .sellico-role-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

#sellico-role-overlay .sellico-role-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background-color: rgba(34, 197, 94, 0.14) !important;
  background-image: url('/sellico-logo.svg') !important;
  background-size: 28px 28px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

#sellico-role-overlay .sellico-role-title {
  margin: 0 0 8px !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}

#sellico-role-overlay .sellico-role-subtitle {
  margin: 0 0 24px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

#sellico-role-overlay .sellico-role-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

#sellico-role-overlay .sellico-role-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease !important;
  font-family: inherit !important;
  width: 100% !important;
}

#sellico-role-overlay .sellico-role-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

#sellico-role-overlay .sellico-role-btn:active {
  transform: translateY(0) !important;
}

#sellico-role-overlay .sellico-role-btn-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

#sellico-role-overlay .sellico-role-btn-hint {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

#sellico-role-overlay .sellico-role-btn-sellico {
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px -10px rgba(34, 197, 94, 0.55) !important;
}

#sellico-role-overlay .sellico-role-btn-sellico:hover {
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%) !important;
  box-shadow: 0 14px 32px -10px rgba(34, 197, 94, 0.65) !important;
}

#sellico-role-overlay .sellico-role-btn-sellico .sellico-role-btn-hint {
  color: rgba(255, 255, 255, 0.78) !important;
}

#sellico-role-overlay .sellico-role-countdown {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 1px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  min-width: 24px !important;
  text-align: center !important;
}

#sellico-role-overlay .sellico-role-footer {
  text-align: center !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

#sellico-role-overlay .sellico-role-footer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

@media (max-width: 480px) {
  #sellico-role-overlay .sellico-role-card {
    padding: 24px 20px 20px !important;
    border-radius: 16px !important;
  }
  #sellico-role-overlay .sellico-role-title {
    font-size: 19px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sellico-role-overlay,
  #sellico-role-overlay .sellico-role-card {
    animation: none !important;
  }
  #sellico-role-overlay .sellico-role-btn {
    transition: none !important;
  }
}

/* ================================================================
 * COMPACT MODE — PiP свёрнутое окно из CRM
 * ----------------------------------------------------------------
 * Ставится скриптом compact-mode.js когда CRM (SellicoMeetRoom)
 * сворачивает звонок в PiP 300×190. Прячет ВСЕ элементы Jitsi-chrome,
 * оставляя только видео-холст (active speaker / self-view видео/аватар).
 * CRM рисует свой собственный top-strip (title + hangup) и bottom-strip
 * (mic/cam/expand) поверх iframe'а, так что всё что тут есть от
 * upstream — визуальный мусор в маленьком размере.
 * ================================================================ */

html.sellico-compact .new-toolbox,
html.sellico-compact .toolbox,
html.sellico-compact #new-toolbox,
html.sellico-compact .toolbox-content,
html.sellico-compact .toolbox-content-wrapper,
/* Subject / timer сверху */
html.sellico-compact .subject-info-container,
html.sellico-compact .subject,
html.sellico-compact [class*="SubjectText"],
/* Filmstrip — в PiP не нужен, активный спикер всё равно на stage */
html.sellico-compact .filmstrip,
html.sellico-compact #filmstrip,
html.sellico-compact [class*="Filmstrip"],
/* «Включите камеру и микрофон внизу» self-view placeholder */
html.sellico-compact .self-view-mobile-portrait,
html.sellico-compact [class*="permissionsOverlay"],
html.sellico-compact [class*="welcomePageTitle"],
html.sellico-compact .videocontainer > span.videocontainer_text,
html.sellico-compact [data-testid="notifications.container"],
html.sellico-compact #notifications-container,
html.sellico-compact #notifications-container *,
html.sellico-compact [id*="notification" i],
html.sellico-compact [class*="notification" i],
/* Chat/participants боковые панели — в 300×190 их открывать бессмысленно */
html.sellico-compact .chat-dialog,
html.sellico-compact .participants_pane,
html.sellico-compact .sideToolbarContainer,
/* Notifications bar (Jitsi flag компонент и всплывашки) */
html.sellico-compact .notifications-container,
html.sellico-compact .atlaskit-portal [role="tooltip"],
html.sellico-compact .atlaskit-portal [class*="Tooltip"],
html.sellico-compact .atlaskit-portal [class*="tooltip"],
html.sellico-compact [role="tooltip"],
html.sellico-compact .tooltip,
html.sellico-compact .tippy-box,
html.sellico-compact .ReactModalPortal,
/* Watermark и лейблы внизу справа (connection indicator, raised hand, etc) */
html.sellico-compact .watermark,
html.sellico-compact [class*="watermark"],
html.sellico-compact .toolbox-background,
/* Sellico-logo pill в верхнем-левом — тоже прячем, у CRM свой title */
html.sellico-compact #videoconference_page::before {
  display: none !important;
}

/* Видео-холст развернуть на весь iframe — без inset'ов и padding'ов */
html.sellico-compact,
html.sellico-compact body,
html.sellico-compact #root,
html.sellico-compact #videoconference_page,
html.sellico-compact #largeVideoContainer,
html.sellico-compact #largeVideo,
html.sellico-compact .large-video-container,
html.sellico-compact #videospace {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Self-view на весь экран (когда ты один в комнате, чтобы avatar был
 * большой и по центру, а не в маленьком PIP-углу). */
html.sellico-compact #localVideoWrapper,
html.sellico-compact #localVideoContainer {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  right: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Курсор не-pointer внутри iframe — мы его всё равно перехватываем
 * оверлеем «click-to-restore» в CRM, но на всякий случай чтобы не
 * было hover-состояний от скрытых кнопок. */
html.sellico-compact body {
  cursor: default !important;
}

/* Compact/PiP: служебные toast'ы и tooltip'ы движка на таком размере
 * перекрывают весь звонок. Оставляем управление CRM-оверлею снаружи. */
html.sellico-compact #notifications-container,
html.sellico-compact .notifications-container,
html.sellico-compact [data-testid="notifications.container"],
html.sellico-compact .atlaskit-portal:has([role="tooltip"]),
html.sellico-compact .atlaskit-portal:has([class*="Tooltip"]),
html.sellico-compact .atlaskit-portal:has([class*="tooltip"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ================================================================
 * 21. TILE VIEW RESCUE — full-size рабочая сетка в CRM iframe
 * ----------------------------------------------------------------
 * Jitsi использует `.filmstrip` как реальный grid-контейнер tile-view.
 * Любой PIP-style reset (`inset:auto`, скрытие пустого remoteVideos и т.п.)
 * может схлопнуть сетку в чёрный экран. Этот слой идёт последним и
 * возвращает tile-view к предсказуемой full-area раскладке.
 * ================================================================ */
html:not(.sellico-compact) .tile-view .filmstrip,
html:not(.sellico-compact) .tile-view .new-filmstrip,
html:not(.sellico-compact) .tile-view #filmstripLocalVideo,
html:not(.sellico-compact) [class*="tile-view"] .filmstrip,
html:not(.sellico-compact) [class*="tile-view"] .new-filmstrip,
html:not(.sellico-compact) [class*="tile-view"] #filmstripLocalVideo,
html:not(.sellico-compact) #videoconference_page.tile-view .filmstrip,
html:not(.sellico-compact) #videoconference_page.tile-view .new-filmstrip,
html:not(.sellico-compact) #videoconference_page.tile-view #filmstripLocalVideo {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: clamp(10px, 1.2vmin, 18px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  pointer-events: auto !important;
}

html:not(.sellico-compact) .tile-view #filmstripRemoteVideos,
html:not(.sellico-compact) .tile-view .filmstrip__videos,
html:not(.sellico-compact) .tile-view #remoteVideos,
html:not(.sellico-compact) [class*="tile-view"] #filmstripRemoteVideos,
html:not(.sellico-compact) [class*="tile-view"] .filmstrip__videos,
html:not(.sellico-compact) [class*="tile-view"] #remoteVideos {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

html:not(.sellico-compact) .tile-view .videocontainer,
html:not(.sellico-compact) .tile-view #localVideoContainer,
html:not(.sellico-compact) .tile-view #filmstripLocalVideoThumbnail,
html:not(.sellico-compact) [class*="tile-view"] .videocontainer,
html:not(.sellico-compact) [class*="tile-view"] #localVideoContainer,
html:not(.sellico-compact) [class*="tile-view"] #filmstripLocalVideoThumbnail {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: clamp(12px, 1.4vmin, 18px) !important;
  background: #151B23 !important;
}

html:not(.sellico-compact) #dominantSpeakerAvatarContainer,
html:not(.sellico-compact) #dominantSpeakerAvatar,
html:not(.sellico-compact) .videocontainer .avatar-container,
html:not(.sellico-compact) .videocontainer .userAvatar,
html:not(.sellico-compact) #localVideoContainer .avatar-container,
html:not(.sellico-compact) #localVideoContainer .userAvatar,
html:not(.sellico-compact) #filmstripLocalVideoThumbnail .avatar-container,
html:not(.sellico-compact) #filmstripLocalVideoThumbnail .userAvatar {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Не форсим dominant-speaker avatar поверх largeVideo.
 * Jitsi сам показывает avatar при muted/no-video. Когда камера включена,
 * принудительный z-index avatar-слоя закрывал играющее local video. */
html:not(.sellico-compact) #largeVideoContainer video {
  position: relative !important;
  z-index: 3 !important;
}

/* Expanded CRM self-view: берём из compact только геометрию video-surface,
 * не скрывая Jitsi chrome/grid. В PiP камера видна именно потому, что
 * #localVideoWrapper/#localVideoContainer получают реальный размер. */
html:not(.sellico-compact).sellico-embedded #largeVideoWrapper,
html:not(.sellico-compact).sellico-embedded #largeVideoElementsContainer,
html:not(.sellico-compact).sellico-embedded #largeVideo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html:not(.sellico-compact).sellico-embedded #largeVideoContainer #localVideoWrapper,
html:not(.sellico-compact).sellico-embedded #largeVideoContainer #localVideoContainer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

html:not(.sellico-compact).sellico-embedded #largeVideoContainer #localVideoContainer video,
html:not(.sellico-compact).sellico-embedded #largeVideoContainer #localVideoWrapper video,
html:not(.sellico-compact).sellico-embedded #largeVideoContainer video#largeVideo,
html:not(.sellico-compact).sellico-embedded #largeVideoContainer #largeVideo video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Solo tile-view: when there are no remote participants, the generic
 * "empty remote filmstrip" rule above used to hide the only grid surface.
 * Keep the grid alive and promote the local avatar/tile to the visible area. */
html:not(.sellico-compact) .tile-view #filmstripRemoteVideos:not(:has(.videocontainer)),
html:not(.sellico-compact) .tile-view .filmstrip__videos:not(:has(.videocontainer)),
html:not(.sellico-compact) [class*="tile-view"] #filmstripRemoteVideos:not(:has(.videocontainer)),
html:not(.sellico-compact) [class*="tile-view"] .filmstrip__videos:not(:has(.videocontainer)),
html:not(.sellico-compact) #videoconference_page.tile-view #filmstripRemoteVideos:not(:has(.videocontainer)),
html:not(.sellico-compact) #videoconference_page.tile-view .filmstrip__videos:not(:has(.videocontainer)) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html:not(.sellico-compact) .tile-view #filmstripLocalVideo,
html:not(.sellico-compact) .tile-view #filmstripLocalVideoThumbnail,
html:not(.sellico-compact) .tile-view #localVideoContainer,
html:not(.sellico-compact) [class*="tile-view"] #filmstripLocalVideo,
html:not(.sellico-compact) [class*="tile-view"] #filmstripLocalVideoThumbnail,
html:not(.sellico-compact) [class*="tile-view"] #localVideoContainer,
html:not(.sellico-compact) #videoconference_page.tile-view #filmstripLocalVideo,
html:not(.sellico-compact) #videoconference_page.tile-view #filmstripLocalVideoThumbnail,
html:not(.sellico-compact) #videoconference_page.tile-view #localVideoContainer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tooltip portals: настоящие меню остаются через role=menu/dialog/listbox,
 * но явные tooltip-обёртки и их кликабельные слои не должны перекрывать UI. */
.atlaskit-portal:has([role="tooltip"]),
.atlaskit-portal-container:has([role="tooltip"]),
.atlaskit-portal:has([data-testid*="tooltip" i]),
.atlaskit-portal-container:has([data-testid*="tooltip" i]),
.atlaskit-portal:has(.button-label),
.atlaskit-portal-container:has(.button-label),
.atlaskit-portal:has(.button-tooltip),
.atlaskit-portal-container:has(.button-tooltip) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}