/* ============================================================
 * Support Widget – Floating bubble styles
 * ============================================================ */

#rtf-support-wrap {
  pointer-events: none;
}

#rtf-support-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 340px;
  transform: scale(0.95) translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), opacity 0.22s ease;
}
#rtf-support-panel.rtf-sp-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#rtf-support-panel input[readonly],
#rtf-support-panel input[readonly]:focus {
  background: rgba(0,0,0,0.04);
  cursor: default;
}
#rtf-support-toggle {
  pointer-events: auto;
  background: var(--primary, #1a56db);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#rtf-support-toggle:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.rtf-sp-header,
.rtf-sp-submit {
  background: var(--primary, #1a56db);
}
.rtf-sp-ticket-id {
  color: var(--primary, #1a56db);
}

/* Dark mode */
.dark-mode #rtf-support-panel {
  background: var(--main-bg-color, #111827);
  border-color: rgba(255,255,255,0.1);
  color: #e5e7eb;
}
.dark-mode #rtf-support-panel input,
.dark-mode #rtf-support-panel textarea,
.dark-mode #rtf-support-panel select {
  border-color: rgba(255,255,255,0.15);
  color: #e5e7eb;
}
.dark-mode #rtf-support-panel input[readonly],
.dark-mode #rtf-support-panel input[readonly]:focus {
  background: rgba(255,255,255,0.05);
}
.dark-mode .rtf-sp-ticket-box {
  background: rgba(255,255,255,0.06);
}
.dark-mode #rtf-support-msg.rtf-sp-msg-ok {
  background: #14532d;
  color: #86efac;
}
.dark-mode #rtf-support-msg.rtf-sp-msg-err {
  background: #450a0a;
  color: #fca5a5;
}