@import url("./tokens.css");

/* Built against Element Web 1.12.33; retain its layout and interaction semantics. */
:root {
  --font-family: var(--font-ui);
  --cpd-font-family-sans: var(--font-ui);
}

body:is(.cpd-theme-light, .cpd-theme-dark) {
  --font-family: var(--font-ui);
  --cpd-font-family-sans: var(--font-ui);
  --cpd-color-text-primary: var(--color-text);
  --cpd-color-text-secondary: var(--color-text-muted);
  --cpd-color-text-link-external: var(--color-action);
  --cpd-color-text-link-primary: var(--color-action);
  --cpd-color-text-action-accent: var(--color-action);
  --cpd-color-text-on-solid-primary: var(--color-on-action);
  --cpd-color-text-success-primary: var(--color-success);
  --cpd-color-text-critical-primary: var(--color-danger);
  --cpd-color-icon-primary: var(--color-text);
  --cpd-color-icon-secondary: var(--color-text-muted);
  --cpd-color-icon-tertiary: var(--color-text-muted);
  --cpd-color-icon-accent-primary: var(--color-action);
  --cpd-color-icon-accent-secondary: var(--color-action);
  --cpd-color-icon-accent-tertiary: var(--color-action);
  --cpd-color-icon-on-solid-primary: var(--color-on-action);
  --cpd-color-icon-success-primary: var(--color-success);
  --cpd-color-bg-canvas-default: var(--color-surface);
  --cpd-color-bg-canvas-disabled: var(--color-surface-subtle);
  --cpd-color-bg-subtle-primary: var(--color-surface-subtle);
  --cpd-color-bg-subtle-secondary: var(--color-surface-subtle);
  --cpd-color-bg-action-primary-rest: var(--color-action);
  --cpd-color-bg-action-primary-hovered: var(--color-action-hover);
  --cpd-color-bg-action-primary-pressed: var(--color-action-hover);
  --cpd-color-bg-action-secondary-rest: var(--color-surface);
  --cpd-color-bg-action-secondary-hovered: var(--color-surface-subtle);
  --cpd-color-bg-action-secondary-pressed: var(--color-surface-subtle);
  --cpd-color-bg-action-tertiary-hovered: var(--color-surface-subtle);
  --cpd-color-bg-action-tertiary-selected: var(--color-selected);
  --cpd-color-bg-action-tertiary-pressed: var(--color-selected);
  --cpd-color-bg-accent-rest: var(--color-action);
  --cpd-color-bg-accent-hovered: var(--color-action-hover);
  --cpd-color-bg-accent-pressed: var(--color-action-hover);
  --cpd-color-border-interactive-primary: var(--color-control-border);
  --cpd-color-border-interactive-secondary: var(--color-border);
  --cpd-color-border-interactive-hovered: var(--color-action);
  --cpd-color-border-focused: var(--color-focus);
  --cpd-color-border-interactive-selected: var(--color-action);
  --cpd-color-border-interactive-active: var(--color-action);
  --cpd-color-theme-bg: var(--color-surface);
  color-scheme: light;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-ui);
}

body:is(.cpd-theme-dark, .cpd-theme-dark-hc) { color-scheme: dark; }

/* A dark navigation context works in both light and dark conversation themes. */
body:is(.cpd-theme-light, .cpd-theme-dark) :is(.mx_LeftPanel, .mx_SpacePanel, .mx_AuthHeader) {
  --cpd-color-bg-canvas-default: #172a35;
  --cpd-color-bg-subtle-primary: #263b45;
  --cpd-color-bg-subtle-secondary: #263b45;
  --cpd-color-bg-action-primary-rest: #ff9676;
  --cpd-color-bg-action-primary-hovered: #ffb49d;
  --cpd-color-bg-action-primary-pressed: #ffb49d;
  --cpd-color-bg-action-secondary-rest: #172a35;
  --cpd-color-bg-action-secondary-hovered: #30434c;
  --cpd-color-bg-action-secondary-pressed: #30434c;
  --cpd-color-bg-action-tertiary-hovered: #263b45;
  --cpd-color-bg-action-tertiary-selected: #30434c;
  --cpd-color-bg-action-tertiary-pressed: #30434c;
  --cpd-color-bg-accent-rest: #ff9676;
  --cpd-color-bg-accent-hovered: #ffb49d;
  --cpd-color-text-primary: #edf3f3;
  --cpd-color-text-secondary: #a4b7bf;
  --cpd-color-text-disabled: #8299a3;
  --cpd-color-text-action-accent: #ff9676;
  --cpd-color-text-link-external: #ff9676;
  --cpd-color-text-on-solid-primary: #172a35;
  --cpd-color-icon-primary: #edf3f3;
  --cpd-color-icon-secondary: #a4b7bf;
  --cpd-color-icon-tertiary: #a4b7bf;
  --cpd-color-icon-accent-primary: #ff9676;
  --cpd-color-icon-accent-secondary: #ff9676;
  --cpd-color-icon-accent-tertiary: #ff9676;
  --cpd-color-icon-on-solid-primary: #172a35;
  --cpd-color-border-interactive-primary: #8299a3;
  --cpd-color-border-interactive-secondary: #3b515d;
  --cpd-color-border-focused: #ff9676;
  --activeBackground-color: #30434c;
  --activeBorder-color: #ff9676;
  background-color: #172a35;
  color: #edf3f3;
}

.mx_LeftPanel_roomListContainer, .mx_RoomListPanel {
  background-color: var(--cpd-color-bg-canvas-default);
  color: var(--cpd-color-text-primary);
}

