:root {
    --bg-color: #f0f2f5; /* Slightly softer background */
    --container-bg: #ffffff;
    --text-color: #1f2328; /* Darker text for better contrast */
    --primary-color: #0078d4;
    --primary-hover-color: #005a9e;
    --border-color: #d0d7de; /* Softer border */
    --input-bg: #fff;
    --user-msg-bg: #ddeeff; /* Brighter user message */
    --bot-msg-bg: #f6f8fa;
    --code-bg: #ffffff; /* Default dark code background */
    --code-text-color: #f8f8f2;
    --action-button-bg: #f0f2f5;
    --action-button-hover-bg: #e1e4e8;
    --thinking-bg: #f5faff;
    --thinking-border: #c8e1ff;
    --thinking-text: #2a3a4a;
    --footer-text: #57606a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.08);
    --radius-sm: 4px;
    --radius-md: 6px; /* Slightly smaller radius for a sharper look */
    --radius-lg: 8px;
    --transition: 0.2s ease-in-out;
    --input-area-height: 8rem; /* Define input area height as a variable */
    --icon-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    color: var(--text-color);
    line-height: 1.6;
    display: flex; /* For centering if app-container is not full width/height */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    max-height: 100vh; /* Occupy full viewport height */
    background-color: var(--container-bg);
    border-radius: 0; /* No radius for full screen */
    box-shadow: none; /* No shadow for full screen */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header Controls Area */
.controls-area {
    padding: 12px 20px; /* Reduced padding */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Reduced gap */
    align-items: center;
    background-color: #fdfdfd; /* Slightly off-white */
    position: relative;
    flex-shrink: 0; /* Prevent shrinking */
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.controls-area label {
    font-size: 0.75em; /* Smaller label */
    font-weight: 500;
    color: #444;
}

.controls-area select {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    font-size: 0.85em;
    min-width: 150px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.controls-area select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,120,212,0.2);
    outline: none;
}

.new-chat-button {
    margin-left: auto; /* Push to the right if space allows */
    padding: 7px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: background-color var(--transition);
}
.new-chat-button svg { /* Style for the SVG icon in new chat button */
    width: var(--icon-size);
    height: var(--icon-size);
    stroke-width: 2.5;
}

.new-chat-button:hover {
    background-color: var(--primary-hover-color);
}

/* Chat Area */
.output-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    line-height: 1.6; /* Increased line height for readability */
    scroll-behavior: smooth;
    /* IMPORTANT: Add padding-bottom to prevent input area from overlapping */
    padding-bottom: calc(var(--input-area-height) + 1rem); /* input height + buffer */
}

/* Message Bubbles */
.message {
    margin-bottom: 24px;
    padding: 0;
    word-wrap: break-word;
    position: relative;
    max-width: 85%;
    display: flex;
    flex-direction: column;
}

.message .sender-label {
    font-weight: 600; /* Bolder sender label */
    font-size: 0.8em;
    margin-bottom: 5px;
    color: #555;
}

.message.user-message {
    margin-left: auto;
    align-items: flex-end;
}

.message.bot-message {
    margin-right: auto;
    align-items: flex-start;
}

