/*
 Theme Name:   A.I. Style
 Description:  A conversation-focused WordPress theme inspired by modern AI chat interfaces.
 Version:      1
 Update URI:   https://aistyletheme.com/wp-content/metadata.json
 Author:       General Chicken
 Author URI:   https://generalchicken.guru
 Tags:         blog, left-sidebar, block-patterns
 Text Domain:       ai-style
 Tested up to:      7.1
 Requires at least: 7.0
 Requires PHP:      8.1
 License:           GNU General Public License v2.0 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================ */
:root {
    /* Reference palette sampled from tests/acceptance/chat-gpt-screenshot.png.
       The page and sidebar share the exact black canvas. The logged-in user's
       bubble is blue; other-user bubbles and the composer use reference gray. */
    --color-bg-primary: #000000;
    --color-bg-secondary: #000000;
    --color-bg-tertiary: #000000;
    --color-bg-sidebar: #000000;
    --color-bg-message-ai: #000000;
    --color-bg-message-user: #173e76;
    --color-bg-message-other: #1b1b1b;
    --color-bg-message-other-hover: #262626;
    --color-bg-message-user-hover: #1d4d91;
    --color-bg-input: #1b1b1b;
    --color-submit: #2c67c5;
    --color-submit-hover: #3574d4;
    --color-bg-footer: #000000;

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #ede9f3;
    --color-text-muted: #9e95ac;
    --color-text-dark: #ffffff;
    --color-text-placeholder: #6b7280;
    --color-text-footer: #bab2c7;

    /* Border Colors */
    --color-border-primary: #494158;
    --color-border-secondary: #5f5470;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-lighter: rgba(255, 255, 255, 0.2);

    /* Accent Colors */
    --color-accent: #8577f4;
    --color-accent-gray: #808080;
    --color-hover-light: #e5e7eb;
    --color-hover-dark: #514861;
    --color-focus: #a99ff7;
    --color-border-focus: rgba(255, 255, 255, 0.4);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease-in-out;

    /* Z-Index Scale */
    --z-base: 1;
    --z-content: 10;
    --z-sidebar-closed: 50;
    --z-fixed-form: 100;
    --z-chat-input: 150;
    --z-sidebar-open: 200;
    --z-footer: 2000;

    /* Admin Bar Heights */
    --admin-bar-mobile: 46px;
    --admin-bar-desktop: 32px;

    /* Component Dimensions */
    --sidebar-width-mobile: 280px;
    --sidebar-width-desktop: 377px;
    --sidebar-width-max: 435px;
    --content-max-width: 768px;
    --footer-height: 30px;

    /* Height of the fixed interaction bar. scrollable-content-padding.js keeps
       this in sync with the bar's measured height; it is the ONLY thing that
       JS writes for layout, and the only authority for how much room the
       conversation reserves at its bottom. The value here is the fallback used
       before the first measurement. */
    --interaction-bar-height: 96px;

    /* Archive (YouTube Correspondence) Tokens
       Reusable across Singular / Archive / Talking Avatar views. */
    --archive-tile-aspect: 16 / 9;
    --archive-tile-min: 280px;
    --archive-grid-gap: 16px;
    --archive-grid-gap-desktop: 24px;
    --archive-content-row-gap: 24px;
    --archive-tile-radius: 12px;
    --archive-avatar-size: 36px;
}

/* ============================================================
   BASE STYLES
   ============================================================ */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   ACCESSIBILITY: SCREEN READER TEXT AND SKIP LINK
   ============================================================ */
/* Hidden visually, still read by screen readers (WordPress core pattern). */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* The skip link appears at the top left when it receives keyboard focus,
   above the admin bar and the fixed chat shell. */
.skip-link:focus {
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    position: fixed !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--spacing-sm));
    left: var(--spacing-sm);
    z-index: 100000;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-text-primary);
    color: var(--color-bg-tertiary);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Focus lands on <main> after the skip link; the container needs no ring. */
#chat-main:focus {
    outline: none;
}

/* ============================================================
   WORDPRESS ADMIN BAR ADJUSTMENTS
   ============================================================ */
body.admin-bar {
    height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-mobile)));
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-mobile)));
    margin-top: 0;
}

@media screen and (min-width: 782px) {
    body.admin-bar {
        height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-desktop)));
        min-height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-desktop)));
    }
}

/* ============================================================
   LAYOUT SHELL (MOBILE FIRST)
   ============================================================ */
