/* ==========================================================
   chat-widget.css — 在线客服聊天窗（D 设计系统）
   全部包在 @layer components；颜色全走 var(--*)，0 处硬编码 hex
   （与 right-sidebar.css 同一条约定）。

   与右侧浮窗（right-sidebar.css）的层级关系，实测值：
     .rs-sidebar 999（<768px 为 1001，须压在遮罩之上）/ .rs-pop 1000 / .rs-mobile-mask 1000 / .rs-mobile-trigger 1001
     .mobile-bottom-nav 1020（components.css，高 58px）
     .rs-toast 2000（复制成功提示，瞬时）
   聊天面板取 1100、遮罩 1099：盖得住上面除 toast 外的一切，而 toast 是瞬时的居中提示，
   让它继续压在最上层是对的。

   ⚠ 不要套用 .rs-pop 的写法：那个是 hover 展开的，聊天面板必须点击 toggle，
     鼠标移开不能消失。
   ========================================================== */

@layer components {

  /* --- 面板本体（桌面端） --- */
  .chat-panel {
    position: fixed;
    /* .rs-sidebar 宽 64px 且 right:0，留 20px 间隙 —— 面板不压住那条竖条（right-sidebar.css 改宽度要同步这里） */
    right: 84px;
    bottom: 80px;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vh - 120px);
    display: none;
    flex-direction: column;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1100;
    overflow: hidden;
  }
  .chat-panel--open { display: flex; }

  .chat-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-white);
  }
  .chat-panel__title { display: flex; flex-direction: column; line-height: var(--line-height-tight); }
  .chat-panel__subtitle { font-size: var(--font-size-xs); opacity: .85; }
  .chat-panel__close {
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: var(--space-xs);
    display: inline-flex;
    border-radius: var(--radius-sm);
  }
  .chat-panel__close:hover { background: rgba(255, 255, 255, .15); }

  /* 连接状态条。橙色系（accent）而不是红色：重连中不是错误，只是慢。 */
  .chat-panel__status {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs);
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-bottom: 1px solid var(--color-border);
  }

  .chat-panel__messages {
    flex: 1 1 auto;
    min-height: 0;              /* 不给这条，flex 子项会按内容撑高、滚动条永远不出现 */
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .chat-panel__empty {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
  }

  /* --- 消息气泡 --- */
  .chat-msg { display: flex; flex-direction: column; max-width: 80%; }
  .chat-msg--mine   { align-self: flex-end;   align-items: flex-end; }
  .chat-msg--theirs { align-self: flex-start; align-items: flex-start; }
  .chat-msg--system { align-self: center;     align-items: center; max-width: 100%; }

  .chat-msg__bubble {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    /* 聊天内容是纯文本、服务端刻意不做净化，JS 侧一律 textContent。
       所以换行只能靠 pre-wrap 还原，长串靠 break-word 兜住。 */
    white-space: pre-wrap;
    word-break: break-word;
  }
  .chat-msg--mine   .chat-msg__bubble { background: var(--color-primary); color: var(--color-text-white); }
  .chat-msg--theirs .chat-msg__bubble { background: var(--color-bg-light); color: var(--color-text); }
  .chat-msg--system .chat-msg__bubble {
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: center;
  }
  /* 乐观渲染：ack 回来之前半透明 */
  .chat-msg--pending { opacity: .55; }
  .chat-msg__bubble img { max-width: 100%; border-radius: var(--radius-md); display: block; }
  .chat-msg__name {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-msg__time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
  }

  /* --- 留邮箱引导条 --- */
  .chat-panel__email {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary-lightest);
    border-top: 1px solid var(--color-border);
  }
  .chat-panel__email-hint {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }
  .chat-panel__email-row { display: flex; gap: var(--space-xs); }
  .chat-panel__email-input {
    flex: 1 1 auto;
    min-width: 0;               /* flex 项默认 min-width:auto，窄屏下会被输入框撑破 */
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
  }
  .chat-panel__email-btn {
    flex: 0 0 auto;
    padding: var(--space-xs) var(--space-md);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
  }

  /* --- 输入区 --- */
  .chat-panel__compose {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
  }
  .chat-panel__input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    max-height: 96px;           /* 与 JS 里 autoGrow 的上限一致，改一处要改两处 */
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: var(--line-height-base);
  }
  .chat-panel__attach {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-bottom: 2px;          /* 与 textarea 底边对齐（compose 是 align-items:flex-end） */
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .chat-panel__attach:hover { background: var(--color-bg-light); }
  .chat-panel__attach:disabled { opacity: .5; cursor: not-allowed; }

  /* 上传中的图片气泡：本地预览之上盖一层白纱，与 .chat-msg--pending 的半透明叠加。
     ⚠ 用显式 class 而不是 :has(img.uploading)——:has() 在旧版 Safari / Firefox 上不支持，
       而这个站的买家浏览器环境不可控，样式退化成「看不出在上传」不值得。 */
  .chat-msg__bubble--uploading { position: relative; }
  .chat-msg__bubble--uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    border-radius: var(--radius-md);
    pointer-events: none;
  }

  .chat-panel__send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .chat-panel__send:disabled { opacity: .5; cursor: not-allowed; }

  .chat-panel__privacy {
    margin: 0;
    padding: 0 var(--space-md) var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  /* 遮罩只在手机端出现，桌面端恒隐藏（见下面的媒体查询） */
  .chat-mask { display: none; }

  /* --- 未读红点，挂在右侧栏那一项上 ---
     ⚠ .rs-item 已经给了 border:none / background:transparent / cursor:pointer /
       position:relative，所以 .rs-item--chat 不需要再重复一遍（原计划里那条规则还带了
       width:100%，会把 64px 宽的竖条撑坏）。这里只加它独有的东西。 */
  .rs-item__badge {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-sm);
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: var(--color-text-white);
    font-size: var(--font-size-xs);
    line-height: 16px;
    text-align: center;
  }

  /* --- 手机端：整屏。
         不做小面板——小屏上 360×480 的浮层挡住整页还打不了字。
         z-index 1100 盖过底部导航条（1020），所以输入框不会被它压住。 --- */
  @media (max-width: 767.98px) {
    .chat-panel {
      inset: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      border: 0;
      border-radius: 0;
    }
    .chat-mask {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .35);
      z-index: 1099;
    }
    .chat-mask--open { display: block; }
  }

}