/* Your home page styles */

    body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0px auto;
            background: #f9f9f9;
            line-height: 1.7;
            color: #333;
            padding-top: 0px; /* Was 40px */
            padding-right: 20px; 
            padding-left: 20px; 
            padding-bottom: 40px;
        }

    .chat-container { 
        display: flex; 
        flex-direction: column; 
        max-width: 1000px; 
        margin: 0 auto; 
        box-sizing: border-box; 
    }
    .logo-container { 
        text-align: center; 
        margin-bottom: 30px;
        background: #ffffff;
        padding: 20px 10px 20px 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    }
    .logo-container img { 
        width: 25%; 
        height: auto; 
        max-width: 300px; 
    }
    .input-container { 
        display: flex; 
        flex-direction: column; 
        gap: 20px; 
        margin-bottom: 20px; 
        padding: 30px;
        border: 1px solid #ddd;
        border-radius: 8px; 
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    }
    #userInput { 
        width: 100%; 
        height: 100px; 
        padding: 15px; 
        border: 1px solid #ddd; 
        border-radius: 8px;
        font-size: 16px; 
        resize: vertical; 
        box-sizing: border-box; 
        white-space: pre-wrap; 
        word-wrap: break-word;
        background: #fafafa;
    }
    .file-upload-area { 
        border: 2px dashed #ddd; 
        border-radius: 8px;
        padding: 0% 5% 0% 5%; 
        text-align: center; 
        background: #f8f9fa; 
        cursor: pointer; 
        transition: all 0.3s ease;
    }
    .file-upload-area:hover, .file-upload-area.dragover { 
        background: #f3f4f6; 
        border-color: #ccc;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    #fileInput { display: none; }
    #fileList { 
        list-style: none; 
        padding: 0; 
        margin: 0; 
        max-height: 100px; 
        overflow-y: auto; 
    }
    .file-item { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 10px 15px; 
        background: #ffffff; 
        margin: 8px 0; 
        border-radius: 8px;
        border: 1px solid #eee;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .remove-file { 
        background: #dc3545; 
        color: white; 
        border: none; 
        padding: 6px 12px; 
        border-radius: 6px;
        cursor: pointer; 
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(220,53,69,0.2);
        transition: all 0.2s ease;
    }
    .remove-file:hover { 
        background: #c82333; 
        box-shadow: 0 3px 8px rgba(220,53,69,0.3);
        transform: translateY(-1px);
    }
    .button-row { 
        display: flex; 
        gap: 12px; 
        align-items: center; 
        flex-wrap: wrap; 
    }
/* Base button styles for all main buttons */
#sendBtn, #downloadBtn, #downloadPdfBtn, #uploadBtn, #logicBtn, #historyBtn, #blueprintDataBtn, #blueprintBtn, #snapshotBtn, #snapshotHistoryBtn, #rawJsonBtn {  
    padding: 6px 10px; 
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 400;
    transition: all 0.2s ease;
    background: #ffffff;
}

.copy-btn {
    margin: 8px 0 0 8px;
    padding: 6px 10px; 
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 400;
    transition: all 0.2s ease;
    background: #ffffff;
}
.copy-btn:hover {
    background: #0056b3;
}
.copy-btn:active {
    background: #004085;
}
.message {
    position: relative; /* so button stays inside message */
}

    #sendBtn { 
        color: #17a2b8;
    }
    #sendBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
    #sendBtn:disabled { 
        background: #f8f9fa; 
        color: #999; 
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }
    #downloadBtn { 
        color: #17a2b8;
    }
    #downloadBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
    #downloadPdfBtn { 
        color: #17a2b8;
    }
    #downloadPdfBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
    #uploadBtn { 
        color: #17a2b8;
    }
    #uploadBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
    #logicBtn { 
        color: #17a2b8;
    }
    #logicBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
    #historyBtn { 
        color: #17a2b8;
    }
    #historyBtn:hover:not(:disabled) { 
        background: #17a2b8; 
        color: white;
        border-color: #17a2b8;
        box-shadow: 0 4px 12px rgba(23,162,184,0.2);
        transform: translateY(-2px);
    }
#blueprintDataBtn { 
    color: #17a2b8;
}
#blueprintDataBtn:hover:not(:disabled) { 
    background: #17a2b8; 
    color: white;
    border-color: #17a2b8;
    box-shadow: 0 4px 12px rgba(23,162,184,0.2);
    transform: translateY(-2px);
}
#blueprintBtn { 
    color: #17a2b8;
}
#blueprintBtn:hover:not(:disabled) { 
    background: #17a2b8; 
    color: white;
    border-color: #17a2b8;
    box-shadow: 0 4px 12px rgba(23,162,184,0.2);
    transform: translateY(-2px);
}

