/* --- Ensure message container has relative positioning --- */
.message {
    /* ... other styles like padding, border-radius, max-width ... */
    position: relative; /* Needed to position the copy button inside */
    word-wrap: break-word;
    line-height: 1.4;
    /* Add padding to the right ONLY for bot messages below */
}

.bot-message {
    /* ... other styles like background-color, align-self ... */
    background-color: #e5e5ea;
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    /* Add padding on the right to make space for the button */
    padding-right: 50px; /* Adjust as needed */
}

.user-message {
     /* ... other styles ... */
     /* User messages don't need the extra right padding */
     padding-right: 15px; /* Default padding */
}


/* --- Styles for the Copy Button --- */
.copy-button {
    position: absolute; /* Position relative to the parent (.message) */
    top: 8px;           /* Distance from the top */
    right: 8px;          /* Distance from the right */
    background-color: rgba(0, 0, 0, 0.1); /* Subtle background */
    border: none;
    color: #333;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85em; /* Adjust size */
    cursor: pointer;
    opacity: 0.6; /* Make it slightly transparent until hover */
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10; /* Ensure it's clickable */
}

/* Show button more clearly when hovering over the message */
.message:hover .copy-button {
    opacity: 1;
}

.copy-button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.copy-button:active {
     background-color: rgba(0, 0, 0, 0.3);
}
/* --- End Copy Button Styles --- */


/* --- Make sure other styles are present --- */
/* (Include the body, .chat-container, .chat-header, .chat-messages, .system-message, .chat-input-area styles etc. from previous versions) */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; background-color: #f4f7f6; padding: 20px; min-height: 100vh; }
.chat-container { width: 90%; max-width: 1400px; height: 92vh; margin: 0 auto; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; }
.chat-header { background-color: #4a90e2; color: white; padding: 15px 20px; text-align: center; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.chat-header h2 { margin: 0; font-size: 1.2em; }
.chat-header small { font-size: 0.8em; opacity: 0.8; }
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.system-message { font-style: italic; color: #888; font-size: 0.9em; text-align: center; align-self: center; background-color: transparent; padding-right: 15px; }
.user-message { background-color: #dcf8c6; align-self: flex-end; border-bottom-right-radius: 5px; /* padding-right set above */ }
.chat-input-area { display: flex; padding: 15px; border-top: 1px solid #ddd; background-color: #f9f9f9; align-items: flex-end; flex-shrink: 0; }
#message-input { flex-grow: 1; padding: 10px 15px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; resize: none; overflow-y: auto; max-height: 100px; font-size: 1em; line-height: 1.4; }
#send-button, .file-input-label { padding: 10px 15px; border: none; background-color: #4a90e2; color: white; border-radius: 50%; cursor: pointer; font-size: 1.2em; height: 44px; width: 44px; display: flex; justify-content: center; align-items: center; margin-left: 5px; transition: background-color 0.2s ease; flex-shrink: 0; }
.file-input-label { background-color: #777; }
#send-button:hover, .file-input-label:hover { background-color: #357abd; }
.file-input-label:hover { background-color: #555; }
.loading { text-align: center; padding: 5px; font-style: italic; color: #555; background-color: #f0f0f0; font-size: 0.9em; flex-shrink: 0; }
textarea { overflow: hidden; }