style.css

/*
  Yummy! 样式表 (v0.4.4)

  本样式表定义了 Yummy! 扩展注入到 ChatGPT 页面的所有UI元素的视觉表现。
  其核心设计哲学是：
  1.  **最小侵入**：尽可能不破坏 ChatGPT 的原始布局和样式。
  2.  **视觉反馈**：通过颜色、过渡动画和悬停效果，为用户的每一个操作提供清晰、即时的反馈。
  3.  **响应式交互**：UI 元素（如评价栏）应在需要时出现，在不需要时隐藏，保持界面整洁。
*/

/* 
  段落容器 (.yummy-paragraph-container)
  这是由 content.js 动态创建的、用于包裹每一个可评价内容块（如 <p>, <h1>, <li> 等）的 <div> 容器。
  它的主要作用有两个：
  1.  **提供悬停目标**：下面的 `:hover` 规则利用这个容器来触发其内部评价栏的显示。
  2.  **提供定位上下文**：虽然在 v0.4.4 版本中其 position 是 static，导致评价栏实际上是相对于更大的父容器定位，
      但在逻辑上，它本应是评价栏的直接定位锚点。这是后续版本可能需要优化的点。
*/
.yummy-paragraph-container {
    /* 
      **核心变更：创建定位上下文**
      通过将 position 设置为 relative，这个容器现在成为了其内部
      所有 `position: absolute` 子元素的定位锚点。
      这是解决评价栏位置不稳定问题的关键。
    */
    position: relative;
    /*
      **核心交互增强：扩大悬停区域**
      通过增加左内边距（padding-left），我们让这个容器向左侧空白区域延伸，
      从而创造了一个更大的、不可见的鼠标悬停目标区域。
      同时，通过一个等值的负外边距（margin-left），我们将容器在视觉上拉回到
      原始位置，确保其内部的文本内容（<p>, <h1> 等）不会发生水平位移。
      这样做的结果是，用户的鼠标现在可以悬停在段落左侧的任何空白处来唤出评价栏，
      极大地改善了可用性。
      85px 这个值是与评价栏的 left: -85px 相互呼应的。
    */
    padding-left: 85px;
    margin-left: -85px;
}

/*
  评价栏 (.yummy-rating-bar)
  这是包含"喜欢"和"不喜欢"按钮的核心UI。
*/
.yummy-rating-bar {
    /* 
      关键定位：通过绝对定位，将评价栏从正常的文档流中脱离，使其可以"悬浮"在页面上。
      它会相对于最近的、非 static 定位的祖先元素进行定位。
      在本次修改后，这个祖先元素就是 .yummy-paragraph-container。
    */
    position: absolute;
    /*
      **新增：垂直定位**
      将其固定在相对父容器顶部 2px 的位置。由于父容器位置是稳定的，
      因此评价栏的垂直位置也随之稳定。
    */
    top: 2px;
    /* 
      水平定位：-85px 是一个精心选择的"魔术数字"，目的是让评价栏正好出现在
      ChatGPT 对话气泡左侧的空白区域，既不遮挡文本，又方便鼠标触及。
    */
    left: -85px;
    width: 80px;

    /* 使用 Flexbox 布局，确保内部的两个按钮能水平、居中排列 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;

    /* 
      默认隐藏与平滑过渡：
      默认状态下评价栏完全透明（不可见）。当其透明度变化时（见下面的:hover规则），
      这个过程会在 0.2 秒内平滑完成，而不是生硬地闪现/消失。
    */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    padding: 2px 0;
}

/*
  核心交互逻辑：当鼠标悬停在段落容器上时，其内部的评价栏变为不透明（可见）。
*/
.yummy-paragraph-container:hover .yummy-rating-bar {
    opacity: 1;
}

/*
  评价按钮 (.yummy-rating-button)
  定义了 😋 和 🤮 这两个按钮的通用样式。
*/
.yummy-rating-button {
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
    border-radius: 4px;
    /* 轻微的放大动画，提供动态反馈 */
    transition: transform 0.1s ease-in-out;
    line-height: 1;
    /* 
      禁止选中文本：防止用户在点击时意外选中 Emoji 字符，
      确保其交互行为更像一个真正的"按钮"。
    */
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ and Edge */
    user-select: none;
    /* Standard syntax */
}

