/* =============================
   DESKTOP (DEFAULT) RULES
   ============================= */
/* Hide watermark on main  (copilot reqs jscript to hide it because shadowRoot ) */
/* custom css doesnt work on copilot some changes can be made to theme.json */

.watermark *:not(#my-custom-link) {
  display: none !important;
}

#readme-button {
  display: none !important;
}

#my-custom-link {
  position: static;
  left: unset;
  bottom: unset;
  transform: none;
  z-index: auto;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 6px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: inherit !important;
  visibility: visible !important;
  display: inline;
}
#my-custom-link:hover {
  text-decoration: underline;
}

/* Hide main logo on opening page until we have a replacement */
.chainlit-logo, .logo, img[alt="McSavage"] {
  display: none !important;
  visibility: hidden !important;
}

/* =============================
   MOBILE ONLY RULES
   ============================= */
@media (max-width: 600px) {
  /* MOBILE ONLY: Hide header and header bar buttons */
  #header,
  #header #new-chat-button,
  #header #readme-button,
  #header #theme-toggle {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: none !important;
    border: none !important;
  }
  /* MOBILE ONLY: Hide watermark and custom link */
  .watermark,
  #my-custom-link {
    display: none !important;
  }
  /* MOBILE ONLY: Compact input bar (one row) */
  #message-composer.flex-col {
    flex-direction: row !important;
    align-items: center !important;
    min-height: unset !important;
    height: auto !important;
  }
  /* MOBILE ONLY: Input & button alignment */
  #chat-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 1rem !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #upload-button,
  #upload-button-loading,
  #chat-submit,
  #stop-button {
    margin-left: 4px !important;
    margin-right: 4px !important;
    min-width: 32px !important;
    box-sizing: border-box !important;
  }
  /* MOBILE ONLY: Upload button & icon */
  #upload-button,
  #upload-button-loading {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    box-sizing: border-box !important;
  }
  #upload-button svg {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  /* MOBILE ONLY: Message composer spacing */
  #message-composer {
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
    padding-top: 10px !important;
  }
  /* MOBILE ONLY: Remove extra margin/padding */
  .flex.flex-col.mx-auto.w-full.p-4.pt-0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .relative.flex.flex-col.items-center.gap-2.w-full {
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* MOBILE ONLY: Compact input row */
  #message-composer .flex.items-center.justify-between {
    gap: 4px !important;
  }
  #message-composer .relative.w-full {
    min-height: 40px !important;
    height: auto !important;
  }
}