/* ============================================================
   css/notify-banner.css — 应用内顶部消息横幅
   下滑半透明圆角气泡：头像 + 备注名 + 单行省略文本
   ============================================================ */

#notify-banner {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px; right: 12px;
    z-index: 2400; /* 低于通话 overlay(2500)，高于灵动岛(999) */
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(252, 250, 246, 0.78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 252, 249, 0.85);
    box-shadow: 0 2px 4px rgba(30, 28, 26, 0.08), 0 10px 30px rgba(30, 28, 26, 0.18);
    cursor: pointer;
    touch-action: none;
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease;
    pointer-events: none;
}
#notify-banner.nb-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* 桌面端：居中固定宽度，模拟手机顶部提示 */
@media (min-width: 768px) {
    #notify-banner { left: 50%; right: auto; width: 420px; transform: translate(-50%, -130%); }
    #notify-banner.nb-show { transform: translate(-50%, 0); }
}

.nb-avatar {
    width: 38px; height: 38px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: rgba(201, 168, 168, 0.2);
    display: flex; align-items: center; justify-content: center;
}
.nb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nb-avatar-fallback {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 17px; color: var(--text-secondary, #8A8278);
}
.nb-body { flex: 1; min-width: 0; }
.nb-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-primary, #1E1C1A);
}
.nb-count {
    font-size: 10px; font-weight: 600;
    padding: 0 6px; border-radius: 8px; line-height: 16px;
    background: rgba(201, 168, 168, 0.25);
    color: #a37c7c;
}
.nb-text {
    margin-top: 2px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--text-secondary, #6a635b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   日程到点提醒：闹钟式系统提醒框（非主模型消息，点击进日程、上滑拉走）
   ============================================================ */
#schedule-alarm {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px; right: 12px;
    z-index: 2400;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-rose, #C9A8A8) 26%, #FCFAF6) 0%, #FCFAF6 60%);
    border: 1px solid color-mix(in srgb, var(--accent-rose, #C9A8A8) 40%, rgba(255,255,255,0.9));
    box-shadow: 0 2px 4px rgba(30,28,26,0.08), 0 10px 30px rgba(160,120,100,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
    cursor: pointer;
    touch-action: none;
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1), opacity 0.28s ease;
    pointer-events: none;
}
#schedule-alarm.sa-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 768px) {
    #schedule-alarm { left: 50%; right: auto; width: 420px; transform: translate(-50%, -130%); }
    #schedule-alarm.sa-show { transform: translate(-50%, 0); }
}
.sa-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-rose, #C9A8A8) 26%, #FCFAF6);
    color: var(--accent-rose, #B0808080);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-rose, #C9A8A8) 34%, transparent);
}
.sa-body { flex: 1; min-width: 0; }
.sa-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--text-primary, #1E1C1A);
}
.sa-title::after { content: ''; width: 26px; height: 1px; background: var(--accent-rose, #C9A8A8); opacity: 0.6; }
.sa-text {
    margin-top: 3px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--text-secondary, #6a635b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-bell {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-rose, #C9A8A8) 20%, #FCFAF6);
    color: var(--accent-rose, #B0808080);
    animation: saBellRing 0.9s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes saBellRing {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    #schedule-alarm, .sa-bell { transition: none; animation: none; }
}