.thfw-widget {
  position: fixed;
  bottom: var(--thfw-bottom);
  z-index: 99990;
  display: flex;
  width: min(var(--thfw-width), calc(100% - 28px));
  box-sizing: border-box;
  padding: var(--thfw-padding);
  border: var(--thfw-border-width) solid var(--thfw-border);
  border-radius: var(--thfw-radius);
  background: var(--thfw-background);
  color: var(--thfw-text);
  box-shadow: var(--thfw-shadow);
}

.thfw-position-right {
  right: var(--thfw-side);
  left: auto;
}

.thfw-position-left {
  left: var(--thfw-side);
  right: auto;
}

.thfw-image-top {
  flex-direction: column;
}

.thfw-image-left {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.thfw-image-wrap {
  flex: 0 0 auto;
  width: var(--thfw-image-width);
  max-width: 100%;
}

.thfw-image-top .thfw-image-wrap {
  margin-bottom: 14px;
}

.thfw-image-left .thfw-image-wrap {
  max-width: 42%;
}

.thfw-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--thfw-image-radius);
}

.thfw-content {
  min-width: 0;
}

.thfw-headline {
  margin: 0 0 7px;
  color: var(--thfw-headline);
  font-family: var(--thfw-headline-family, inherit);
  font-size: var(--thfw-headline-size, 20px);
  font-weight: var(--thfw-headline-weight, 700);
  line-height: var(--thfw-headline-line-height, 1.15);
  letter-spacing: var(--thfw-headline-letter-spacing, normal);
}

.thfw-body {
  font-family: var(--thfw-body-family, inherit);
  font-size: var(--thfw-body-size, 14px);
  font-weight: var(--thfw-body-weight, 400);
  line-height: var(--thfw-body-line-height, 1.45);
  letter-spacing: var(--thfw-body-letter-spacing, normal);
}

.thfw-body p {
  margin: 0 0 9px;
}

.thfw-body p:last-child {
  margin-bottom: 0;
}

.thfw-cta {
  display: inline-block;
  margin-top: 13px;
  color: var(--thfw-cta-color, inherit);
  font-family: var(--thfw-cta-family, inherit);
  font-size: var(--thfw-cta-size, 13px);
  font-weight: var(--thfw-cta-weight, 700);
  line-height: var(--thfw-cta-line-height, 1.2);
  letter-spacing: var(--thfw-cta-letter-spacing, normal);
  text-decoration: var(--thfw-cta-decoration, underline);
}

.thfw-close {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #222;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.thfw-widget.is-dismissed {
  display: none;
}

@media screen and (max-width: 640px) {
  .thfw-widget {
    bottom: var(--thfw-mobile-bottom);
    width: min(var(--thfw-mobile-width), calc(100% - 28px));
  }

  .thfw-position-right {
    right: var(--thfw-mobile-side);
  }

  .thfw-position-left {
    left: var(--thfw-mobile-side);
  }

  .thfw-image-left {
    align-items: flex-start;
  }
}


/* ==========================================================
   v0.1.2 — Purpose-Built Mobile Presentation
========================================================== */

