/* Visual skins only. Existing selectors, hidden states and chat handlers stay intact. */
.chat-popup[data-chat-design="design_02"] {
  --skin: #0369a1;
  --skin-soft: #e0f2fe;
  border-radius: 8px !important;
  border-top: 6px solid var(--skin) !important;
}
.chat-popup[data-chat-design="design_03"] {
  --skin: #047857;
  --skin-soft: #d1fae5;
  border-radius: 28px 28px 8px 28px !important;
}
.chat-popup[data-chat-design="design_04"] {
  --skin: #4338ca;
  --skin-soft: #e0e7ff;
  border-radius: 20px !important;
  border: 3px solid var(--skin) !important;
}
.chat-popup[data-chat-design="design_05"] {
  --skin: #be185d;
  --skin-soft: #fce7f3;
  border-radius: 30px !important;
}
.chat-popup[data-chat-design="design_06"] {
  --skin: #92400e;
  --skin-soft: #fef3c7;
  border-radius: 4px !important;
  border: 2px solid #d6b88b !important;
  box-shadow: 8px 8px 0 #d6b88b !important;
}
.chat-popup[data-chat-design="design_07"] {
  --skin: #0e7490;
  --skin-soft: #cffafe;
  border-radius: 24px !important;
  border: 1px solid #67e8f9 !important;
  box-shadow: 0 18px 60px #0e749033 !important;
}
.chat-popup[data-chat-design="design_08"] {
  --skin: #334155;
  --skin-soft: #f1f5f9;
  border-radius: 0 !important;
  border-left: 8px solid var(--skin) !important;
}
.chat-popup[data-chat-design="design_09"] {
  --skin: #7e22ce;
  --skin-soft: #f3e8ff;
  border-radius: 16px !important;
  border: 2px dashed #c084fc !important;
}
.chat-popup[data-chat-design="design_10"] {
  --skin: #c2410c;
  --skin-soft: #ffedd5;
  border-radius: 24px 24px 0 0 !important;
  border-bottom: 6px solid var(--skin) !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-head {
  background: var(--skin-soft) !important;
  color: var(--skin) !important;
  border-color: var(--skin-soft) !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-head
  strong,
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-powered-by {
  color: var(--skin) !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-head
  button {
  color: var(--skin) !important;
  background: #fff !important;
  min-width: 40px;
  min-height: 40px;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-head
  small {
  color: var(--skin) !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-body {
  background: #fff !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  button[type="submit"] {
  background: var(--skin) !important;
  color: #fff !important;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"]) input:focus,
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  textarea:focus {
  outline: 2px solid var(--skin) !important;
  outline-offset: 2px;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-message.support:not(.error) {
  background: var(--skin-soft) !important;
  color: var(--skin) !important;
  border-color: var(--skin-soft) !important;
}
.chat-popup--bubble-popup[data-chat-design]:not(
    [data-chat-design="design_01"]
  ).open,
.chat-popup--slide-in-sidebar[data-chat-design]:not(
    [data-chat-design="design_01"]
  ).open {
  display: flex !important;
  flex-direction: column;
}
.chat-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-head {
  flex-shrink: 0;
}
.chat-popup--bubble-popup[data-chat-design]:not([data-chat-design="design_01"])
  .chat-popup-body,
.chat-popup--slide-in-sidebar[data-chat-design]:not(
    [data-chat-design="design_01"]
  )
  .chat-popup-body {
  min-height: 0;
  flex: 1;
}
/* Each family changes header, form or card structure in addition to its palette. */
.chat-popup[data-chat-design="design_02"] .chat-popup-head {
  padding: 16px !important;
}
.chat-popup[data-chat-design="design_02"] input,
.chat-popup[data-chat-design="design_02"] textarea {
  border-radius: 4px !important;
}
.chat-popup[data-chat-design="design_03"] .chat-popup-head-main {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.chat-popup[data-chat-design="design_03"] button[type="submit"] {
  border-radius: 24px !important;
}
.chat-popup[data-chat-design="design_04"] .chat-popup-head {
  background: var(--skin) !important;
}
.chat-popup[data-chat-design="design_04"] .chat-popup-head strong,
.chat-popup[data-chat-design="design_04"] .chat-powered-by {
  color: #fff !important;
}
.chat-popup[data-chat-design="design_04"] .chat-popup-head small {
  color: #fff !important;
}
.chat-popup[data-chat-design="design_04"] .chat-message.support {
  border-left: 5px solid var(--skin) !important;
  border-radius: 0 !important;
}
.chat-popup[data-chat-design="design_05"] .chat-popup-head-main {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.chat-popup[data-chat-design="design_05"] input,
.chat-popup[data-chat-design="design_05"] textarea {
  border-radius: 18px !important;
  background: #fff7fb !important;
}
.chat-popup[data-chat-design="design_06"] label {
  font-family: Georgia, serif;
}
.chat-popup[data-chat-design="design_06"] input,
.chat-popup[data-chat-design="design_06"] textarea,
.chat-popup[data-chat-design="design_06"] button[type="submit"] {
  border-radius: 0 !important;
}
.chat-popup[data-chat-design="design_07"] .chat-popup-head {
  background: linear-gradient(120deg, #cffafe, #ecfeff) !important;
}
.chat-popup[data-chat-design="design_07"] .chat-popup-avatar {
  border-radius: 50% !important;
}
.chat-popup[data-chat-design="design_07"] .chat-message.support {
  border-radius: 18px 18px 18px 0 !important;
}
.chat-popup[data-chat-design="design_08"] .chat-popup-head {
  padding: 12px 16px !important;
}
.chat-popup[data-chat-design="design_08"] input,
.chat-popup[data-chat-design="design_08"] textarea {
  border: 0 !important;
  border-bottom: 2px solid #94a3b8 !important;
  border-radius: 0 !important;
}
.chat-popup[data-chat-design="design_09"] .chat-message.support {
  border: 1px dashed var(--skin) !important;
}
.chat-popup[data-chat-design="design_09"] button[type="submit"] {
  border-radius: 8px 24px !important;
}
.chat-popup[data-chat-design="design_10"] .chat-popup-head-main {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.chat-popup[data-chat-design="design_10"] .chat-message.support {
  border-radius: 0 !important;
  border-bottom: 3px solid var(--skin) !important;
}
/* Sidebar designs get their own rail/header geometry. */
.chat-popup--slide-in-sidebar[data-chat-design="design_03"] .chat-popup-head,
.chat-popup--slide-in-sidebar[data-chat-design="design_05"] .chat-popup-head {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.chat-popup--slide-in-sidebar[data-chat-design="design_07"] {
  border-left: 10px solid var(--skin) !important;
}
.chat-popup--slide-in-sidebar[data-chat-design="design_09"] .chat-popup-head {
  border-bottom: 5px solid var(--skin) !important;
}
/* Inline skins retain an in-page layout; alternate compact and split-panel cards. */
@media (min-width: 641px) {
  .chat-popup--inline-embedded[data-chat-design="design_02"],
  .chat-popup--inline-embedded[data-chat-design="design_06"],
  .chat-popup--inline-embedded[data-chat-design="design_08"],
  .chat-popup--inline-embedded[data-chat-design="design_10"] {
    grid-template-columns: 1fr !important;
  }
  .chat-popup--inline-embedded[data-chat-design="design_02"]
    [data-chat-details]:not([hidden]),
  .chat-popup--inline-embedded[data-chat-design="design_06"]
    [data-chat-details]:not([hidden]),
  .chat-popup--inline-embedded[data-chat-design="design_08"]
    [data-chat-details]:not([hidden]),
  .chat-popup--inline-embedded[data-chat-design="design_10"]
    [data-chat-details]:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .chat-popup--inline-embedded[data-chat-design="design_02"]
    [data-chat-details]
    label:last-of-type,
  .chat-popup--inline-embedded[data-chat-design="design_06"]
    [data-chat-details]
    label:last-of-type,
  .chat-popup--inline-embedded[data-chat-design="design_08"]
    [data-chat-details]
    label:last-of-type,
  .chat-popup--inline-embedded[data-chat-design="design_10"]
    [data-chat-details]
    label:last-of-type {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .chat-popup[data-chat-design]:not([data-chat-design="design_01"]) {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }
  .chat-popup--bubble-popup[data-chat-design]:not(
      [data-chat-design="design_01"]
    ) {
    right: 12px !important;
    max-height: calc(100dvh - 90px) !important;
  }
  .chat-popup--slide-in-sidebar[data-chat-design]:not(
      [data-chat-design="design_01"]
    ) {
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .chat-popup--inline-embedded[data-chat-design]:not(
      [data-chat-design="design_01"]
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .chat-popup[data-chat-design]:not([data-chat-design="design_01"])
    .chat-popup-head {
    padding: 14px !important;
  }
  .chat-popup[data-chat-design]:not([data-chat-design="design_01"]) input,
  .chat-popup[data-chat-design]:not([data-chat-design="design_01"]) textarea {
    min-width: 0;
    font-size: 16px !important;
  }
}