.yummy-rating-button:hover {
    transform: scale(1.2);
}

/*
  闪烁动画 (@keyframes yummy-flash-background)
  这是一个独立的动画效果，用于在需要时（如对标题进行初次评级）给予用户非侵入式的视觉提示。
  动画过程为：背景从透明 -> 半透明灰色 -> 透明。
*/
@keyframes yummy-flash-background {
    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(229, 231, 235, 0.7);
        /* A light gray, semi-transparent */
    }
}

/*
  闪烁效果应用类 (.yummy-flash)
  任何被 JS 动态添加了这个类的元素，都会播放上面的闪烁动画。
*/
.yummy-flash {
    animation: yummy-flash-background 0.5s ease-in-out;
}

/*
  评价状态高亮 (.yummy-liked, .yummy-disliked)
  这是用户评价后最主要的视觉反馈。
  为了实现"不影响排版"的带内边距圆角高亮，我们采用了伪元素方案。
*/
.yummy-liked,
.yummy-disliked {
    /* 
      1. 移除直接的背景色，因为它无法实现带 padding 的圆角而不影响布局。
    */
    background-color: transparent !important;
    /* 
      2. 创建新的堆叠上下文 (stacking context)。
      这是让 z-index: -1 在 ::before 伪元素上按预期工作的关键。
      任何非 `static` 的 `position` 值都会创建堆叠上下文。
    */
    position: relative;
    /*
      3. 确保元素自身在堆叠上下文中位于 z=0 的层级。
    */
    z-index: 0;
}

/*
  高亮伪元素 ("衬底")
  这才是真正的高亮色块。它作为元素的 ::before 伪元素存在。
*/
.yummy-liked::before,
.yummy-disliked::before {
    /* 必须项：伪元素需要 content 属性才能被渲染 */
    content: '';
    /* 
      关键定位：将其绝对定位于父元素（即 .yummy-liked/.yummy-disliked 本身）
    */
    position: absolute;
    /*
      关键的 z-index：值为 -1 会将这个伪元素置于其父元素堆叠上下文的最底层，
      也就是在父元素的文本内容的"下方"。这就是"衬底"效果的来源。
    */
    z-index: -1;
    
    /* 
      创建"内边距"效果：通过使用负值，我们将伪元素的边界扩展到其父元素的边界之外。
      例如 top: -4px; 意味着伪元素的上边界比其父元素的上边界还要高 4px。
      这就在不使用 `padding` 属性、不挤压内部文本空间的情况下，创造了视觉上的内边距。
    */
    top: -2px;
    bottom: -2px;
    left: -6px;
    right: -6px;

    /*
      圆角效果：直接在作为色块的伪元素上应用。
    */
    border-radius: 6px;
}

/*
  为两种状态分别设置"衬底"的颜色。
*/
.yummy-liked::before {
    background-color: rgba(221, 247, 221, 0.8);
}

.yummy-disliked::before {
    background-color: rgba(255, 221, 221, 0.8);
}

/*
  嵌套列表处理：这是一个针对特殊场景的防御性规则。
  当一个已经被高亮的元素（如 <li>）内部又包含一个列表（<ul> 或 <ol>）时，
  为了避免高亮背景色在子列表上重复叠加导致颜色过深，
  这条规则会强制将子列表的背景设回白色，保证可读性。
*/
.yummy-liked>ul,
.yummy-liked>ol,
.yummy-disliked>ul,
.yummy-disliked>ol {
    background-color: #FFFFFF !important;
}

/* --- Control Panel --- */
/* 
  右侧控制面板 (.yummy-control-panel)
  这是一个固定在屏幕右侧的悬浮面板，作为所有全局操作按钮的容器。
  它的显隐和折叠都依赖于 class 的切换和 CSS transition 动画。
*/
.yummy-control-panel {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    padding: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s ease-in-out;
}

.yummy-control-panel>*:not(#yummy-collapse-toggle) {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateX(0);
}

.yummy-control-panel.collapsed>*:not(#yummy-collapse-toggle) {
    opacity: 0;
    transform: translateX(calc(100% + 30px));
    pointer-events: none;
}