#chat-container,
.layout-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 500px;
    background: var(--color-bg-primary);
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex: 1;
    height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
}

body.admin-bar #chat-container,
body.admin-bar .layout-shell {
    height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-mobile)));
    top: var(--wp-admin--admin-bar--height, var(--admin-bar-mobile));
}

@media screen and (min-width: 782px) {
    #chat-container,
    .layout-shell {
        flex-direction: row;
    }

    body.admin-bar #chat-container,
    body.admin-bar .layout-shell {
        height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-desktop)));
        top: var(--wp-admin--admin-bar--height, var(--admin-bar-desktop));
    }
}

/* ============================================================
   PRIMARY NAVIGATION (MOBILE FIRST - OVERLAY SYSTEM)
   ============================================================ */
#chat-sidebar,
.primary-navigation {
    position: fixed;
    top: 0;
    left: -100%;
    width: var(--sidebar-width-mobile);
    height: 100vh;
    background: var(--color-bg-sidebar);
    border-right: 1px solid var(--color-border-primary);
    padding: var(--spacing-lg);
    box-sizing: border-box;
    color: var(--color-text-secondary);
    overflow-y: auto;
    z-index: var(--z-sidebar-closed);
    transition: left var(--transition-medium);
    /* Swipe-to-close (see sidebar-swipe-close.js): keep vertical scrolling and
       pinch-zoom with the browser, but stop it from claiming horizontal drags
       so a left swipe reads as a close gesture instead of an overscroll pan. */
    touch-action: pan-y pinch-zoom;
}

/* Mobile: Show sidebar when toggled */
#chat-sidebar.sidebar-visible,
.primary-navigation.sidebar-visible {
    left: 0;
    z-index: var(--z-sidebar-open);
}

/* Mobile: Account for admin bar */
body.admin-bar #chat-sidebar,
body.admin-bar .primary-navigation {
    top: var(--wp-admin--admin-bar--height, var(--admin-bar-mobile));
    height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-mobile)));
}

/* Desktop: Static positioned sidebar */
@media screen and (min-width: 782px) {
    #chat-sidebar,
    .primary-navigation {
        position: static;
        left: auto;
        width: var(--sidebar-width-desktop);
        min-width: var(--sidebar-width-desktop);
        max-width: var(--sidebar-width-max);
        height: 100%;
        z-index: auto;
        transition: width var(--transition-medium),
                    min-width var(--transition-medium),
                    padding-left var(--transition-medium),
                    padding-right var(--transition-medium);
    }

    body.admin-bar #chat-sidebar,
    body.admin-bar .primary-navigation {
        top: auto;
        height: 100%;
    }
}

/* Sidebar Toggle Animations */
#chat-sidebar.sidebar-transitioning,
.primary-navigation.sidebar-transitioning {
    transition: width var(--transition-medium),
                min-width var(--transition-medium),
                padding-left var(--transition-medium),
                padding-right var(--transition-medium);
}

#chat-sidebar.sidebar-hidden,
.primary-navigation.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,
.primary-navigation.sidebar-hidden + .content-region {
    width: 100%;
    max-width: 100%;
}

/* Sidebar Content Styling */
#chat-sidebar h2,
.primary-navigation h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-primary);
}

#chat-sidebar ul,
.primary-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#chat-sidebar li,
.primary-navigation li {
    padding: 0;
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-accent-gray);
}

#chat-sidebar li a,
.primary-navigation li a {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

#chat-sidebar li a:hover,
.primary-navigation li a:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

#chat-sidebar li a:active,
#chat-sidebar li a:focus,
.primary-navigation li a:active,
.primary-navigation li a:focus {
    background-color: rgba(128, 128, 128, 0.4);
}

#chat-sidebar li:hover,
.primary-navigation li:hover {
    background-color: transparent;
}

#chat-sidebar li:not(:has(a)):hover,
.primary-navigation li:not(:has(a)):hover {
    background-color: var(--color-bg-primary);
}

/* ============================================================
   EXPANDABLE SIDEBAR MENU STYLES
   ============================================================ */

/* Customization knobs.
   --sidebar-menu-anim is also read by sidebar-menu.js so JS cleanup
   timing stays in sync with the CSS transition duration. */
:root {
    --sidebar-menu-anim: 200ms;
    --sidebar-menu-toggle-size: 44px;
}

/* Menu item wrapper for toggle button + label layout */
.menu-item-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-item-wrapper > a {
    flex: 1;
    min-width: 0;
}

.menu-item-label {
    flex: 1;
}

/* Toggle button base styles */
.menu-toggle-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sidebar-menu-toggle-size);
    min-height: var(--sidebar-menu-toggle-size);
    margin-right: 4px;
    border-radius: 4px;
    transition: background-color var(--sidebar-menu-anim) ease,
                color var(--sidebar-menu-anim) ease;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.menu-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.menu-toggle-btn:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.menu-toggle-btn:active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Submenu styles */
