:root {
  color: #182230;
  background: #eef2f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --app-height: 100dvh;
  --app-top: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; background: #eef2f7; }
button, textarea { font: inherit; }
.hidden { display: none !important; }

.support-shell {
  position: fixed;
  top: var(--app-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 520px);
  height: var(--app-height);
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #f7f9fc;
  box-shadow: 0 0 36px rgba(34, 48, 73, .12);
  overflow: hidden;
}

.support-header {
  min-height: 72px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 12px;
  gap: 12px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #316bf4, #5d54e8);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.55);
  font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.operator-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.operator-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.operator-copy span { opacity: .86; font-size: 13px; }
.connection-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffd36d; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.connection-dot.online { background: #68eca4; }
.connection-dot.offline { background: #ff8a8a; }

.connection-banner {
  position: absolute;
  z-index: 6;
  top: calc(72px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  color: #8a5b10;
  background: #fff4d6;
  border-bottom: 1px solid #f1dfac;
}
.connection-banner.error { color: #9d3030; background: #fff0f0; border-color: #f1caca; }

.message-feed {
  grid-row: 2;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 14px 26px;
  scrollbar-width: thin;
}
.loading-card { width: fit-content; margin: 20vh auto 0; padding: 10px 14px; border-radius: 14px; color: #627087; background: #fff; box-shadow: 0 6px 18px rgba(43,56,83,.08); }
.date-divider { margin: 18px 0 12px; text-align: center; color: #8a95a8; font-size: 12px; }
.message-row { display: flex; margin: 8px 0; }
.message-row.admin { justify-content: flex-start; }
.message-row.visitor { justify-content: flex-end; }
.message-card { max-width: min(82%, 390px); }
.message-bubble { padding: 10px 13px; border-radius: 16px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; box-shadow: 0 3px 12px rgba(29,45,73,.07); font-size: 14px; }
.admin .message-bubble { border-bottom-left-radius: 5px; background: #fff; color: #263347; }
.visitor .message-bubble { border-bottom-right-radius: 5px; background: #3972f6; color: #fff; }
.message-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 7px; object-fit: cover; background: rgba(0,0,0,.05); }
.message-attachment-expired { display: block; margin-top: 7px; padding: 9px 10px; border: 1px dashed rgba(126,137,154,.55); border-radius: 9px; color: #7e899a; background: rgba(255,255,255,.58); font-size: 12px; }
.message-meta { display: flex; gap: 7px; align-items: center; margin-top: 4px; padding: 0 4px; color: #8792a4; font-size: 11px; }
.visitor .message-meta { justify-content: flex-end; }
.message-state.failed { color: #d34e4e; cursor: pointer; text-decoration: underline; }
.message-state.sending { color: #6e7c91; }
.message-state.processing, .message-state.uploading, .message-state.confirming { color: #6e7c91; }
.message-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.message-action { min-width: 64px; min-height: 44px; padding: 0 11px; border: 1px solid #d8e0ec; border-radius: 12px; color: #315fb9; background: #fff; cursor: pointer; }

.typing-row { grid-row: 3; min-height: 0; padding: 5px 18px 8px; color: #7e899a; font-size: 12px; }
.composer {
  grid-row: 4;
  min-height: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: end;
  background: #fff;
  border-top: 1px solid #e5eaf1;
}
.attachment-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #3c67ca; background: #edf3ff; font-size: 25px; line-height: 1; cursor: pointer; }
.attachment-button.disabled { pointer-events: none; opacity: .5; }
.attachment-draft { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px; border: 1px solid #dfe6f1; border-radius: 12px; color: #5f6d82; background: #f7f9fc; font-size: 12px; }
.attachment-draft img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #e9edf4; }
.attachment-draft span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-draft button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; color: #315fb9; background: #e9f0ff; cursor: pointer; }
#message-input, #message-input-measure { padding: 9px 12px; border: 1px solid #dce3ed; font-size: 16px; line-height: normal; white-space: pre-wrap; overflow-wrap: break-word; }
#message-input { min-height: 38px; max-height: 116px; resize: none; overflow-y: auto; border-radius: 17px; color: #1e2a3c; background: #f7f9fc; outline: none; }
#message-input-measure { position: fixed; left: -10000px; top: 0; height: 0; min-height: 0; max-height: none; visibility: hidden; overflow: hidden; resize: none; pointer-events: none; }
#message-input:focus { border-color: #6d91eb; box-shadow: 0 0 0 3px rgba(61,112,235,.1); }
#send-button { height: 38px; border: 0; border-radius: 17px; color: #fff; background: #3972f6; cursor: pointer; font-weight: 600; }
#send-button:disabled, #message-input:disabled { cursor: not-allowed; opacity: .55; }
.new-message-indicator { position: absolute; z-index: 5; right: 14px; bottom: calc(68px + env(safe-area-inset-bottom)); min-height: 36px; padding: 0 13px; border: 0; border-radius: 18px; color: #fff; background: #3972f6; box-shadow: 0 5px 16px rgba(49,89,180,.26); cursor: pointer; }
.support-shell.has-attachment-draft .new-message-indicator { bottom: calc(126px + env(safe-area-inset-bottom)); }

.support-shell.compact-viewport .support-header { min-height: 44px; padding-top: calc(5px + env(safe-area-inset-top)); padding-bottom: 5px; }
.support-shell.compact-viewport .avatar { width: 34px; height: 34px; }
.support-shell.compact-viewport .operator-copy strong { font-size: 15px; }
.support-shell.compact-viewport .operator-copy span { font-size: 11px; }
.support-shell.compact-viewport .connection-banner { top: calc(44px + env(safe-area-inset-top)); }
.support-shell.compact-viewport .message-feed { padding-top: 8px; padding-bottom: 8px; }

@media (min-width: 521px) {
  .support-shell { top: calc(var(--app-top) + 18px); height: max(1px, calc(var(--app-height) - 36px)); border-radius: 18px; }
  .support-header { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }