/*
 Theme Name:   A.I. Style
 Description:  A WordPress theme inspired by commercial LLMs like Chat-GPT, Gemini, and Grok
 Version:      35.0.0.0
 Author:       General Chicken
 Author URI:   https://generalchicken.guru
 Tags:         ai
 Text Domain:       ai-style
 Domain Path:       /assets/lang
 Tested up to:      6.4
 Requires at least: 6.2
 Requires PHP:      7.4
 License:           GNU General Public License v2.0 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

body {
    background-color: #343541;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* Suppress browser's default scrollbar */
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WordPress Admin Bar Adjustments - Mobile First */
body.admin-bar {
    /* Mobile first: Account for taller admin bar (46px) */
    height: calc(100vh - 46px);
    margin-top: 46px;
}

@media screen and (min-width: 782px) {
    body.admin-bar {
        /* Desktop: Account for shorter admin bar (32px) */
        height: calc(100vh - 32px);
        margin-top: 32px;
    }
}

/* Mobile First Chat Container */
#chat-container {
    display: flex;
    flex-direction: column; /* Mobile: stack vertically */
    width: 100%;
    max-width: 100%;
    min-height: 500px;
    background: #343541;
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex: 1;
    height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
}

/* Mobile First: Adjust chat container for WordPress admin bar */
body.admin-bar #chat-container {
    height: calc(100vh - 46px); /* Mobile: taller admin bar */
    top: 46px;
}

@media screen and (min-width: 782px) {
    #chat-container {
        flex-direction: row; /* Desktop: side by side layout */
    }
    
    body.admin-bar #chat-container {
        height: calc(100vh - 32px); /* Desktop: shorter admin bar */
        top: 32px;
    }
}

/* Mobile First Sidebar - Overlay System */
#chat-sidebar {
    /* Mobile: Hidden overlay sidebar */
    position: fixed;
    top: 0;
    left: -100%; /* Hidden by default */
    width: 280px; /* Narrower on mobile */
    height: 100vh;
    background: #171717;
    border-right: 1px solid #444654;
    padding: 16px;
    box-sizing: border-box;
    color: #ececf1;
    overflow-y: auto;
    z-index: 50; /* Lower z-index when closed, won't interfere with comment form */
    transition: left 300ms ease-in-out;
}

/* Mobile: Show sidebar when toggled - higher z-index to appear above comment form */
#chat-sidebar.sidebar-visible {
    left: 0;
    z-index: 200; /* Higher than comment form (100) to ensure proper layering */
}

/* Mobile: Account for admin bar */
body.admin-bar #chat-sidebar {
    top: 46px;
    height: calc(100vh - 46px);
}

@media screen and (min-width: 782px) {
    #chat-sidebar {
        /* Desktop: Static positioned sidebar */
        position: static;
        left: auto;
        width: 377px;
        min-width: 377px;
        max-width: 435px;
        height: 100%;
        z-index: auto;
        transition: width 300ms ease-in-out, min-width 300ms ease-in-out, padding-left 300ms ease-in-out, padding-right 300ms ease-in-out;
    }
    
    body.admin-bar #chat-sidebar {
        top: auto;
        height: 100%;
    }
}

#chat-sidebar h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #ececf1;
    padding-bottom: 8px;
    border-bottom: 1px solid #444654;
}

#chat-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#chat-sidebar li {
    padding: 0; /* Remove padding from li, let anchor handle it */
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #808080; /* Gray color for regular text in sidebar */
}

/* Sidebar anchor styling */
#chat-sidebar li a {
    display: block;
    padding: 8px 12px;
    color: #8e8e8e; /* ChatGPT light gray color for sidebar anchors */
    text-decoration: none; /* Remove underlines */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.2s ease;
}

/* Hover effect - faint gray roundbox */
#chat-sidebar li a:hover {
    background-color: rgba(128, 128, 128, 0.2); /* Faint gray background on hover */
}

/* Active/clicked state - darker gray box */
#chat-sidebar li a:active,
#chat-sidebar li a:focus {
    background-color: rgba(128, 128, 128, 0.4); /* Darker gray background on click */
}

/* Remove hover effect from li when anchor is present */
#chat-sidebar li:hover {
    background-color: transparent;
}

/* Keep hover effect for li without anchors */
#chat-sidebar li:not(:has(a)):hover {
    background-color: #343541;
}