.yummy-control-panel.dimmed {
    opacity: 0.3;
    pointer-events: none;
}

.yummy-control-button {
    cursor: pointer;
    font-size: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* vNext: 为提示气泡提供定位上下文 */
}

.yummy-control-button:hover {
    transform: scale(1.1);
    background-color: #e0e0e0;
}

.yummy-control-button.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
    box-shadow: 0 0 10px #4CAF50;
}

/* vNext: 重构自动发送提示气泡的样式 */
#yummy-autosend-tooltip {
    position: absolute;
    /* vNext: 定位在按钮左侧 */
    right: 110%; 
    top: 50%;
    transform: translateY(-50%);
    
    width: 160px; /* vNext: 减小宽度 */
    background-color: #333;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer; /* vNext: 整个气泡可点击 */
    
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    
    /* vNext: 初始状态稍微向右偏移，实现左移进入效果 */
    transform: translate(5px, -50%);
}

#yummy-autosend-tooltip.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%);
}

/* vNext: 气泡右侧的小箭头 */
#yummy-autosend-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%; /* vNext: 箭头在右侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333; /* vNext: 箭头指向右 */
}

/* vNext: 为“不再提示”的链接添加样式 */
.yummy-tooltip-dismiss-link {
    text-decoration: underline;
    color: #ccc;
    cursor: pointer;
    font-size: 11px;
    margin-top: 8px;
    display: block;
    text-align: right;
}

.yummy-tooltip-dismiss-link:hover {
    color: #fff;
}


/* --- Selection Highlight & Popups --- */
/* 
  划词高亮样式 (.yummy-selection-highlight)
  这是通过 JS 将用户选中的文本用 <span> 包裹后，应用给这个 <span> 的样式。
  黄底黑字是最传统、最醒目的高亮方案。
*/
.yummy-selection-highlight {
    background-color: yellow !important;
    color: black !important;
    cursor: pointer;
}

#yummy-quick-highlight-button {
    position: fixed;
    z-index: 10000;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease-in-out;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
}

#yummy-quick-highlight-button:hover {
    transform: scale(1.1);
}

body.yummy-selection-mode-active {
    cursor: text !important;
}

#yummy-cursor-follower {
    position: absolute;
    display: none;
    z-index: 10001;
    font-size: 16px;
    pointer-events: none;
    top: 0;
    left: 0;
}

/* vNext: Toast 提示框的模块化重构 */

/* 1. 通用外观样式 */
#yummy-copy-toast {
    position: absolute; /* 改为 absolute，相对于收集面板定位 */
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(40, 40, 40, 0.9);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10003;
    pointer-events: none;
    
    /* 默认隐藏 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
}

/* 2. "屏幕居中" 模式 (替换旧的 "面板内固定" 模式) */
#yummy-copy-toast.yummy-toast-panel-mode {
    top: 50px; /* 从顶部 50px 的位置出现 */
    left: 50%;
    transform: translate(-50%, -20px); /* 初始位置在上方，为滑入动画做准备 */
}
#yummy-copy-toast.yummy-toast-panel-mode.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0); /* 滑入到最终位置 */
}

/* 3. "跟随光标" 模式 */
#yummy-copy-toast.yummy-toast-cursor-mode {
    position: fixed;
    transform: translate(15px, 15px); /* 初始位置在光标右下方 */
}
#yummy-copy-toast.yummy-toast-cursor-mode.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(10px, 10px); /* 微调动画效果 */
}

/* 4. 新增: "固定于脚部之上" 模式 */
#yummy-copy-toast.yummy-toast-footer-mode {
    /* 关键: 定位在收集面板内部，并水平居中 */
    left: 50%;
    bottom: 75px; /* 向上偏移，位于脚部之上 */
    transform: translate(-50%, 20px); /* 水平居中并为滑入动画做准备 */
    /* 确保 toast 在 collectionPanel 内部 */
    right: auto; 
}
#yummy-collection-panel #yummy-copy-toast.yummy-toast-footer-mode {
    position: absolute;
}

#yummy-copy-toast.yummy-toast-footer-mode.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0); /* 滑入到最终位置 */
}

