/* ==============================
   BLOOM MIRIAM CUSTOM STYLES
   ============================== */

/* ==============================
   GENERAL ELEMENT HIDING
   ============================== */
.MuiAvatar-root,
#open-sidebar-button,
#upload-button {
    display: none !important;
}

/* ==============================
   HEADER STYLING
   ============================== */
/* Main header container */
#header {
    background: #FFFFFF !important;
    padding: 20px 0 !important;
    position: relative !important;
    z-index: 10 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid #E0E0E0 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode header */
.dark #header {
    background: #161B22 !important;
    /* Match paper color from config.toml */
    border-bottom: 1px solid #30363D !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ==============================
   LOGO STYLING
   ============================== */
/* Hide Chainlit's default logos only (excluding our injected one) */
#header img[alt="logo"]:not(#bloom-miriam-logo-link img),
#header img[src*="logo_light"]:not(#bloom-miriam-logo-link img),
#header img[src*="logo_dark"]:not(#bloom-miriam-logo-link img) {
    display: none !important;
}

/* Ensure our injected logo is ALWAYS visible and swaps correctly */
.bloom-miriam-logo-light {
    display: block !important;
}

.bloom-miriam-logo-dark {
    display: none !important;
}

/* Dark mode logo swap */
.dark .bloom-miriam-logo-light {
    display: none !important;
}

.dark .bloom-miriam-logo-dark {
    display: block !important;
}

/* Ensure #header has relative positioning for the injected logo */
#header {
    position: relative !important;
}

/* Ensure text and icons in header are visible in light mode */
#header * {
    color: #333333 !important;
}

#header button,
#header button svg {
    color: #333333 !important;
    fill: #333333 !important;
}

/* Dark mode text and icons in header */
.dark #header * {
    color: #F0F6FC !important;
}

.dark #header button,
.dark #header button svg {
    color: #8B949E !important;
    fill: #8B949E !important;
}

/* Make sure hamburger menu doesn't overlap with logo */
#header button:first-child {
    margin-left: 180px !important;
}

/* ==============================
   FORM ELEMENTS
   ============================== */
/* Message input styling */
.MuiFormControl-root {
    padding-bottom: 40px !important;
    border-radius: 1.5em !important;
}

/* ==============================
   WATERMARK FOOTER
   ============================== */
/* Watermark container */
.watermark {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    position: relative;
    margin-top: -5px !important;
    margin-bottom: -10px !important;
}

/* Style the clickable link area */
.watermark a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 auto !important;
    z-index: 10;
}

/* Hide original watermark content */
.watermark a p,
.watermark a svg {
    display: none !important;
}

/* Add "Regresar a" text to the link */
.watermark a::before {
    content: "Regresar a";
    font-family: sans-serif;
    font-size: 14px;
    color: #3A0E65;
    display: inline-block;
}

/* Add logo to the watermark link */
.watermark a::after {
    content: "";
    background-image: url('logo_bloom.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 55px;
    height: 27px;
    margin-top: 3px;
    margin-left: 5px;
    display: inline-block;
}