.container {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: flex-end;   /* position to the right */
  justify-content: center; /* center vertically */
  height: 100vh;           /* full viewport height */
  gap: 1rem;               /* space between iframes */
}

.chat-iframe {
  width: 40vw;
  height: 60vh;
  max-width: 400px;
  max-height: 200px;
  border: none;
  margin: 2vh 0;  /* only vertical spacing */
}

.pet-iframe {
  width: 30vw;
  height: 50vh;
  max-width: 310px;
  max-height: 310px;
  border: none;
  margin: 2vh 0;
}

.main-layout {
  display: flex;               /* horizontal layout */
  gap: 2rem;                   /* space between iframe column and text */
  align-items: flex-start;     /* align top of columns */
  padding: 1rem;
}

.iframe-column {
  display: flex;
  flex-direction: column;      /* stack the iframes vertically */
  gap: 1rem;
}

.text-column {
  flex: 1;                     /* take remaining horizontal space */
  min-width: 200px;
  font-size: 12px;
  line-height: 1.5;
}

/* Responsive: stack vertically on smaller screens */
@media (max-width: 900px) {
  .main-layout {
    flex-direction: column;
    gap: 1rem;
  }
  .iframe-column, .text-column {
    width: 100%;
  }
  .chat-iframe, .pet-iframe {
    width: 100%;
    max-width: none;
    height: auto;
  }
}