body:is(.cpd-theme-light, .cpd-theme-dark) .mx_SpacePanel {
  background-color: #101e27;
  border-right-color: #30434c;
}

.mx_SpacePanel::before {
  content: "";
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 16px auto 8px;
  border-radius: 10px;
  background: #172a35 url("./assets/mark-dark.png") center / cover no-repeat;
}

body:is(.cpd-theme-light, .cpd-theme-dark) .mx_SpacePanel .mx_SpaceButton_name {
  color: var(--cpd-color-text-primary);
}

body:is(.cpd-theme-light, .cpd-theme-dark) .mx_SpaceButton_toggleCollapse svg {
  color: var(--cpd-color-icon-secondary);
}

.mx_RoomHeader {
  background: var(--cpd-color-bg-canvas-default);
  border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
}

.mx_RoomHeader_heading { font-weight: 600; letter-spacing: -.025em; }
.mx_RightPanel { background: var(--cpd-color-bg-subtle-primary); }

.mx_MessageComposer_wrapper {
  border: 1px solid var(--cpd-color-border-interactive-primary);
  border-radius: 12px;
  margin: 12px 16px 16px;
  padding-block: 6px;
  background: var(--cpd-color-bg-canvas-default);
}

.mx_MessageComposer_wrapper:focus-within { border-color: var(--cpd-color-border-focused); }
.mx_EventTile_content { line-height: 1.5; }
.mx_AccessibleButton_kind_primary, .mx_AccessibleButton_kind_secondary { border-radius: 8px; }

.mx_AuthPage { background-color: var(--cpd-color-bg-subtle-primary); }
.mx_AuthPage_modal {
  width: min(800px, calc(100% - 32px));
  border-radius: 16px;
  border: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_AuthPage_modalContent { width: 100%; overflow: hidden; }
.mx_AuthPage_modal.mx_AuthPage_modal_withBlur { box-shadow: 0 16px 56px #172a3512; }
.mx_AuthHeader { width: 34%; padding: 32px 24px; flex-shrink: 0; }
.mx_AuthHeaderLogo { padding: 0; margin-top: 16px; }
.mx_AuthHeaderLogo img { width: 100%; border-radius: 8px; }
.mx_AuthHeader .mx_AuthBody_language :is(.mx_Dropdown_input, .mx_Dropdown_arrow) {
  color: var(--cpd-color-text-primary);
}
.mx_AuthHeaderLogo::after {
  content: "Есть контакт.\AЕсть движение.";
  display: block;
  white-space: pre-line;
  font: 600 24px/1.2 var(--font-ui);
  letter-spacing: -.045em;
  margin-top: 24px;
}
.mx_AuthBody { width: 66%; padding: 32px 40px; border-radius: 0 16px 16px 0; }
.mx_AuthBody h1 { letter-spacing: -.04em; }
.mx_AuthFooter a { color: #a4b7bf; }

/* EmbeddedPage sanitizes classes and IDs from the supplied HTML. Scope to its own wrapper. */
.mx_HomePage_body > div {
  box-sizing: border-box;
  min-height: 100%;
  max-width: 960px;
  padding: clamp(32px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cpd-color-text-primary);
  font-family: var(--font-ui);
}
.mx_HomePage_body img { width: 100px; height: 100px; border-radius: 22px; margin-bottom: 32px; }
.mx_HomePage_body img[src$="/mark-dark.png"] { display: none; }
body:is(.cpd-theme-dark, .cpd-theme-dark-hc) .mx_HomePage_body img[src$="/mark-light.png"] { display: none; }
body:is(.cpd-theme-dark, .cpd-theme-dark-hc) .mx_HomePage_body img[src$="/mark-dark.png"] { display: block; }
.mx_HomePage_body > div > p:first-of-type { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cpd-color-text-secondary); margin: 0 0 20px; }
.mx_HomePage_body > div h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.12; letter-spacing: -.055em; font-weight: 600; margin: 0 0 24px; }
.mx_HomePage_body > div h1 span { color: var(--cpd-color-text-action-accent); }
.mx_HomePage_body > div > p:nth-of-type(2) { max-width: 470px; color: var(--cpd-color-text-secondary); font-size: 16px; line-height: 1.65; margin: 0 0 32px; }
.mx_HomePage_body > div > div { display: flex; gap: 12px; flex-wrap: wrap; }
.mx_HomePage_body > div > div a { padding: 12px 18px; border-radius: 8px; border: 1px solid var(--cpd-color-border-interactive-primary); color: var(--cpd-color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500; }
.mx_HomePage_body > div > div a:first-child { background: var(--cpd-color-bg-action-primary-rest); color: var(--cpd-color-text-on-solid-primary); border-color: transparent; }
.mx_HomePage_body > div > div a:first-child:hover { background: var(--cpd-color-bg-action-primary-hovered); }
.mx_HomePage_body > div > div a:focus-visible { outline: 3px solid var(--cpd-color-border-focused); outline-offset: 3px; }
.mx_HomePage_body > div > p:last-of-type { margin-top: 40px; color: var(--cpd-color-text-secondary); font-size: 12px; }

@media (max-width: 600px) {
  .mx_AuthHeader { width: 29%; padding: 24px 12px; }
  .mx_AuthHeaderLogo::after { font-size: 18px; }
  .mx_AuthBody { width: 71%; padding: 24px; }
  .mx_MessageComposer_wrapper { margin: 8px; }
}
@media (max-width: 480px) {
  .mx_AuthPage_modal { margin-block: 16px; }
  .mx_AuthBody { width: 100%; border-radius: 16px; }
}