/* Container for the whole chatbot */
#pgc-chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; /* Ensure it stays above other elements */
    font-family: Arial, sans-serif;
}

/* Floating Toggle Button */
#pgc-chat-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0073aa; /* WordPress Blue */
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: background-color 0.3s;
}

#pgc-chat-toggle-btn:hover {
    background-color: #005177;
}

/* Main Chat Window */
#pgc-chat-window {
    width: 300px;
    height: 400px;
    position: absolute;
    bottom: 70px;
    right: 0;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Header */
#pgc-chat-header {
    background-color: #0073aa;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

/* Chat Body (Messages) */
#pgc-chat-body {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: white;
}

/* Message Styles */
.pgc-message {
    padding: 8px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 80%;
    word-wrap: break-word;
    line-height: 1.4;
}

.user-message {
    background-color: #0073aa;
    color: white;
    margin-left: auto; /* Aligns to the right */
    border-bottom-right-radius: 2px;
}

.bot-message {
    background-color: #e2e2e2;
    color: #333;
    margin-right: auto; /* Aligns to the left */
    border-bottom-left-radius: 2px;
}

/* Input and Send Area */
#pgc-chat-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #fff;
}

#pgc-chat-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
}

#pgc-chat-send-btn {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
}

#pgc-chat-send-btn:disabled {
    background-color: #90ee90;
    cursor: not-allowed;
}

That's a great next step! Now that the core functionality is solid, focusing on the User Interface (UI) and User Experience (UX) is crucial. We can absolutely improve the look, readability, and responsiveness of the chat widget using a mix of CSS and JavaScript enhancements.

Here is how we can implement those UI/UX improvements.

🎨 Phase 1: Improving Readability (CSS)
The simplest way to improve readability is to ensure the AI's answers use standard HTML markup and better spacing. Since the Gemini API usually returns text with Markdown formatting (like **bold** and line breaks), we need to handle that and adjust the spacing.

1. CSS for Better Spacing and Long Answers
Open your primary stylesheet file: wp-content/plugins/postnow-gemini-chat/css/postnow-chat.css. We'll add styles to properly format paragraphs and lists, and to prevent excessively long message boxes.

CSS

/* --- EXISTING STYLES (Keep these) --- */
/* ... */

/* --- NEW STYLES FOR READABILITY AND SCROLLING --- */

/* Ensures the chat window is tall enough to limit scrolling of the whole page */
#pgc-chat-window {
    width: 380px; /* Increased size */
    height: 500px; /* Increased size */
    max-height: 80vh; /* Responsive sizing */
    /* ... existing styles like position: absolute, etc. ... */
}

/* Style for the chat body, ensuring only it scrolls */
#pgc-chat-body {
    flex-grow: 1;
    padding: 15px; /* Increased padding */
    overflow-y: auto; /* Essential: Only the chat history scrolls */
    background-color: #fcfcfc; /* A slight color change for the background */
}

/* Message container size adjustment */
.pgc-message {
    max-width: 90%; /* Allow messages to take up more space */
    margin-bottom: 15px; /* More vertical space between messages */
    line-height: 1.5; /* Increased line height for easy reading */
}

/* Style for rendered paragraphs inside the bot message */
.bot-message p {
    margin-top: 0.5em; /* Spacing between paragraphs */
    margin-bottom: 0.8em;
}

/* Style for rendered lists */
.bot-message ul,
.bot-message ol {
    padding-left: 20px;
    margin-bottom: 0.8em;
}

/* Style for a temporary 'typing' indicator */
.bot-message.bot-typing {
    font-style: italic;
    color: #888;
    background-color: #eee;
    animation: pulse 1.5s infinite;
}

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