/* GapTalk materials over the original Stoat layout. Values: brand/tokens.json. */
@import url("./tokens.css");
@import url("./fonts.css");
@font-face {
  font-family: "Manrope";
  src: url("./assets/Manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
html { background: var(--gap-color-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html:has(body[data-gap-mode="light"]) { background: var(--gap-palette-pearl); }
body { font-family: var(--fonts-primary, var(--gap-font)); font-weight: var(--gap-type-weight-body-ui); letter-spacing: var(--gap-type-tracking-body); }
body[data-gap-default-font] { --fonts-primary: var(--gap-font-ui) !important; }
body[data-gap-default-font] :is([data-gap-brand-tagline], [data-gap-auth-title], .app_body main h1, .app_body main h2) {
  font-family: var(--gap-font-display);
  font-weight: var(--gap-type-weight-heading-ui);
}

/* Native surfaces and text use one neutral palette in both HEX and MDUI RGB.
   Accent, errors and presence retain their separate semantic roles. */
body[data-gap-mode] {
  --md-sys-color-surface: var(--gap-color-chat-solid) !important;
  --md-sys-color-surface-dim: var(--gap-color-canvas) !important;
  --md-sys-color-surface-bright: var(--gap-color-elevated-solid) !important;
  --md-sys-color-surface-container-lowest: var(--gap-color-chat-solid) !important;
  --md-sys-color-surface-container-low: var(--gap-color-panel-solid) !important;
  --md-sys-color-surface-container: var(--gap-color-panel-solid) !important;
  --md-sys-color-surface-container-high: var(--gap-color-elevated-solid) !important;
  --md-sys-color-surface-container-highest: var(--gap-color-elevated-solid) !important;
  --md-sys-color-on-surface: var(--gap-color-text) !important;
  --md-sys-color-on-surface-variant: var(--gap-color-muted) !important;
  /* Stoat also uses outline for MenuButton labels, timestamps and captions.
     Decorative borders use gap-color-rim; this native role must remain text-readable. */
  --md-sys-color-outline: var(--gap-color-muted) !important;
  --md-sys-color-outline-variant: var(--gap-color-muted) !important;
  --md-sys-color-inverse-surface: var(--gap-color-panel-solid) !important;
  --md-sys-color-inverse-on-surface: var(--gap-color-text) !important;
  --mdui-color-surface: var(--gap-rgb-chat-solid) !important;
  --mdui-color-surface-dim: var(--gap-rgb-canvas) !important;
  --mdui-color-surface-bright: var(--gap-rgb-elevated-solid) !important;
  --mdui-color-surface-container-lowest: var(--gap-rgb-chat-solid) !important;
  --mdui-color-surface-container-low: var(--gap-rgb-panel-solid) !important;
  --mdui-color-surface-container: var(--gap-rgb-panel-solid) !important;
  --mdui-color-surface-container-high: var(--gap-rgb-elevated-solid) !important;
  --mdui-color-surface-container-highest: var(--gap-rgb-elevated-solid) !important;
  --mdui-color-on-surface: var(--gap-rgb-text) !important;
  --mdui-color-on-surface-variant: var(--gap-rgb-muted) !important;
  --mdui-color-outline: var(--gap-rgb-muted) !important;
  --mdui-color-outline-variant: var(--gap-rgb-muted) !important;
  --mdui-color-inverse-surface: var(--gap-rgb-panel-solid) !important;
  --mdui-color-inverse-on-surface: var(--gap-rgb-text) !important;
}
body:not([data-gap-default-accent="true"]) {
  --gap-color-action: var(--md-sys-color-primary, var(--gap-blue));
  --gap-color-on-action: var(--md-sys-color-on-primary, var(--gap-on-accent));
  --gap-color-action-container: var(--md-sys-color-primary-container, var(--gap-color-action-container-default));
  --gap-color-on-action-container: var(--md-sys-color-on-primary-container, var(--gap-color-on-action-container-default));
  --gap-color-focus: var(--md-sys-color-primary, var(--gap-color-link));
}
body[data-gap-default-accent="true"] {
  --md-sys-color-primary: var(--gap-blue) !important;
  --md-sys-color-on-primary: var(--gap-on-accent) !important;
  --md-sys-color-primary-container: var(--gap-color-action-container-default) !important;
  --md-sys-color-on-primary-container: var(--gap-color-on-action-container-default) !important;
  --md-sys-color-secondary-container: var(--gap-color-action-container-default) !important;
  --md-sys-color-on-secondary-container: var(--gap-color-on-action-container-default) !important;
  --mdui-color-primary: var(--gap-rgb-blue) !important;
  --mdui-color-on-primary: var(--gap-rgb-white) !important;
  --mdui-color-primary-container: var(--gap-rgb-action-container-default) !important;
  --mdui-color-on-primary-container: var(--gap-rgb-on-action-container-default) !important;
  --mdui-color-secondary-container: var(--gap-rgb-action-container-default) !important;
  --mdui-color-on-secondary-container: var(--gap-rgb-on-action-container-default) !important;
}

#root {
  background-color: var(--gap-color-canvas) !important;
  background: radial-gradient(ellipse at 0% 0%, var(--gap-color-canvas-glow), transparent 68%), var(--gap-color-canvas) !important;
  color: var(--gap-color-text);
}
#root > div:has(.app_body), .app_root, .app_root > div:has(> .app_body),
body[data-gap-auth] #root > div, .main_bar { background: transparent !important; }

/* CategorySection in ServerSidebar uses surface-container-low. Let navigation's
   single material show through instead of nesting another solid card. */
.channel_bar {
  --md-sys-color-surface-container-low: transparent;
  background: var(--gap-material-chrome-sheen), var(--gap-material-chrome-background) !important;
  border: var(--gap-border-width) solid var(--gap-color-rim);
  box-shadow: var(--gap-material-chrome-shadow);
  backdrop-filter: var(--gap-material-chrome-filter);
  -webkit-backdrop-filter: var(--gap-material-chrome-filter);
}
.app_body { background: transparent !important; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* TextChannel's route wrapper contains Header then Content(main, sidebar).
   Match that sibling relationship inside app_body without a fixed wrapper depth. */
.app_body div:has(+ div > main) {
  background: var(--gap-material-chrome-sheen), var(--gap-material-chrome-background) !important;
  border: var(--gap-border-width) solid var(--gap-color-rim);
  box-shadow: var(--gap-shadow-inset);
  backdrop-filter: var(--gap-material-chrome-filter);
  -webkit-backdrop-filter: var(--gap-material-chrome-filter);
}
.app_body main { background: var(--gap-color-chat-solid) !important; border: 0; box-shadow: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.app_body main + div { background: transparent !important; border-inline-start: var(--gap-border-width) solid var(--gap-color-rim); border-radius: 0 !important; }

/* Breakpoints match the untouched client. */
@media (min-width: 960px) {
  .channel_bar {
    height: calc(100% - var(--gap-layout-gutter) * 2) !important;
    margin: var(--gap-layout-gutter) var(--gap-layout-gutter-inner) var(--gap-layout-gutter) 0;
    border-radius: var(--gap-radius-chrome) !important;
  }
  .app_body {
    height: calc(100% - var(--gap-layout-gutter) * 2) !important;
    margin: var(--gap-layout-gutter) var(--gap-layout-gutter) var(--gap-layout-gutter) var(--gap-layout-gutter-inner);
    border-radius: var(--gap-radius-chrome) !important;
  }
  .app_body div:has(+ div > main) { border-radius: var(--gap-radius-overlay); }
  .app_body main { border-radius: var(--gap-radius-content) !important; }
}

/* Text variants compile to classes; there is no literal .title. Keep their
   typography and the user's font/message size. Use medium weight for controls. */
body :is(mdui-button, mdui-button-icon, mdui-select, mdui-text-field, mdui-menu, mdui-menu-item, mdui-dialog, mdui-slider, mdui-checkbox, mdui-switch, mdui-radio) {
  font-family: var(--fonts-primary);
  letter-spacing: var(--gap-type-tracking-body);
}
.app_root button, .settings_overlay button { font-weight: var(--gap-type-weight-medium); }
.app_body main .cm-editor { font-family: var(--fonts-primary); font-size: var(--message-size, var(--gap-type-size-body)); line-height: var(--gap-type-leading-body); }
.app_body main .cm-editor .cm-scroller { font-family: inherit; font-size: inherit; line-height: inherit; }
body :is(mdui-text-field, mdui-select)::part(container) { border-radius: var(--gap-radius-control); background: var(--gap-color-field); }

/* Compact, deeper glass separates floating controls from content. */
body mdui-dialog::part(panel), #floating :is(mdui-menu, .dialog > div),
#floating div:has(> mdui-menu-item), #floating div:has(> a + a):has(> a > svg):has(> a > span) {
  background: var(--gap-material-overlay-sheen), var(--gap-material-overlay-background) !important;
  color: var(--gap-color-text);
  border: var(--gap-border-width) solid var(--gap-color-rim);
  border-radius: var(--gap-radius-overlay);
  box-shadow: var(--gap-material-overlay-shadow);
  backdrop-filter: var(--gap-material-overlay-filter);
  -webkit-backdrop-filter: var(--gap-material-overlay-filter);
}
#floating div:has(> a + a):has(> a > svg):has(> a > span) { padding: var(--gap-space-1-5); }
#floating div:has(> a + a):has(> a > svg):has(> a > span) > a, #floating mdui-menu-item { border-radius: var(--gap-radius-item); }
.settings_overlay {
  background: color-mix(in srgb, var(--gap-color-canvas) var(--gap-glass-opacity-overlay), transparent) !important;
  backdrop-filter: var(--gap-material-overlay-filter);
  -webkit-backdrop-filter: var(--gap-material-overlay-filter);
}
.settings_sidebar {
  background: var(--gap-material-chrome-sheen), var(--gap-material-chrome-background) !important;
  border-inline-end: var(--gap-border-width) solid var(--gap-color-rim);
}
.settings_overlay > :not(.settings_sidebar) { background-color: transparent !important; }
.settings_cont { font-family: var(--fonts-primary); }

/* Motion affects interactive chrome only, never messages or scrolling. */
.channel_bar a, .main_bar a, .settings_sidebar a, .app_root button, .settings_overlay button,
#floating mdui-menu-item, #floating div:has(> a + a):has(> a > svg):has(> a > span) > a,
body mdui-button::part(button), body mdui-button-icon::part(button) {
  transition: background-color var(--gap-motion-control), color var(--gap-motion-control), border-color var(--gap-motion-control), box-shadow var(--gap-motion-control), filter var(--gap-motion-control);
}
@media (hover: hover) {
  #floating mdui-menu-item:hover, #floating div:has(> a + a):has(> a > svg):has(> a > span) > a:hover { background: var(--gap-color-hover); }
  body :is(mdui-text-field, mdui-select):hover::part(container) { background: var(--gap-color-field-hover); }
}
.app_root button:active:not(:disabled), .settings_overlay button:active:not(:disabled) { filter: brightness(var(--gap-state-press-brightness)); }
#floating div:has(> a + a):has(> a > svg):has(> a > span) > a:active { background: var(--gap-color-pressed); }
.app_root :is(a, button, [role="button"]):focus-visible, .settings_overlay :is(a, button, [role="button"]):focus-visible,
#floating :is(a, button, mdui-menu-item):focus-visible {
  outline: var(--gap-focus-width) solid var(--gap-color-focus);
  outline-offset: var(--gap-focus-offset);
}
.app_root button:disabled, .settings_overlay button:disabled { opacity: var(--gap-state-opacity-disabled); }

/* These markers target product branding, not user content. */
[data-gap-unavailable="true"] { display: none !important; }
.gap-product-help {
  padding: var(--gap-space-6);
  border-radius: var(--gap-radius-panel);
  background: var(--gap-color-panel);
  color: var(--gap-color-text);
}
.gap-product-help h2 { margin: 0 0 var(--gap-space-4); font: inherit; font-weight: var(--gap-type-weight-heading-ui); }
.gap-product-help p { margin: 0 0 var(--gap-space-4); line-height: var(--gap-type-leading-body); }
.gap-product-help p:last-child { margin-bottom: 0; color: var(--gap-color-muted); }
[data-gap-brand-mark] {
  background: var(--gap-color-action);
  mask: url("./assets/mark-blue.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/mark-blue.svg") center / contain no-repeat;
}
[data-gap-brand-mark] > *, [data-gap-brand-wordmark] > * { visibility: hidden; }
[data-gap-brand-wordmark] {
  display: block;
  width: var(--gap-layout-wordmark-width) !important;
  height: var(--gap-layout-wordmark-height) !important;
  background: url("./assets/logo-on-dark.svg") center / contain no-repeat;
  color: transparent !important;
}
body[data-gap-mode="light"] [data-gap-brand-wordmark] { background-image: url("./assets/logo-on-light.svg"); }
[data-gap-brand-tagline] { white-space: pre-line; font-size: var(--gap-type-size-title); line-height: var(--gap-type-leading-heading); font-weight: var(--gap-type-weight-heading-ui); letter-spacing: var(--gap-type-tracking-heading); }
[data-gap-brand-description] { opacity: var(--gap-state-opacity-description) !important; line-height: var(--gap-type-leading-body); }
body[data-gap-auth] [data-gap-auth-card] {
  background: var(--gap-material-auth-sheen), var(--gap-material-auth-background) !important;
  border: var(--gap-border-width) solid var(--gap-color-rim);
  box-shadow: var(--gap-material-auth-shadow);
  backdrop-filter: var(--gap-material-auth-filter);
  -webkit-backdrop-filter: var(--gap-material-auth-filter);
  border-radius: var(--gap-radius-auth);
  max-width: var(--gap-layout-auth-width);
  max-height: none;
  width: min(var(--gap-layout-auth-width), 100%);
}
.gap-load-error { margin: var(--gap-layout-error-top) auto; max-width: var(--gap-layout-error-width); padding: var(--gap-space-8); font-family: var(--gap-font); color: var(--gap-color-text); }
.gap-load-error button { background: var(--gap-blue); color: var(--gap-on-accent); border: 0; padding: var(--gap-space-3) var(--gap-space-5); border-radius: var(--gap-radius-control); font: inherit; cursor: pointer; }

@media (max-width: 959px) {
  .channel_bar, .app_body { border-radius: 0 !important; border-width: 0; box-shadow: none; }
  .channel_bar { background: var(--gap-color-panel-solid) !important; }
  .app_body div:has(+ div > main) { border-width: 0; border-radius: 0; }
  .app_body main { border-radius: 0 !important; }
  .settings_overlay { background: var(--gap-color-canvas) !important; }
}

/* Material-level fallbacks also cover consumers in the separate auth styles. */
@supports not (backdrop-filter: blur(1px)) {
  body[data-gap-mode] {
    --gap-material-chrome-background: var(--gap-color-panel-solid);
    --gap-material-overlay-background: var(--gap-color-elevated-solid);
    --gap-material-auth-background: var(--gap-color-panel-solid);
  }
}
body[data-gap-blur="false"] {
  --gap-material-chrome-background: var(--gap-color-panel-solid);
  --gap-material-overlay-background: var(--gap-color-elevated-solid);
  --gap-material-auth-background: var(--gap-color-panel-solid);
  --gap-material-chrome-filter: none;
  --gap-material-overlay-filter: none;
  --gap-material-auth-filter: none;
}
body[data-gap-blur="false"] .settings_overlay { background: var(--gap-color-canvas) !important; }
@media (prefers-reduced-transparency: reduce) {
  body[data-gap-mode] {
    --gap-material-chrome-background: var(--gap-color-panel-solid);
    --gap-material-overlay-background: var(--gap-color-elevated-solid);
    --gap-material-auth-background: var(--gap-color-panel-solid);
    --gap-material-chrome-filter: none;
    --gap-material-overlay-filter: none;
    --gap-material-auth-filter: none;
  }
  .settings_overlay { background: var(--gap-color-canvas) !important; }
}
@media (prefers-reduced-motion: reduce) { body { --gap-motion-control: var(--gap-motion-duration-none); } }
@supports not (background: color-mix(in srgb, black, white)) {
  body[data-gap-mode] {
    --gap-material-chrome-background: var(--gap-color-panel-solid);
    --gap-material-overlay-background: var(--gap-color-elevated-solid);
    --gap-material-auth-background: var(--gap-color-panel-solid);
    --gap-material-chrome-sheen: none;
    --gap-material-overlay-sheen: none;
    --gap-material-auth-sheen: none;
    --gap-material-chrome-shadow: none;
    --gap-material-overlay-shadow: none;
    --gap-material-auth-shadow: none;
    --gap-color-rim: var(--gap-color-outline);
    --gap-color-field: var(--gap-color-panel-solid);
    --gap-color-field-hover: var(--gap-color-elevated-solid);
  }
}