/* ===========================
   mobile-compact.css (已优化版本)
   
   优化记录：
   - 移除了所有与 .page-transition, .transition-circle 相关的CSS规则，
     因为这些DOM元素已被移除，动画由Canvas接管。
   - 保留了所有针对移动端UI元素（如导航栏、输入框、消息气泡等）的紧凑化样式。
=========================== */

/* 移动端界面紧凑化方案 - 更新优化版 */
@media (max-width: 780px) {
  /* 全局变量调整 */
  :root {
    --panel-width: 80vw !important; /* 占据屏幕宽度的80%，保证空间充足 */
  }

  /* ==== 顶部导航栏 ==== */
  .chat-header {
    height: 55px !important; /* 稍微加高一点点，更有呼吸感 */
    padding: 0 12px !important;
    background: rgba(10, 11, 20, 0.4) !important; /* 更透明的底色 */
    backdrop-filter: blur(15px) !important; /* 更强的模糊效果 */
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* 极细的分割线 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
  }
  
  .header-title h1 {
    font-size: 0.9rem !important;
    max-width: 160px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
  
  .ai-status {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  .status-dot {
    width: 5px !important;
    height: 5px !important;
    background-color: #4CAF50 !important;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
  }
  
  .nav-button {
    width: 30px !important;   /* 从36px缩小到30px */
    height: 30px !important;
    margin: 0 2px !important; /* 减少按钮之间的间距 */
    background: transparent !important; /* 去掉背景色，更显轻盈 */
    border: none !important;
  }
    .nav-button i {
    font-size: 0.85rem !important; /* 缩小图标字体大小 */
    opacity: 0.8;
  }

    .instances-count {
    display: none !important;
  }
    #toggleInstancesBtn {
    background: transparent !important; /* 去掉背景 */
    border: none !important; /* 去掉边框 */
    width: auto !important; /* 宽度自适应 */
    padding: 0 8px !important;
  }

  /* 中间模型选择器的现代 pill (药丸) 设计 */
  .custom-select-trigger {
    height: 30px !important;    /* 稍微压扁一点，配合缩小的按钮 */
    border-radius: 15px !important;
    padding: 0 10px !important;
    width: 100% !important;     /* 确保药丸框本身也是长的 */
  }

    .custom-select-trigger .select-arrow {
    font-size: 0.6rem !important;
    opacity: 0.5 !important;
  }
/* ==== 消息气泡样式 ==== */
.message-bubble {
  padding: 8px 10px !important;
  max-width: 94% !important;
  line-height: 1.4 !important;
}

  
  .message-avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 5px !important;
    font-size: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .message-avatar span,
  .message-avatar div {
    font-size: 0.6rem !important;
    transform: scale(0.8) !important;
  }
  
  .user .message-avatar,
  .ai .message-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  
  .message-content-wrapper {
    max-width: calc(100% - 42px) !important;
  }
  
  .message-text {
    font-size: 0.85rem !important;
  }
  
  .message-time {
    font-size: 0.6rem !important;
  }
  
  /* ==== 底部区域 - 修改：只保留输入框 ==== */
  .status-bar {
    display: none !important;
  }
  
  .bottom-area-wrapper {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: transparent !important;
    z-index: 100 !important;
    box-shadow: none !important;
  }
  

  .iframe-container {
      position: relative;
      width: 100%;
      min-height: 200px;
      margin-bottom: 15px;
  }
  
  .detailed-description-iframe {
      width: 100%;
      min-height: 200px;
      border: none;
      background-color: transparent;
      border-radius: 8px;
      overflow: hidden;
      transition: height 0.3s ease;
  }
  
  .iframe-container .loading-indicator {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba(20, 24, 38, 0.5);
      z-index: 2;
  }


  .input-tools {
    transform: scale(0.7) !important;
    transform-origin: center right !important;
    margin-right: -6px !important;
  }
  
  .tool-btn {
    transform: none !important;
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  
  .message-text pre {
    margin: 6px 0 !important;
    padding: 8px !important;
  }

  
  .message-text pre code {
    font-size: 0.75rem !important;
  }

  
  .message-bubble pre.dark-card {
    background-color: #1e2235 !important;
    color: #e0e0e0 !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }
  /* 1. 让输入区域整体透明 */
  .input-area {
    padding: 2px 6px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: none !important;
    padding: 5px 15px 15px 15px !important; /* 缩小了外边距 */
    box-shadow: none !important;
  }

  /* 2. 科技感悬浮胶囊 */
  .input-container {
    background: rgba(15, 15, 25, 0.85) !important; /* 更深邃的底色 */
    backdrop-filter: blur(20px) saturate(180%) !important; /* 强化磨砂感 */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 默认浅白边框 */
    border-radius: 24px !important; 
    padding: 6px 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
  .input-container:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(73, 160, 255, 0.4), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px); /* 轻微浮起感 */
  }
  /* 3. 调整输入框内部文字区域 */
  #chatInput {
    background: transparent !important; /* 必须透明 */
    border: none !important; /* 取消边框 */
    color: #fff !important;
    font-size: 0.95rem !important;
    padding: 8px 0 !important;
    margin-right: 10px !important;
    max-height: 120px !important; /* 允许它变高，但不要太离谱 */
  }

  /* 3. 黑白配色发送按钮 */
  .send-btn {
    background: #ffffff !important; /* 白色背景 */
    color: #000000 !important;       /* 黑色图标 */
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
  }
  
  /* 当输入框为空，按钮禁用的样子（变成深灰） */
  .send-btn:disabled {
    background: #333 !important;
    color: #666 !important;
    border-color: #444 !important;
    box-shadow: none !important;
  }
  
  .send-btn i {
    font-size: 0.9rem !important;
    margin-left: 2px; /* 纸飞机稍微修正在圆圈中心 */
  }

  /* 4. 优化标语清晰度 */
  .ai-warning-text {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important; /* 提高到0.5透明度，看得清但不刺眼 */
    font-size: 0.65rem !important;
    font-weight: 500 !important; /* 稍微加粗一点点 */
    margin-top: 6px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* 增加文字阴影，防止被背景吃掉 */
    letter-spacing: 0.3px;
  }

  /* 5. 解决“拖到底部差一截”的问题 */
  .chat-history {
    padding-bottom: 25px !important; /* 这里的数值决定了最后一条消息离屏幕底部的距离 */
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%); /* 增加一个底部渐变消失效果，更高级 */
    /* 这里控制气泡距离屏幕左右的缝隙 */
    /* 设为 0 就是完全紧贴，设为 10px 就是稍微留点空 */
    padding-left: 10px !important; 
    padding-right: 10px !important;
  }
  /* ==== 侧边栏面板 ==== */
  .side-panel {
    z-index: 1100 !important; /* 确保比顶部栏更高 */
    background: rgba(20, 22, 32, 0.98) !important; /* 移动端背景稍微加深，增加对比度 */
    backdrop-filter: blur(20px) !important; /* 侧边栏也加上磨砂感 */
    -webkit-backdrop-filter: blur(20px) !important;
    height: 100% !important;
    top: 0 !important; /* 确保从最顶部开始，覆盖掉顶部栏 */
  }

  /* 2. 优化侧边栏头部的间距（避开手机刘海/挖孔屏） */
  .panel-header {
    padding-top: env(safe-area-inset-top, 20px) !important; /* 适配 iPhone 刘海屏 */
    height: auto !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }
  /* 3. 让侧边栏更窄一点，看起来更精致 */
  .nav-sidebar, .instances-panel, .controls-panel {
    width: 80% !important; /* 宽度设为屏幕的 80%，留出一点边缘看背景 */
    max-width: 300px !important;
  }

  .panel-header h3 {
    font-size: 0.85rem !important;
  }
  
  .close-panel-btn {
    width: 24px !important;
    height: 24px !important;
  }
  
  .panel-search input {
    font-size: 0.75rem !important;
    padding: 6px !important;
    height: 30px !important;
  }
  
  .nav-sidebar-link {
    margin: 6px 12px !important; /* 稍微缩小左右边距 */
    padding: 10px 14px !important;
    font-size: 0.9rem !important; /* 调大字号，方便手机点击 */
    border-radius: 10px !important;
  }

  .instance-item {
    margin: 6px 12px !important; /* 这里的margin一定要和导航保持一致 */
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
  }

  .instance-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }

  .instance-subtitle {
    font-size: 0.7rem !important;
    opacity: 0.6 !important;
  }
  
  .control-title {
    font-size: 0.75rem !important;
    margin: 8px 0 4px !important;
  }
  
  .control-group {
    margin: 0 12px 15px 12px !important; /* 增加卡片感 */
    padding: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 14px !important;
  }

  .control-title {
    font-size: 0.85rem !important;
    margin-bottom: 10px !important;
    color: var(--primary-light) !important;
  }

  /* 适配我们之前做的那个“替身按钮”选择器 */
  .custom-select-trigger-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }

  /* 原生 Select (如果没被 JS 转换) 也要好看 */
  .styled-select {
    font-size: 0.85rem !important;
    padding: 8px !important;
    height: 38px !important; /* 增加高度，方便手指操作 */
  }
    .nav-sidebar-footer {
    padding: 15px !important;
    background: rgba(0, 0, 0, 0.2) !important; /* 稍微加深底色区分 */
  }

  .sidebar-balance, .sidebar-monthly-card {
    margin-bottom: 8px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .balance-value, .monthly-card-value {
    font-size: 1rem !important;
  }
  .full-btn {
    font-size: 0.75rem !important;
    padding: 8px !important;
    min-height: 32px !important;
  }
  
  .panel-footer .action-btn,
  .panel-footer .create-btn,
  .panel-footer .danger-btn {
    font-size: 0.75rem !important;
    padding: 8px !important;
    height: auto !important;
    min-height: 30px !important;
  }

  .panel-footer .action-btn i {
    font-size: 0.75rem !important;
    margin-right: 5px !important;
  }
  
  .bg-btn {
    padding: 5px 6px !important;
    font-size: 0.75rem !important;
    border-radius: 5px !important;
    height: auto !important;
    min-height: 28px !important;
  }
  
  .bg-btn i {
    font-size: 0.75rem !important;
    margin-right: 3px !important;
  }
  
  .control-item::after {
    font-size: 0.75rem !important;
    right: 8px !important;
  }
  
  .toggle-switch {
    width: 30px !important;
    height: 15px !important;
  }
  
  .toggle-slider:before {
    height: 9px !important;
    width: 9px !important;
    left: 3px !important;
    bottom: 3px !important;
  }
  
  input:checked + .toggle-slider:before {
    transform: translateX(15px) !important;
  }
  
  #streamingStatus {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  
  .toggle-control {
    align-items: center !important;
    height: 20px !important;
  }
  
  .bg-preview {
    height: 50px !important;
    border-radius: 5px !important;
  }
  
  .modal-content {
    padding: 15px !important;
  }
  
  .modal-header {
    padding-bottom: 10px !important;
  }
  
  .modal-footer {
    padding-top: 10px !important;
  }
  
  .modal-btn {
    min-height: 36px !important;
    padding: 8px 12px !important;
  }

.empty-chat-container {
  transform: scale(0.9);
  transform-origin: center center;
  padding: 10px;
}

.empty-chat-icon {
  font-size: 2rem !important;
  margin-bottom: 15px !important;
}

.empty-chat-title {
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
}

.empty-chat-text {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
  max-width: 90%;
}

.view-details-btn {
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  min-height: 36px !important;
  border-radius: 20px !important;
}

  .modal.modal-advanced .modal-content {
      max-width: 95%;
      max-height: 90vh;
  }

  .modal.modal-advanced .modal-header {
      padding: 15px 20px;
  }
  .modal.modal-advanced .modal-header h3 {
      font-size: 1.1rem;
  }

  .modal.modal-advanced .modal-body {
      padding: 20px;
  }

  .modal.modal-advanced .modal-footer {
      padding: 12px 20px;
  }
  
  .modal.modal-advanced .modal-body > div[style*="min-height: 300px"] {
      min-height: 250px;
  }
  .setting-item {
    flex-direction: row;
    align-items: center;
  }
  .setting-item label {
    font-size: 0.8rem;
    margin-bottom: 0;
    margin-right: 8px;
  }
  .setting-item input[type="color"] {
    width: 35px;
    height: 25px;
  }
  .setting-item input[type="range"] {
    margin: 0 5px;
  }
  .opacity-value {
    font-size: 0.8rem;
    min-width: 25px;
  }
  .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .global-apply-setting {
    justify-content: center;
    padding: 5px 0;
  }
  .modal-footer .modal-btn {
    width: 100%;
    justify-content: center;
  }

   /* 调整模态框本身，使其在手机上更合适 */
  .modal.modal-settings-v3 .modal-content-v3 {
    width: 95%;
    max-height: none; /* 移除桌面端的最大高度限制 */
  }

  /* 核心布局改变：将左右结构变为上下结构 */
  .modal.modal-settings-v3 .modal-body-v3 {
    flex-direction: column; /* 从横向排列变为纵向排列 */
    padding: 0; /* 移除内边距，让子元素可以占满全宽 */
  }

  /* --- 步骤1: 将左侧边栏改造为顶部Tab栏 --- */
  .modal.modal-settings-v3 .modal-sidebar-v3 {
    width: 100%; /* 宽度占满 */
    flex-direction: row; /* 内部按钮横向排列 */
    padding: 5px; /* 紧凑的内边距 */
    border-right: none; /* 移除右边框 */
    border-bottom: 1px solid rgba(73, 160, 255, 0.2); /* 添加下边框作为分割线 */
    flex-shrink: 0; /* 防止被压缩 */
    background: rgba(0, 0, 0, 0.3); /* 增加一点背景深度 */
  }

  .modal.modal-settings-v3 .sidebar-tab-v3 {
    flex: 1; /* 让两个按钮平分宽度 */
    justify-content: center; /* 居中图标 */
    padding: 10px 5px; /* 调整按钮内边距 */
    border-left: none; /* 移除左侧的激活指示器边框 */
    border-bottom: 3px solid transparent; /* 准备新的底部激活指示器 */
  }

  /* 关键：隐藏文字，只留图标 */
  .modal.modal-settings-v3 .sidebar-tab-v3 span {
    display: none;
  }

  /* 调整激活状态的样式 */
  .modal.modal-settings-v3 .sidebar-tab-v3.active {
    border-bottom-color: var(--primary-color); /* 激活时显示下划线 */
    border-left-color: transparent; /* 确保左边框被移除 */
    background: rgba(73, 160, 255, 0.1); /* 轻微的背景高亮 */
  }

  /* 隐藏桌面端的竖线激活指示器 */
  .modal.modal-settings-v3 .sidebar-tab-v3.active::after {
    display: none;
  }


  /* --- 步骤2: 调整主内容区域 --- */
  .modal.modal-settings-v3 .modal-main-content-v3 {
    padding: 15px; /* 为内容区添加内边距 */
    overflow-y: auto; /* 让这个区域可以独立滚动 */
  }

  /* --- 步骤3: 优化内容卡片在手机上的显示 --- */
  /* 让触发词的选项网格变为单列，垂直排列 */
  .trigger-rule-card .trigger-options-grid {
    grid-template-columns: 1fr; /* 从两列变为一列 */
    gap: 15px; /* 加大垂直间距，方便触摸 */
  }

  /* 优化触发词的标签和输入框布局 */
  .trigger-rule-card .trigger-item-header {
    flex-direction: column; /* 垂直堆叠标签和输入框组 */
    align-items: stretch; /* 让子元素都占满宽度 */
  }

  .trigger-rule-card .trigger-item-header label {
    padding-top: 0;
    margin-bottom: 8px; /* 在标签下方增加间距 */
  }

  /* --- 步骤4: 优化底部按钮布局 --- */
  .modal-footer-v3 {
    flex-direction: column-reverse; /* 垂直堆叠按钮，保存按钮在最上方 */
    gap: 10px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
  }

  .modal-btn-v3 {
    width: 100%;
    justify-content: center; /* 居中按钮文字和图标 */
  }

  .side-panel.nav-sidebar {
  padding-bottom: 70px; /* 增加一个显著的底部内边距，把所有内部元素向上推 */
  box-sizing: border-box; /* 确保 padding 被计算在100%高度之内，而不是额外增加 */
}
  .scroll-to-bottom-btn {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    right: auto; /* 取消右对齐 */
    left: 50%; /* 水平居中 */
    bottom: 75px; /* 向上移动，避免与输入框重叠 */
    transform: translateX(-50%) translateY(15px); /* 同时处理居中和隐藏动画 */
  }

  .scroll-to-bottom-btn:hover {
    transform: translateX(-50%) scale(1.1); /* 保持居中并放大 */
  }
  
  .scroll-to-bottom-btn.show {
    transform: translateX(-50%) translateY(0); /* 保持居中并显示 */
  }

    /* 调整卡片内边距，让它在手机上不那么拥挤 */
  .custom-switch-card {
    padding: 15px;
  }

  /* 调整输入框和文本域的字体和内边距 */
  .custom-switch-label-input {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .custom-switch-command-textarea {
    font-size: 0.85rem;
    padding: 8px 10px;
    min-height: 50px;
  }

  /* 删除按钮在手机上可以稍微大一点，方便触摸 */
  .delete-custom-switch-btn {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }
  /* =======================================
   新增：修复移动端顶部模型选择框溢出问题
========================================== */
  .header-left, .header-right {
    flex-shrink: 0 !important; /* 禁止两侧区域压缩 */
    display: flex !important;
    gap: 2px !important;
  }

  #customHeaderSelectWrapper {
    flex: 1 !important;        /* 强制占据 1 份权重（剩余全部空间） */
    max-width: 100% !important; /* 移除之前设置的 260px 限制 */
    padding: 0 4px !important;  /* 两侧留一点点呼吸间距 */
    display: flex !important;
    justify-content: center !important;
  }

  .selected-model-name {
    font-size: 0.75rem !important;
    max-width: 180px !important; /* 你可以根据需要调节这个数字，让文字显示更多 */
  }

  .custom-select {
    width: 100% !important;     /* 药丸框宽度填满容器 */
  }

/* ====================================================================
   移动端自定义样式沉浸式全屏适配 (V4.0 - 最终正确版)
======================================================================= */

  /* 选择应用了自定义样式的消息块 */
  .custom-bubbles-active .message,
  .message.has-custom-template {
    /* 1. [核心] 解除最外层容器 85% 的宽度限制 */
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. 强制隐藏头像 */
  .custom-bubbles-active .message-avatar,
  .message.has-custom-template .message-avatar {
    display: none !important;
  }

   /* 3. [核心] 解除内容包装器的宽度限制，让它能真正撑满100% */
  .custom-bubbles-active .message-content-wrapper,
  .message.has-custom-template .message-content-wrapper {
    max-width: 100% !important;
    padding: 2px !important; /* <-- 新增：在这里添加2px的内边距 */
  }


  /* 4. [可选但推荐] 移除聊天历史容器的左右内边距 */
  .custom-bubbles-active .chat-history,
  .has-custom-template .chat-history {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 5. 解决作者自定义CSS内部可能存在的边距问题 */
  .custom-bubbles-active .message-bubble > *,
  .message.has-custom-template .message-bubble > * {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      /* border-radius: 0 !important; <-- 修改：删掉或注释掉这一行 */
  }


 /* 
     6. [终极绝杀] 强制 .message-bubble 本身撑满其父容器 !!!
  */
  .custom-bubbles-active .message-bubble,
  .message.has-custom-template .message-bubble {
      width: 100% !important;
      max-width: 100% !important; /* 覆盖掉 33vw 的限制 */
      display: block !important;    /* 从 inline-block 变为 block，才能撑满 */
      
      /* === NEW: 强制移除 message-bubble 自身的 padding！ === */
      padding: 0 !important; 
  }

  /* 1. 【彻底隐藏】头像 (左边的圆圈/图片) */
  .message.user .message-avatar,
  .message.ai .message-avatar,
  .message-avatar {
    display: none !important;
  }

  /* 2. 【彻底隐藏】名字 (气泡上方的“我”和AI名) */
  .message-sender {
    display: none !important;
  }

  /* 3. 消息外层容器：变成普通块级元素，占满整行 */
  .message {
    display: block !important; /* 从 flex 改为 block */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important; /* 气泡之间的垂直间距 */
  }

  /* 4. 内容包装器：跟进占满整行 */
  .message-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 5. 气泡本体：强制宽度100%，像卡片一样 */
  .message-bubble {
    width: 100% !important;
    max-width: 100% !important; /* 覆盖之前的 94% 或 vw 设置 */
    margin: 0 !important;       /* 移除所有左右边距 */
    
    /* 样式微调 */
    border-radius: 10px !important; /* 圆角稍微改小，更像文档块 */
    box-sizing: border-box !important; /* 确保内边距包含在宽度内 */
  }

  /* 6. 修复：强制阻止 flex 布局对齐干扰 */
  .message.user, .message.ai {
    flex-direction: column !important; /* 方向归位 */
    align-items: stretch !important;   /* 强制拉伸占满 */
  }

  /* 7. 时间戳：统一放到右下角 */
  .message-time {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 6px !important;
    padding-right: 5px !important;
    font-size: 0.7rem !important;
    opacity: 0.7 !important;
  }
  
  /* 1. 作品详情、设置等所有模态框 */
.modal, 
.work-detail-overlay, 
.trigger-detail-modal, 
.image-viewer-modal,
.picker-modal {
    z-index: 1300 !important; /* 必须高于侧边栏的 1100 */
}

}