/* 通用: Toast 内的“成功”对勾图标 */
#yummy-copy-toast::before {
    content: '✓';
    font-weight: bold;
    color: #4CAF50; /* 绿色 */
    font-size: 16px;
}

/* --- Collection Panel (Left Drawer) --- */
#yummy-collection-panel {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100%;
    background-color: rgba(249, 250, 251, 0.98);
    border-left: 1px solid #e5e7eb;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

#yummy-collection-panel.visible {
    right: 0;
}

#yummy-collection-header {
    padding: 12px 16px;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#yummy-collection-header:hover {
    background-color: #f3f4f6;
}

#yummy-collection-pin-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

#yummy-collection-pin-btn:hover {
    background-color: #e5e7eb;
    color: #111827;
}

#yummy-collection-pin-btn.pinned {
    color: #3b82f6;
    transform: translateY(-50%) rotate(-45deg);
}

#yummy-collection-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

#yummy-collection-clear-btn:hover {
    background-color: #e5e7eb;
    color: #111827;
}

#yummy-collection-content {
    overflow-y: auto;
    padding: 8px;
    flex-grow: 1;
    /* v0.5.15 修复: 移除flex布局以确保 overflow 生效 */
}

/* v0.5.14 新增：自定义美化滚动条 */
#yummy-collection-content::-webkit-scrollbar {
    width: 6px;
}
#yummy-collection-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
#yummy-collection-content::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 10px;
}
#yummy-collection-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


.yummy-collection-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    transition: background-color 0.2s, box-shadow 0.2s;
    display: flex;
    overflow: hidden;
    margin-bottom: 8px; /* v0.5.15: 用 margin 代替 gap */
    position: relative; /* vNext: 为弹窗提供定位上下文 */
}
.yummy-collection-item:last-child {
    margin-bottom: 0; /* 移除最后一个元素的下边距 */
}

/* v0.5.14: 左侧状态条/复选框区域 */
.yummy-item-status-bar {
    flex-shrink: 0;
    width: 28px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}
.yummy-item-status-bar:hover {
    background-color: #e0e0e0;
}

/* v0.5.14 & v0.5.15 & vNext: 状态条内的对勾图标 (用CSS绘制) */
.yummy-item-status-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 12px;
    border: solid black; /* vNext: 勾勾改为黑色 */
    border-width: 0 3px 3px 0;
    /* vNext: 修正对勾的方向和动画。先统一平移至中心，再进行旋转。同时调整垂直平移比例(-60%)以修正视觉中心。*/
    transform: translate(-50%, -60%) rotate(45deg) scale(0.8);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* vNext: 新增颜色编码。为不同类型的条目定义不同的状态条颜色。 */
/* 绿色高亮段落的样式 */
.yummy-collection-item.type-liked.selected .yummy-item-status-bar {
    background-color: #c8e6c9; /* vNext: 再次调整的柔和绿色 */
}
.yummy-collection-item.type-liked.selected .yummy-item-status-bar:hover {
    background-color: #b9d9ba;
}

/* 黄色高亮语句的样式 */
.yummy-collection-item.type-highlight.selected .yummy-item-status-bar {
    background-color: #fff59d; /* vNext: 再次调整的柔和黄色 */
}
.yummy-collection-item.type-highlight.selected .yummy-item-status-bar:hover {
    background-color: #fff176;
}


/* v0.5.14: 当条目被选中时，显示对勾 */
.yummy-collection-item.selected .yummy-item-status-bar::before {
    opacity: 1;
    /* vNext: 修复BUG。确保选中状态也保持旋转，并且放大到正常尺寸，而不是变回 "L" 形。 */
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
}

/* v0.5.14: 右侧文本内容区域 */
.yummy-item-text-content {
    padding: 10px 12px;
    flex-grow: 1; /* 新增: 让此元素填满剩余空间 */
    cursor: pointer;
    /* vNext: 使用 max-height 和渐变蒙版来替代 line-clamp */
    max-height: 90px; /* 约等于4行文字的高度 (14px * 1.6 * 4) */
    overflow: hidden;
    position: relative; /* 为 ::after 伪元素提供定位上下文 */
    transition: max-height 0.3s ease-in-out; /* 为可能的展开功能预留过渡 */
}