.sub-menu {
    list-style: none;
    padding-left: var(--spacing-lg);
    margin: 0;
    overflow: hidden;
}

/* Nested submenu items */
.sub-menu .menu-item {
    margin-bottom: var(--spacing-xs);
}

.sub-menu .menu-item a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    color: var(--color-text-muted);
}

.sub-menu .menu-item a:hover {
    background-color: rgba(128, 128, 128, 0.15);
}

/* Active menu item highlighting. Items with children now wrap their
   <a> in a .menu-item-wrapper, so we target both shapes. */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a,
.current_page_ancestor > a,
.current-menu-item > .menu-item-wrapper > a,
.current_page_item > .menu-item-wrapper > a,
.current-menu-ancestor > .menu-item-wrapper > a,
.current_page_ancestor > .menu-item-wrapper > a {
    background-color: rgba(133, 119, 244, 0.12);
    color: var(--color-accent);
    font-weight: 500;
}

.current-menu-item > .menu-item-wrapper > .menu-toggle-btn,
.current_page_item > .menu-item-wrapper > .menu-toggle-btn,
.current-menu-ancestor > .menu-item-wrapper > .menu-toggle-btn,
.current_page_ancestor > .menu-item-wrapper > .menu-toggle-btn {
    color: var(--color-accent);
}

/* Smooth transitions for menu items */
.menu-item-has-children {
    transition: background-color var(--sidebar-menu-anim) ease;
}

/* Widget nav menu specific adjustments */
.widget {
    padding: 5px 0px 10px 0;
}

.widget_nav_menu .widget-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-primary);
}

/* Ensure proper spacing for nested menus */
.menu-item-has-children > .sub-menu {
    display: none;
    margin-top: var(--spacing-xs);
}

/* Prevent initial submenu flash before JS enhancement runs */
.menu-item-has-children.menu-item-expanded > .sub-menu {
    display: block;
}

/* Accessibility: Focus visible for keyboard navigation */
.menu-item a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Honor user motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .menu-toggle-btn,
    .menu-item-has-children {
        transition: none;
    }
}

/* ============================================================
   CONTENT REGION (MOBILE FIRST)
   ============================================================ */
#chat-main,
.content-region {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-bottom: 0px;
    min-width: 0;
    background: var(--color-bg-secondary);
    height: 100%;
    position: relative;
    align-items: center;
    overflow-y: visible;
    z-index: var(--z-base);
    /* Ensure content region fills available space on mobile */
    flex: 1 1 auto;
}

@media screen and (min-width: 782px) {
    #chat-main,
    .content-region {
        flex: 1 1 0;
        width: auto;
        transition: width var(--transition-medium),
                    max-width var(--transition-medium);
    }
}

/* ============================================================
   CONTENT SCROLL (MOBILE FIRST)
   ============================================================ */
#scrollable-content,
.content-scroll {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-bottom: 0px;
    max-width: 100%;
    position: relative;
    z-index: var(--z-content);
    margin-bottom: 0px;
    /* Allow scrollable content to grow and fill available space on mobile */
    flex: 1 1 auto;
    min-height: 0;
    /* On mobile, fill the parent container completely */
    height: auto;
}

body.admin-bar #scrollable-content,
body.admin-bar .content-scroll {
    /* Let flex handle the sizing on mobile */
    height: auto;
}

@media screen and (min-width: 782px) {
    #scrollable-content,
    .content-scroll {
        /* On desktop, use fixed height calculation */
        height: calc(100vh - var(--footer-height));
        flex: 0 0 auto;
    }

    body.admin-bar #scrollable-content,
    body.admin-bar .content-scroll {
        height: calc(100vh - var(--wp-admin--admin-bar--height, var(--admin-bar-desktop)) - var(--footer-height));
    }
}

