/**
 * 通用模态框组件库
 * 适用于：过滤器、语音包、做装卡片、正则、藏身处、灵体等所有分享系统
 * 包含4个通用模态框组件的样式
 * 
 * 依赖关系：
 * - 依赖 variables.css（CSS变量）
 * - 依赖 components.css（基础模态框 + 评论基础样式）
 * - 依赖 share-detail.css（密钥显示样式）
 * 
 * 模态框列表：
 * 1. 分享链接模态框 (.share-link-modal)
 * 2. 评论模态框扩展 (.comment-modal-extended)
 * 3. 密钥显示模态框（复用 share-detail.css）
 * 4. 密钥验证模态框 (.verify-key-modal)
 */

/* ========== 通用模态框动画 ========== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal.show .modal-content {
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 1. 分享链接模态框 ========== */
.share-link-display {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.share-link-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
    line-height: 1.4;
    user-select: all;
    cursor: text;
}

.share-link-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.share-link-display .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ========== 2. 评论模态框扩展样式 ========== */
/* 基础样式复用 components.css 第1157-1281行 */

/* 评论项主容器 - 参考正则搜索的样式（无左边框） */
.comment-item {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-md);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
}

.comment-date {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.comment-content {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.comment-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* 楼中楼回复按钮（从 filter-share.css 迁移） */
.comment-reply-btn {
    padding: 4px 12px;
    font-size: 0.8rem;
    background: var(--accent-blue-light);
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.comment-reply-btn:hover {
    background: var(--accent-blue);
    color: white;
}

/* 评论区版本标签（从 filter-share.css 迁移） */
.comment-version {
    display: inline-block;
    padding: 2px 6px;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}

/* 回复列表容器（从 filter-share.css 迁移） */
.comment-replies {
    margin-top: var(--spacing-md);
}

/* 单条回复项（从 filter-share.css 迁移） */
.reply-item {
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

/* 加载更多回复按钮容器 */
.load-more-replies {
    padding: var(--spacing-sm);
    text-align: center;
}

.load-more-replies button {
    background: var(--accent-blue-light);
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.load-more-replies button:hover {
    background: var(--accent-blue);
    color: white;
}

/* 隐藏的回复容器 */
.hidden-replies-container {
    display: none;
}

.hidden-replies-container.show {
    display: block;
}

/* 回复表单容器 */
.reply-form-container {
    display: none;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    animation: modalFadeIn 0.2s ease;
}

.reply-form-container.show {
    display: block;
}

.reply-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.reply-form-header span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.reply-form-header strong {
    color: var(--text-primary);
}

.reply-form-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    transition: color 0.2s;
}

.reply-form-close:hover {
    color: var(--text-primary);
}

.reply-textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    resize: none;
    min-height: 60px;
    transition: border-color 0.2s;
}

.reply-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.reply-form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    justify-content: flex-end;
}

.reply-form-actions button {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.reply-form-actions .btn-cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.reply-form-actions .btn-cancel:hover {
    background: var(--bg-tertiary);
}

.reply-form-actions .btn-submit {
    background: var(--accent-blue);
    color: white;
    border: none;
}

.reply-form-actions .btn-submit:hover {
    background: #0056d2;
}

/* 评论分页 */
.comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

.comments-pagination button {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 32px;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.comments-pagination button:hover:not(:disabled) {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--accent-blue-light);
}

.comments-pagination button.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.comments-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== 3. 密钥显示模态框 ========== */
/* 完全复用 share-detail.css，无需额外样式 */

/* ========== 4. 密钥验证模态框 ========== */
.verify-key-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s;
}

.verify-key-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

/* ========== 评论数量徽章组件 ========== */
/* 用于统一显示各种按钮上的评论数量 */

/* 方案1：右上角红色徽章（适用于圆形图标按钮） */
.comment-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent-red);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    pointer-events: none;
}

/* 方案2：内联数字（适用于文字按钮） */
.comment-count-inline {
    display: inline-block;
    margin-left: var(--spacing-xs);
    padding: 2px 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    min-width: 20px;
    text-align: center;
}

/* 方案3：括号内数字（适用于简洁文字按钮） */
.comment-count-bracket {
    font-weight: 400;
    color: var(--text-tertiary);
}

/* 适配不同卡片结构的评论按钮 */

/* 过滤器分享卡片（.share-card__action-btn） */
.share-card__action-btn {
    position: relative; /* 确保徽章定位正确 */
}

/* 语音包卡片（.sound-btn） */
.sound-btn {
    position: relative; /* 确保徽章定位正确 */
}

/* 正则搜索卡片（.regex-card__action-btn） */
.regex-card__action-btn {
    position: relative; /* 确保徽章定位正确 */
}

/* 当按钮有评论时的视觉提示 */
.has-comments {
    position: relative;
}

/* ========== 通知动画 ========== */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .share-link-display {
        flex-direction: column;
    }
    
    .share-link-display .btn {
        width: 100%;
    }
    
    .reply-form-container {
        padding: var(--spacing-sm);
    }
    
    .comments-pagination {
        flex-wrap: wrap;
    }
}