* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f7;
    color: #1d1d1f;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    background: #fff;
    z-index: 10;
}

header h1 {
    font-size: 20px;
    font-weight: 600;
}

#settings-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#trends-container {
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.section-title {
    padding: 0 20px;
    font-size: 12px;
    color: #86868b;
    margin-bottom: 8px;
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    padding: 0 15px;
    /* scrollbar-width: none; */
}

/* .horizontal-scroll::-webkit-scrollbar {
    display: none;
} */

/* 补充：为了让滚动条在不同浏览器下有更好的视觉效果，可以定制滚动条样式 */
/* 这是一个可选的优化，如果你觉得默认滚动条太丑 */
.horizontal-scroll::-webkit-scrollbar {
    height: 8px; /* 滚动条的高度 */
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道的背景色 */
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块的颜色 */
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555; /* 鼠标悬停在滑块上时的颜色 */
}

/* Firefox 滚动条样式 (如果需要) */
.horizontal-scroll {
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
    scrollbar-width: thin; /* 'auto' 或 'thin' */
}

.trend-chip {
    background: #f2f2f7;
    padding: 6px 15px;
    border-radius: 20px;
    margin: 0 5px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}

.trend-chip:active {
    background: #e5e5ea;
}

#chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
}

.user-message {
    align-self: flex-end;
    background-color: #007aff;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-message .fetch-audio-btn,
.ai-message .translate-btn,
.ai-message .rewind-btn {
    padding: 8px 15px; /* 适中的内边距，提供舒适的点击区域 */
    border-radius: 20px; /* 大圆角，与.trend-chip风格一致，更显现代和友好 */
    font-size: 14px; /* 字体大小 */
    font-weight: 500; /* 略微加粗，提高可读性 */
    cursor: pointer; /* 鼠标悬停时显示手型，表示可点击 */
    transition: background 0.2s, color 0.2s, transform 0.1s; /* 平滑的背景、文字颜色和点击缩放过渡效果 */
    white-space: nowrap; /* 防止按钮文本换行 */
    display: inline-flex; /* 使用弹性布局，使图标和文本对齐 */
    align-items: center; /* 垂直居中对齐图标和文本 */
    gap: 5px; /* 图标与文本之间的间距 */
    border: none; /* 移除默认按钮边框，保持简洁的视觉效果 */
}

.ai-message .fetch-audio-btn,
.ai-message .translate-btn {
    background-color: #e5e5ea; /* 浅灰色背景，与.trend-chip的:active状态相似 */
    color: #1d1d1f; /* 深色文本，与body文本色一致 */
}

.ai-message .fetch-audio-btn:hover,
.ai-message .translate-btn:hover {
    background-color: #d2d2d7; /* 悬停时背景略深，提供视觉反馈 */
}

.ai-message .fetch-audio-btn:active,
.ai-message .translate-btn:active {
    background-color: #c0c0c5; /* 点击时背景更深 */
    transform: scale(0.98); /* 点击时的微缩效果 */
}

/* 3. "退5秒" 按钮的特定样式 */
/* 使用主色调蓝色，突出其作为音频直接控制操作的重要性 */
.ai-message .rewind-btn {
    background-color: #e5e5ea; /* 浅灰色背景，与#send-btn等主要操作按钮保持一致 */
    color: #1d1d1f; /* 白色文本，与蓝色背景形成对比 */
}

.ai-message .rewind-btn:hover {
    background-color: #d2d2d7; /* 悬停时略深 */
}

.ai-message .rewind-btn:active {
    background-color: #c0c0c5; /* 点击时更深 */
    transform: scale(0.98);
}

/* 4. 音频播放器 (audio) 的样式 */
.ai-message audio {
    width: 100%; /* 占据消息气泡的全部宽度 */
    max-width: 100%; /* 确保不会溢出 */
    margin-top: 10px; /* 与上方消息文本保持距离 */
    border-radius: 10px; /* 圆角与消息气泡的整体风格保持一致 */
    /* 注意：浏览器默认的音频控件样式难以跨浏览器统一，这里主要控制其容器样式 */
}

/* 5. "朗读" 和 "翻译" 按钮的容器样式 */
/* 假设 `aiControls` 变量对应的元素会被添加 `ai-message-controls-group` 类 */
.ai-message-controls-group {
    display: flex; /* 弹性布局，使按钮横向排列 */
    flex-wrap: wrap; /* 允许按钮在空间不足时换行 */
    gap: 8px; /* 按钮之间的间距 */
    margin-top: 10px; /* 与上方消息文本的间距 */
    padding-top: 8px; /* 分隔线与按钮的间距 */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 细分隔线，视觉上将控制区与消息文本分开 */
    align-items: center; /* 垂直居中对齐 */
}

/* 6. 音频播放器和 "退5秒" 按钮的容器样式 */
/* 假设 `wrapper` 变量对应的元素会被添加 `ai-message-audio-player-group` 类 */
.ai-message-audio-player-group {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 元素之间的间距 */
    margin-top: 10px; /* 与上方消息文本的间距 */
    padding-top: 8px; /* 分隔线与元素的间距 */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 细分隔线 */
}

/* 7. 音频播放器在 `.ai-message-audio-player-group` 容器内的调整 */
.ai-message-audio-player-group audio {
    flex-grow: 1; /* 允许音频播放器占据剩余空间 */
    width: auto; /* 宽度由flex布局控制 */
    min-width: 0; /* 确保在空间不足时可以缩小 */
    margin-top: 0; /* 重置之前设置的margin-top，由父容器统一控制间距 */
    border-radius: 8px; /* 略小的圆角，更像一个独立的控件 */
}

/* 8. audio-wrapper 辅助容器样式 */
/* 如果 audio-wrapper 仅用于包裹按钮，可以设置为 `display: contents`，使其子元素直接参与父容器的flex布局 */
.audio-wrapper {
    display: contents;
}

.audio-btn {
    margin-top: 8px;
    font-size: 13px;
    color: #007aff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 8px;
}

#input-container {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
    background: #fff;
    padding-bottom: calc(15px + env(safe-area-inset-bottom)); 
}