.bot-content-area,
.message.user-message .user-content { /* Combined for shared padding/radius */
    padding: 10px 14px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.message.user-message .user-content {
    background-color: var(--user-msg-bg);
    color: var(--text-color); /* Ensure good contrast */
    border-top-right-radius: 2px; /* Asymmetric radius for user */
}

.message.bot-message .bot-content-area {
    background-color: var(--bot-msg-bg);
    border: 1px solid var(--border-color);
    border-top-left-radius: 2px; /* Asymmetric radius for bot */
}

/* Message Actions (Copy, Regenerate for entire message) */
.message-actions {
    position: absolute;
    bottom: 5px; /* Position inside the message bubble */
    right: 5px;  /* Position inside the message bubble */
    display: none; /* Hidden by default, shown on hover */
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent */
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    z-index: 10;
    transition: opacity 0.15s ease;
}

.message.bot-message:hover .message-actions {
    display: flex; /* Show on hover */
}

.action-button {
    background-color: var(--action-button-bg);
    color: #333;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.75em;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
}
.action-button:hover {
    background-color: var(--action-button-hover-bg);
    border-color: #bbb; /* Darker border on hover */
}
/* Placeholder for icons in action buttons (Copy, Regenerate) */
.action-button.copy-button::before { content: '📄'; margin-right: 4px; /* Example Icon */ }
.action-button.regenerate-button::before { content: '🔄'; margin-right: 4px; /* Example Icon */ }


/* System Messages */
.system-error-message {
    color: #c93742; /* Stronger error color */
    padding: 10px 14px;
    background-color: #ffebe9; /* Error background */
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    border: 1px solid #ffc2c7;
    font-size: 0.9em;
}

/* Thinking Process Box (DeepSeek Reasoning, Tool Calls) */
.thinking-process-box {
    border: 1px dashed var(--thinking-border);
    padding: 12px 14px;
    margin-top: 8px;
    margin-bottom: 12px;
    background-color: var(--thinking-bg);
    border-radius: var(--radius-sm);
    font-size: 0.85em; /* Slightly smaller */
    color: var(--thinking-text);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.thinking-process-box .thinking-step-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 0.95em;
}
.thinking-process-box pre,
.thinking-process-box .reasoning-content-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: rgba(255,255,255,0.8);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid #dde; /* Lighter border for inner pre */
    font-size: 0.9em;
    max-height: 180px;
    overflow-y: auto;
    color: var(--thinking-text);
    margin-top: 5px;
}
.thinking-process-box .reasoning-content-pre {
    background-color: rgba(230, 245, 255, 0.75); /* Distinct for reasoning */
}


/* Initial Steps Info */
.initial-steps-container {
    font-size: 0.85em;
    color: #555;
    margin: 0 20px 10px 20px;
    padding: 8px 12px;
    background-color: #f9f9f9;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent shrinking */
}
.initial-steps-container p { margin: 0.25em 0; }


/* Input Area - Fixed at bottom */
.input-area {
    display: flex;
    align-items: stretch; /* Make items stretch to full height */
    /*padding: 1rem; /* Padding around the input and button */
    height: var(--input-area-height);
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
    position: relative; /* Crucial for absolute positioning of buttons */
    padding: 10px 15px; /* Existing padding, adjust as needed */
    border-top: 1px solid var(--border-color);
    background-color: var(--container-bg);
}

#userInput {
    flex-grow: 1;
    padding: 10px; /* Base padding */
    /* Adjust padding to make space for buttons INSIDE the textarea's visual space */
    /* Values depend on button size and desired spacing */
    padding-right: 50px;  /* Space for send/stop button */
    padding-left: 50px;   /* Space for toolbar */
    /* padding-bottom: 8px; /* Optional: if buttons are very low and text might go under */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1.2em;
    line-height: 1.5;
    resize: none; /* Or vertical, if you prefer */
    min-height: 44px; /* Ensure it's tall enough for buttons if empty */
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#userInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.15); /* Larger focus ring */
}

#sendButton {
    padding: 0 24px; /* Padding for width, height is 100% */
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0; /* Rounded right corners */
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Stretch to fill input-area height */
    box-sizing: border-box;
    transition: background-color var(--transition);
}
#sendButton:hover { background-color: var(--primary-hover-color); }
#sendButton:disabled { background-color: #aaa; cursor: not-allowed; }