/* Mobile First Chat Main */
#chat-main {
    /* Mobile: Full width, no flex calculations needed */
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-bottom: 30px;
    min-width: 0;
    background: #212121;
    height: 100%;
    position: relative;
    align-items: center;
    overflow-y: visible;
    z-index: 1; /* Base layer for main content */
}

@media screen and (min-width: 782px) {
    #chat-main {
        /* Desktop: Flex to fill remaining space */
        flex: 1 1 0;
        width: auto;
        transition: width 300ms ease-in-out, max-width 300ms ease-in-out;
    }
}

/* Create a container for both post content and chat messages */
/* Mobile First Scrollable Content */
#scrollable-content {
    overflow-y: auto;
    /* Mobile: Account for 46px admin bar + comment form space */
    height: calc(100vh - 196px);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-bottom: 140px;
    max-width: 100%;
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

/* Mobile: Account for admin bar */
body.admin-bar #scrollable-content {
    height: calc(100vh - 196px); /* 46px admin bar + 150px for comment form */
}

@media screen and (min-width: 782px) {
    #scrollable-content {
        /* Desktop: Account for 32px admin bar */
        height: calc(100vh - 150px);
    }
    
    body.admin-bar #scrollable-content {
        height: calc(100vh - 182px); /* 32px admin bar + 150px for comment form */
    }
}

#chat-messages {
    flex: 1 1 auto;
    padding: 24px 16px; /* Increased top/bottom padding */
    color: #343541; /* Dark text on light background for ChatGPT style */
    width: 100%;
    box-sizing: border-box;
    max-width: 768px; /* Match fixed-content max-width */
    margin: 0 auto;
    overflow-y: visible; /* Allow content to be visible */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center message content */
}

#chat-input {
    flex: 0 0 auto;
    padding: 0;
    background: #212121; /* Match main area background */
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: 150; /* Higher than content but lower than footer */
    width: 100%;
    max-width: 768px; /* Match the width of other elements */
    margin: 0 auto; /* Center in the chat-main area */
    left: 0; /* Align with chat-main instead of viewport */
    transform: none; /* Remove the transform that was centering on viewport */
    box-sizing: border-box;
}

@media (max-width: 700px) {
    #chat-container {
        flex-direction: column;
    }
    #chat-sidebar {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #ccc;
        height: 30vh; /* Fixed height for sidebar on mobile */
        overflow-y: auto;
    }
    #chat-main {
        width: 100%;
        height: 70vh; /* Remaining height for main content */
        overflow-y: auto;
    }
}

/* Sidebar Toggle Functionality */
/* Additional styles for sidebar toggle animations and admin bar integration */
#chat-sidebar.sidebar-transitioning {
    transition: width 300ms ease-in-out,
                min-width 300ms ease-in-out,
                padding-left 300ms ease-in-out,
                padding-right 300ms ease-in-out;
}

#chat-sidebar.sidebar-hidden {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    border-right: none;
}

/* Ensure main content expands when sidebar is hidden */
#chat-sidebar.sidebar-hidden + #chat-main {
    width: 100%;
    max-width: 100%;
}

/* Admin Bar Sidebar Toggle Button Styles */
#wp-admin-bar-sidebar-toggle .ab-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    text-decoration: none;
    color: #a7aaad;
    font-size: 13px;
    line-height: 32px;
    height: 32px;
}

#wp-admin-bar-sidebar-toggle .ab-item:hover {
    color: #00a0d2;
    background-color: #32373c;
}

#wp-admin-bar-sidebar-toggle .ab-item .dashicons {
    font-family: dashicons;
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    margin-top: 6px;
    display: inline-block;
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in;
    transition: color .1s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#wp-admin-bar-sidebar-toggle .ab-item .ab-label {
    font-size: 13px;
    font-weight: 400;
}

/* Base state - label visible */
#wp-admin-bar-sidebar-toggle .ab-item .ab-label {
    display: inline-block;
}

/* Base desktop styles - will be overridden by media queries */
#wpadminbar #wp-admin-bar-sidebar-toggle {
    display: block;
    visibility: visible;
}

#wpadminbar #wp-admin-bar-sidebar-toggle .ab-item {
    display: flex;
    visibility: visible;
    opacity: 1;
}

#wpadminbar #wp-admin-bar-sidebar-toggle .ab-item .dashicons {
    display: inline-block;
    visibility: visible;
    opacity: 1;
}

/* Mobile Hamburger Icon Styles */
#wp-admin-bar-mobile-hamburger {
    display: none; /* Hidden by default, shown on mobile */
}

#wp-admin-bar-mobile-hamburger .ab-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    text-decoration: none;
    color: #a7aaad;
    font-size: 13px;
    line-height: 32px;
    height: 32px;
}