.content-region-header-row {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.content-region-header-row > * {
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.content-region-header-row > :not(.ai-style-header-row-login-wrap) {
    flex: 1 1 auto;
    min-width: 0;
}

.content-region-header-row > .ai-style-header-row-login-wrap {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: auto;
}

.ai-style-header-row-login-button {
    background: var(--color-bg-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-weight: 600;
    line-height: 1;
    padding: var(--spacing-sm) var(--spacing-lg);
    text-decoration: none;
}

.ai-style-header-row-login-button:hover,
.ai-style-header-row-login-button:focus {
    background: var(--color-hover-dark);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* ============================================================
   CONVERSATION THREAD
   ============================================================ */

/* The conversation document: meta, post content and the message list.
   It owns the bottom inset that keeps the last message clear of the fixed
   interaction bar. The inset lives here — on the in-flow child — rather than
   on #scrollable-content, because bottom padding on a scroll container is not
   reliably reachable in the scrollable overflow region. */
#conversation-body,
.conversation-document {
    width: 100%;
    padding-bottom: calc(var(--interaction-bar-height, 96px) + var(--spacing-lg));
}

#chat-messages,
.conversation-thread {
    flex: 1 1 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--color-text-dark);
    width: 100%;
    box-sizing: border-box;
    max-width: var(--content-max-width);
    margin: 0 auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Message Styling */
.message {
    margin-bottom: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* Display mode (message--bubble / message--full), then side for bubbles only
   (message--self right, message--other left). Side follows who is logged in:
   the server renders every bubble on the left and chat-messages.js moves the
   logged-in user's own to the right. message--full is added by a plugin
   through comment_class for a system agent (rules:
   tests/wpunit/ConversationSidesTest.php). A bubble fits its content up to a
   readable maximum: a share of the column, never more than a comfortable
   line length (docs/comment-form-chat-interface-report.md §3.4). */
.message--bubble {
    --message-bubble-width: min(72%, 42rem);
    inline-size: fit-content;
    max-inline-size: var(--message-bubble-width);
    min-inline-size: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-sizing: border-box;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Narrow screens: the desktop share leaves too little room for text. */
@media screen and (max-width: 600px) {
    .message--bubble {
        --message-bubble-width: 90%;
    }
}

/* Other: left */
.message--bubble.message--other {
    background-color: var(--color-bg-message-other);
    margin-left: 0;
    margin-right: auto;
}

.message--bubble.message--other:hover {
    background-color: var(--color-bg-message-other-hover);
}

/* Self: right */
.message--bubble.message--self {
    background-color: var(--color-bg-message-user);
    margin-left: auto;
    margin-right: 0;
}

.message--bubble.message--self:hover {
    background-color: var(--color-bg-message-user-hover);
}

/* Full width: no bubble, no side. The whole content column, as for a
   long assistant reply. Wins over any side rule. */
.message.message--full {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-lg);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* A single line of text shrinks the bubble to fit, still on its own side.
   The class is set by justify-one-liner.js. */
.message--bubble.one-liner {
    width: auto;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}

/* Avatar and name header (ConversationAttribution). Left-aligned on the
   other side and on full-width comments; mirrored on the self side. */
.message-attribution {
    --message-avatar-size: 36px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    min-width: 0;
}

.message--self .message-attribution {
    flex-direction: row-reverse;
}

.message-avatar {
    width: var(--message-avatar-size);
    height: var(--message-avatar-size);
    flex: 0 0 var(--message-avatar-size);
    border-radius: var(--radius-full);
    display: block;
    object-fit: cover;
}

.message-author {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message Content */
.message-content {
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* Wide code scrolls inside its message instead of widening the page. */
.message-content pre {
    max-inline-size: 100%;
    overflow-x: auto;
}

/* Message Actions */
.message-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

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

/* Message Animations */
.message-fade-in {
    animation: fadeInSlide var(--transition-medium);
}

.message-fade-out {
    animation: fadeOutSlide var(--transition-medium) forwards;
}

/* Honor user motion preferences: messages appear and leave without moving. */
@media (prefers-reduced-motion: reduce) {
    .message-fade-in,
    .message-fade-out {
        animation: none;
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutSlide {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ============================================================
   INTERACTION BAR (MOBILE FIRST)
   ============================================================ */
/* The interaction bar is pinned to the bottom of the viewable area in every
   conversation state — empty thread or active one, mobile or desktop. Only its
   bottom edge is anchored; `top` stays `auto` so the bar grows upward as the
   composer auto-grows (see comment-form-vertical-scale-controller.js). Nothing
   in the theme should ever set `top` on this element. */
#fixed-content,
.interaction-bar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--content-max-width);
    box-sizing: border-box;
    padding: var(--spacing-lg);
    z-index: var(--z-fixed-form);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border: 1px solid var(--color-border-lighter);
    border-bottom: none;
    background: var(--color-bg-input);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

/* Desktop: Position above footer */
@media screen and (min-width: 782px) {
    #fixed-content,
    .interaction-bar {
        position: fixed;
        bottom: var(--footer-height);
        left: var(--sidebar-width-desktop);
        right: 0;
        width: auto;
        max-width: var(--content-max-width);
        margin: 0 auto;
        border-radius: var(--radius-xl);
        border: 1px solid var(--color-border-lighter);
    }

    /* The content column's left edge follows the sidebar rather than being
       hardcoded in three places. When the sidebar is collapsed the bar tracks
       #chat-main back to the viewport edge; when there is no sidebar at all
       (logged-out visitors never get one) neither the bar nor the footer is
       indented past content that starts at zero. */
    #chat-sidebar.sidebar-hidden + #chat-main #fixed-content,
    .primary-navigation.sidebar-hidden + .content-region .interaction-bar,
    body:not(.logged-in) #fixed-content,
    body:not(.logged-in) .interaction-bar {
        left: 0;
    }

    body:not(.logged-in) .site-footer {
        left: 0;
    }
}

/* Comment Form Container */
.comment-respond {
    margin: 0 auto;
    width: 100%;
    max-width: var(--content-max-width);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

#respond {
    background: var(--color-bg-input);
}

/* Hide comment-form chrome the chat composer does not use */
.comment-reply-title,
.logged-in-as,
.required-field-message,
.comment-form-cookies-consent {
    display: none;
}

/* Hidden from view but kept as the textarea's accessible name. */
.comment-form-comment label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Comment Form */
#commentform {
    background: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 9px;
    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;
}

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

.comment-form-comment {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex: 1;
}

/* Comment Textarea */
#comment {
    width: 100%;
    background-color: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    padding: var(--spacing-md) 45px var(--spacing-md) var(--spacing-md);
    resize: none;
    min-height: 140px;
    line-height: 1.5;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    margin-right: var(--spacing-2xl);
    outline: none;
    box-sizing: border-box;
}

#comment::placeholder {
    color: var(--color-text-placeholder);
    font-size: 16px;
    font-weight: 400;
}

/* Submit Button */
.form-submit {
    margin: 0;
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.form-submit input[type="submit"] {
    background-color: var(--color-submit);
    border: none;
    font-size: 0;
    color: transparent;
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);
    cursor: pointer;
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%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 var(--transition-fast),
                transform var(--transition-fast);
    text-indent: -9999px;
    overflow: hidden;
    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: var(--color-submit-hover);
    transform: scale(1.05);
}

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

/* Keyboard focus stays visible (docs/comment-form-chat-interface-report.md §6.2).
   Focus in the chat box lightens the box's own border rather than drawing a
   new shape; the send button keeps a ring. */
#fixed-content:focus-within,
.interaction-bar:focus-within {
    border-color: var(--color-border-focus);
}

.form-submit input[type="submit"]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* Comment Box Seamless Integration */
#fixed-content .comment-form-container {
    background: inherit;
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    outline: none;
}

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

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

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

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

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

#fixed-content * {
    box-sizing: border-box;
}

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

/* ============================================================
   ACTION BUTTONS
   ============================================================ */
.action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 6px 0 4px;
    width: 100%;
    align-items: center;
    margin-top: 2px;
    justify-content: flex-start;
}

.action-button {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: 5px 10px;
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-right: var(--spacing-xs);
    margin-bottom: 2px;
    height: 28px;
}

.action-button:hover {
    background-color: var(--color-hover-dark);
    border-color: #746887;
}

.action-button .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    margin-right: var(--spacing-xs);
    color: #bab2c7;
}

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

.action-button:hover .dashicons {
    color: var(--color-text-primary);
}

.action-button--add-media {
    padding: 4px 8px;
}

.action-button--add-media .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-right: 0;
}

.action-button-text {
    margin-left: var(--spacing-xs);
}


/* ============================================================
   COMMENT DROPDOWN META
   ============================================================ */
.comment-dropdown-meta-container {
    display: contents;
}

.comment-dropdown-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-right: var(--spacing-xs);
    margin-bottom: 2px;
}

.comment-dropdown-meta-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.comment-dropdown-meta-select {
    height: 28px;
    background-color: transparent;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    padding: 4px 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: auto;
}

.comment-dropdown-meta-select:hover {
    background-color: var(--color-hover-dark);
    border-color: #746887;
}

.comment-dropdown-meta-select:focus {
    outline: none;
    border-color: var(--color-text-primary);
}

.comment-dropdown-meta .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: #bab2c7;
}