.app-footer-internal {
    /* display: none; */ /* REMOVE or COMMENT OUT this line */
    padding: 1px 5px;
    text-align: center;
    font-size: 0.15em;
    color: var(--footer-text);
    background-color: var(--container-bg); /* Or var(--bg-color) for a different shade */
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Crucial for flex layout */
}
/* Basic styling for the new send/stop button if needed */
/* Send/Stop button positioned inside input area */
.send-stop-button {
    position: absolute;
    right: 20px;  /* Adjust based on .input-area padding (15px) + desired gap (5px) */
    bottom: 18px; /* Adjust to vertically center with textarea's typical first line or padding */
    z-index: 2;   /* Ensure it's above the textarea border/content */
    
    /* Existing styles for the button (circular, icon, etc.) */
    background-color: transparent; /* Make it appear more "on" the textarea */
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    width: 36px;  /* Adjust size */
    height: 36px; /* Adjust size */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 0; 
}

.send-stop-button:hover:not(:disabled) {
    background-color: rgba(var(--primary-color-rgb, 0, 120, 212), 0.1); /* Subtle hover */
}
.send-stop-button:disabled {
    color: #aaa; /* Muted color when disabled */
    background-color: transparent;
    cursor: not-allowed;
}
.send-stop-button svg {
    width: 22px; /* Adjust icon size */
    height: 22px;
}


/* Toolbar placeholder in bottom-left of input area */
.input-toolbar {
    position: absolute;
    left: 20px;   /* Adjust based on .input-area padding (15px) + desired gap (5px) */
    bottom: 18px; /* Match sendStopButton's vertical alignment */
    z-index: 2;
    display: flex;
    gap: 8px; /* Space between toolbar items */
}

.toolbar-button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--footer-text); /* Or other appropriate color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.toolbar-button:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb, 0, 120, 212), 0.1);
}
.toolbar-button svg {
    width: 18px;
    height: 18px;
    display: block;
}
/* .app-footer-internal p { margin: 0; line-height: 1.5; } */

/* Markdown Content Styling */
.bot-message .bot-content-area { line-height: 1.65; } /* Slightly more spacing for bot content */
.bot-message .bot-content-area h1,
.bot-message .bot-content-area h2,
.bot-message .bot-content-area h3 {
    margin-top: 1.1em;
    margin-bottom: 0.5em;
    line-height: 1.25;
    font-weight: 600;
}
.bot-message .bot-content-area h1 { font-size: 1.5em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.25em; }
.bot-message .bot-content-area h2 { font-size: 1.3em; }
.bot-message .bot-content-area h3 { font-size: 1.15em; }
.bot-message .bot-content-area p { margin-bottom: 0.9em; }
.bot-message .bot-content-area ul,
.bot-message .bot-content-area ol { margin-left: 20px; margin-bottom: 0.9em; padding-left: 15px; }
.bot-message .bot-content-area li { margin-bottom: 0.35em; }
.bot-message .bot-content-area blockquote {
    margin-left: 0;
    padding: 0.6em 1em;
    border-left: 3px solid var(--primary-color); /* Use primary color for quote border */
    color: #5c6370;
    background-color: #f9f9f9; /* Lighter quote background */
    border-radius: var(--radius-sm);
}

/* Code Blocks Styling */
.bot-message .bot-content-area pre {
    position: relative; /* For copy button positioning */
    background-color: var(--code-bg) !important; /* Ensure this overrides hljs */
    color: var(--code-text-color) !important;
    padding: 1em;
    border-radius: var(--radius-md); /* Consistent radius */
    display: block;
    overflow-x: auto;
    font-size: 0.9em;
    margin-bottom: 1em;
    box-shadow: var(--shadow-sm);
}
.bot-message .bot-content-area pre code.hljs { /* hljs styles will apply within this */
    padding: 0; /* hljs might add its own padding, remove it if pre has it */
    background: none; /* Ensure no double background */
}
.bot-message .bot-content-area code:not(pre code) { /* Inline code */
    background-color: #eef0f2; /* Lighter inline code bg */
    color: #cb2431; /* Consistent with GitHub inline code color */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.85em; /* Slightly smaller for inline */
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Code Block Copy Button */
.code-copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 5px 8px;
    font-size: 0.7em;
    background-color: rgba(200, 200, 200, 0.6);
    color: #000;
    border: 1px solid rgba(150, 150, 150, 0.7);
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease, background-color 0.2s ease;
    /* Add icon content if not using text */
    /* content: '📄'; */
}
.bot-message .bot-content-area pre:hover .code-copy-button {
    opacity: 1; /* Show on hover of the pre block */
}
.code-copy-button:hover {
    background-color: rgba(180, 180, 180, 0.8);
}