/* vNext: 优雅的渐变遮罩层 */
.yummy-item-text-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; /* 渐变的高度 */
    background: transparent; /* vNext: 默认透明 */
    transition: background 0.2s; /* 添加过渡效果 */
    pointer-events: none; /* 确保不影响下层元素的鼠标事件 */
}

/* vNext: 仅当 JS 检测到文本溢出时，才应用渐变效果 */
.yummy-item-text-content.is-overflowing::after {
    background: linear-gradient(to bottom, transparent, white);
}

.yummy-collection-item.starred {
    box-shadow: 0 0 0 2px #ffc107; /* 用box-shadow代替border，避免影响布局 */
}

/* vNext: 为被截断的条目添加悬浮预览弹窗的样式 */
#yummy-preview-tooltip {
    visibility: hidden; /* 默认隐藏 */
    width: 300px; /* 弹窗宽度 */
    background-color: rgba(30, 30, 30, 0.95); /* 半透明深色背景 */
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    position: fixed; /* 使用 fixed 定位，避免被父容器裁剪 */
    z-index: 10001; /* 确保在最顶层 */
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none; /* 确保弹窗本身不捕获鼠标事件 */
    white-space: pre-wrap; /* 保持文本换行 */
    font-size: 13px; /* 字体可以稍小一些 */
    line-height: 1.5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.yummy-collection-item:hover {
    background-color: #f9fafb;
}

/* v0.5.14: 重命名复制时的闪烁效果类 */
@keyframes yummy-flash-animation {
    from { background-color: #d1fae5; }
    to { background-color: #ffffff; }
}
.yummy-collection-item.copied-flash {
    animation: yummy-flash-animation 0.7s ease;
}


/* v0.5.15: 全新的收集面板脚部样式 */
#yummy-collection-footer {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
    background-color: #f5f5f5;
}

/* vNext: 删除旧的全选区域样式 */
/*
#yummy-footer-select-all-area {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: 6px;
    border: 1px solid #ccc;
}
*/

/* vNext: 为新的脚部控制区域（绿色和黄色）定义通用样式 */
.yummy-footer-control-area {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.yummy-footer-control-area:hover {
    background-color: #d0d0d0;
}

/* 通用的“对勾”和“横线”图标样式 */
.yummy-footer-control-area::before,
.yummy-footer-control-area::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
}

/* 对勾 */
.yummy-footer-control-area::before {
    width: 7px;
    height: 14px;
    border: solid black; /* vNext: 勾勾改为黑色 */
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    opacity: 0;
}

/* 横线 (用于中间态) */
.yummy-footer-control-area.indeterminate::after {
    width: 16px;
    height: 3px;
    background-color: black; /* vNext: 横线改为黑色 */
    border-radius: 1px;
    opacity: 1;
}

/* 当控件被选中时，显示对勾，隐藏横线 */
.yummy-footer-control-area.checked::before {
    opacity: 1;
}
.yummy-footer-control-area.checked.indeterminate::after {
    opacity: 0;
}


/* 为绿色和黄色的控制器定义独特的激活颜色 */
#yummy-footer-select-liked-area.checked,
#yummy-footer-select-liked-area.indeterminate {
    background-color: #c8e6c9; /* vNext: 更新为柔和绿色 */
    border-color: #b9d9ba;
}
#yummy-footer-select-liked-area.checked:hover,
#yummy-footer-select-liked-area.indeterminate:hover {
    background-color: #b9d9ba;
}

#yummy-footer-select-highlight-area.checked,
#yummy-footer-select-highlight-area.indeterminate {
    background-color: #fff59d; /* vNext: 更新为柔和黄色 */
    border-color: #fff176;
}
#yummy-footer-select-highlight-area.checked:hover,
#yummy-footer-select-highlight-area.indeterminate:hover {
    background-color: #fff176;
}


#yummy-collection-copy-selected-btn {
    flex-grow: 1; /* 占满剩余空间 */
    padding: 6px 12px;
    font-size: 14px;
    /* vNext: 字体加粗，并更新为蓝色系 */
    font-weight: bold;
    border-radius: 6px;
    border: none;
    background-color: #e7f3fe; /* 淡蓝色背景 */
    color: #1c64f2; /* 主题蓝色文本 */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
}

