/* ===== 右侧悬浮组件样式（公告栏 + 微信/电话/返回顶部 hover 弹层） =====
 * 由 js/side-widget.js 将 /common/side-widget.html 注入页面后生效，全局可复用。
 * 用法：页面引入 /css/side-widget.css + <div id="sideWidgetMount"></div> + /js/side-widget.js
 */
/* ===== 右侧悬浮：左侧公告卡片 + 右侧 3 个独立胶囊（水平平行） ===== */
.side-widget {
  position: fixed;
  z-index: 9999;
  bottom: 120px;
  right: 24px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}
.side-widget > * {
  pointer-events: auto;
}
/* 公告卡片（独立显示在悬浮栏上方） */
.side-widget .new_update {
  position: relative;
  /* background: #EAEEF7; */
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  width: 480px;
  max-width: calc(100vw - 140px);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* 限高：真实公告内容可能很长（接口数据），不限高会把卡片顶到视口上方、内容够不着。
     配合下面的 head/content flex 布局，超出部分在内容区内部滚动。 */
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s;
}
.side-widget.is-closed .new_update {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* 下方悬浮栏：3 个独立胶囊（与公告卡片右平行） */
.sw-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* 注意：这里不要再给收起态加 align-self: center。
   .side-widget 用 bottom 定位，容器高度 = 最高的子元素（卡片限高后最高 calc(100vh-160px)）。
   收起卡片只改 visibility/opacity，它仍占着原来的盒子，容器高度不变；
   此时若把悬浮栏改成垂直居中，它就会相对「卡片高度」重新计算位置 ——
   偏移量正好是 (卡片高 - 悬浮栏高) / 2，内容越长跳得越远
   （实测：短内容 0px、截图那种长度约 200px、长公告可达 700px+）。
   保持 align-self 默认（flex-start，顶边与卡片顶边对齐），展开/收起位置完全一致。 */
.sw-rail .sw-item {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666666;
  transition:
    background-color 0.2s,
    color 0.2s;
}
/* 公告栏胶囊：使用图片按钮（48 宽，高度随图片自适应，去掉白底阴影） */
.sw-rail .sw-item-notice {
  width: 48px;
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}
.sw-rail .sw-item-notice .sw-img {
  display: block;
  width: 48px;
  height: auto;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
/* 微信 + 电话 合并容器：统一背景与阴影
   注意：不能 overflow:hidden —— 会裁掉微信/电话的弹出层（.sw-pop 绝对定位伸出容器左侧）。
   圆角改由首尾胶囊自身承担，效果一致。 */
.sw-rail .sw-group {
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}
.sw-rail .sw-group .sw-item {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* 微信胶囊：hover 时才显示浅绿圆形底色 */
.sw-rail .sw-group .sw-item-wechat:hover {
  background: #e0f7ed;
  border-radius: 50px;
}
.sw-rail .sw-group .sw-item-backtop {
  border-radius: 0 0 24px 24px;
}
/* 微信 / 电话 / 返回顶部：48×48；微信为圆形底色无需分隔线，电话保留分隔线 */
.sw-rail .sw-group .sw-item-phone {
  border-bottom: 1px solid #f0f0f0;
}
.sw-rail .sw-item-wechat,
.sw-rail .sw-item-phone,
.sw-rail .sw-item-backtop {
  width: 48px;
  height: 48px;
}
/* 图片图标：默认图 + hover 激活图同尺寸堆叠切换 */
.sw-rail .sw-group .sw-item .sw-img {
  display: block;
  width: 24px;
  height: 24px;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.sw-rail .sw-item .sw-img-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
/* 微信 / 电话：hover 切换到激活图 */
.sw-rail .sw-item-wechat:hover .sw-img-default,
.sw-rail .sw-item-phone:hover .sw-img-default {
  opacity: 0;
}
.sw-rail .sw-item-wechat:hover .sw-img-active,
.sw-rail .sw-item-phone:hover .sw-img-active {
  opacity: 1;
}
/* 公告栏胶囊：卡片展开(未收起) → 竖条显示激活(红色)高亮图；
   点击收起后 → 回到默认图 */
.sw-rail .sw-item-notice .sw-img-active {
  opacity: 1;
}
.sw-rail .sw-item-notice .sw-img-default {
  opacity: 0;
}
.side-widget.is-closed .sw-rail .sw-item-notice .sw-img-active {
  opacity: 0;
}
.side-widget.is-closed .sw-rail .sw-item-notice .sw-img-default {
  opacity: 1;
}
/* 返回顶部：默认显示箭头图标，hover 时图标淡出、胶囊本体变为两行文字 */
.sw-rail .sw-item-backtop {
  cursor: pointer;
  position: relative;
}
.sw-rail .sw-item-backtop .sw-img {
  transition: opacity 0.2s;
}
.sw-rail .sw-item-backtop:hover {
  background: #fee9e6;
}
/* hover 时：箭头图标淡出 */
.sw-rail .sw-item-backtop:hover .sw-img {
  opacity: 0;
}
/* 文字气泡：默认占满胶囊并垂直水平居中显示两行文字
   选择器加 .sw-item 提高优先级，覆盖通用 .sw-pop 的定位/偏移/内边距/背景 */
.sw-rail .sw-item.sw-item-backtop .sw-pop-backtop {
  position: absolute;
  inset: 0;
  transform: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 24px;
  visibility: visible;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.sw-rail .sw-item.sw-item-backtop:hover .sw-pop-backtop {
  opacity: 1;
}
.sw-rail .sw-item-backtop .sw-pop-backtop::before {
  /* 不需要指向箭头 */
  display: none;
}
.sw-rail .sw-item-backtop .sw-pop-backtop-line {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ee4e41;
  line-height: 1.25;
  letter-spacing: 1px;
}
.sw-rail .sw-item .sw-pop {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 14px 16px 12px;
  white-space: nowrap;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  z-index: 2;
}
/* 指向图标的小箭头 */
.sw-rail .sw-item .sw-pop::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #ffffff;
}
/* 微信类型弹出层箭头：垂直居中按二维码区域计算（head 56 + qr 约 174 + foot ≈ 260 高的容器） */
.sw-rail .sw-item .sw-pop-wechat::before {
  /* 让箭头出现在二维码区中部（约 head 高度之后） */
  top: 96px;
}
.sw-rail .sw-item:hover .sw-pop {
  visibility: visible;
  opacity: 1;
}
.sw-rail .sw-item .sw-pop img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 8px;
}
.sw-rail .sw-item .sw-pop .sw-pop-title {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  text-align: center;
  line-height: 1.4;
}
.sw-rail .sw-item .sw-pop .sw-pop-phone {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #2f6bff;
  text-decoration: none;
  text-align: center;
}
/* ===== 微信 hover 弹出层：绿色顶部块 + 四角对括号二维码 + 底部提示 ===== */
.sw-rail .sw-item .sw-pop-wechat {
  width: 252px;
  padding: 0;
  white-space: normal;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
  padding: 15px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
 background: #0DC161;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 8px 8px 8px 8px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-icon svg,
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-icon img {
  width: 28px;
  height: 28px;
  display: block;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-text {
  flex: 1;
  min-width: 0;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-head-sub {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}
/* ===== 电话 hover 弹出层：浅蓝灰顶部块 + 大号码 + 底部提示 ===== */
.sw-rail .sw-item .sw-pop-phone {
  width: 220px;
  padding: 0;
  white-space: normal;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #eaeef7;
  color: #333333;
  padding: 12px 14px;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a8dff;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-icon svg,
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-text {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #333333;
  line-height: 1.2;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-head-sub {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: #888888;
  line-height: 1.2;
}
/* 弹出箭头：电话类型高度小，箭头垂直居中即可（用默认 top:50% 即可） */
.sw-rail .sw-item .sw-pop-phone::before {
  top: 50%;
}
/* 大号码区域 */
.sw-rail .sw-item .sw-pop-phone .sw-pop-phone-body {
  display: block;
  margin: 18px auto 18px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #2f6bff;
  text-decoration: none;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.sw-rail .sw-item .sw-pop-phone .sw-pop-phone-body:hover {
  color: #1a55e0;
}
/* 二维码容器 + 4 角绿色 L 形装饰 */
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr {
  position: relative;
  margin: 16px auto 8px;
  width: 150px;
  height: 150px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 4px;
  border: none;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #1aad66;
  border-style: solid;
  border-width: 0;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr-corner-tl {
  top: 0;
  left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr-corner-tr {
  top: 0;
  right: 0;
  border-top-width: 3px;
  border-right-width: 3px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr-corner-bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 3px;
  border-left-width: 3px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-qr-corner-br {
  bottom: 0;
  right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
}
.sw-rail .sw-item .sw-pop-wechat .sw-pop-foot {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 12px;
  color: #888888;
  line-height: 1.4;
}
/* 窄屏适配：压缩竖条尺寸，公告卡片自适应宽度 */
@media (max-width: 767px) {
  .side-widget {
    right: 12px;
    bottom: 80px;
    gap: 8px;
  }
  .side-widget .new_update {
    width: calc(100vw - 76px);
    max-width: calc(100vw - 76px);
    padding: 16px;
  }
  .sw-rail .sw-item-notice {
    width: 40px;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .sw-rail .sw-item-notice .sw-img {
    width: 40px;
  }
  .sw-rail .sw-item-wechat,
  .sw-rail .sw-item-phone,
  .sw-rail .sw-item-backtop {
    width: 40px;
    height: 40px;
  }
  .sw-rail .sw-group {
    border-radius: 20px;
  }
}
/* 标题区：独立浅色块 */
.new_update_head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  /* 卡片是 flex 纵向容器，标题栏固定高度、不参与伸缩 */
  flex: 0 0 48px;
  background: #EAEEF7;
  padding: 0 15px;
}
.new_update .new_update_title {
  position: relative;
  display: inline-block;
  padding-left: 10px;
  font-weight: 800;
  font-size: 18px;
  color: #000000;
  line-height: 1;
}

.new_update .new_update_close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  /* 红底白叉：16×16 的方块，× 用 flex 居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: #FF5E57;
  font-size: 12px;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 1;
  border-radius: 16px;
}
/* hover 不再改字色（白字在红底上换深色会看不清），改成底色加深给反馈 */
.new_update .new_update_close:hover {
  background: #E8443E;
}
/* 内容区：白色块（内容动态渲染） */
.new_update .new_update_content {
  /* margin-top: 10px; */
  background: #ffffff;

  padding: 15px;
  font-size: 14px;
  color: #333333;
  line-height: 24px;
  word-break: break-word;
  /* 卡片限高后，内容区吃掉剩余高度并在内部滚动（min-height:0 必不可少，
     否则 flex 子项不会收缩，内容仍会把卡片撑高） */
  overflow-y: auto;
  min-height: 0;
}
/* 内容块通用样式：标题行与正文行共用同一套
   （静态可手动加 .notice-block，动态 HTML 无 class 时自动套用，保证一致） */
.notice-block,
.new_update .new_update_content > * {
  background: #f5f7f8;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 24px;
}
.notice-block:last-child,
.new_update .new_update_content > *:last-child {
  margin-bottom: 0;
}
/* 块内加粗标题文字（如「邀您参加第九期线上法律交流会」） */
.notice-block strong,
.notice-block b,
.new_update .new_update_content > * strong,
.new_update .new_update_content > * b {
  /* font-size: 16px;
  color: #222222; */
}
/* 富文本公告正文（articlesHtml）：整段作为一个浅灰圆角容器注入，
   保留一段底色（与标题栏/公告块同色系），同时让后端发布的 HTML 内部样式原样回显 */
.new_update .new_update_content .notice-richtext {
  background: #f5f7f8;
  border-radius: 8px;
  padding: 10px 15px;
  margin: 0 0 8px;
  word-break: break-word;
}
.new_update .new_update_content .notice-richtext:last-child {
  margin-bottom: 0;
}
.notice-richtext img,
.notice-richtext video,
.notice-richtext iframe,
.notice-richtext table {
  max-width: 100%;
  height: auto;
}
.notice-richtext p,
.notice-richtext div {
  margin: 0 0 8px;
}
.notice-richtext p:last-child,
.notice-richtext div:last-child {
  margin-bottom: 0;
}
/* 空公告：接口无公告数据时的提示（卡片默认收起，展开后可见）。
   需高于通用 `.new_update .new_update_content > *` 灰块规则以覆盖其背景/对齐 */
.new_update .new_update_content > .notice-empty {
  text-align: center;
  color: #999999;
  font-size: 14px;
  line-height: 24px;
  padding: 18px 10px;
  background: #fafafa;
}