/* Monitor Container preserving aspect ratio 2787 / 1836.
       Uses frame.png as the static/fixed monitor bezel overlay. */
    .monitor-container {
      position: relative;
      /* width: 90vw;
      max-width: min(923px, 117.5vh); */
      background: url('/assets/images/kai-images/frame-3.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 802 / 528;
    }

   

    /* Screen Area matching the inner transparent screen window of the new frame.png:
       - left: 49px / 2787px = 1.758%
       - top: 41px / 1836px = 2.233%
       - width: 2682px / 2787px = 96.233%
       - height: 1511px / 1836px = 82.298% */
    .screen {
      position: absolute;
      left: 1.758%;
      top: 2.233%;
      width: 96.233%;
      height: 82.298%;
      background-color: #091023;
      /* Matching the background of fr-1.png */
      border-radius: 6px;
      overflow: hidden;
    }

    /* Entrance animation: Only the first image content slides in from right to left */
    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
      }

      to {
        transform: translateX(0);
      }
    }

    .screen-content {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transform: translateX(100%); /* Stays off-screen/idle by default */
      will-change: transform;
    }

    .screen-content.animate-entrance {
      animation: slide-in-right 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    /* Scaling and shifting the images to remove their built-in bezels/stands and rounded corners.
       Crops at y = 600 via clip-path to show the screen container background (#091023) underneath.
       - width: 105.360%
       - height: 707px / 501px = 141.118%
       - left: -2.740%
       - top: -111px / 501px = -22.156%
       - object-fit is set to fill to prevent browser subpixel aspect-ratio overrides */
    .base-layer {
      position: absolute;
      width: 105.360%;
      height: 141.118%;
      left: -2.740%;
      top: -22.156%;
      object-fit: fill;
      opacity: 0;
      will-change: opacity;
      clip-path: inset(0% 0% 15.134% 0%);
      /* Clips the bottom at y = 600px of image space */
    }

    .base-layer.active {
      opacity: 1;
    }

    /* Solid background mask covering the chat history area of the base layer.
       Coordinates are percentages relative to the screen container:
       - left: (183px - 24px) / 876px = 18.150%
       - top: 0%
       - width: (910px - 183px) / 876px = 81.850%
       - height: (544px - 111px) / 501px = 86.427% */
    .chat-bg-mask {
      position: absolute;
      left: 18.150%;
      top: 0;
      width: 81.850%;
      height: 86.427%;
      background-color: #091023;
      /* Matches the solid dark background of the chat window */
      z-index: 5;
      pointer-events: none;
    }

    /* Chat History Scrolling Viewport.
       - top: 0%
       - right: 0%
       - bottom: (501px - 433px) / 501px = 13.573%
       - left: 18.150% */
    .chat-scroll-viewport {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(0% 0% 13.573% 18.150%);
      pointer-events: none;
      z-index: 10;
    }

    /* Double-buffered scrolling layers.
       We apply clip-path: inset(0 0 13.573% 0) to clip out the input bar area
       at the bottom of the screen container. */
    .scroll-slide {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: translateY(0);
      will-change: transform, opacity;
      clip-path: inset(0% 0% 13.573% 0%);
    }

    .scroll-slide img {
      position: absolute;
      width: 105.360%;
      height: 141.118%;
      left: -2.740%;
      top: -22.156%;
      object-fit: fill;
    }

    /* Smooth CSS transition for scroll slide movement */
    .scroll-slide.transitioning {
      transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease-in-out;
    }

    .base-layer.transitioning {
      transition: opacity 1.2s ease-in-out;
    }