#wp-admin-bar-mobile-hamburger .ab-item:hover {
    color: #00a0d2;
    background-color: #32373c;
}

#wp-admin-bar-mobile-hamburger .ab-item .dashicons {
    font-family: dashicons;
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
    margin-top: 6px;
    display: inline-block;
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in;
    transition: color .1s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile responsive behavior for hamburger icon */
@media screen and (max-width: 782px) {
    /* Show hamburger icon on mobile */
    #wp-admin-bar-mobile-hamburger {
        display: block !important;
        visibility: visible !important;
    }
    
    #wp-admin-bar-mobile-hamburger .ab-item {
        line-height: 46px;
        height: 46px;
    }
    
    #wp-admin-bar-mobile-hamburger .ab-item .dashicons {
        font-family: dashicons;
        font-size: 20px;
        width: 20px;
        height: 20px;
        line-height: 1;
        margin-top: 13px;
        display: inline-block;
        text-decoration: inherit;
        font-weight: normal;
        font-style: normal;
        vertical-align: top;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Hide the existing arrow toggle on mobile - use higher specificity */
    #wpadminbar #wp-admin-bar-sidebar-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Also hide the ab-item specifically */
    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide the label text on mobile */
    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: none !important;
    }
}

/* Desktop responsive behavior - hide hamburger, show arrow toggle */
@media screen and (min-width: 782px) {
    #wp-admin-bar-mobile-hamburger {
        display: none !important;
    }
    
    /* Show arrow toggle on desktop with high specificity */
    #wpadminbar #wp-admin-bar-sidebar-toggle {
        display: block !important;
        visibility: visible !important;
    }
    
    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Show label text on desktop */
    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: inline-block !important;
    }
}

/* High zoom and mobile portrait responsive styles */
@media screen and (max-width: 480px) and (orientation: portrait) {
    /* Mobile portrait mode - wider sidebar */
    #chat-sidebar:not(.sidebar-hidden) {
        width: 85% !important;
        min-width: 85% !important;
    }
    
    /* Footer visibility now handled by main .site-footer rules */
}

/* High zoom level styles (250%+) using resolution-based media queries */
@media screen and (min-resolution: 2.5dppx) {
    /* Wider sidebar at high zoom levels */
    #chat-sidebar:not(.sidebar-hidden) {
        width: 85% !important;
        min-width: 85% !important;
    }
    
    /* Footer visibility now handled by main .site-footer rules */
    
    /* Hide admin bar toggle label text at high zoom levels */
    #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: none !important;
    }
}

/* Alternative media query for browsers that don't support dppx */
@media screen and (-webkit-min-device-pixel-ratio: 2.5) {
    /* Wider sidebar at high zoom levels */
    #chat-sidebar:not(.sidebar-hidden) {
        width: 85% !important;
        min-width: 85% !important;
    }
    
    /* Footer visibility now handled by main .site-footer rules */
    
    /* Hide admin bar toggle label text at high zoom levels */
    #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: none !important;
    }
}


/* WordPress Comment Form - ChatGPT Style */