/* Mobile adjustments */
@media (max-width: 700px) {
    #commentform {
        padding: 10px var(--spacing-md);
    }

    #comment {
        font-size: 14px;
    }

    .action-button {
        padding: 4px var(--spacing-sm);
        font-size: 12px;
    }

    .action-button .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .action-button-text {
        margin-left: 2px;
    }

    .comment-dropdown-meta-label {
        font-size: 12px;
    }

    .comment-dropdown-meta-select {
        padding: 3px 6px;
        font-size: 12px;
    }

    .comment-dropdown-meta .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
}

/* ============================================================
   UNIFIED CHAT COMMENT BOX
   ============================================================ */
.comment-box-inner {
    background-color: var(--color-bg-input);
    border-radius: var(--radius-md);
    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: var(--content-max-width);
    width: 100%;
    transition: box-shadow var(--transition-fast);
    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: var(--spacing-sm) var(--spacing-md);
}

.tools-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

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

/* Tool Buttons (Mobile First) */
.plus-icon,
.tools-button,
.microphone-button,
.submit-arrow {
    background: none;
    border: none;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

.plus-icon:hover,
.tools-button:hover,
.microphone-button:hover {
    background-color: var(--color-hover-light);
    color: #374151;
}

.submit-arrow {
    background-color: var(--color-accent);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: bold;
}

.submit-arrow:disabled {
    background-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Desktop tool buttons */
@media screen and (min-width: 782px) {
    .tools-left {
        gap: var(--spacing-md);
    }

    .tools-right {
        gap: var(--spacing-sm);
    }

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

    .submit-arrow {
        width: var(--spacing-2xl);
        height: var(--spacing-2xl);
        font-size: 16px;
    }
}

/* ============================================================
   POST CONTENT
   ============================================================ */
.post-content {
    width: 100%;
    padding: var(--spacing-lg);
    margin: 0 0 var(--spacing-xl) 0;
    box-sizing: border-box;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.5;
    background: none;
    border: none;
    overflow-wrap: break-word;
}

.post-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.post-content .wp-block-embed-youtube iframe {
    width: 100%;
    max-width: 100%;
}

.post-content .wp-block-embed-youtube iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
}

/* Block content. Centring at the content width, wide alignment and floats
   come from core's constrained layout (theme.json settings.layout and the
   is-layout-constrained class on .post-content). The theme adds what core
   leaves to a classic theme: full-width blocks breaking out past this
   element's padding, and the content colours the block editor canvas also
   uses (src/AI_Style/block-editor/editor-style.css). */
.post-content > .alignfull {
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    max-width: none;
    width: auto;
}

.post-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text-primary);
    line-height: 1.3;
}

