/* DPL Chat: the button's extras and the panel. Measurements and colours: docs/superpowers/specs/2026-10-13-chat-redesign-design.md,
   "The panel". Mobile first. Controls are 44 px tall where the reference has 40 (the shop's touch-target rule). */

.dpl-fab__btn--chat {
  background: #FF9A01;
  color: #0D0D0D;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  font: inherit;
}

.dpl-fab__btn--chat:focus-visible {
  outline: 2px solid #0D0D0D;
  outline-offset: 2px;
}

.dpl-chat__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0D0D0D;
  border: 2px solid #FFFFFF;
}

/* Every part the script shows and hides. Without these a part with its own display would stay visible, and focusable. */
.dpl-chat__badge[hidden],
.dpl-chat[hidden],
.dpl-chat__identity[hidden],
.dpl-chat__error[hidden],
.dpl-chat__chip[hidden],
.dpl-chat__file[hidden],
.dpl-chat__telegram[hidden],
.dpl-chat__welcome-telegram[hidden] {
  display: none;
}

/* The panel: above the floating row, its right edge on the row's, 12 px above the buttons (48 px tall, 16 px up). */
.dpl-chat {
  position: fixed;
  z-index: 9001;
  right: 16px;
  bottom: 76px;
  width: 364px;
  height: 520px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.2);
  color: #14231e;
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

/* The header. */
.dpl-chat__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #FF9A01;
  color: #FFFFFF;
}

.dpl-chat__avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.dpl-chat__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.dpl-chat__title {
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: #FFFFFF;
}

.dpl-chat__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}

.dpl-chat__status-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cfc9b;
}

/* A 22 px cross in a 44 × 44 hit area; the negative margin keeps the header at the reference's height. */
.dpl-chat__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  cursor: pointer;
}

.dpl-chat__close svg {
  width: 22px;
  height: 22px;
}

.dpl-chat__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.dpl-chat__close:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

/* The conversation. */
.dpl-chat__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f6f8f7;
}

.dpl-chat__log:focus-visible {
  outline: 2px solid #FF9A01;
  outline-offset: -2px;
}

.dpl-chat__msg {
  flex: 0 0 auto;
  max-width: 82%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 14px;
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid #e4eae7;
  border-bottom-left-radius: 5px;
  color: #14231e;
  overflow-wrap: anywhere;
}

.dpl-chat__msg--visitor {
  align-self: flex-end;
  background: #FF9A01;
  border-color: #FF9A01;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  color: #FFFFFF;
}

/* Who wrote it, for a screen reader only: the reference shows no name above a bubble. */
.dpl-chat__who {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dpl-chat__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* A file in the conversation: its name (a PDF, or a photo after a reload), or the photo itself while the page is open. */
.dpl-chat__file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.dpl-chat__file-chip svg {
  flex: 0 0 18px;
}

.dpl-chat__msg--image {
  padding: 4px;
}

.dpl-chat__image {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 10px;
}

/* A note in the conversation ("sent"), and the error line under it, which looks the same in red. */
.dpl-chat__note,
.dpl-chat__error {
  align-self: center;
  max-width: 90%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eef2f0;
  color: #74827c;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.dpl-chat__error {
  flex: 0 0 auto;
  margin: 8px auto 0;
  color: #e05d4d;
}

/* Name and e-mail, before the first message: a small card under the welcome bubble. */
.dpl-chat__identity {
  flex: 0 0 auto;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #e4eae7;
  border-radius: 14px;
}

.dpl-chat__label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #14231e;
}

.dpl-chat__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid #d7e0dc;
  border-radius: 10px;
  background: #fafcfb;
  color: #14231e;
  font: inherit;
  /* 16px on a phone: a smaller field makes an iPhone zoom the page when it is focused. */
  font-size: 16px;
  line-height: 1.4;
}

.dpl-chat__input:focus {
  outline: none;
  border-color: #FF9A01;
  box-shadow: 0 0 0 3px rgba(255, 154, 1, 0.14);
}

.dpl-chat__input--error,
.dpl-chat__input--error:focus {
  border-color: #e05d4d;
}

.dpl-chat__hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: #74827c;
}

/* The Telegram button: above the footer until the visitor's first message. */
.dpl-chat__telegram {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 8px 12px 4px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #229ED9;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.dpl-chat__telegram:hover {
  background: #1B86B9;
  color: #FFFFFF;
}

