/* UI优化 - 2024-10-25 */

/* ========================================
   问题1: 登录按钮禁用状态
   ======================================== */

/* 登录按钮禁用状态 */
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ========================================
   问题2: 播客搜索按钮形状（改为方形）
   ======================================== */

/* 搜索按钮强制方形 - 使用固定尺寸 */
.header .header-search .search-btn,
.header-search .search-btn,
#searchBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 搜索按钮内的SVG图标 */
.header-search .search-btn svg,
#searchBtn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* ========================================
   问题3: 积分刷新按钮动画
   ======================================== */

/* 积分刷新按钮旋转动画 */
.refresh-credits-btn.refreshing svg {
    animation: spin 1s linear infinite !important;
}

/* 确保按钮在刷新时不可点击 */
.refresh-credits-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   问题4: 菜单UI优化
   ======================================== */

/* 4a. 积分余额选项高度统一 */
.credits-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    min-height: 48px !important;
    height: 48px !important;
}

/* 4b. 菜单选项文字垂直对齐和间距 */
.menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 var(--spacing-md) !important;
    background: none;
    color: var(--text-secondary) !important;
    text-align: left;
    width: 100%;
    transition: background-color 0.2s;
    font-size: 14px !important;
    border: none;
    min-height: 48px !important;
    height: 48px !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

/* 菜单项图标 - 固定尺寸和对齐 */
.menu-item svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
}

/* 菜单项文字 - 垂直居中 */
.menu-item span {
    flex: 1;
    line-height: 48px !important;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-secondary) !important;
}

/* ========================================
   通用旋转动画
   ======================================== */

/* 标准旋转动画 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 居中旋转动画 - 同时应用translate和rotate */
@keyframes spin-centered {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 确保所有加载动画都旋转 */
.loading-spinner,
.btn-loader,
.refresh-credits-btn.refreshing svg {
    animation: spin 0.8s linear infinite !important;
}

/* ========================================
   其他优化
   ======================================== */

/* 确保所有按钮的点击反馈 */
button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* 防止按钮文字选中 */
button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ========================================
   问题6: 更换音频按钮样式
   ======================================== */

/* 更换音频按钮 - 在标题栏右上角 */
#changeAudioBtn {
    color: var(--primary-color) !important;
}

#changeAudioBtn:active {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* ========================================
   问题5: 结果区域滚动优化
   ======================================== */

/* 禁用整个页面的滚动 */
body {
    overflow: hidden !important;
}

/* 播放器区域布局优化 */
.player-area {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden !important;
}

/* 播放器控制区域 - 固定高度，不滚动 */
.player-section {
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* 结果区域 - 占据剩余空间，独立滚动 */
.result-section {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* 结果标题 - 固定不滚动 */
.result-header {
    flex: 0 0 auto !important;
}

/* 结果内容 - 独立滚动 */
.result-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: var(--spacing-lg) !important;
    /* 确保内容能够完全显示 */
    max-height: 100% !important;
    height: auto !important;
}

/* 智能问答流式内容样式优化 */
#qaStreamContent {
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

/* 优化滚动条样式 */
.result-content::-webkit-scrollbar {
    width: 6px;
}

.result-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.result-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.result-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 验证码输入区域样式 */
.verification-group {
    margin-bottom: 15px;
}

.verification-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.verification-input-wrapper input {
    flex: 1;
    min-width: 0;
}

.verification-status {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
}

.verification-status.success {
    color: #10b981;
}

.verification-status.error {
    color: #ef4444;
}

.verification-status.info {
    color: #3b82f6;
}


/* ========================================
   问题修复: 登录/注册按钮加载动画居中
   ======================================== */

/* 按钮容器 - 使用相对定位 */
.btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 按钮加载动画 - 绝对定位居中 */
.btn-primary .btn-loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-centered 0.6s linear infinite !important;
}

/* ========================================
   问题修复: 获取验证码按钮样式和加载动画
   ======================================== */

/* 获取验证码按钮 - 改为注册按钮的背景色 */
.btn-verification {
    flex-shrink: 0;
    padding: 0 16px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-verification:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.btn-verification:disabled {
    background: #ccc !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 获取验证码按钮加载状态 */
.btn-verification.btn-loading {
    color: transparent;
}

/* 获取验证码按钮加载动画 - 改为深色，居中显示 */
.btn-verification.btn-loading::after {
    content: '';
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin-centered 0.6s linear infinite !important;
}

/* ========================================
   桌面版切换链接样式
   ======================================== */

.desktop-link {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.desktop-link a {
    color: var(--text-secondary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.desktop-link a:hover {
    color: var(--primary-color);
}