.post-content a:where(:not(.wp-element-button)) {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-content :is(code, kbd) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875em;
}

.post-content :not(pre) > code {
    background-color: var(--color-bg-message-user);
    border-radius: var(--radius-sm);
    padding: 0.125em 0.375em;
}

.post-content img {
    max-width: 100%;
    height: auto;
}

/* Core's table borders use currentColor, which is near-white here. */
.post-content .wp-block-table :is(thead, tfoot, th, td) {
    border-color: var(--color-border-primary);
}

.post-content .wp-block-table :is(th, td) {
    padding: 0.5em 0.75em;
}

.post-content .wp-block-table th {
    color: var(--color-text-primary);
}

#post-content-1 {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-lg);
}

/* ============================================================
   FOOTER (MOBILE FIRST - HIDDEN ON MOBILE)
   ============================================================ */
.site-footer {
    display: none;
}

@media screen and (min-width: 782px) {
    .site-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: var(--sidebar-width-desktop);
        right: 0;
        width: auto;
        background-color: var(--color-bg-footer);
        color: var(--color-text-footer);
        text-align: center;
        padding: 4px 0;
        font-size: 12px;
        border-top: 1px solid var(--color-border-primary);
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
        letter-spacing: 0.2px;
        height: var(--footer-height);
        box-sizing: border-box;
        z-index: var(--z-footer);
    }
}