.comment-respond {
    margin: 0 auto; /* Center the comment form */
    width: 100%;
    max-width: 768px;
    /* Removed fixed height to allow it to size based on content */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Center the form horizontally */
    align-items: center; /* Center vertically */
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

/* Message styling for ChatGPT-style UI */
.message {
    margin-bottom: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* AI message styling (respondent) */
.respondent-message {
    width: 100%;
    background-color: #212121; /* ChatGPT dark gray for assistant messages */
    padding: 16px 16px 16px 20px; /* Increased left padding */
    border-radius: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: none;
    border-left: none; /* Removed green accent */
    position: relative;
}

/* User message styling (interlocutor) */
.interlocutor-message {
    width: 70%;
    max-width: 70%;
    background-color: #303030; /* ChatGPT medium dark gray for user messages */
    padding: 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    margin-left: auto; /* Push to the right */
    box-sizing: border-box;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Add a subtle hover effect to messages */
.respondent-message:hover {
    background-color: #2a2a2a; /* Slightly lighter dark gray on hover */
}

.interlocutor-message:hover {
    background-color: #3a3a3a; /* Slightly lighter medium dark gray on hover */
}

/* Message content styling */
.message-content {
    color: #ececf1; /* Light text for dark background */
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

/* Message actions (copy, like, dislike) */
.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.respondent-message:hover .message-actions {
    opacity: 1;
}

/* Container for messages to enable right alignment */
#chat-messages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Fixed comment box positioning - Mobile First */
#fixed-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 768px;
    box-sizing: border-box;
    padding: 16px;
    z-index: 100; /* Above main content but below sidebar when visible */
    display: flex;
    justify-content: center; /* Center the comment form horizontally */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center within chat-main area */
    
    /* Rounded corners and border styling inspired by Gemini */
    border-radius: 24px 24px 0 0; /* Rounded top corners only on mobile */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Thin white border like Gemini */
    border-bottom: none; /* No bottom border on mobile since it's at viewport bottom */
    background: #303030; /* Ensure background matches comment form */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for emphasis */
}

/* Desktop: Position comment box above footer with full rounded corners */
@media screen and (min-width: 782px) {
    #fixed-content {
        position: fixed; /* Keep fixed positioning to align with footer */
        bottom: 30px; /* Position directly above footer (30px footer height) */
        left: 377px; /* Align with footer and chat-main after sidebar */
        right: 0; /* Match footer's right positioning */
        width: auto; /* Let it fill the available space like footer */
        max-width: 768px; /* Keep the content width constraint */
        margin: 0 auto; /* Center within the available space */
        border-radius: 24px; /* Full rounded corners on desktop */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Full border on desktop */
    }
}

#respond {
    background: #303030;
}

/* Hide elements that don't appear in ChatGPT interface */
.comment-reply-title,
.logged-in-as,
.required-field-message,
.comment-form-comment label {
    display: none;
}

#commentform {
    background: none;
    border-radius: 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: none;
    margin: 0;
    max-width: none;
    width: 100%;
    transition: none;
    box-sizing: border-box;
    z-index: 1001; /* Ensure it's above the fixed-content */
}

/* Comment form input row */
.comment-form-comment {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

#commentform:focus-within {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.comment-form-comment {
    margin: 0;
    padding: 0;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

#comment {
    width: 100%;
    background-color: transparent;
    border: none;
    color: #8e8e8e;
    font-size: 16px;
    padding: 12px 45px 12px 12px;
    resize: none;
    min-height: 140px;
    line-height: 1.5;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    margin-right: 32px; /* Make space for the submit button */
    outline: none;
    box-sizing: border-box;
}

#comment:focus {
    outline: none;
}

#comment::placeholder {
    color: #6b7280; /* Medium gray placeholder for light background */
    font-size: 16px;
    font-weight: 400;
}

.form-submit {
    margin: 0;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Replace text submit button with icon */
.form-submit input[type="submit"] {
    background-color: white;
    border: none;
    font-size: 0; /* Hide text content */
    color: transparent; /* Hide text content */
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%; /* Make it circular like commercial implementations */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23404040'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    opacity: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-indent: -9999px; /* Hide text content */
    overflow: hidden; /* Hide text content */
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.form-submit input[type="submit"]:hover {
    background-color: white; /* Darker green on hover */
    transform: scale(1.05); /* Slight scale effect on hover */
}

.form-submit input[type="submit"]:active {
    transform: scale(0.95); /* Slight press effect */
}

/* Responsive adjustments */
@media (max-width: 700px) {
    #commentform {
        padding: 10px 12px;
    }
    
    #comment {
        font-size: 14px;
    }
}

/* Action buttons container */
.action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 4px;
    width: 100%;
    align-items: center;
    margin-top: 2px;
    justify-content: flex-start;
}

/* Action bubble/button styling */
.action-bubble {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #565869;
    border-radius: 20px;
    padding: 5px 10px;
    color: #ececf1;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 4px;
    margin-bottom: 2px;
    height: 28px;
}

.action-bubble:hover {
    background-color: #4d4f5e;
    border-color: #6c6d80;
}

.action-bubble .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    color: #acacbe;
}

/* Special styling for the first action button (plus icon) */
.action-bubble:first-child {

}

.action-bubble:first-child .dashicons {
    margin-right: 0;
}

/* Add a subtle hover effect to the action buttons */
.action-bubble:hover .dashicons {
    color: #fff;
}

.action-bubble-text {
    margin-left: 4px;
}

/* Responsive adjustments for action bubbles */
@media (max-width: 700px) {
    .action-bubble {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .action-bubble .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
    
    .action-bubble-text {
        margin-left: 2px;
    }
}
/* ChatGPT-style unified comment box structure */
.comment-box-inner {
    background-color: #f7f7f8; /* ChatGPT light gray background for input area */
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    max-width: 768px;
    width: 100%;
    transition: box-shadow 0.2s ease;
    box-sizing: border-box;
}

.comment-input-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.comment-tools-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
}

