/* MailHub Local — Base layout primitives
   侧边栏 shell、sticky header、卡片网格、滚动条、图标 mask 等共享原语。
   不含页面专属结构，只放可复用骨架。
*/

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
body { font-family: var(--mail-font-sans); }

/* 页面 shell：左固定侧边栏 + 右主区 */
.mail-shell { display: flex; min-height: 100vh; width: 100%; }
.mail-sidebar {
  position: fixed; top: 0; left: 0;
  width: 256px; height: 100vh;
  overflow-y: auto; z-index: 40;
  display: flex; flex-direction: column;
}
.mail-main {
  margin-left: 256px; flex: 1 1 0%;
  min-width: 0; min-height: 100vh;
  display: flex; flex-direction: column;
}
.mail-content { flex: 1 1 auto; overflow-y: auto; }

/* 响应式：窄屏隐藏侧边栏（移动端后续可加抽屉，v1 简化） */
@media (max-width: 1023px) {
  .mail-sidebar { display: none; }
  .mail-main { margin-left: 0; }
}

/* sticky 顶部栏 */
.sticky-top-bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--mail-background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mail-border);
}

/* 卡片 */
.card {
  background-color: var(--mail-card);
  color: var(--mail-card-foreground);
  border: 1px solid var(--mail-border);
  border-radius: var(--mail-radius-xl);
}

/* 头像圆 */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mail-radius-pill);
  background-color: var(--mail-secondary);
  color: var(--mail-secondary-foreground);
  font-weight: 500; flex-shrink: 0;
}

/* 滚动条隐藏工具类 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Lucide 图标 mask 占位（data-icon 回退） */
[data-icon] {
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-color: currentColor;
}

/* 加载/空态 */
.state-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 1rem; text-align: center; color: var(--mail-muted-foreground);
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--mail-border);
  border-top-color: var(--mail-primary);
  border-radius: 50%;
  animation: mailhub-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes mailhub-spin { to { transform: rotate(360deg); } }