/* Waline 紧凑模式 - 完全按照原作者风格 */

/* 移除所有默认的容器限制 */
#waline,
#waline *,
.wl-container,
.wl-container *,
.post-comments,
.post-comments *,
[data-waline],
[data-waline] * {
    box-sizing: border-box !important;
}

/* 父容器样式 */
.post-comments {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 评论容器 - 完全占满，重置所有宽度限制 */
#waline,
[data-waline] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 1.5em 0 !important;
    padding: 0 !important;
    display: block !important;
}

.wl-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 评论输入区 - 有边框的容器 */
.wl-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border: 1px solid #000 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 !important;
    display: block !important;
}

/* 评论编辑器 */
.wl-editor {
    width: 100% !important;
    min-height: 80px !important;
}

.wl-editor textarea {
    width: 100% !important;
    min-height: 80px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 8px 10px !important;
    border: none !important;
    resize: vertical !important;
}

/* 用户信息输入 */
.wl-header {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px dashed #ddd !important;  /* 黑色虚线边框 */
}

.wl-header-item {
    flex: 1 !important;
    min-width: 0 !important;
}

.wl-input {
    width: 100% !important;
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* 编辑器底部工具栏 */
.wl-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-right: 8px !important;  /* 右侧内边距，避免按钮靠边 */
}

.wl-actions {
    display: flex !important;
    gap: 4px !important;
}

/* 右侧信息区（字数和按钮） */
.wl-info {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;  /* 按钮之间的间距 */
}

.wl-info .wl-text-number {
    font-size: 12px !important;
    color: #999 !important;
}

.wl-info button {
    margin: 0 !important;  /* 移除默认margin */
}

/* 提交按钮 - 和原作者一样小 */
.wl-btn {
    height: 26px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #666 !important;
    transition: all 0.3s ease !important;
}

/* 提交按钮 - 黑色默认，绿色悬停 */
.wl-btn.primary {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.wl-btn.primary:hover {
    background-color: #2ecc71 !important;
    border-color: #2ecc71 !important;
}

/* 登录、预览等其他按钮 */
.wl-btn:not(.primary):hover {
    border-color: #999 !important;
    color: #333 !important;
}

/* 工具栏按钮 */
.wl-action button {
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
}

.wl-action button:hover {
    background: #f5f5f5 !important;
    border-radius: 4px !important;
}

/* 评论列表 */
.wl-cards {
    width: 100% !important;
    margin-top: 20px !important;
}

.wl-card-item {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #eee !important;
}

.wl-content {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* 评论元信息 */
.wl-meta {
    font-size: 13px !important;
    color: #999 !important;
}

/* 字数统计 */
.wl-count {
    font-size: 12px !important;
    color: #999 !important;
}

/* 响应式 - 手机端 */
@media (max-width: 768px) {
    #waline {
        margin: 1em 0 !important;
    }
    
    .wl-panel {
        padding: 10px !important;
        border-radius: 6px !important;
    }
    
    .wl-editor textarea {
        min-height: 70px !important;
        font-size: 13px !important;
        padding: 8px !important;
    }
    
    .wl-header {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .wl-header-item {
        width: 100% !important;
    }
    
    .wl-input {
        height: 30px !important;
        font-size: 12px !important;
        padding: 5px 8px !important;
    }
    
    .wl-btn {
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }
    
    .wl-action button {
        width: 28px !important;
        height: 28px !important;
    }
    
    .wl-card-item {
        padding: 10px !important;
    }
    
    .wl-content {
        font-size: 13px !important;
    }
}