/* ==========================================================================
   Twikoo Theme: Modern Adil Style (整合巨型图标修复版)
   Target: Clean, Rounded, Soft Shadow
========================================================================== */

/* --- 核心变量 --- */
:root {
    --tk-primary: #49b1f5;        /* 主题蓝 */
    --tk-bg-gray: #f7f8fa;        /* 浅灰背景 */
    --tk-radius: 12px;            /* 圆角大小 */
    --tk-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
    --tk-text: #333333;
}

/* 1. 评论区主容器 */
#twikoo {
    font-family: -apple-system, system-ui, "Microsoft YaHei", sans-serif !important;
    padding: 20px;
}

/* 2. 输入区域美化 (输入框、昵称、发送按钮) */
#twikoo .tk-input {
    background: #fff;
    border-radius: var(--tk-radius);
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: var(--tk-shadow);
}

#twikoo .el-textarea__inner {
    background-color: var(--tk-bg-gray) !important;
    border: none !important;
    border-radius: var(--tk-radius) !important;
    padding: 15px !important;
    resize: none !important;
    transition: all 0.3s;
}

#twikoo .el-textarea__inner:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(73, 177, 245, 0.2) !important;
}

/* 昵称/邮箱输入框 - 胶囊风格 */
#twikoo .tk-meta-input .el-input__inner {
    background-color: var(--tk-bg-gray) !important;
    border: none !important;
    border-radius: 20px !important;
    text-align: center;
    height: 40px !important;
}

/* 发送按钮 - 极简风格 */
#twikoo .el-button--primary {
    background-color: var(--tk-bg-gray) !important;
    border: none !important;
    color: #999 !important;
    border-radius: 20px !important;
    padding: 0 25px !important;
    height: 40px !important;
    transition: all 0.3s;
}

#twikoo .el-button--primary:hover {
    background-color: var(--tk-primary) !important;
    color: #fff !important;
}

/* 3. 评论列表卡片 */
#twikoo .tk-comment {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border-radius: var(--tk-radius);
    border: 1px solid #f6f6f6;
    box-shadow: var(--tk-shadow);
}

/* 头像圆角 */
#twikoo .tk-avatar {
    border-radius: 50% !important;
}

/* ==========================================================================
   重点：驯服巨型图标 (针对 image_f910d4 出现的问题)
========================================================================== */

/* 限制 UserAgent 系统标签的容器 */
#twikoo .tk-extra {
    display: inline-flex !important;
    align-items: center;
    background-color: var(--tk-bg-gray) !important;
    color: #999 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    margin-right: 8px !important;
    margin-top: 8px !important;
    border: none !important;
}

/* 强制限制所有在标签内的图标大小，防止它撑爆屏幕 */
#twikoo .tk-extra img, 
#twikoo .tk-extra svg,
#twikoo .tk-tag img,
#twikoo .tk-tag svg,
#twikoo .tk-icon img {
    width: 14px !important;    /* 强制宽度 14px */
    height: 14px !important;   /* 强制高度 14px */
    margin-right: 4px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    object-fit: contain !important; /* 保持图标比例不失真 */
}

/* 针对部分主题可能出现的背景图溢出 */
#twikoo .tk-extra-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

/* 4. 子评论虚线连接 */
#twikoo .tk-replies {
    border-left: 1px dashed #eee;
    margin-left: 2rem;
    padding-left: 1rem;
}

#twikoo .tk-replies .tk-comment {
    box-shadow: none;
    border: none;
    background: transparent;
    border-bottom: 1px dashed #eee;
}

/* 让代码高亮插件的语言标签更精致 */
.prism-show-language-label {
    background: #49b1f5 !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
}

/* 点击放大图片时的遮罩层美化 */
.tk-lightbox {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px); /* 给放大后的背景加点毛玻璃 */
}