.app { background: transparent !important; }
.msg-status-bg { height: env(safe-area-inset-top, 0); background: transparent; }
.msg-top-bar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.55); backdrop-filter: blur(12px); }
.msg-top-bar .top-bar-inner { padding: 0 16px; padding-top: env(safe-area-inset-top, 0); height: 44px; align-items: center; display: flex; }
.msg-top-bar .brand-logo { display: flex; align-items: center; gap: 6px; }
.msg-top-bar .top-duck-icon { width: 22px; height: 22px; position: relative; }
.msg-top-bar .top-duck-icon .td-head, .msg-top-bar .top-duck-icon .td-eye, .msg-top-bar .top-duck-icon .td-beak, .msg-top-bar .top-duck-icon .td-body, .msg-top-bar .top-duck-icon .td-wing, .msg-top-bar .top-duck-icon .td-tail { background: #FF9500; position: absolute; }
.msg-top-bar .top-duck-icon .td-head { width: 12px; height: 12px; border-radius: 50%; top: 2px; left: 2px; }
.msg-top-bar .top-duck-icon .td-eye { width: 3px; height: 3px; background: #fff; top: 5px; left: 8px; }
.msg-top-bar .top-duck-icon .td-beak { width: 4px; height: 4px; background: #FFB347; top: 7px; left: 11px; }
.msg-top-bar .top-duck-icon .td-body { width: 14px; height: 10px; border-radius: 6px; top: 8px; left: 4px; }
.msg-top-bar .top-duck-icon .td-wing { width: 6px; height: 6px; border-radius: 50%; top: 10px; left: 6px; background: rgba(255,255,255,.5); }
.msg-top-bar .top-duck-icon .td-tail { width: 4px; height: 4px; border-radius: 50%; top: 11px; left: 0; background: rgba(255,255,255,.5); }
.brand-name { font-size: 17px; font-weight: 700; color: #FF9500; }

.main-scroll {
  position: fixed; top: 88px; left: 0; right: 0; bottom: 64px;
  overflow-y: auto; padding: 16px;
}

.new-msg-banner {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 149, 0, 0.1); border-radius: 12px;
  padding: 12px; margin-bottom: 12px; font-size: 13px; color: #FF9500;
}

.msg-categories { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.msg-cat-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(12px);
  border-radius: 14px; padding: 14px;
  cursor: pointer;
}
.msg-cat-item:active { transform: scale(0.98); }
.cat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.cat-icon-system { background: rgba(255, 149, 0, 0.15); }
.cat-icon-comment { background: rgba(94, 139, 255, 0.15); }
.cat-info { flex: 1; min-width: 0; }
.cat-name { font-size: 14px; font-weight: 600; color: #1C1C1E; }
.cat-desc { font-size: 11px; color: rgba(28,28,30,.6); margin-top: 2px; }
.cat-badge {
  background: #FF453A; color: #fff; font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
}
.cat-arrow { color: #999; font-size: 18px; }

.section-header { padding: 12px 4px 8px; }
.section-title { font-size: 13px; font-weight: 700; color: rgba(28,28,30,.65); }

.recent-section { display: flex; flex-direction: column; gap: 6px; }
.recent-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(12px);
  border-radius: 14px; padding: 12px;
  cursor: pointer;
}
.recent-item:active { transform: scale(0.99); }
.recent-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card-inner-bg); object-fit: cover;
}
.recent-avatar-text {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD78E, #FF9500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: 13px; font-weight: 600; color: #1C1C1E; display: block; }
.recent-preview { font-size: 11px; color: rgba(28,28,30,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.recent-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.recent-badge { background: #FF453A; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 999px; }
.recent-time { font-size: 10px; color: rgba(28,28,30,.5); }

.msg-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 10px; font-size: 12px; color: #FF9500; cursor: pointer;
}
.msg-toggle-arrow { transition: transform .2s ease; }
.msg-toggle-arrow.arrow-up { transform: rotate(180deg); }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 0; gap: 12px;
  color: rgba(28,28,30,.4);
}

.msg-bottom-safe { height: 80px; }