.sp-launch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  background: #234e3d;
  color: white;
  border: 0;
  border-radius: 99px;
  box-shadow: 0 5px 24px #17332430;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    600 14px "DM Sans",
    sans-serif;
  cursor: pointer;
}
.sp-panel {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: 380px;
  max-height: calc(100dvh - 110px);
  height: 600px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #dce4db;
  border-radius: 18px;
  box-shadow: 0 12px 70px #1d342830;
  display: flex;
  flex-direction: column;
  font:
    14px "DM Sans",
    sans-serif;
  color: #202b26;
  overflow: hidden;
}
.sp-panel[hidden] {
  display: none;
}
.sp-head {
  padding: 18px 20px;
  background: #edf2e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-head strong {
  display: block;
  font-size: 16px;
}
.sp-head small {
  display: block;
  color: #627265;
  margin-top: 5px;
}
.sp-close {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px;
}
.sp-messages {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.sp-message {
  max-width: 94%;
  padding: 13px 15px;
  border-radius: 12px;
  background: #f0f3ed;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sp-message.customer {
  background: #234e3d;
  color: #fff;
  align-self: flex-end;
}
.sp-message small {
  display: block;
  font-size: 10px;
  margin-bottom: 5px;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.sp-source {
  font-size: 11px;
  margin-top: 8px;
  color: #52725c;
}
.sp-tools {
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #e7ebe4;
  flex-wrap: wrap;
}
.sp-tools button,
.sp-tools select {
  font:
    12px "DM Sans",
    sans-serif;
  border: 1px solid #dce4db;
  background: white;
  border-radius: 7px;
  padding: 8px;
  color: #34513f;
  cursor: pointer;
}
.sp-compose {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
}
.sp-compose textarea {
  resize: none;
  flex: 1;
  min-width: 0;
  border: 1px solid #dce4db;
  border-radius: 8px;
  padding: 12px;
  font:
    14px "DM Sans",
    sans-serif;
  height: 66px;
}
.sp-compose button {
  align-self: center;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #234e3d;
  color: white;
  padding: 0 14px;
  cursor: pointer;
}
.sp-panel button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.sp-error {
  color: #9a302a;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.5;
}
.sp-status {
  padding: 8px 16px;
  font-size: 11px;
  background: #f7f8f5;
  color: #637065;
}
.sp-order {
  padding: 12px 16px;
  background: #edf2e9;
  font-size: 12px;
  line-height: 1.6;
}
.sp-order[hidden] {
  display: none;
}
.sp-panel :focus-visible {
  outline: 2px solid #5c9171;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .sp-panel {
    right: 12px;
    left: 12px;
    bottom: 82px;
    width: auto;
    max-height: calc(100dvh - 100px);
  }
  .sp-launch {
    right: 16px;
    bottom: 16px;
  }
}
.sp-products {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.sp-products a {
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 11px;
  background: white;
  border: 1px solid #dce4db;
  border-radius: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}