/* =========================================================
   Creawith Search 2.0 关键词筛选池样式表 (Final Visual Edition)
   - 严格对齐 6px / 4px / 34px / 13px / 21px 黄金比例参数
   - 中性极简灰，拒绝红绿噪音，纯依靠几何秩序区分层级
   - 100% 保留原生色块容器与等分底盘操作双按钮
========================================================= */

.cw-filter-keywords-block {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 分组间距 16px */
    padding: 0 4px; /* 适度保留左右微距，融入 Drawer 内文档流 */
}

/* 顶部“详细筛选”大主标题（无缝衔接大盘，锁死高对比层级） */
.cw-keywords-main-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85); /* 85% 权威黑色 */
    margin-bottom: -4px; /* 紧凑压低，咬合下方第一个分组标题 */
    user-select: none;
}

/* 容器外壳组 */
.cw-keywords-container-group {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 标题与内容间距 6px */
}

/* 标题样式（字号保持 13px 经典层级，黑度提权至下方大项同等权重） */
.cw-keywords-container-title {
    font-size: 13px;
    font-weight: 600; /* 强化字重 */
    color: rgba(0, 0, 0, 0.85); /* 100% 同步黑度：85% 权威主黑色 */
    user-select: none;
}

/* 🌟 输入区域（100% 完整保留原装 3% 雾感背景、圆角及内边距） */
.cw-keywords-input-zone {
    background: rgba(0, 0, 0, 0.03); /* 3% 雾感背景 */
    border: 1px solid rgba(0, 0, 0, 0.08); /* 8% 极细边框 */
    border-radius: 6px; /* 6px 黄金圆角 */
    padding: 10px 13px; /* 像素级对齐呼吸感内边距 */
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    
    /* 强制多行/单行中的所有原子元素沿交叉轴绝对中心线对称齐平 */
    align-items: center; 
    
    gap: 8px 6px; /* 行间距 8px，token 间距 6px */
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

/* 容器 Focus 激活态（边框细腻加深至 20% 墨黑） */
.cw-keywords-input-zone.is-focused {
    border-color: rgba(0, 0, 0, 0.20);
    background: rgba(0, 0, 0, 0.04);
}

/* 🌟 隐形尾随输入框（像素级物理微调，绝对纠正光标与未分词文字偏上病灶） */
.cw-keywords-ghost-input {
    flex: 1;
    min-width: 60px;
    height: 22px; 
    
    /* 🌟 关键修正：改用 normal 并赋予精准顶边距，强制 Caret 指针和首个文字回归几何正中心 */
    line-height: normal; 
    box-sizing: border-box;
    padding: 2px 0 0 0 !important; /* 顶边距 2px 无感下压，绝杀偏上错位 */
    margin: 0 !important;
    
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.85); /* 输入文本高对比权威黑 */
}
.cw-keywords-ghost-input::placeholder {
    color: rgba(0, 0, 0, 0.25); /* 25% 静默淡字 */
}

/* =========================================================
   Token 胶囊设计 (Behance 级精致、高对比度、几何对称)
========================================================= */
.cw-keyword-token {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.05); /* 5% 精纯中性偏冷雾灰 */
    color: rgba(0, 0, 0, 0.85); /* 提升字色黑度至 85%，强化在浅白底上的阅读骨骼感 */
    font-size: 12px; /* 精致缩放一级，让出容器留白 */
    padding: 0px 8px; /* 左右拓宽至 8px，视觉比例更为沉稳 */
    
    /* 像素级同步：锁死 22px 与等高行高，保障第一个输入的 token 和光标处于绝对水平线 */
    height: 22px;
    line-height: 22px;
    
    border-radius: 4px; /* 4px 黄金代币圆角 */
    user-select: none;
    box-sizing: border-box;
    will-change: opacity, transform, scale;
    
    /* 进场动效：0.18s 机械平滑托举 */
    animation: cwTokenIn 0.18s cubic-bezier(.33,1,.68,1) forwards;
}

.cw-keyword-token .cw-token-text {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 删除微型按钮 ✕（在中轴线上实现绝对垂直居中） */
.cw-keyword-token .cw-token-close {
    margin-left: 5px;
    font-size: 10px;
    height: 10px;
    line-height: 9px; /* 微调内文字型物理重心 */
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.cw-keyword-token .cw-token-close:hover {
    opacity: 0.9;
}

/* 退格保护 */
.cw-keyword-token.is-locked {
    transform: scaleX(0.95);
    background: rgba(0, 0, 0, 0.12); /* 稍微变暗锁死提示 */
    opacity: 0.7;
}

/* 退场动效：0.12s 坍缩湮灭 */
.cw-keyword-token.is-leaving {
    animation: cwTokenOut 0.12s cubic-bezier(.33,1,.68,1) forwards;
}

@keyframes cwTokenIn {
    0% { opacity: 0; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes cwTokenOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; }
}

/* =========================================================
   🌟 优化：操作提示区（级联高纯净度 SVG ⓘ 神经元集成）
========================================================= */
.cw-keywords-instruction {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.35); /* 35% 极淡优雅中性灰 */
    margin-top: -4px; /* 贴紧上方输入框 */
    margin-bottom: 2px;
    padding: 0 4px;
    user-select: none;
    
    /* 启用 Flex 强制保证文本与伪元素图标在中轴线上绝对齐平 */
    display: inline-flex;
    align-items: center;
}

/* 🌟 纯 CSS 注入大厂画廊标配的 ⓘ 极简工程几何图标 */
.cw-keywords-instruction::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    /* 精准控释：使用 35% 浓度中性灰的超轻量矢量数据流，零外部图片资产依赖 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* =========================================================
   操作区底盘按钮 (100% 原装保留 Action Sandbox 经典块面逻辑)
========================================================= */
.cw-keywords-action-area {
    display: flex;
    gap: 13px; /* 按钮间距 13px */
    margin-top: 8px;
}

.cw-keywords-btn-reset,
.cw-keywords-btn-apply {
    flex: 1;
    height: 34px; /* 统一 34px 物理高度 */
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(.33,1,.68,1);
    outline: none;
}

/* 恢复默认按钮 */
.cw-keywords-btn-reset {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.55);
}
.cw-keywords-btn-reset:hover {
    background: rgba(0, 0, 0, 0.02);
    color: #000000;
    border-color: rgba(0, 0, 0, 0.15);
}

/* 应用筛选按钮（草稿态静默禁用，有内容点亮） */
.cw-keywords-btn-apply {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: rgba(0, 0, 0, 0.25); /* 默认静默 */
    pointer-events: none;
}

/* 有草稿变动时被点亮的状态 */
.cw-keywords-btn-apply.is-active {
    background: #111111; /* 深色沉稳底色 */
    color: #FFFFFF;
    pointer-events: auto;
}
.cw-keywords-btn-apply.is-active:hover {
    background: #222222;
}