* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    max-width: 430px; /* iPhone 15 Pro Max width */
    height: 932px; /* iPhone 15 Pro Max height - Changed from max-height */
    margin: auto; /* Center the body on larger screens */
    overflow: hidden; /* Hide scrollbars if content overflows the simulated screen */
    position: relative; /* For notch positioning */
    border: 1px solid #000; /* Optional: to visualize the phone border */
}

header {
    background-color: #003863;
    color: #f4f4f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* h1, logo, menu icon */
    align-items: center;
    height: 10%; /* Explicitly set height to 10% of parent (body) */
    flex-shrink: 0; /* Prevent shrinking as a flex item */
    overflow: hidden; /* Clip any content that overflows the 10% height */
    padding: 0.9em;
}

#logo {
    height: 42px;
    justify-self: center; /* Center the logo horizontally */
    align-self: end; /* Align the logo to the bottom of its grid cell */
}

#menu-icon {
    height: 42px;
    cursor: pointer;
    justify-self: end; /* Align menu icon to the end */
    align-self: end;
}

main {
    height: 90%; /* Explicitly set height to 90% of parent (body) */
    flex-shrink: 0; /* Prevent shrinking as a flex item */
    padding: 1em;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow main content to scroll if it overflows */
}

#situation-form {
    display: flex;
    flex-direction: column;
    /* flex-basis: 78%; Removed to allow form to grow */
    /* overflow: hidden; Removed to allow form to grow */
}

section.input-block {
    background-color: white;
    padding: 0.5em;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; Removed to allow block to grow */
    margin-bottom: 0.5em;
    box-sizing: border-box;
}

#environment-input-block {
    /* flex-basis: calc(35 / 78 * 100%); Removed to allow block to grow */
}

#person-input-block {
    /* flex-basis: calc(35 / 78 * 100%); Removed to allow block to grow */
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

/* Added for L1/L2 separator */
#env-buttons-row1,
#person-buttons-row1 {
    border-bottom: 1px solid #e0e0e0; /* Thin light gray line */
    padding-bottom: 0.75em;   /* Space for the line */
    margin-bottom: 0.75em;    /* Space after the line before L2 buttons start */
}

.form-group select,
.form-group input[type="text"]
{
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

button#generate-btn {
    background-color: #003863;
    color: #f4f4f9;
    padding: 0.8em 1.2em;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: background-color 0.2s ease;
    margin-top: 0.5em;
    margin-bottom: 0;
    flex-basis: calc(8 / 78 * 100%);
    height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

button#generate-btn:hover {
    background-color: #002a4b;
}

button#generate-btn:active {
    background-color: #001f38;
}

#opener-result {
    background-color: #e9ecef;
    padding: 1em;
    border-radius: 4px;
    min-height: 50px;
    border: 1px dashed #ccc;
}

#opener-result p {
    font-style: italic;
    color: #555;
}

/* Button Row Styles */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.75em; /* Add some space below each button row */
}

.button-row button {
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button-row button:hover {
    background-color: #e9e9e9;
    border-color: #bbb;
}

.button-row button.selected {
    background-color: #003863; /* Same as header */
    color: #f4f4f9;
    border-color: #002a4b;
}

.button-row.incomplete {
    border: 1px dashed red;
    padding: 0.5em;
    border-radius: 4px;
}

#output-section {
    background-color: white;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-basis: 22%;
    overflow-y: auto;
    margin-top: 1em;
    margin-bottom: 0;
    box-sizing: border-box;
}

#phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 210px; /* Approximate width of an iPhone notch */
    height: 30px; /* Approximate height of an iPhone notch */
    background-color: black;
    border-bottom-left-radius: 20px; /* Curved bottom edges */
    border-bottom-right-radius: 20px;
    z-index: 1000; /* Ensure it's on top of other content */
    pointer-events: none; /* Optional: if you want clicks to pass through */
}

/* Sidebar Styles */
.sidebar {
    height: 100%;
    width: 250px;
    position: absolute; /* Changed from fixed to absolute */
    z-index: 2000; /* Higher than notch */
    top: 0;
    right: -250px; /* Initially off-screen, relative to body */
    background-color: #002a4b; /* Slightly darker than header */
    overflow-x: hidden;
    /* transition: 0.3s ease-in-out; Old transition */
    transition: right 0.3s ease-in-out, visibility 0s linear 0.3s; /* Delay hiding visibility */
    padding-top: 60px; /* Space for close button or content */
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    visibility: hidden; /* Hidden by default */
}

.sidebar-open {
    right: 0; /* Slide in, relative to body */
    visibility: visible;
    transition: right 0.3s ease-in-out, visibility 0s linear 0s; /* Show visibility immediately */
}

.sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1.1em;
    color: #f4f4f9;
    display: block;
    transition: 0.2s;
}

.sidebar a:hover {
    background-color: #003863;
}

#sidebar-close-btn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    color: #f4f4f9;
}

/* Grey out Account and Saved */
#menu-account,
#menu-saved {
    color: #a0a0a0; /* Greyed out text */
    pointer-events: none; /* Disable clicks for now */
    cursor: default;
}

#about-page-content {
    height: calc(90% - 2em); /* Full main area height minus padding */
    overflow-y: auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Toggle Bar Styles */
#toggle-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.75em;
    background-color: #e9ecef; /* Light grey, similar to opener-result */
    border-radius: 8px;
    margin-bottom: 0.5em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#toggle-bar-label {
    font-weight: bold;
    color: #333;
}

#toggle-inputs-btn {
    padding: 0.3em 0.6em;
    font-size: 0.9em;
    background-color: #003863;
    color: #f4f4f9;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#toggle-inputs-btn:hover {
    background-color: #002a4b;
}

#about-text-container p {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 0.9em;
}