.bot-message .bot-content-area table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid #dfe2e5;
    border-radius: var(--radius-sm);
    overflow: hidden; /* For border-radius on table */
}
.bot-message .bot-content-area th,
.bot-message .bot-content-area td {
    border: 1px solid #dfe2e5;
    padding: 8px 12px;
    text-align: left;
}
.bot-message .bot-content-area th {
    background-color: #f6f8fa;
    font-weight: 600;
}
.bot-message .bot-content-area tr:nth-child(even) {
    background-color: #fafbfc;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --input-area-height: 7rem; /* Slightly smaller input area on mobile */
    }
    .output-area {
        padding: 15px;
        padding-bottom: calc(var(--input-area-height) + 1rem);
    }
    .message { max-width: 92%; }
    .controls-area {
        padding: 10px 15px;
        gap: 8px;
        flex-direction: column; /* Stack controls on smaller screens */
        align-items: stretch;
    }
    .new-chat-button {
        margin-left: 0; /* No auto margin if stacked */
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
    .control-group { width: 100%; }
    .controls-area select { width: 100%; }
    .input-area { padding: 0.75rem; }
    #userInput { padding: 10px 12px; font-size: 0.95em; }
    #sendButton { padding: 0 18px; font-size: 0.9em; }
    .message-actions { bottom: 3px; right: 3px; padding: 3px 5px; }
    .action-button { padding: 4px 8px; font-size: 0.7em; }
    .code-copy-button { top: 5px; right: 5px; padding: 4px 6px; font-size: 0.65em; }
}

@media (max-width: 480px) {
    :root {
        --input-area-height: 6rem; /* Even smaller for very small screens */
    }
    .output-area {
        padding: 10px;
        padding-bottom: calc(var(--input-area-height) + 0.75rem);
    }
    .message { max-width: 95%; }
    .bot-content-area,
    .message.user-message .user-content { padding: 8px 10px; }
    .controls-area { padding: 8px 10px; }
    #userInput { font-size: 0.9em; }
}

/* --- Add to your existing style.css or update accordingly --- */

