/* static/css/prompt_editor.css */

.chat-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
}

#chat-history {
    flex-grow: 1;
    flex-basis: 0; 
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    overflow-y: auto;
    background-color: #fdfdfd; /* Background of the entire chat area */
    line-height: 1.6;
    box-sizing: border-box;
}

#chat-history > div { /* Direct message divs */
    margin-bottom: 12px;
    padding: 10px 15px;
    border-radius: 15px; /* Bubble effect */
    max-width: 75%; /* Limit message width */
    word-wrap: break-word;
    position: relative; /* For potential future elements like timestamps */
}
#chat-history .user-message {
     background-color: #d1e7fd; /* Lighter blue */
     color: #0a58ca;
     border-bottom-right-radius: 5px; /* Flat corner */
     margin-left: auto; /* Push to right */
     text-align: left; /* Keep text left-aligned */
}
#chat-history .assistant-message {
    background-color: transparent; /* 1. No background color */
    color: #212529; /* New text color for better readability on a light background */
    margin-left: auto;
    margin-right: auto;
}

#chat-history pre { /* Style code blocks */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    color: inherit;                  
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;                /* Keep: for scrolling long code lines */
    white-space: pre;                /* Keep: to preserve whitespace and line breaks */
    margin: 8px 0;                   /* Keep or adjust margin */
    font-family: monospace;          /* Keep: for monospaced font */
    font-size: 0.9em;                /* Keep or adjust font size */
    border: none;                    /* NEW: Explicitly remove any border lines */
}
#chat-history code {
    font-family: monospace; /* Ensure code font */
}
#chat-history pre code.hljs {
    background: none !important; /* Override any background from highlight.js theme if necessary */
    padding: 0 !important; /* Override any padding from highlight.js theme if necessary */
}
.chat-input {
    display: flex;
    gap: 10px;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    flex-shrink: 0; /* Prevent input area from shrinking */
}

.chat-input textarea {
    flex-grow: 1;
    height: 60px;
    resize: none;
    border-radius: 20px; /* Rounded input */
    padding: 10px 15px;
    border: 1px solid #ced4da;
    font-size: 1rem;
}

.chat-input button {
    height: 60px; /* Match textarea */
    margin-top: 0; /* Override default margin */
    border-radius: 20px; /* Rounded button */
    padding: 0 20px; /* Adjust padding */
    flex-shrink: 0; /* Prevent button shrinking */
}


/* Adjust or replace your existing .copy-button styles with something like this: */
.copy-button {
    background: none;          /* Keep it looking like an icon button */
    border: none;              /* No default button border */
    color: #6c757d;            /* Default icon color (adjust as needed) */
    cursor: pointer;
    display: block;            /* Makes the button take its own line */
    font-size: 1em;            /* Icon will inherit this, or size .fas directly */
    line-height: 1;            /* Good for vertical alignment */
    margin-top: 8px;           /* Space above the button, below the message text */
    margin-left: 0;            /* Align to the left edge of its container's content box */
    margin-right: auto;        /* Ensures it doesn't stretch if it were inline-block with space */
    padding: 5px 0;            /* Padding for click area (5px top/bottom, 0 left/right) */
                               /* Remove float: right; */
                               /* Remove margin-left: auto; if it was previously for right alignment */
}

.copy-button:hover {
    color: #007bff;            /* Change icon color on hover */
}

.copy-button .fas {             /* Target the icon itself for specific sizing */
    font-size: 1.1em;          /* Make icon slightly larger */
    vertical-align: middle;    /* Good for alignment */
}

/* Styling for feedback states (Copied/Failed) */
.copy-button.copied-success .fas {
    color: #28a745;            /* Green checkmark */
}

.copy-button.copied-failed .fas {
    color: #dc3545;            /* Red X for error */
}

.copy-button:disabled {        /* When "Copied!" or "Failed!" */
    cursor: default;
}

.extraction-display .column .icon-button { /* Make selector slightly less specific if it was too tied to previous structure */
    background: none;
    border: none;
    color: #495057; 
    padding: 5px;   
    cursor: pointer;
    font-size: 1.1rem; 
    line-height: 1;
    border-radius: 4px; 
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.extraction-display .column .icon-button:hover:not(:disabled) {
    color: #007bff; /* Icon color on hover */
    background-color: #e9ecef; /* Subtle background on hover */
}

.extraction-display .column .icon-button:disabled {
    color: #adb5bd; /* Muted color when disabled */
    cursor: not-allowed;
    background-color: transparent; /* Ensure no background when disabled */
}

/* If the button contains an <i> tag for the icon */
.extraction-display .column .icon-button i {
    vertical-align: middle; /* Helps align the icon nicely */
}

.extraction-display .column > h2 { /* This targets h2s that are DIRECT children of .column */
    flex-shrink: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0; /* This might be the original line source */
    margin-bottom: 10px;
}

/* Styles for the header and button container within the column */
.extraction-display .column > div:first-child h2 { /* Targets the h2 next to the button */
    margin-bottom: 0; /* Removes default bottom margin from h2 if it's inside the flex container */
}

.column-header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px; /* Space between the line and content below */
    border-bottom: 1px solid #e0e0e0; /* The separating line */
    margin-bottom: 10px; /* Space below the line, before the <pre> tag */
}

.column-header-flex-container h2 {
    margin-bottom: 0; /* Remove default bottom margin from h2 */
    border-bottom: none; /* Ensure h2 itself doesn't have a conflicting border */
}

.assistant-message .reasoning-container {
    margin-bottom: 8px;
    padding: 8px;
    background-color: #f7f7f9;
    border-radius: 8px;
    border: 1px solid #e1e1e8;
    overflow: hidden; 
}

.assistant-message details {
    font-size: 0.9em;
    display: block; 
}

.assistant-message summary {
    cursor: pointer;
    font-weight: bold;
    color: #586069; 
    padding: 4px 0;
    outline: none; 
    display: block; 
}

.assistant-message summary:hover {
    color: #0366d6; /* GitHub link blue on hover */
}

.assistant-message summary .reasoning-icon {
    margin-left: 5px;
    font-style: normal; 
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.assistant-message details[open] summary .reasoning-icon {
    transform: rotate(90deg); 
}

.assistant-message .reasoning-tokens { /* This is the <pre> tag */
    margin-top: 8px;
    padding: 10px;
    background-color: #f0f2f5; 
    border: 1px solid #d1d5da;
    border-radius: 6px;
    
    /* --- Core styles for wrapping and scrolling --- */
    white-space: pre-wrap !important;  /* Preserves whitespace, wraps text. !important to ensure override. */
    word-wrap: break-word !important;   /* Breaks long words. !important to ensure override. */
    overflow-wrap: break-word !important; /* More standard version of word-wrap. */
    
    overflow-y: auto;         /* Vertical scrollbar only when needed */
    overflow-x: hidden;       /* Explicitly hide horizontal scrollbar */
    
    max-height: 250px;        /* Or your preferred max height */
    
    color: #24292e; 
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.85em;
    line-height: 1.45;

    /* Ensure the pre itself doesn't try to be wider than its parent <details> element */
    display: block; /* Or width: 100%; though pre is block by default */
    box-sizing: border-box; /* If padding/border would make it overflow */
}

.assistant-message .message-content {
    /* Ensure it's distinct from reasoning if they are visually close */
}