/* ========================================= */
/* 文件：home-core.css                        */
/* 功能：主页最核心的视觉区 —— 沈星回头像呼吸圈、*/
/*       进入聊天的大橙按钮、背景玻璃夹层特效， */
/*       打开App第一眼看到的东西都在这         */
/* ========================================= */

/* =========================================
   主页容器 (四角打钉固定布局)
   ========================================= */
#view-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.home-core { display: flex; flex-direction: column; align-items: center; margin-bottom: 80px; }
.breathing-circle {
  width: 120px; height: 120px; border-radius: 50%; padding: 6px;
  border: 1px solid rgba(255, 179, 122, 0.3);
  box-shadow: 0 0 20px rgba(255, 179, 122, 0.2);
  animation: core-breathe 3s infinite ease-in-out;
  display: flex; justify-content: center; align-items: center;
}
.core-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0.9; }
.core-text { margin-top: 20px; font-family: monospace; font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase; }
@keyframes core-breathe {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 179, 122, 0.1); border-color: rgba(255, 179, 122, 0.2); transform: scale(1); }
  50% { box-shadow: 0 0 35px rgba(255, 179, 122, 0.5); border-color: rgba(255, 179, 122, 0.6); transform: scale(1.02); }
}

/* 聊天入口 */
.chat-entry-btn {
  position: absolute; right: 45px;
  bottom: max(40px, env(safe-area-inset-bottom));
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #ffb37a, #ff9f43);
  box-shadow: 0 8px 20px rgba(255, 159, 67, 0.4);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  animation: heartbeat 3s infinite;
}
.chat-entry-btn img { width: 32px; height: 32px; filter: brightness(0) invert(1); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 12px 25px rgba(255, 159, 67, 0.6); } }

/* UI 平滑隐身术 */
.ui-fade-out { opacity: 0 !important; pointer-events: none !important; }
.fan-menu-container, .chat-entry-btn { transition: opacity 0.5s ease; }
/* =========================================
   ✨ 星空瓶弹窗：星泊地梦幻衔接背景特效 ✨
   ========================================= */

/* 1. 先把主面板变回极度通透的玻璃，并防止魔法夹层漏出来 */
.sb-drawer,
.sb-bottom-panel,
.sb-settings-panel,
.sb-add-tag-panel,
.sb-add-modal,
.sb-mem-card {
    background: rgba(20, 15, 35, 0.2) !important; /* 极薄的暗紫底色，不再是实心紫 */
    backdrop-filter: blur(10px) saturate(120%) !important; /* 恢复正常的物理磨砂 */
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    overflow: hidden !important; /* ✨ 核心：必须加这个，就像把多余的壁纸边角裁掉！ */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08); /* 顶部微光 */
}

/* 2. 注入魔法夹层：单独把星泊地照片垫在最下面，并且只模糊照片！ */
.sb-drawer::before,
.sb-bottom-panel::before,
.sb-settings-panel::before,
.sb-add-tag-panel::before,
.sb-add-modal::before,
.sb-mem-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* 铺上星泊地照片 */
    background: url("../../../assets/星泊地.webp") no-repeat center center / cover;
    
    /* ✨ 只在这里做模糊！绝不影响文字！ */
    filter: blur(15px) saturate(130%); 
    
    /* ✨ 控制照片透出来的亮度：0.35 刚刚好，梦幻又不过分抢戏 */
    opacity: 0.35; 
    
    /* ✨ 核心：把它垫在所有文字和按钮的下面！ */
    z-index: -1; 
    pointer-events: none; 
}


.sb-bg-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: sbTwinkle var(--d,3s) ease-in-out infinite alternate,
               sbDrift var(--dr,9s) ease-in-out infinite alternate;
}
@keyframes sbTwinkle { from{opacity:var(--lo,0.3);}to{opacity:var(--hi,0.9);} }
@keyframes sbDrift {
    from { transform: translate(0,0); }
    to { transform: translate(var(--tx,4px), var(--ty,4px)); }
}