@layer tokens {
:root {
  --comp-btn-send-color: #fff;
  --comp-btn-send-border: 1px solid rgba(255, 255, 255, .48);
  --comp-btn-send-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 4px 12px var(--ref-glass-shadow);
  --comp-login-card-before-bg: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 38%);
  --comp-logo-small-color: #fff;
  --comp-logo-small-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px var(--ref-glass-shadow);
  --comp-glass-bubble-filter: blur(4px) saturate(110%);
  --comp-glass-bubble-shadow: var(--sys-elevation-1);
  --comp-glass-bubble-own-solid: var(--sys-bg-high);
  --comp-glass-bubble-other-solid: var(--sys-bg-raised);
  --comp-glass-rim: none;
  --comp-glass-optical-filter: none;
}
}

/* Glass material (liquid-glass and liquid-pearl in theme-catalog.js): translucent
   surfaces with edge refraction, rim light and wide curves. Text stays sharp.
   Any theme with material: 'glass' gets it. Its palette
   comes from the theme tokens (--sys-* and the --ref-glass-* surfaces). Before the
   theme script runs, an unset data-material shows glass, like the default theme. */
@layer materials {
/* One continuous backdrop goes behind the glass, including inside the chat. */
:root:is(:not([data-material]), [data-material="glass"]) :is(.chat-screen, .login-screen) {
  background: var(--ref-glass-scene);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:root[data-material="glass"] :is(.chat-bg-orbs, .login-bg-orbs) {
  background: repeating-linear-gradient(117deg, var(--ref-glass-texture) 0 .7px, transparent .7px 3px),
    repeating-linear-gradient(23deg, transparent 0 3px, var(--ref-glass-texture) 3px 3.6px);
  opacity: 1;
}
:root[data-material="glass"] :is(.chat-bg-orbs, .login-bg-orbs) .orb {
  display: none;
}
:root[data-material="glass"] .chat-screen {
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
:root[data-material="glass"] .chat-body {
  gap: 12px;
}
:root[data-material="glass"] :is(.chat-header, .sidebar, .conversation-heading, .input-bar) {
  background: var(--sys-surface-shell);
  border: 1px solid var(--sys-border);
  border-radius: 24px;
  box-shadow: var(--sys-elevation-2);
  -webkit-backdrop-filter: var(--sys-refraction-subtle);
  backdrop-filter: var(--sys-refraction-subtle);
}
:root[data-material="glass"] .chat-header {
  padding: 0 18px;
  min-height: 64px;
}
:root[data-material="glass"] .sidebar {
  border-radius: 24px;
}
:root[data-material="glass"] .conversation {
  background: transparent;
  border-radius: 24px;
}
:root[data-material="glass"] .conversation-heading {
  padding: 14px 20px;
  min-height: 70px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
:root[data-material="glass"] .input-bar {
  min-height: 76px;
  padding: 12px 16px;
  margin-top: 8px;
  border-radius: 26px;
}
:root[data-material="glass"] .typing-indicator {
  background: transparent;
  padding: 6px 16px;
}
:root[data-material="glass"] .cloud-chat #notice {
  background: transparent;
  padding: 6px 16px 0;
}
:root[data-material="glass"] :is(.message-input, .cloud-input, .form-group input) {
  background: var(--ref-glass-input);
  border: 1px solid var(--sys-border);
  border-radius: 16px;
  box-shadow: var(--sys-elevation-1);
  color: var(--sys-on-surface);
}
:root[data-material="glass"] :is(.message-input, .cloud-input, .form-group input)::placeholder {
  color: var(--sys-on-surface-muted);
  opacity: 1;
}
:root[data-material="glass"] .message-input {
  border-radius: 20px;
}
:root[data-material="glass"] :is(.btn-send, .btn-enter, .cloud-button.primary) {
  background: var(--sys-accent-gradient);
  color: var(--comp-btn-send-color);
  border: var(--comp-btn-send-border);
  border-radius: 16px;
  box-shadow: var(--comp-btn-send-shadow);
}
:root[data-material="glass"] :is(.btn-header, .btn-action, .btn-create-group, .btn-scroll-bottom) {
  border-radius: 50%;
}
:root[data-material="glass"] .btn-header:hover {
  background: var(--sys-surface-hover);
  color: var(--sys-on-surface);
}
:root[data-material="glass"] :is(.connection-status, .group-item, .conversation-tools summary) {
  border-radius: 18px;
}
:root[data-material="glass"] .group-item[aria-current="page"] {
  background: var(--comp-bubble-own-bg);
  box-shadow: var(--sys-elevation-1);
  border-color: var(--comp-bubble-own-border);
}
:root[data-material="glass"] .group-item.active {
  background: var(--comp-bubble-own-bg);
  border-color: var(--comp-bubble-own-border);
}
:root[data-material="glass"] .message-bubble {
  -webkit-backdrop-filter: var(--comp-glass-bubble-filter);
  backdrop-filter: var(--comp-glass-bubble-filter);
  border-radius: 20px;
  box-shadow: var(--comp-glass-bubble-shadow);
}
/* The rim is decoration; neither opacity nor a filter is put on message text. */
:root[data-material="glass"] .message-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--comp-glass-rim);
  pointer-events: none;
}
:root[data-material="glass"] .message-bubble > :not(.message-actions) {
  position: relative;
}
:root[data-material="glass"] .bubble-own {
  background: var(--comp-bubble-own-bg);
  border-color: var(--comp-bubble-own-border);
  border-bottom-right-radius: 7px;
}
:root[data-material="glass"] .bubble-other {
  background: var(--comp-bubble-other-bg);
  border-color: var(--comp-bubble-other-border);
  border-bottom-left-radius: 7px;
}
:root[data-material="glass"] .message-text {
  color: var(--sys-on-surface);
}
:root[data-material="glass"] .message-user {
  color: var(--sys-accent) !important;
}
:root[data-material="glass"] .message-link {
  color: var(--sys-accent);
}
:root[data-material="glass"] :is(.message-reply-reference, .message-mention, .poll-option, .voice-message) {
  color: var(--sys-on-surface);
  background: var(--ref-glass-input);
  border-color: var(--comp-bubble-own-border);
}
:root[data-material="glass"] .voice-play {
  background: var(--sys-accent-strong);
}
/* Menus use a thicker material; the default remains legible without blur. */
:root[data-material="glass"] :is(.group-modal-card, .cloud-dialog, .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form) {
  background: var(--sys-surface-plate);
  border-color: var(--sys-border-strong);
  border-radius: 20px;
  color: var(--sys-on-surface);
  box-shadow: var(--sys-elevation-2);
}
:root[data-material="glass"] .cloud-chat .message-actions {
  border-radius: 16px;
}
:root[data-material="glass"] .login-card {
  background: var(--sys-surface-shell);
  -webkit-backdrop-filter: var(--sys-refraction);
  backdrop-filter: var(--sys-refraction);
  border-radius: 28px;
  box-shadow: var(--sys-elevation-2);
}
:root[data-material="glass"] .login-card::before {
  background: var(--comp-login-card-before-bg);
}
:root[data-material="glass"] :is(.logo-small, .logo-icon) {
  color: var(--comp-logo-small-color);
  background: var(--sys-accent-gradient);
  box-shadow: var(--comp-logo-small-shadow);
}
:root[data-material="glass"] :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--sys-accent);
  outline-offset: 3px;
}
:root[data-material="glass"] :is(.btn-header, .btn-action, .btn-send, .cloud-button, .conversation-tools summary) {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--sys-ease-out);
}
:root[data-material="glass"] :is(.btn-header, .btn-action, .btn-send, .cloud-button):active:not(:disabled) {
  transform: scale(.96);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root[data-material="glass"] :is(.group-modal-card, .cloud-dialog, .message-actions, .message-more-menu, .expressions, .account-menu-panel, .header-menu.open, .conversation-tools form) {
    background: var(--ref-glass-regular);
    -webkit-backdrop-filter: var(--sys-refraction);
    backdrop-filter: var(--sys-refraction);
  }
}
@media (max-width: 1000px) {
:root[data-material="glass"] .cloud-chat .input-bar {
    padding: 10px 12px;
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .chat-screen {
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .chat-body {
    gap: 0;
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .chat-header {
    min-height: 56px;
    height: 56px;
    padding: 0 10px;
    border-radius: 22px;
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .sidebar {
    background: var(--ref-glass-regular);
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .conversation-heading {
    min-height: 62px;
    padding: 10px 14px;
    border-radius: 22px;
  }
}
@media (max-width: 768px) {
:root[data-material="glass"] .input-bar {
    border-radius: 24px;
    padding: 10px;
  }
}
@media (max-width: 760px) {
:root[data-material="glass"] .cloud-chat .sidebar {
    box-shadow: var(--sys-elevation-2), 14px 0 32px var(--ref-glass-shadow);
  }
}
@media (max-width: 760px) {
:root[data-material="glass"] .cloud-chat .input-bar {
    padding-bottom: 10px;
  }
}
@media (max-width: 760px) {
:root[data-material="glass"].keyboard-open .chat-screen {
    padding-bottom: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
:root[data-material="glass"] *,
:root[data-material="glass"] *::before,
:root[data-material="glass"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Keep this after every portable surface rule, including the login card.
   glass-optics.js adds the attribute only after its map image has loaded. */
:root[data-material="glass"] [data-glass-lens] {
  -webkit-backdrop-filter: var(--comp-glass-optical-filter);
  backdrop-filter: var(--comp-glass-optical-filter);
}
}