/* 改进黑暗模式的基础样式 */
.dark {
    color-scheme: dark; /* 通知浏览器使用暗色滚动条等 */
}

/* 基本样式优化 */
.gradient-bg {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}
.dark .gradient-bg {
    background: linear-gradient(135deg, #161e2e 0%, #1f2937 100%); /* 调整为更中性的深色 */
}

/* 容器背景优化 */
.dark .bg-white, .dark .bg-gray-800 {
    background-color: #232836 !important; /* 稍微变亮，不那么深沉 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 增强阴影 */
}

.dark .bg-gray-700 {
    background-color: #2d3748 !important; /* 更标准的深灰色 */
}

/* 文本颜色优化 */
.dark .text-white, .dark h1, .dark h2, .dark h3, .dark label {
    color: #f3f4f6 !important; /* 稍微柔和的白色 */
}

.dark .text-gray-300 {
    color: #cbd5e1 !important; /* 更亮的辅助文本 */
}

/* 输入输出框样式 */
.dark textarea, .dark input[type="text"] {
    background-color: #2c3444 !important; /* 明确指定输入框背景 */
    border-color: #475569 !important; /* 更亮的边框 */
    color: #e2e8f0 !important; /* 略微调暗，减少刺眼感 */
}

.dark textarea:focus, .dark input[type="text"]:focus {
    border-color: #60a5fa !important; /* 更明亮的焦点边框 */
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important; /* 添加焦点阴影 */
}

.dark textarea::placeholder, .dark input::placeholder {
    color: #64748b !important; /* 更明显的占位符文本 */
}

/* 按钮样式优化 */
.dark .bg-blue-500 {
    background-color: #3b82f6 !important; /* 更鲜明的蓝色按钮 */
}

.dark .bg-blue-500:hover {
    background-color: #2563eb !important; /* 暗蓝色悬停效果 */
}

/* 主题切换效果增强 */
body, .bg-white, .dark .bg-gray-800, textarea, input, button {
    transition: background-color 0.5s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 黑暗模式下的通知样式优化 */
.dark .notification-container .copy-notification {
    background-color: #1e3a8a !important; /* 使用深蓝色而非绿色，避免过度对比 */
    border: 1px solid #3b82f6;
    color: #bfdbfe !important; /* 浅蓝色文本 */
}

.dark .notification-container .copy-notification i {
    color: #60a5fa !important; /* 图标颜色匹配通知整体风格 */
}

/* 滚动条颜色改进 */
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* 更明显的滚动条 */
}

/* 标签页样式 */
.tab-active {
    border-bottom-width: 2px;
    border-color: #3b82f6;
}
.tab:hover:not(.tab-active) {
    border-bottom-width: 2px;
    border-color: #93c5fd;
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4a5568;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 固定高度的通知容器，防止界面跳动 */
.notification-container {
    height: 40px; /* 固定高度，足够容纳通知文本 */
    margin-top: 10px;
    position: relative;
    overflow: hidden; /* 防止内容溢出 */
}

/* 修改通知样式，使用绝对定位而不是hidden */
.copy-notification {
    width: 100%;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.copy-notification:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}

/* 确保在亮色和暗色模式下都能看到 */
.copy-notification i {
    color: #10b981; /* 使用确定的绿色，不依赖主题 */
}

/* 文件拖放区域样式 */
.file-drop-area.drag-over {
    background-color: rgba(59, 130, 246, 0.1);
}

/* 悬停复制效果 */
.hover-copied {
    background-color: rgba(72, 187, 120, 0.1) !important; /* 绿色背景，表示已复制 */
    transition: background-color 0.3s ease;
}

/* 为了更好的用户体验，添加提示气泡 */
.output-container {
    position: relative;
}

.output-container::after {
    content: attr(data-copy-hint);
    position: absolute;
    top: -30px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.output-container.show-copy-hint::after {
    opacity: 1;
    transform: translateY(0);
}

/* 悬停选中效果 */
.hover-selected {
    background-color: rgba(59, 130, 246, 0.15) !important; /* 更明显的选中背景 */
    transition: background-color 0.3s ease;
}

/* 分隔线优化 */
.dark .border-gray-200, .dark .border-gray-700 {
    border-color: #384152 !important; /* 更明显的分隔线 */
}

/* 圆角元素增强 */
.dark .rounded-lg {
    overflow: hidden; /* 确保内部元素不会超出圆角边界 */
}

/* 下拉菜单项增强 */
.dark option {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* 增强黑暗模式文本对比度和主题切换按钮可见性 */

/* 提高文本对比度 */
.dark .text-gray-400, .dark .text-gray-500, .dark .text-gray-600 {
    color: #9ca3af !important; /* 提高辅助文本的亮度 */
}

.dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900 {
    color: #e5e7eb !important; /* 确保主文本足够亮 */
}

/* 增强主题切换按钮 */
.dark .fa-sun {
    color: #fcd34d !important; /* 明亮的黄色太阳图标 */
    font-size: 1.1em; /* 稍微放大图标 */
    filter: drop-shadow(0 0 3px rgba(252, 211, 77, 0.5)); /* 添加发光效果 */
}

/* 主题切换按钮背景 */
.dark #theme-toggle {
    background-color: #374151 !important; /* 明显的按钮背景 */
    border: 1px solid #4b5563 !important; /* 添加边框 */
}

.dark #theme-toggle:hover {
    background-color: #4b5563 !important; /* 悬停时更亮的背景 */
}

/* 增强输入/输出文本区域的对比度 */
.dark #input-text, .dark #output-text, .dark #base64-input, .dark #file-output-text {
    color: #f9fafb !important; /* 几乎纯白的文本 */
    background-color: #1f2937 !important; /* 更深的背景以增强对比 */
    border-color: #4b5563 !important; /* 确保边框可见 */
}

/* 标签和副标题 */
.dark label, .dark .font-medium, .dark .font-semibold {
    color: #f3f4f6 !important; /* 确保标签文本清晰可见 */
}

/* 增强页面标题可见性 */
.dark h1.text-3xl {
    color: white !important; /* 纯白色标题 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加阴影增强可读性 */
}

/* 按钮文本可见性 */
.dark button:not(.bg-blue-500) {
    color: #e5e7eb !important; /* 确保非主要按钮的文本足够亮 */
}

.dark .bg-blue-500 {
    background-color: #2563eb !important; /* 更饱和的蓝色 */
}

/* 增强通知文本对比度 */
.dark .notification-container .copy-notification {
    color: white !important; /* 纯白色通知文本 */
    background-color: #1e40af !important; /* 更明显的蓝色背景 */
}

/* 统一模式控制区域的样式 */
.dark .bg-gray-50.dark\:bg-gray-900 {
    background-color: transparent !important; /* 移除按钮组的深色背景 */
}

/* 调整单选按钮组样式 */
.dark #auto-detect-label, 
.dark #encode-label, 
.dark #decode-label {
    background-color: transparent; /* 移除默认背景 */
    color: #e5e7eb !important; /* 亮色文本 */
    border: 1px solid transparent; /* 透明边框 */
}