/* ============================================================
   WORDPRESS ADMIN BAR TOGGLE BUTTONS
   ============================================================ */
/* Sidebar Toggle Button */
#wpadminbar #wp-admin-bar-sidebar-toggle .ab-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    visibility: visible;
    opacity: 1;
}

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

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

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

/* Mobile Hamburger Icon (only displayed at WordPress's mobile admin-bar width) */
#wp-admin-bar-mobile-hamburger {
    display: none;
}

#wp-admin-bar-mobile-hamburger .ab-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    text-decoration: none;
    color: #a7aaad;
    font-size: 13px;
    line-height: var(--admin-bar-mobile);
    height: var(--admin-bar-mobile);
}

#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: 13px;
    display: inline-block;
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile responsive behavior */
@media screen and (max-width: 782px) {
    #wp-admin-bar-mobile-hamburger {
        display: block !important;
        visibility: visible !important;
    }

    #wpadminbar #wp-admin-bar-sidebar-toggle {
        display: none !important;
        visibility: hidden !important;
    }

    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item {
        display: none !important;
        visibility: hidden !important;
    }

    #wpadminbar #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: none !important;
    }
}

/* Desktop responsive behavior */
@media screen and (min-width: 782px) {
    #wp-admin-bar-mobile-hamburger {
        display: none !important;
    }

    #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;
    }

    #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) {
    #chat-sidebar:not(.sidebar-hidden),
    .primary-navigation:not(.sidebar-hidden) {
        width: 85% !important;
        min-width: 85% !important;
    }
}

/* High zoom level styles (250%+) */
@media screen and (min-resolution: 2.5dppx),
       screen and (-webkit-min-device-pixel-ratio: 2.5) {
    #chat-sidebar:not(.sidebar-hidden),
    .primary-navigation:not(.sidebar-hidden) {
        width: 85% !important;
        min-width: 85% !important;
    }

    #wp-admin-bar-sidebar-toggle .ab-item .ab-label {
        display: none !important;
    }
}

/* ============================================================
   BLOG ROLL / ARCHIVE STYLES (YouTube Correspondence)
   - Two row types: landscape tile row + full-width content row.
   - 4-up tile grid at 1920x1080 baseline; responsive elsewhere.
   - Tile internals: avatar + bold title + non-bold secondary line.
   ============================================================ */
.blog-roll-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-md);
    box-sizing: border-box;
    padding-bottom: 0;
}

.blog-roll-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--archive-grid-gap);
    width: 100%;
}

.blog-roll-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--archive-tile-radius);
    overflow: hidden;
    transition: background-color var(--transition-medium),
                border-color var(--transition-medium),
                transform var(--transition-medium),
                box-shadow var(--transition-medium);
    border: 1px solid var(--color-border-light);
}

.blog-roll-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-border-lighter);
    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%;
    aspect-ratio: var(--archive-tile-aspect);
    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 var(--transition-medium);
}

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

.blog-roll-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.02));
    color: rgba(255, 255, 255, 0.3);
}

.blog-roll-placeholder-icon {
    font-size: 48px;
    line-height: 1;
}

.blog-roll-tile-meta {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

.blog-roll-avatar-cell {
    flex-shrink: 0;
    margin-top: 2px;
}

.blog-roll-avatar {
    width: var(--archive-avatar-size);
    height: var(--archive-avatar-size);
    border-radius: var(--radius-full);
    display: block;
}

.blog-roll-text-block {
    flex: 1;
    min-width: 0;
}

.blog-roll-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--color-text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-roll-secondary {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.blog-roll-secondary .blog-roll-sep {
    opacity: 0.6;
}

.blog-roll-content-row {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    color: var(--color-text-secondary);
}

.blog-roll-content-row > *:first-child {
    margin-top: 0;
}

.blog-roll-content-row > *:last-child {
    margin-bottom: 0;
}

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

/* Empty views: 404, a search with no results, an archive with no posts. */
.empty-state {
    max-width: 560px;
    margin: 0 auto;
    padding: 64px var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state__title {
    margin: 0 0 var(--spacing-md);
    font-size: 1.75rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.empty-state__message {
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text-muted);
}

.empty-state .search-form {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.empty-state .search-form label {
    flex: 1 1 auto;
    max-width: 360px;
}

.empty-state .search-field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-message-user);
    color: var(--color-text-primary);
    font: inherit;
}

.empty-state .search-submit {
    padding: 10px 18px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--color-text-primary);
    color: var(--color-bg-tertiary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.empty-state .search-field:focus-visible,
.empty-state .search-submit:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Links between the pages of a post split with <!--nextpage-->. */
.post-content .post-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-lg);
    color: var(--color-text-muted);
}

.post-content .post-nav-links .post-page-numbers {
    min-width: 2em;
    padding: 4px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--color-text-primary);
    text-decoration: none;
}

