/* 文件路径: css/apps/sonnet-base.css */

/* 核心：将所有变量锁死在 #app-sonnet 内部，防止污染全局 */
#app-sonnet {
  
 /* ========== 主题色 ========== */
    --theme-background: #FFFFFF;
    --theme-gray: #F5F7F8;
          
 /* ========== 动态字体大小变量 ========== */
    --edit-font-size-base: 15px;
    --rec-font-size-base: 13px;
          
  /* ========== 顶部栏变量 ========== */
    --header-padding-top: 16px;      
    --header-padding-x: 16px;        
    --header-height-base: 16px;      
        
  
 /* ========== 记录流样式变量 (Record Stream) ========== */
   --rec-avatar-size: 42px;    
   --rec-name-size: 13px;      
   --rec-name-color: #000000;
   --rec-status-size: 8.8px;    
   --rec-status-color: #90A4AE;
   --rec-content-size: var(--rec-font-size-base); 
   --rec-content-color: #37474F;
   --rec-content-line-height: 1.7;

  /* ========== 布局位置 (Layout) ========== */
  --time-pos-right: 6px;   
  --time-pos-bottom: 6px;  

  /* ========== 导航栏覆盖 (Nav Override) ========== */
  /* 注意：这里重写了全局的 nav-height，仅在Sonnet内生效 */
   --nav-height: 60px;
   --nav-bg: #FFFFFF;
   --nav-icon-normal: #B0BEC5;
   --nav-icon-active: #000000;
  
  /* ========== 我的界面 (Me Tab) ========== */
   --me-cover-height: 180px;
   --me-avatar-size: 80px;
   --me-accent-color: rgba(110, 130, 223, 1);
   --me-menu-gap: 40px;
  
  /* ========== 弹窗与交互 (Modals) ========== */
   --modal-bg: rgba(255, 255, 255, 0.95);
   --modal-blur: 20px;
   --modal-border: rgba(0, 0, 0, 0.05);
   --modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   --modal-input-bg: #F7F9FA;

  /* ========== 设置项 (Settings) ========== */
   --setting-group-bg: #FFFFFF;
   --setting-border: #F0F0F0;
   --toggle-active: #000000;
   --toggle-inactive: #E0E0E0;

  /* ========== 分区菜单 (Partitions) ========== */
  --partition-menu-bg: rgba(255, 255, 255, 0.9);
  --partition-menu-blur: 30px;
  --partition-shadow: 0 10px 40px rgba(0,0,0,0.1);
  --partition-active-bg: rgba(0,0,0,0.04);
  
  /* ========== 编辑工具栏 (Toolbar) ========== */
  --edit-toolbar-height: 48px;
  --edit-key-color: #546E7A;
  --edit-key-bg: transparent;
  --edit-toolbar-gap: 12px;
  --edit-group-gap: 4px;
}

/* 文件路径: css/apps/sonnet/base.css */

/* ========== 基础重置与布局框架 (Infrastructure) ========== */
/* 这里的代码定义了 Sonnet 的物理法则和窗口结构 */

/* 基础重置 */
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }

html, body { margin: 0; padding: 0; background: ffffff; font-family: var(--font-serif); width: 100%; height: 100%; overflow: hidden; position: fixed;     /* 禁止滚动回弹（橡皮筋效果） */
  overscroll-behavior: none; }

/* 布局框架 */
.app-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
    background-color: #FFFFFF !important;
}

/* 屏幕容器 */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  background: var(--theme-background);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
    background-color: #FFFFFF !important; 
}

/* 特殊覆盖：Me页面的背景色 */
#tab-me {
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); 
  background: #FAFAFA;
}

.screen.active { 
  opacity: 1; 
  pointer-events: auto;
  z-index: 10;
}

/* 顶部标题栏 */
.header-bar {
  padding: var(--header-padding-y, 10px) var(--header-padding-x);
  display: flex; 
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-top: max(var(--header-padding-top), env(safe-area-inset-top));
  height: calc(var(--header-height-base) + max(var(--header-padding-top), env(safe-area-inset-top)));
  position: relative;
  z-index: 60; 
}