#yummy-collection-copy-selected-btn:hover {
    background-color: #dbeafe; /* 悬停时颜色加深 */
    color: #1a56d1;
}

/* --- Instruction Menu --- */
#yummy-instruction-menu {
    position: fixed;
    z-index: 10002;
    width: 230px;
    background-color: rgba(249, 250, 251, 0.98);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0.2s;
    display: flex;
    flex-direction: column;
}

#yummy-instruction-menu.visible {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0s;
}

.yummy-instruction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.yummy-instruction-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.yummy-instruction-close-btn {
    cursor: pointer;
    font-size: 20px;
    color: #6b7280;
    line-height: 1;
    padding: 2px;
    border-radius: 4px;
}

.yummy-instruction-close-btn:hover {
    color: #111827;
    background-color: #f3f4f6;
}

.yummy-instruction-list {
    list-style: none;
    padding: 8px;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}

.yummy-hint-text {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 400;
}

.yummy-instruction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    white-space: nowrap;
}

.yummy-instruction-item .emoji {
    font-size: 16px;
}

.yummy-instruction-item.selected {
    background-color: #e7f3fe;
    color: #1c64f2;
    font-weight: 500;
}

.yummy-instruction-item.yummy-separator {
    height: 1px;
    background-color: #e5e7eb;
    margin: 6px 0;
    padding: 0;
    cursor: default;
}

/* --- Global Alert Box --- */
.yummy-global-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.yummy-global-alert-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s 0s;
}

.yummy-global-alert-box {
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0; /* 为淡入效果新增 */
}

.yummy-global-alert-overlay.visible .yummy-global-alert-box {
    transform: scale(1);
    opacity: 1; /* 为淡入效果新增 */
}

.yummy-global-alert-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.yummy-global-alert-message {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    white-space: pre-wrap; /* To respect \n */
}

.yummy-global-alert-details {
    font-size: 13px;
    color: #6b7280;
    margin: 12px 0 0 0;
    white-space: pre-wrap; /* To respect \n */
}

.yummy-global-alert-footer {
    margin-top: 24px;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: flex-end; /* 按钮靠右对齐 */
    gap: 12px; /* 设置按钮之间的间距 */
}

.yummy-global-alert-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.yummy-global-alert-button:hover {
    background-color: #2563eb;
}

.yummy-global-alert-button.yummy-alert-btn-secondary {
    background-color: #e5e7eb;
    color: #374151;
}
.yummy-global-alert-button.yummy-alert-btn-secondary:hover {
    background-color: #d1d5db;
}

.yummy-global-alert-button.yummy-alert-btn-danger {
    background-color: #ef4444;
    color: white;
}
.yummy-global-alert-button.yummy-alert-btn-danger:hover {
    background-color: #dc2626;
}


/* --- Easter Eggs --- */

/* Sugar Rush: Container for candies */
.yummy-sugar-rush-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10010;
    overflow: hidden;
}

/* Sugar Rush: Individual candy emoji */
.yummy-candy-emoji {
    position: absolute;
    bottom: -50px; /* Start from below the screen */
    font-size: 24px;
    animation-name: yummy-sugar-float;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    will-change: transform, opacity;
}

@keyframes yummy-sugar-float {
    from {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translateY(-110vh) translateX(var(--x-drift, 0)) rotate(720deg);
        opacity: 0;
    }
}

/* Empty Copy Lyric: Temporary item */
.yummy-collection-item-temp-egg {
    background-color: #fefce8; /* A very light yellow */
    border-color: #facc15;
    transition: all 0.5s ease-in-out;
    max-height: 100px; /* Initial max-height for transition */
}

#yummy-collection-mode-toggle {
    /* vNext: 全新的开关样式 */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 24px;
    background-color: #e5e7eb; /* 关闭状态的背景色 */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* 移除移动端的点击高光 */
}

#yummy-collection-mode-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

#yummy-collection-mode-toggle.markdown-mode {
    background-color: #3b82f6; /* 开启状态的背景色 */
}

#yummy-collection-mode-toggle.markdown-mode::before {
    transform: translateX(20px);
}