#user-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #d2d2d7;
    border-radius: 20px;
    outline: none;
    font-size: 16px;
}

#send-btn {
    background: #007aff;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

.modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal.is-active {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    display: flex;
    flex-direction: column;
    max-height: calc(65vh);
    margin: 20px auto; 
}

.modal-scroll-area {
    flex-grow: 1; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* 改善 iOS 上的滚动体验 */
    /* 可选：为了防止滚动条紧贴内容，可以添加一些右内边距 */
    padding-right: 5px; 
    /* 确保标题和底部按钮不会随着内容滚动 */
    margin-bottom: 15px; /* 在滚动区域和底部按钮之间添加一些间距 */
}


.modal-content h3 {
    margin-bottom: 20px;
}

.modal-content h3,
.modal-actions {
    flex-shrink: 0; 
}

.setting-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.setting-item label {
    font-size: 14px;
    color: #86868b;
}

.setting-item input,
.setting-item select {
    padding: 10px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.primary-btn {
    background: #007aff;
    color: #fff;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-item:hover {
    background: #e8e8e8;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

.audio-controls {
  display: flex; /* 让按钮横向排列 */
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;  /*按钮之间的间距，现代CSS属性 */
  margin-top: 10px; /* 控制与上方文本的间距 */
  padding-top: 8px; /* 控制分隔线与按钮的间距 */
  border-top: 1px solid #e0e0e0; /* 细灰色分隔线 */
  /* 可以根据需要调整颜色和粗细 */
}

.audio-controls button {
  padding: 6px 8px;
  margin-right: 5px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;

  transition: background 0.2s;
}


.audio-controls button.active-control {
    background: #635656; /* 激活时的背景色 */
    color: #fff; /* 激活时文字颜色，如果背景色深，文字颜色需要变浅 */
    border-color: #4a4242; /* 激活时边框颜色 */
}


.translation-text {
    /* 默认隐藏，由 JS 控制显示 */
    /* display: none; */ /* JS 会动态设置 display 属性 */

    margin-top: 10px; /* 与上面的音频控制或原文本保持距离 */
    padding: 10px 15px; /* 内部填充，让文本不紧贴边缘 */
    background-color: #e9f7ef; /* 浅绿色背景，与原消息区分开，表示“新信息” */
    border-left: 4px solid #4CAF50; /* 左侧加一条绿色边框，更显眼 */
    border-radius: 5px; /* 轻微圆角，与聊天气泡风格保持一致 */
    color: #333; /* 文本颜色 */
    font-size: 0.95em; /* 翻译文本可以稍微小一点 */
    line-height: 1.6; /* 增加行高，提高可读性 */
    word-break: break-word; /* 防止长单词溢出，确保文本在容器内换行 */
    white-space: pre-wrap; /* 保留换行符和空格，特别是对于您后端逐句翻译的格式 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 增加一点点阴影，使其浮起 */
}

/* 清空按钮基础样式 */
#clear-chat-btn {
    width: 100%;
    padding: 12px;
    background-color: #fff; /* 背景白色 */
    color: #ff3b30;         /* iOS 标准警示红 */
    border: 1px solid #d2d2d7; /* 边框与 select 一致 */
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

/* 悬停或点击时的反馈 */
#clear-chat-btn:hover {
    background-color: #fff1f0; /* 极浅红色背景 */
    border-color: #ff3b30;
}

#clear-chat-btn:active {
    background-color: #ffe5e5;
    transform: scale(0.98); /* 点击缩放效果 */
}

