/* CSS Document for Izumi's Home */

/* Basic Setup */
body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #1a1a1a;
    color: #e0e0e0;
    display: flex;
    /* Use flexbox to center the main container */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.gemini-message {
    background-color: rgba(30, 30, 40, 0.8);
    /* Deep transparent dark */
    color: #e0e0e0;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.user-message {
    background-color: rgba(10, 10, 15, 0.6);
    /* Even darker for user */
    color: #f0f0f0;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

/* Main two-pane layout container */
#app-container {
    display: flex;
    padding: 10px;
    height: calc(100vh - 40px);
    /* Adjust height to leave some padding */
    width: 100%;
    max-width: 1600px;
    /* Set a max width for very large screens */
    justify-content: center;
    gap: 20px;
}


/* Workspace Area — v2: 全寬聊天 */
#workspace-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* gemini-chat-window 填滿 workspace */
gemini-chat-window {
    flex-grow: 1;
    width: 100%;
    min-height: 0;
}


gemini-chat-window {
    flex-grow: 1;
}


/* Agent Gallery Layout */
.message.gemini-message {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.message.gemini-message>.msg-text {
    flex: 1 1 auto;
    min-width: 0;
}

.message.gemini-message>.msg-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 45%;
    max-width: 300px;
    position: relative;
}

/* Agent Inline Image Rendering */
.msg-gallery .agent-inline-image {
    width: 100%;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4);
    /* Prevents transparent overlaps */
    cursor: zoom-in;
    animation: fadeInImage 0.6s ease;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0.3s, margin 0.3s;
    position: relative;
}

.msg-gallery .agent-inline-image~.agent-inline-image {
    margin-top: -160px;
    /* Overlap effect */
}

.msg-gallery .agent-inline-image:hover {
    z-index: 100 !important;
    transform: translateY(-20px) scale(1.05);
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}