.tools-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tools-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile First Tool buttons styling */
.plus-icon,
.tools-button,
.microphone-button,
.submit-arrow {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px; /* Mobile: Smaller padding */
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* Mobile: Smaller font */
    font-weight: 500;
}

@media screen and (min-width: 782px) {
    .plus-icon,
    .tools-button,
    .microphone-button,
    .submit-arrow {
        padding: 6px; /* Desktop: Larger padding */
        font-size: 14px; /* Desktop: Larger font */
    }
}

.plus-icon:hover,
.tools-button:hover,
.microphone-button:hover {
    background-color: #e5e7eb; /* Light gray hover for light background */
    color: #374151; /* Darker text on hover */
}

.submit-arrow {
    background-color: #19c37d;
    color: white;
    width: 28px; /* Mobile: Smaller size */
    height: 28px;
    border-radius: 50%;
    font-size: 14px; /* Mobile: Smaller font */
    font-weight: bold;
}

@media screen and (min-width: 782px) {
    .submit-arrow {
        width: 32px; /* Desktop: Larger size */
        height: 32px;
        font-size: 16px; /* Desktop: Larger font */
    }
}


.submit-arrow:disabled {
    background-color: #d1d5db; /* Light gray disabled state for light background */
    color: #9ca3af; /* Medium gray text for disabled state */
    cursor: not-allowed;
}

/* Adjust the comment form to fit the new structure */
#commentform {
    border-radius: 12px 12px 0 0; /* Only round top corners */
    padding: 9px;
    margin-bottom: 0;
}

/* Mobile First Tools Layout - Mobile styles as base */
.tools-left {
    gap: 8px;
}

.tools-right {
    gap: 6px;
}

.plus-icon,
.tools-button,
.microphone-button {
    padding: 4px;
    font-size: 12px;
}

.submit-arrow {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

@media screen and (min-width: 782px) {
    .tools-left {
        gap: 12px;
    }
    
    .tools-right {
        gap: 8px;
    }
    
    .plus-icon,
    .tools-button,
    .microphone-button {
        padding: 6px;
        font-size: 14px;
    }
    
    .submit-arrow {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}


/* Post content styling */
.post-content {
    width: 100%;
    padding: 16px;
    margin: 0 0 24px 0;
    box-sizing: border-box;
    color: #ececf1;
    font-size: 16px;
    line-height: 1.5;
    background: none;
    border: none;
    overflow-wrap: break-word; /* Ensure text wraps properly */
}

/* Create a scrollable container for both post content and chat messages */
#post-content-1 {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}


/* Mobile First Footer - Hidden on mobile, visible on desktop */
.site-footer {
    /* Mobile: Hidden footer */
    display: none;
}

@media screen and (min-width: 782px) {
    .site-footer {
        /* Desktop: Show footer */
        display: block;
        position: absolute;
        bottom: 0;
        left: 377px; /* Desktop: Align with chat-main after sidebar */
        right: 0;
        width: auto;
        background-color: #202123;
        color: #acacbe;
        text-align: center;
        padding: 4px 0;
        font-size: 12px;
        border-top: 1px solid #444654;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
        letter-spacing: 0.2px;
        height: 30px;
        z-index: 2000;
    }
}


/* These are now handled in the main #scrollable-content section above */

/* Adjust for WordPress admin bar */
body.admin-bar .site-footer {
    bottom: 0; /* Keep at bottom */
}

/* Adjust fixed-content for WordPress admin bar on desktop */
@media screen and (min-width: 782px) {
    body.admin-bar #fixed-content {
        bottom: 30px; /* Still 30px above footer, admin bar doesn't affect this */
    }
}


#cacbot-archive-button{
    display:none !important;
}

/* Blog Roll Styles */
.blog-roll-container {
    max-width: 768px;
    margin: 0 auto;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.blog-roll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
}

.blog-roll-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-roll-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.blog-roll-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.blog-roll-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-roll-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-roll-item:hover .blog-roll-thumbnail {
    transform: scale(1.05);
}

.blog-roll-placeholder {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.blog-roll-content {
    padding: 20px;
}

.blog-roll-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #ececf1;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-roll-meta {
    margin-bottom: 12px;
}

.blog-roll-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.blog-roll-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-roll-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive adjustments */
/* Mobile First Blog Roll */
.blog-roll-grid {
    grid-template-columns: 1fr; /* Mobile: Single column */
    gap: 16px;
}

