/* ==========================================================================
   UI REFRESH — minimal icon buttons + "blob" text buttons.
   Loaded last so it wins over style.css / style-v2.css / messenger.css.
   Rollback: remove the <link> to this file and the button-blob.js <script>.
   ========================================================================== */

/* Tokens live on body (not :root): they reference --sc-v2-* which the light
   theme redefines on body, and custom properties resolve where declared. */
body {
  --ui-accent: #5aa9ff;                 /* soft blue for active icons/text */
  --ui-icon: var(--sc-v2-text-secondary, #a8afba);
  --ui-icon-hover: var(--sc-v2-text-primary, #f5f5f7);
  --ui-blob-fill: #2f6fd1;
  --ui-blob-fill-2: #2759b0;
  --ui-btn-border: rgba(90, 169, 255, 0.42);
  --ui-btn-text: #8cc2ff;
  --ui-neutral-border: rgba(255, 255, 255, 0.16);
  --ui-neutral-text: var(--sc-v2-text-secondary, #a8afba);
  --ui-neutral-fill: #2a313c;
  --ui-danger-border: rgba(255, 99, 90, 0.45);
  --ui-danger-text: #ff8a82;
  --ui-danger-fill: #c8392f;
  --ui-yellow-fill: #e9b84e;
  --ui-yellow-fill-2: #d6a23c;
  /* black SVG <img> icons -> --ui-accent / neutral grey */
  --ui-img-accent: invert(62%) sepia(48%) saturate(2650%) hue-rotate(191deg) brightness(102%) contrast(101%);
  --ui-img-icon: invert(78%) sepia(6%) saturate(390%) hue-rotate(176deg) brightness(90%);
  --ui-img-icon-hover: invert(97%) sepia(3%) saturate(120%) hue-rotate(200deg) brightness(104%);
}

body.light-theme {
  --ui-accent: #1d6fd8;
  --ui-icon: var(--sc-v2-text-secondary, #4d5562);
  --ui-icon-hover: var(--sc-v2-text-primary, #111318);
  --ui-neutral-text: var(--sc-v2-text-secondary, #4d5562);
  --ui-blob-fill: #2a6fd6;
  --ui-blob-fill-2: #215cb8;
  --ui-btn-border: rgba(29, 111, 216, 0.45);
  --ui-btn-text: #1d6fd8;
  --ui-neutral-border: rgba(23, 33, 61, 0.18);
  --ui-neutral-fill: #e3e8f0;
  --ui-danger-border: rgba(214, 48, 38, 0.45);
  --ui-danger-text: #d63026;
  --ui-danger-fill: #d63026;
  --ui-img-accent: invert(33%) sepia(92%) saturate(1780%) hue-rotate(201deg) brightness(91%) contrast(92%);
  --ui-img-icon: invert(33%) sepia(9%) saturate(640%) hue-rotate(178deg) brightness(92%);
  --ui-img-icon-hover: invert(6%) sepia(9%) saturate(900%) hue-rotate(190deg) brightness(95%);
}

/* --------------------------------------------------------------------------
   1. Section rail (Чаты / Каналы / Сохранённое): icon + label only.
   -------------------------------------------------------------------------- */
.app-section-rail button,
.app-section-rail #messenger-launch,
.app-section-rail button:hover,
.app-section-rail #messenger-launch:hover,
.app-section-rail button.active,
.app-section-rail #messenger-launch[aria-expanded=true],
#messenger-launch.in-call {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.app-section-rail button,
.app-section-rail #messenger-launch {
  color: var(--ui-icon) !important;
  transition: color 180ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1) !important;
}
.app-section-rail button:hover,
.app-section-rail #messenger-launch:hover { color: var(--ui-icon-hover) !important; }
.app-section-rail button.active,
.app-section-rail #messenger-launch[aria-expanded=true] { color: var(--ui-accent) !important; }
.app-section-rail button > span:first-child,
.app-section-rail #messenger-launch > span:first-child,
.app-section-rail button.active > span:first-child,
.app-section-rail #messenger-launch[aria-expanded=true] > span:first-child {
  background: transparent !important;
  color: inherit !important;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.app-section-rail button > span:first-child svg,
.app-section-rail button.active > span:first-child svg,
.app-section-rail #messenger-launch > span:first-child svg,
.app-section-rail #messenger-launch[aria-expanded=true] > span:first-child svg {
  color: inherit !important;
  stroke-width: 1.8;
}
.app-section-rail button:hover > span:first-child,
.app-section-rail #messenger-launch:hover > span:first-child { transform: translateY(-1px); }
.app-section-rail button:active > span:first-child,
.app-section-rail #messenger-launch:active > span:first-child { transform: scale(.92); }
.app-section-rail small,
.app-section-rail .messenger-launch-label,
.app-section-rail #messenger-launch .messenger-launch-label { color: inherit !important; }
.app-section-rail button.active small,
.app-section-rail #messenger-launch[aria-expanded=true] .messenger-launch-label { font-weight: 650 !important; }
.app-section-rail .app-section-icon { filter: var(--ui-img-icon) !important; opacity: 1 !important; }
.app-section-rail button.active .app-section-icon,
.app-section-rail #messenger-launch[aria-expanded=true] .app-section-icon { filter: var(--ui-img-accent) !important; }

/* --------------------------------------------------------------------------
   2. Tabs (Диалоги / Друзья, in-call sidebar tabs, settings nav):
      no pill, accent text + underline that grows in.
   -------------------------------------------------------------------------- */
.messenger-list-tabs button,
.messenger-list-tabs button:hover,
.messenger-list-tabs button.active,
.sidebar-right-tabs .tab-btn,
.sidebar-right-tabs .tab-btn:hover,
.sidebar-right-tabs .tab-btn.active,
body.light-theme .tab-btn,
body.light-theme .tab-btn.active {
  position: relative;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.messenger-list-tabs button,
.sidebar-right-tabs .tab-btn {
  color: var(--ui-icon) !important;
  transition: color 180ms ease !important;
}
.messenger-list-tabs button:hover,
.sidebar-right-tabs .tab-btn:hover { color: var(--ui-icon-hover) !important; }
.messenger-list-tabs button.active,
.sidebar-right-tabs .tab-btn.active { color: var(--ui-accent) !important; }
.messenger-list-tabs button::after,
.sidebar-right-tabs .tab-btn::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ui-accent);
  transform: scaleX(0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.messenger-list-tabs button.active::after,
.sidebar-right-tabs .tab-btn.active::after { transform: scaleX(1); }

.settings-nav-btn,
.settings-nav-btn:hover,
.settings-nav-btn.active {
  background: transparent !important;
  box-shadow: none !important;
}
.settings-nav-btn { transition: color 180ms ease !important; }
.settings-nav-btn:hover { color: var(--ui-icon-hover) !important; }
.settings-nav-btn.active { color: var(--ui-accent) !important; }
.settings-nav-btn.active svg { color: var(--ui-accent) !important; }

/* --------------------------------------------------------------------------
   3. Lists (voice channels, dialogs): selection = accent icon + title,
      no blue plate.
   -------------------------------------------------------------------------- */
.channel-item,
.channel-item:hover,
.channel-item.active,
.channel-item.selected,
.messenger-person,
.messenger-person:hover,
.messenger-person.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.channel-icon-box,
.channel-item.active .channel-icon-box,
body.light-theme .channel-icon-box,
body.light-theme .channel-item.active .channel-icon-box {
  background: transparent !important;
  box-shadow: none !important;
}
.channel-icon-box img,
body:not(.light-theme) .channel-icon-box img {
  opacity: 1 !important;
  filter: var(--ui-img-icon) !important;
  transition: filter 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.channel-item:hover .channel-icon-box img { filter: var(--ui-img-icon-hover) !important; transform: translateY(-1px); }
.channel-item.active .channel-icon-box img,
.channel-item.selected .channel-icon-box img { filter: var(--ui-img-accent) !important; }
.channel-item-title { transition: color 180ms ease; }
.channel-item.active .channel-item-title,
.channel-item.selected .channel-item-title,
.messenger-person.active strong { color: var(--ui-accent) !important; }
.messenger-person strong { transition: color 180ms ease; }
.messenger-person:hover strong { color: var(--ui-icon-hover); }

/* --------------------------------------------------------------------------
   4. Other icon-only buttons: no plate, icon lights up.
   -------------------------------------------------------------------------- */
.home-icon-button,
.user-widget-actions button,
.user-widget-actions #theme-toggle-btn,
#messenger-compose,
#messenger-close,
.messenger-head-actions > button,
.messenger-composer button,
.messenger-composer .messenger-send,
.messenger-call-button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ui-icon) !important;
  transition: color 180ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1) !important;
}
.home-icon-button:hover,
.user-widget-actions button:hover,
#messenger-compose:hover,
#messenger-close:hover,
.messenger-head-actions > button:hover,
.messenger-composer button:hover {
  background: transparent !important;
  color: var(--ui-icon-hover) !important;
  transform: none;
}
.home-icon-button:active,
.user-widget-actions button:active,
.messenger-head-actions > button:active,
.messenger-composer button:active { transform: scale(.9) !important; }
.home-icon-button svg { transition: transform 420ms cubic-bezier(.16, 1, .3, 1); }
.home-icon-button:hover svg { transform: rotate(45deg); }
.messenger-call-button,
.messenger-composer .messenger-send,
.messenger-call-button:hover,
.messenger-composer .messenger-send:hover { color: var(--ui-accent) !important; }
.messenger-composer .messenger-send:disabled { color: var(--sc-v2-text-tertiary, #7e8591) !important; }
.user-widget-actions button::before { transition: filter 180ms ease; }
.messenger-empty-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--ui-accent) !important; }

/* View-mode switcher, invite link, in-call sidebar tabs: icons only. */
.view-mode-switcher,
.sidebar-right-tabs,
body.light-theme .sidebar-right-tabs {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.view-mode-switcher { width: auto !important; gap: 2px !important; }
.view-mode-btn,
.view-mode-btn:hover,
.view-mode-btn.active,
#copy-room-link-btn,
#copy-room-link-btn:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.view-mode-btn,
#copy-room-link-btn {
  color: var(--ui-icon) !important;
  transition: color 180ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1) !important;
}
.view-mode-btn:hover,
#copy-room-link-btn:hover { color: var(--ui-icon-hover) !important; transform: none !important; }
.view-mode-btn.active { color: var(--ui-accent) !important; }
.view-mode-btn:active,
#copy-room-link-btn:active { transform: scale(.9) !important; }
.view-mode-btn::before,
body:not(.light-theme) .view-mode-btn::before { filter: var(--ui-img-icon) !important; }
body .view-mode-btn:hover::before { filter: var(--ui-img-icon-hover) !important; }
body .view-mode-btn.active::before { filter: var(--ui-img-accent) !important; }
#copy-room-link-btn {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}
#copy-room-link-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Light theme: friends card followed the dark fallback colour. */
.home-friends,
.home-friends-list { background: var(--sc-v2-bg-card) !important; }

/* --------------------------------------------------------------------------
   Responsive room header: flex row instead of absolute boxes, so the title
   truncates instead of sliding under the status chip.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .room-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px 0 28px !important;
  }
  .room-header .room-title,
  .room-header .room-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
  .room-header .room-title { flex: 1 1 auto; min-width: 0; }
  .room-header .room-title-copy { min-width: 0; }
  .room-header .room-title h2 {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .room-header .room-actions { flex: 0 0 auto; align-items: center; gap: 10px !important; }
}
@media (min-width: 761px) and (max-width: 1239px) {
  .connection-quality-chip { width: 36px !important; padding: 0 !important; justify-content: center !important; }
  .connection-quality-chip .connection-quality-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   5. Text buttons: compact pill + gooey "blob" fill on hover.
      Markup (.blob-btn__inner > .blob-btn__blobs > .blob-btn__blob x4) is
      injected by button-blob.js; without it the button still looks right.
   -------------------------------------------------------------------------- */
.blob-btn {
  /* Primary: blue at rest, soft pac-man yellow fill on hover. */
  --blob-border: var(--ui-btn-border);
  --blob-text: var(--ui-btn-text);
  --blob-fill: var(--ui-yellow-fill, #e9b84e);
  --blob-fill-2: var(--ui-yellow-fill-2, #d6a23c);
  --blob-text-hover: #1b1608;
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  overflow: visible !important; /* clipping here eats the outline's anti-aliasing */
  display: inline-flex; /* no !important: inline display:none / [hidden] must still hide */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 9px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--blob-text) !important;
  font-family: var(--font-family) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: .01em;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
  transition: color 380ms ease, opacity 160ms ease !important;
}
.blob-btn[hidden] { display: none !important; }
.blob-btn.btn-block,
.blob-btn.blob-btn--wrap { white-space: normal; }
.blob-btn.btn-block { width: 100%; }
.blob-btn.btn-sm { min-height: 32px; padding: 6px 14px !important; font-size: 12.5px !important; }

/* crisp 1px outline above the fill */
.blob-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--blob-border);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 380ms ease;
}
/* matte resting texture: faint top sheen */
.blob-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--blob-tint, var(--ui-blob-fill)) 9%, transparent);
  pointer-events: none;
}
/* outrank theme rules like `body.light-theme .btn-secondary { … !important }` */
html body .blob-btn.blob-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--blob-text) !important;
}
html body .blob-btn.blob-btn:hover,
html body .blob-btn.blob-btn:focus-visible { color: var(--blob-text-hover) !important; }
html body .blob-btn.blob-btn:disabled { color: var(--blob-text) !important; }
.blob-btn--secondary {
  --blob-border: var(--ui-neutral-border);
  --blob-text: var(--ui-neutral-text);
  --blob-fill: var(--ui-neutral-fill);
  --blob-fill-2: var(--ui-neutral-fill);
  --blob-text-hover: var(--sc-v2-text-primary, #f5f5f7);
}
.blob-btn--danger {
  --blob-border: var(--ui-danger-border);
  --blob-text: var(--ui-danger-text);
  --blob-fill: var(--ui-danger-fill);
  --blob-fill-2: var(--ui-danger-fill);
}
.blob-btn:hover,
.blob-btn:focus-visible { color: var(--blob-text-hover) !important; }
.blob-btn:hover::before,
.blob-btn:focus-visible::before { border-color: transparent; }
.blob-btn:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px; }
.blob-btn:active { opacity: .86; }
.blob-btn:disabled,
.blob-btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }

