/* ========================================
   Apps CSS - APP 图标网格 & DOCK 栏样式
   ins高级感 · 纯白系 · 精致图标
   所有魔法数字已替换为 variables.css 变量
   ======================================== */

/* ======== APP 图标网格区域 ======== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-icon-gap);
  flex: 1;
  min-width: 0;
  justify-items: center;
  align-content: center;
}

/* ---- 单个 APP 图标项 ---- */
.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.app-item:hover {
  transform: scale(1.06);
}

.app-item:active {
  transform: scale(0.95);
}

/* APP 图标容器 */
.app-item__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-icon);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-soft), var(--shadow-icon-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 图标轻拟物高光 */
.app-item__icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    var(--color-highlight-start) 0%,
    var(--color-highlight-end) 100%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.app-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: var(--z-content);
}

/* SVG 占位图标尺寸 */
.app-item__icon svg {
  width: var(--icon-inner);
  height: var(--icon-inner);
  position: relative;
  z-index: var(--z-content);
}

/* APP 名称 */
.app-item__name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-light);
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.2;
}


/* ======== DOCK 栏（iOS 风格整体毛玻璃底座） ======== */
.dock-bar {
  flex-shrink: 0;
  z-index: var(--z-dock);
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-dock-gap);

  padding: 14px var(--spacing-dock);
  margin: 0 var(--spacing-page) 2px;

  /* 整体毛玻璃底座 */
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-dock);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04),
              0 0 0 0.5px rgba(0, 0, 0, 0.02);
}

/* ---- DOCK 单个图标 ---- */
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.dock-item:hover {
  transform: scale(1.12);
}

.dock-item:active {
  transform: scale(0.92);
}

/* DOCK 图标容器（iOS 风格：无独立方框背景） */
.dock-item__icon {
  width: var(--icon-dock-size);
  height: var(--icon-dock-size);
  border-radius: var(--radius-icon);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* DOCK 图标无高光（去掉独立方框的拟物高光） */
.dock-item__icon::after {
  display: none;
}

.dock-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: var(--z-content);
  border-radius: var(--radius-icon);
}

/* DOCK SVG 占位图标尺寸 */
.dock-item__icon svg {
  width: var(--icon-dock-inner);
  height: var(--icon-dock-inner);
  position: relative;
  z-index: var(--z-content);
}

/* DOCK 名称 - 隐藏 */
.dock-item__name {
  display: none;
}

/* ---- 底部 Home Indicator 模拟 ---- */
.home-indicator {
  width: var(--indicator-width);
  height: var(--indicator-height);
  background: var(--color-text-light);
  border-radius: var(--radius-indicator);
  margin: 2px auto var(--spacing-xs);
  opacity: 0.4;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-content);
}

/* ======== 情侣空间角色选择器样式 ======== */
.couple-space-selector-modal .modal-content {
  width: 85%;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* 头部固定，不参与滚动 */
.couple-space-selector-modal .modal-header {
  flex-shrink: 0;
}

/* body 占据剩余空间，可滚动 */
.couple-space-selector-modal .modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.couple-space-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 移动端惯性滚动 */
  -webkit-overflow-scrolling: touch;
  /* 避免滚动链穿透到背景 */
  overscroll-behavior: contain;
  /* 允许垂直触摸滑动 */
  touch-action: pan-y;
  padding: 4px;
}

.couple-space-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-light, #f8f8f8);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.couple-space-contact-item:hover {
  background: var(--bg-hover, #f0f0f0);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.couple-space-contact-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.couple-space-contact-item img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-color, #e0e0e0);
}

.couple-space-contact-item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #333);
  flex: 1;
}

/* 滚动条样式 */
.couple-space-contact-list::-webkit-scrollbar {
  width: 6px;
}

.couple-space-contact-list::-webkit-scrollbar-track {
  background: transparent;
}

.couple-space-contact-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #ccc);
  border-radius: 3px;
}

.couple-space-contact-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #999);
}