/* ========================================
   MATERIAL DESIGN 3 - SIDEBAR / NAVIGATION DRAWER
   Abie Messenger
   ======================================== */

/* ========================================
   MAIN CONTAINER
   ======================================== */
.chat-container {
  display: flex;
  height: 100vh;
  height: 100dvh;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--md-sys-color-surface);
  /* iOS PWA: padding для safe area */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ========================================
   SIDEBAR / NAVIGATION DRAWER
   ======================================== */
.sidebar {
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  display: flex;
  flex-direction: column;
  border-right: none;
  position: relative;
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */
.sidebar-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-header h2 {
  font-family: var(--md-sys-typescale-title-large-font-family);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: 500;
  line-height: var(--md-sys-typescale-title-large-line-height);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.user-role {
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  color: var(--md-sys-color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--md-sys-color-primary-container);
  padding: 4px 10px;
  border-radius: var(--md-sys-shape-corner-full);
}

/* ========================================
   SIDEBAR TABS (Segmented Button)
   ======================================== */
.sidebar-tabs {
  display: flex;
  gap: 0;
  margin: 0 16px 12px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px;
  position: relative;
}

/* Скользящий индикатор */
.sidebar-tabs .tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  z-index: 0;
}

.sidebar-tabs[data-active="contacts"] .tab-indicator {
  transform: translateX(100%);
}

.sidebar-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.sidebar-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
}

.sidebar-tab:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.sidebar-tab.active {
  color: var(--md-sys-color-on-secondary-container);
}

.sidebar-tab.active::before {
  opacity: 0;
}

/* ========================================
   TAB CONTENT
   ======================================== */
.tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  position: relative;
}

.tab-content.active {
  display: flex;
}

/* ========================================
   PULL TO REFRESH
   ======================================== */
.pull-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  transition: height var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  z-index: 10;
}

.pull-indicator.pulling {
  height: 50px;
}

.pull-indicator.refreshing {
  height: 50px;
}

.pull-indicator-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--md-sys-color-outline);
  border-top-color: var(--md-sys-color-primary);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(0deg) scale(0.5);
  transition:
    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.pull-indicator.pulling .pull-indicator-spinner {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.pull-indicator.refreshing .pull-indicator-spinner {
  opacity: 1;
  transform: scale(1);
  animation: pull-spin 0.8s linear infinite;
}

@keyframes pull-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   CHATS LIST
   ======================================== */
.chats-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

/* ========================================
   CHAT ITEM (List Item)
   ======================================== */
.chat-item {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  margin-bottom: 2px;
  align-items: center;
  position: relative;
  border: none;
}

.chat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
  pointer-events: none;
}

.chat-item:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.chat-item:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.chat-item.active {
  background: var(--md-sys-color-secondary-container);
}

.chat-item.active::before {
  opacity: 0;
}

.chat-item.active .chat-name {
  color: var(--md-sys-color-on-secondary-container);
}

.chat-item.active .chat-last-message {
  color: var(--md-sys-color-on-secondary-container);
  opacity: 0.8;
}

/* ========================================
   CHAT AVATAR (MD3 Style)
   ======================================== */
.chat-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: 20px;
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.chat-avatar.group {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.chat-avatar.has-image {
  background: transparent;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   CHAT INFO
   ======================================== */
.chat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-name {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: 500;
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
  margin-left: 8px;
}

.chat-last-message {
  font-family: var(--md-sys-typescale-body-medium-font-family);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   UNREAD BADGE (MD3 Badge)
   ======================================== */
.chat-unread-badge {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 2px 8px;
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ========================================
   CONTACTS TAB
   ======================================== */
.contacts-search {
  padding: 8px 16px 16px;
}

.contacts-search input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
  transition:
    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.contacts-search input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.contacts-search input:hover {
  background: var(--md-sys-color-surface-container-high);
}

.contacts-search input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 11px 15px;
  background: var(--md-sys-color-surface-container-lowest);
}

/* ========================================
   CONTACTS LIST
   ======================================== */
.contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

/* ========================================
   CONTACT ITEM
   ======================================== */
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
}

.contact-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
  pointer-events: none;
}

.contact-item:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.contact-item:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* ========================================
   CONTACT AVATAR
   ======================================== */
.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: 18px;
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  overflow: hidden;
  flex-shrink: 0;
}

.contact-avatar.has-image {
  background: transparent;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   CONTACT INFO
   ======================================== */
.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 2px;
}

.contact-username {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ========================================
   FOOTER ICON BUTTONS
   ======================================== */
.footer-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.footer-icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.footer-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
}

.footer-icon-btn:hover {
  color: var(--md-sys-color-primary);
}

.footer-icon-btn:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.footer-icon-btn:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.footer-icon-btn svg {
  width: 24px;
  height: 24px;
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--md-sys-color-surface-container);
}

/* ========================================
   CURRENT USER SECTION
   ======================================== */