.blob-btn__inner {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Rectangular overflow clip keeps hidden blobs out of the scroll area
     (otherwise scroll height shrinks on hover and the page jumps);
     clip-path does the rounded, anti-aliased cut. */
  overflow: hidden;
  border-radius: 0;
  clip-path: inset(0 round 999px);
  pointer-events: none;
}
.blob-btn__blobs {
  position: relative;
  display: block;
  height: 100%;
  filter: url("#svoi-goo");
}
.blob-btn__blob {
  position: absolute;
  top: 1px;
  width: 25%;
  height: 100%;
  border-radius: 100%;
  background: linear-gradient(180deg, var(--blob-fill), var(--blob-fill-2));
  transform: translate3d(0, 150%, 0) scale(1.4);
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
}
.blob-btn__blob:nth-child(1) { left: 0; transition-delay: 0s; }
.blob-btn__blob:nth-child(2) { left: 30%; transition-delay: 80ms; }
.blob-btn__blob:nth-child(3) { left: 60%; transition-delay: 160ms; }
.blob-btn__blob:nth-child(4) { left: 90%; transition-delay: 240ms; }
.blob-btn:hover .blob-btn__blob,
.blob-btn:focus-visible .blob-btn__blob { transform: translateZ(0) scale(1.7); }
.blob-btn:disabled .blob-btn__blob { transform: translate3d(0, 150%, 0) scale(1.4); }
.blob-btn:disabled:hover { color: var(--blob-text) !important; }