/* 选中状态样式 */
.dark #auto-detect-label.bg-blue-100, 
.dark #encode-label.bg-blue-100, 
.dark #decode-label.bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important; /* 半透明蓝色背景 */
    border-color: #3b82f6 !important; /* 蓝色边框 */
}

/* 悬停效果 */
.dark #auto-detect-label:hover,
.dark #encode-label:hover, 
.dark #decode-label:hover {
    background-color: rgba(75, 85, 99, 0.3) !important; /* 轻微灰色背景 */
}

/* 禁用状态下的样式 */
.dark #manual-mode-container.opacity-50 {
    opacity: 0.7 !important; /* 提高不透明度，使其更可见 */
}

/* 分隔线样式 */
.dark .bg-gray-300.dark\:bg-gray-700 {
    background-color: #4b5563 !important; /* 更亮的分隔线 */
}

/* 单选按钮本身 */
.dark input[type="radio"] {
    accent-color: #3b82f6; /* 使用蓝色作为单选按钮的颜色 */
    opacity: 0.9; /* 保持一定的不透明度 */
}

/* 整个模式选择区背景 */
.dark .bg-gray-50.dark\:bg-gray-900.rounded-lg {
    border: 1px solid #4b5563 !important; /* 添加边框使区域更明显 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; /* 轻微阴影 */
}

