/* ==========================================================
   right-sidebar.css — 右侧悬浮联系侧边栏（D 设计系统）
   全部包在 @layer components；颜色全走 var(--*)，0 处硬编码 hex。
   布局与交互沿用旧版（竖条 + 悬停弹窗 + 移动端展开），仅换皮。
   ========================================================== */

@layer components {

  /* --- 桌面端默认（>=768px） --- */
  .rs-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-30%);
    z-index: 999;
    background: var(--color-bg-white);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: visible;
  }

  .rs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 64 = 文字区 56px：标题是后台配置、按语言翻译的，56 宽时只剩 48px，"WhatsApp" 59px 被屏幕右缘切掉
       （2026-09-22）。改宽度要同步 chat-widget.css 的 .chat-panel right（= 宽度 + 20） */
    width: 64px;
    min-height: 72px;
    padding: var(--space-sm) var(--space-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    transition: var(--transition-fast);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
  }
  .rs-item:last-child { border-bottom: none; }

  /* hover：浅蓝 tint + 主色文字，不反转图标——任意上传图标(含彩色 logo)保持原貌。
     限定 (hover:hover)：触屏点一下 :hover 会粘住，手机上点过的项一直是浅蓝底 */
  @media (hover: hover) {
    .rs-item:hover {
      background: var(--color-primary-lightest);
      color: var(--color-primary);
    }
  }

  .rs-item__icon {
    width: 24px; height: 24px;
    margin-bottom: var(--space-xs);
    object-fit: contain;
  }
  /* 业务员 WhatsApp 直达项：内联 SVG 走 currentColor，品牌绿固定，不随 hover 变色 */
  .rs-item--whatsapp .rs-item__icon { color: #25D366; }
  /* 11px：英文 "Whatsapp" 约 52px，放得进 56 的文字区。更长的译文折两行而不是被切——
     anywhere 只在一个词本身放不下一行时才断词 */
  .rs-item__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    font-size: 11px;
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* 弹窗（桌面端悬停显示） */
  .rs-pop {
    position: absolute;
    right: calc(100% + var(--space-sm));
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
    display: none;
    min-width: 200px;
    z-index: 1000;
    color: var(--color-text);
  }
  /* 桥接 item 与弹窗之间 8px 透明区域，避免鼠标划过间隙时 :hover 中断 */
  .rs-pop::before {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
  }
  /* ≥768 详情的三个打开途径（2026-09-22）：
     - :hover 只给能悬停的设备。触屏点按后 :hover 会粘住：不加 (hover:hover) 的话平板上二维码
       「再点一次收不起来」；不加 min-width 的话它的优先级（0,3,0）还会压过手机端的 .rs-pop{display:none}，
       绕开 JS 直接弹详情。
     - .rs-pop-open 由 JS 在触屏点按 / Enter / 空格时切换——平板与键盘打开二维码靠它。
     - :focus-within 只给 <a>（电话/邮件，聚焦即显示号码）。二维码项是按钮式开关，点按也会让它聚焦，
       套上就同样收不起来、空格关不掉（实测踩过）。 */
  @media (min-width: 768px) and (hover: hover) {
    .rs-item--pop:hover .rs-pop { display: block; }
  }
  @media (min-width: 768px) {
    a.rs-item--pop:focus-within .rs-pop,
    .rs-item--pop.rs-pop-open .rs-pop { display: block; }
    .rs-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
  }

  .rs-pop__qr { width: 180px; height: 180px; display: block; object-fit: contain; }
  .rs-pop__caption { text-align: center; margin-top: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
  .rs-pop--contact { min-width: 220px; text-align: center; }
  .rs-pop__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .rs-pop__value { font-size: var(--font-size-md); color: var(--color-text-strong); margin: 6px 0 10px; font-weight: var(--font-weight-semibold); }
  .rs-pop__btn {
    display: inline-block;
    padding: 6px var(--space-md);
    background: var(--color-accent);
    color: var(--color-text-white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
  }

  /* 复制成功 toast */
  .rs-toast {
    position: fixed;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-text-strong);
    color: var(--color-text-white);
    padding: 10px var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    z-index: 2000;
    opacity: 0;
    transition: var(--transition-fast);
    pointer-events: none;
  }
  .rs-toast.rs-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* 回到顶部 */
  .rs-backtop { color: var(--color-text-muted); }

  /* --- 移动端（<768px） --- */
  .rs-mobile-trigger {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 72px;   /* 抬高，让开底部固定导航条（~54px 高）*/
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-white);
    border: none;
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .rs-mobile-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    z-index: 1000;
  }

  @media (max-width: 767.98px) {
    .rs-sidebar {
      position: fixed;
      right: 16px;
      bottom: 136px;   /* 随 FAB 抬高，位于 FAB 之上 */
      top: auto;
      transform: none;
      display: none;
      flex-direction: column;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      /* 必须高于 .rs-mobile-mask（1000）：遮罩 inset:0 铺满全屏，桌面那个 999 若沿用到这里，
         展开后点任何一项都点在遮罩上 → 触发「点遮罩收起」，浮窗一点就收（迁入起就坏，2026-09-22 修） */
      z-index: 1001;
      /* 自底（136px）向上长，展开二维码后 375×667 顶部出屏 18px、320×568 出屏 117px（前两项点不到）。
         限高 + 内部滚动；上方留 16px。dvh 在不支持的浏览器上回落到前一行的 vh */
      max-height: calc(100vh - 152px);
      max-height: calc(100dvh - 152px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .rs-sidebar.rs-open { display: flex; }
    .rs-mobile-trigger { display: inline-flex; }
    .rs-mobile-mask.rs-open { display: block; }

    /* 移动端项横向扩展；flex-wrap 让展开的详情独占下一行。
       不换行时详情是图标、标题之后的第三个横排元素，带着 200/220 的最小宽度被挤出屏幕右缘 111–145px */
    .rs-item {
      width: 220px;
      /* 浮窗是限高的纵向 flex 容器：不钉 0 的话超高时先压扁各项而不是滚动，
         展开的详情溢出被压扁的项、盖到下一项上（320×568 实测点 Phone 点中了 Mail 的邮箱地址） */
      flex-shrink: 0;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 12px;
      padding: var(--space-sm) var(--space-md);
    }
    .rs-item__icon { margin-bottom: 0; }
    /* 横排时标题在图标右侧、左对齐；桌面那套居中 + 折两行在这里不需要（220 宽放得下） */
    .rs-item__label { flex: 1 1 0; min-width: 0; font-size: var(--font-size-xs); text-align: left; }

    /* 移动端弹窗内嵌到项下面，不走左侧绝对定位 */
    .rs-pop {
      position: static;
      transform: none;
      display: none;
      flex: 0 0 100%;
      min-width: 0;
      width: 100%;
      margin-top: 0;
      padding: var(--space-sm) 0 0;
      box-shadow: none;
      border-top: 1px solid var(--color-border);
      border-radius: 0;
    }
    .rs-pop::before { display: none; }
    .rs-pop--contact { min-width: 0; }
    .rs-pop__value { overflow-wrap: anywhere; }   /* 长邮箱在 188px 内断行 */
    .rs-pop__qr { width: 160px; height: 160px; margin: 0 auto; }
    .rs-item--pop.rs-pop-open .rs-pop { display: block; }
  }

}