/* 订单沟通（买卖双方围绕同一张租赁订单的对话）。
   与 order-chat.js 配套，采购工作台（/member/buyer）与厂家经营台（/supplier）共用一份。
   只写 .gr-chat-* 前缀的类，弹窗壳用 ui.css 的 .gr-dialog，按钮用 .gr-btn。 */

.gr-chat {
  /* position:relative 是选单面板（.gr-chat-picker）的定位基准 —— 面板要盖住整块聊天区 */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.gr-chat-hint {
  margin: 0;
  padding: 9px 12px;
  background: #f7f8fa;
  border-radius: 8px;
  color: #5a636e;
  font-size: 12px;
  line-height: 1.7
}

.gr-chat-list {
  height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fbfbfc;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.gr-chat-empty {
  margin: auto;
  color: #8a93a0;
  font-size: 13px;
  text-align: center
}

/* 「暂无信息」统一版式 = 图标 + 提示（2026-09-29 用户要求）：与 workbench.css 的 .wb-empty::before
   同一枚灰线「空收件箱」图标。.gr-chat-empty 自身是 block，::before 直接排到文字上方。 */
.gr-chat-empty::before {
  content: '';
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b2c0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l1.6 2.7h4.8L16 13h4'/%3E%3Cpath d='M6.3 4.6h11.4a2 2 0 0 1 1.8 1.1l2.5 5.4v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6l2.5-5.4a2 2 0 0 1 1.8-1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .85
}

.gr-chat-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 78%
}

.gr-chat-line.mine {
  align-self: flex-end;
  align-items: flex-end
}

/* 含订单卡片的行不受 78% 限制：卡片比气泡宽，被压窄后里面的商品名/订单号会被省略成一片「…」，
   看起来就是「卡片没显示完整」（2026-09-29 用户反馈）。 */
.gr-chat-line-card {
  max-width: 100%
}

.gr-chat-bubble {
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e8ebf0;
  color: #313a46;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word
}

.gr-chat-line.mine .gr-chat-bubble {
  background: #fdecec;
  border-color: #f6d3d4;
  color: #8c1a1f
}

/* 一条消息三行：发送者 / 气泡内容 / 时间。
   发送者与时间都用灰色，靠字号区分层级，不与气泡里的正文抢注意力。 */
.gr-chat-who {
  color: #97a0ac;
  font-size: 12px
}

.gr-chat-time {
  color: #97a0ac;
  font-size: 11px
}

.gr-chat-form {
  display: flex;
  gap: 10px;
  /* 2026-09-29 用户要求「输入框高度和按钮高度一致」：stretch 让 textarea 与按钮永远等高 ——
     输入框随文字长高时按钮跟着长，不会出现一高一矮。 */
  align-items: stretch
}

/* 站点的 commerce.css 会给全局输入框加聚焦红边，这里明确覆盖成灰→红的本页口径 */
.gr-chat-form textarea {
  flex: 1;
  box-sizing: border-box;
  /* 一行高 = 13×1.6 + 上下 padding 22 + 边框 2 ≈ 45px（与右侧按钮等高，用户 2026-09-29 要求）；
     五行 = 104 + 24 = 128px（上限）。JS 的 autoGrowInput 用同一套算法算「5 行」上限，两处口径一致。 */
  min-height: 45px;
  max-height: 128px;
  resize: none;
  overflow-y: hidden;
  padding: 11px 12px;
  border: 1px solid #dfe3e9;
  border-radius: 10px;
  background: #fff;
  color: #313a46;
  font: inherit;
  font-size: 13px;
  line-height: 1.6
}

.gr-chat-form textarea:focus,
.gr-chat-form textarea:focus-visible {
  border-color: #c51b21;
  outline: none;
  box-shadow: none
}

.gr-chat-form .gr-btn {
  flex-shrink: 0;
  /* 被 stretch 拉高后文字必须自己居中（ui.css 的 .gr-btn 不是 flex 容器）；顺便压住
     commerce.css 全站注入的 `body [type=button]{min-height:42px;display:inline-flex}`。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 11px 20px
}

.gr-chat-status {
  margin: 0;
  color: #97a0ac;
  font-size: 12px;
  min-height: 16px
}

/* 「发送订单卡片」是次要动作：按钮本身用 .gr-btn 的白底描边（与主按钮「发送」拉开层级），
   只压一点左右内边距，避免两个按钮把输入框挤窄。 */
.gr-chat-form [data-chat-card] {
  padding: 11px 14px;
  white-space: nowrap
}

/* ---------- 选单浮层（「发送订单卡片」→ 从底部上拉、滚动选订单，2026-09-29 用户改版） ----------
   用户要求：「不是一个窗口，应该是一个上拉框，在里面可以滚动选择订单，订单列表要有订单的图片」。
   所以不做盖满聊天区的抽屉，改成**贴底浮层**：限高 + 内部滚动 + 上滑动画，聊天区仍可见
   （自己能看清是在给谁发）。定位基准是 .gr-chat（position:relative）。
   订单行 = 封面 40×40 + 商品名 / 订单号 · 租期 + 状态 + 金额 + 「详情」（新标签看订单页）；
   **点行体即发送这张卡片**，整行是操作区、只有「详情」是跳转。
   封面字段 item_cover_url 由订单列表接口下发（与订单卡片、发票卡同一套兜底：方案封面 → 型号封面）。 */
.gr-chat-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  max-height: min(72%, 430px);
  padding: 10px 12px 12px;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 -10px 28px rgba(20, 28, 40, .12);
  animation: gr-chat-picker-rise .16s ease-out
}

/* 上拉的出现方式（尊重 reduced-motion） */
@keyframes gr-chat-picker-rise {
  from {
    transform: translateY(14px);
    opacity: .4
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@media (prefers-reduced-motion:reduce) {
  .gr-chat-picker {
    animation: none
  }
}

.gr-chat-picker[hidden] {
  display: none
}

/* 顶部一条小把手：一眼看出这是「上拉框」而不是整块面板 */
.gr-chat-picker-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 7px;
  color: #313a46;
  font-size: 13px
}

.gr-chat-picker-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 3px;
  margin-left: -17px;
  border-radius: 2px;
  background: #e3e7ec
}

.gr-chat-picker-head span {
  color: #a4adb8;
  font-size: 11.5px
}

.gr-chat-picker-close {
  margin-left: auto;
  width: 24px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #97a0ac;
  font-size: 18px;
  line-height: 1;
  cursor: pointer
}

.gr-chat-picker-close:hover {
  color: #c51b21
}

.gr-chat-picker-search {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px
}

.gr-chat-picker-search:focus {
  border-color: #c51b21;
  outline: none
}

.gr-chat-picker-list {
  flex: 1 1 auto;
  min-height: 88px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.gr-chat-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  cursor: pointer
}

.gr-chat-picker-row:hover {
  border-color: #c51b21;
  background: #fffafa
}

/* 订单封面：老商品没有封面时不塌陷，留一块灰底 + 图片图标占位，行高恒定 */
.gr-chat-picker-cover {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f2f4f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b2c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 18l5-4 3 2.4L16 13l4 3.4'/%3E%3C/svg%3E") center/22px no-repeat;
  object-fit: cover
}

.gr-chat-picker-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.gr-chat-picker-main b,
.gr-chat-picker-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.gr-chat-picker-main b {
  color: #313a46;
  font-size: 12.5px
}

.gr-chat-picker-main span {
  color: #a4adb8;
  font-size: 11.5px
}

.gr-chat-picker-row em {
  flex: none;
  color: #8a93a0;
  font-size: 11px;
  font-style: normal
}

.gr-chat-picker-money {
  flex: none;
  color: #c51b21;
  font-size: 13px
}

/* 行内「发送」按钮（这一行的主操作；行体点击 = 查看订单详情）：
   红底白字小按钮。⚠️ min-height:0 必须写 —— commerce.css 全站注入的
   `body [type=button]{min-height:42px}` 会把行撑高、与左侧封面不齐。 */
.gr-chat-picker-send {
  flex: none;
  min-height: 0;
  padding: 4px 12px;
  border: 1px solid #c51b21;
  border-radius: 6px;
  background: #c51b21;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer
}

.gr-chat-picker-send:hover {
  border-color: #a9161b;
  background: #a9161b
}

.gr-chat-picker-foot {
  display: flex;
  align-items: center;
  gap: 10px
}

.gr-chat-picker-foot em {
  color: #a4adb8;
  font-size: 11.5px;
  font-style: normal
}

.gr-chat-picker-empty {
  margin: auto;
  padding: 24px 0;
  color: #8a93a0;
  font-size: 12.5px;
  text-align: center
}

/* ---------- 订单卡片消息（content = `[订单卡片]{json}`，与 APP/小程序同一张卡） ----------
   2026-09-29 用户要求：左封面 + 右信息，封面**上下居中**；卡片上不写「租赁订单」标题、不写商家名；
   套餐 / 租赁日期 / 数量 **各占一行**（原来用 ' · ' 拼一行，窄卡里会被省略成「…」）。
   最终形态：封面 64×64 + 状态角标（右上）/ 商品名 / 套餐 / 租赁日期 / 数量 / 订单号 + 金额。
   ⚠️ 每个格子都「有值才渲染」（见 cardHTML）：对方可能是 APP 发的、老数据也可能只给一部分字段，
      空字段直接不画 —— 否则会出现空壳卡。
   点击进订单详情（新标签，不打断对话）；左右两侧都用同一张卡（卡片是内容不是立场，
   靠 gr-chat-line.mine 的左右对齐 + 淡红底区分谁发的）。 */
.gr-chat-card {
  display: flex;
  gap: 10px;
  /* 封面在卡片里**上下居中**（2026-09-29 用户要求）：信息分行后卡片比 64px 的图高，
     默认的 align-items:stretch 会让图贴顶、下面空一截。 */
  align-items: center;
  box-sizing: border-box;
  /* 窄容器里自适应收窄，而不是被裁掉右半边 */
  width: min(320px, 100%);
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none
}

.gr-chat-line.mine .gr-chat-card {
  border-color: #f6d3d4;
  background: #fffafa
}

.gr-chat-card:hover {
  border-color: #c51b21
}

/* 订单封面：没有封面（老商品）时留灰底占位，卡片高度不塌 */
.gr-chat-card-cover {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #f2f4f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b2c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 18l5-4 3 2.4L16 13l4 3.4'/%3E%3C/svg%3E") center/26px no-repeat;
  object-fit: cover
}

.gr-chat-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.gr-chat-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a93a0;
  font-size: 11.5px
}

.gr-chat-card-head em {
  flex: none;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 9px;
  background: #fff1f1;
  color: #c51b21;
  font-style: normal;
  font-size: 11px;
  white-space: nowrap
}

/* 商品名在 head 行内（与状态角标同一行）：占满剩余宽度、过长省略；角标 flex:none 靠右 */
.gr-chat-card-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #313a46;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap
}

.gr-chat-card-meta {
  overflow: hidden;
  color: #5f6874;
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap
}

.gr-chat-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: #a4adb8;
  font-size: 11.5px
}

.gr-chat-card-no {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.gr-chat-card-foot i {
  overflow: hidden;
  max-width: 92px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap
}

.gr-chat-card-foot b {
  margin-left: auto;
  color: #c51b21;
  font-size: 14px;
  white-space: nowrap
}