/* Custom CSS for Kiso MVP */

/* Make the sidebar 50% of the screen width */
:root {
    --sidebar-width: 50vw !important;  /* 50% of viewport width */
}

/* For mobile devices - keep it full width minus some margin */
@media (max-width: 768px) {
    :root {
        --sidebar-width: calc(100vw - 4rem) !important;
    }
}

/* Make chat message text slightly smaller and more compact */
/* Target the prose container that Chainlit uses */
.prose,
.prose.lg\:prose-xl {
    font-size: 14px !important;
    max-width: none !important;
}

/* Adjust line height for paragraphs */
.prose .leading-7,
.prose div[role="article"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Smaller headings in chat */
.prose h1 {
    font-size: 1.3rem !important;
    margin-top: 0.75rem !important;
}

.prose h2 {
    font-size: 1.15rem !important;
    margin-top: 0.75rem !important;
}

.prose h3 {
    font-size: 1rem !important;
    margin-top: 0.5rem !important;
}

/* More compact lists */
.prose ul,
.prose ol {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.prose li {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Reduce vertical spacing between elements */
.prose [class*="mt-"]:not(:first-child) {
    margin-top: 0.5rem !important;
}

/* Fix alignment - reduce top margin of first element */
.prose > *:first-child {
    margin-top: 0 !important;
}

/* Also fix the flex container padding if needed */
.flex.flex-col.gap-4 {
    gap: 0.75rem !important;
}

/* Make bold text slightly less heavy */
.prose .font-bold,
.prose strong {
    font-weight: 600 !important;
}

/* ===== Sidebar Element Stacking (Word/Excel Style) ===== */
/* Chainlit wraps custom elements - we need to target those wrappers */

/* Target Chainlit's element wrapper divs in sidebar */
div[data-testid*="element"] {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

/* Also target any step or message containers in sidebar */
aside div[class*="step"],
aside div[class*="message"],
aside > div > div {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Force sidebar to use flex-start alignment */
aside,
aside > div,
div[role="complementary"],
div[role="complementary"] > div {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
}