/* @choob-module: element-brand-skin — фирменный слой Choob поверх Element Web
   Подключается ПОСЛЕ choob-theme.css. Здесь только брендинг: типографика,
   логотип, экран входа, зачистка внешних отсылок к Element/Matrix.
   Цвета/поверхности задаёт choob-theme.css — тут их не переопределяем. */

/* ---------- шрифты ---------- */
@font-face{font-family:'Unbounded';src:url('fonts/Unbounded-Cyrillic.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F}
@font-face{font-family:'Unbounded';src:url('fonts/Unbounded-CyrillicExt.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C88}
@font-face{font-family:'Unbounded';src:url('fonts/Unbounded-Bold.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF}

/* ---------- типографика: заголовки — Unbounded ---------- */
.mx_Dialog h1,.mx_Dialog h2,.mx_Dialog_title,
[role="dialog"] h1,[role="dialog"] h2,
.mx_AuthBody h1,.mx_AuthBody h2,
.mx_SettingsTab_heading,.mx_SettingsSubsection_heading,
.mx_TabbedView_maskedBackground > h2,
.mx_HomePage h1,.mx_EncryptionCard_header h2,
h1.cpd-typography,h2.cpd-typography{
  font-family:'Unbounded',Inter,sans-serif!important;
  font-weight:700!important;letter-spacing:-.02em;
}

/* ---------- экран входа / регистрации ---------- */
.mx_AuthPage{
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(242,193,78,.10), transparent 62%),
    #08080c!important;
}
.mx_AuthPage_modal{
  border:1px solid rgba(242,193,78,.18)!important;
  border-radius:22px!important;
  box-shadow:0 34px 90px -24px rgba(0,0,0,.85),0 0 70px -26px rgba(242,193,78,.22)!important;
  overflow:hidden;
}
.mx_AuthHeaderLogo{background:transparent!important}
.mx_AuthHeaderLogo img{max-width:150px;filter:drop-shadow(0 6px 20px rgba(242,193,78,.32))}
.mx_AuthFooter a{color:#F2C14E!important;opacity:.85}
.mx_AuthFooter a:hover{opacity:1}

/* ---------- фирменный знак над списком комнат ---------- */
.mx_SpacePanel::before{
  content:"";display:block;flex:0 0 auto;
  width:34px;height:34px;margin:14px auto 6px;
  background:url('logo.svg') center/contain no-repeat;
  filter:drop-shadow(0 4px 14px rgba(242,193,78,.35));
}

/* ---------- пустые состояния / домашний экран ---------- */
.mx_HomePage_default_wrapper,.mx_HomePage_default_buttons{display:none!important}
.mx_EmbeddedPage{background:transparent!important;max-width:none!important;padding:0!important}
.mx_EmbeddedPage_body{max-width:none!important}

/* ---------- зачистка отсылок к Element / Matrix ---------- */
a[href*="element.io"],a[href*="matrix.org"],a[href*="github.com/element-hq"],
a[href*="element-hq/element-web"],a[href*="matrix.to/#/#element"]{display:none!important}
.mx_HelpUserSettingsTab_versions,.mx_HelpUserSettingsTab_link[href*="element.io"]{display:none!important}
/* тост «поставьте мобильное приложение Element» */
.mx_MobileGuideToast{display:none!important}

/* ---------- аватары: тёплая гамма Choob вместо синего/зелёного Element ---------- */
:root,body,.cpd-theme-dark,.cpd-theme-light{
  --cpd-color-bg-decorative-1:rgba(242,193,78,.22); --cpd-color-text-decorative-1:#F2C14E;
  --cpd-color-bg-decorative-2:rgba(247,213,115,.22); --cpd-color-text-decorative-2:#F7D573;
  --cpd-color-bg-decorative-3:rgba(224,169,59,.22);  --cpd-color-text-decorative-3:#E0A93B;
  --cpd-color-bg-decorative-4:rgba(192,196,206,.22); --cpd-color-text-decorative-4:#C0C4CE;
  --cpd-color-bg-decorative-5:rgba(232,234,240,.20); --cpd-color-text-decorative-5:#E8EAF0;
  --cpd-color-bg-decorative-6:rgba(155,161,174,.22); --cpd-color-text-decorative-6:#9BA1AE;
}

/* ---------- тосты (звуки/уведомления) — тёмные, а не белые ---------- */
.mx_ToastContainer,.mx_ToastContainer>*,.mx_LegacyToast,
.mx_Toast_toast,.mx_Toast_toast.mx_Toast_info,.mx_Toast_toast.mx_Toast_hasIcon{
  background-color:#12121a!important;color:#F4F2EE!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;
}
.mx_Toast_toast h2,.mx_Toast_title,.mx_Toast_body,.mx_Toast_description{color:#F4F2EE!important}
.mx_Toast_toast .mx_AccessibleButton_kind_primary{background:linear-gradient(180deg,#F7D573,#F2C14E)!important;color:#0a0a0f!important}

/* ---------- мелкая полировка ---------- */
.mx_AccessibleButton_kind_primary,button.cpd-button[data-kind="primary"]{font-weight:600}
::selection{background:rgba(242,193,78,.28)}
:focus-visible{outline-color:#F2C14E!important}

/* ---------- МОБИЛЬНЫЙ РЕЖИМ (телефон / PWA) ----------
   Element Web ужимает три колонки в узкий экран — на телефоне читать невозможно.
   Делаем один столбец: виден список чатов; открыт чат — виден только чат (:has). */
@media (max-width:600px){
  .mx_SpacePanel{display:none!important}
  /* На телефоне — привычный паттерн мессенджера: сначала список чатов на весь экран.
     Приветственный экран (home.html) остаётся десктопным. */
  .mx_HomePage{display:none!important}
  /* ширину списка Element держит inline-стилем на wrapper'е — перекрываем */
  .mx_LeftPanel_wrapper--user{width:100%!important;max-width:none!important;flex:1 1 auto!important}
  .mx_LeftPanel_outerWrapper,.mx_LeftPanel_wrapper{width:100%!important;max-width:none!important;flex:1 1 auto!important}
  .mx_LeftPanel{width:100%!important;min-width:0!important;max-width:none!important;flex:1 1 auto!important}
  .mx_ResizeHandle{display:none!important}
  .mx_MatrixChat:has(.mx_RoomView) .mx_LeftPanel{display:none!important}
  .mx_RoomView{width:100%!important;min-width:0!important;flex:1 1 auto!important}
  /* тач-цели ≥44px — стандарт Choob AUTH-UX */
  .mx_RoomTile,.mx_AccessibleButton{min-height:44px}
  /* диалоги во весь экран, без микрополей */
  [role="dialog"],.mx_Dialog{max-width:96vw!important;width:96vw!important;border-radius:14px!important}
  /* карточка входа — по ширине экрана */
  .mx_AuthPage_modal{width:94vw!important;max-width:94vw!important}
}