/**
 * Hobbiz Material Design — global motion & interaction layer.
 * Loaded from layout on all pages (desktop + mobile).
 */

:root {
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-duration-short1: 50ms;
  --md-duration-short2: 100ms;
  --md-duration-short3: 150ms;
  --md-duration-short4: 200ms;
  --md-duration-medium1: 250ms;
  --md-duration-medium2: 300ms;
  --md-primary: var(--primary-color, #8A2BE2);
  --md-state-hover: rgba(138, 43, 226, 0.08);
  --md-state-focus: rgba(138, 43, 226, 0.12);
  --md-state-press: rgba(138, 43, 226, 0.16);
  --md-state-hover-on-primary: rgba(255, 255, 255, 0.12);
  --md-state-press-on-primary: rgba(255, 255, 255, 0.2);
  --md-elevation-1: 0 1px 2px rgba(45, 55, 72, 0.08), 0 1px 3px rgba(45, 55, 72, 0.06);
  --md-elevation-2: 0 2px 6px rgba(45, 55, 72, 0.12), 0 1px 4px rgba(45, 55, 72, 0.08);
  --md-elevation-3: 0 4px 12px rgba(45, 55, 72, 0.14), 0 2px 6px rgba(45, 55, 72, 0.1);
  --md-focus-ring: var(--focus-ring, 0 0 0 3px var(--primary-color-light, #E6D5FA));
}

/* Shared interactive target list (kept in sync with js/hobbiz-md.js) */
.md-interactive,
button:not(:disabled):not([aria-disabled="true"]):not(.no-md):not(.btn-close),
[type="button"]:not(:disabled):not(.no-md):not(.btn-close),
[type="submit"]:not(:disabled):not(.no-md),
[type="reset"]:not(:disabled):not(.no-md),
.btn:not(:disabled):not(.no-md):not(.btn-close),
a.btn:not(.no-md),
[role="button"]:not([aria-disabled="true"]):not(.no-md),
.hover-elevate:not(.no-md),
.active-elevate-2:not(.no-md),
.ch-tab:not(.no-md),
.ch-thread-link:not(.no-md),
.ch-back:not(.no-md),
.ch-member-item:not(.no-md),
.ch-search-hit:not(.no-md),
.ch-reaction:not(.no-md),
.ch-reaction-add:not(.no-md),
#appSidebar a:not(.no-md),
#appSidebar button:not(:disabled):not(.no-md),
.bottom-nav a:not(.no-md),
.bottom-nav button:not(:disabled):not(.no-md),
#notificationsBell:not(.no-md),
#voiceControlBtn:not(.no-md),
#appSidebarToggle:not(.no-md),
.dialogspage #tosendmessage,
.dialogspage #toattachinmessage,
.dialogspage #toreturntodialogs,
.dialogspage a:has(#toreturntodialogs),
.dialogspage #dialogoptionsmenu button,
.dialogspage .opendialogoptions,
.dialogspage #voiceControlBtnDialog,
.dialogspage #messageattachoptions li,
#msgContextMenu .msg-ctx-item,
.modal .btn:not(:disabled):not(.no-md),
.ch-modal .btn:not(:disabled):not(.no-md),
.nav-link:not(.no-md),
.tab:not(.no-md),
.dialog-tabs-scroll .tab:not(.no-md) {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--md-duration-short2) var(--md-ease-standard),
    box-shadow var(--md-duration-short3) var(--md-ease-standard),
    background-color var(--md-duration-short3) var(--md-ease-standard),
    color var(--md-duration-short3) var(--md-ease-standard),
    border-color var(--md-duration-short3) var(--md-ease-standard),
    opacity var(--md-duration-short2) var(--md-ease-standard);
}

/* State layer via ::after (does not fight existing backgrounds) */
.md-interactive::after,
button:not(:disabled):not([aria-disabled="true"]):not(.no-md):not(.btn-close)::after,
[type="button"]:not(:disabled):not(.no-md):not(.btn-close)::after,
[type="submit"]:not(:disabled):not(.no-md)::after,
[type="reset"]:not(:disabled):not(.no-md)::after,
.btn:not(:disabled):not(.no-md):not(.btn-close)::after,
a.btn:not(.no-md)::after,
[role="button"]:not([aria-disabled="true"]):not(.no-md)::after,
.hover-elevate:not(.no-md)::after,
.active-elevate-2:not(.no-md)::after,
.ch-tab:not(.no-md)::after,
.ch-thread-link:not(.no-md)::after,
#appSidebar a:not(.no-md)::after,
.bottom-nav a:not(.no-md)::after,
.bottom-nav button:not(:disabled):not(.no-md)::after,
#notificationsBell:not(.no-md)::after,
#voiceControlBtn:not(.no-md)::after,
#appSidebarToggle:not(.no-md)::after,
.dialogspage #tosendmessage::after,
.dialogspage #toattachinmessage::after,
.dialogspage #dialogoptionsmenu button::after,
.modal .btn:not(:disabled):not(.no-md):not(.btn-close)::after,
.ch-modal .btn:not(:disabled):not(.no-md):not(.btn-close)::after,
.nav-link:not(.no-md)::after,
.tab:not(.no-md)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  transition: background-color var(--md-duration-short2) var(--md-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .md-interactive:hover::after,
  button:not(:disabled):not(.no-md):not(.btn-close):hover::after,
  [type="button"]:not(:disabled):not(.no-md):hover::after,
  [type="submit"]:not(:disabled):not(.no-md):hover::after,
  .btn:not(:disabled):not(.no-md):not(.btn-close):hover::after,
  a.btn:not(.no-md):hover::after,
  [role="button"]:not(.no-md):hover::after,
  .hover-elevate:not(.no-md):hover::after,
  .active-elevate-2:not(.no-md):hover::after,
  .ch-tab:not(.no-md):hover::after,
  .ch-thread-link:not(.no-md):hover::after,
  #appSidebar a:not(.no-md):hover::after,
  .bottom-nav a:not(.no-md):hover::after,
  .bottom-nav button:not(:disabled):not(.no-md):not(.btn-close):hover::after,
  #notificationsBell:not(.no-md):hover::after,
  #voiceControlBtn:not(.no-md):hover::after,
  #appSidebarToggle:not(.no-md):hover::after,
  .dialogspage #tosendmessage:hover::after,
  .dialogspage #toattachinmessage:hover::after,
  .modal .btn:not(:disabled):not(.no-md):not(.btn-close):hover::after,
  .ch-modal .btn:not(:disabled):not(.no-md):not(.btn-close):hover::after,
  .nav-link:not(.no-md):hover::after,
  .tab:not(.no-md):hover::after {
    background: var(--md-state-hover);
  }

  .md-interactive:hover,
  button:not(:disabled):not(.no-md):not(.btn-close):hover,
  .btn:not(:disabled):not(.no-md):not(.btn-close):hover,
  a.btn:not(.no-md):hover,
  .hover-elevate:not(.no-md):hover,
  .active-elevate-2:not(.no-md):hover {
    box-shadow: var(--md-elevation-2);
  }

  /* Primary / filled surfaces: light state layer */
  .btn-primary:not(:disabled):not(.no-md):hover::after,
  [style*="background-color: #794ff8"]:hover::after,
  [style*="background-color:#794ff8"]:hover::after,
  .dialogspage #tosendmessage:hover::after,
  .dialogspage #toattachinmessage:hover::after {
    background: var(--md-state-hover-on-primary);
  }
}

.md-interactive:focus-visible,
button:not(:disabled):not(.no-md):not(.btn-close):focus-visible,
[type="button"]:not(:disabled):not(.no-md):focus-visible,
[type="submit"]:not(:disabled):not(.no-md):focus-visible,
.btn:not(:disabled):not(.no-md):not(.btn-close):focus-visible,
a.btn:not(.no-md):focus-visible,
[role="button"]:not(.no-md):focus-visible,
.hover-elevate:not(.no-md):focus-visible,
.active-elevate-2:not(.no-md):focus-visible,
#appSidebar a:not(.no-md):focus-visible,
.bottom-nav a:not(.no-md):focus-visible,
.nav-link:not(.no-md):focus-visible,
.tab:not(.no-md):focus-visible {
  outline: none;
  box-shadow: var(--md-focus-ring), var(--md-elevation-1);
}

.md-interactive:focus-visible::after,
button:not(:disabled):not(.no-md):not(.btn-close):focus-visible::after,
.btn:not(:disabled):not(.no-md):not(.btn-close):focus-visible::after,
a.btn:not(.no-md):focus-visible::after {
  background: var(--md-state-focus);
}

.md-interactive:active,
button:not(:disabled):not(.no-md):not(.btn-close):active,
[type="button"]:not(:disabled):not(.no-md):active,
[type="submit"]:not(:disabled):not(.no-md):active,
.btn:not(:disabled):not(.no-md):not(.btn-close):active,
a.btn:not(.no-md):active,
[role="button"]:not(.no-md):active,
.hover-elevate:not(.no-md):active,
.active-elevate-2:not(.no-md):active,
.ch-tab:not(.no-md):active,
.ch-thread-link:not(.no-md):active,
#appSidebar a:not(.no-md):active,
.bottom-nav a:not(.no-md):active,
.bottom-nav button:not(:disabled):not(.no-md):not(.btn-close):active,
#notificationsBell:not(.no-md):active,
#voiceControlBtn:not(.no-md):active,
#appSidebarToggle:not(.no-md):active,
.dialogspage #tosendmessage:active,
.dialogspage #toattachinmessage:active,
.dialogspage #toreturntodialogs:active,
.dialogspage a:has(#toreturntodialogs):active,
.dialogspage #dialogoptionsmenu button:active,
.dialogspage .opendialogoptions:active,
.dialogspage #voiceControlBtnDialog:active,
.modal .btn:not(:disabled):not(.no-md):not(.btn-close):active,
.ch-modal .btn:not(:disabled):not(.no-md):not(.btn-close):active,
.nav-link:not(.no-md):active,
.tab:not(.no-md):active {
  transform: scale(0.96);
}

.md-interactive:active::after,
button:not(:disabled):not(.no-md):not(.btn-close):active::after,
.btn:not(:disabled):not(.no-md):not(.btn-close):active::after,
a.btn:not(.no-md):active::after,
.dialogspage #tosendmessage:active::after,
.dialogspage #toattachinmessage:active::after {
  background: var(--md-state-press);
}

.btn-primary:not(:disabled):not(.no-md):active::after,
.dialogspage #tosendmessage:active::after,
.dialogspage #toattachinmessage:active::after {
  background: var(--md-state-press-on-primary);
}

/* Existing elevate utilities — reinforce with MD elevation */
.hover-elevate:not(.no-md):hover,
.active-elevate-2:not(.no-md):hover {
  box-shadow: var(--md-elevation-2);
}

.active-elevate-2:not(.no-md):active {
  box-shadow: var(--md-elevation-1);
  transform: scale(0.97);
}

/* Ripple wave */
@keyframes md-ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.md-ripple-host {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.md-ripple-wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.42;
  background: currentColor;
  mix-blend-mode: soft-light;
  z-index: 2;
  animation: md-ripple 0.55s var(--md-ease-emphasized) forwards;
}

/* Content enter */
@keyframes md-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes md-modal-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.md-enter,
.message-wrapper.md-enter,
.ch-card.md-enter,
.ch-thread-item.md-enter {
  animation: md-enter var(--md-duration-short4) var(--md-ease-emphasized-decelerate) both;
}

.modal.show .modal-dialog,
.ch-modal.is-open .ch-modal-card,
.modal-overlay.active .modal {
  animation: md-modal-enter var(--md-duration-medium1) var(--md-ease-emphasized-decelerate) both;
}

/* Keep icon/text above state layer & ripple */
.md-interactive > *:not(.md-ripple-wave),
button:not(.no-md) > *:not(.md-ripple-wave),
.btn:not(.no-md) > *:not(.md-ripple-wave),
a.btn:not(.no-md) > *:not(.md-ripple-wave) {
  position: relative;
  z-index: 3;
}

/* Don't fight fixed messenger chrome with overflow:hidden on full-bleed containers that need visible children */
.dialogspage #messageattachoptions li {
  overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-interactive,
  button:not(.no-md),
  .btn:not(.no-md),
  a.btn:not(.no-md),
  .hover-elevate:not(.no-md),
  .active-elevate-2:not(.no-md) {
    transition: none !important;
  }

  .md-interactive:active,
  button:not(.no-md):active,
  .btn:not(.no-md):active,
  a.btn:not(.no-md):active {
    transform: none !important;
  }

  .md-ripple-wave,
  .md-enter,
  .message-wrapper.md-enter,
  .modal.show .modal-dialog,
  .ch-modal.is-open .ch-modal-card {
    animation: none !important;
  }
}