@media (prefers-reduced-motion: reduce) {
  .blob-btn__blob { display: none; }
  .blob-btn::after { transition: background-color 200ms ease; }
  .blob-btn:hover::after { background: var(--blob-fill); }
  .home-icon-button:hover svg,
  .app-section-rail button:hover > span:first-child { transform: none; }
}

/* Window edges: a 24px body radius left dark corners in the frameless
   Windows window (OS already rounds it) and in the browser tab. */
html,
body { border-radius: 0 !important; }

/* Saved session: keep the login screen hidden until renderer.js has checked
   it (boot-state.js sets the class before first paint). */
html.auth-restoring #login-screen { visibility: hidden !important; }
html.auth-restoring::after {
  content: "";
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: url("icon.png") center / contain no-repeat;
  opacity: 0;
  animation: svoiBootPulse 1.1s ease-in-out 250ms infinite;
  pointer-events: none;
}
@keyframes svoiBootPulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .9; transform: scale(1); } }

/* Web client titlebar: single "Скачать Desktop" entry (injected by sync-client.js). */
.browser-download.blob-btn {
  align-self: center;
  margin-right: 14px;
  min-height: 30px;
  padding: 5px 16px !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  -webkit-app-region: no-drag;
}

/* Home screen action row: buttons hug their text, wrap instead of overflow. */
#room-splash-screen .splash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#room-splash-screen .splash-actions .blob-btn { flex: 0 0 auto; }
.home-friends-empty .blob-btn,
.messenger-list-empty .blob-btn { margin-inline: auto; }
.home-friends-head button:hover { background: transparent !important; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  #room-splash-screen .splash-actions { flex-direction: column; align-items: stretch; }
  #room-splash-screen .splash-actions .blob-btn { width: 100%; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Messenger search: breathing room under the titlebar, icon on the text axis.
   -------------------------------------------------------------------------- */
.messenger-sidebar .messenger-search {
  min-height: 42px !important;
  margin: 14px 12px 12px !important;
  padding: 0 12px !important;
  align-items: center !important;
  gap: 9px !important;
  background: var(--sc-v2-bg-control) !important;
  border: 1px solid var(--sc-v2-border) !important;
  border-radius: 12px !important;
  transition: border-color 160ms ease;
}
.messenger-sidebar .messenger-search:focus-within { border-color: var(--ui-accent) !important; }
.messenger-search > span {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  line-height: 0;
  color: var(--ui-icon);
}
.messenger-search > span svg { display: block; width: 18px !important; height: 18px !important; }
.messenger-search input {
  height: 40px;
  padding: 0 !important;
  line-height: 40px !important;
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   Profile card dialog: slow aurora behind the avatar instead of flat grey.
   -------------------------------------------------------------------------- */
.messenger-profile {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  padding: 22px 24px 24px !important;
  background: var(--sc-v2-bg-content) !important;
}
.messenger-profile-aurora {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 190px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
}
.messenger-profile-aurora i {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .55;
  animation: profileAurora 14s ease-in-out infinite alternate;
}
.messenger-profile-aurora i:nth-child(1) { left: -40px; top: -90px; background: #2f6fd1; }
.messenger-profile-aurora i:nth-child(2) { right: -50px; top: -70px; background: #7a4fd6; animation-duration: 17s; animation-delay: -5s; }
.messenger-profile-aurora i:nth-child(3) { left: 30%; top: -120px; background: #d6a12f; opacity: .32; animation-duration: 20s; animation-delay: -9s; }
body.light-theme .messenger-profile-aurora i { opacity: .28; }
@keyframes profileAurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, 18px, 0) scale(1.15); }
  100% { transform: translate3d(-30px, 8px, 0) scale(.95); }
}
.messenger-profile .messenger-profile-avatar { position: relative; margin-top: 10px; }
.messenger-profile .messenger-profile-avatar > * { box-shadow: 0 0 0 4px var(--sc-v2-bg-content), 0 10px 30px rgba(0, 0, 0, .35); }
.messenger-profile h2 { margin: 16px 0 4px !important; font-size: 20px; font-weight: 650; }
.messenger-profile p { margin: 0 0 18px; font-size: 13px; }
#messenger-profile-friend.blob-btn,
#messenger-profile-write.blob-btn { width: 100%; min-height: 42px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .messenger-profile-aurora i { animation: none; } }

/* Row "+ Добавить" / "Принять" buttons in the friends list */
.messenger-row-action-btn.blob-btn { margin-left: auto; min-height: 28px; padding: 4px 12px !important; font-size: 12px !important; }

/* --------------------------------------------------------------------------
   Celebration toast (celebrate.js): spark fuse around the card + firework.
   -------------------------------------------------------------------------- */
.svoi-celebrate-stack {
  position: fixed;
  z-index: 10050;
  top: 56px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}
.svoi-celebrate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--sc-v2-border);
  border-radius: 16px;
  background: var(--sc-v2-bg-card, #1b1e24);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  color: var(--sc-v2-text-primary);
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(18px);
  animation: celebrateIn 420ms cubic-bezier(.16, 1, .3, 1) both;
}
.svoi-celebrate.is-leaving { animation: celebrateOut 240ms ease both; }
.svoi-celebrate-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-accent) 16%, transparent);
  color: var(--ui-accent);
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1), background-color 300ms ease, color 300ms ease;
}
.svoi-celebrate--friends .svoi-celebrate-icon { background: rgba(245, 184, 49, .16); color: #f5b831; }
.svoi-celebrate.is-lit .svoi-celebrate-icon { transform: scale(1.12) rotate(-6deg); }
.svoi-celebrate-icon svg { width: 20px; height: 20px; }
.svoi-celebrate-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; text-align: left; }
.svoi-celebrate-text strong { font-size: 14px; font-weight: 650; }
.svoi-celebrate-text small { overflow: hidden; color: var(--sc-v2-text-secondary); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.svoi-celebrate-fuse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.svoi-celebrate-fuse rect { fill: none; stroke-linecap: round; }
.svoi-celebrate-fuse .track {
  stroke: #f5b831;
  stroke-width: 1.4;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  opacity: .55;
  animation: fuseBurn 1100ms linear forwards;
}
.svoi-celebrate-fuse .spark {
  stroke: #fff2c4;
  stroke-width: 3;
  stroke-dasharray: 3 97;
  stroke-dashoffset: 103;
  filter: drop-shadow(0 0 4px #f5b831) drop-shadow(0 0 10px #ff9b3d);
  animation: fuseSpark 1100ms linear forwards;
}
.svoi-celebrate.is-lit .svoi-celebrate-fuse { animation: fuseFade 700ms ease forwards; }
.svoi-celebrate-burst { position: absolute; z-index: 2; pointer-events: none; }
@keyframes fuseBurn { to { stroke-dashoffset: 0; } }
@keyframes fuseSpark { to { stroke-dashoffset: 3; } }
@keyframes fuseFade { to { opacity: 0; } }
@keyframes celebrateIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes celebrateOut { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .svoi-celebrate, .svoi-celebrate.is-leaving { animation-duration: 1ms; }
}

/* --------------------------------------------------------------------------
   Rooms <-> Chats: crossfade in place (no sideways slide over the rail) and
   keep the user widget visible under the chats list.
   -------------------------------------------------------------------------- */
.messenger-shell:not([hidden]) { animation: appSectionFade 180ms ease both !important; }
.messenger-shell.is-closing { animation: appSectionFadeOut 150ms ease both !important; }
@keyframes appSectionFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes appSectionFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .messenger-shell:not([hidden]), .messenger-shell.is-closing { animation-duration: 1ms !important; }
}
@media (min-width: 761px) {
  :root { --user-widget-reserve: 84px; }
  /* The shell stops painting under the widget; the real widget shows through. */
  .messenger-shell,
  .messenger-shell.profile-open { background: transparent !important; pointer-events: none; }
  .messenger-shell > * { pointer-events: auto; }
  .messenger-shell > .messenger-sidebar {
    margin-bottom: var(--user-widget-reserve);
    border-bottom: 1px solid var(--sc-v2-border);
  }
  .messenger-shell > .messenger-main,
  .messenger-shell > .messenger-profile-pane { background: var(--sc-v2-bg-content) !important; }
}
@media (min-width: 761px) {
  /* Opaque sidebar so the rooms list never shows through the chats column. */
  .messenger-shell > .messenger-sidebar {
    background: linear-gradient(var(--sc-v2-bg-sidebar), var(--sc-v2-bg-sidebar)), var(--sc-v2-bg-window) !important;
  }
}
.messenger-profile form button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease;
}
.messenger-profile form button:hover { color: var(--sc-v2-text-primary) !important; background: rgba(255, 255, 255, .08) !important; }
.messenger-profile form button:focus-visible { outline-offset: 0 !important; }