/* User Message Bubble */
.message.user-message .user-content {
    background-color: #e9e9eb; /* Light gray for user bubble */
    color: #1c1c1e; /* Darker text for user message */
    border-top-right-radius: var(--radius-sm); /* Keep asymmetric radius */
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Bot Message Area - ensure it has a white background for Markdown content */
.message.bot-message .bot-content-area {
    background-color: #ffffff; /* White background for bot content */
    border: 1px solid var(--border-color); /* Keep border if desired */
     /* Markdown content itself (p, ul, h1 etc.) will be on this white bg */
}

/* Code Block Wrapper & Styling */
.code-block-wrapper {
    position: relative;
    margin-bottom: 1em; /* Keep spacing like <pre> had */
    /* background-color: #ffffff; /* Wrapper itself can be transparent if pre has its own bg */
}

.bot-message .bot-content-area .code-block-wrapper pre {
    background-color: #ffffff !important; /* White background for code block */
    color: var(--text-color) !important; /* Default text color for code, hljs will override specifics */
    border: 1px solid var(--border-color); /* Add a light border to code blocks */
    border-radius: var(--radius-sm); /* Consistent radius */
    padding-top: 2.5em; /* Add padding to top of pre to make space for label/button */
    margin-bottom: 0; /* Margin is now on the wrapper */
}
.bot-message .bot-content-area .code-block-wrapper pre code.hljs {
    color: #333; /* Adjust if needed, hljs theme might override */
}


.code-language-label {
    position: absolute;
    top: 0px; /* Position inside the wrapper, on top of pre's padding */
    left: 0px;
    background-color: #f0f2f5; /* Light gray background for label */
    color: #555;
    padding: 3px 8px;
    font-size: 0.75em;
    font-weight: 500;
    border-radius: var(--radius-sm) 0 var(--radius-sm) 0; /* Stylish radius */
    z-index: 1;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Per-Code-Block Copy Button (Adjusted from previous general .code-copy-button) */
.code-block-wrapper .code-copy-button { /* Specific to within wrapper */
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    background-color: #f0f2f5;
    border: none;
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
    padding: 4px; /* Adjust for icon size */
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.code-block-wrapper .code-copy-button:hover {
    opacity: 1;
    background-color: #e1e4e8;
}
.code-block-wrapper .code-copy-button svg {
    display: block; /* Helps with alignment if button has padding */
}


/* Main Copy Button for entire bot message */
.message-actions {
    /* Existing styles, ensure it's positioned bottom-right of the message bubble */
    /* Example:
    position: absolute;
    bottom: 8px;
    right: 8px;
    */
}
.copy-button-main {
    /* action-button styles should apply, ensure SVG fits nicely */
    background-color: transparent;
    border: none;
    padding: 4px;
    opacity: 0.7;
}
.copy-button-main:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.05);
}


/* Thinking Process Box - Light Gray */
.thinking-process-box {
    background-color: #f5f5f5; /* Light gray background */
    border: 1px dashed #d1d1d1; /* Dashed border */
    color: #444; /* Slightly darker gray text for readability */
    padding: 10px 12px;
    margin-top: 8px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}
.thinking-process-box .thinking-step-title {
    font-weight: 600;
    color: var(--primary-color); /* Use primary color for title */
    margin-bottom: 6px;
    font-size: 0.9em;
}
.thinking-process-box .reasoning-content-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #ededed; /* Slightly darker pre within thinking box */
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    max-height: 200px;
    overflow-y: auto;
    color: #333;
    margin-top: 5px;
}

/* Loading Dots for Bot Message Placeholder */
.bot-content-area .loading-dots {
    display: inline-block;
    opacity: 0.7;
}
.bot-content-area .loading-dots span {
    animation: blink 1.4s infinite both;
    font-size: 1.5em; /* Make dots bigger */
}
.bot-content-area .loading-dots span:nth-child(2) { animation-delay: .2s; }
.bot-content-area .loading-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Initial position for slide up */
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast.error {
    background-color: #d9534f; /* Error color */
}

/* In style.css */
.bot-content-area {
    position: relative; /* Crucial for positioning the copy button within */
    padding-top: 1.2em; /* Add padding to make space if button is large, or adjust button size/position */
}

.copy-button-main-response {
    position: absolute;
    top: 2px;  /* Adjust as needed */
    right: 3px; /* Adjust as needed */
    z-index: 2; /* Ensure it's above other content like code block buttons */
    background-color: #f0f2f5; /* Example background */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.copy-button-main-response:hover {
    opacity: 1;
    background-color: #e1e4e8;
}

.copy-button-main-response svg {
    display: block;
}



/* Styling for the footer (ensure it's displayed) */
.app-footer-internal {
    /* display: none; */ /* Ensure this is REMOVED or commented out */
    padding: 1px 5px;
    text-align: center;
    font-size: 0.25em;
    color: var(--footer-text);
    background-color: var(--container-bg); /* Or var(--bg-color) */
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Important for flex layout */
}
/* If you want to visually "mix" input area and output area more: */

.output-area {
    padding-bottom: 5px; 
}
.input-area {
    border-top: none;
    padding-top: 5px;
}

/* You might need to define --primary-color-rgb in your :root if not already there, e.g.: */
/*
:root {
    --primary-color-rgb: 0, 120, 212; // Example for #0078d4
}
*/



/* Existing styles remain unchanged, adding new styles below */