.dpl-chat__telegram:focus-visible {
  outline: 2px solid #14231e;
  outline-offset: 2px;
}

.dpl-chat__telegram svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* The footer. */
.dpl-chat__form {
  flex: 0 0 auto;
  padding: 10px;
  border-top: 1px solid #e4eae7;
}

.dpl-chat__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dpl-chat__attach,
.dpl-chat__send {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

.dpl-chat__attach {
  background: #f6f8f7;
  color: #14231e;
}

.dpl-chat__attach:hover {
  background: #eef2f0;
}

.dpl-chat__send {
  background: #FF9A01;
  color: #FFFFFF;
}

.dpl-chat__send[disabled] {
  opacity: 0.6;
  cursor: default;
}

.dpl-chat__attach:focus-visible,
.dpl-chat__send:focus-visible {
  outline: 2px solid #14231e;
  outline-offset: 2px;
}

/* Grows with the text from 44 to 96 px (the script sets the height). */
.dpl-chat__textarea {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 96px;
  margin: 0;
  resize: none;
  background: #FFFFFF;
  overflow-y: auto;
}

/* The chosen file, before it is sent: its name and a cross to take it away. */
.dpl-chat__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0 0 0 10px;
  border: 1px solid #e4eae7;
  border-radius: 10px;
  background: #f6f8f7;
  font-size: 13px;
}

.dpl-chat__chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dpl-chat__chip-remove {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #14231e;
  cursor: pointer;
}

.dpl-chat__chip-remove:hover {
  background: #eef2f0;
}

.dpl-chat__spinner {
  display: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 13px;
  border: 2px solid #e4eae7;
  border-top-color: #FF9A01;
  border-radius: 50%;
}

/* While the file uploads: the spinner in the remove button's place. */
.dpl-chat__chip--busy .dpl-chat__spinner {
  display: block;
}

.dpl-chat__chip--busy .dpl-chat__chip-remove {
  display: none;
}

.dpl-chat__chip-remove:focus-visible {
  outline: 2px solid #14231e;
  outline-offset: -2px;
}

/* Off screen, not display:none: a bot that skips hidden fields still fills this one in. */
.dpl-chat__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A phone: the window's width less 24 px, its height less 100 px. */
@media (max-width: 420px) {
  .dpl-chat {
    width: calc(100vw - 24px);
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    max-height: none;
  }
}

/* From 768 px the floating row is 52 px tall and 24 px from the corner. */
@media (min-width: 768px) {
  .dpl-chat {
    right: 24px;
    bottom: 88px;
  }
  .dpl-chat__input {
    font-size: 14px;
  }
}

/* Only for those who have not asked for less motion: the status dot pulses, the name card rises in, the upload spinner turns. */
@media (prefers-reduced-motion: no-preference) {
  .dpl-chat__status-dot {
    animation: dpl-chat-pulse 1.8s ease-in-out infinite;
  }
  .dpl-chat__identity:not([hidden]) {
    animation: dpl-chat-rise 0.18s ease-out;
  }
  .dpl-chat__chip--busy .dpl-chat__spinner {
    animation: dpl-chat-spin 0.8s linear infinite;
  }
  @keyframes dpl-chat-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes dpl-chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  @keyframes dpl-chat-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* While the cookie bar is up the floating buttons sit above it (component-dpl-cookie-consent.css); the panel follows them. */
.dpl-consent-open .dpl-chat {
  bottom: calc(76px + var(--dpl-consent-height, 0px));
  max-height: calc(100vh - 120px - var(--dpl-consent-height, 0px));
  max-height: calc(100dvh - 120px - var(--dpl-consent-height, 0px));
}

/* With the bar up the buttons sit 24 px above it at every width (component-dpl-cookie-consent.css), not 16. */
@media (max-width: 767px) {
  .dpl-consent-open .dpl-chat {
    bottom: calc(84px + var(--dpl-consent-height, 0px));
  }
}

@media (max-width: 420px) {
  .dpl-consent-open .dpl-chat {
    height: calc(100vh - 108px - var(--dpl-consent-height, 0px));
    height: calc(100dvh - 108px - var(--dpl-consent-height, 0px));
    max-height: none;
  }
}

@media (min-width: 768px) {
  .dpl-consent-open .dpl-chat {
    bottom: calc(88px + var(--dpl-consent-height, 0px));
  }
}