/* 小喇叭前端样式 - 独立CSS文件 */
#hc-horn-root{position:relative}

/* 小喇叭按钮 */
#hc-horn-root .horn-fab{
  position:fixed;right:18px;bottom:18px;z-index:2147483000;
  background:linear-gradient(135deg,#ff4d4f,#fa8c16);color:#fff;
  border-radius:22px;height:44px;display:flex!important;
  visibility:visible!important;opacity:1!important;
  align-items:center;gap:8px;padding:0 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;font-weight:600;
  transition:transform 0.2s ease;
}
#hc-horn-root .horn-fab:hover{transform:scale(1.05)}

/* 小喇叭面板 */
#hc-horn-panel{
  position:fixed;right:18px;bottom:72px;width:min(92vw,460px);max-height:66vh;
  background:rgba(17,17,17,.95);backdrop-filter:saturate(150%) blur(8px);
  color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:none;z-index:2147483100;flex-direction:column;
}
#hc-horn-panel.show{display:flex}

/* 面板头部 */
#hc-horn-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);
}

/* 消息列表区域 */
#hc-horn-list{
  padding:10px;overflow:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:#666 transparent;
}
#hc-horn-list::-webkit-scrollbar{width:6px}
#hc-horn-list::-webkit-scrollbar-track{background:transparent}
#hc-horn-list::-webkit-scrollbar-thumb{background:#666;border-radius:3px}

/* 消息项 */
.hc-item{
  display:flex;gap:8px;margin:8px 0;align-items:center;
  border-radius:10px;padding:8px;border:1px solid #d9d9d9;
  background:#f5f5f5;width:93%;
}
.hc-item.role-admin{background:#e6f7ff;border-color:#91d5ff}
.hc-item.role-vip{background:#fffbe6;border-color:#ffe58f}
.hc-item.role-user{background:#f5f5f5;border-color:#d9d9d9}
.hc-item.self{margin-left:auto;margin-right:0;flex-direction:row-reverse}
.hc-item:not(.self){margin-left:0;margin-right:auto}

/* 头像区域 */
.hc-avatar{
  width:60px;height:20px;border-radius:4px;background:transparent;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  flex-shrink:0;
  position:relative;
}
.hc-avatar img{width:60px;height:20px;position:relative;z-index:2;}

/* VIP聊天框背景 */
.hc-item.role-vip{
  background-image:url('https://ts1.tc.mm.bing.net/th/id/R-C.98d00f5fb0968d000e457ff2acc6f9f4?rik=pzOYsoGWs%2fcz9Q&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2023%2f1111%2f012127ot4Gn.jpg&ehk=9r4IADvCekk0p%2fZJ8IuKyf6v34DkPZ6ksmTaHYmKR40%3d&risl=&pid=ImgRaw&r=0');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.hc-item.role-vip::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,0.7);
  border-radius:10px;
  z-index:1;
}
.hc-item.role-vip > *{
  position:relative;
  z-index:2;
}

/* 管理员聊天框背景 */
.hc-item.role-admin{
  background-image:url('https://tse2.mm.bing.net/th/id/OIP.XIIM0fbfZdXUgsPcJ2ETEwHaEK?rs=1&pid=ImgDetMain&o=7&rm=3');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.hc-item.role-admin::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,0.7);
  border-radius:10px;
  z-index:1;
}
.hc-item.role-admin > *{
  position:relative;
  z-index:2;
}

/* 消息气泡 */
.hc-bubble{flex:1;background:transparent;border:none;padding:0}

/* 用户名和时间 */
.hc-name{font-weight:700;margin-right:6px}
.hc-time{color:#999;font-size:12px;margin-left:6px}
.hc-name-inline{font-weight:700;margin-right:4px}
.hc-name-inline.vip{color:#ff4d4f!important}
.hc-name-inline.admin{color:#52c41a!important}

/* 消息内容 */
.hc-content{color:#1d1515;word-wrap:break-word;line-height:1.4}
.hc-content .at{color:#52c41a}

/* 支持动态图片 - 增强版 */
.hc-content img{
  max-width:100%;height:auto;border-radius:6px;margin:4px 0;
  display:block;
  /* 确保动态图片能正常播放 */
  image-rendering: auto;
  -webkit-image-rendering: auto;
  -moz-image-rendering: auto;
  -o-image-rendering: auto;
}

/* 专门针对GIF动图的优化 */
.hc-content img[src*=".gif"],
.hc-content img[src*=".GIF"],
.hc-content .hc-gif-image {
  /* 确保GIF动画正常播放 */
  animation-play-state: running;
  /* 防止被优化掉动画效果 */
  will-change: auto;
  /* 确保动图不被压缩 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 回复样式 */
.hc-reply-chip{
  display:block;max-width:100%;margin:4px 0;padding:6px 8px;
  border-radius:8px;background:#0e1116;border:1px solid #243447;
  color:#cbd5e1;font-size:12px;line-height:1.4;
  word-wrap:break-word;overflow-wrap:break-word;
}

/* 操作按钮 */
.hc-actions{margin-top:0}
.hc-footer{
  display:flex;align-items:center;gap:12px;
  justify-content:flex-start;margin-top:6px;
}
.hc-footer .hc-time{margin-top:0!important}
.hc-action{
  cursor:pointer;color:#1890ff;font-size:12px;margin-right:10px;
  transition:color 0.2s ease;
}
.hc-action:hover{text-decoration:underline;color:#40a9ff}

/* 输入表单 */
#hc-horn-form{
  display:flex;gap:8px;padding:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
#hc-horn-form input{
  flex:1;min-width:0;padding:10px;border-radius:8px;
  border:1px solid #333;background:#222;color:#fff;
  transition:border-color 0.2s ease;
}
#hc-horn-form input:focus{border-color:#52c41a;outline:none}
#hc-horn-form button{
  background:#52c41a;color:#fff;border:none;border-radius:8px;
  padding:10px 14px;cursor:pointer;transition:background 0.2s ease;
}
#hc-horn-form button:hover{background:#73d13d}
#hc-horn-form button:active{background:#389e0d}

/* 移动端适配 */
@media (max-width: 520px){
  #hc-horn-panel{right:8px;left:8px;width:auto}
  .hc-item{width:95%}

  /* 移动端头像稍小一些 */
  .hc-avatar{width:60px;height:20px}
  .hc-avatar img{width:60px;height:20px}

  /* 移动端背景图片适配 */
  .hc-avatar.vip-bg,
  .hc-avatar.admin-bg {
    background-size: cover;
    background-position: center;
  }
}

/* 图片样式重置 */
#hc-horn-panel img:not([alt]), #hc-horn-panel img[alt=""],
#hc-horn-panel img, .hc-avatar img, .hc-item img {
  border:none!important;opacity:1!important;
  outline:none!important;box-shadow:none!important;
}

/* 加载状态 */
.hc-loading{
  text-align:center;padding:20px;color:#999;
}

/* 空状态 */
.hc-empty{
  text-align:center;padding:30px;color:#999;
}