/*
  @title        岁己同款气泡样式
  @description  气泡弹幕+昵称+头像
  @author       带鱼
  @updated      February 3, 2026, 23:59:00 AM CST
  @version      1.0.3
  @thumbnail    https://laplace-simple-css.vercel.app/public/sample.png
*/

/*
url用这个（也可以自行去laplace获取，记得【样式-基准字号】要设为28，深色模式可开关）：
https://chat.laplace.live/obs/25788785?altDanmakuLayout=false&baseFontSize=28&colorScheme=light&connectionMode=direct&limitEventAmount=50&limitStickyAmount=10&loginSyncServer=&loginSyncToken=3cpphrBGif6HLwFKmFiuBY%402Np5gkX4dfz52hmxUaPwkc&remoteTheme=https%3A%2F%2Flaplace-simple-css.vercel.app%2Fdanmaku.css&showAutoDanmaku=false&showAvatar=true&showAvatarFrame=false&showCurrentRank=false&showDanmaku=true&showEnterEvent=false&showEnterEventCurrentGuardOnly=false&showFollowEvent=false&showGift=true&showGiftEffect=true&showGiftEffectAbove=15&showGiftFree=false&showGiftHighlightAbove=15&showGiftPriceAbove=0.5&showGiftStickyAbove=29.99&showGuardBadge=false&showLottery=true&showMedal=false&showMedalLightenedOnly=false&showModBadge=true&showPhoneNotVerified=false&showRedEnvelop=true&showStickyBar=true&showSuperChat=true&showSystemMessage=true&showToast=true&showUsername=true&showWealthMedal=false&useCst=false
*/