.post-content .post-nav-links .post-page-numbers.current {
    background-color: var(--color-bg-message-user);
}

/* Responsive tiles-per-row table.
   Capacity changes by viewport breakpoint. The 1920x1080 baseline
   resolves to the 4-up state via the >=1500px breakpoint, since the
   archive content area is ~1543px after the desktop sidebar. */
@media screen and (min-width: 600px) {
    .blog-roll-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 782px) {
    .blog-roll-container {
        padding: var(--spacing-lg);
    }

    .blog-roll-grid {
        gap: var(--archive-grid-gap-desktop);
    }
}

@media screen and (min-width: 1100px) {
    .blog-roll-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1500px) {
    .blog-roll-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

@media screen and (min-width: 2200px) {
    .blog-roll-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================================
   BLOG ROLL PAGINATION (MOBILE FIRST)
   ============================================================ */
.blog-roll-pagination {
    margin: 20px 0 80px 0;
    padding: var(--spacing-md) 0;
    text-align: center;
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: var(--z-fixed-form);
    clear: both;
}

.pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    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: 6px var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
    font-size: 12px;
    font-weight: 500;
    min-width: 32px;
    text-align: center;
    box-sizing: border-box;
}

.pagination-list a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-lighter);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.pagination-list .current-page {
    display: inline-block;
    padding: 6px var(--spacing-sm);
    background-color: #423a50;
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-lighter);
    font-size: 12px;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
    box-sizing: border-box;
}

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

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

/* Larger mobile screens */
@media screen and (min-width: 480px) {
    .pagination-list {
        gap: 6px;
    }

    .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 var(--spacing-md);
    }
}

/* Desktop pagination */
@media screen and (min-width: 782px) {
    .blog-roll-pagination {
        margin: var(--spacing-2xl) 0 120px 0;
        padding: var(--spacing-lg) 0;
    }

    .pagination-list {
        gap: var(--spacing-sm);
    }

    .pagination-list a,
    .pagination-list .current-page {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 14px;
        min-width: 40px;
    }

    .pagination-list .prev-page a,
    .pagination-list .next-page a {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

/* ============================================================
   SINGULAR META (POST HEADER)
   ============================================================ */
.ai-style-singular-meta {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
}

.ai-style-singular-meta__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Title + byline (avatar over date). Stacked on phones: title, avatar, date. */
.ai-style-singular-meta__heading,
.ai-style-singular-meta__byline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.ai-style-singular-meta__author {
    display: flex;
    align-items: center;
}

.ai-style-singular-meta__author img {
    border-radius: var(--radius-full);
    display: block;
}

.ai-style-singular-meta__featured-image,
.ai-style-singular-featured-image {
    max-width: 100%;
}

.ai-style-singular-featured-image {
    height: auto;
    display: block;
}

.ai-style-singular-meta__datetime {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.ai-style-singular-meta__excerpt {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

@media screen and (min-width: 782px) {
    .ai-style-singular-meta {
        padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);
    }

    .ai-style-singular-meta__title {
        font-size: 28px;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Byline column on the left, title beside it. */
    .ai-style-singular-meta__heading {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .ai-style-singular-meta__byline {
        order: -1;
        flex: 0 0 auto;
        align-items: center;
    }

    .ai-style-singular-meta__datetime {
        white-space: nowrap;
    }
}

/* ============================================================
   LEGACY / COMPATIBILITY STYLES
   ============================================================ */
#chat-input {
    flex: 0 0 auto;
    padding: 0;
    background: var(--color-bg-secondary);
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
    z-index: var(--z-chat-input);
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    left: 0;
    transform: none;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    #chat-container,
    .layout-shell {
        flex-direction: column;
    }
    #chat-sidebar,
    .primary-navigation {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #ccc;
        height: 30vh;
        overflow-y: auto;
    }
    #chat-main,
    .content-region {
        width: 100%;
        height: 70vh;
        overflow-y: auto;
    }
}