.blog-roll-container {
    padding: 12px;
}

.blog-roll-image-container {
    height: 160px; /* Mobile: Smaller images */
}

.blog-roll-content {
    padding: 16px;
}

.blog-roll-title {
    font-size: 16px;
}

.blog-roll-excerpt {
    font-size: 13px;
}

@media screen and (min-width: 480px) {
    .blog-roll-image-container {
        height: 180px; /* Larger mobile: Slightly bigger images */
    }
}

@media screen and (min-width: 782px) {
    .blog-roll-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Desktop: Multi-column */
        gap: 24px;
    }
    
    .blog-roll-container {
        padding: 16px;
    }
    
    .blog-roll-image-container {
        height: 200px; /* Desktop: Full size images */
    }
    
    .blog-roll-title {
        font-size: 18px;
    }
    
    .blog-roll-excerpt {
        font-size: 14px;
    }
}

/* Blog Roll Pagination Styles */
.blog-roll-pagination {
    margin: 32px 0 120px 0; /* Add significant bottom margin to prevent overlap with comment form */
    padding: 16px 0;
    text-align: center;
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 100; /* Ensure pagination is above other content but below comment form */
    clear: both; /* Ensure it clears any floated elements */
}

.pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.pagination-list li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.pagination-list a {
    display: inline-block;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ececf1;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
    box-sizing: border-box;
}

.pagination-list a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-1px);
}

.pagination-list .current-page {
    display: inline-block;
    padding: 8px 12px;
    background-color: #40414f;
    color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    box-sizing: border-box;
}

.pagination-list .prev-page a,
.pagination-list .next-page a {
    padding: 8px 16px;
    font-weight: 500;
}

.pagination-list .prev-page a:hover,
.pagination-list .next-page a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Mobile First Pagination */
.blog-roll-pagination {
    margin: 20px 0 80px 0; /* Mobile: Compact spacing */
    padding: 12px 0;
}

.pagination-list {
    gap: 4px; /* Mobile: Tight spacing */
}

.pagination-list a,
.pagination-list .current-page {
    padding: 6px 8px; /* Mobile: Compact padding */
    font-size: 12px;
    min-width: 32px;
}

.pagination-list .prev-page a,
.pagination-list .next-page a {
    padding: 6px 10px;
}

@media screen and (min-width: 480px) {
    .pagination-list {
        gap: 6px; /* Larger mobile: More spacing */
    }
    
    .pagination-list a,
    .pagination-list .current-page {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 36px;
    }
    
    .pagination-list .prev-page a,
    .pagination-list .next-page a {
        padding: 6px 12px;
    }
}

@media screen and (min-width: 782px) {
    .blog-roll-pagination {
        margin: 32px 0 120px 0; /* Desktop: More generous spacing */
        padding: 16px 0;
    }
    
    .pagination-list {
        gap: 8px; /* Desktop: Full spacing */
    }
    
    .pagination-list a,
    .pagination-list .current-page {
        padding: 8px 12px; /* Desktop: Full padding */
        font-size: 14px;
        min-width: 40px;
    }
    
    .pagination-list .prev-page a,
    .pagination-list .next-page a {
        padding: 8px 16px;
    }
}

#commentform {
    z-index: 1001; /* Slightly higher than fixed-content but much lower than before */
}


/* Ensure blog roll container has proper spacing */
.blog-roll-container {
    margin-bottom: 0; /* Remove any bottom margin that might interfere */
    padding-bottom: 0; /* Remove any bottom padding that might interfere */
}

/* Comment Form Seamless Integration - Remove visual seams and outlines */
#fixed-content .comment-form-container {
    background: inherit; /* Inherit background from #fixed-content */
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    outline: none;
}

#fixed-content .comment-form-container #commentform {
    background: inherit; /* Inherit background from parent */
    border: none;
    box-shadow: none;
    outline: none;
}

#fixed-content .comment-form-container #commentform #comment {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

#fixed-content .comment-form-container #commentform #comment:focus {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
}

#fixed-content .comment-form-container .form-submit input[type="submit"] {
    outline: none;
    border: none;
}

#fixed-content .comment-form-container .form-submit input[type="submit"]:focus {
    outline: none;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Keep only the existing subtle shadow */
}

/* Ensure all nested elements blend seamlessly */
#fixed-content * {
    box-sizing: border-box;
}

#fixed-content .comment-form-comment {
    background: inherit;
    border: none;
    outline: none;
    box-shadow: none;
}