/* Device dropdown (portal appended to body): neutral surface, accent text for the selected item. */
.settings-custom-dropdown-portal {
  padding: 6px !important;
  border: 1px solid var(--sc-v2-border) !important;
  border-radius: 12px !important;
  background: var(--sc-v2-bg-card, #1b1e24) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(18px);
}
.settings-custom-dropdown-option {
  min-height: 36px;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--sc-v2-text-secondary) !important;
  font-size: 13.5px !important;
}
.settings-custom-dropdown-option:hover { background: var(--sc-v2-bg-control) !important; color: var(--sc-v2-text-primary) !important; }
.settings-custom-dropdown-option.selected { background: transparent !important; color: var(--ui-accent) !important; font-weight: 600; }
.settings-custom-dropdown-option.selected:hover { background: var(--sc-v2-bg-control) !important; }
.settings-custom-dropdown-check { color: var(--ui-accent) !important; }

/* Mic monitor toggle state */
#settings-modal #check-devices-btn.is-active { color: var(--sc-v2-danger, #ff453a); }

/* Friends list: "Отправлен" turns into "Отменить" on hover */
.messenger-row-cancel .when-hover { display: none; }
.messenger-row-cancel:hover .when-idle,
.messenger-row-cancel:focus-visible .when-idle { display: none; }
.messenger-row-cancel:hover .when-hover,
.messenger-row-cancel:focus-visible .when-hover { display: inline; }
.messenger-row-cancel.blob-btn { --blob-fill: var(--ui-danger-fill); --blob-fill-2: var(--ui-danger-fill); --blob-text-hover: #fff; }

/* VIP crown in messenger avatars and names */
.messenger-avatar.messenger-avatar-vip { position: relative; overflow: visible !important; }
.messenger-person,
.messenger-person > span:first-child { overflow: visible; }
.messenger-name-vip { display: inline-flex !important; align-items: center; gap: 5px; max-width: 100%; }
.messenger-profile h2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.messenger-profile.is-vip .messenger-profile-aurora i:nth-child(3) { background: #f5b831; opacity: .5; }

/* Before button-blob.js runs (first paint), text buttons already look like
   the finished design instead of flashing bright blue + underline. */
:is(.btn:not(.btn-square):not(.btn-link):not(.btn-icon):not(#copy-room-link-btn), #home-find-friend, .messenger-list-empty button, .update-snackbar-btn):not(.blob-btn) {
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ui-blob-fill, #2f6fd1) 9%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--ui-btn-border) !important;
  color: var(--ui-btn-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
:is(.btn-secondary, .update-snackbar-btn:not(.primary)):not(.blob-btn):not(.btn-square):not(.btn-link):not(#copy-room-link-btn) {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--ui-neutral-border) !important;
  color: var(--ui-neutral-text) !important;
}

/* --------------------------------------------------------------------------
   Blob hosts (button-blob.js adds .blob-host): dropdown options + call controls.
   They keep their own shape; only the gooey fill layer is added.
   -------------------------------------------------------------------------- */
.blob-host { position: relative; isolation: isolate; }
.blob-host > .blob-btn__inner { z-index: 0; }
.blob-host .blob-btn__blob {
  background: var(--host-fill, var(--ui-blob-fill));
  transform: translate3d(0, 150%, 0) scale(1.4);
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1), background-color 200ms ease;
}

/* Device dropdown options */
.settings-custom-dropdown-option.blob-host > .blob-btn__inner { clip-path: inset(0 round 8px); }
.settings-custom-dropdown-option.blob-host > :not(.blob-btn__inner) { position: relative; z-index: 1; }
.settings-custom-dropdown-option.blob-host { --host-fill: var(--ui-blob-fill); transition: color 300ms ease !important; }
.settings-custom-dropdown-option.blob-host:hover { background: transparent !important; color: #fff !important; }
.settings-custom-dropdown-option.blob-host:hover .blob-btn__blob { transform: translateZ(0) scale(1.7); }
.settings-custom-dropdown-option.blob-host:hover .settings-custom-dropdown-check { color: #fff !important; }

/* Call controls: icon (::before) stays above the fill */
.call-controls .control-btn.blob-host { overflow: visible; }
.call-controls .control-btn.blob-host::before { position: relative; z-index: 2; }
.call-controls .control-btn.blob-host > .blob-btn__inner { clip-path: inset(0 round 999px); }
.call-controls .control-btn.blob-host .blob-btn__blob { top: 0; }
/* default (camera, screen, chat, settings…): blue fills up on hover */
.call-controls .control-btn.blob-host { --host-fill: var(--ui-blob-fill); }
.call-controls .control-btn.blob-host:hover .blob-btn__blob { transform: translateZ(0) scale(1.7); }
/* already active/blue: hover pours a lighter tone */
.call-controls .control-btn.blob-host.is-active,
.call-controls .control-btn.blob-host.active-state:not(#control-mic-btn):not(#control-speaker-btn):not(#control-deafen-btn) { --host-fill: #4a8ae6; }
/* mic / sound ON (blue): hover pours red up to half — a hint that click mutes */
#control-mic-btn.blob-host.is-active,
#control-speaker-btn.blob-host.is-active,
#control-deafen-btn.blob-host.is-active { --host-fill: var(--sc-v2-danger, #ff453a); }
#control-mic-btn.blob-host.is-active:hover .blob-btn__blob,
#control-speaker-btn.blob-host.is-active:hover .blob-btn__blob,
#control-deafen-btn.blob-host.is-active:hover .blob-btn__blob { transform: translate3d(0, 62%, 0) scale(1.5); }
/* mic / sound OFF (red): hover pours blue up to half — click unmutes */
#control-mic-btn.blob-host.is-muted,
#control-speaker-btn.blob-host.is-muted,
#control-deafen-btn.blob-host.is-muted { --host-fill: var(--ui-blob-fill); }
#control-mic-btn.blob-host.is-muted:hover .blob-btn__blob,
#control-speaker-btn.blob-host.is-muted:hover .blob-btn__blob,
#control-deafen-btn.blob-host.is-muted:hover .blob-btn__blob { transform: translate3d(0, 62%, 0) scale(1.5); }
/* leave call: darker red fills fully */
.call-controls .control-btn.blob-host.btn-danger { --host-fill: #b82e25; }
/* state colours change smoothly when the click flips mute */
.call-controls .control-btn.blob-host { transition: background-color 260ms ease, transform 160ms ease !important; }
@media (prefers-reduced-motion: reduce) { .blob-host .blob-btn__blob { transition: none; } }

/* Resting tint follows the button colour (fill may differ, e.g. yellow hover). */
.blob-btn--secondary { --blob-tint: var(--ui-neutral-fill); }
.blob-btn--danger { --blob-tint: var(--ui-danger-fill); }
/* Segmented tabs (Вход / Регистрация): selected one reads as selected. */
.blob-btn[aria-pressed=true] { --blob-border: var(--ui-btn-border); --blob-text: var(--ui-btn-text); --blob-tint: var(--ui-blob-fill); }
/* --------------------------------------------------------------------------
   Notification centre (inbox.js): bell in the titlebar + dropdown list.
   -------------------------------------------------------------------------- */
.svoi-inbox { position: relative; display: flex; align-items: center; height: 100%; margin-right: 6px; -webkit-app-region: no-drag; }
.svoi-inbox[hidden] { display: none !important; }
.svoi-inbox-btn {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-icon);
  cursor: pointer;
  transition: color 160ms ease;
}
.svoi-inbox-btn:hover,
.svoi-inbox-btn[aria-expanded=true] { color: var(--ui-icon-hover); }
.svoi-inbox-btn[aria-expanded=true] { color: var(--ui-accent); }
.svoi-inbox-btn svg { width: 19px; height: 19px; transform-origin: 50% 10%; }
.svoi-inbox-btn.is-ringing svg { animation: inboxRing 900ms cubic-bezier(.36, .07, .19, .97); }
@keyframes inboxRing {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}
.svoi-inbox-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--sc-v2-bg-glass, #20242c);
  border-radius: 9px;
  background: var(--sc-v2-danger, #ff453a);
  color: #fff;
  font: 700 10px/12px var(--font-family);
  text-align: center;
  box-sizing: content-box;
  animation: inboxBadgeIn 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.svoi-inbox-badge[hidden] { display: none; }
@keyframes inboxBadgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.svoi-inbox-panel {
  position: absolute;
  z-index: 10040;
  top: calc(100% + 6px);
  right: -8px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sc-v2-border);
  border-radius: 16px;
  background: var(--sc-v2-bg-card, #1b1e24);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px);
  animation: inboxPanelIn 180ms cubic-bezier(.16, 1, .3, 1);
}
.svoi-inbox-panel[hidden] { display: none; }
@keyframes inboxPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.svoi-inbox-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px 16px;
  border-bottom: 1px solid var(--sc-v2-border);
  color: var(--sc-v2-text-primary);
  font-size: 14px;
}
.svoi-inbox-clear { border: 0; background: transparent; color: var(--sc-v2-text-tertiary); font: 500 12px var(--font-family); cursor: pointer; }
.svoi-inbox-clear:hover { color: var(--sc-v2-text-primary); }
.svoi-inbox-list { overflow-y: auto; padding: 6px; }
.svoi-inbox-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--sc-v2-text-primary);
  text-align: left;
  cursor: pointer;
}
.svoi-inbox-item:hover { background: var(--sc-v2-bg-control); }
.svoi-inbox-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--ui-accent) 15%, transparent); color: var(--ui-accent); }
.svoi-inbox-item.kind-friend-request .svoi-inbox-icon,
.svoi-inbox-item.kind-friend-accepted .svoi-inbox-icon { background: rgba(245, 184, 49, .15); color: #f5b831; }
.svoi-inbox-item.kind-update .svoi-inbox-icon { background: rgba(48, 209, 88, .14); color: var(--sc-v2-speaking, #30d158); }
.svoi-inbox-icon svg { width: 18px; height: 18px; }
.svoi-inbox-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.svoi-inbox-text strong { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.svoi-inbox-text small { overflow: hidden; color: var(--sc-v2-text-secondary); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.svoi-inbox-item time { align-self: start; padding-top: 2px; color: var(--sc-v2-text-tertiary); font-size: 11px; white-space: nowrap; }
.svoi-inbox-item.is-unread .svoi-inbox-text strong::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--sc-v2-danger, #ff453a);
  vertical-align: middle;
}
.svoi-inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px 38px; color: var(--sc-v2-text-tertiary); text-align: center; }
.svoi-inbox-empty svg { width: 30px; height: 30px; margin-bottom: 6px; opacity: .6; }
.svoi-inbox-empty strong { color: var(--sc-v2-text-primary); font-size: 14px; }
.svoi-inbox-empty span { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .svoi-inbox-btn.is-ringing svg, .svoi-inbox-panel, .svoi-inbox-badge { animation: none; } }

/* Narrow windows: chats column = rooms column width, so the shared user widget
   stays centred under both. */
@media (min-width: 761px) and (max-width: 1099px) {
  .messenger-shell,
  #app-workspace .messenger-shell { grid-template-columns: 232px minmax(0, 1fr) !important; }
  .messenger-shell.profile-open,
  #app-workspace .messenger-shell.profile-open { grid-template-columns: 232px minmax(0, 1fr) 280px !important; }
}

/* --------------------------------------------------------------------------
   Round 4 polish
   -------------------------------------------------------------------------- */
/* First load (any visitor): pulsing logo until the UI is fully built. */
html.app-booting #login-screen,
html.app-booting #app-workspace { visibility: hidden !important; }
html.app-booting::after {
  content: "";
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: url("icon.png") center / contain no-repeat;
  opacity: 0;
  animation: svoiBootPulse 1.1s ease-in-out 250ms infinite;
  pointer-events: none;
}

/* Bell counter: small corner pill that never covers the bell. */
.svoi-inbox-badge {
  top: 4px !important;
  right: 2px !important;
  min-width: 9px !important;
  height: 13px !important;
  padding: 0 2px !important;
  border-width: 1.5px !important;
  border-radius: 8px !important;
  font: 700 9px/13px var(--font-family) !important;
  letter-spacing: -.02em;
}

/* Inbox rows with a person's avatar + small event chip + call to action. */
.svoi-inbox-icon.has-avatar { position: relative; background: transparent; overflow: visible; }
.svoi-inbox-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-accent) 18%, var(--sc-v2-bg-control)) center / cover no-repeat;
  color: var(--ui-accent);
  font: 650 12px var(--font-family);
}
.svoi-inbox-avatar.is-vip { overflow: visible; }
.svoi-inbox-avatar .vip-avatar-halo { z-index: 1; }
.svoi-inbox-chip {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--sc-v2-bg-card, #1b1e24);
  border-radius: 50%;
  background: var(--ui-blob-fill);
  color: #fff;
}
.svoi-inbox-chip svg { width: 10px !important; height: 10px !important; }
.svoi-inbox-item.kind-friend-request .svoi-inbox-chip,
.svoi-inbox-item.kind-friend-accepted .svoi-inbox-chip { background: #d6a23c; color: #1b1608; }
.svoi-inbox-list { overflow-x: hidden; padding-top: 10px; }
.svoi-inbox-cta {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px;
  border: 1px solid var(--ui-btn-border);
  border-radius: 999px;
  color: var(--ui-btn-text);
  font: 600 12px/16px var(--font-family);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.svoi-inbox-item:hover .svoi-inbox-cta { border-color: transparent; background: var(--ui-yellow-fill); color: #1b1608; }

/* Web pop-up notification: sender avatar instead of the app logo. */
.browser-notification-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
.browser-notification-avatar.messenger-avatar-vip { margin: 6px 4px 0; }

/* Chats column ends with the same gap above the user widget as below it. */
@media (min-width: 761px) { :root { --user-widget-reserve: 98px; } }
.svoi-inbox-badge { top: 1px !important; right: -5px !important; }
.svoi-inbox-item { padding-left: 16px; }

/* ==========================================================================
   ROUND 5 — "real product" buttons: solid fills, 8px radius, no outline glow,
   no sheen. The blob hover stays, poured in a tone of the button's own colour.
   ========================================================================== */
body {
  --btn-radius: 8px;
  --btn-primary-bg: #e9b84e;
  --btn-primary-text: #1b1608;
  --btn-primary-blob: #f4c964;
  --btn-secondary-bg: #2a2f39;
  --btn-secondary-text: #e8ebf0;
  --btn-secondary-blob: #353b47;
  --btn-danger-bg: #c63a30;
  --btn-danger-text: #fff;
  --btn-danger-blob: #d54a3f;
}
body.light-theme {
  --btn-primary-bg: #e5ae3c;
  --btn-primary-blob: #efbf55;
  --btn-secondary-bg: #e7ebf1;
  --btn-secondary-text: #1f2530;
  --btn-secondary-blob: #dbe0e8;
}

html body .blob-btn.blob-btn {
  --blob-fill: var(--btn-primary-blob);
  --blob-fill-2: var(--btn-primary-blob);
  --blob-text: var(--btn-primary-text);
  --blob-text-hover: var(--btn-primary-text);
  border-radius: var(--btn-radius) !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease !important;
}
html body .blob-btn.blob-btn--secondary {
  --blob-fill: var(--btn-secondary-blob);
  --blob-fill-2: var(--btn-secondary-blob);
  --blob-text: var(--btn-secondary-text);
  --blob-text-hover: var(--btn-secondary-text);
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
}
html body .blob-btn.blob-btn--danger {
  --blob-fill: var(--btn-danger-blob);
  --blob-fill-2: var(--btn-danger-blob);
  --blob-text: var(--btn-danger-text);
  --blob-text-hover: var(--btn-danger-text);
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
}
/* no outline ring, no top sheen */
html body .blob-btn.blob-btn::before,
html body .blob-btn.blob-btn::after { display: none !important; }
html body .blob-btn > .blob-btn__inner { clip-path: inset(0 round var(--btn-radius)) !important; }
html body .blob-btn.blob-btn:active { opacity: 1; filter: brightness(.94); }
html body .blob-btn.blob-btn:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 2px; }
html body .blob-btn.blob-btn:disabled,
html body .blob-btn.blob-btn[aria-disabled=true] { opacity: .45; filter: none; }
html body .blob-btn.btn-sm { --btn-radius: 7px; }
.blob-btn__blob { transition-duration: 380ms !important; }

/* Segmented tabs (Вход / Регистрация): selected = secondary surface, other = plain text. */
html body .blob-btn.blob-btn[aria-pressed=false] { background: transparent !important; color: var(--sc-v2-text-secondary) !important; }
html body .blob-btn.blob-btn[aria-pressed=true] { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; --blob-fill: var(--btn-secondary-blob); --blob-fill-2: var(--btn-secondary-blob); }

/* Pre-enhancement first paint matches the solid style. */
:is(.btn:not(.btn-square):not(.btn-link):not(.btn-icon):not(#copy-room-link-btn), #home-find-friend, .messenger-list-empty button, .update-snackbar-btn):not(.blob-btn) {
  border-radius: var(--btn-radius) !important;
  background: var(--btn-primary-bg) !important;
  box-shadow: none !important;
  color: var(--btn-primary-text) !important;
}
:is(.btn-secondary, .update-snackbar-btn:not(.primary)):not(.blob-btn):not(.btn-square):not(.btn-link):not(#copy-room-link-btn) {
  background: var(--btn-secondary-bg) !important;
  box-shadow: none !important;
  color: var(--btn-secondary-text) !important;
}

/* Small controls that were pills */
.messenger-row-action-btn.blob-btn { --btn-radius: 7px; }
.browser-download.blob-btn { --btn-radius: 7px; }
.svoi-inbox-cta { border-radius: 7px; border: 0; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.svoi-inbox-item:hover .svoi-inbox-cta { background: var(--btn-primary-bg); color: var(--btn-primary-text); }

/* ---- Remove decoration that reads as template ---- */
.messenger-profile-aurora { display: none !important; }
.messenger-profile.is-vip { border-color: rgba(233, 184, 78, .35) !important; }
.svoi-celebrate,
.svoi-inbox-panel,
.settings-custom-dropdown-portal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.svoi-celebrate { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.svoi-inbox-panel { box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.svoi-celebrate.is-lit .svoi-celebrate-icon { transform: none; }
.svoi-celebrate-icon { transition: background-color 300ms ease, color 300ms ease; }
.svoi-inbox-badge { animation: none !important; }
@keyframes inboxRing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
}
.svoi-inbox-btn.is-ringing svg { animation: inboxRing 520ms ease-out; }

/* ---- Hairlines: barely there, no "mosaic" ---- */
body { --ui-hairline: rgba(255, 255, 255, .05); }
body.light-theme { --ui-hairline: rgba(23, 33, 61, .07); }
.messenger-shell { --sc-v2-border: var(--ui-hairline); }
.messenger-sidebar,
.messenger-sidebar-head,
.messenger-list-tabs,
.messenger-conversation-head,
.messenger-profile-pane,
.app-section-rail,
.sidebar-left,
.home-friends,
.home-friends-head { border-color: var(--ui-hairline) !important; }
@media (min-width: 761px) { .messenger-shell > .messenger-sidebar { border-bottom-color: var(--ui-hairline) !important; } }

/* Message delete control (appears on hover like the reaction button) */
.messenger-delete-btn {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-v2-text-tertiary);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease;
}
.messenger-delete-btn svg { width: 14px; height: 14px; }
.messenger-message:hover .messenger-delete-btn,
.messenger-delete-btn:focus-visible { opacity: 1; }
.messenger-delete-btn:hover { color: var(--sc-v2-danger, #ff453a); }
.messenger-message.is-deleting { opacity: 0; transform: scale(.97); transition: opacity 160ms ease, transform 160ms ease; }
.messenger-delete-dialog {
  width: min(380px, calc(100vw - 32px));
  margin: auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--sc-v2-border);
  border-radius: 14px;
  background: var(--sc-v2-bg-content);
  color: var(--sc-v2-text-primary);
}
.messenger-delete-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.messenger-delete-dialog h2 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.messenger-delete-dialog p { margin: 0 0 18px; color: var(--sc-v2-text-secondary); font-size: 13px; line-height: 1.45; }
.messenger-delete-actions { display: flex; flex-direction: column; gap: 8px; }
.messenger-delete-actions .blob-btn { width: 100%; }
.messenger-delete-actions .btn-link { align-self: center; border: 0; background: transparent; color: var(--sc-v2-text-secondary); cursor: pointer; }

/* Chat bubbles: flat surfaces, no tinted outline. */
.messenger-message-bubble { border-color: transparent !important; box-shadow: none !important; }
.messenger-message.mine .messenger-message-bubble { border-color: transparent !important; background: #1e2f47 !important; }
body.light-theme .messenger-message.mine .messenger-message-bubble { background: #dce8fb !important; }

/* ==========================================================================
   ROUND 6
   ========================================================================== */

/* ---- Context menus: compact, anchored at the cursor ---- */
.chat-context-menu,
.messenger-context-menu {
  min-width: 190px;
  padding: 5px !important;
  border: 1px solid var(--sc-v2-border) !important;
  border-radius: 10px !important;
  background: var(--sc-v2-bg-card, #1b1e24) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38) !important;
  backdrop-filter: none !important;
}
.chat-context-menu .context-menu-item,
.messenger-context-menu .messenger-context-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px !important;
  border: 0;
  border-radius: 7px !important;
  background: transparent;
  color: var(--sc-v2-text-primary) !important;
  font: 500 13px/18px var(--font-family);
  text-align: left;
  cursor: pointer;
}
.chat-context-menu .context-menu-item:hover,
.messenger-context-menu .messenger-context-item:hover { background: var(--sc-v2-bg-control) !important; }
.context-menu-item.danger,
.messenger-context-item.danger { color: var(--sc-v2-danger, #ff453a) !important; }
.chat-context-menu .context-menu-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--sc-v2-text-secondary); }
/* "Удалить ›" + side panel */
.ctx-sub { position: relative; }
.ctx-sub-trigger { justify-content: space-between; }
.ctx-sub-trigger svg { width: 13px; height: 13px; opacity: .7; }
.ctx-sub-panel {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: calc(100% + 4px);
  display: none;
  min-width: 140px;
  padding: 5px;
  border: 1px solid var(--sc-v2-border);
  border-radius: 10px;
  background: var(--sc-v2-bg-card, #1b1e24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}
.ctx-sub::after { content: ""; position: absolute; top: 0; right: -6px; width: 8px; height: 100%; }
.ctx-sub:hover > .ctx-sub-panel,
.ctx-sub:focus-within > .ctx-sub-panel,
.ctx-sub.open > .ctx-sub-panel { display: block; }
/* flip to the left when the menu sits near the right edge */
.chat-context-menu.ctx-flip .ctx-sub-panel,
.messenger-context-menu.ctx-flip .ctx-sub-panel { left: auto; right: calc(100% + 4px); }

/* ---- Editing ---- */
.messenger-edit-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px -6px;
  padding: 8px 10px 14px 12px;
  border-radius: 12px 12px 0 0;
  background: var(--sc-v2-bg-control);
  color: var(--sc-v2-text-primary);
}
.messenger-edit-bar[hidden] { display: none; }
.messenger-edit-bar > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ui-accent); }
.messenger-edit-bar > span { display: flex; min-width: 0; flex: 1; flex-direction: column; border-left: 2px solid var(--ui-accent); padding-left: 9px; }
.messenger-edit-bar strong { color: var(--ui-accent); font-size: 12.5px; font-weight: 650; }
.messenger-edit-bar small { overflow: hidden; color: var(--sc-v2-text-secondary); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-edit-bar button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--sc-v2-text-secondary); font-size: 20px; cursor: pointer; }
.messenger-edit-bar button:hover { color: var(--sc-v2-text-primary); background: rgba(255, 255, 255, .06); }
.messenger-edited { margin-right: 4px; color: var(--sc-v2-text-tertiary); font-size: 11px; font-style: italic; cursor: default; }

/* ---- Avatars without photo: white initials on the palette colour ---- */
.avatar:not(.has-image-avatar),
.user-widget-avatar-container .avatar:not(.has-image-avatar) { color: #fff !important; }
.user-widget-avatar-container .avatar:not(.has-image-avatar) { background: var(--avatar-color, #4656a3) !important; }

/* ---- Status picker (status-menu.js) ---- */
.presence-picker-label.has-status-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.user-widget { position: relative; }
.status-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 2px;
  padding: 2px 6px 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-v2-text-secondary);
  font: 500 12px/16px var(--font-family);
  cursor: pointer;
  outline: none;
}
.status-menu-trigger:hover,
.status-menu-trigger[aria-expanded=true] { background: var(--sc-v2-bg-control); color: var(--sc-v2-text-primary); }
.status-menu-trigger:focus-visible { box-shadow: 0 0 0 2px var(--ui-accent); }
.status-menu-trigger svg { width: 12px; height: 12px; opacity: .7; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #30d158; }
.status-dot.is-away { background: #f0b232; }
.status-dot.is-dnd { background: #ff453a; }
.status-dot.is-invisible { background: transparent; box-shadow: inset 0 0 0 2px #8b93a1; }
.status-menu {
  position: absolute;
  z-index: 70;
  left: 0;
  bottom: calc(100% + 8px);
  width: 100%;
  min-width: 220px;
  padding: 5px;
  border: 1px solid var(--sc-v2-border);
  border-radius: 12px;
  background: var(--sc-v2-bg-card, #1b1e24);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  animation: inboxPanelIn 160ms ease-out;
}
.status-menu[hidden] { display: none; }
.status-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-v2-text-primary);
  text-align: left;
  cursor: pointer;
}
.status-menu-item:hover { background: var(--sc-v2-bg-control); }
.status-menu-item[aria-checked=true] strong { color: var(--ui-accent); }
.status-menu-item span { display: flex; flex-direction: column; gap: 1px; }
.status-menu-item strong { font-size: 13px; font-weight: 600; }
.status-menu-item small { color: var(--sc-v2-text-tertiary); font-size: 11.5px; }

/* ---- Resizable side column (panel-resize.js) ---- */
:root { --ui-side-width-default: 260px; }
@media (max-width: 1099px) { :root { --ui-side-width-default: 232px; } }
@media (min-width: 761px) {
  .sidebar-left {
    position: relative;
    width: var(--ui-side-width, var(--ui-side-width-default)) !important;
    min-width: var(--ui-side-width, var(--ui-side-width-default)) !important;
    flex-basis: var(--ui-side-width, var(--ui-side-width-default)) !important;
  }
  #app-workspace.sidebar-left-collapsed .sidebar-left { width: 0 !important; min-width: 0 !important; flex-basis: 0 !important; }
  .messenger-shell,
  #app-workspace .messenger-shell { grid-template-columns: var(--ui-side-width, var(--ui-side-width-default)) minmax(320px, 1fr) !important; }
  .messenger-shell.profile-open,
  #app-workspace .messenger-shell.profile-open { grid-template-columns: var(--ui-side-width, var(--ui-side-width-default)) minmax(320px, 1fr) 280px !important; }
  .messenger-shell > .messenger-sidebar { position: relative; }
  .user-widget { width: auto !important; margin-left: 14px !important; margin-right: 14px !important; }
}
.panel-resizer {
  position: absolute;
  z-index: 46;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.panel-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 2px;
  height: 100%;
  background: var(--ui-accent);
  opacity: 0;
  transition: opacity 140ms ease;
}
.panel-resizer:hover::after,
.panel-resizer:focus-visible::after,
html.is-resizing-panels .panel-resizer::after { opacity: .55; }
.panel-resizer:focus-visible { outline: none; }
html.is-resizing-panels,
html.is-resizing-panels * { cursor: col-resize !important; user-select: none !important; }
html.is-resizing-panels .sidebar-left,
html.is-resizing-panels .messenger-shell { transition: none !important; }
@media (max-width: 760px) { .panel-resizer { display: none; } }
/* narrow column: keep rows readable */
.messenger-person strong, .messenger-person small, .channel-item-title, .channel-item-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Call controls: boiling half-fill on hover, full state after click ---- */
#control-mic-btn.blob-host:hover .blob-btn__blob,
#control-deafen-btn.blob-host:hover .blob-btn__blob { animation: blobBoil 1.3s ease-in-out infinite; }
#control-mic-btn.blob-host:hover .blob-btn__blob:nth-child(2),
#control-deafen-btn.blob-host:hover .blob-btn__blob:nth-child(2) { animation-delay: -.35s; }
#control-mic-btn.blob-host:hover .blob-btn__blob:nth-child(3),
#control-deafen-btn.blob-host:hover .blob-btn__blob:nth-child(3) { animation-delay: -.7s; }
#control-mic-btn.blob-host:hover .blob-btn__blob:nth-child(4),
#control-deafen-btn.blob-host:hover .blob-btn__blob:nth-child(4) { animation-delay: -1s; }
@keyframes blobBoil { 0%, 100% { top: 3px; } 50% { top: -5px; } }
.call-controls .control-btn.blob-host.blob-just-toggled .blob-btn__blob {
  transform: translate3d(0, 150%, 0) scale(1.4) !important;
  animation: none !important;
  transition-duration: 160ms !important;
}
@media (prefers-reduced-motion: reduce) { #control-mic-btn .blob-btn__blob, #control-deafen-btn .blob-btn__blob { animation: none !important; } }

/* ---- Light theme: calmer, and the call view follows it ---- */
body.light-theme {
  --sc-v2-bg-window: #e9ecf1;
  --sc-v2-bg-content: #f2f4f7;
  --sc-v2-bg-sidebar: rgba(234, 237, 242, .96);
  --sc-v2-bg-glass: rgba(246, 247, 250, .94);
  --sc-v2-bg-card: #fafbfc;
  --sc-v2-bg-control: #e3e7ed;
  --sc-v2-text-primary: #171a21;
  --sc-v2-text-secondary: #4b5361;
  --sc-v2-border: rgba(23, 33, 61, .09);
}
/* Participant surfaces remain dark islands inside the light call workspace. */
body.light-theme :is(.peer-card, .focus-participant-item, .speaker-strip-item, .fullscreen-peer-item) {
  --sc-v2-text-primary: #f4f6fb;
  --sc-v2-text-secondary: #c0c8d5;
  --sc-v2-text-tertiary: #9aa7ba;
  --sc-v2-bg-card: #171d29;
  --sc-v2-bg-control: #283244;
  --sc-v2-bg-glass: rgba(17, 23, 34, .9);
  --sc-v2-border: rgba(203, 216, 239, .16);
  color: #f4f6fb;
  background: linear-gradient(145deg, #202a3b 0%, #171d29 60%, #111722 100%) !important;
  border-color: rgba(203, 216, 239, .16) !important;
  box-shadow: 0 4px 16px rgba(23, 33, 61, .12) !important;
}
body.light-theme .peer-card > .participant-gradient-layer { opacity: .28 !important; }
body.light-theme .peer-card.is-project-supporter {
  background: linear-gradient(145deg, #25233d 0%, #191e30 55%, #211b35 100%) !important;
  border-color: rgba(159, 140, 235, .4) !important;
}
body.light-theme .peer-card.is-project-supporter > .participant-gradient-layer { opacity: .42 !important; }
body.light-theme .peer-card.camera-on > .participant-gradient-layer { opacity: 0 !important; }
body.light-theme .peer-card .peer-info {
  background: rgba(17, 23, 34, .9) !important;
  border-color: rgba(203, 216, 239, .16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
}
body.light-theme .peer-info,
body.light-theme .peer-info .peer-name,
body.light-theme .peer-info .peer-username { color: var(--sc-v2-text-primary) !important; }
body.light-theme .peer-info .peer-username { color: var(--sc-v2-text-secondary) !important; }
body.light-theme :is(.peer-card, .focus-participant-item, .speaker-strip-item, .fullscreen-peer-item) :is(.peer-name, .focus-participant-name, .speaker-strip-name, .fullscreen-peer-name) {
  color: #f4f6fb !important;
}
body.light-theme :is(.peer-card.speaking:not(.muted), .focus-participant-item.speaking, .speaker-strip-item.active, .fullscreen-peer-item.speaking) {
  border-color: var(--sc-v2-accent) !important;
}
body.light-theme .media-workspace { background: var(--sc-v2-bg-content) !important; }
body.light-theme .call-controls { background: rgba(250, 251, 252, .96) !important; border-color: rgba(23, 33, 61, .08) !important; }
body.light-theme .control-btn:not(.is-active):not(.is-muted):not(.btn-danger):not(.active-state) { background: #e3e7ed !important; }
body.light-theme .chat-context-menu,
body.light-theme .messenger-context-menu,
body.light-theme .ctx-sub-panel,
body.light-theme .status-menu { box-shadow: 0 8px 22px rgba(23, 33, 61, .14) !important; }
body.light-theme .messenger-edit-bar button:hover { background: rgba(23, 33, 61, .06); }

/* In-call sidebar: tabs become a proper header row on the left, content below it. */
.sidebar-right .sidebar-right-tabs {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 52px 0 14px !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--ui-hairline) !important;
  border-radius: 0 !important;
  background: var(--sc-v2-bg-sidebar) !important;
}
.sidebar-right .sidebar-right-tabs .tab-btn { flex: 0 0 auto !important; width: auto !important; padding: 0 10px !important; height: 52px !important; }
.sidebar-right .sidebar-right-content { top: 52px !important; }

/* Friend-requests banner: neutral row, not a glowing blue box. */
.messenger-requests-notice {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--sc-v2-bg-control) !important;
  color: var(--sc-v2-text-primary) !important;
  font-weight: 600;
  text-align: left;
}
.messenger-requests-notice:hover { filter: none !important; background: color-mix(in srgb, var(--sc-v2-bg-control) 80%, var(--sc-v2-text-primary)) !important; }