/* 页面整体 */
    html, body { height: 100%; margin: 0; background: #eef1f6; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    body { display: flex; flex-direction: column; }

    /* 聊天窗口 */
  .chat-window { 
    max-width: 900px; 
    margin: 10px auto; 
    display: flex; 
    flex-direction: column; 
    height: calc(100vh - 20px); /* 默认聊天区高度略小于全屏 */
  }

    /* 顶部标题栏 */
    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 6px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 8px;
    }
    .chat-header h4 { margin: 0; font-weight: 600; color: #333; }

    /* 消息区 */
  .messages {
   flex: 1;
      overflow-y: auto;
      background: #fff;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.05);
      position: relative;
      padding-bottom: 80px; /* 留出输入区 */
  }

    .msg { display: flex; gap: 12px; margin-bottom: 14px; }
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #cfd6e4;
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1rem;
    }
    .bubble {
      background: #f1f4ff;
      padding: 10px 14px;
      border-radius: 16px;
      max-width: 75%;
      position: relative;
      word-break: break-word;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: background 0.2s;
    }
    .bubble:hover { background: #e0e6ff; }
    .meta { font-size: 12px; color: #999; margin-bottom: 4px; }
    .username-badge { font-weight: 600; color: #3b3b3b; }

    .msg img {
      max-width: 220px;
      border-radius: 10px;
      display: block;
      margin-top: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform 0.2s;
    }
    .msg img:hover { transform: scale(1.02); }

    .copy-btn {
      font-size: 12px;
      padding: 2px 6px;
      margin-top: 4px;
    }

    /* 输入区 */
  .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 12px;
    background: #eef1f6;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -3px 8px rgba(0,0,0,0.08);
    z-index: 999;
  }
    .input-area input[type="text"] {
      flex: 1;
      border-radius: 20px;
      padding: 10px 16px;
      border: 1px solid #ccc;
      outline: none;
      transition: all 0.2s;
    }
    .input-area input[type="text"]:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 4px rgba(13,110,253,0.3);
    }

    .input-area .btn {
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    
    
    
    
  /* 快捷短语提示框 */
  #quickPhraseBox {
    position: absolute;
    bottom: 60px; /* 在输入框正上方 */
    left: 12px;
    right: 12px;
    max-width: 876px; /* = 900 - padding */
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
  }
  #quickPhraseBox .phrase-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
  }
  #quickPhraseBox .phrase-item:hover {
    background: #f0f4ff;
  }
    /* 模态框 */
    #nameModal .modal-body h6 { margin-bottom: 10px; font-weight: 500; color: #333; }
    #nameModal .form-control { border-radius: 8px; }

    /* 固定按钮 */
    #scrollBottomBtn, #clearChatBtn {
      width: 50px;
      height: 50px;
      z-index: 999;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      box-shadow: 0 3px 6px rgba(0,0,0,0.15);
      transition: all 0.2s;
    }
      .messages-adj {
    margin-bottom: 80px; /* 保证消息不会被输入区遮挡 */
  }
    #scrollBottomBtn:hover, #clearChatBtn:hover { transform: scale(1.08); }

    /* 旋转动画 */
    .spin { animation: spin 1s linear infinite; }
    @keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
    
    
    /* 工具箱 */
    .tool-btn {
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.tool-btn:hover {
  background-color: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.tool-btn img {
  border: 1px solid #eee;
  background-color: #fff;
  object-fit: cover;
}