/* Insights section — Figma 12935:3789 (860 x 864) */

.sec-insights {
  display: flex;
  justify-content: center;
  padding-top: 132px;
}

.sec-insights__inner {
  width: 860px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ---------- Heading + toggle ---------- */

.sec-insights__head {
  width: 569px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.sec-insights__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -2px;
  text-align: center;
  color: var(--color-ink);
}

.sec-insights__toggle {
  width: 398px;
  max-width: 100%;
  height: 59px;
  padding: 6px;
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    34px 183px 52px 0 rgba(0, 0, 0, 0),
    22px 117px 48px 0 rgba(0, 0, 0, 0.01),
    12px 66px 40px 0 rgba(0, 0, 0, 0.05),
    6px 29px 30px 0 rgba(0, 0, 0, 0.09),
    1px 7px 16px 0 rgba(0, 0, 0, 0.1);
}

.sec-insights__toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sec-insights__tab {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-insights__tab--active {
  padding: 10px 16px;
  background: var(--color-surface);
  border-radius: 6px;
}

.sec-insights__tab--muted {
  opacity: 0.8;
}

.sec-insights__tab-icon {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.sec-insights__tab-icon--sm {
  width: 18px;
  height: 18px;
}

/* The exported glyphs are tight crops, so inset them the way the design does
   instead of stretching them to fill the icon box. */
.sec-insights__tab-icon img {
  position: absolute;
  left: 3.13%;
  top: 0.31%;
  width: 93.74%;
  height: 95%;
}

.sec-insights__tab-icon--sm img {
  left: 9.37%;
  top: 9.37%;
  width: 81.25%;
  height: 81.25%;
}

.sec-insights__tab-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-ink);
}

/* Label measures from the design — the tabs sit left in the pill at a fixed
   width rather than hugging their copy. min-width so a wider fallback font
   can still push them out instead of clipping. */
.sec-insights__tab--active .sec-insights__tab-label {
  min-width: 159px;
}

.sec-insights__tab--muted .sec-insights__tab-label {
  min-width: 121px;
  color: var(--color-muted);
}

/* ---------- Visual ---------- */

.sec-insights__visual {
  position: relative;
  width: 860px;
  max-width: 100%;
  height: 607px;
}

.sec-insights__blob {
  width: 860px;
  height: 607px;
  max-width: none;
}

.sec-insights__panel {
  position: absolute;
  left: 75px;
  top: 120px;
  width: 710.029px;
  height: 369.3px;
  padding: 21.16px;
  display: flex;
  gap: 20.11px;
  background: var(--color-white);
  border-radius: 16.931px;
  overflow: hidden;
}

.sec-insights__card {
  position: relative;
  flex: none;
  width: 323.799px;
  height: 327.502px;
  background: var(--color-white);
  border: 1.058px solid rgba(59, 59, 59, 0.06);
  border-radius: 16.931px;
  overflow: hidden;
}

/* ---------- Chat card ---------- */

.sec-insights__card--chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20.11px 21.16px;
}

.sec-insights__prompt {
  display: flex;
  align-items: center;
  gap: 6.349px;
}

.sec-insights__prompt-icon {
  display: block;
  flex: none;
  width: 25.396px;
  height: 25.396px;
  overflow: hidden;
}

.sec-insights__prompt-icon img {
  width: 100%;
  height: 100%;
}

.sec-insights__prompt-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-accent);
}

.sec-insights__bubble {
  padding: 8.465px 14.814px;
  background: var(--color-surface);
  border-radius: 8.465px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.814px;
  line-height: 1.7;
  color: var(--color-ink);
}

.sec-insights__bubble--bot {
  margin: 18.3px 0 0 3.18px;
  white-space: nowrap;
}

.sec-insights__reply {
  margin: 21.38px 0 0 45.5px;
  display: flex;
  align-items: flex-start;
  gap: 12.698px;
}

.sec-insights__bubble--user {
  flex: none;
  width: 177.771px; /* 148.143 text + 2 x 14.814 padding */
}

.sec-insights__avatar {
  position: relative;
  display: block;
  flex: none;
  width: 40.21px;
  height: 40.21px;
  border-radius: 50%;
  overflow: hidden;
}

.sec-insights__avatar img {
  position: absolute;
  left: -26.8%;
  top: -2.74%;
  width: 135.8%;
  height: 203.3%;
  max-width: none;
}

.sec-insights__input {
  margin: 54.4px 0 0 3.18px;
  width: 273.007px;
  height: 50.792px;
  padding: 11.64px 15.88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-surface);
  border: 1.058px solid rgba(59, 59, 59, 0.12);
  border-radius: 8.465px;
  overflow: hidden;
}

.sec-insights__input-placeholder {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.814px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-muted);
  opacity: 0.72;
}

.sec-insights__input-icon {
  display: block;
  flex: none;
  width: 19.047px;
  height: 19.047px;
  overflow: hidden;
  opacity: 0.72;
}

.sec-insights__input-icon img {
  width: 100%;
  height: 100%;
}

/* ---------- Chart card ---------- */

.sec-insights__card-title {
  position: absolute;
  left: 24.34px;
  top: 16.93px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--color-ink);
}

.sec-insights__chart-area {
  position: absolute;
  left: -52.73px;
  top: 103.7px;
  width: 429.8px;
  height: 185.179px;
  max-width: none;
}

.sec-insights__chart-line {
  position: absolute;
  left: calc(50% + 11.9px);
  top: 196.82px;
  transform: translateX(-50%);
  width: 347.607px;
  height: 37.413px;
  max-width: none;
}

.sec-insights__chart-marker {
  position: absolute;
  left: 41.796px;
  top: 185.969px;
  width: 191.528px;
  height: 1.59px;
  max-width: none;
  transform: rotate(90deg);
}

.sec-insights__chart-dot {
  position: absolute;
  left: 132.27px;
  top: 96.29px;
  width: 12.698px;
  height: 12.698px;
  border-radius: 50%;
  background: var(--color-white);
  overflow: hidden;
}

.sec-insights__chart-dot i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.349px;
  height: 6.349px;
  border-radius: 50%;
  background: var(--color-accent);
}

.sec-insights__chart-pill-slot {
  position: absolute;
  left: 143.73px;
  top: 68.17px;
  width: 116.883px;
  height: 44.306px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-insights__chart-pill {
  transform: rotate(6.97deg);
  padding: 6.349px 10px;
  border-radius: 105.817px;
  background: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-white);
}

.sec-insights__chart-months {
  position: absolute;
  left: 50%;
  top: 287.82px;
  transform: translateX(-50%);
  width: 273.007px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.698px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(59, 59, 59, 0.72);
}

.sec-insights__chart-months .is-current {
  color: var(--color-ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .sec-insights__inner,
  .sec-insights__visual {
    width: 100%;
  }

  .sec-insights__title {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .sec-insights__visual {
    height: auto;
    overflow: hidden;
  }

  .sec-insights__blob {
    display: none;
  }

  .sec-insights__panel {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
  }

  .sec-insights__toggle {
    height: auto;
  }

  .sec-insights__toggle-row {
    gap: 8px;
  }

  /* Let the tabs hug their copy so the pill fits a 390px viewport. */
  .sec-insights__tab--active .sec-insights__tab-label,
  .sec-insights__tab--muted .sec-insights__tab-label {
    min-width: 0;
  }
}