/* 基于 HTML 结构的终极适配版 */
@layer template {
  /* 1. 全局背景透明 */
  body { background-color: rgba(0, 0, 0, 0); }
  
  /* 亮色模式下 */
  [data-theme='light'] {
    /* --event-superchat-top-text: #ffffff; */
  }

  /* 全局事件变量 */
  .event {
    /* 应用全局自定义字体 */
    /* --font-sans 为 LAPLACE Chat 内置变量，可调用非衬线字体 */
    --event-font-family: 'Changa One', var(--font-sans);

    /* 修改此变量可以改变描边颜色，请据直播间配色进行微调 */
    --shadow-color: #000;
    --text-shadow: -2px -2px var(--shadow-color), -2px -1px var(--shadow-color), -2px 0px var(--shadow-color), -2px 1px var(--shadow-color), -2px 2px var(--shadow-color), -1px -2px var(--shadow-color), -1px -1px var(--shadow-color), -1px 0px var(--shadow-color), -1px 1px var(--shadow-color), -1px 2px var(--shadow-color), 0px -2px var(--shadow-color), 0px -1px var(--shadow-color), 0px 0px var(--shadow-color), 0px 1px var(--shadow-color), 0px 2px var(--shadow-color), 1px -2px var(--shadow-color), 1px -1px var(--shadow-color), 1px 0px var(--shadow-color), 1px 1px var(--shadow-color), 1px 2px var(--shadow-color), 2px -2px var(--shadow-color), 2px -1px var(--shadow-color), 2px 0px var(--shadow-color), 2px 1px var(--shadow-color), 2px 2px var(--shadow-color);

    /* 弹幕用户名颜色变量 */
    --event-username-text-0: #ffffff;
    --event-username-text-1: #ffffff;
    --event-username-text-2: #ffffff;
    --event-username-text-3: #ffffff;
    --event-username-text-streamer: #ffffff;

    /* ========== 事件背景透明度变量 ========== */
    /* 调整此值可统一控制所有礼物、SC、上舰的背景透明度 */
    /* 范围：0（完全透明）到 1（完全不透明） */
    /* 默认值：0.99（99% 不透明） */
    --event-bg-opacity: 0.99;
    /* ========== 弹幕气泡透明度变量 ========== */
    --danmaku-bubble-opacity: 0.98;

    /* 大礼物背景颜色变量 - 使用统一透明度变量 */
    /* --event-gift-bg-1: rgba(55, 126, 224, var(--event-bg-opacity));
    --event-gift-bg-2: rgba(82, 183, 67, var(--event-bg-opacity));
    --event-gift-bg-3: rgba(255, 208, 67, var(--event-bg-opacity));
    --event-gift-bg-4: rgba(255, 145, 41, var(--event-bg-opacity));
    --event-gift-bg-5: rgba(242, 68, 68, var(--event-bg-opacity));
    --event-gift-bg-6: rgba(160, 0, 51, var(--event-bg-opacity)); */
    

    /* 醒目留言（SC）背景颜色变量 - 使用统一透明度变量 */
    /* --event-superchat-top-bg-1: rgba(16, 67, 255, var(--event-bg-opacity));
    --event-superchat-top-bg-2: rgba(16, 167, 255, var(--event-bg-opacity));
    --event-superchat-top-bg-3: rgba(255, 235, 16, var(--event-bg-opacity));
    --event-superchat-top-bg-4: rgba(255, 124, 16, var(--event-bg-opacity));
    --event-superchat-top-bg-5: rgba(255, 40, 16, var(--event-bg-opacity));
    --event-superchat-top-bg-6: rgba(255, 16, 64, var(--event-bg-opacity));

    --event-superchat-bg: rgba(0, 0, 0, var(--event-bg-opacity));
    --event-superchat-bg-1: rgba(48, 42, 209, var(--event-bg-opacity));
    --event-superchat-bg-2: rgba(32, 137, 194, var(--event-bg-opacity));
    --event-superchat-bg-3: rgba(221, 159, 36, var(--event-bg-opacity));
    --event-superchat-bg-4: rgba(209, 117, 42, var(--event-bg-opacity));
    --event-superchat-bg-5: rgba(209, 59, 42, var(--event-bg-opacity));
    --event-superchat-bg-6: rgba(167, 16, 16, var(--event-bg-opacity)); */

    /* 上舰的卡片（Toast）背景颜色变量 - 使用统一透明度变量 */
    /* --event-toast-text: rgb(0, 0, 0);
    --event-toast-text-1: rgb(140, 0, 0);
    --event-toast-text-2: rgb(118, 18, 152);
    --event-toast-text-3: rgb(0, 56, 146);
    --event-toast-bg-1: rgba(255, 185, 187, var(--event-bg-opacity));
    --event-toast-bg-2: rgba(250, 187, 255, var(--event-bg-opacity));
    --event-toast-bg-3: rgba(192, 216, 255, var(--event-bg-opacity)); */

    /* 状态映射：将等级和身份映射到通用内部变量 */
    --bg: var(--event-danmaku-bg-0);
    --user-color: var(--event-username-text-0);
  }

  /* 2. 核心容器：父级 */
  .event--message {
    --text: #ffffff;
    --bg: #53545c;
    
    position: relative; /* 【关键】作为绝对定位的参照物 */
    display: flex;      /* 使用 Flex 布局 */
    flex-direction: column; /* 让右边的内容（名字、气泡）垂直排列 */
    align-items: flex-start; /* 左对齐 */
    
    /* 【关键】左侧留出 56px 给头像，防止重叠 */
    padding-left: 56px !important; 
    padding-top: 4px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    
    will-change: transform;
  }

  .event--gift.event-size--normal {
    padding-left: 2px;
  }

  /* 全局事件动效果 */
  .can-motion .event:nth-last-child(-n+2) {
    animation: eventIn .6s ease;
  }

  /* 总督变量 */
  .event--message.guard-level--1 {
    --bg: rgb(232, 93, 93);
  }

  /* 提督变量 */
  .event--message.guard-level--2 {
    --bg: rgb(195, 118, 214);
  }

  /* 舰长变量 */
  .event--message.guard-level--3 {
    --bg: rgb(74, 92, 209);
  }

  /* 主播变量 */
  .event--message.user-type--streamer {
    --bg: rgb(236, 0, 0);
  }

  /* 3. 头像：从 .meta 里“抓”出来 */
  /* 你的 HTML 里，真正的头像在 .meta .sender-avatar 里面 */
  .event--message:not(.event-show-as--sticky) .meta .avatar--sender,
  .event--gift:not(.event-show-as--sticky) .meta .avatar--sender {
    position: absolute !important; /* 强制脱离文档流 */
    left: 2px !important;
    top: 0 !important;
    
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
    z-index: 10;
  }

  /* 4. Meta 容器：包含名字和等级 */
  .event--message:not(.event-show-as--sticky) .meta,
  .event--gift:not(.event-show-as--sticky) .meta {
    display: flex !important;
    align-items: center; /* 名字和等级垂直居中 */
    margin-bottom: 4px !important; /* 名字和气泡的间距 */
    
    /* 清除原本可能存在的 padding */
    padding: 0 !important;
    background: none !important;
  }

  /* 5. 用户名样式 */
  .event--message:not(.event-show-as--sticky) .username,
  .event--gift:not(.event-show-as--sticky) .username {
    display: block !important;
    
    /* 字体样式 */
    color: var(--user-color) !important;
    font-weight: 900 !important; /* 特粗 */
    font-size: 24px !important;
    line-height: 1.2;
    
    /* 名字和左边的间距微调 */
    margin-left: 0px;
    /* 描边 */
    text-shadow: var(--text-shadow);
  }

  /* 为用户名增加一定 padding，防止阴影被截断 */
  .username-text {
    padding-left: calc(var(--1px) * 2);
    padding-right: calc(var(--1px) * 2);
    margin-left: calc(var(--1px) * -2);
    margin-right: calc(var(--1px) * -2);
  }

  /* 6. 消息气泡 */
  .event--message .message {
    position: relative;
    display: inline-block !important; /* 根据文字自动宽 */
    
    /* 样式 */
    background-color: var(--bg);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 32px;
    border-top-left-radius: 2px; /* 指向头像的角 */
    
    font-weight: bold;
    font-size: inherit; /* 继承 URL 设置的字体大小 */
    
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
    word-break: break-all;
    
    margin-left: 6px;

    /* 应用透明度变量 */
    opacity: var(--danmaku-bubble-opacity);
  }
  
  /* 7. 小礼物（白色字带描边，无背景色） */
  .event--gift.event-size--normal,
  .event--gift.event-size--normal .meta,
  .event--gift.event-size--normal .username,
  .event--gift.event-size--normal .message,
  .event--gift.event-size--normal * {
      color: #ffffff !important;
      --text: #ffffff !important;
      /* 描边 */
      text-shadow: var(--text-shadow);
  }

  /* 大礼物 - 增加高度和内部间距 (排除置顶礼物) */
  .event--gift.event-size--highlight:not(.event-show-as--sticky) {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
  }

  .event--gift.event-size--highlight:not(.event-show-as--sticky),
  .event--gift.event-size--highlight:not(.event-show-as--sticky) .meta,
  .event--gift.event-size--highlight:not(.event-show-as--sticky) .username,
  .event--gift.event-size--highlight:not(.event-show-as--sticky) .message,
  .event--gift.event-size--highlight:not(.event-show-as--sticky) * {
      /* 描边 */
      text-shadow: var(--text-shadow);
  }

  /* 8. 气泡小三角 */
  .event--message .message::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent var(--bg) transparent transparent;
  }

  /* 9. 进场动画 */
  @keyframes eventIn {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .can-motion .event:nth-last-child(-n+2) {
    animation: eventIn .5s ease-out;
  }
  
  /* 10. 去掉底部渐变 */
  .event-list {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* 11. 表情样式优化 */
  /* 增大表情尺寸 */
  .emote-wrap {
    display: inline-block;
    vertical-align: middle;
    /* 为缩放留出空间 */
    line-height: 0;
  }
  
  .emote {
    /* 强制最小尺寸 */
    min-height: 96px !important;
    height: 128px !important;
    width: 128px !important;
    
    /* 图像缩放模式 */
    object-fit: contain;
    
    /* 强制图像放大，使用平滑插值 */
    image-rendering: -webkit-optimize-contrast; /* Webkit */
    image-rendering: crisp-edges; /* 标准 */
    image-rendering: pixelated; /* 像素风格，可选 */
    
    /* 如果还想更大，可以用 transform 二次放大 */
    /* transform: scale(1.5); */ /* 取消注释可以在 256px 基础上再放大 1.5 倍 */
    /* transform-origin: left center; */ /* 从左侧中心开始缩放 */
  }

  /* 当消息只包含表情时，去掉气泡框 */
  /* 检测：如果 .message 只有一个 .emote-wrap 子元素 */
  .event--message .message:has(> .emote-wrap:only-child),
  .event--message .message:has(> .emote-wrap:first-child:last-of-type) {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    margin-left: 0 !important;
  }

  /* 隐藏纯表情消息的小三角 */
  .event--message .message:has(> .emote-wrap:only-child)::before,
  .event--message .message:has(> .emote-wrap:first-child:last-of-type)::before {
    display: none !important;
  }

  
  /* ========== 通用光泽特效系统 ========== */
  
  /* 为所有重要事件添加基础样式 (排除置顶) */
  .event--gift.event-size--normal:not(.event-show-as--sticky),
  .event--gift.event-size--highlight:not(.event-show-as--sticky),
  .event--toast:not(.event-show-as--sticky),
  .event--superchat:not(.event-show-as--sticky),
  .event--system:not(.event-show-as--sticky) {
    position: relative;
    overflow: hidden;
  }

  /* 统一光泽扫过效果 (排除置顶) */
  .event--gift.event-size--normal:not(.event-show-as--sticky)::after,
  .event--gift.event-size--highlight:not(.event-show-as--sticky)::after,
  .event--toast:not(.event-show-as--sticky)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0.07) 25%, 
      rgba(255, 255, 255, 0.15) 50%, 
      rgba(255, 255, 255, 0.07) 75%, 
      rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shine 24s ease-in-out infinite;
    pointer-events: none;
    z-index: 100;
  }

  /* 统一脉冲光晕 (排除置顶) */
  .event--gift.event-size--highlight:not(.event-show-as--sticky)::before,
  .event--toast:not(.event-show-as--sticky)::before,
  .event--superchat:not(.event-show-as--sticky)::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: inherit;
    filter: blur(10px);
    opacity: 0.5;
    animation: pulse 48s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

  /* 统一动画定义：12秒循环，约2秒扫完，剩下时间等待 */
  @keyframes shine {
    0% { left: -100%; }
    3% { left: 120%; } /* 48s * 3% ≈ 1.4秒 */
    100% { left: 120%; }
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.03); }
  }

  /* === 差异化配置 === */
  
  /* 小礼物：白色光泽 */
  .event--gift.event-size--normal::after {
    width: 50%;
  }

  /* 大礼物：金色光泽，更快 */
  .event--gift.event-size--highlight::after {
    /* background: linear-gradient(90deg, 
      rgba(255, 215, 0, 0) 0%, 
      rgba(255, 235, 100, 0.5) 25%, 
      rgba(255, 255, 200, 0.8) 50%, 
      rgba(255, 235, 100, 0.5) 75%, 
      rgba(255, 215, 0, 0) 100%); */
    /* animation-duration: 22s; */
  }

  /* 上舰：彩虹渐变 */
  .event--toast::after {
    /* background: linear-gradient(90deg, 
      rgba(255, 185, 187, 0) 0%, 
      rgba(250, 187, 255, 0.6) 35%, 
      rgba(192, 216, 255, 0.8) 50%, 
      rgba(250, 187, 255, 0.6) 65%, 
      rgba(255, 185, 187, 0) 100%); */
    width: 70%;
    /* animation-duration: 21s; */
  }

  /* SC：红金渐变光泽，仅上半部分 (排除置顶) */
  /* 为 .top 添加定位上下文 */
  .event--superchat:not(.event-show-as--sticky) .top {
    position: relative;
    overflow: hidden;
  }

  /* .top 的光泽效果 */
  .event--superchat:not(.event-show-as--sticky) .top::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    /* background: linear-gradient(90deg, 
      rgba(255, 100, 50, 0) 0%, 
      rgba(255, 200, 100, 0.5) 25%, 
      rgba(255, 255, 255, 0.9) 50%, 
      rgba(255, 200, 100, 0.5) 75%, 
      rgba(255, 100, 50, 0) 100%); */
    transform: skewX(-25deg);
    /* animation: shine 8.6s ease-in-out infinite; */
    pointer-events: none;
    z-index: 100;
  }

  /* SC 外发光效果 (排除置顶) */
  .event--superchat:not(.event-show-as--sticky)::before {
    inset: -4px;
    filter: blur(12px);
    opacity: 0.7;
    animation-duration: 1.8s;
  }

  /* ========== 只狼风格 SC 出场动画 ========== */
  
  /* SC、礼物、上舰 出场动画：白光闪现 + 缩放 (排除置顶) */
  .can-motion .event--superchat:not(.event-show-as--sticky):nth-last-child(-n+2),
  .can-motion .event--gift:not(.event-show-as--sticky):nth-last-child(-n+2),
  .can-motion .event--toast:not(.event-show-as--sticky):nth-last-child(-n+2) {
    animation: sekiroFlash 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* 白光闪现动画 */
  @keyframes sekiroFlash {
    0% {
      opacity: 0;
      transform: scale(0.85);
      filter: brightness(3) saturate(0);
    }
    30% {
      opacity: 1;
      filter: brightness(2.5) saturate(0.3);
    }
    50% {
      filter: brightness(1.8) saturate(0.6);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: brightness(1) saturate(1);
    }
  }

  /* "危" 字提示效果 - 使用 ::after 避免与外发光冲突 */
  /* 对多个指定 UID 的用户显示"危"字（纯 CSS 实现） */
  .can-motion .event--superchat[data-uid="14279"]:nth-last-child(-n+2)::after,
  .can-motion .event--superchat[data-uid="412141275"]:nth-last-child(-n+2)::after {
    content: "危";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 140px;
    font-family: 'KaiTi', '楷体', 'STKaiti', 'BiauKai', serif;
    font-weight: bold;
    color: rgba(255, 0, 0, 1.0);
    letter-spacing: 0.05em;
    text-shadow: 
      0 0 20px rgba(255, 0, 0, 0.8),
      0 0 40px rgba(255, 0, 0, 0.6),
      0 0 60px rgba(255, 0, 0, 0.4),
      3px 3px 0 rgba(0, 0, 0, 0.8),
      -3px -3px 0 rgba(0, 0, 0, 0.8),
      3px -3px 0 rgba(0, 0, 0, 0.8),
      -3px 3px 0 rgba(0, 0, 0, 0.8);
    z-index: 9999;
    pointer-events: none;
    
    /* 危字淡入淡出动画 */
    animation: dangerFlash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0; /* 动画结束后隐藏 */
  }
  
  /* 危字闪现动画 */
  @keyframes dangerFlash {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }
    15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.0);
    }
    40% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.8);
    }
    70% {
      opacity: 0.8;
      transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6);
    }
  }
}