:root { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #202938; background: #ededed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden; background: #ededed; }
button { font: inherit; cursor: pointer; }
.phone-shell { display: grid; grid-template-rows: minmax(0, 1fr) 44px 48px; width: min(430px, 100vw); height: min(920px, 100vh); height: min(920px, 100dvh); background: #ededed; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 60px rgba(15, 23, 42, .18); }
.landing-head { display: none; grid-template-columns: 46px 1fr 46px; align-items: center; background: rgba(247,247,247,.96); border-bottom: 1px solid #dcdcdc; text-align: center; }
.landing-head button { border: 0; background: transparent; font-size: 22px; color: #202938; }
.landing-head div { min-width: 0; }
.landing-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.landing-head span { display: block; margin-top: 2px; color: #87909f; font-size: 11px; filter: none; }
.chat-area { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 10px 14px; background: #ededed; overscroll-behavior: contain; }
.message-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; max-width: 100%; margin-bottom: 10px; }
.message-row.me { grid-template-columns: minmax(0, 1fr) 40px; justify-content: end; }
.avatar { width: 40px; height: 40px; border-radius: 4px; background: var(--agent-avatar, url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=160&h=160&auto=format&fit=crop")) center/cover; }
.message-row.me .avatar { background-image: var(--visitor-avatar, url("https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=160&h=160&auto=format&fit=crop")); }
.bubble { position: relative; justify-self: start; width: auto; max-width: 285px; min-width: 0; padding: 9px 11px; border-radius: 4px; background: #fff; line-height: 1.55; font-size: 15px; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.bubble.long { width: 285px; }
.message-row:not(.me) .bubble::before { content: ""; position: absolute; left: -5px; top: 11px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 6px solid #fff; }
.message-row.me .bubble { justify-self: end; background: #95ec69; color: #111; }
.message-row.me .bubble::after { content: ""; position: absolute; right: -5px; top: 11px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #95ec69; }
.tag-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.tag-actions button { border: 0; border-radius: 999px; background: #f3f7ff; color: #2f80ed; padding: 6px 10px; font-size: 13px; }
.transfer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: #fff; border-top: 1px solid #dcdcdc; }
.transfer-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.transfer-bar button { border: 0; border-radius: 999px; background: #12264a; color: #fff; padding: 8px 14px; font-weight: 800; box-shadow: 0 8px 18px rgba(18,38,74,.12); }
.transfer-bar .end-chat { background: #eef2f7; color: #344054; box-shadow: none; }
.transfer-bar span { color: #87909f; font-size: 13px; }
.landing-composer { display: grid; grid-template-columns: 34px 40px 40px minmax(0, 1fr) 54px; gap: 5px; align-items: center; padding: 7px; background: #fff; border-top: 1px solid #dcdcdc; }
.landing-composer button { min-height: 34px; border: 0; border-radius: 8px; background: #eef4ff; color: #2f80ed; font-size: 13px; font-weight: 700; }
.landing-composer button[type="submit"] { background: #2f80ed; color: #fff; }
.landing-composer button.recording { background: #fff1f1; color: #e54848; }
.landing-composer button:disabled, .transfer-bar button:disabled, .landing-composer input:disabled { cursor: not-allowed; opacity: .55; }
.landing-composer input[type="text"] { min-width: 0; height: 34px; border: 1px solid #d8dee8; border-radius: 8px; padding: 0 10px; }
.media-img { display: block; max-width: 100%; border-radius: 8px; }
.media-audio { width: 230px; max-width: 100%; }
.popup { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.48); }
.popup.hidden { display: none; }
.popup-card { position: relative; width: min(390px, 100%); max-height: 82vh; overflow: auto; border-radius: 12px; background: #fff; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.popup-card > button { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #87909f; font-size: 24px; }
.popup-card img, .popup-card video { width: 100%; border-radius: 8px; }
.rich h3 { margin: 0 0 10px; }
.rich p { margin: 0; line-height: 1.7; color: #475467; }
.emoji-popover { position: fixed; z-index: 20; display: grid; grid-template-columns: repeat(5, 38px); gap: 6px; width: 238px; padding: 10px; border: 1px solid #dce4ef; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(15,23,42,.16); }
.emoji-popover button { display: grid; place-items: center; width: 38px; height: 34px; border: 0; border-radius: 8px; background: #f7f9fc; font-size: 18px; }
.emoji-popover button:hover { background: #eaf2ff; }
@media (max-width: 520px) { body { place-items: stretch; } .phone-shell { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; } .bubble { max-width: calc(100vw - 88px); } .bubble.long { width: calc(100vw - 88px); } }

/* Mobile chat runtime: keep the page fixed and let only messages scroll */
html,
body {
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.phone-shell {
  grid-template-rows: minmax(0, 1fr) auto auto;
  max-height: 100dvh;
}

.chat-area {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.transfer-bar {
  min-height: 44px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.transfer-actions {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.transfer-bar button {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.transfer-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-composer {
  min-height: 48px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom));
}

.landing-composer input[type="text"] {
  min-width: 0;
  font-size: 15px;
}

.popup {
  padding: 14px;
}

.popup-card {
  max-height: min(82vh, calc(100dvh - 28px));
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    place-items: stretch;
  }

  .phone-shell {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .chat-area {
    padding: 10px 8px 12px;
  }

  .message-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 9px;
  }

  .message-row.me {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .avatar {
    width: 36px;
    height: 36px;
  }

  .bubble {
    max-width: calc(100vw - 82px);
    padding: 8px 10px;
    font-size: 14px;
  }

  .bubble.long {
    width: calc(100vw - 82px);
  }

  .tag-actions {
    gap: 6px;
  }

  .tag-actions button {
    padding: 6px 9px;
    font-size: 12px;
  }

  .transfer-bar {
    min-height: 44px;
    padding: 6px 8px;
  }

  .transfer-actions {
    width: 100%;
    gap: 6px;
  }

  .transfer-bar button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .landing-composer {
    grid-template-columns: 32px 36px 36px minmax(0, 1fr) 50px;
    gap: 4px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }

  .landing-composer button {
    min-height: 32px;
    border-radius: 7px;
    font-size: 12px;
  }

  .landing-composer input[type="text"] {
    height: 32px;
    border-radius: 7px;
    padding: 0 9px;
    font-size: 14px;
  }

  .emoji-popover {
    left: 8px !important;
    right: 8px;
    width: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .emoji-popover button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .transfer-actions {
    grid-template-columns: 1fr 76px;
  }

  .transfer-bar button {
    padding-left: 8px;
    padding-right: 8px;
  }

  .landing-composer {
    grid-template-columns: 30px 34px 34px minmax(0, 1fr) 46px;
  }

  .landing-composer button {
    font-size: 11px;
  }
}