#snapshotBtn { 
    color: #17a2b8;
}
#snapshotBtn:hover:not(:disabled) { 
    background: #17a2b8; 
    color: white;
    border-color: #17a2b8;
    box-shadow: 0 4px 12px rgba(23,162,184,0.2);
    transform: translateY(-2px);
}
#snapshotHistoryBtn { 
    color: #17a2b8;
}
#snapshotHistoryBtn:hover:not(:disabled) { 
    background: #17a2b8; 
    color: white;
    border-color: #17a2b8;
    box-shadow: 0 4px 12px rgba(23,162,184,0.2);
    transform: translateY(-2px);
}



    #downloadBtn:disabled, #downloadPdfBtn:disabled, #uploadBtn:disabled, #logicBtn:disabled, #historyBtn:disabled, #blueprintDataBtn:disabled, #blueprintBtn:disabled, #snapshotBtn:disabled, #snapshotHistoryBtn:disabled, #rawJsonBtn:disabled { 
 
        background: #f8f9fa; 
        color: #6c757d; 
        cursor: not-allowed; 
        opacity: 0.6; 
        box-shadow: none;
        transform: none;
    }

    /* Logic Files Modal */
    .modal { 
        display: none; 
        position: fixed; 
        z-index: 1000; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        background-color: rgba(0,0,0,0.5); 
    }
    .modal-content { 
        background: #ffffff;
        margin: 5% auto; 
        padding: 30px;
        border-radius: 8px;
        width: 90%; 
        max-width: 600px; 
        max-height: 70vh; 
        overflow-y: auto;
        border: 1px solid #ddd;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    .modal-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    .close { 
        color: #999; 
        font-size: 28px; 
        font-weight: 400; 
        cursor: pointer; 
    }
    .close:hover { 
        color: #666; 
    }
    .logic-file-item { 
        display: flex; 
        align-items: center; 
        padding: 15px; 
        border: 1px solid #eee;
        margin-bottom: 12px; 
        border-radius: 8px;
        background: #f8f9fa;
        transition: all 0.2s ease;
    }
    .logic-file-item:hover {
        background: #f3f4f6;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .logic-file-checkbox { 
        margin-right: 15px; 
        transform: scale(1.3); 
    }
    .modal-buttons { 
        display: flex; 
        gap: 12px; 
        justify-content: flex-end; 
        margin-top: 25px; 
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .btn-select { 
        background: #17a2b8; 
        color: white; 
        padding: 12px 24px; 
        border: none; 
        border-radius: 8px;
        cursor: pointer;
        font-weight: 400;
        box-shadow: 0 4px 12px rgba(40,167,69,0.2);
        transition: all 0.2s ease;
    }
    .btn-select:hover:not(:disabled) {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40,167,69,0.3);
    }
    .btn-cancel { 
        background: #6c757d; 
        color: white; 
        padding: 12px 24px; 
        border: none; 
        border-radius: 8px;
        cursor: pointer;
        font-weight: 400;
        box-shadow: 0 2px 8px rgba(108,117,125,0.2);
        transition: all 0.2s ease;
    }
    .btn-cancel:hover {
        background: #5a6268;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108,117,125,0.3);
    }
    .messages-container { 
        height: auto; 
        min-height: 200px; 
        overflow: visible; 
        border: 1px solid #ddd; 
        border-radius: 8px;
        padding: 30px; 
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        line-height: 1.7;
    }
    .message { 
        margin-bottom: 24px; 
    }
    .user-message { 
        background: #007bff; 
        color: white; 
        padding: 16px 20px; 
        border-radius: 12px; 
        text-align: right; 
        margin-left: 20%; 
        display: inline-block; 
        max-width: 80%;
        box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    }
    .query-message { 
        padding: 16px 20px; 
        background: #f8f9fa; 
        border-left: 4px solid #007bff; 
        margin-bottom: 12px; 
        font-size: 16px; 
        line-height: 1.5;
        border-radius: 0 8px 8px 0;
    }
    .divider { 
        height: 1px; 
        background: linear-gradient(to right, transparent, #ddd, transparent); 
        margin: 20px 0; 
    }
    .ai-message { 
        padding: 0; 
        margin: 0 0 24px 0; 
    }
    .thinking { 
        color: #666; 
        font-style: italic; 
    }

    .ai-message h1, .ai-message h2, .ai-message h3, .query-message h1, .query-message h2, .query-message h3 {
        margin: 1.2em 0 0.6em;
        color: #222;
        font-weight: 600;
    }
    .ai-message h1, .query-message h1 { font-size: 1.9em; }
    .ai-message h2, .query-message h2 { font-size: 1.6em; }
    .ai-message h3, .query-message h3 { font-size: 1.4em; }

    .ai-message p, .query-message p { margin: 1em 0; }
    .ai-message ul, .ai-message ol, .query-message ul, .query-message ol { margin: 1.2em 0; padding-left: 2.2em; }
    .ai-message li, .query-message li { margin: 0.5em 0; }
    .ai-message strong, .query-message strong { font-weight: bold; }
    .ai-message em, .query-message em { font-style: italic; }

    @media (max-width: 600px) {
        body { padding: 20px 10px; }
        .input-container { padding: 20px; }
        .logo-container { padding: 20px; }
        .logo-container img { width: 60%; }
        .messages-container { padding: 20px; }
        #userInput { height: 120px; }
        .button-row { flex-direction: column; }
        #sendBtn, #downloadBtn, #downloadPdfBtn, #uploadBtn, #logicBtn, #historyBtn, #blueprintDataBtn, #blueprintBtn { 
         width: 100%; }
        .user-message { margin-left: 0; margin-right: 0; }
        .query-message { margin-left: 0; margin-right: 0; }
        .modal-content { width: 95%; margin: 10% auto; padding: 20px; }
        .logout-btn { position: static; margin: 0 auto 20px; display: block; width: fit-content; }
    }

/* Tagline under the logo */
.tagline {
    margin: 10px 0 0 0;
    padding: 0 40px;
    font-size: 18px;
    color: #17a2b8;
    text-align: center;
    line-height: 1.2;
    font-weight: 400;
}

/* Optional: Slightly tighter on mobile */
@media (max-width: 600px) {
    .tagline {
        padding: 0 20px;
        font-size: 15px;
    }
}