#scroll-bottom-btn {
    /* 核心定位逻辑 */
    position: absolute;
    right: 20px;          /* 距离右侧距离，与发送按钮对齐 */
    bottom: calc(85px + env(safe-area-inset-bottom));         /* 距离底部高度：input-container高度(约70px) + 额外间距 */
    
    /* 圆形外观 */
    width: 42px;
    height: 42px;
    border-radius: 50%;   /* 完美圆形 */
    
    /* 视觉样式 */
    background-color: #ffffff;
    color: #007aff;       /* 蓝色箭头 */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 加深阴影使其浮起 */
    
    /* 居中箭头 */
    display: flex;        /* 默认隐藏，由JS控制显示 */
    align-items: center;
    justify-content: center;
    font-size: 20px;
    
    z-index: 99;          /* 确保在最顶层 */
    cursor: pointer;
    transition: transform 0.2s, opacity 0.3s;
}

/* 点击时的缩放反馈 */
#scroll-bottom-btn:active {
    transform: scale(0.9);
    background-color: #8f8e8e;
}

#scroll-up-btn {
    /* 核心定位逻辑 */
    position: absolute;
    right: 20px;          /* 距离右侧距离，与发送按钮对齐 */
    bottom: calc(150px + env(safe-area-inset-bottom));         /* 距离底部高度：input-container高度(约70px) + 额外间距 */
    
    /* 圆形外观 */
    width: 42px;
    height: 42px;
    border-radius: 50%;   /* 完美圆形 */
    
    /* 视觉样式 */
    background-color: #ffffff;
    color: #007aff;       /* 蓝色箭头 */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 加深阴影使其浮起 */
    
    /* 居中箭头 */
    display: flex;        /* 默认隐藏，由JS控制显示 */
    align-items: center;
    justify-content: center;
    font-size: 20px;
    
    z-index: 99;          /* 确保在最顶层 */
    cursor: pointer;
    transition: transform 0.2s, opacity 0.3s;
}

/* 点击时的缩放反馈 */
#scroll-up-btn:active {
    transform: scale(0.9);
    background-color: #8f8e8e;
}

/* --- 媒体查询：针对小屏幕进行布局调整 --- */
/* 假设小屏幕的断点为 600px 或更小，你可以根据实际情况调整 */
@media (max-width: 600px) {
    /* 针对音频播放器和“退5秒”按钮的容器 */
    .ai-message-audio-player-group {
        flex-direction: column; /* 垂直堆叠 */
        align-items: flex-start; /* 左对齐 */
    }

    .ai-message-audio-player-group audio {
        width: 100%; /* 音频播放器占据整行 */
        margin-bottom: 8px; /* 与下方按钮的间距 */
    }

    /* 针对“朗读”和“翻译”按钮的容器 */
    .audio-controls {
        flex-direction: column; /* 垂直堆叠 */
        align-items: flex-start; /* 左对齐 */
    }

    /* 让“朗读”和“翻译”按钮也占据整行，或者至少有足够的宽度 */
    .audio-controls .fetch-audio-btn,
    .audio-controls .translate-btn {
        width: 100%; /* 按钮占据整行 */
        justify-content: center; /* 文本居中 */
        margin-bottom: 5px; /* 按钮之间的间距 */
    }
    .ai-message .translate-btn,
    .ai-message .rewind-btn {
        width: 100%; /* 按钮占据整行 */
        justify-content: center; /* 文本居中 */
        margin-bottom: 5px; /* 按钮之间的间距 */
    }
}