/* 分享对话框样式 */
#share-dialog {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#share-dialog.active {
    opacity: 1;
    visibility: visible;
}

#share-dialog .bg-white {
    transform: scale(0.95);
    transition: transform 0.3s;
}

#share-dialog.active .bg-white {
    transform: scale(1);
}

/* 社交媒体分享按钮 */
#share-dialog button i {
    width: 1em;
    text-align: center;
}

/* 分享通知动画 */
@keyframes fade-in-out {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

#share-notification.show {
    display: block;
    animation: fade-in-out 3s forwards;
}

/* 分享按钮悬停效果 */
#share-button {
    position: relative;
}

#share-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s;
}

#share-button:hover::after {
    width: 100%;
}

/* RTL支持 - 从右到左语言的布局调整 */
html[dir="rtl"] body {
    text-align: right;
}

/* 调整边距方向 */
html[dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[dir="rtl"] .ml-4 {
    margin-left: 0;
    margin-right: 1rem;
}

html[dir="rtl"] .mr-4 {
    margin-right: 0;
    margin-left: 1rem;
}

/* 图标方向调整 */
html[dir="rtl"] .fa-chevron-down,
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

/* 表单和控件布局调整 */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .text-left {
    text-align: right;
}

html[dir="rtl"] .text-right {
    text-align: left;
}

/* 圆角调整 */
html[dir="rtl"] .rounded-l-md {
    border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .rounded-r-md {
    border-radius: 0.375rem 0 0 0.375rem;
}

/* 输入框内部位置调整 */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea {
    direction: rtl;
}

/* 下拉菜单位置调整 */
html[dir="rtl"] .right-0 {
    right: auto;
    left: 0;
}

/* 增强RTL支持的布局调整 */
html[dir="rtl"] .fa-chevron-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .fa-long-arrow-alt-right:before {
    content: "\f30a"; /* 使用左箭头图标 */
}

/* RTL布局下的表格和表单 */
html[dir="rtl"] .grid-cols-2 {
    direction: rtl;
}

html[dir="rtl"] .items-center {
    flex-direction: row-reverse;
}

/* 历史记录项和信息卡片调整 */
html[dir="rtl"] .history-item .flex,
html[dir="rtl"] .info-card .flex {
    flex-direction: row-reverse;
}

/* 文字方向特殊处理 - 代码和技术内容保持LTR */
html[dir="rtl"] code, 
html[dir="rtl"] .code-sample,
html[dir="rtl"] #output-text,
html[dir="rtl"] #file-output-text {
    direction: ltr;
    text-align: left;
}

/* 语言特定字体设置 */
html[lang="ja"] body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html[lang="ko"] body {
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

html[lang="ar"] body {
    font-family: "Arial Arabic", "Tahoma", sans-serif;
    letter-spacing: 0;
}

html[lang="ru"] body {
    font-family: "Arial", "Helvetica", sans-serif;
}

/* 确保CJK(中日韩)字符正确显示 */
/* Ensure CJK (Chinese, Japanese, Korean) characters display correctly */
html[lang="zh-CN"] .text-base,
html[lang="ja"] .text-base,
html[lang="ko"] .text-base {
    line-height: 1.8;
}

/* 为阿拉伯语优化输入框 */
/* Optimize input fields for Arabic language */
html[lang="ar"] textarea,
html[lang="ar"] input[type="text"] {
    font-size: 1.1rem;
}

/* 加载指示器样式 */
/* Loading indicator styles */
.loading-translation {
    position: relative;
}

.loading-translation::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    animation: loading-bar 2s infinite;
    z-index: 9999;
}

@keyframes loading-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 语言切换过渡动画 */
/* Language switching transition animation */
.language-transition {
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* 隐藏复制按钮但保留功能 */
/* Hide copy button but preserve functionality */
#copy-output, .copy-output-btn, [id$="copy-output"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;  /* 防止按钮阻挡其他交互 */  /* Prevent buttons from blocking other interactions */
}

/* 强制显示自动选择功能的勾选框 */
/* Force display of auto-select function checkbox */
#hover-copy {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* 增强悬停选中效果 */
/* Enhance hover selection effect */
#output-text.hover-active {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.2s ease;
}

