/* styles.css */
:root {
    --primary-font-family: gibson, Helvetica, Arial, sans-serif;

    --color-background-body: #f5f5f5;
    --color-background-container: #ffffff;
    --color-background-user-message: #0066cc;
    --color-background-system-message: #f5f7f9;
    --color-background-button-primary: #0066cc;
    --color-background-button-primary-hover: #0055aa;
    --color-background-button-disabled: #ccc;
    --color-background-modal: #ffffff;
    --color-background-reason-button: #f5f7f9;
    --color-background-reason-button-hover: #e9f0f7;
    --color-background-reason-button-selected: #0066cc;
    --color-background-sources-button-hover: rgba(0, 102, 204, 0.1);
    --color-background-sources-button-active: rgba(0, 102, 204, 0.15);
    --color-background-sources-container: rgba(245, 247, 249, 0.5);
    --color-background-feedback-button-hover: rgba(0, 0, 0, 0.05);

    --color-text-light: #ffffff;
    --color-text-dark: #333333;
    --color-text-primary: #0066cc;
    --color-text-secondary: #666;
    --color-text-subtle: #444;
    --color-text-feedback-button: #888;
    --color-text-error: #dc3545;
    --color-text-success-hover: #28a745;


    --color-border-primary: #ddd;
    --color-border-secondary: #e0e0e0;
    --color-border-button-primary-hover: #0055aa;
    --color-border-button-disabled: #bbb;
    --color-border-sources: #0066cc;
    --color-border-citation: black;

    --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 5px 15px rgba(0, 0, 0, 0.2);

    --border-radius-standard: 15px;
    --border-radius-small: 5px;
    --border-radius-button: 20px;
    --border-radius-circle: 50%;
    --border-radius-modal: 8px;
    --border-radius-inner-elements: 6px;
    --border-radius-citation: 3px;

    --font-size-base: 16px;
    --font-size-small: 0.9em;
    --font-size-xsmall: 0.85em;
    --font-size-citation: 0.7em;
    --font-size-modal-title: 1.3em;

    --spacing-small: 5px;
    --spacing-medium: 10px;
    --spacing-large: 15px;
    --spacing-xlarge: 20px;

    --z-index-modal: 1000;
    --z-index-button-fixed: 1000; /* Same as modal, ensure it's intended or adjust */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
}

body {
    background-color: var(--color-background-body);
    height: 100vh;
    margin: 0;
    padding: 0;
}

.chat-container {
    width: 100%;
    height: 100vh;
    background-color: var(--color-background-container);
    display: flex;
    flex-direction: column;
    position: relative;
}

#new-conversation-button {
    position: fixed;
    top: var(--spacing-large);
    right: var(--spacing-large);
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-circle);
    background-color: var(--color-background-button-primary);
    color: var(--color-text-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-index-button-fixed);
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: var(--shadow-button);
    padding: 6px;
    opacity: 0.85;
}

#new-conversation-button:hover {
    background-color: var(--color-background-button-primary-hover);
    transform: scale(1.05);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xlarge);
    padding-top: 50px; /* Add extra padding at the top to avoid overlapping with the new conversation button */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
}

.user-message, .system-message {
    max-width: 80%;
    padding: 12px var(--spacing-large);
    border-radius: var(--border-radius-standard);
    word-wrap: break-word;
    margin: var(--spacing-small) 0;
}

.user-message {
    align-self: flex-end;
    background-color: var(--color-background-user-message);
    color: var(--color-text-light);
    border-bottom-right-radius: var(--border-radius-small);
}

.system-message {
    align-self: flex-start;
    background-color: var(--color-background-system-message);
    color: var(--color-text-dark);
    border-bottom-left-radius: var(--border-radius-small);
}

.chat-input {
    padding: var(--spacing-large);
    border-top: 1px solid var(--color-border-primary);
}

#chat-form {
    display: flex;
    gap: var(--spacing-medium);
}

#user-message {
    flex: 1;
    padding: 12px var(--spacing-large);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-button);
    outline: none;
    font-size: var(--font-size-base);
}

#send-button {
    background-color: var(--color-background-button-primary);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--border-radius-circle);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#send-button:hover {
    background-color: var(--color-background-button-primary-hover);
}

#send-button svg {
    width: 20px;
    height: 20px;
}

.typing-indicator {
    align-self: flex-start;
    background-color: var(--color-background-system-message);
    color: var(--color-text-dark);
    padding: 12px var(--spacing-large);
    border-radius: var(--border-radius-standard);
    border-bottom-left-radius: var(--border-radius-small);
    max-width: 80%;
    margin: var(--spacing-small) 0;
}

.typing-dots {
    display: inline-block;
}

.typing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--border-radius-circle);
    background-color: var(--color-text-secondary);
    margin-right: 3px;
    animation: pulse 1.5s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.25s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

/* Citation styles */
.system-message p a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: normal;
}

.system-message p a:hover {
    text-decoration: underline;
}

