/* ========================================
       WORKFLOW AUTOMATION CARD STYLES
       ======================================== */

    .messages-illustration {
        position: relative;
        min-height: 260px;
    }

    @media (min-width: 640px) {
        .messages-illustration {
            min-height: 280px;
        }
    }

    /* Active Message Card (Emma - Pink gradient) */
    .message-card-active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(253, 242, 248, 0.9) 100%);
        border: 1px solid rgba(236, 72, 153, 0.35);
        border-radius: 14px;
        position: relative;
        z-index: 10;
        animation: card-scale-pulse 3s ease-in-out infinite;
    }

    @keyframes card-scale-pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.02);
        }
    }

    /* Secondary Message Cards (Liam, Olivia) */
    .message-card-secondary {
        background: linear-gradient(135deg, rgba(247, 247, 247, 1) 0%, rgba(236, 236, 236, 1) 100%);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        position: relative;
        z-index: 5;
    }

    /* Message Icon Badges */
    .message-icon-badge {
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: #fdf2f8;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }

    .message-icon-badge-secondary,
    .message-icon-badge-mail {
        background: #f0f0f0;
    }

    /* Curved Lines */
    .curved-lines {
        position: absolute;
        right: 28px;
        top: 0;
        width: 140px;
        height: 316px;
        z-index: 1;
    }

    @media (min-width: 640px) {
        .curved-lines {
            right: 33px;
            width: 170px;
        }
    }

    @media (min-width: 768px) {
        .curved-lines {
            right: 33px;
            width: 200px;
        }
    }

    /* Tablet: stick lines and hub to message column (same as desktop) */
    @media (min-width: 640px) and (max-width: 1023px) {
        .curved-lines {
            left: 299px;
            right: auto;
            width: 200px;
        }

        .hub-icon {
            left: 468px;
            right: auto;
            width: 73px;
            height: 73px;
        }
    }

    .animated-line {
        animation: dash-flow 3s linear infinite;
    }

    /* Top line (Emma) runs after bottom line (Liam), then cycle repeats */
    .animated-line-top {
        animation-delay: 3s;
    }

    @keyframes dash-flow {
        0% {
            stroke-dashoffset: 100;
        }

        100% {
            stroke-dashoffset: 0;
        }
    }

    /* Central Hub Icon */
    .hub-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        z-index: 15;
        border-radius: 10px;
        overflow: hidden;
    }

    @media (min-width: 640px) {
        .hub-icon {
            right: 24px;
            width: 52px;
            height: 52px;
        }
    }

    @media (min-width: 768px) {
        .hub-icon {
            right: 24px;
            width: 80px;
            height: 80px;
            border-radius: 12px;
        }
    }

    /* Tablet: hub stays vertically aligned with message stack */
    @media (min-width: 640px) and (max-width: 1023px) {
        .hub-icon {
            top: 50%;
            transform: translateY(-50%);
        }
    }

    /* Connecting Line between cards */
    .connecting-line {
        position: absolute;
        left: 150px;
        top: 170px;
        width: 2px;
        height: 12px;
        background: linear-gradient(180deg, #ec4899 0%, #f9a8d4 100%);
        z-index: 8;
    }

    /* Replying text animation */
    .replying-text {
        background: linear-gradient(90deg, rgba(31, 31, 31, 1) 0%, rgba(31, 31, 31, 0.4) 50%, rgba(31, 31, 31, 1) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 2s linear infinite;
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    /* ========================================
       CUSTOM AI INTEGRATIONS CARD STYLES
       ======================================== */

    .integrations-orbit-container {
        position: relative;
    }

    .orbit-wrapper {
        margin-top: -2rem;
        position: relative;
        width: 320px;
        height: 320px;
    }

    /* Center Hub */
    .orbit-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        border-radius: 12px;
        overflow: hidden;
        z-index: 10;
    }

    /* Orbit Ring Container - logos turn around the center hub */
    .orbit-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: orbit-spin 60s linear infinite;
    }

    @keyframes orbit-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* Individual Orbit Icons - counter-rotate so logos stay upright while orbiting */
    .orbit-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 76px;
        height: 76px;
        margin-left: -38px;
        margin-top: -38px;
        transform: rotate(var(--angle)) translateX(110px) rotate(calc(-1 * var(--angle)));
        animation: orbit-counter-rotate 60s linear infinite;
    }

    @keyframes orbit-counter-rotate {
        from {
            transform: rotate(var(--angle)) translateX(110px) rotate(calc(-1 * var(--angle)));
        }

        to {
            transform: rotate(calc(var(--angle) + 360deg)) translateX(110px) rotate(calc(-1 * (var(--angle) + 360deg)));
        }
    }

    /* Icon Circle - stays upright as ring spins */
    .icon-circle {
        width: 76px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: icon-counter-spin 60s linear infinite;
    }

    /* Orbiting logos: black and white */


    @keyframes icon-counter-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-360deg);
        }
    }

    /* ========================================
       RESPONSIVE ADJUSTMENTS
       ======================================== */

    @media (max-width: 768px) {
        .orbit-wrapper {
            width: 240px;
            height: 240px;
        }

        .orbit-icon {
            width: 60px;
            height: 60px;
            margin-left: -30px;
            margin-top: -30px;
            transform: rotate(var(--angle)) translateX(90px) rotate(calc(-1 * var(--angle)));
        }

        @keyframes orbit-counter-rotate {
            from {
                transform: rotate(var(--angle)) translateX(90px) rotate(calc(-1 * var(--angle)));
            }

            to {
                transform: rotate(calc(var(--angle) + 360deg)) translateX(90px) rotate(calc(-1 * (var(--angle) + 360deg)));
            }
        }

        .icon-circle {
            width: 60px;
            height: 60px;
        }

        .orbit-center {
            width: 44px;
            height: 44px;
        }
    }