body {
    padding: 0;
    margin: 0;
}

#unity-container {
    /* Base style, overridden when chat is shown */
    position: fixed;
    width: 100%;
    height: 100%;
}

#unity-canvas {
    width: 100%;
    height: 100%;
    background: #3C393A;
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#unity-logo {
    width: 154px;
    height: 130px;
    background: url('unity-logo-dark.png') no-repeat center;
}

#unity-progress-bar-empty {
    margin-left: auto;
    margin-right: auto;
    width: 141px;
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
    width: 0%;
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-full-dark.png') no-repeat center;
}

#unity-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none;
}

/* ----- WRAPPER LAYOUT ----- */
#aira-wrapper {
    display: flex;
    flex-direction: column; /* Default: Unity takes full screen, Chat is hidden/stacked */
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Unity column wrapper */
/* NOTE: I assume you have a container around #unity-container called #unity-column, 
          as you reference it later. I've added a default style for it. */
#unity-column {
    flex: 1 1 auto; /* Default for full screen mode */
}

/* ----- CHAT COLUMN ----- */
#chat-column {
    /* Default chat state (e.g., when not .show-chat) */
    flex: 1 1 0;
    min-width: 320px;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    background: #f7f7f8;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
    /* When not in show-chat mode, it should be hidden or stacked vertically */
}

/* ----- CHAT HEADER ----- */
#chat-header {
    padding: 15px;
    font-weight: bold;
    font-size: 16px;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
}

/* ----- CHAT MESSAGES BOX ----- */
#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Bubbles */
.msg-ai {
    align-self: flex-start;
    background: #e8f0ff;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 85%;
    font-size: 14px;
}

.msg-user {
    align-self: flex-end;
    background: #d1ffe0;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 85%;
    font-size: 14px;
}

/* --------------------------------------------------
    TIGHT 9:16 WEBGL + CHAT LAYOUT (MAIN FIX)
-------------------------------------------------- */

/* When chat is visible, make wrapper a strict row */
#aira-wrapper.show-chat {
    display: flex;
    flex-direction: row; /* FIX: Place items side-by-side */
    align-items: stretch;
}

    /* Left side = fixed 9:16 column based on viewport height */
    #aira-wrapper.show-chat #unity-column {
        flex: 0 0 auto; /* no growing, no shrinking */
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Unity container: locked to 9:16 based on Vh (portrait ratio) */
    #aira-wrapper.show-chat #unity-container {
        position: static; /* FIX: Remove fixed position to work within flex parent */
        height: 100vh;
        width: calc(100vh * 9 / 16); /* width = height * 9/16 for 9:16 portrait */
        max-width: 100vw;
        /* The below rules were duplicated and are now consolidated here: */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Make canvas always fit inside its container tightly */
    #aira-wrapper.show-chat #unity-canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    /* Right side = chat takes the rest of the space and is fully visible */
    #aira-wrapper.show-chat #chat-column {
        flex: 1 1 auto; /* FIX: Take all remaining space */
        min-width: 260px;
        opacity: 1; /* FIX: Ensure opacity is 1 */
    }


/* ----- Mobile / narrow: no chat, Unity can use full width ----- */
@media (max-width: 900px) {
    #chat-column {
        display: none !important;
    }

    /* Let Unity behave as normal full-width mobile canvas */
    #unity-column {
        flex: 1 1 auto;
        height: 100vh;
    }

    #unity-container {
        /* Reset for full screen mobile display */
        position: fixed;
        width: 100%;
        height: 100%;
        aspect-ratio: auto; /* Allow non-9:16 aspect ratio */
    }

    #unity-canvas {
        width: 100% !important;
        height: 100% !important;
    }
}


/* --------------------------------------------------
    AIRA DARK MODE
    (Kept all dark mode rules as-is)
-------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    body {
        background: #0d0d0f;
        color: #e8e8e8;
    }

    #aira-wrapper {
        background: #0d0d0f;
    }

    /* Unity column wrapper */
    #unity-column {
        background: #0d0d0f;
    }

    /* Chat column background */
    #chat-column {
        background: #151517;
        border-left: 1px solid #2e2e33;
    }

    /* Chat header */
    #chat-header {
        background: #151517;
        color: #ffffff;
        border-bottom: 1px solid #2e2e33;
    }

    /* Chat message bubbles */
    .msg-ai {
        background: #1f1f22;
        color: #cfd8ff;
    }

    .msg-user {
        background: #223328;
        color: #d4ffe2;
    }

    /* Scrollbar styling */
    #chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    #chat-messages::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
    }

    #chat-messages::-webkit-scrollbar-track {
        background: #1a1a1c;
    }

    /* Unity warning messages */
    #unity-warning div {
        background: #331111 !important; /* error */
        color: #ffb3b3;
    }

    /* Loading bar background adjustments */
    #unity-loading-bar {
        background: #151517;
    }

    #unity-progress-bar-empty {
        background-color: #222;
    }

    #unity-progress-bar-full {
        background-color: #4d9aff;
    }
}