/* ============================================
   CHAINLIT CUSTOM STYLES
   ============================================ */

/* Hide readme and theme buttons */
#readme-button {
    display: none !important;
}

#theme-toggle {
    display: none !important;
}

/* ============================================
   MARKDOWN HEADING SIZE CONSTRAINTS
   Prevent large headers from causing overflow
   ============================================ */

/* Target markdown headings within chat messages */
[class*="step"] h1,
[class*="message"] h1,
[class*="markdown"] h1 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

[class*="step"] h2,
[class*="message"] h2,
[class*="markdown"] h2 {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
    font-weight: 600 !important;
    margin-top: 0.625rem !important;
    margin-bottom: 0.375rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

[class*="step"] h3,
[class*="message"] h3,
[class*="markdown"] h3 {
    font-size: 1rem !important;
    line-height: 1.375rem !important;
    font-weight: 600 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.25rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

[class*="step"] h4,
[class*="step"] h5,
[class*="step"] h6,
[class*="message"] h4,
[class*="message"] h5,
[class*="message"] h6,
[class*="markdown"] h4,
[class*="markdown"] h5,
[class*="markdown"] h6 {
    font-size: 0.9375rem !important;
    line-height: 1.25rem !important;
    font-weight: 600 !important;
    margin-top: 0.375rem !important;
    margin-bottom: 0.25rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Prevent any text from causing horizontal overflow */
[class*="step"],
[class*="message"],
[class*="markdown"] {
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ============================================
   CHAT REFERENCES (FOOTNOTES)
   ============================================ */

.chuqlab-references-footnotes {
    font-size: 0.8rem;
    line-height: 1.25rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.chuqlab-references-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.chuqlab-references-list {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
}

.chuqlab-references-ref {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.chuqlab-references-ref-main {
    min-width: 0;
}

.chuqlab-references-meta {
    opacity: 0.85;
}

.chuqlab-references-play {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: inherit;
    border-radius: 0.4rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}

.chuqlab-references-play:hover {
    border-color: rgba(59, 130, 246, 0.7);
    color: rgba(59, 130, 246, 1);
}

.chuqlab-references-excerpt {
    opacity: 0.85;
    margin-top: 0.15rem;
}


/* ============================================
   MEDIA PLAYER
   ============================================ */

.chuqlab-media-player {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.04);
}

.chuqlab-media-player-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.chuqlab-media-player audio,
.chuqlab-media-player video {
    width: 100%;
    max-width: 520px;
}

/* ============================================
   CASE SELECTION - HIDE INPUT UNTIL CASE SELECTED
   ============================================ */

/* Hide the message composer until a case is selected */
body:not(.case-selected) #message-composer {
    display: none !important;
}


/* ============================================
   LOGIN PAGE STYLING
   ============================================ */

/* Hide the right side image container on login page for centered login */
div.bg-muted.lg\:block {
    display: none !important;
}

/* Center the login form when right side is hidden */
div.grid.min-h-svh.lg\:grid-cols-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure the login container is properly sized and centered */
div.grid.min-h-svh.lg\:grid-cols-2 > div:first-child {
    max-width: 500px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Center the logo on the login page */
div.grid.min-h-svh.lg\:grid-cols-2 img,
div.grid.min-h-svh.lg\:grid-cols-2 [class*="logo"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center all content within the login card */
div.grid.min-h-svh.lg\:grid-cols-2 > div:first-child > div {
    text-align: center !important;
}

/* Center the login button */
div.grid.min-h-svh.lg\:grid-cols-2 button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   TOOL APPROVAL BUTTONS
   Make "Run Tool" button more prominent
   ============================================ */

/* Style action buttons in messages */
[class*="step"] button[id^="action-"],
[class*="message"] button[id^="action-"] {
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
}

/* Primary action (Run Tool) - first button gets prominent styling */
[class*="step"] button[id^="action-"]:first-of-type,
[class*="message"] button[id^="action-"]:first-of-type {
    background-color: rgba(59, 130, 246, 0.9) !important;
    color: white !important;
    border: 2px solid rgba(59, 130, 246, 1) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25) !important;
}

[class*="step"] button[id^="action-"]:first-of-type:hover,
[class*="message"] button[id^="action-"]:first-of-type:hover {
    background-color: rgba(37, 99, 235, 1) !important;
    border-color: rgba(37, 99, 235, 1) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.35) !important;
}

/* Secondary action (Cancel) - subtle styling */
[class*="step"] button[id^="action-"]:not(:first-of-type),
[class*="message"] button[id^="action-"]:not(:first-of-type) {
    background-color: transparent !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    color: inherit !important;
}

[class*="step"] button[id^="action-"]:not(:first-of-type):hover,
[class*="message"] button[id^="action-"]:not(:first-of-type):hover {
    background-color: rgba(148, 163, 184, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.8) !important;
}

/* ============================================
   EULA ACCEPT BUTTON
   Applied via JS (Chainlit uses random UUIDs
   for button IDs, so we add this class from
   custom.js based on button text content)
   ============================================ */

.eula-accept-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    margin: 1rem auto 0 !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    border: 2px solid rgba(16, 185, 129, 1) !important;
    border-radius: 0.625rem !important;
    background-color: rgba(16, 185, 129, 0.9) !important;
    color: white !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.2s ease !important;
}

.eula-accept-btn:hover {
    background-color: rgba(5, 150, 105, 1) !important;
    border-color: rgba(5, 150, 105, 1) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px) !important;
}