@media screen and (max-width: 640px) {
  .thfw-widget {
    bottom: calc(
      var(--thfw-mobile-bottom) +
      env(safe-area-inset-bottom, 0px)
    );
    width: min(
      var(--thfw-mobile-width),
      calc(100% - (var(--thfw-mobile-side) * 2))
    );
    max-width: var(--thfw-mobile-max-width);
    padding: var(--thfw-mobile-padding);
    border-radius: var(--thfw-mobile-radius);
  }

  .thfw-position-right,
  .thfw-position-left {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .thfw-mobile-hide {
    display: none !important;
  }

  .thfw-mobile-image-hide .thfw-image-wrap,
  .thfw-mobile-headline-hide .thfw-headline,
  .thfw-mobile-body-hide .thfw-body,
  .thfw-mobile-cta-hide .thfw-cta {
    display: none !important;
  }

  /*
   * Compact Bar:
   * small floating utility rather than a scaled desktop card.
   */
  .thfw-mobile-compact {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
  }

  .thfw-mobile-compact .thfw-image-wrap {
    flex: 0 0 var(--thfw-mobile-image-width);
    width: var(--thfw-mobile-image-width);
    max-width: var(--thfw-mobile-image-width);
    margin: 0;
  }

  .thfw-mobile-compact .thfw-image {
    width: 100%;
    height: auto;
  }

  .thfw-mobile-compact .thfw-content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .thfw-mobile-compact .thfw-headline {
    flex: 1 1 auto;
    margin: 0;
  }

  .thfw-mobile-compact .thfw-body {
    flex: 1 1 auto;
  }

  .thfw-mobile-compact .thfw-body p {
    margin: 0;
  }

  .thfw-mobile-compact .thfw-cta {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }

  .thfw-mobile-compact .thfw-close {
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
  }

  .thfw-mobile-compact:has(.thfw-close) {
    padding-right: 42px;
  }

  /*
   * Full Card retains the existing stacked presentation,
   * but uses the mobile dimensions and safe-area offsets.
   */
  .thfw-mobile-card.thfw-image-top {
    flex-direction: column;
  }

  .thfw-mobile-card.thfw-image-left {
    flex-direction: row;
  }
}

@media screen and (max-width: 420px) {
  .thfw-mobile-compact .thfw-content {
    gap: 9px;
  }

  .thfw-mobile-compact .thfw-headline {
    font-size: min(var(--thfw-headline-size, 20px), 16px);
  }

  .thfw-mobile-compact .thfw-cta {
    font-size: min(var(--thfw-cta-size, 13px), 13px);
  }
}


/* ==========================================================
   v0.1.3 — Adaptive Compact Mobile Content
========================================================== */

@media screen and (max-width: 640px) {

  /*
   * Mobile visibility classes are authoritative.
   * If a mobile "show" option is enabled, explicitly restore
   * that content even if desktop/compact rules would otherwise
   * collapse it.
   */
  .thfw-mobile-image-show .thfw-image-wrap {
    display: block !important;
  }

  .thfw-mobile-headline-show .thfw-headline {
    display: block !important;
  }

  .thfw-mobile-body-show .thfw-body {
    display: block !important;
  }

  .thfw-mobile-cta-show .thfw-cta {
    display: inline-block !important;
  }

  /*
   * Compact mode adapts to whatever content is actually enabled.
   * No layout space is reserved for hidden image/headline/body.
   */
  .thfw-mobile-compact {
    min-height: 0;
  }

  .thfw-mobile-compact .thfw-content {
    min-width: 0;
  }

  /*
   * When there is no image, let the content occupy the full bar.
   */
  .thfw-mobile-compact.thfw-mobile-image-hide .thfw-content {
    width: 100%;
    flex: 1 1 100%;
  }

  /*
   * When the headline is hidden but body + CTA are present,
   * body copy becomes the flexible primary content and the CTA
   * remains compact on the right.
   */
  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-show
    .thfw-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-show
    .thfw-body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-show
    .thfw-body p {
    margin: 0;
  }

  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-show
    .thfw-cta {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }

  /*
   * If only Body Text is enabled, allow it to use the full width.
   */
  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-show.thfw-mobile-cta-hide
    .thfw-body {
    flex: 1 1 100%;
  }

  /*
   * If only CTA is enabled, keep it cleanly aligned without
   * an empty flexible content region.
   */
  .thfw-mobile-compact.thfw-mobile-headline-hide.thfw-mobile-body-hide.thfw-mobile-cta-show
    .thfw-content {
    display: flex;
    justify-content: flex-start;
  }

  /*
   * Slightly relax line wrapping for body-only mobile messaging.
   */
  .thfw-mobile-compact .thfw-body {
    overflow-wrap: anywhere;
  }
}