.current-user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: var(--md-sys-shape-corner-large);
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
}

.current-user-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border-radius: inherit;
  pointer-events: none;
}

.current-user-section:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

/* ========================================
   CURRENT USER AVATAR
   ======================================== */
.current-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: 14px;
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  flex-shrink: 0;
  overflow: hidden;
}

.current-user-avatar.has-avatar {
  background: transparent;
}

.current-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   CURRENT USER NAME
   ======================================== */
.current-user {
  font-family: var(--md-sys-typescale-title-small-font-family);
  font-size: var(--md-sys-typescale-title-small-font-size);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  color: var(--md-sys-color-on-surface);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   SETTINGS PANEL
   ======================================== */
.settings-panel {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level3);
  z-index: 100;
  overflow: hidden;
  animation: md-scale-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
  transform-origin: bottom center;
}

.settings-panel.hidden {
  display: none;
}

.settings-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.settings-panel-header h3 {
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.settings-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.settings-close-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.settings-panel-content {
  padding: 8px 0;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.settings-item:hover {
  background: var(--md-sys-color-surface-container-high);
}

.settings-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-item-label {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  color: var(--md-sys-color-on-surface);
}

.settings-item-value {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ========================================
   THEME SWITCH (Animated Toggle)
   ======================================== */
.theme-switch {
  position: relative;
  width: 64px;
  height: 32px;
  cursor: pointer;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-outline);
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  overflow: hidden;
}

.theme-switch-slider::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  z-index: 2;
}

.theme-switch-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  z-index: 1;
}

.theme-switch-icon.sun {
  left: 8px;
  opacity: 1;
}

.theme-switch-icon.moon {
  right: 8px;
  opacity: 0.5;
}

/* Checked state (Dark mode) */
.theme-switch input:checked + .theme-switch-slider {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}

.theme-switch input:checked + .theme-switch-slider::before {
  left: calc(100% - 26px);
  background: var(--md-sys-color-primary);
}

.theme-switch input:checked + .theme-switch-slider .sun {
  opacity: 0.5;
}

.theme-switch input:checked + .theme-switch-slider .moon {
  opacity: 1;
}

/* Hover effect */
.theme-switch:hover .theme-switch-slider::before {
  transform: translateY(-50%) scale(1.1);
}

/* ========================================
   SETTINGS PANEL FOOTER
   ======================================== */
.settings-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.logout-btn-full {
  width: 100%;
  padding: 14px 20px;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.logout-btn-full::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.logout-btn-full:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.logout-btn-full:hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.logout-btn-full svg {
  flex-shrink: 0;
}

/* App Version */
.app-version {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--md-sys-color-outline);
  opacity: 0.7;
}

/* ========================================
   MOBILE MENU BUTTON
   ======================================== */
.mobile-menu-btn {
  display: none;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 24px;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  margin-right: 8px;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.mobile-menu-btn:hover {
  background: var(--md-sys-color-surface-container-highest);
}

/* ========================================
   STAGGER ANIMATION FOR LISTS
   ======================================== */
.chat-item.animate-in,
.contact-item.animate-in {
  animation: md-slide-in-right var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

/* Staggered delays for first 15 items */
.chat-item.animate-in:nth-child(1),
.contact-item.animate-in:nth-child(1) { animation-delay: 0ms; }
.chat-item.animate-in:nth-child(2),
.contact-item.animate-in:nth-child(2) { animation-delay: 30ms; }
.chat-item.animate-in:nth-child(3),
.contact-item.animate-in:nth-child(3) { animation-delay: 60ms; }
.chat-item.animate-in:nth-child(4),
.contact-item.animate-in:nth-child(4) { animation-delay: 90ms; }
.chat-item.animate-in:nth-child(5),
.contact-item.animate-in:nth-child(5) { animation-delay: 120ms; }
.chat-item.animate-in:nth-child(6),
.contact-item.animate-in:nth-child(6) { animation-delay: 150ms; }
.chat-item.animate-in:nth-child(7),
.contact-item.animate-in:nth-child(7) { animation-delay: 180ms; }
.chat-item.animate-in:nth-child(8),
.contact-item.animate-in:nth-child(8) { animation-delay: 210ms; }
.chat-item.animate-in:nth-child(9),
.contact-item.animate-in:nth-child(9) { animation-delay: 240ms; }
.chat-item.animate-in:nth-child(10),
.contact-item.animate-in:nth-child(10) { animation-delay: 270ms; }
.chat-item.animate-in:nth-child(n+11),
.contact-item.animate-in:nth-child(n+11) { animation-delay: 300ms; }

/* ========================================
   SETTINGS PANEL ANIMATION
   ======================================== */
.settings-panel {
  animation: md-slide-in-bottom var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
}

.settings-panel.closing {
  animation: md-slide-out-bottom var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized-accelerate) forwards;
  pointer-events: none;
}