/* space-chat-wrapper.css */

/* Define theme variables */
:root {
    --scw-panel-bg: linear-gradient(145deg, #2d3436, #1a1e1f); /* Dark metallic gradient */
    --scw-panel-border: #4a5568; /* Muted border */
    --scw-panel-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    --scw-panel-radius: 8px;
    --scw-viewport-bg-fallback: #0a0a1a; /* Dark blue/black fallback */
    /* Simple starfield effect using gradients */
    --scw-viewport-bg-image:
        radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    --scw-viewport-bg-size: 30px 30px, 60px 60px;
    --scw-viewport-bg-position: 0 0, 15px 15px;
    /* --- Optional: Replace gradient with your actual image URL --- */
    /* --scw-viewport-bg-image: url('/path/to/your/space-background.jpg'); */
    /* --scw-viewport-bg-size: cover; */
    /* --scw-viewport-bg-position: center center; */
  
    --scw-iframe-glow: 0 0 15px rgba(100, 150, 255, 0.3); /* Subtle blue glow */
    --scw-iframe-min-height: 400px;
    --scw-iframe-min-height-mobile: 450px;
  }
  
  /* Base background wrapper */
  .space-chat-background-wrapper {
    background-color: #0a0a1a; /* Dark blue/black fallback */
    padding: 2rem 1rem; /* Padding around the panel */
    margin: 2em 0; /* Vertical spacing */
    border-radius: calc(8px + 4px);
    position: relative;
    background-image: url('/wp-content/uploads/2025/04/pexels-adam-lukac-254247-773958.jpg'); 
    background-repeat: no-repeat; /* Prevent tiling */
    background-size: cover;       /* Scale image to cover area */
    background-position: center center; /* Center the image */
    background-attachment: fixed;   /* Keep parallax effect (optional) */
    min-height: 800px;
     /* --- Add Flexbox properties --- */
    display: flex;             /* Enable flexbox */
    flex-direction: column;    /* Stack children vertically */
    justify-content: flex-end; /* Push content to the bottom (main axis) */
    /*min-height: 75vh;           Ensure wrapper has enough height for positioning */
                                /* Adjust vh value as needed */
    /* --- End additions --- */
  }
  
  /* The "Control Panel" */
  .space-chat-panel {
    background: linear-gradient(145deg, #2d3436, #1a1e1f); /* Dark metallic gradient */
    border: 1px solid  #4a5568; /* Muted border */
    border-radius: 8px;
    padding: 1rem; /* Padding inside the panel, around the iframe container */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    max-width: 600px; /* Max width for the panel */
    width: 100%; /* Allow panel to take width but constrained by max-width */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*left: -100px;        Moves it 25px to the left from its centered position */
    box-sizing: border-box; /* Include padding/border in width calculation */
  }
  
  /* Container holding the iframe */
  .space-chat-iframe-container {
    background-color: #000; /* Black background behind iframe */
    border-radius: 4px; /* Slightly rounded corners for iframe area */
    overflow: hidden; /* Clip iframe corners */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), /* Inner shadow */
                      0 0 15px rgba(100, 150, 255, 0.3); /* Subtle blue glow */
    position: relative;
  }
  
  /* Iframe itself */
  .space-chat-iframe {
    display: block; /* Removes extra space below iframe */
    width: 100%;
    border: none;
    min-height: 700px; /* Control height via variable */
    height: auto; /* Allow it to potentially grow if content dictates */
  }
  
  
  /* --- Responsive Adjustments --- */
  @media (max-width: 767px) {
    .space-chat-background-wrapper {
        padding: 1rem 0.5rem; /* Reduce padding */
        background-attachment: scroll; /* Fixed background can be less smooth on mobile */
        margin: 1.5em 0;
    }
    .space-chat-panel {
        padding: 0.75rem; /* Reduce panel padding */
    }
    .space-chat-iframe {
       min-height: 450px; /* Use mobile min-height */
    }
  }
  
  @media (max-width: 480px) {
    .space-chat-panel {
        padding: 0.5rem;
    }
    /* Further reduce iframe height if needed */
    /* .space-chat-iframe {
       min-height: 400px;
    } */
  }