/* DSM sales bubble - floating bottom-right launcher.


   Self-contained: does NOT rely on /static/dsm-brand.css so it works on


   pages where brand tokens aren't loaded. Brand colours are hard-coded to


   DSM blue (#0a4d8c) and DSM red dot (#e63946) per Hermes brand spec. */





.dsm-care-bubble {


  position: fixed;


  bottom: 20px;


  right: 20px;


  z-index: 9999;


  width: 76px;


  height: 76px;


  border-radius: 50%;


  background: #0a4d8c;


  color: #fff;


  border: none;


  cursor: pointer;


  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 44px;


  line-height: 1;


  padding: 0;


  transition: transform 0.18s ease, box-shadow 0.18s ease;


}





.dsm-care-bubble:hover,


.dsm-care-bubble:focus-visible {


  transform: scale(1.06);


  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);


  outline: none;


}





.dsm-care-bubble--open {


  transform: rotate(8deg);


}





.dsm-care-bubble__icon {


  font-size: 44px;


  line-height: 1;


}





.dsm-care-bubble__dot {


  position: absolute;


  top: 6px;


  right: 6px;


  width: 14px;


  height: 14px;


  border-radius: 50%;


  background: #e63946;


  border: 2px solid #fff;


  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);


}





.dsm-care-panel {


  position: fixed;


  bottom: 130px;


  right: 20px;


  z-index: 9999;


  width: 360px;


  max-width: calc(100vw - 40px);


  max-height: 70vh;


  background: #fff;


  border-radius: 14px;


  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);


  overflow: hidden;


  display: flex;


  flex-direction: column;


}





/* Reset the inline-section sizing when the chat lives inside the panel. */


.dsm-care-panel .dsm-care-chat {


  margin: 0;


  max-width: none;


  border: none;


  border-radius: 0;


  padding: 14px;


  background: #fff;


  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;


  color: #1a1a1a;


  flex: 1 1 auto;


  display: flex;


  flex-direction: column;


  gap: 10px;


  min-height: 0;


}





.dsm-care-panel .dsm-care-chat__header {


  display: flex;


  align-items: flex-start;


  justify-content: space-between;


  gap: 10px;


  padding-bottom: 10px;


  border-bottom: 1px solid #e5e7eb;


}





.dsm-care-panel .dsm-care-chat__header-text { flex: 1 1 auto; min-width: 0; }





.dsm-care-panel .dsm-care-chat__title {


  margin: 0;


  font-size: 16px;


  font-weight: 700;


  color: #0a4d8c;


}





.dsm-care-panel .dsm-care-chat__subtitle {


  margin: 2px 0 0;


  font-size: 12px;


  color: #4b5563;


}





.dsm-care-chat__close {


  background: transparent;


  border: none;


  color: #6b7280;


  font-size: 22px;


  line-height: 1;


  cursor: pointer;


  padding: 0 4px;


}





.dsm-care-chat__close:hover { color: #111827; }





.dsm-care-panel .dsm-care-chat__transcript {


  flex: 1 1 auto;


  min-height: 200px;


  max-height: 50vh;


  overflow-y: auto;


  display: flex;


  flex-direction: column;


  gap: 8px;


  padding-right: 4px;


}





.dsm-care-panel .dsm-care-chat__msg {


  padding: 8px 12px;


  border-radius: 12px;


  line-height: 1.4;


  font-size: 14px;


  max-width: 85%;


  word-wrap: break-word;


}





.dsm-care-panel .dsm-care-chat__msg--user {


  align-self: flex-end;


  background: #0a4d8c;


  color: #fff;


  border-bottom-right-radius: 4px;


}





.dsm-care-panel .dsm-care-chat__msg--assistant {


  align-self: flex-start;


  background: #f3f4f6;


  color: #1a1a1a;


  border-bottom-left-radius: 4px;


}





.dsm-care-panel .dsm-care-chat__actions {


  display: flex;


  gap: 6px;


  flex-wrap: wrap;


}





.dsm-care-panel .dsm-care-chat__action {


  font-size: 12px;


  color: #0a4d8c;


  text-decoration: none;


  border: 1px solid #0a4d8c;


  border-radius: 6px;


  padding: 4px 10px;


}





.dsm-care-panel .dsm-care-chat__action:hover,


.dsm-care-panel .dsm-care-chat__action:focus-visible {


  background: #0a4d8c;


  color: #fff;


}





.dsm-care-panel .dsm-care-chat__input-row {


  display: flex;


  gap: 6px;


}





.dsm-care-panel .dsm-care-chat__input {


  flex: 1 1 auto;


  padding: 8px 10px;


  border: 1px solid #d1d5db;


  border-radius: 8px;


  font: inherit;


  font-size: 14px;


  color: #1a1a1a;


  background: #fff;


}





.dsm-care-panel .dsm-care-chat__input:focus {


  outline: none;


  border-color: #0a4d8c;


  box-shadow: 0 0 0 3px rgba(10, 77, 140, 0.15);


}





.dsm-care-panel .dsm-care-chat__input:disabled {


  background: #f9fafb;


  color: #6b7280;


  cursor: not-allowed;


}





.dsm-care-panel .dsm-care-chat__send {


  padding: 8px 14px;


  background: #0a4d8c;


  color: #fff;


  border: none;


  border-radius: 8px;


  cursor: pointer;


  font: inherit;


  font-size: 14px;


  font-weight: 600;


}





.dsm-care-panel .dsm-care-chat__send:disabled {


  opacity: 0.5;


  cursor: not-allowed;


}





.dsm-care-panel .dsm-care-chat__notice {


  font-size: 10px;


  color: #9ca3af;


  margin: 0;


  text-align: center;


}





.dsm-care-panel .dsm-care-chat__offline,


.dsm-care-panel .dsm-care-chat__final {


  padding: 10px;


  border-left: 3px solid #0a4d8c;


  background: #f9fafb;


  font-size: 13px;


  color: #374151;


}





.dsm-care-panel .dsm-care-chat__final {


  border-left-color: #e63946;


  background: #fef2f2;


  color: #7f1d1d;


}





@media (max-width: 480px) {


  .dsm-care-panel {


    bottom: 88px;


    right: 8px;


    left: 8px;


    width: auto;


    max-width: none;


  }


  .dsm-care-bubble {


    bottom: 16px;


    right: 16px;


  }


}

/* Contact FAB cluster — three small floating buttons stacked above the main chat bubble. */
.dsm-care-fabs {
  position: fixed;
  right: 20px;
  bottom: 130px;  /* sits above the 96px chat bubble */
  z-index: 9998;  /* just below the main bubble */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dsm-care-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #0a4d8c;
  border: 2px solid #0a4d8c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dsm-care-fab:hover,
.dsm-care-fab:focus-visible {
  background: #0a4d8c;
  color: #fff;
  transform: scale(1.07);
  outline: none;
}
.dsm-care-fab--wa { border-color: #25D366; color: #25D366; }
.dsm-care-fab--wa:hover, .dsm-care-fab--wa:focus-visible { background: #25D366; color: #fff; }