@import '~@capillarytech/cap-ui-library/styles/_variables';
@import './_viberCarouselPreviewCards.scss';

/**
 * UnifiedPreview Styles
 * 
 * Consistent styling for preview across all channels
 */

 .unified-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: $CAP_WHITE;
    overflow: hidden;
  
    // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
    .preview-chrome {
      background: $CAP_WHITE;
      overflow: hidden;
  
      .preview-divider {
        margin: 0;
      }
  
      .preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
        background: $CAP_G09;
  
        .preview-for {
          font-size: $FONT_SIZE_M;
          color: #595959;
          gap: $CAP_SPACE_04;
          b {
            color: #262626;
            margin-left: $CAP_SPACE_04;
          }
        }
  
        .device-toggle {
          display: flex;
          gap: $CAP_SPACE_08;
          background-color: #e0e0e0;
          padding: $CAP_SPACE_06 $CAP_SPACE_08;
          border-radius: $CAP_SPACE_08;
  
          .anticon {
            padding: $CAP_SPACE_04;
            border-radius: $CAP_SPACE_04;
            cursor: pointer;
            color: #595959;
  
            &.active {
              background-color: $CAP_WHITE;
              color: #262626;
              box-shadow: 0 $CAP_SPACE_01 $CAP_SPACE_03 rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  
    // Preview Content Container
    .preview-content-container {
      flex: 1;
      background: #F5F7FA;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .preview-content-container-no-header {
      background-color: $CAP_WHITE;
    }
  
    // Device Frames
    .unified-preview-frame {
      width: 100%;
      display: flex;
      justify-content: center;
  
      .device-frame {
        background: $CAP_WHITE;
        border-radius: $CAP_SPACE_08;
        box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
        overflow: hidden;
        transition: all 0.3s ease;
  
        // Desktop Frame
        &.device-frame-desktop {
          width: 100%;
          min-height: 42.857rem;
  
          .desktop-chrome {
            height: $CAP_SPACE_40;
            background: $CAP_G12;
            border-bottom: $CAP_SPACE_01 solid #d0d0d0;
            display: flex;
            align-items: center;
            padding: 0 $CAP_SPACE_12;
            gap: $CAP_SPACE_12;
  
            .chrome-dots {
              display: flex;
              gap: $CAP_SPACE_06;
  
              .dot {
                width: $CAP_SPACE_12;
                height: $CAP_SPACE_12;
                border-radius: 50%;
  
                &.dot-close {
                  background: #ff5f56;
                }
  
                &.dot-minimize {
                  background: #ffbd2e;
                }
  
                &.dot-maximize {
                  background: #27c93f;
                }
              }
            }
  
            .chrome-address-bar {
              flex: 1;
              background: $CAP_WHITE;
              border-radius: $CAP_SPACE_04;
              padding: $CAP_SPACE_04 $CAP_SPACE_12;
              font-size: $FONT_SIZE_S;
              color: #8c8c8c;
            }
          }
  
          .device-content {
            min-height: 40rem;
            background: $CAP_WHITE;
          }
        }
  
        // Tablet Frame
        &.device-frame-tablet {
          width: 54.857rem;
          max-width: 90%;
  
          .tablet-chrome {
            height: $CAP_SPACE_24;
            background: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .tablet-camera {
              width: $CAP_SPACE_08;
              height: $CAP_SPACE_08;
              border-radius: 50%;
              background: #1a1a1a;
              border: $CAP_SPACE_01 solid #666666;
            }
          }
  
          .device-content {
            min-height: 73.143rem;
            background: $CAP_WHITE;
          }
  
          .tablet-footer {
            height: 3.571rem;
            background: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .home-button {
              width: $CAP_SPACE_40;
              height: $CAP_SPACE_40;
              border-radius: 50%;
              background: #1a1a1a;
              border: $CAP_SPACE_02 solid #666666;
            }
          }
        }
  
        // Mobile Frame
        &.device-frame-mobile {
          width: 26.786rem;
          max-width: 90%;
  
          .mobile-chrome {
            height: $CAP_SPACE_24;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .mobile-notch {
              width: 10.714rem;
              height: 1.571rem;
              background: #000000;
              border-radius: 0 0 $CAP_SPACE_12 $CAP_SPACE_12;
            }
          }
  
          .device-content {
            min-height: 47.643rem;
            background: $CAP_WHITE;
          }
  
          .mobile-footer {
            height: $CAP_SPACE_24;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .home-indicator {
              width: $CAP_SPACE_80;
              height: $CAP_SPACE_04;
              background: $CAP_WHITE;
              border-radius: $CAP_SPACE_02;
              opacity: 0.5;
            }
          }
        }
      }
    }
  
    // Channel Preview Placeholders (Phase 5)
    .channel-preview-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: $CAP_SPACE_60 $CAP_SPACE_24;
      text-align: center;
      min-height: 28.571rem;
    
      .question-circle {
        font-size: $CAP_SPACE_48;
        color: $CAP_COLOR_16;
      }
      h3 {
        margin-top: $CAP_SPACE_24;
        font-size: $CAP_SPACE_20;
        font-weight: 600;
        color: #262626;
      }
  
      p {
        margin-top: $CAP_SPACE_08;
        font-size: $FONT_SIZE_M;
        color: #8c8c8c;
      }
  
      .preview-subject {
        margin-top: $CAP_SPACE_24;
        padding: $CAP_SPACE_12 $CAP_SPACE_16;
        background: #f0f0f0;
        border-radius: $CAP_SPACE_04;
        text-align: left;
        width: 100%;
        max-width: 35.714rem;
  
        strong {
          color: #595959;
          margin-right: $CAP_SPACE_08;
        }
      }
  
      .preview-body-placeholder {
        margin-top: $CAP_SPACE_12;
        padding: $CAP_SPACE_08 $CAP_SPACE_12;
        background: #fafafa;
        border: $CAP_SPACE_01 dashed $CAP_COLOR_16;
        border-radius: $CAP_SPACE_04;
  
        small {
          color: #8c8c8c;
        }
      }
    }
  
    // Loading State
    &.unified-preview-loading {
      .preview-loading-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $CAP_SPACE_16;
        min-height: 28.571rem;
  
        .loading-text {
          font-size: $FONT_SIZE_M;
          color: #8c8c8c;
        }
      }
    }
  
    // Error State
    &.unified-preview-error {
      .preview-error-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $CAP_SPACE_16;
        min-height: 28.571rem;
        
        .exclamation-circle {
          font-size: $CAP_SPACE_48;
          color: #ff4d4f;
        }
        .error-text {
          font-size: $FONT_SIZE_L;
          font-weight: 600;
          color: #262626;
        }
  
        .error-message {
          font-size: $FONT_SIZE_M;
          color: #ff4d4f;
          max-width: 35.714rem;
          text-align: center;
        }
      }
    }
  
    // Preview Metadata
    .preview-metadata {
      padding: $CAP_SPACE_12 $CAP_SPACE_24;
      background: #fafafa;
      border-top: $CAP_SPACE_01 solid $CAP_COLOR_16;
      font-size: $FONT_SIZE_S;
      color: #8c8c8c;
      display: flex;
      gap: $CAP_SPACE_16;
  
      .metadata-item {
        display: flex;
        gap: $CAP_SPACE_04;
      }
    }
  }

  // Email Preview Content Styles (Phase 6)
  .preview-body {
    background: $CAP_WHITE;
    border-radius: $CAP_SPACE_08;
    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.1);
    overflow: hidden;

    &.mobile {
      width: 26.786rem;
      margin: 0 auto;

      .browser-bar {
        background: $CAP_G08;
      }
    }

    &.tablet {
      width: 54.857rem;
      margin: 0 auto;
    }

    &.desktop {
      width: 100%;
    }

    // Browser Bar
    .browser-bar {
      display: flex;
      align-items: center;
      padding: $CAP_SPACE_08 $CAP_SPACE_12;
      gap: $CAP_SPACE_08;
      border-bottom: $CAP_SPACE_01 solid $CAP_G12;

      .browser-controls {
        display: flex;
        gap: $CAP_SPACE_08;
        color: $CAP_G06;

        .refresh-icon {
          margin-top: $CAP_SPACE_04;

          svg path {
            fill: $CAP_G06;
          }
        }
      }

      .address-bar {
        flex-grow: 1;
        background: $CAP_WHITE;
        border-radius: $CAP_SPACE_16;
        padding: $CAP_SPACE_04 $CAP_SPACE_12;
        font-size: $FONT_SIZE_S;
        color: #595959;
        text-align: center;
        border: $CAP_SPACE_01 solid $CAP_G07;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .address-bar-label {
          flex: 1;
          text-align: left;
        }

        .browser-address-bar-icon {
          flex: 0 0 auto;
        }
      }
    }

    // Preview Divider
    .preview-divider {
      margin: 0;
    }

    // Email Header
    .email-header {
      display: flex;
      align-items: center;
      padding: $CAP_SPACE_16;
      gap: $CAP_SPACE_16;

      .back-arrow {
        font-size: $FONT_SIZE_L;
        color: #595959;
        cursor: pointer;
      }

      .email-subject {
        flex: 1;
        font-weight: 500;
        color: #262626;
      }

      .email-meta {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: $CAP_SPACE_08;
        font-size: $FONT_SIZE_S;
        color: #8c8c8c;

        .dots {
          width: $CAP_SPACE_06;
          height: $CAP_SPACE_06;
          border-radius: 50%;
          background: $CAP_COLOR_16;
        }
      }
    }

    // Email From
    .email-from {
      display: flex;
      align-items: center;
      padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
      gap: $CAP_SPACE_12;
      border-bottom: $CAP_SPACE_01 solid $CAP_G12;

      .sender-avatar {
              width: $CAP_SPACE_40;
              height: $CAP_SPACE_40;
        border-radius: 50%;
        background: #e8e8e8;
        flex-shrink: 0;
      }

      .sender-info {
        flex: 1;

        .sender-name {
          font-weight: 500;
          color: #262626;
          margin-bottom: $CAP_SPACE_04;
        }

        .recipient-info {
          font-size: $FONT_SIZE_S;
          color: #8c8c8c;
        }
      }
    }

    // Email Content
    .email-content {
      border-top: $CAP_SPACE_01 solid $CAP_G12;
      padding: 0 1.142rem;
      position: relative;
      overflow: hidden;

      iframe {
        border: none;
        width: 100%;
        display: block;
      }

      .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: $CAP_SPACE_16;

        .loading-text {
          color: #8c8c8c;
          font-size: $FONT_SIZE_M;
        }
      }

      .error-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: $CAP_SPACE_16;
        padding: $CAP_SPACE_24;

        .error-text {
          font-size: $FONT_SIZE_L;
          font-weight: 600;
          color: #262626;
        }
  
        .error-message {
          font-size: $FONT_SIZE_M;
          color: #ff4d4f;
          text-align: center;
        }
      }

      .no-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #8c8c8c;
        font-size: $FONT_SIZE_M;
      }
    }
  }

  // SMS Preview Content Styles (Phase 7)
  .sms-device-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;

    .sms-device-image {
      width: 100%;
      max-width: 26.786rem;
      height: auto;
      display: block;
    }

    .sms-content-overlay {
      position: absolute;
      top: 4.143rem;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 26.786rem;
      height: calc(100% - 4.5rem);
      display: flex;
      flex-direction: column;

      &.sms-content-overlay-android {
        height: calc(100% - 3.8rem);
      }

      &.sms-content-overlay-ios {
        height: calc(100% - 5rem);
      }

      &.inapp-content-overlay-height {
        height: calc(100% - 4.8rem);
      }

      // Android-specific overrides for SMS preview
      &.sms-preview.sms-android {
        top: 3.1rem;

        .sms-navigation-bar-no-header {
          margin-left: 0.396rem;
          margin-right: 0.49rem;
        }

        .sms-message-container,
        .sms-date-separator {
          margin: 0 $CAP_SPACE_08;
        }
      }

      &.sms-preview.sms-ios {
        .sms-message-container,
        .sms-date-separator {
          margin: 0 1rem;
        }
      }

      // Navigation Bar
      .sms-navigation-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $CAP_SPACE_12 $CAP_SPACE_16;
        height: $CAP_SPACE_48;
        background: $CAP_G09;
        margin-left: 0.929rem;
        margin-right: 0.929rem;

        .sms-back-arrow {
          font-size: $FONT_SIZE_L;
          color: #595959;
          cursor: pointer;
          flex: 0 0 auto;
          svg {
            width: $CAP_SPACE_24;
            height: $CAP_SPACE_24;
          }
        }

        .sms-sender-id {
          flex: 1;
          color: $CAP_G02;
        }

        .sms-menu-icon {
          font-size: $FONT_SIZE_L;
          color: #595959;
          cursor: pointer;
          flex: 0 0 auto;
          rotate: 90deg;
        }

        .viber-menu-icon {
          rotate: 0deg;
        }
      }

      // Date Separator
      .sms-date-separator {
        padding: $CAP_SPACE_08 $CAP_SPACE_16;
        font-size: $FONT_SIZE_S;
        color: $CAP_G05;
        text-align: center;
        background-color: $CAP_WHITE;
      }

      // Message Container
        .sms-message-container {
          flex: 1;
          padding: 0 $CAP_SPACE_16;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-top: auto;
          padding-bottom: $CAP_SPACE_16;
          background-color: $CAP_WHITE;
          border-bottom-left-radius: 2.429rem;
          border-bottom-right-radius: 2.429rem;

        .sms-message-bubble {
          background: $CAP_G08;
          border-radius: $CAP_SPACE_12;
          padding: $CAP_SPACE_12 $CAP_SPACE_16;
          max-width: 80%;
          margin-bottom: $CAP_SPACE_04;

          .sms-message-text {
            color: $CAP_G01;
            font-size: $FONT_SIZE_M;
            line-height: 1.4;
            word-wrap: break-word;

            .message-pop {
              .rcs-image {
                width: 100%;
              }
            }
          }
        }

        .sms-timestamp {
          font-size: $FONT_SIZE_S;
          color: #8c8c8c;
          margin-left: auto;
          padding-right: $CAP_SPACE_04;
        }
      }

      // Loading State
      .sms-loading-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $CAP_SPACE_16;
        padding: $CAP_SPACE_24;

        .sms-loading-text {
          color: #8c8c8c;
          font-size: $FONT_SIZE_M;
        }
      }

      // Error State
      .sms-error-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $CAP_SPACE_16;
        padding: $CAP_SPACE_24;

        .exclamation-circle {
          font-size: $CAP_SPACE_48;
          color: #ff4d4f;
        }
        .sms-error-text {
          font-size: $FONT_SIZE_L;
          font-weight: 600;
          color: #262626;
        }
  
        .sms-error-message {
          font-size: $FONT_SIZE_M;
          color: #ff4d4f;
          text-align: center;
        }
      }
    }

    .viber-content-overlay {
      top: 3.2rem;
      .viber-navigation-bar {
        margin-left: $CAP_SPACE_06;
        margin-right: $CAP_SPACE_08;
      }
    }

    .inapp-content-overlay {
      width: 24.929rem;
    }
  }

  // WhatsApp Preview Content Styles (Phase 8)
  // All WhatsApp styles wrapped in parent class for increased specificity
  // This prevents other CSS (like CapLabel) from overriding WhatsApp-specific styles
  .whatsapp-preview-wrapper {
    // Using same CSS classes as TemplatePreview for consistency
    // Styles are copied from TemplatePreview/_templatePreview.scss to ensure they work
    
    .shell-v2-whatsapp {
      position: relative;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
      left: 50%;
      padding: 0 0.714rem;
      width: 32.143rem;

      .preview-image {
        width: 70%;
      }

      &.align-center {
        text-align: center;
      }
    }

    .msg-container {
      position: absolute;
      top: 20%;
      left: 23%;
      width: 62%;
      height: 24rem;
      display: flex;

      &.whatsapp-message-container {
        max-height: 20.857rem;
        margin-top: $CAP_SPACE_16;
      }

      &.msg-container-carousel {
        display: flex;
        flex-direction: column;

        .scroll-container {
          overflow-x: auto;
          display: flex;
          padding-top: $CAP_SPACE_06;
          padding-right: $CAP_SPACE_06;
          white-space: nowrap;
          scrollbar-width: none; // Hide scrollbar in Firefox
          &::-webkit-scrollbar {
            display: none; // Hide scrollbar in Chrome/Safari/Opera
          }
        }
      }

      .message-pop {
        background: #3F51B5;
        position: absolute;
        overflow: auto;
        top: 0;
        left: 17%;
        white-space: pre-wrap;
        word-break: break-word;
        border-radius: $CAP_SPACE_04;
        max-height: 100%;
        color: $CAP_WHITE;
        width: 70%;
        min-height: 1.857rem;
        line-height: 1rem;
        padding: $CAP_SPACE_08;
        font-size: $FONT_SIZE_VS;

        &.align-left {
          text-align: left;
        }

        &.message-pop-carousel {
          position: relative;
          margin-right: $CAP_SPACE_04;
        }

        // WhatsApp message pop styles (matching TemplatePreview)
        &.whatsapp-message-pop {
          padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
          border-radius: $CAP_SPACE_06;
          background-color: $CAP_WHITE;
          width: 88%;
          left: 0;
        }

        // WhatsApp carousel message pop styles
        &.whatsapp-message-pop-carousel {
          padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
          border-radius: $CAP_SPACE_06;
          background-color: $CAP_WHITE;
          width: 10.4rem;
          cursor: pointer;
          flex-shrink: 0;
          left: 0;
        }
      }
    }

    .whatsapp-brand-name {
      position: absolute;
      font-size: small;
      max-width: 7.143rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .whatsapp-brand-name-android {
      color: $CAP_WHITE;
      background-color: #006D60;
      top: 8.5%;
      left: 35%;
    }
    .whatsapp-brand-name-ios {
      background-color: $CAP_WHITE;
      top: 8%;
      left: 37%;
    }

    .whatsapp-divider {
      margin: $CAP_SPACE_08 0;
    }

    .whatsapp-cta-preview {
      font-family: Roboto, 'Open Sans', sans-serif;
      font-size: $FONT_SIZE_VS;
      display: flex;
      align-content: center;
      justify-content: center;
          margin-bottom: $CAP_SPACE_04;
      align-items: center;

      svg {
        margin-right: $CAP_SPACE_04;
        margin-top: 0.2rem;
      }
    }

    .whatsapp-content {
      font-family: Roboto, 'Open Sans', sans-serif;
      margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;

      // Template Header and Footer preview styles
      // Copied from app/v2Containers/Whatsapp/index.scss (lines 201-213)
      // Colors adjusted to white for preview context (inside .message-pop with blue background)
      .whatsapp-template-header-preview {
        // From WhatsApp/index.scss: color: $CAP_G01, but use white for preview
        color: $CAP_G01;
        // From WhatsApp/index.scss: font-weight: $FONT_WEIGHT_MEDIUM
        font-weight: $FONT_WEIGHT_MEDIUM;
        // From WhatsApp/index.scss: font-size: $FONT_SIZE_VS
        font-size: $FONT_SIZE_VS;
        // From WhatsApp/index.scss: margin-bottom: $CAP_SPACE_08
        margin-bottom: $CAP_SPACE_08;
        // Additional styles for preview context
        line-height: 1rem;
        font-family: Roboto, 'Open Sans', sans-serif;
      }
  
      .whatsapp-template-footer-preview {
        // From WhatsApp/index.scss: color: $CAP_G04, but use white for preview
        color: $CAP_G01;
        // From WhatsApp/index.scss: font-weight: $FONT_WEIGHT_REGULAR
        font-weight: $FONT_WEIGHT_REGULAR;
        // From WhatsApp/index.scss: font-size: 0.5rem
        font-size: 0.5rem;
        // From WhatsApp/index.scss: margin-top: $CAP_SPACE_08
        margin-top: $CAP_SPACE_08;
        // Additional styles for preview context
        line-height: 1rem;
        font-family: Roboto, 'Open Sans', sans-serif;
      }
    }

    .whatsapp-image-url-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: $CAP_SPACE_08;
      width: 100%;
      min-height: 5rem;
      max-height: 8.786rem;
      margin-bottom: $CAP_SPACE_04;
      background-color: $CAP_G09;
      border-radius: $CAP_SPACE_04;
      padding: $CAP_SPACE_08;

      .whatsapp-image-url-placeholder-icon {
        color: $CAP_G05;
        font-size: 1.5rem;
      }

      .whatsapp-image-url-placeholder-text {
        font-size: $FONT_SIZE_S;
        color: $CAP_G04;
        text-align: center;
        word-break: break-all;
      }
    }

    .whatsapp-image {
      width: 100%;
      max-height: 8.786rem;
          margin-bottom: $CAP_SPACE_04;

      .pdf-img-box {
        width: 10.929rem;
        height: $CAP_SPACE_60;

        img {
          width: 100%;
        }
      }

      .pdf-label {
        width: 10.929rem;
      }
    }

    // Loading and Error states for WhatsApp (within message-pop)
    .whatsapp-loading-container,
    .whatsapp-error-container {
      .exclamation-circle {
        font-size: $CAP_SPACE_48;
        color: #ff4d4f;
      }
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: $CAP_SPACE_16;
        padding: $CAP_SPACE_24;
      width: 100%;
      min-height: 14.286rem;
    }

    .whatsapp-loading-text {
      color: #8c8c8c;
      font-size: $FONT_SIZE_M;
    }
  
    .whatsapp-error-text {
      font-size: $FONT_SIZE_L;
      font-weight: 600;
      color: #262626;
    }
  
    .whatsapp-error-message {
      font-size: $FONT_SIZE_M;
      color: #ff4d4f;
      text-align: center;
    }
  
    .whatsapp-no-content {
      color: #8c8c8c;
      font-size: $FONT_SIZE_M;
      padding: $CAP_SPACE_16;
      text-align: center;
    }

    // Video preview styles (matching TemplatePreview)
    .video-preview {
      position: relative;
      width: 100%;
          margin-bottom: $CAP_SPACE_04;

      .whatsapp-image {
        width: 100%;
        max-height: 8.786rem;
        margin-bottom: 0;
      }

      .icon-position {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;

        .video-icon {
          width: $CAP_SPACE_48;
          height: $CAP_SPACE_48;
          filter: drop-shadow(0 $CAP_SPACE_02 $CAP_SPACE_04 rgba(0, 0, 0, 0.3));
          position: relative;
          right: 0;
          bottom: 0;
        }
      }
    }

    // URL preview styles
    .url-preview-image {
      width: 100%;
      max-height: 8.786rem;
          margin-bottom: $CAP_SPACE_04;
    }

    .url-preview-description {
      font-size: $FONT_SIZE_S;
      color: #8c8c8c;
      margin-top: $CAP_SPACE_04;
    }
  
    .url-preview {
      font-size: $FONT_SIZE_S;
      color: #1890ff;
      word-break: break-all;
    }
  }
  
  // InApp Preview Content Styles (Phase 10)
  // Styles copied from TemplatePreview/_templatePreview.scss to ensure consistency
  // These styles work within the SMS device container structure
  .sms-content-overlay {
    // shell-v2 styles for InApp (from TemplatePreview line 3-9)
    .inapp-android{
        margin-left: $CAP_SPACE_06;
        margin-right: $CAP_SPACE_08;
    }
    .inapp-ios{
        margin-left: 0.929rem;
        margin-right: 0.929rem;
    }
    .inapp-shell-v2 {
      position: relative;
      height: 100%;
      background-color: $CAP_G08;
      border-bottom-left-radius: 3.6rem;
      border-bottom-right-radius: 3.6rem;
      // preview-image wrapper (from TemplatePreview line 11-15)
        &.sms {
          width: 45%;
        }

        // InApp message container styles - copied from TemplatePreview
        // POPUP/MODAL layout for Android
        .inapp-message-container-POPUP {
          background-color: $CAP_WHITE;
          position: relative;
          height: 22.5rem;
          margin: 0 $CAP_SPACE_24;
          top: 8.643rem;
          border-radius: $CAP_SPACE_16;
          align-items: center;
          padding: 0 $CAP_SPACE_16;
          .inapp-title-POPUP {
            align-items: center;
            text-align: center;
            padding-top: $CAP_SPACE_16;
          }
          .inapp-content-POPUP {
            padding-top: $CAP_SPACE_12;
            word-wrap: break-word;
            text-align: center;
          }
          .inapp-image-POPUP {
            height: 10.714rem;
            object-fit: cover;
            margin-top: $CAP_SPACE_12;
            width: 100%;
          }
          .inapp-button-POPUP {
            width: 100%;
            margin-top: 1rem;
          }
        }

        .inapp-message-container-FULLSCREEN {
          position: relative;
          background-color: $CAP_WHITE;
          width: 100%;  
          height: 100%;
          align-items: center;
          padding: 0 $CAP_SPACE_16;
          border-bottom-left-radius: 2.6rem;   
          border-bottom-right-radius: 2.6rem;
          .inapp-title-FULLSCREEN {
            align-items: center;
            text-align: center;
            padding-top: $CAP_SPACE_16;
          }
          .inapp-content-FULLSCREEN {
            padding-top: $CAP_SPACE_12;
            word-wrap: break-word;
            text-align: center;
          }
          .inapp-image-FULLSCREEN {
            height: 15.714rem;
            object-fit: cover;
            margin-top: $CAP_SPACE_12;
            width: 100%;
          }
          .inapp-button-FULLSCREEN {
            width: 100%;
            margin-top: 1rem;
          }
        }

        .inapp-message-container-HEADER {
          background-color: $CAP_WHITE;
          position: relative;
          height: 9.286rem;
          border-radius: $CAP_SPACE_16;
          align-items: center;
          padding: $CAP_SPACE_04 $CAP_SPACE_16;
          .inapp-title-HEADER {
            position: relative;
            padding-left: 5.857rem;
          }
          .inapp-content-HEADER {
            position: relative;
            padding-top: $CAP_SPACE_06;
            word-wrap: break-word;
            height: 5.2rem;
            overflow: hidden;
            padding-left: 5.857rem;
          }
          .inapp-button-HEADER {
            position: relative;
            width: 100%;
          }
          .inapp-image-HEADER {
            position: absolute;
            top: $CAP_SPACE_06;
            width: 5.429rem;
            height: 5.429rem;
          }
          .without-image-content-HEADER,
          .without-image-title-HEADER,
          .without-image-button-HEADER {
            padding-left: 0;
          }
        }
        .inapp-message-container-FOOTER {
          background-color: $CAP_WHITE;
          position: relative;
          height: 9.286rem;
          border-radius: $CAP_SPACE_16;
          align-items: center;
          padding: $CAP_SPACE_04 $CAP_SPACE_16;
          top: 80%;
          .inapp-title-FOOTER {
            position: relative;
            padding-left: 5.857rem;
          }
          .inapp-content-FOOTER {
            position: relative;
            padding-top: $CAP_SPACE_06;
            word-wrap: break-word;
            height: 5.2rem;
            overflow: hidden;
            padding-left: 5.857rem;
          }
          .inapp-button-FOOTER {
            position: relative;
            width: 100%;
          }
          .inapp-image-FOOTER {
            position: absolute;
            top: $CAP_SPACE_06;
            width: 5.429rem;
            height: 5.429rem;
          }
          .without-image-content-FOOTER,
          .without-image-title-FOOTER,
          .without-image-button-FOOTER {
            padding-left: 0;
          }
        }
        .inapp-message-container-FOOTER-no-header{
          top: 78%;
        }
        .inapp-message-container-POPUP-ANDROID,
        .inapp-message-container-modal-ANDROID,
        .inapp-message-container-modal-android {
          background-color: $CAP_WHITE;
          position: relative;
          height: 22.5rem;
          margin: 0 $CAP_SPACE_24;
          top: 8.643rem;
          border-radius: $CAP_SPACE_16;

          .inapp-title-POPUP-ANDROID,
          .inapp-title-modal-ANDROID,
          .inapp-title-modal-android {
            margin: 10% $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
            width: 12.143rem;
            height: $CAP_SPACE_18;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .inapp-image-POPUP-ANDROID,
          .inapp-image-modal-ANDROID,
          .inapp-image-modal-android {
            width: 12.714rem;
            margin-right: $CAP_SPACE_08;
            margin-left: $CAP_SPACE_08;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-POPUP-ANDROID,
          .inapp-content-modal-ANDROID,
          .inapp-content-modal-android {
            margin-top: $CAP_SPACE_08;
            margin-right: $CAP_SPACE_08;
            margin-left: $CAP_SPACE_08;
            width: 12.714rem;
            max-height: $CAP_SPACE_44;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .inapp-button-POPUP-ANDROID,
          .inapp-button-modal-ANDROID,
          .inapp-button-modal-android {
            margin: $CAP_SPACE_08;
            width: 12.714rem;
            height: $CAP_SPACE_24;
          }
        }

        // HEADER/TOPBANNER layout for Android
        .inapp-message-container-HEADER-ANDROID,
        .inapp-message-container-TOPBANNER-ANDROID,
        .inapp-message-container-topbanner-ANDROID,
        .inapp-message-container-topbanner-android {
          position: absolute;
          display: flex;
          width: 14.286rem;
          left: 28%;
          top: $CAP_SPACE_20;

          .inapp-title-HEADER-ANDROID,
          .inapp-title-TOPBANNER-ANDROID,
          .inapp-title-topbanner-ANDROID,
          .inapp-title-topbanner-android {
            left: 34%;
            top: 17%;
            position: relative;
            font-size: $FONT_SIZE_VS;
            width: 6.429rem;
            height: $CAP_SPACE_12;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
            text-align: left;
          }

          .without-image-title-HEADER-android,
          .without-image-title-TOPBANNER-android,
          .without-image-title-topbanner-android {
            left: 26%;
            bottom: -1.5rem;
            text-align: center;
            top: 1.571rem;
          }

          .inapp-image-HEADER-ANDROID,
          .inapp-image-TOPBANNER-ANDROID,
          .inapp-image-topbanner-ANDROID,
          .inapp-image-topbanner-android {
            width: 3.571rem;
            height: 3.571rem;
            position: relative;
            top: 12%;
            right: 33%;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-HEADER-ANDROID,
          .inapp-content-TOPBANNER-ANDROID,
          .inapp-content-topbanner-ANDROID,
          .inapp-content-topbanner-android {
            position: relative;
            width: 8.571rem;
            height: 3.286rem;
            left: 35%;
            bottom: 2.143rem;
            max-height: $CAP_SPACE_40;
            font-size: $CAP_SPACE_08;
            text-overflow: ellipsis;
            text-align: left;
            overflow: hidden;
          }

          .without-image-content-HEADER-android,
          .without-image-content-TOPBANNER-android,
          .without-image-content-topbanner-android {
            width: 92%;
            left: 6%;
            bottom: -1.5rem;
          }

          .inapp-button-HEADER-ANDROID,
          .inapp-button-TOPBANNER-ANDROID,
          .inapp-button-topbanner-ANDROID,
          .inapp-button-topbanner-android {
            position: relative;
            width: 92%;
            bottom: $CAP_SPACE_32;
            height: $CAP_SPACE_20;
            margin-top: $CAP_SPACE_04;
          }

          .without-image-button-HEADER-android,
          .without-image-button-TOPBANNER-android,
          .without-image-button-topbanner-android {
            width: 92%;
            bottom: -$CAP_SPACE_19;
          }
        }

        // FOOTER/BOTTOMBANNER layout for Android
        .inapp-message-container-FOOTER-ANDROID,
        .inapp-message-container-BOTTOMBANNER-ANDROID,
        .inapp-message-container-bottombanner-ANDROID,
        .inapp-message-container-bottombanner-android {
          position: absolute;
          display: flex;
          justify-content: center;
          bottom: 1.5%;
          width: 14.286rem;
          left: 28%;

          .inapp-title-FOOTER-ANDROID,
          .inapp-title-BOTTOMBANNER-ANDROID,
          .inapp-title-bottombanner-ANDROID,
          .inapp-title-bottombanner-android {
            width: 6.429rem;
            height: $CAP_SPACE_12;
            text-align: left;
            left: 34%;
            justify-content: center;
            position: relative;
            right: 33%;
            bottom: -1.571rem;
            font-size: $FONT_SIZE_VS;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
          }

          .without-image-title-FOOTER-android,
          .without-image-title-BOTTOMBANNER-android,
          .without-image-title-bottombanner-android {
            left: 26%;
            top: -2.143rem;
            text-align: center;
          }

          .inapp-image-FOOTER-ANDROID,
          .inapp-image-BOTTOMBANNER-ANDROID,
          .inapp-image-bottombanner-ANDROID,
          .inapp-image-bottombanner-android {
            width: 3.571rem;
            height: 3.571rem;
            position: relative;
            top: 12%;
            right: 33%;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-FOOTER-ANDROID,
          .inapp-content-BOTTOMBANNER-ANDROID,
          .inapp-content-bottombanner-ANDROID,
          .inapp-content-bottombanner-android {
            position: relative;
            left: 35%;
            width: 8.571rem;
            height: 3.286rem;
            bottom: 2.143rem;
            max-height: $CAP_SPACE_44;
            font-size: $CAP_SPACE_08;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .without-image-content-FOOTER-android,
          .without-image-content-BOTTOMBANNER-android,
          .without-image-content-bottombanner-android {
            width: 92%;
            left: 6%;
            top: -2.143rem;
          }

          .inapp-button-FOOTER-ANDROID,
          .inapp-button-BOTTOMBANNER-ANDROID,
          .inapp-button-bottombanner-ANDROID,
          .inapp-button-bottombanner-android {
            width: 92%;
            bottom: 23%;
            height: $CAP_SPACE_20;
            margin-top: $CAP_SPACE_04;
          }

          .without-image-button-FOOTER-android,
          .without-image-button-BOTTOMBANNER-android,
          .without-image-button-bottombanner-android {
            width: 92%;
            top: -2.143rem;
          }
        }

        // FULLSCREEN layout for Android
        .inapp-message-container-FULLSCREEN-ANDROID,
        .inapp-message-container-fullscreen-ANDROID,
        .inapp-message-container-fullscreen-android {
          position: absolute;
          top: 10%;
          display: flex;
          left: 29%;

          .inapp-title-FULLSCREEN-ANDROID,
          .inapp-title-fullscreen-ANDROID,
          .inapp-title-fullscreen-android {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 12.857rem;
          }

          .inapp-image-FULLSCREEN-ANDROID,
          .inapp-image-fullscreen-ANDROID,
          .inapp-image-fullscreen-android {
            width: 13.286rem;
            height: 11.5rem;
            position: relative;
            right: -$CAP_SPACE_02;
            margin: $CAP_SPACE_08 0;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-FULLSCREEN-ANDROID,
          .inapp-content-fullscreen-ANDROID,
          .inapp-content-fullscreen-android {
            width: 13.286rem;
            max-height: 10.286rem;
            margin-top: $CAP_SPACE_04;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .inapp-button-FULLSCREEN-ANDROID,
          .inapp-button-fullscreen-ANDROID,
          .inapp-button-fullscreen-android {
            width: 100%;
            height: $CAP_SPACE_24;
            bottom: -1%;
          }
        }

        // POPUP/MODAL layout for iOS
        .inapp-message-container-POPUP-iOS,
        .inapp-message-container-POPUP-IOS,
        .inapp-message-container-modal-iOS,
        .inapp-message-container-modal-IOS,
        .inapp-message-container-modal-ios {
          position: absolute;
          top: 20%;
          display: flex;
          width: 14.286rem;
          left: 28%;

          .inapp-title-POPUP-iOS,
          .inapp-title-POPUP-IOS,
          .inapp-title-modal-iOS,
          .inapp-title-modal-IOS,
          .inapp-title-modal-ios {
            margin: 12% $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
            width: 12.143rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .inapp-image-POPUP-iOS,
          .inapp-image-POPUP-IOS,
          .inapp-image-modal-iOS,
          .inapp-image-modal-IOS,
          .inapp-image-modal-ios {
            width: 12.714rem;
            margin-right: $CAP_SPACE_08;
            margin-left: $CAP_SPACE_08;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-POPUP-iOS,
          .inapp-content-POPUP-IOS,
          .inapp-content-modal-iOS,
          .inapp-content-modal-IOS,
          .inapp-content-modal-ios {
            margin-top: $CAP_SPACE_12;
            margin-right: $CAP_SPACE_08;
            margin-left: $CAP_SPACE_08;
            width: 12.714rem;
            max-height: $CAP_SPACE_44;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .inapp-button-POPUP-iOS,
          .inapp-button-POPUP-IOS,
          .inapp-button-modal-iOS,
          .inapp-button-modal-IOS,
          .inapp-button-modal-ios {
            margin: $CAP_SPACE_08;
            width: 12.714rem;
            height: $CAP_SPACE_24;
          }
        }

        // HEADER/TOPBANNER layout for iOS
        .inapp-message-container-HEADER-ios,
        .inapp-message-container-HEADER-IOS,
        .inapp-message-container-TOPBANNER-ios,
        .inapp-message-container-TOPBANNER-IOS,
        .inapp-message-container-topbanner-ios,
        .inapp-message-container-topbanner-IOS,
        .inapp-message-container-topbanner-ios {
          position: absolute;
          display: flex;
          width: 14.286rem;
          left: 28%;
          top: 3%;

          .inapp-title-HEADER-iOS,
          .inapp-title-HEADER-IOS,
          .inapp-title-TOPBANNER-iOS,
          .inapp-title-TOPBANNER-IOS,
          .inapp-title-topbanner-iOS,
          .inapp-title-topbanner-IOS,
          .inapp-title-topbanner-ios {
            left: 34%;
            top: 15%;
            position: relative;
            font-size: $FONT_SIZE_VS;
            width: 6.429rem;
            height: $CAP_SPACE_12;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
            text-align: left;
          }

          .without-image-title-HEADER-ios,
          .without-image-title-HEADER-IOS,
          .without-image-title-TOPBANNER-ios,
          .without-image-title-TOPBANNER-IOS,
          .without-image-title-topbanner-ios,
          .without-image-title-topbanner-IOS {
            left: 26%;
            top: $CAP_SPACE_18;
            text-align: center;
          }

          .inapp-image-HEADER-iOS,
          .inapp-image-HEADER-IOS,
          .inapp-image-TOPBANNER-iOS,
          .inapp-image-TOPBANNER-IOS,
          .inapp-image-topbanner-iOS,
          .inapp-image-topbanner-IOS,
          .inapp-image-topbanner-ios {
            width: 3.571rem;
            height: 3.571rem;
            position: relative;
            top: 12%;
            right: 33%;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-HEADER-iOS,
          .inapp-content-HEADER-IOS,
          .inapp-content-TOPBANNER-iOS,
          .inapp-content-TOPBANNER-IOS,
          .inapp-content-topbanner-iOS,
          .inapp-content-topbanner-IOS,
          .inapp-content-topbanner-ios {
            position: relative;
            width: 8.571rem;
            height: 3.286rem;
            left: 35%;
            top: -2.214rem;
            max-height: $CAP_SPACE_40;
            font-size: $CAP_SPACE_08;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .without-image-content-HEADER-ios,
          .without-image-content-HEADER-IOS,
          .without-image-content-TOPBANNER-ios,
          .without-image-content-TOPBANNER-IOS,
          .without-image-content-topbanner-ios,
          .without-image-content-topbanner-IOS {
            width: 92%;
            left: 6%;
            top: 1.5rem;
          }

          .inapp-button-HEADER-iOS,
          .inapp-button-HEADER-IOS,
          .inapp-button-TOPBANNER-iOS,
          .inapp-button-TOPBANNER-IOS,
          .inapp-button-topbanner-iOS,
          .inapp-button-topbanner-IOS,
          .inapp-button-topbanner-ios {
            width: 90%;
            bottom: 23%;
            height: $CAP_SPACE_20;
            margin-top: $CAP_SPACE_04;
          }

          .without-image-button-HEADER-ios,
          .without-image-button-HEADER-IOS,
          .without-image-button-TOPBANNER-ios,
          .without-image-button-TOPBANNER-IOS,
          .without-image-button-topbanner-ios,
          .without-image-button-topbanner-IOS {
            width: 92%;
            bottom: -$CAP_SPACE_19;
          }
        }

        // FOOTER/BOTTOMBANNER layout for iOS
        .inapp-message-container-FOOTER-iOS,
        .inapp-message-container-FOOTER-IOS,
        .inapp-message-container-BOTTOMBANNER-iOS,
        .inapp-message-container-BOTTOMBANNER-IOS,
        .inapp-message-container-bottombanner-iOS,
        .inapp-message-container-bottombanner-IOS,
        .inapp-message-container-bottombanner-ios {
          position: absolute;
          display: flex;
          justify-content: center;
          width: 14.286rem;
          left: 28%;
          top: 75%;

          .inapp-title-FOOTER-iOS,
          .inapp-title-FOOTER-IOS,
          .inapp-title-BOTTOMBANNER-iOS,
          .inapp-title-BOTTOMBANNER-IOS,
          .inapp-title-bottombanner-iOS,
          .inapp-title-bottombanner-IOS,
          .inapp-title-bottombanner-ios {
            width: 6.429rem;
            height: $CAP_SPACE_12;
            text-align: left;
            left: 34%;
            justify-content: center;
            position: relative;
            right: 33%;
            bottom: -1.571rem;
            font-size: $FONT_SIZE_VS;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
          }

          .without-image-title-FOOTER-ios,
          .without-image-title-FOOTER-IOS,
          .without-image-title-BOTTOMBANNER-ios,
          .without-image-title-BOTTOMBANNER-IOS,
          .without-image-title-bottombanner-ios,
          .without-image-title-bottombanner-IOS {
            left: 26%;
            top: 1.071rem;
            text-align: center;
          }

          .inapp-image-FOOTER-iOS,
          .inapp-image-FOOTER-IOS,
          .inapp-image-BOTTOMBANNER-iOS,
          .inapp-image-BOTTOMBANNER-IOS,
          .inapp-image-bottombanner-iOS,
          .inapp-image-bottombanner-IOS,
          .inapp-image-bottombanner-ios {
            width: 3.571rem;
            height: 3.571rem;
            position: relative;
            top: 12%;
            right: 33%;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-FOOTER-iOS,
          .inapp-content-FOOTER-IOS,
          .inapp-content-BOTTOMBANNER-iOS,
          .inapp-content-BOTTOMBANNER-IOS,
          .inapp-content-bottombanner-iOS,
          .inapp-content-bottombanner-IOS,
          .inapp-content-bottombanner-ios {
            position: relative;
            left: 35%;
            width: 60%;
            height: 3.286rem;
            bottom: 2.143rem;
            max-height: $CAP_SPACE_44;
            font-size: $CAP_SPACE_08;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .without-image-content-FOOTER-ios,
          .without-image-content-FOOTER-IOS,
          .without-image-content-BOTTOMBANNER-ios,
          .without-image-content-BOTTOMBANNER-IOS,
          .without-image-content-bottombanner-ios,
          .without-image-content-bottombanner-IOS {
            width: 92%;
            left: 6%;
            top: 1.071rem;
          }

          .inapp-button-FOOTER-iOS,
          .inapp-button-FOOTER-IOS,
          .inapp-button-BOTTOMBANNER-iOS,
          .inapp-button-BOTTOMBANNER-IOS,
          .inapp-button-bottombanner-iOS,
          .inapp-button-bottombanner-IOS,
          .inapp-button-bottombanner-ios {
            width: 90%;
            bottom: 23%;
            height: $CAP_SPACE_20;
            margin-top: $CAP_SPACE_04;
          }

          .without-image-button-FOOTER-ios,
          .without-image-button-FOOTER-IOS,
          .without-image-button-BOTTOMBANNER-ios,
          .without-image-button-BOTTOMBANNER-IOS,
          .without-image-button-bottombanner-ios,
          .without-image-button-bottombanner-IOS {
            width: 92%;
            top: 1.071rem;
          }
        }

        // FULLSCREEN layout for iOS
        .inapp-message-container-FULLSCREEN-iOS,
        .inapp-message-container-FULLSCREEN-IOS,
        .inapp-message-container-fullscreen-iOS,
        .inapp-message-container-fullscreen-IOS,
        .inapp-message-container-fullscreen-ios {
          position: absolute;
          top: 10%;
          display: flex;
          left: 29%;

          .inapp-title-FULLSCREEN-iOS,
          .inapp-title-FULLSCREEN-IOS,
          .inapp-title-fullscreen-iOS,
          .inapp-title-fullscreen-IOS,
          .inapp-title-fullscreen-ios {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 12.857rem;
          }

          .inapp-image-FULLSCREEN-iOS,
          .inapp-image-FULLSCREEN-IOS,
          .inapp-image-fullscreen-iOS,
          .inapp-image-fullscreen-IOS,
          .inapp-image-fullscreen-ios {
            width: 13.286rem;
            height: 11.5rem;
            position: relative;
            right: -$CAP_SPACE_02;
            margin: $CAP_SPACE_08 0;
            border-radius: $CAP_SPACE_04;
          }

          .inapp-content-FULLSCREEN-iOS,
          .inapp-content-FULLSCREEN-IOS,
          .inapp-content-fullscreen-iOS,
          .inapp-content-fullscreen-IOS,
          .inapp-content-fullscreen-ios {
            width: 13.286rem;
            max-height: 10.286rem;
            margin-top: $CAP_SPACE_04;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .inapp-button-FULLSCREEN-iOS,
          .inapp-button-FULLSCREEN-IOS,
          .inapp-button-fullscreen-iOS,
          .inapp-button-fullscreen-IOS,
          .inapp-button-fullscreen-ios {
            width: 100%;
            height: $CAP_SPACE_24;
            bottom: -1%;
          }
        }

        // preview-inapp-screen wrapper (from TemplatePreview line 1050-1052)
        .preview-inapp-screen {
          width: 100%;
        }
    }
  }

  // MobilePush Preview Content Styles (Phase 11)
  // Styles copied from TemplatePreview/_templatePreview.scss to ensure consistency
  // These styles work within the SMS device container structure
  .sms-content-overlay {
    // MobilePush notification container styles (from TemplatePreview line 577-608)
    .android-push-message-Container,
    .iphone-push-message-Container {
      position: absolute;
      top: 22%;
      left: 4%;
      width: 93%;
      overflow: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      .message-pop {
        background: $CAP_WHITE;
        color: $CAP_G01;
        border-radius: $CAP_SPACE_08;
        padding: $CAP_SPACE_08;
        width: 100%;

        &.align-left {
          text-align: left;
        }

        // App header styles (from TemplatePreview line 669-694)
        .app-header {
          color: #5D5D5D;
          font-weight: 600;
          padding: $CAP_SPACE_04 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
          display: flex;
          background-color: $CAP_WHITE;

          .app-header-left {
            display: flex;
            align-items: center;

            .app-icon {
              width: $CAP_SPACE_20;
              height: $CAP_SPACE_20;
              border-radius: 50%;
              background-color: $CAP_COLOR_16;
            }

            .title {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              padding: 0 $CAP_SPACE_08 0 $CAP_SPACE_08;
            }
          }

          .app-header-right {
            display: flex;
            align-items: center;

            span {
              font-weight: 200;
            }
          }
        }

        // Title styles (from TemplatePreview line 695-716)
        .title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 $CAP_SPACE_08 0 $CAP_SPACE_08;
        }

        // Body text styles (from TemplatePreview line 704-708)
        .body-text {
          padding: $CAP_SPACE_04 $CAP_SPACE_08 0.625rem $CAP_SPACE_08;
          padding-left: 2.785rem;
        }

        // Body image styles (from TemplatePreview line 698-703)
        .body-image {
          padding: 0 $CAP_SPACE_08 $CAP_SPACE_08 $CAP_SPACE_08;
          background-color: $CAP_WHITE;

          .mpush-video-preview {
            max-width: 100%;
            max-height: 7.5rem;
            margin-left: $CAP_SPACE_24;
          }
          
          .mpush-gif-preview {
            max-width: 100%;
            max-height: 7.5rem;
          }

          img {
            max-width: 18.75rem;
            max-height: 13.75rem;
            margin-left: 1.571rem;
            display: block;
            border-radius: 3%;
          }
        }

        // Actions (buttons) styles (from TemplatePreview line 717-726)
        .actions {
          background-color: $CAP_WHITE;
          height: auto;
          padding: 0.571rem;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          gap: $CAP_SPACE_08;

          .action {
            font-size: $FONT_SIZE_S;
            // Additional action button styles from TemplatePreview
          }
        }
      }
    }

    // MobilePush carousel styles (from TemplatePreview line 609-680)
    .msg-container-carousel.mobile-push-carousel-container {
      display: flex;
      flex-direction: column;
      width: 100%;

      .scroll-container.mobile-push-scroll-container {
        overflow-x: auto;
        display: flex;
        padding-top: $CAP_SPACE_06;
        padding-right: $CAP_SPACE_06;
        white-space: nowrap;
        scrollbar-width: none; // Hide scrollbar in Firefox
        &::-webkit-scrollbar {
          display: none; // Hide scrollbar in Chrome/Safari/Opera
        }
      }

      .mobile-push-carousel-card {
        position: relative;
        min-width: 16.125rem; // 258px
        margin-right: 0.75rem; // 12px
        background: $CAP_WHITE;
        color: $CAP_G01; // #091e42
        border-radius: $CAP_SPACE_08; // 8px
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: $CAP_SPACE_08;

        .carousel-image {
          width: 100%;
          height: 11.25rem; // 180px
          object-fit: contain;
          border-radius: 0.5rem 0.5rem 0 0; // 8px
        }

        .carousel-video-preview {
          width: 100%;
          height: 11.25rem; // 180px
          object-fit: contain;
          border-radius: 0.5rem 0.5rem 0 0; // 8px
          opacity: 0.7;
        }

        .video-preview {
          position: relative;
          width: 100%;
          margin-bottom: $CAP_SPACE_08;

          .icon-position {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;

            .video-icon {
              width: $CAP_SPACE_48;
              height: $CAP_SPACE_48;
              filter: drop-shadow(0 $CAP_SPACE_02 $CAP_SPACE_04 rgba(0, 0, 0, 0.3));
              position: relative;
              right: 0;
              bottom: 0;
            }
          }
        }

        .carousel-content {
          padding: 0.625rem 0.75rem; // 10px 12px
          width: 100%;

          .carousel-title {
            font-weight: $FONT_WEIGHT_MEDIUM;
            font-size: $FONT_SIZE_M; // 14px
            margin-bottom: 0.25rem; // 4px
          }

          .carousel-message {
            font-size: $FONT_SIZE_S; // 13px is not in variables, using 12px
            color: $CAP_G04; // #5e6c84 is closest to #555
          }

          .carousel-link {
            margin-top: 0.5rem; // 8px

            a {
              color: $FONT_COLOR_05; // #2466ea
              font-size: $FONT_SIZE_S; // 12px
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  // Viber Preview Content Styles (Phase 12)
  // Uses SMS device frame and navigation bar
  // Body content follows TemplatePreview Viber structure
  .sms-content-overlay {
    &.viber-preview {
      // Viber message container
      .viber-message-container {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 $CAP_SPACE_16;
        background-color: #ffffff;
        margin-left: $CAP_SPACE_06;
        margin-right: $CAP_SPACE_08;
        border-bottom-left-radius: 2.6rem;
        border-bottom-right-radius: 2.6rem;

        // Brand name display (from TemplatePreview line 1136)
        .viber-brand-name {
          position: absolute;
          top: 12%;
          left: 36%;
          font-size: $FONT_SIZE_M;
          color: #262626;
          font-weight: 500;
        }

        // Message container (from TemplatePreview line 1139-1144)
        .msg-container.viber-preview {
          position: relative;
          max-height: 20.857rem;
          margin-left: $CAP_SPACE_20;
          margin-top: $CAP_SPACE_16;
          width: 68%;

          &.viber-preview-carousel {
            width: 100%;
            margin-left: $CAP_SPACE_12;
            max-height: none;
          }

          // Account icon (from TemplatePreview line 1146-1160)
          .viber-account-icon {
            width: $CAP_SPACE_20;
            height: $CAP_SPACE_20;
            margin: 0 $CAP_SPACE_04 19.786rem 0;
            border-radius: $CAP_SPACE_04;
            background-color: $CAP_PURPLE01;
            font-size: $FONT_SIZE_S;
            font-weight: 900;
            color: $CAP_WHITE;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
          }

          // Message pop (from TemplatePreview line 1161-1223)
          .message-pop.viber-message-pop {
            width: 80%;
            left: $CAP_SPACE_36;
            margin-top: -$CAP_SPACE_06;
            position: relative;
            background: $CAP_G08;
            border-radius: $CAP_SPACE_04;
            padding: $CAP_SPACE_04;

            &.viber-message-pop-carousel {
              width: 100%;
              left: 0;
              margin-top: 0;
              padding: 0;
              background: transparent;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: $CAP_SPACE_06;
            }

            // Text Viber preview (from TemplatePreview line 1166-1174)
            .viber-message-text {
              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
              line-height: 1.4;
              word-wrap: break-word;
            }

            // Image Viber preview (from TemplatePreview line 1176-1188)
            .viber-image-preview {
              width: 9.75rem;
              max-width: 100%;
              margin-bottom: 0.357rem;
              display: block;
            }

            // Video preview (from TemplatePreview line 1190-1213)
            .video-preview {
              position: relative;
              width: 100%;
              margin-bottom: 0.357rem;

              .viber-video-preview {
                max-width: 100%;
                margin-bottom: 0;
              }

              .icon-position {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;

                .video-icon {
                  width: $CAP_SPACE_48;
                  height: $CAP_SPACE_48;
                  filter: drop-shadow(0 $CAP_SPACE_02 $CAP_SPACE_04 rgba(0, 0, 0, 0.3));
                  position: relative;
                  right: 0;
                  bottom: 0;
                }
              }
            }

            // Button Viber preview (from TemplatePreview line 1215-1221)
            .viber-button-base {
              border-radius: $CAP_SPACE_16;
              background-color: $CAP_PURPLE01;
              margin-top: $CAP_SPACE_12;
              text-align: center;
              width: 8.75rem;
              height: $CAP_SPACE_20;
              margin-left: $CAP_SPACE_08;
              display: flex;
              align-items: center;
              justify-content: center;

              .viber-button-card-text {
                font-size: $FONT_SIZE_S;
                font-weight: 500;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                color: $CAP_WHITE;
                margin: 0;
              }
            }

            .viber-carousel-message-pop,
            .viber-carousel-cards-pop {
              width: 100%;
              background: $CAP_G08;
              border-radius: $CAP_SPACE_06;
              padding: $CAP_SPACE_08;
            }

            .viber-carousel-message-pop {
              margin-top: 0;
              width: 68%;
              border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
            }

            .viber-carousel-cards-pop {
              margin-top: 0;
              width: 100%;
              background: transparent;
              border: none;
              border-radius: 0;
              padding: 0;
            }

            .viber-carousel-message-box {
              width: 100%;
              min-height: 2.25rem;
              height: auto;
              border-radius: $CAP_SPACE_04;
              background: transparent;
              padding: 0 $CAP_SPACE_08;
              display: flex;
              align-items: center;
            }

            .viber-carousel-message-box-text {
              color: $CAP_G01;
              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
              white-space: normal;
              word-break: break-word;
              overflow: visible;
              width: 100%;
            }

            .viber-carousel-message-box-placeholder {
              width: 100%;
              height: 0.875rem;
              border-radius: $CAP_SPACE_04;
              background: $CAP_G07;
            }

            .viber-carousel-message-timestamp,
            .viber-carousel-cards-timestamp {
              display: block;
              text-align: right;
              margin-top: $CAP_SPACE_06;
              color: $CAP_G04;
            }

            .empty-placeholder {
              height: $CAP_SPACE_08;
            }

            .viber-timestamp {
              float: inline-end;
            }
          }
        }
      }
      .viber-message-container-ios {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
  }


  // Zalo Preview Content Styles (Phase 13)
  // Zalo uses external preview URL - no device mockup needed
  // Styles copied from TemplatePreview/_templatePreview.scss
  .zalo-preview-container {
    text-align: center;
        padding: $CAP_SPACE_24;
    background: $CAP_WHITE;
    border-radius: $CAP_SPACE_08;

    &.zalo-preview-container-creative {
      position: relative;
      padding-left: 4.5rem;
      padding-right: 6.875rem;
    }

    &.zalo-preview-container-campaign {
      padding-left: 0;
      padding-right: 4.563rem;
    }

    .preview-head {
      font-weight: 500;
      font-size: $FONT_SIZE_M;
      color: $FONT_COLOR_01;
      margin-bottom: $CAP_SPACE_12;
    }
  
    .preview-text {
      font-weight: 400;
      font-size: $FONT_SIZE_S;
      color: $CAP_G04;
      margin-bottom: $CAP_SPACE_16;
      line-height: 1.5;
    }

    .preview-link {
      color: $FONT_COLOR_05;
      font-size: $FONT_SIZE_S;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: $CAP_SPACE_04;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      .anticon {
        font-size: 1rem;
      }
    }

    // Loading state
    .zalo-loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: $CAP_SPACE_60 $CAP_SPACE_24;
      gap: $CAP_SPACE_16;
  
      .zalo-loading-text {
        color: #8c8c8c;
        font-size: $FONT_SIZE_M;
      }
    }
  
    // Error state
    .zalo-error-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: $CAP_SPACE_60 $CAP_SPACE_24;
      gap: $CAP_SPACE_16;
  
      .zalo-error-text {
        font-size: $FONT_SIZE_L;
        font-weight: 600;
        color: #262626;
      }
  
      .zalo-error-message {
        font-size: $FONT_SIZE_M;
        color: #ff4d4f;
        text-align: center;
        max-width: 35.714rem;
      }
    }
  }

  // WebPush Test & Preview Styles
  .webpush-test-preview-container {
    width: 100%;
    position: relative;
    padding-left: $CAP_SPACE_16;
    padding-right: $CAP_SPACE_16;
  }

  .webpush-preview-panel {
    position: relative;
    width: 100%;
  }

  .webpush-fullscreen-modal {
    .webpush-fullscreen-divider {
      margin-top: 0;
      margin-bottom: $CAP_SPACE_16;
    }
    .ant-modal.cap-modal-v2 {
      width: 90%;
      max-width: 100%;
      margin-top: $CAP_SPACE_40;
    }
    // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
    .webpush-preview-header {
      background: $CAP_WHITE;
      overflow: hidden;
  
      .preview-divider {
        margin: 0;
      }
  
      .webpush-heading-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $CAP_SPACE_16 0 $CAP_SPACE_16 0;
  
        .preview-for {
          gap: $CAP_SPACE_04;
          align-items: center;
          b {
            margin-left: $CAP_SPACE_08;
          }
        }
        
        .webpush-fullscreen-close-icon {
          width: $CAP_SPACE_24;
          height: $CAP_SPACE_24;
        }
      }
    }
  }

  // Responsive adjustments
  @media (max-width: 85.714rem) {
    .unified-preview {
      .device-frame.device-frame-tablet {
        width: 42.857rem;
      }
    }
  }
  
  @media (max-width: 54.857rem) {
    .unified-preview {
      .preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: $CAP_SPACE_12;
  
        .preview-header-right {
          width: 100%;
          justify-content: flex-start;
        }
      }
  
      .preview-content-container {
        padding: $CAP_SPACE_16;
      }
  
      .device-frame {
        &.device-frame-desktop,
        &.device-frame-tablet {
          width: 100% !important;
          max-width: 100% !important;
        }
  
        &.device-frame-mobile {
          width: 100% !important;
          max-width: 100% !important;
        }
      }
    }
  }
  