/* 添加对日语字体的支持 */
/* Add support for Japanese fonts */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansjp/v52/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.0.woff2) format('woff2');
}

body.ja-JP,
html[lang="ja"] * {
  font-family: 'Noto Sans JP', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial !important;
}

/* 添加对阿拉伯语字体的支持 */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansarabic/v18/nwpxtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlhQ5l3sQWIHPqzCfyGyvu_stFQO.woff2) format('woff2');
}

body.ar-SA,
html[lang="ar"] * {
  font-family: 'Noto Sans Arabic', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial !important;
}

/* 添加对印地语字体的支持 */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansdevanagari/v25/TuGOUUNzXI5FBtUq5a8bh68BJxxEVam7tWlRdRhtCC4WMBTe.woff2) format('woff2');
}

body.hi-IN,
html[lang="hi"] * {
  font-family: 'Noto Sans Devanagari', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial !important;
}

/* 添加对俄语字体的支持 */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v30/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* 增强RTL语言支持 */
html[dir="rtl"] .history-item {
  text-align: right;
}

html[dir="rtl"] .history-item .flex {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mr-1, 
html[dir="rtl"] .mr-2, 
html[dir="rtl"] .mr-4 {
  margin-right: 0 !important;
}

html[dir="rtl"] .mr-1 {
  margin-left: 0.25rem !important;
}

html[dir="rtl"] .mr-2 {
  margin-left: 0.5rem !important;
}

html[dir="rtl"] .mr-4 {
  margin-left: 1rem !important;
}

/* SVG 图标样式 */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.svg-icon svg {
  width: 1em;
  height: 1em;
}

/* 保持和原 Font Awesome 相同的 margin 规则 */
.mr-1 svg, .mr-2 svg {
  margin-right: inherit;
}

/* 深色模式背景色修复 - 更暗的背景 */
.dark #output-mode-indicator {
  background-color: #0c1b36 !important; /* 更暗的蓝色背景 */
  border-color: #193054 !important; /* 更暗的边框 */
}

.dark #browse-files,
.dark .file-drop-area .browse-link {
  background-color: #1e293b !important; /* 更暗的背景色 */
  border-color: #334155 !important; /* 更暗的边框 */
}

/* 确保文本在深色背景上仍然可读 */
.dark #output-mode-indicator {
  color: #93c5fd !important; /* 亮蓝色文本 */
}

.dark #browse-files,
.dark .file-drop-area .browse-link {
  color: #e2e8f0 !important; /* 亮灰色文本 */
}

/* 深色模式文件解码按钮背景色修复 */
.dark #file-decode-btn {
  background-color: #1a2234 !important; /* 更暗的背景色 */
  border-color: #334155 !important; /* 更暗的边框 */
}

.dark #file-decode-btn:hover {
  background-color: #273349 !important; /* 悬停时更暗的背景色 */
}