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

/* 移动端界面紧凑化方案 - 更新优化版 */
@media (max-width: 780px) {
  /* 全局变量调整 */
  :root {
    --panel-width: 180px !important; /* 侧边栏宽度增加 */
  }
  

  /* ==== 顶部导航栏 ==== */
  .chat-header {
    height: 45px !important;
    padding: 0 8px !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border-bottom: none !important;
    z-index: 10 !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: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    margin: 0 3px !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.8) !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;
  }
  
.input-area {
  /* position: fixed !important;  <-- 删除或注释掉这一行 */
  /* bottom: 0 !important;         <-- 删除或注释掉这一行 */
  /* left: 0 !important;           <-- 删除或注释掉这一行 */
  /* right: 0 !important;          <-- 删除或注释掉这一行 */
  padding: 6px 8px !important;
  background-color: rgba(20, 22, 30, 0.85) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 100 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

  .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;
  }
  
.chat-history {
  /* padding-bottom: 120px !important; */ /* <-- 删除或注释掉这行 */
}

  
  .input-container {
    align-items: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-height: 75% !important;
    margin-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
  }
  
  #chatInput {
    font-size: 0.85rem !important;
    min-height: 27px !important;
    max-height: 60px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    padding: 6px 12px !important;
    flex-grow: 1;
    margin-right: 8px;
  }
  
  .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;
  }
  
  .send-btn {
    width: 24px !important;
    height: 24px !important;
    transform: scale(1) !important;
    transform-origin: center right !important;
    margin-right: 0px !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: transparent !important;
  }

  .send-btn i {
    font-size: 0.9rem !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;
  }
  
  /* ==== 侧边栏面板 ==== */
  .side-panel {
    width: var(--panel-width) !important;
  }
  
  .panel-header {
    padding: 10px 8px !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;
  }
  
  .instance-item {
    padding: 8px !important;
  }
  
  .instance-title {
    font-size: 0.75rem !important;
  }
  
  .instance-subtitle {
    font-size: 0.6rem !important;
  }
  
  .control-title {
    font-size: 0.75rem !important;
    margin: 8px 0 4px !important;
  }
  
  .styled-select {
    font-size: 0.75rem !important;
    padding: 6px !important;
    height: 30px !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%;
    height: 85vh; /* 在手机上可以更高一些 */
    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; /* 让这个区域可以独立滚动 */
    height: 100%; /* 确保它能撑满剩余空间 */
  }

  /* --- 步骤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); /* 保持居中并显示 */
  }
}