/* Styled boxed citation numbers */
.citation-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-citation);
    background-color: var(--color-background-container); /* Assuming white background for citation marker */
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--border-radius-citation);
    border: 1px solid var(--color-border-citation);
    vertical-align: super;
    cursor: pointer;
    text-decoration: none;
    margin: 0px 3px 0px 0px;
}

.source-list-marker {
    margin-right: var(--spacing-small);
}

.sources {
    margin-top: var(--spacing-small);
    font-size: var(--font-size-small);
    background-color: var(--color-background-system-message);
    border-left: 3px solid var(--color-border-sources);
    padding: 8px 12px;
}

.sources p {
    font-weight: 600;
    margin-bottom: 5px;
}

.sources ul {
    list-style-type: none;
    margin-left: 5px;
}

.sources li {
    margin: 3px 0;
    line-height: 1.4;
    color: var(--color-text-subtle);
}

/* Styles for the new sources button and container */
.sources-button {
    background-color: transparent;
    color: var(--color-text-primary);
    border: none;
    padding: var(--spacing-small) var(--spacing-medium);
    margin-top: 8px;
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: 500;
    display: inline-block;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.sources-button:hover {
    background-color: var(--color-background-sources-button-hover);
}

.sources-button.active {
    background-color: var(--color-background-sources-button-active);
}

.sources-container {
    margin-top: 8px;
    padding: var(--spacing-medium);
    border-top: 1px solid var(--color-border-secondary);
    background-color: var(--color-background-sources-container);
    border-radius: 0 0 var(--border-radius-inner-elements) var(--border-radius-inner-elements); /* Assuming 8px was intended for inner elements */
}

.sources-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sources-container li {
    margin: 8px 0;
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.sources-container li a {
    color: var(--color-text-primary);
    text-decoration: none;
    margin-left: 8px;
}

.sources-container li a:hover {
    text-decoration: underline;
}

/* Message footer and feedback styles */
.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-medium);
}

.feedback-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    margin-left: auto;
}

.feedback-button {
    background: none;
    border: none;
    padding: var(--spacing-small);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-feedback-button);
}

.feedback-button:hover {
    background-color: var(--color-background-feedback-button-hover);
    color: var(--color-text-subtle);
}

.thumbs-up:hover {
    color: var(--color-text-success-hover);
}

.thumbs-down:hover {
    color: var(--color-text-error);
}

.feedback-submitted {
    font-size: var(--font-size-xsmall);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Error states and status messages */
.feedback-error {
    font-size: var(--font-size-xsmall);
    color: var(--color-text-error);
    font-style: italic;
    margin-left: 8px;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--color-background-modal);
    border-radius: var(--border-radius-modal);
    padding: var(--spacing-xlarge);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-modal);
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.close-modal {
    position: absolute;
    top: var(--spacing-medium);
    right: var(--spacing-large);
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.modal h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-xlarge);
    font-size: var(--font-size-modal-title);
    color: var(--color-text-dark);
}

.feedback-reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xlarge);
}

.reason-button {
    padding: var(--spacing-medium);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-inner-elements);
    background-color: var(--color-background-reason-button);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-size: var(--font-size-small);
}

.reason-button:hover {
    background-color: var(--color-background-reason-button-hover);
}

.reason-button.selected {
    background-color: var(--color-background-reason-button-selected);
    color: var(--color-text-light);
    border-color: var(--color-border-button-primary-hover);
}

.feedback-comment {
    margin-bottom: var(--spacing-xlarge);
}

.feedback-comment label {
    display: block;
    margin-bottom: var(--spacing-small);
    font-size: var(--font-size-small);
    color: #555; /* Consider making this a variable if used elsewhere */
}

#feedback-comment-input {
    width: 100%;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-inner-elements);
    resize: vertical;
    font-family: inherit;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-medium);
}

.modal-button {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-small);
}

.modal-button.cancel {
    background-color: transparent;
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

.modal-button.submit {
    background-color: var(--color-background-button-primary);
    border: 1px solid var(--color-border-button-primary-hover);
    color: var(--color-text-light);
}

.modal-button.submit:disabled {
    background-color: var(--color-background-button-disabled);
    border-color: var(--color-border-button-disabled);
    cursor: not-allowed;
}

/* Better responsive design for modal */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 15px;
        margin: 10px;
    }
    
    .feedback-reasons {
        grid-template-columns: 1fr;
    }
    
    .reason-button {
        padding: 12px;
        font-size: 0.9em;
    }
}

/* Loading states */
.sources-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Better accessibility */
.feedback-button:focus,
.sources-button:focus,
.modal-button:focus {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

/* Smooth transitions */
.sources-container {
    transition: all 0.2s ease-in-out;
}

.feedback-button {
    transition: all 0.2s ease;
}

.system-message h1 {
    font-size: 1.1em;
}

.system-message h2 {
    font-size: 1.05em;
}

.system-message h3,
.system-message h4,
.system-message h5,
.system-message h6 {
    font-size: 1em;
}