.qhs-root {
  --qhs-accent: #ff5b1c;
  --qhs-accent-2: #e63e00;
  --qhs-dark: #131313;
  --qhs-dark-2: #1f1f1f;
  --qhs-bg: #ffffff;
  --qhs-text: #1c1c1c;
  --qhs-muted: #6b7280;
  --qhs-support: #f4f4f5;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.qhs-launcher {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--qhs-accent), var(--qhs-accent-2));
  box-shadow: 0 10px 25px rgba(255, 91, 28, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  position: relative;
  padding: 0;
}
.qhs-launcher:hover { transform: translateY(-2px) scale(1.04); }
.qhs-launcher.qhs-hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

.qhs-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--qhs-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

.qhs-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 44px);
  background: var(--qhs-bg);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.qhs-panel.qhs-visible { opacity: 1; transform: none; pointer-events: auto; }

.qhs-head {
  background: linear-gradient(135deg, var(--qhs-dark-2), var(--qhs-dark));
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--qhs-accent);
}
.qhs-head-txt { display: flex; flex-direction: column; }
.qhs-head-txt strong { font-size: 16px; font-weight: 700; }
.qhs-head-txt span { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.qhs-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.qhs-close:hover { background: var(--qhs-accent); }
.qhs-close svg { display: block; }

.qhs-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qhs-empty {
  margin: auto;
  color: var(--qhs-muted);
  text-align: center;
  padding: 24px 12px;
}

.qhs-msg { display: flex; flex-direction: column; max-width: 82%; }
.qhs-visitor { align-self: flex-end; align-items: flex-end; }
.qhs-support { align-self: flex-start; align-items: flex-start; }

.qhs-bubble {
  padding: 9px 13px;
  border-radius: 15px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.qhs-visitor .qhs-bubble {
  background: linear-gradient(135deg, var(--qhs-accent), var(--qhs-accent-2));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.qhs-support .qhs-bubble {
  background: var(--qhs-support);
  color: var(--qhs-text);
  border-bottom-left-radius: 4px;
}
.qhs-bubble a { color: inherit; text-decoration: underline; }
.qhs-img { max-width: 220px; border-radius: 10px; display: block; }
.qhs-file {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}
.qhs-cap { margin-top: 6px; }
.qhs-meta { font-size: 11px; color: var(--qhs-muted); margin-top: 3px; padding: 0 4px; }

.qhs-err {
  display: none;
  color: #b91c1c;
  background: #fef2f2;
  font-size: 12px;
  padding: 6px 16px;
  text-align: center;
}

/* Attachment status bar */
.qhs-attachbar {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 7px 10px;
  background: #fff4ee;
  border: 1px solid #ffd2bb;
  border-radius: 10px;
  font-size: 12px;
  color: var(--qhs-text);
}
.qhs-attachbar.qhs-show { display: flex; }
.qhs-spin {
  flex: 0 0 auto;
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid #ffd2bb;
  border-top-color: var(--qhs-accent);
  border-radius: 50%;
  animation: qhs-rot 0.8s linear infinite;
}
.qhs-attachbar.qhs-uploading .qhs-spin { display: block; }
.qhs-attach-ok {
  flex: 0 0 auto;
  color: #16a34a;
  font-weight: 700;
  display: none;
}
.qhs-attachbar.qhs-done .qhs-attach-ok { display: inline; }
.qhs-attach-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--qhs-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.qhs-attach-remove:hover { background: #ffd2bb; color: var(--qhs-accent-2); }
.qhs-attach-remove svg { display: block; }
.qhs-attachbar.qhs-uploading .qhs-attach-remove,
.qhs-attachbar.qhs-done .qhs-attach-remove { display: none; }
.qhs-attachname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.qhs-attachstatus { flex: 0 0 auto; color: var(--qhs-accent-2); }
@keyframes qhs-rot { to { transform: rotate(360deg); } }

.qhs-contact {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
}
.qhs-contact input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  font-size: 13px;
  color: var(--qhs-text);
  background: #fff;
}
.qhs-contact input:focus { outline: none; border-color: var(--qhs-accent); }

.qhs-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid #f0f0f0;
}
.qhs-input.qhs-multiline { align-items: flex-end; }
.qhs-attach {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qhs-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.qhs-attach:hover { background: #fff4ee; color: var(--qhs-accent); }
.qhs-attach.qhs-busy { opacity: 0.5; pointer-events: none; }
.qhs-attach svg { display: block; }

.qhs-ta {
  flex: 1;
  resize: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--qhs-text);
  min-height: 40px;
  max-height: 120px;
  line-height: 1.4;
  box-sizing: border-box;
}
.qhs-ta:focus { outline: none; border-color: var(--qhs-accent); }

.qhs-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qhs-accent), var(--qhs-accent-2));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.qhs-send:hover { transform: scale(1.06); }
.qhs-send:disabled { opacity: 0.5; cursor: default; transform: none; }
.qhs-send svg { display: block; margin-left: -2px; }

@media (max-width: 480px) {
  .qhs-root { right: 14px; bottom: 14px; }
  .qhs-panel {
    width: calc(100vw - 20px);
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
  }
}