/* Basic Reset & Body Styles */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #f0f2f5; /* Lighter background */
        color: #333;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        padding-top: 60px; /* Space for fixed header */
    }

    @media (max-width: 768px) {
        body {
            padding-top: 0;
        }
    }

    a {
        color: #FF69B4; /* Theme color for links */
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a:hover {
        color: #ff85c1;
        text-decoration: underline;
    }

    /* Header Styles */
    .main-header {
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 0 20px;
        position: fixed; /* Fixed header */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        height: 60px;
    }
     /* 聊天消息头像 */
.message-item .avatar-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.5em;
}

/* 帖子列表头像 */
.post-item .avatar-thumb {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.5em;
}

.nav-avatar {
    width: 32px    !important;
    height: 32px   !important;
    border-radius: 50% !important;
    object-fit: cover   !important;
  }
  
  /* 聊天列表 & 帖子列表里的缩略图 */
  .avatar-thumb {
    width: 24px    !important;
    height: 24px   !important;
    border-radius: 50% !important;
    object-fit: cover   !important;
  }
  
  /* 个人资料页 & 编辑页里的大头像 */
  .avatar-large {
    width: 120px   !important;
    height: 120px  !important;
    border-radius: 50% !important;
    object-fit: cover   !important;
  }
    .header-content {
        max-width: 1200px; /* Limit header width */
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .logo-link {
        text-decoration: none;
    }

    .logo-text {
        font-size: 1.5em;
        font-weight: bold;
        color: #FF69B4; /* Theme color */
    }

    .main-nav {
        display: flex;
        align-items: center;
        gap: 20px; /* Space between nav items */
    }

    .nav-link {
        color: #555;
        font-weight: 500;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .nav-link:hover {
        background-color: #f0f0f0;
        color: #FF69B4;
        text-decoration: none;
    }

    .nav-link.active {
        background-color: #ffe4f1; /* Light pink for active */
        color: #FF69B4;
        font-weight: bold;
    }

    .user-greeting {
        color: #666;
        font-size: 0.9em;
        margin-left: 10px;
    }

    .logout-link {
        color: #e53e3e; /* Red for logout */
    }
    .logout-link:hover {
        background-color: #fed7d7; /* Light red hover */
        color: #c53030;
    }

    /* Mobile Menu (Hidden by default) */
    .mobile-menu-toggle {
        display: none; /* Hide on larger screens */
        background: none;
        border: none;
        font-size: 1.8em;
        cursor: pointer;
        color: #555;
    }
    .mobile-nav {
        display: none; /* Hide mobile nav container */
        position: absolute;
        top: 60px; /* Below header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        padding: 10px 0;
    }
    .mobile-nav.active {
        display: flex; /* Show when active */
    }
    .mobile-nav .nav-link {
        padding: 12px 20px;
        text-align: center;
        border-bottom: 1px solid #eee;
        width: 100%;
        border-radius: 0;
    }
     .mobile-nav .nav-link:last-child {
         border-bottom: none;
     }
     
     /* 刷新缓存按钮样式 */
      .refresh-cache-btn {
          background: none;
          border: none;
          font-family: inherit;
          font-size: inherit;
          cursor: pointer;
          transition: background-color 0.2s ease, color 0.2s ease;
          outline: none; /* 移除默认的focus outline */
      }
      
      .refresh-cache-btn:hover {
          background-color: #f0f2f5;
          color: #FF69B4;
      }
      
      .refresh-cache-btn:focus {
          background-color: #f0f2f5;
          color: #FF69B4;
          box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.3); /* 自定义focus样式 */
          outline: none;
      }
      
      .refresh-cache-btn:disabled {
          opacity: 0.6;
          cursor: not-allowed;
      }
      
      .refresh-cache-btn:disabled:hover {
           background-color: transparent;
           color: inherit;
       }
      
      /* 桌面端刷新按钮样式 */
      .desktop-refresh-btn {
          min-width: auto;
          padding: 8px 12px;
          border-radius: 6px;
          font-size: 16px;
          outline: none; /* 移除默认的focus outline */
      }
      
      .desktop-refresh-btn:hover {
          background-color: #f0f2f5;
          color: #FF69B4;
          transform: rotate(180deg);
          transition: all 0.3s ease;
      }
      
      .desktop-refresh-btn:focus {
          background-color: #f0f2f5;
          color: #FF69B4;
          box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.3); /* 自定义focus样式 */
          outline: none;
      }
      
      .desktop-refresh-btn:disabled {
          transform: none;
      }


    /* Main Content Area */
    .main-content {
        flex-grow: 1; /* Take remaining vertical space */
        width: 100%;
        max-width: 1000px; /* Limit content width */
        margin: 20px auto; /* Center content */
        padding: 0 15px; /* Padding on sides */
    }

    /* Footer Styles */
    .main-footer {
        text-align: center;
        padding: 15px;
        margin-top: 40px; /* 与内容保持距离 */
        font-size: 0.8em;
        color: #888;
        background-color: #f8f9fa;
        border-top: 1px solid #eee;
        width: 100%;
    }

    /* Utility Classes */
    .card {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
    }
    .message-text img,
.post-content img {
  max-width: 100%;      /* 不超过父容器宽度 */
  height: auto;         /* 自动按比例缩放 */
  display: block;       /* 独占一行，更美观 */
  margin: 0.5em 0;      /* 上下留点空隙 */
}

/* —————— 头像尺寸强制覆盖 —————— */
/* 导航头像 */
.nav-avatar {
  width: 32px   !important;
  height: 32px  !important;
  border-radius: 50% !important;
  object-fit: cover  !important;
}

/* 聊天 & 帖子列表里的头像缩略图 */
.avatar-thumb {
  width: 24px   !important;
  height: 24px  !important;
  border-radius: 50% !important;
  object-fit: cover  !important;
}
    .error-message {
        color: #e53e3e;
        background-color: #fed7d7;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;
        border: 1px solid #f56565;
        text-align: center;
    }

    /* 语言切换按钮 */
    .language-toggle {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 18px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
        outline: none;
    }
    
    .language-toggle:hover {
        background-color: #f5f5f5;
        color: #FF69B4;
        transform: scale(1.05);
    }
    
    .language-toggle:active {
        transform: scale(0.95);
    }
    
    /* 黑夜模式切换按钮 */
    .dark-mode-toggle {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 2px solid #FF69B4;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
        z-index: 1000;
        outline: none;
    }
    
    .dark-mode-toggle .toggle-icon {
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .dark-mode-toggle:hover {
        background-color: #FF69B4;
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
    }
    
    .dark-mode-toggle:hover .toggle-icon {
        filter: brightness(0) invert(1);
    }
    
    .dark-mode-toggle:active {
        transform: scale(0.95);
    }
    
    /* 黑夜模式样式 */
    .dark-mode {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }
    
    .dark-mode .main-header {
        background-color: #2d2d2d !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dark-mode .nav-link {
        color: #e0e0e0 !important;
    }
    
    .dark-mode .nav-link:hover {
        background-color: #3d3d3d !important;
        color: #FF69B4 !important;
    }
    
    .dark-mode .nav-link.active {
        background-color: #4a1a3a !important;
        color: #FF69B4 !important;
    }
    
    .dark-mode .user-greeting {
        color: #b0b0b0 !important;
    }
    
    .dark-mode .mobile-nav {
        background-color: #2d2d2d !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dark-mode .mobile-nav .nav-link {
        border-bottom: 1px solid #444 !important;
    }
    
    .dark-mode .card {
        background-color: rgba(45, 45, 45, 0.95) !important;
        border: 1px solid #444 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dark-mode .main-footer {
        background-color: #2d2d2d !important;
        border-top: 1px solid #444 !important;
        color: #b0b0b0 !important;
    }
    
    .dark-mode .dark-mode-toggle {
        background-color: #2d2d2d !important;
        border-color: #FF69B4 !important;
    }
    
    .dark-mode .dark-mode-toggle:hover {
        background-color: #FF69B4 !important;
    }
    
    .dark-mode .language-toggle {
        color: #b0b0b0 !important;
    }
    
    .dark-mode .language-toggle:hover {
        background-color: #3d3d3d !important;
        color: #FF69B4 !important;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 768px) {
        body {
            padding-top: 50px; /* Adjust for smaller header */
        }
        .main-header {
            height: 50px;
            padding: 0 15px;
        }
        .main-nav {
            display: none; /* Hide desktop nav */
        }
        .mobile-menu-toggle {
            display: block; /* Show hamburger icon */
        }
        .main-content {
            padding: 0 10px;
            margin-top: 15px;
        }
         .logo-text {
            font-size: 1.3em;
        }
        
        /* 移动端黑夜模式按钮调整 */
        .dark-mode-toggle {
            bottom: 80px; /* 向上移动，避免遮挡输入框 */
            left: 15px;
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
    }