.stage4-chat-page {
  --stage4-accent: #16856b;
  --stage4-accent-strong: #0f6b57;
  --stage4-ink: #20262c;
  --stage4-muted: #7a838b;
  --stage4-line: #e3e8ea;
  position: fixed;
  z-index: 850000;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--stage4-ink);
  background: #f1f4f4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.stage4-chat-page *,
.stage4-chat-page *::before,
.stage4-chat-page *::after { box-sizing: border-box; }

.stage4-chat-header {
  min-height: calc(4.25rem + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 2.5rem 3rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: .55rem;
  padding: env(safe-area-inset-top) .75rem 0;
  border-bottom: 1px solid var(--stage4-line);
  background: #fff;
}

.stage4-icon-button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #4c565e;
  background: transparent;
}

.stage4-icon-button[data-stage4-back] span {
  width: .72rem;
  height: .72rem;
  display: block;
  border-left: .12rem solid currentColor;
  border-bottom: .12rem solid currentColor;
  transform: rotate(45deg);
}

.stage4-refresh span {
  width: 1rem;
  height: 1rem;
  display: block;
  border: .1rem solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  position: relative;
}

.stage4-refresh span::after {
  content: "";
  position: absolute;
  left: -.12rem;
  bottom: -.02rem;
  width: .32rem;
  height: .32rem;
  border-left: .1rem solid currentColor;
  border-bottom: .1rem solid currentColor;
  transform: rotate(-12deg);
}

.stage4-service-avatar {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  position: relative;
  border: .12rem solid #fff;
  border-radius: .5rem;
  color: #fff;
  background: var(--stage4-accent);
  font-size: 1rem;
  font-weight: 700;
  overflow: visible;
  box-shadow: 0 .12rem .45rem rgba(32, 38, 44, .16);
}

.stage4-service-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.stage4-service-avatar i {
  position: absolute;
  right: -.13rem;
  bottom: -.13rem;
  width: .62rem;
  height: .62rem;
  border: .12rem solid #fff;
  border-radius: 50%;
  background: #36bb7d;
}

