Neo-ZQYY/docs/h5_ui/css/ai-icons.css

/* ========== AI 标识通用样式 ========== */

/* --- 默认配色（无 JS 时的 fallback，靛色） --- */
.ai-inline-icon, .ai-title-badge {
    --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea;
}

/* --- 配色系（渐变背景，badge 用更深的 --ai-from-deep / --ai-to-deep） --- */
.ai-color-red    { --ai-from: #e74c3c; --ai-to: #f39c9c; --ai-from-deep: #c0392b; --ai-to-deep: #e74c3c; }
.ai-color-orange { --ai-from: #e67e22; --ai-to: #f5c77e; --ai-from-deep: #ca6c17; --ai-to-deep: #e67e22; }
.ai-color-yellow { --ai-from: #d4a017; --ai-to: #f7dc6f; --ai-from-deep: #b8860b; --ai-to-deep: #d4a017; }
.ai-color-blue   { --ai-from: #2980b9; --ai-to: #7ec8e3; --ai-from-deep: #1a5276; --ai-to-deep: #2980b9; }
.ai-color-indigo { --ai-from: #667eea; --ai-to: #a78bfa; --ai-from-deep: #4a5fc7; --ai-to-deep: #667eea; }
.ai-color-purple { --ai-from: #764ba2; --ai-to: #c084fc; --ai-from-deep: #5b3080; --ai-to-deep: #764ba2; }

/* --- 1. 嵌入 Icon（行首小图标，轻量化） --- */
.ai-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ai-from) 45%, white), color-mix(in srgb, var(--ai-to) 50%, white));
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
/* 嵌入 Icon 内的机器人 SVG */
.ai-inline-icon svg {
    width: 13px;
    height: 13px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
/* 微光动画（慢速、柔和、宽光带） */
.ai-inline-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,0.18) 45%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.18) 55%,
        transparent 70%
    );
    animation: ai-shimmer 12s ease-in-out infinite;
}
@keyframes ai-shimmer {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50%      { transform: translateX(100%) rotate(45deg); }
}

/* --- 2. Title AI 标识（标题行右侧，浅色背景+主题色文字+边框） --- */
.ai-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 3px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ai-from) 8%, white), color-mix(in srgb, var(--ai-to) 10%, white));
    border: 1px solid color-mix(in srgb, var(--ai-from) 35%, transparent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ai-from-deep);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    /* 呼吸脉冲：模拟 AI 思考进度感 */
    animation: ai-pulse 3s ease-in-out infinite;
}
@keyframes ai-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ai-pulse-r, 102), var(--ai-pulse-g, 126), var(--ai-pulse-b, 234), 0); }
    50%      { box-shadow: 0 0 8px 2px rgba(var(--ai-pulse-r, 102), var(--ai-pulse-g, 126), var(--ai-pulse-b, 234), 0.35); }
}
/* 各配色的脉冲 RGB 值 */
.ai-color-red .ai-title-badge,
.ai-title-badge.ai-color-red    { --ai-pulse-r: 231; --ai-pulse-g: 76;  --ai-pulse-b: 60; }
.ai-color-orange .ai-title-badge,
.ai-title-badge.ai-color-orange { --ai-pulse-r: 230; --ai-pulse-g: 126; --ai-pulse-b: 34; }
.ai-color-yellow .ai-title-badge,
.ai-title-badge.ai-color-yellow { --ai-pulse-r: 212; --ai-pulse-g: 160; --ai-pulse-b: 23; }
.ai-color-blue .ai-title-badge,
.ai-title-badge.ai-color-blue   { --ai-pulse-r: 41;  --ai-pulse-g: 128; --ai-pulse-b: 185; }
.ai-color-indigo .ai-title-badge,
.ai-title-badge.ai-color-indigo { --ai-pulse-r: 102; --ai-pulse-g: 126; --ai-pulse-b: 234; }
.ai-color-purple .ai-title-badge,
.ai-title-badge.ai-color-purple { --ai-pulse-r: 118; --ai-pulse-g: 75;  --ai-pulse-b: 162; }

.ai-title-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* 主题色发光 */
    filter: drop-shadow(0 0 2px var(--ai-from));
}
.ai-title-badge-icon svg {
    width: 16px;
    height: 16px;
}
/* 高光扫过（柔和、微弱） */
.ai-title-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,0.15) 43%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.15) 57%,
        transparent 70%
    );
    animation: ai-shimmer 14s ease-in-out infinite;
}

/* --- 星级评价（备注卡片右上角，14px） --- */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.star-rating .star {
    position: relative;
    width: 14px;
    height: 14px;
    cursor: default;
}
.star-rating .star svg {
    width: 14px;
    height: 14px;
}
/* 空星 */
.star-rating .star .star-empty {
    color: #e8e8e8;
}
/* 满星 / 半星用 clip 实现 */
.star-rating .star .star-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
/* 颜色方案：浅黄→黄→橙→深红橙（0-10 分） */
.star-rating[data-score="0"]  { --star-color: #d4d4d4; }
.star-rating[data-score="1"]  { --star-color: #f5e6a3; }
.star-rating[data-score="2"]  { --star-color: #f0d86e; }
.star-rating[data-score="3"]  { --star-color: #f0c93a; }
.star-rating[data-score="4"]  { --star-color: #f0b429; }
.star-rating[data-score="5"]  { --star-color: #f09c1a; }
.star-rating[data-score="6"]  { --star-color: #ed8a0a; }
.star-rating[data-score="7"]  { --star-color: #e67e22; }
.star-rating[data-score="8"]  { --star-color: #e05d1a; }
.star-rating[data-score="9"]  { --star-color: #d44a12; }
.star-rating[data-score="10"] { --star-color: #c0392b; }
.star-rating .star .star-fill svg {
    color: var(--star-color);
}
/* 高分微光 */
.star-rating[data-score="9"] .star .star-fill svg,
.star-rating[data-score="10"] .star .star-fill svg {
    filter: drop-shadow(0 0 2px rgba(192,57,43,0.4));
}

/* 备注卡片内星级评价：删除按钮左侧，垂直居中 */
.note-card-wrap {
    position: relative;
}
.note-card-wrap .star-rating {
    /* 不再绝对定位，改为在 flex 布局中自然排列 */
    flex-shrink: 0;
    align-self: center;
}