/* Local, responsive product illustrations shared by home and detail pages. */
.product-dashboard {
  width: 100%;
  max-width: 580px;
  min-width: 0;
  position: relative;
  background: #fff;
  border: 1px solid #dce5f7;
  border-radius: 11px;
  box-shadow: 0 18px 44px #3a64ad13;
  overflow: hidden;
  text-align: left;
  direction: ltr;
}
.dashboard-top {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 43px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1f8;
  background: #fbfcff;
  font-size: 11px;
  color: #607391;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d7e0ef;
}
.window-dots i:first-child {
  background: #8eaded;
}
.demo-label {
  margin-left: auto;
  color: #8997ad;
  font-size: 9px;
}
.dashboard-body {
  display: flex;
  min-height: 333px;
}
.dashboard-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 26px;
  padding: 20px 13px;
  background: #f5f8fe;
  border-right: 1px solid #eaf0fb;
  width: 52px;
  flex-shrink: 0;
  color: #90a5c6;
}
.dashboard-sidebar .icon {
  width: 17px;
  height: 17px;
}
.dashboard-sidebar .icon:nth-child(3) {
  color: #3778ed;
}
.dashboard-main {
  min-width: 0;
  flex: 1;
  padding: 20px;
  background: #fcfdff;
}
.dash-overview {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 19px;
}
.dash-overview small {
  font-size: 9px;
  color: #8897ad;
  display: block;
  margin-bottom: 7px;
}
.dash-overview strong {
  font-size: 12px;
  color: #3c5278;
  display: block;
  font-weight: 600;
}
.dash-overview em {
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
}
.status-text i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #28b795;
  margin-right: 4px;
}
.dash-conversation {
  background: #fff;
  border: 1px solid #e7edf7;
  border-radius: 8px;
  padding: 14px;
}
.conversation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #486082;
  margin-bottom: 18px;
}
.conversation-head .icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  color: #4285ed;
}
.live-pill {
  padding: 2px 7px;
  font-size: 8px;
  border-radius: 4px;
  color: #269d85;
  background: #edf9f5;
  white-space: nowrap;
}
.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-avatar {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #4682e3;
  background: #eaf1fe;
  font: 600 9px var(--font-en);
}
.chat-row p {
  max-width: 88%;
  background: #f0f5fe;
  padding: 8px 10px;
  border-radius: 0 7px 7px 7px;
  color: #657b9d;
  font-size: 9px;
  line-height: 1.65;
}
.chat-row.customer {
  justify-content: flex-end;
}
.customer .chat-avatar {
  color: #9ca7b9;
  background: #f0f2f7;
  font-family: var(--font-zh);
}
.chat-row.customer p {
  border-radius: 7px 0 7px 7px;
  background: #f5f6fa;
}
.conversation-footer {
  border-top: 1px solid #edf2f8;
  margin-top: 14px;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.conversation-footer > span {
  font-size: 8px;
  color: #94a3b9;
}
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  justify-content: center;
}
.waveform i {
  height: calc(var(--h) * 0.42);
  width: 2px;
  background: #6899f7;
  border-radius: 4px;
  animation: voice-wave 2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.12s);
}
@keyframes voice-wave {
  0%,
  100% {
    transform: scaleY(0.7);
  }
  50% {
    transform: scaleY(1);
  }
}
.task-chart {
  background: #fff;
  border: 1px solid #e7edf7;
  border-radius: 8px;
  padding: 16px 18px;
}
.task-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #59749b;
}
.task-chart-head span {
  font-size: 8px;
  color: #8a9bb3;
}
.chart-columns {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 142px;
  padding-top: 25px;
  background: repeating-linear-gradient(
    0deg,
    #edf2fa,
    #edf2fa 1px,
    transparent 1px,
    transparent 30px
  );
}
.chart-columns i {
  flex: 1;
  background: linear-gradient(#669aff, #bcd4ff);
  border-radius: 3px 3px 0 0;
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 7px;
  font-size: 8px;
  color: #9bacc3;
}
.task-steps {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  justify-content: space-between;
  font-size: 9px;
  color: #6a82a8;
}
.task-steps .icon {
  width: 13px;
  height: 13px;
  color: #3fa793;
}
.brand-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 12px;
  border: 1px solid #e5ebf9;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 17px;
}
.brand-preview-mark {
  display: grid;
  place-items: center;
  background: #2b70f2;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.brand-preview-mark .icon {
  width: 20px;
  height: 20px;
}
.brand-preview strong {
  display: block;
  font: 600 12px var(--font-en);
  color: #375687;
  letter-spacing: 1px;
}
.brand-preview div > span {
  display: block;
  color: #8a9ab3;
  font-size: 8px;
  margin-top: 5px;
}
.brand-preview > .live-pill {
  margin-left: auto;
}
.brand-settings {
  background: #fff;
  border: 1px solid #e6edf8;
  border-radius: 8px;
  padding: 0 14px;
}
.brand-settings > div {
  display: flex;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid #eff3fa;
  padding: 13px 0;
  font-size: 9px;
}
.brand-settings > div:last-child {
  border-bottom: 0;
}
.brand-settings > div > span {
  color: #8295b1;
  white-space: nowrap;
}
.brand-settings strong {
  font-size: 9px;
  font-weight: 500;
  color: #577199;
}
.brand-settings .icon {
  width: 12px;
  height: 12px;
  margin-left: auto;
  color: #5b98ed;
}
.color-swatches {
  display: flex;
  gap: 6px;
}
.color-swatches i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3c77f2;
}
.color-swatches i:nth-child(2) {
  background: #685fe0;
}
.color-swatches i:nth-child(3) {
  background: #46b2a3;
}
.color-swatches i:nth-child(4) {
  background: #203b66;
}
.brand-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  color: #7e95b4;
  font-size: 9px;
}
.brand-bottom .icon {
  width: 12px;
  height: 12px;
}
@media (max-width: 600px) {
  .dashboard-top {
    gap: 12px;
    padding: 0 10px;
    font-size: 10px;
    height: 37px;
  }
  .demo-label {
    font-size: 8px;
  }
  .dashboard-sidebar {
    width: 35px;
    padding: 16px 7px;
    gap: 25px;
  }
  .dashboard-sidebar img {
    width: 23px;
    height: 23px;
  }
  .dashboard-sidebar .icon {
    width: 15px;
    height: 15px;
  }
  .dashboard-main {
    padding: 12px;
  }
  .dashboard-body {
    min-height: 302px;
  }
  .dash-overview {
    gap: 8px;
    margin-bottom: 13px;
  }
  .dash-overview strong {
    font-size: 10px;
  }
  .dash-overview small {
    font-size: 8px;
  }
  .dash-conversation {
    padding: 10px;
  }
  .conversation-head {
    font-size: 9px;
    gap: 5px;
    margin-bottom: 13px;
  }
  .chat-row {
    gap: 5px;
    margin-bottom: 10px;
  }
  .chat-row p {
    font-size: 8px;
    padding: 8px;
  }
  .chat-avatar {
    width: 21px;
    height: 21px;
    font-size: 8px;
  }
  .conversation-footer {
    flex-direction: column;
    padding-top: 2px;
    gap: 0;
  }
  .conversation-footer .waveform {
    height: 27px;
  }
  .brand-preview {
    padding: 11px 8px;
    gap: 7px;
  }
  .brand-preview strong {
    font-size: 10px;
  }
  .brand-preview-mark {
    width: 30px;
    height: 30px;
  }
  .brand-preview > .live-pill {
    font-size: 7px;
    padding: 2px 4px;
  }
  .brand-settings {
    padding: 0 10px;
  }
  .brand-settings > div {
    gap: 9px;
    font-size: 8px;
  }
  .brand-settings strong {
    font-size: 8px;
  }
  .chart-columns {
    gap: 6px;
    height: 132px;
  }
  .task-steps {
    gap: 5px;
    font-size: 8px;
  }
  .task-steps .icon {
    width: 10px;
    height: 10px;
  }
}