.stage4-chat-title { min-width: 0; }
.stage4-chat-title h1 { margin: 0; font-size: .95rem; line-height: 1.25; font-weight: 650; }
.stage4-chat-title p { margin: .18rem 0 0; overflow: hidden; color: var(--stage4-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.stage4-chat-title p.is-online { color: var(--stage4-accent); }

.stage4-service-note {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .36rem .75rem;
  color: #7b7156;
  background: #fff8e6;
  font-size: .62rem;
  line-height: 1.35;
  text-align: center;
}

.stage4-service-note i {
  width: .82rem;
  height: .82rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: .08rem solid #b8953f;
  border-radius: 50%;
}

.stage4-service-note i::after { content: "i"; font-style: normal; font-size: .54rem; font-weight: 700; }

.stage4-message-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem .8rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}

.stage4-loading,
.stage4-empty {
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #929aa0;
  font-size: .72rem;
  text-align: center;
}

.stage4-loading span {
  width: 1.35rem;
  height: 1.35rem;
  margin-bottom: .65rem;
  border: .11rem solid #cbd3d5;
  border-top-color: var(--stage4-accent);
  border-radius: 50%;
  animation: stage4-spin .8s linear infinite;
}

@keyframes stage4-spin { to { transform: rotate(360deg); } }
.stage4-empty strong { color: #626d74; font-size: .85rem; }
.stage4-empty p { margin: .45rem 0 0; line-height: 1.65; }
.stage4-empty button { height: 2rem; margin-top: .8rem; padding: 0 .9rem; border: 1px solid #b9d2cc; border-radius: .3rem; color: var(--stage4-accent-strong); background: #fff; font-size: .68rem; }

.stage4-empty-avatar {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: .75rem;
  border-radius: .5rem;
  color: #fff;
  background: var(--stage4-accent);
  box-shadow: 0 .35rem 1rem rgba(32, 38, 44, .12);
  font-size: 1.25rem;
  font-weight: 700;
}
.stage4-empty-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.stage4-empty-avatar i { position: absolute; right: -.12rem; bottom: -.12rem; width: .75rem; height: .75rem; border: .12rem solid #fff; border-radius: 50%; background: #36bb7d; }

.stage4-system-message { margin: .7rem auto 1rem; text-align: center; }
.stage4-system-message span { display: inline-block; max-width: 90%; padding: .3rem .55rem; border-radius: .25rem; color: #828b91; background: #e2e7e8; font-size: .6rem; line-height: 1.5; overflow-wrap: anywhere; }

.stage4-message { display: flex; align-items: flex-start; gap: .48rem; margin: 0 0 1rem; }
.stage4-message.is-user { flex-direction: row-reverse; }
.stage4-message-avatar { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; flex: 0 0 2.25rem; border: .08rem solid rgba(255,255,255,.9); border-radius: .4rem; color: #fff; background: var(--stage4-accent); box-shadow: 0 .1rem .35rem rgba(32,38,44,.1); font-size: .72rem; font-weight: 650; }
.stage4-message-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.stage4-message.is-user .stage4-message-avatar { color: #556068; background: #d7dddf; }
.stage4-message-body { max-width: min(76%, 34rem); min-width: 0; }
.stage4-message-meta { min-height: .9rem; display: flex; align-items: center; gap: .38rem; margin: 0 0 .25rem; color: #8d969c; font-size: .55rem; }
.stage4-message-meta strong { max-width: 10rem; overflow: hidden; color: #626c73; font-size: .6rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stage4-message-meta time { color: #9aa2a7; font-size: .55rem; }
.stage4-message.is-user .stage4-message-meta { justify-content: flex-end; }
.stage4-message-bubble { padding: .62rem .75rem; border: 1px solid #e1e6e8; border-radius: .32rem; color: #30383e; background: #fff; box-shadow: 0 .06rem .18rem rgba(36,48,52,.04); font-size: .76rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.stage4-message.is-user .stage4-message-bubble { color: #fff; border-color: var(--stage4-accent); background: var(--stage4-accent); }
.stage4-message-image { display: block; max-width: 12rem; max-height: 16rem; padding: 0; overflow: hidden; border: 0; border-radius: .36rem; background: transparent; }
.stage4-message-image img { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }

.stage4-composer {
  flex: 0 0 auto;
  padding: .48rem .65rem calc(.48rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--stage4-line);
  background: #fff;
}

.stage4-composer-row { display: flex; align-items: flex-end; gap: .46rem; }
.stage4-composer textarea { min-width: 0; height: 2.5rem; max-height: 6rem; flex: 1; resize: none; padding: .58rem .68rem; border: 1px solid #dce2e4; border-radius: .38rem; outline: 0; color: var(--stage4-ink); background: #f8f9f9; font-family: inherit; font-size: .75rem; line-height: 1.4; letter-spacing: 0; }
.stage4-composer textarea:focus { border-color: #a9ccc3; background: #fff; box-shadow: 0 0 0 .15rem rgba(22,133,107,.09); }
.stage4-image-button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 2.5rem; padding: 0; border: 0; border-radius: .35rem; color: #657078; background: #edf1f2; }
.stage4-image-button span { width: 1.1rem; height: .9rem; display: block; position: relative; border: .09rem solid currentColor; border-radius: .16rem; }
.stage4-image-button span::before { content: ""; position: absolute; top: .14rem; right: .16rem; width: .18rem; height: .18rem; border-radius: 50%; background: currentColor; }
.stage4-image-button span::after { content: ""; position: absolute; left: .13rem; bottom: .13rem; width: .55rem; height: .42rem; border-left: .09rem solid currentColor; border-top: .09rem solid currentColor; transform: rotate(45deg); }
.stage4-send-button { width: 3.55rem; height: 2.5rem; flex: 0 0 3.55rem; padding: 0; border: 0; border-radius: .35rem; color: #fff; background: var(--stage4-accent); font-size: .72rem; font-weight: 600; }
.stage4-send-button:disabled, .stage4-image-button:disabled { opacity: .5; }

.stage4-toast { position: fixed; z-index: 900000; top: calc(4.25rem + env(safe-area-inset-top)); left: 50%; max-width: calc(100vw - 2rem); transform: translateX(-50%); padding: .55rem .8rem; border-radius: .3rem; color: #fff; background: #263337; box-shadow: 0 .4rem 1.2rem rgba(22,31,34,.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: .68rem; letter-spacing: 0; white-space: nowrap; }
.stage4-toast.is-error { background: #b64949; }

.stage4-customer-item.cs-item {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  margin: .5rem .35rem;
  padding: .65rem .75rem;
  border: 1px solid #e3e8ea;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 .12rem .45rem rgba(32, 38, 44, .06);
}
.stage4-customer-item.cs-item:active { background: #f4faf8; transform: translateY(1px); }
.stage4-customer-item .cs-avatar {
  width: 3.25rem !important;
  height: 3.25rem !important;
  flex: 0 0 3.25rem !important;
  margin-right: .75rem !important;
  overflow: hidden;
  border: .12rem solid #fff;
  border-radius: 50% !important;
  background: #edf2f1;
  box-shadow: 0 0 0 1px #dce6e3, 0 .16rem .5rem rgba(32, 38, 44, .1);
  object-fit: cover;
}
.stage4-customer-item .cs-info { min-width: 0; display: flex; flex: 1; flex-direction: column; justify-content: center; }
.stage4-customer-item .cs-name { overflow: hidden; color: #20262c !important; font-size: .9rem !important; font-weight: 650 !important; text-overflow: ellipsis; white-space: nowrap; }
.stage4-customer-meta { display: flex; align-items: center; gap: .3rem; margin-top: .28rem; color: #7a838b; font-size: .65rem; }
.stage4-customer-meta i { width: .42rem; height: .42rem; flex: 0 0 .42rem; border-radius: 50%; background: #36bb7d; box-shadow: 0 0 0 .14rem rgba(54,187,125,.12); }
.stage4-customer-item .cs-arrow { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: 0 0 1.75rem; margin-left: .5rem !important; border-radius: 50%; color: var(--stage4-accent); background: #edf7f4; }

@media (min-width: 720px) {
  .stage4-chat-page { left: 50%; width: min(100%, 52rem); transform: translateX(-50%); border-left: 1px solid #dce2e4; border-right: 1px solid #dce2e4; box-shadow: 0 0 2.5rem rgba(35,48,51,.12); }
  .stage4-chat-header { padding-left: 1.1rem; padding-right: 1.1rem; }
  .stage4-message-list { padding-left: 1.5rem; padding-right: 1.5rem; }
  .stage4-composer { padding-left: 1rem; padding-right: 1rem; }
}